diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
index 2e2e5faf..81f58bec 100644
--- a/ARCHITECTURE.md
+++ b/ARCHITECTURE.md
@@ -17,7 +17,7 @@ per source file, no bundling — and `sideEffects` is declared CSS-only. The roo
 re-exports only, so importing from the root and importing by subpath both bundle just
 what you used. They are not guaranteed byte-for-byte identical — a bundler may order or
 name things differently depending on the entry — but neither drags in a component you did
-not reference. One module is deliberately excluded from the root entry; see below.
+not reference.
 
 **Abstraction has to earn its place.** No config indirection, no speculative extension
 points. There is no CLI, no component generator and no docs site, and that is deliberate.
@@ -47,73 +47,12 @@ its own boundary (see README). Baking one framework's convention into a hundred
 published files would make correctness depend on a build step no plain-React consumer
 runs, and hide the boundary where the consumer cannot see it.
 
-## The `DataPort` seam
+## No fetch, ever
 
 Components in this package **never fetch**, and never import a server-side package. A
 component that fetches has chosen the consumer's data layer for them; a component that
-imports a server package drags a database tree into a browser bundle.
-
-Data arrives one of two ways: as props, or through a `DataPort`. That is the
-README contract — components take data through a `DataPort` (or none). "None"
-is a props-only surface; `DataPortProvider` is required only for components
-that call `useDataPort`.
-
-```ts
-type DataPort = {
-  readonly useCollection: <T>(request: CollectionRequest<T>) => CollectionResult<T>;
-};
-```
-
-A component declares *what* it needs — a stable cache key plus a `fetch` thunk that takes
-`{ signal, offset, pageSize }` and returns `{ items, nextOffset }` — and learns nothing
-about how the result is cached, deduped or revalidated. The port is resolved from React
-context (`DataPortProvider` / `useDataPort`), and `useDataPort` throws with a wiring
-message rather than returning `null`.
-
-Three details in `CollectionResult` are load-bearing:
-
-- **`isLoading` and `isFetching` are separate.** `isLoading` means there is nothing to
-  show yet; `isFetching` means a request is in flight, including a background refetch
-  over rows already on screen. Only `isFetching` is an honest input to `aria-busy`.
-- **Pagination costs one field, not a second code path.** A source that returns
-  everything at once reports `nextOffset: null`. There is no paginated variant of any
-  component.
-- **Collections only.** There is deliberately no `useRecord` and no `useMutation` — a
-  mutation shape invented before its first consumer is a shape that will be wrong.
-
-`createTanstackDataPort()` (`lib/tanstack-data-port`) implements `DataPort` over TanStack
-Query's infinite-query API. It is a separate module on purpose: the seam is the type, the
-adapter is one implementation, and that separation is what lets `@tanstack/react-query`
-stay an **optional** peer. A consumer on SWR, a websocket cache or a fixture port swaps
-the provider value and changes no component.
-
-The adapter is therefore the one public module excluded from the root barrel
-(`BARREL_EXCLUDED` in `scripts/generate-exports.mjs`). `src/index.ts` is a single module:
-a bundler tree-shakes *bindings* out of it, but still resolves every module it re-exports,
-so re-exporting the adapter would make `import { Button } from "@corbits/react-ui"` fail
-outright for anyone who did not install the optional peer. This is bundler-dependent —
-Node and Vite fail, Turbopack compiles it — so `dep-guard` walks the relative import graph
-from `src/index.ts` and fails if anything reachable from it imports an optional peer.
-
-## `use-collection-state`
-
-Every collection surface — a table, a list, a grid, a step rail — has the same four
-states. `useCollectionState(request)` collapses a `CollectionResult` into exactly that
-discriminated union and **renders nothing**.
-
-```ts
-type CollectionState<T> =
-  | { status: "loading" }
-  | { status: "error"; error: Error }
-  | { status: "empty" }
-  | { status: "ready"; items: readonly T[] };
-```
-
-The ordering is the whole machine: `isLoading` wins, then `error`, then an empty `items`,
-then ready. Getting it wrong is how a surface renders "no results" during a first load, or
-an empty state over a failed request. It renders nothing because the markup belongs to the
-surface; `isFetching`, `refetch`, `hasNextPage` and `fetchNextPage` pass through unchanged.
-
+imports a server package drags a database tree into a browser bundle. Data arrives as
+props — the host owns its own data layer, caching and pagination.
 ## `CommandPalette`
 
 `CommandPalette` is a global-search overlay with no idea what it is searching. It takes
@@ -215,30 +154,26 @@ validator yourself.
 
 ## Pieces, then one wrapper
 
-A composite surface — an inspector, a registry list, a step diagram — is built as small
-stateless pieces plus at most one composition wrapper. Each piece is its own file and its
-own export, takes everything through props, holds no state of its own, and renders on its
-own (`LiveRunHeader`, `LiveRunBanner`, `StepList`, `InspectorKv`, `InspectorPanelTitle`).
-The wrapper (`LiveRunInspector`) contains no markup the pieces do not already carry: it
-only decides which pieces render and in what order, so replacing one piece never means
-forking the wrapper. `WorkflowStatusBadge` is the same idea one level down — a `Badge`
-carrying a `StatusDot`, not a bespoke "status chip" component, because `Badge` and
-`StatusDot` already exist and composing them is cheaper than a third thing that does
-what the first two already do together.
+A composite surface — an inspector, a step rail, a chat thread — is built as small
+stateless pieces plus at most one composition wrapper. Each piece takes everything
+through props, holds no state of its own, and renders on its own (`LiveRunBanner`,
+`StepList`, `InspectorKv`, `InspectorPanelTitle`, `SidebarPanelBody`). A wrapper
+contains no markup the pieces do not already carry: it only decides which pieces
+render and in what order, so replacing one piece never means forking the wrapper.
 
 Behaviour and arithmetic split out the same way: a reusable behaviour becomes a headless
 hook in `src/hooks/` (`use-scroll-current-into-view` renders nothing and returns a ref),
-and layout math becomes plain functions in `src/lib/` (`step-graph-layout`, like
-`chart-geometry`, is numbers in and numbers out, checkable without rendering anything).
+and layout math becomes plain functions in `src/lib/` (`chart-geometry` is numbers in
+and numbers out, checkable without rendering anything).
 
 ## Layout
 
 | | |
 | --- | --- |
 | `src/ui/` | Components. Primitives, collection surfaces, shells, and the domain families. |
-| `src/lib/` | Non-component source: `utils`, the `DataPort` seam and its adapter, the per-domain shapes, and the internal chart palette and geometry. |
-| `src/hooks/` | 15 headless hooks: `use-collection-state`, `use-anchored-scroll`, `use-chat-dock`, `use-command-palette-navigation`, `use-controllable-state`, `use-delayed-autofocus`, `use-dismissable-popover`, `use-flip-transition`, `use-focus-trap`, `use-prefers-reduced-motion`, `use-render-rail`, `use-resizable-rail`, `use-scroll-current-into-view`, `use-sidebar-panel`, `use-view-mode`. |
-| `src/blocks/` | Multi-file compositions (`login`, `access-notice`, `canvas-host`). |
+| `src/lib/` | Non-component source: `utils`, the per-domain shapes, and the internal chart palette and geometry. |
+| `src/hooks/` | 7 headless hooks: `use-command-palette-navigation`, `use-controllable-state`, `use-delayed-autofocus`, `use-dismissable-popover`, `use-list-selection`, `use-prefers-reduced-motion`, `use-scroll-current-into-view`. |
+| `src/blocks/` | Multi-file compositions (`login`). |
 | `src/theme.css` | Tokens, keyframes, base layer. The only CSS source. |
 | `src/styles.css` | Two `@import`s. The entry Tailwind compiles into `dist/styles.css`. |
 | `src/index.ts` | The root barrel. **Generated** — do not edit. |
@@ -255,6 +190,13 @@ line-by-line review of every file; it is a targeted grep-and-read over the
 patterns below, cross-checked against what similar components in the
 library already do.
 
+This is a historical record of that pass. Several components it names —
+`TenantSelector`, `ThreadSwitcher`, `SubagentDock`, `OnboardingTour`,
+`DitherBackground`, `SidebarRail`, `StepSidebar`, `LiveRunInspector` and
+others — were removed later, when a consumer-usage audit pruned every module
+no known consumer imports. The findings and the standing rules they produced
+still apply to what remains.
+
 Every surveyed module is re-exported from the package root (`src/index.ts`),
 so "public surface" doesn't distinguish findings the way it might in an app —
 everything here is public. Blast radius instead counts how many other
@@ -307,9 +249,9 @@ Audited every array-of-object prop in `src/ui`/`src/blocks`
 `kind-card-grid`, `progress-checklist`, `step-list`, `horizontal-stepper`,
 and others). **No findings.** Every one of these is a collection-rendering
 component — a table row set, a step rail, a filter list — consistent with
-the `DataPort`/`use-collection-state` architecture above, where components
+the props-only data flow above, where components
 render data the host doesn't have pre-built React elements for (it has
-domain objects: a `Tenant`, a `WorkflowStep`, a `FilterSpec`). Slots are
+domain objects: a `WorkflowStep`, a `FilterSpec`). Slots are
 used elsewhere in the library exactly where the content genuinely is
 caller-arbitrary markup (`NotificationsBell`'s `children`, `AuthLayout`'s
 `panel`). Swapping a config-array prop for children in a collection
@@ -401,10 +343,9 @@ already in the tree.
 piece of state answers "is this open/collapsed/expanded" and a reasonable
 host might want to read or drive it — closing every other panel when one
 opens, restoring a collapsed sidebar from a saved preference — it's a prop
-pair: `open` + `onOpenChange`, or `collapsed` + `onToggle`. `Sidebar`,
-`StepSidebar` and `CanvasHost` set this precedent; `Dialog` and
-`CommandPalette` apply it to popups; `NotificationsBell`, `TenantSelector`,
-`ThreadSwitcher`, `ToolBlock` and `ToolNarrative` now do too, all
+pair: `open` + `onOpenChange`, or `collapsed` + `onToggle`. `Sidebar` sets
+this precedent; `Dialog` and `CommandPalette` apply it to popups;
+`NotificationsBell`, `ToolBlock` and `ToolNarrative` do too, all
 uncontrolled-by-default so adding the pair is never a breaking change. The
 exception is state a parent has no legitimate reason to want: `ActivityBlock`
 stays a native `<details>`, and a text-truncation toggle stays local. If
@@ -424,9 +365,8 @@ component whose job is to render caller-supplied content it has no opinion
 about (`NotificationsBell`'s `children`, `AuthLayout`'s `panel`) takes
 `children` or a named slot. A component whose job is to render a
 *collection* of the library's own domain shapes (a list of `WorkflowStep`, a
-list of `Tenant`) takes that collection as a data prop, the same way
-`DataPort` and `use-collection-state` already assume — that's what makes a
-table, a list and a step rail interchangeable consumers of one
+list of chat messages) takes that collection as a data prop — that's what
+makes a table, a list and a step rail interchangeable consumers of one
 loading/empty/error contract. Don't reach for a config-object prop as a
 substitute for either of these; if you're tempted to add one, first check
 whether the content is actually caller-arbitrary (make it `children`) or
@@ -436,12 +376,12 @@ shape).
 **Non-trivial imperative behavior lives in a headless hook, not the
 component body.** Event listeners, focus management, measurement, timers,
 keyboard handling — if two components would otherwise duplicate the same
-`useEffect`, that's the hook boundary. `use-focus-trap`,
-`use-command-palette-navigation`, `use-resizable-rail`,
-`use-dismissable-popover` and `use-prefers-reduced-motion` are the existing
-examples: each owns exactly the imperative part and returns refs/values, no
-markup. Before writing a second `addEventListener` pair that looks like one
-already in the tree, grep `src/hooks` first.
+`useEffect`, that's the hook boundary. `use-command-palette-navigation`,
+`use-dismissable-popover`, `use-prefers-reduced-motion` and
+`use-controllable-state` are the existing examples: each owns exactly the
+imperative part and returns refs/values, no markup. Before writing a second
+`addEventListener` pair that looks like one already in the tree, grep
+`src/hooks` first.
 
 **Every color comes from a token, with no unconditional literal fallback.**
 `src/theme.css` is the only place a hex, rgb or named color belongs. A
@@ -456,23 +396,19 @@ literal is by construction correct in at most one theme.
 global CSS rule handles every `transition-*`/`animate-*` utility for free —
 don't re-implement that check for a component using only CSS transitions.
 The rule doesn't reach `requestAnimationFrame` loops or imperative calls
-like `scrollIntoView`; those call `usePrefersReducedMotion()` (or, for
-something that needs its own live `MediaQueryList` listener mid-loop,
-follow `DitherBackground`'s pattern) rather than a one-shot
-`matchMedia(...).matches` read that goes stale the moment the OS setting
-changes.
+like `scrollIntoView`; those call `usePrefersReducedMotion()` rather than a
+one-shot `matchMedia(...).matches` read that goes stale the moment the OS
+setting changes.
 
 ## Known limits
 
-- **`DataPort` covers collections only.** Single-record reads and mutations are absent by
   decision, not by oversight.
 - **Tests exist but are partial.** `bun test` runs 338 tests co-located with their
   subjects (`src/**/*.test.tsx`), plus shared harnesses under `src/test/` — the
   measurable half of appearance (contrast, in both modes) is gated in the build,
   and a growing slice of behaviour is now covered by these, but most components
-  still have no test.
-- **A rendering gallery exists but is partial.** Ladle (`bun run stories`, `bun run
-  stories:build`) renders 52 stories under `stories/`; most of the ~150 components have
+  still have no test.- **A rendering gallery exists but is partial.** Ladle (`bun run stories`, `bun run
+  stories:build`) renders 42 stories under `stories/`; most of the ~90 components have
   none, so visual review of an uncovered component still means rendering the package
   inside a consumer app.
 - **The prebuilt stylesheet restyles the consuming page** — it carries Tailwind's
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f2db32e3..46ab9055 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,16 +12,41 @@ contract — modules that are not exported are internal and may change in any re
 
 ### Breaking changes since 0.1.0
 
+- **84 modules removed — every module no known consumer imports.** A usage audit across
+  the workbench, portal, scout and solutions-builder codebases showed these surfaces were
+  unreachable from any consumer, so they were deleted rather than carried as semver
+  promises. The removed clusters: the entire `DataPort` seam (`lib/data-port`,
+  `lib/tanstack-data-port`, `hooks/use-collection-state`) and its dependents
+  (`data-table`, `thread-list`, `command-queue`); the now-inbox surfaces (`mail-detail`,
+  `triage-pane`, `context-strip`, `activity-timeline`, `moment-walker`, `actor-summary`);
+  all scheduling (`schedule-*`, `run-once-flow`,
+  `recurrence-input`); the workflow registry (`workflow-registry-*`, `workflow-catalog`,
+  `workflow-dock`, `workflow-status-badge`); step-graph visualization (`step-graph`,
+  `step-graph-node`, `step-sidebar`, `step-primitives`, `lib/step-graph-layout`);
+  `subagent-dock`, `chat-dock` and `message-list`; the canvas/artifact-host surfaces
+  (`access-notice`, `canvas-host`, `canvas-host-chrome`, `generative-block-view`,
+  `artifact-detail`, `artifact-gallery`, `add-artifact-dialog`); and the unused
+  primitives and screens (`dial`, `pagination`, `radio-group`, `pulsing-ring`,
+  `dashboard`, `dashboard-section`, `whats-new`, `onboarding-tour`,
+  `reconnecting-overlay`, `stat-tile`, `delta-badge`, `count-table`, `heatmap`,
+  `kind-picker`, `toggle-list`, `managed-list`, `tenant-selector`, `thread-switcher`,
+  `section-nav`, `sidebar-rail`, `sidebar-section`, `read-block`, `render-rail`,
+  `failed-run-notice`, `live-run-header`, `live-run-inspector`, `time-range-control`,
+  `library-search-input`, `catalog-glyph`, `command`, `lib/command-registry`,
+  `dither-background`, and the hooks that only served them). `agent-turn` and
+  `activity-block` stayed — `chat-thread` uses them. The package is now 113
+  public modules. **`@tanstack/react-query` is no longer a peer dependency** —
+  nothing in the package imports it.
 - **`AuthLayout` no longer defaults its decorative panel to `DitherCanvas`.** The panel is
-  now an explicit `panel` slot with no fallback — pass `<DitherCanvas />`,
-  `<DitherBackground src={...} />`, or any other content. A caller that omitted `panel` to
-  get the dither canvas for free now gets a bare panel instead.
+  now an explicit `panel` slot with no fallback — pass `<DitherCanvas />` or any other
+  content. A caller that omitted `panel` to get the dither canvas for free now gets a
+  bare panel instead. (`DitherBackground` was among the removed modules.)
 - **`ui/command` is removed.** `Command` was a second, weaker inline command surface next
   to `CommandPaletteInline` — index-based keyboard navigation (which loses the highlighted
   row when the list re-sorts under a keystroke) and self-filtering, where the palette
-  family deliberately leaves matching to the caller. `CommandAction` moves to
-  `lib/command-registry`, its only consumer; `commandMatches` is gone with the component.
-  Root-barrel imports of `CommandAction` still work; the `./ui/command` subpath is gone.
+  family deliberately leaves matching to the caller. `commandMatches` is gone
+  with the component. The `./ui/command` subpath is gone. `lib/command-registry`
+  (and `CommandAction`) is also in the unconsumed prune above.
 
 ## [0.1.0] - 2026-09-17
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index e6497118..98b69ee7 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -12,8 +12,8 @@ bun install
 bun run build
 ```
 
-There is no database and no backend. If a change needs one, it belongs behind the
-`DataPort` seam, not in a component.
+There is no database and no backend. If a change needs one, it belongs in the
+consumer's data layer, not in a component — data arrives as props.
 
 ## Gates
 
@@ -48,25 +48,23 @@ the build gate does not cover them. Record the result in the change.
 
 ## The dep-guard
 
-`scripts/dep-guard.mjs` walks every `.ts` / `.tsx` under `src/` and enforces three rules.
+`scripts/dep-guard.mjs` walks every `.ts` / `.tsx` under `src/` and enforces two rules.
 The forbidden strings are named here deliberately — a guard whose forbidden string is a
 secret is a guard nobody can comply with.
 
 1. **No `@workbench/*`.** A published file that imports an unpublished scope is
    uninstallable for everyone outside the project that defines it, and the failure lands
    in the *consumer's* install, where they cannot fix it.
-2. **Only `lib/tanstack-data-port.ts` imports `@tanstack/react-query`.** That is what lets
-   the query library be an *optional* peer dependency.
-3. **Nothing reachable from the root barrel imports an optional peer.** Rule 2 alone does
-   not cover this: re-exporting the adapter from `src/index.ts` keeps rule 2 green while
-   making the optional peer mandatory for every root import.
+2. **Nothing reachable from the root barrel imports an optional peer.** Re-exporting a
+   module that statically imports an optional peer makes that peer mandatory for every
+   root import, so such a module must be kept out of the barrel (`BARREL_EXCLUDED`).
 
 The same rule, not machine-checked, applies to server-side packages: a component must
 never import one. They carry database drivers, and pulling one into a browser bundle is a
-category error. Data reaches a component through props or a `DataPort`.
+category error. Data reaches a component through props.
 
-Wanting to relax any of this is the signal to widen the `DataPort` or add a prop — never
-to import your way around it.
+Wanting to relax any of this is the signal to add a prop — never to import your way
+around it.
 
 ## Adding a component
 
diff --git a/IMPLEMENTATION.md b/IMPLEMENTATION.md
index 5b4dad1c..83facb5e 100644
--- a/IMPLEMENTATION.md
+++ b/IMPLEMENTATION.md
@@ -1,7 +1,7 @@
 # Implementation
 
 Concrete toolchain, peers, formats and publish layout. Design of the
-`DataPort` seam and the theme layer lives in [ARCHITECTURE.md](./ARCHITECTURE.md).
+no-fetch rule and the theme layer lives in [ARCHITECTURE.md](./ARCHITECTURE.md).
 Why the library exists lives in [PRODUCT.md](./PRODUCT.md).
 
 ## Runtime
@@ -14,8 +14,6 @@ Why the library exists lives in [PRODUCT.md](./PRODUCT.md).
   `@radix-ui/react-dialog` (`^1.1.15`), `@radix-ui/react-dropdown-menu`
   (`^2.1.16`), `@radix-ui/react-slot` (`^1.2.3`),
   `@radix-ui/react-tooltip` (`^1.2.8`).
-- Optional peer: `@tanstack/react-query` (`^5.90.2`), needed only for
-  `createTanstackDataPort()`. Declared in `peerDependenciesMeta`.
 - Direct dependencies: `class-variance-authority`, `clsx`, `tailwind-merge`.
 - `sideEffects` is CSS-only (`**/*.css`). `files` publishes `dist/` only.
 
@@ -38,8 +36,9 @@ alias. `prepack` runs the whole build so a failing gate cannot be packed.
 no-op when `dist/` is already present.
 
 Other scripts: `bun run typecheck`, `bun run lint` (eslint),
-`bun run dep-guard` (`scripts/dep-guard.mjs`), `bun test`, `bun run stories`
-/ `stories:build` ([Ladle](https://ladle.dev) over `stories/`).
+`bun run dep-guard` (`scripts/dep-guard.mjs` — fails if any file imports
+`@workbench/*`), `bun test`, `bun run stories` / `stories:build`
+([Ladle](https://ladle.dev) over `stories/`).
 
 ## CSS artifacts
 
@@ -64,20 +63,6 @@ writes `.dark`, `data-theme`, and `color-scheme` on a root (default
 mode is `"system"`. `ThemeToggle` / `useTheme` require the provider; the
 rest of the library does not.
 
-## DataPort adapter
-
-`src/lib/data-port.ts` is the seam type plus `DataPortProvider` /
-`useDataPort`. `src/lib/tanstack-data-port.ts` is the one implementation:
-`useInfiniteQuery` from `@tanstack/react-query`, `initialPageParam: 0`,
-`getNextPageParam` from `page.nextOffset`. That file is the only public
-module on `BARREL_EXCLUDED` in `scripts/generate-exports.mjs` — import it by
-subpath `@corbits/react-ui/lib/tanstack-data-port`. The host must already
-have a TanStack `QueryClientProvider`.
-
-`dep-guard` fails if anything reachable from `src/index.ts` imports an
-optional peer, if any file other than the adapter imports
-`@tanstack/react-query`, or if any file imports `@workbench/*`.
-
 ## Publish
 
 Registry install is the documented path (`npm` / `pnpm` / `yarn` /
diff --git a/PRODUCT.md b/PRODUCT.md
index 151a2f7b..e577828a 100644
--- a/PRODUCT.md
+++ b/PRODUCT.md
@@ -22,8 +22,8 @@ It is not a design-system starter, not a CLI, and not a template app.
 - Import one module at a time (`@corbits/react-ui/ui/button`) or from the
   root barrel, and bundle only what they used.
 - Render collection surfaces against *their* data. Components never fetch.
-  Data arrives as props, or through a `DataPort` the host provides. Pieces
-  that take no collection need no port at all.
+  Data arrives as props. Pieces that take no collection need no extra
+  host wiring.
 - Style with a single prebuilt sheet (`@corbits/react-ui/styles.css`) and no
   Tailwind, or import `@corbits/react-ui/theme.css` into an existing Tailwind
   v4 build.
@@ -36,8 +36,7 @@ It is not a design-system starter, not a CLI, and not a template app.
 ## What it is not
 
 There is no CLI, no component generator, and no docs site. There is no
-server, no database, and no default backend. `@tanstack/react-query` is
-optional and only required if the host uses `createTanstackDataPort()`.
+server, no database, and no default backend.
 
 The prebuilt stylesheet is not inert: it restyles the consuming page
 (Tailwind preflight plus a base layer). Import it at the root of an app that
diff --git a/README.md b/README.md
index 0ed8bc32..103f62e3 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,10 @@
 # @corbits/react-ui
 
-React components for agent and workflow surfaces — chat, runs, schedules, artifacts, analytics, collections. Import one module at a time, or from the root barrel.
+React components for agent and workflow surfaces — chat, runs, artifacts, analytics, collections. Import one module at a time, or from the root barrel.
 
 ## Runtime support
 
-Node >= 24 consumes built `dist/`. Peers: `react` and `react-dom` (18 or 19), `lucide-react`, `sonner`, `@radix-ui/react-dialog`, `@radix-ui/react-dropdown-menu`, `@radix-ui/react-slot`, `@radix-ui/react-tooltip`. `@tanstack/react-query` is an optional peer, needed only for `createTanstackDataPort()`.
+Node >= 24 consumes built `dist/`. Peers: `react` and `react-dom` (18 or 19), `lucide-react`, `sonner`, `@radix-ui/react-dialog`, `@radix-ui/react-dropdown-menu`, `@radix-ui/react-slot`, `@radix-ui/react-tooltip`.
 
 ## Quickstart
 
@@ -29,39 +29,30 @@ import { Button } from "@corbits/react-ui/ui/button";
 <Button onClick={() => start()}>Run now</Button>
 ```
 
-Every component is importable by subpath (`@corbits/react-ui/ui/button`) or from the root (`@corbits/react-ui`). One module is subpath-only: `@corbits/react-ui/lib/tanstack-data-port`, because it statically imports the optional `@tanstack/react-query` peer.
+Every component is importable by subpath (`@corbits/react-ui/ui/button`) or from the root (`@corbits/react-ui`).
 
 ```tsx
 import "@corbits/react-ui/styles.css";
 
 import { Button } from "@corbits/react-ui/ui/button";
-import { DataTable } from "@corbits/react-ui/ui/data-table";
-import { DataPortProvider } from "@corbits/react-ui/lib/data-port";
-import { createTanstackDataPort } from "@corbits/react-ui/lib/tanstack-data-port";
+import { SortableTable } from "@corbits/react-ui/ui/sortable-table";
 
 type Run = { id: string; name: string; status: string };
 
-export function Runs() {
+export function Runs({ runs }: { readonly runs: readonly Run[] }) {
   return (
-    <DataPortProvider value={createTanstackDataPort()}>
-      <DataTable<Run>
+    <>
+      <SortableTable
         caption="Runs"
+        rows={runs}
         rowKey={(run) => run.id}
-        request={{
-          key: ["runs"],
-          pageSize: 50,
-          fetch: async ({ signal, offset, pageSize }) => {
-            const items: readonly Run[] = await api.runs({ signal, offset, pageSize });
-            return { items, nextOffset: null };
-          },
-        }}
         columns={[
-          { header: "Run", cell: (run) => run.name },
-          { header: "Status", cell: (run) => run.status },
+          { key: "name", header: "Run", cell: (run) => run.name },
+          { key: "status", header: "Status", cell: (run) => run.status },
         ]}
       />
       <Button onClick={() => api.start()}>Run now</Button>
-    </DataPortProvider>
+    </>
   );
 }
 ```
@@ -70,9 +61,9 @@ This package ships no `"use client"` directives. In a React Server Components ap
 
 ## How it works
 
-Components take data through a `DataPort` (or none). The root entry is re-exports only and the package is side-effect free aside from the CSS files, so either import style tree-shakes to what you used. Tokens and keyframes live in `theme.css`; `styles.css` is the prebuilt sheet for hosts that do not run Tailwind.
+Components never fetch — data arrives as props. The root entry is re-exports only and the package is side-effect free aside from the CSS files, so either import style tree-shakes to what you used. Tokens and keyframes live in `theme.css`; `styles.css` is the prebuilt sheet for hosts that do not run Tailwind.
 
-See [PRODUCT.md](./PRODUCT.md) for why this library exists, [ARCHITECTURE.md](./ARCHITECTURE.md) for the DataPort seam and the theme layer, and [IMPLEMENTATION.md](./IMPLEMENTATION.md) for toolchain and peers.
+See [PRODUCT.md](./PRODUCT.md) for why this library exists, [ARCHITECTURE.md](./ARCHITECTURE.md) for the no-fetch rule and the theme layer, and [IMPLEMENTATION.md](./IMPLEMENTATION.md) for toolchain and peers.
 
 ## Development
 
diff --git a/bun.lock b/bun.lock
index 70a4347d..77cd011b 100644
--- a/bun.lock
+++ b/bun.lock
@@ -21,7 +21,6 @@
         "@swc/core": "^1.13.5",
         "@tailwindcss/cli": "^4.3.3",
         "@tailwindcss/vite": "^4.3.3",
-        "@tanstack/react-query": "^5.90.2",
         "@types/bun": "^1.3.14",
         "@types/node": "^24.9.1",
         "@types/react": "^19.2.2",
@@ -40,15 +39,11 @@
         "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tooltip": "^1.2.8",
-        "@tanstack/react-query": "^5.90.2",
         "lucide-react": "^0.545.0 || ^1.0.0",
         "react": "^18.2.0 || ^19.0.0",
         "react-dom": "^18.2.0 || ^19.0.0",
         "sonner": "^2.0.7",
       },
-      "optionalPeers": [
-        "@tanstack/react-query",
-      ],
     },
   },
   "packages": {
@@ -472,10 +467,6 @@
 
     "@tailwindcss/vite": ["@tailwindcss/vite@4.3.3", "", { "dependencies": { "@tailwindcss/node": "4.3.3", "@tailwindcss/oxide": "4.3.3", "tailwindcss": "4.3.3" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7 || ^8" } }, "sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw=="],
 
-    "@tanstack/query-core": ["@tanstack/query-core@5.101.4", "", {}, "sha512-gNwcvOJcRbLWPOLG/2OBm+zM+Yv+MKsXKEOWC57USuZDEsI71hEErQsiEGx5wX9rzWWkfwM0fVSPoiIFSsxfiw=="],
-
-    "@tanstack/react-query": ["@tanstack/react-query@5.101.4", "", { "dependencies": { "@tanstack/query-core": "5.101.4" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-yRg2pfOCxIs4ZJW3XYYHU/WgtD04FHSnfHlpRT7h7pR77hwkdRG4wxbKe4aq6P0RvXUTBSQpQeadS1SUYUe+KA=="],
-
     "@tokenizer/inflate": ["@tokenizer/inflate@0.2.7", "", { "dependencies": { "debug": "^4.4.0", "fflate": "^0.8.2", "token-types": "^6.0.0" } }, "sha512-MADQgmZT1eKjp06jpI2yozxaU9uVs4GzzgSL+uEq7bVcJ9V1ZXQkeGNql1fsSI0gMy1vhvNTNbUqrx+pZfJVmg=="],
 
     "@tokenizer/token": ["@tokenizer/token@0.3.0", "", {}, "sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A=="],
diff --git a/package.json b/package.json
index f30bd7eb..3129f69a 100644
--- a/package.json
+++ b/package.json
@@ -53,17 +53,11 @@
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@tanstack/react-query": "^5.90.2",
     "lucide-react": "^0.545.0 || ^1.0.0",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
     "sonner": "^2.0.7"
   },
-  "peerDependenciesMeta": {
-    "@tanstack/react-query": {
-      "optional": true
-    }
-  },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@happy-dom/global-registrator": "^20.11.2",
@@ -76,7 +70,6 @@
     "@swc/core": "^1.13.5",
     "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/vite": "^4.3.3",
-    "@tanstack/react-query": "^5.90.2",
     "@types/bun": "^1.3.14",
     "@types/node": "^24.9.1",
     "@types/react": "^19.2.2",
@@ -98,18 +91,6 @@
     "./styles.css": "./dist/styles.css",
     "./theme.css": "./dist/theme.css",
     "./package.json": "./package.json",
-    "./blocks/access-notice/access-notice": {
-      "types": "./dist/blocks/access-notice/access-notice.d.ts",
-      "default": "./dist/blocks/access-notice/access-notice.js"
-    },
-    "./blocks/canvas-host/canvas-host": {
-      "types": "./dist/blocks/canvas-host/canvas-host.d.ts",
-      "default": "./dist/blocks/canvas-host/canvas-host.js"
-    },
-    "./blocks/canvas-host/canvas-host-chrome": {
-      "types": "./dist/blocks/canvas-host/canvas-host-chrome.d.ts",
-      "default": "./dist/blocks/canvas-host/canvas-host-chrome.js"
-    },
     "./blocks/login/auth-layout": {
       "types": "./dist/blocks/login/auth-layout.d.ts",
       "default": "./dist/blocks/login/auth-layout.js"
@@ -118,18 +99,6 @@
       "types": "./dist/blocks/login/login-form.d.ts",
       "default": "./dist/blocks/login/login-form.js"
     },
-    "./hooks/use-anchored-scroll": {
-      "types": "./dist/hooks/use-anchored-scroll.d.ts",
-      "default": "./dist/hooks/use-anchored-scroll.js"
-    },
-    "./hooks/use-chat-dock": {
-      "types": "./dist/hooks/use-chat-dock.d.ts",
-      "default": "./dist/hooks/use-chat-dock.js"
-    },
-    "./hooks/use-collection-state": {
-      "types": "./dist/hooks/use-collection-state.d.ts",
-      "default": "./dist/hooks/use-collection-state.js"
-    },
     "./hooks/use-command-palette-navigation": {
       "types": "./dist/hooks/use-command-palette-navigation.d.ts",
       "default": "./dist/hooks/use-command-palette-navigation.js"
@@ -146,14 +115,6 @@
       "types": "./dist/hooks/use-dismissable-popover.d.ts",
       "default": "./dist/hooks/use-dismissable-popover.js"
     },
-    "./hooks/use-flip-transition": {
-      "types": "./dist/hooks/use-flip-transition.d.ts",
-      "default": "./dist/hooks/use-flip-transition.js"
-    },
-    "./hooks/use-focus-trap": {
-      "types": "./dist/hooks/use-focus-trap.d.ts",
-      "default": "./dist/hooks/use-focus-trap.js"
-    },
     "./hooks/use-list-selection": {
       "types": "./dist/hooks/use-list-selection.d.ts",
       "default": "./dist/hooks/use-list-selection.js"
@@ -162,38 +123,14 @@
       "types": "./dist/hooks/use-prefers-reduced-motion.d.ts",
       "default": "./dist/hooks/use-prefers-reduced-motion.js"
     },
-    "./hooks/use-render-rail": {
-      "types": "./dist/hooks/use-render-rail.d.ts",
-      "default": "./dist/hooks/use-render-rail.js"
-    },
-    "./hooks/use-resizable-rail": {
-      "types": "./dist/hooks/use-resizable-rail.d.ts",
-      "default": "./dist/hooks/use-resizable-rail.js"
-    },
     "./hooks/use-scroll-current-into-view": {
       "types": "./dist/hooks/use-scroll-current-into-view.d.ts",
       "default": "./dist/hooks/use-scroll-current-into-view.js"
     },
-    "./hooks/use-sidebar-panel": {
-      "types": "./dist/hooks/use-sidebar-panel.d.ts",
-      "default": "./dist/hooks/use-sidebar-panel.js"
-    },
-    "./hooks/use-view-mode": {
-      "types": "./dist/hooks/use-view-mode.d.ts",
-      "default": "./dist/hooks/use-view-mode.js"
-    },
-    "./lib/activity": {
-      "types": "./dist/lib/activity.d.ts",
-      "default": "./dist/lib/activity.js"
-    },
     "./lib/artifact": {
       "types": "./dist/lib/artifact.d.ts",
       "default": "./dist/lib/artifact.js"
     },
-    "./lib/canvas-host-state": {
-      "types": "./dist/lib/canvas-host-state.d.ts",
-      "default": "./dist/lib/canvas-host-state.js"
-    },
     "./lib/chart-palette": {
       "types": "./dist/lib/chart-palette.d.ts",
       "default": "./dist/lib/chart-palette.js"
@@ -206,22 +143,10 @@
       "types": "./dist/lib/chat-parts.d.ts",
       "default": "./dist/lib/chat-parts.js"
     },
-    "./lib/command-registry": {
-      "types": "./dist/lib/command-registry.d.ts",
-      "default": "./dist/lib/command-registry.js"
-    },
     "./lib/csv": {
       "types": "./dist/lib/csv.d.ts",
       "default": "./dist/lib/csv.js"
     },
-    "./lib/data-port": {
-      "types": "./dist/lib/data-port.d.ts",
-      "default": "./dist/lib/data-port.js"
-    },
-    "./lib/generative-block": {
-      "types": "./dist/lib/generative-block.d.ts",
-      "default": "./dist/lib/generative-block.js"
-    },
     "./lib/metrics": {
       "types": "./dist/lib/metrics.d.ts",
       "default": "./dist/lib/metrics.js"
@@ -234,22 +159,10 @@
       "types": "./dist/lib/relative-time.d.ts",
       "default": "./dist/lib/relative-time.js"
     },
-    "./lib/schedule": {
-      "types": "./dist/lib/schedule.d.ts",
-      "default": "./dist/lib/schedule.js"
-    },
-    "./lib/tanstack-data-port": {
-      "types": "./dist/lib/tanstack-data-port.d.ts",
-      "default": "./dist/lib/tanstack-data-port.js"
-    },
     "./lib/theme": {
       "types": "./dist/lib/theme.d.ts",
       "default": "./dist/lib/theme.js"
     },
-    "./lib/time-range": {
-      "types": "./dist/lib/time-range.d.ts",
-      "default": "./dist/lib/time-range.js"
-    },
     "./lib/url": {
       "types": "./dist/lib/url.d.ts",
       "default": "./dist/lib/url.js"
@@ -282,18 +195,6 @@
       "types": "./dist/ui/activity-block.d.ts",
       "default": "./dist/ui/activity-block.js"
     },
-    "./ui/activity-timeline": {
-      "types": "./dist/ui/activity-timeline.d.ts",
-      "default": "./dist/ui/activity-timeline.js"
-    },
-    "./ui/actor-summary": {
-      "types": "./dist/ui/actor-summary.d.ts",
-      "default": "./dist/ui/actor-summary.js"
-    },
-    "./ui/add-artifact-dialog": {
-      "types": "./dist/ui/add-artifact-dialog.d.ts",
-      "default": "./dist/ui/add-artifact-dialog.js"
-    },
     "./ui/agent-turn": {
       "types": "./dist/ui/agent-turn.d.ts",
       "default": "./dist/ui/agent-turn.js"
@@ -310,14 +211,6 @@
       "types": "./dist/ui/artifact-body.d.ts",
       "default": "./dist/ui/artifact-body.js"
     },
-    "./ui/artifact-detail": {
-      "types": "./dist/ui/artifact-detail.d.ts",
-      "default": "./dist/ui/artifact-detail.js"
-    },
-    "./ui/artifact-gallery": {
-      "types": "./dist/ui/artifact-gallery.d.ts",
-      "default": "./dist/ui/artifact-gallery.js"
-    },
     "./ui/artifact-notice": {
       "types": "./dist/ui/artifact-notice.d.ts",
       "default": "./dist/ui/artifact-notice.js"
@@ -354,10 +247,6 @@
       "types": "./dist/ui/card.d.ts",
       "default": "./dist/ui/card.js"
     },
-    "./ui/catalog-glyph": {
-      "types": "./dist/ui/catalog-glyph.d.ts",
-      "default": "./dist/ui/catalog-glyph.js"
-    },
     "./ui/category-bars": {
       "types": "./dist/ui/category-bars.d.ts",
       "default": "./dist/ui/category-bars.js"
@@ -370,10 +259,6 @@
       "types": "./dist/ui/chat-composer.d.ts",
       "default": "./dist/ui/chat-composer.js"
     },
-    "./ui/chat-dock": {
-      "types": "./dist/ui/chat-dock.d.ts",
-      "default": "./dist/ui/chat-dock.js"
-    },
     "./ui/chat-dock-timing": {
       "types": "./dist/ui/chat-dock-timing.d.ts",
       "default": "./dist/ui/chat-dock-timing.js"
@@ -398,10 +283,6 @@
       "types": "./dist/ui/command-palette.d.ts",
       "default": "./dist/ui/command-palette.js"
     },
-    "./ui/command-queue": {
-      "types": "./dist/ui/command-queue.d.ts",
-      "default": "./dist/ui/command-queue.js"
-    },
     "./ui/compare-body": {
       "types": "./dist/ui/compare-body.d.ts",
       "default": "./dist/ui/compare-body.js"
@@ -410,50 +291,18 @@
       "types": "./dist/ui/confirm-button.d.ts",
       "default": "./dist/ui/confirm-button.js"
     },
-    "./ui/context-strip": {
-      "types": "./dist/ui/context-strip.d.ts",
-      "default": "./dist/ui/context-strip.js"
-    },
     "./ui/corbits-mark": {
       "types": "./dist/ui/corbits-mark.d.ts",
       "default": "./dist/ui/corbits-mark.js"
     },
-    "./ui/count-table": {
-      "types": "./dist/ui/count-table.d.ts",
-      "default": "./dist/ui/count-table.js"
-    },
     "./ui/csv-table": {
       "types": "./dist/ui/csv-table.d.ts",
       "default": "./dist/ui/csv-table.js"
     },
-    "./ui/dashboard": {
-      "types": "./dist/ui/dashboard.d.ts",
-      "default": "./dist/ui/dashboard.js"
-    },
-    "./ui/dashboard-section": {
-      "types": "./dist/ui/dashboard-section.d.ts",
-      "default": "./dist/ui/dashboard-section.js"
-    },
-    "./ui/data-table": {
-      "types": "./dist/ui/data-table.d.ts",
-      "default": "./dist/ui/data-table.js"
-    },
-    "./ui/delta-badge": {
-      "types": "./dist/ui/delta-badge.d.ts",
-      "default": "./dist/ui/delta-badge.js"
-    },
-    "./ui/dial": {
-      "types": "./dist/ui/dial.d.ts",
-      "default": "./dist/ui/dial.js"
-    },
     "./ui/dialog": {
       "types": "./dist/ui/dialog.d.ts",
       "default": "./dist/ui/dialog.js"
     },
-    "./ui/dither-background": {
-      "types": "./dist/ui/dither-background.d.ts",
-      "default": "./dist/ui/dither-background.js"
-    },
     "./ui/dither-canvas": {
       "types": "./dist/ui/dither-canvas.d.ts",
       "default": "./dist/ui/dither-canvas.js"
@@ -466,10 +315,6 @@
       "types": "./dist/ui/empty-state.d.ts",
       "default": "./dist/ui/empty-state.js"
     },
-    "./ui/failed-run-notice": {
-      "types": "./dist/ui/failed-run-notice.d.ts",
-      "default": "./dist/ui/failed-run-notice.js"
-    },
     "./ui/file-input": {
       "types": "./dist/ui/file-input.d.ts",
       "default": "./dist/ui/file-input.js"
@@ -486,14 +331,6 @@
       "types": "./dist/ui/gate-block.d.ts",
       "default": "./dist/ui/gate-block.js"
     },
-    "./ui/generative-block-view": {
-      "types": "./dist/ui/generative-block-view.d.ts",
-      "default": "./dist/ui/generative-block-view.js"
-    },
-    "./ui/heatmap": {
-      "types": "./dist/ui/heatmap.d.ts",
-      "default": "./dist/ui/heatmap.js"
-    },
     "./ui/horizontal-stepper": {
       "types": "./dist/ui/horizontal-stepper.d.ts",
       "default": "./dist/ui/horizontal-stepper.js"
@@ -514,18 +351,10 @@
       "types": "./dist/ui/kind-card-grid.d.ts",
       "default": "./dist/ui/kind-card-grid.js"
     },
-    "./ui/kind-picker": {
-      "types": "./dist/ui/kind-picker.d.ts",
-      "default": "./dist/ui/kind-picker.js"
-    },
     "./ui/library-page-header": {
       "types": "./dist/ui/library-page-header.d.ts",
       "default": "./dist/ui/library-page-header.js"
     },
-    "./ui/library-search-input": {
-      "types": "./dist/ui/library-search-input.d.ts",
-      "default": "./dist/ui/library-search-input.js"
-    },
     "./ui/list-detail": {
       "types": "./dist/ui/list-detail.d.ts",
       "default": "./dist/ui/list-detail.js"
@@ -534,26 +363,10 @@
       "types": "./dist/ui/live-run-banner.d.ts",
       "default": "./dist/ui/live-run-banner.js"
     },
-    "./ui/live-run-header": {
-      "types": "./dist/ui/live-run-header.d.ts",
-      "default": "./dist/ui/live-run-header.js"
-    },
-    "./ui/live-run-inspector": {
-      "types": "./dist/ui/live-run-inspector.d.ts",
-      "default": "./dist/ui/live-run-inspector.js"
-    },
     "./ui/live-status-line": {
       "types": "./dist/ui/live-status-line.d.ts",
       "default": "./dist/ui/live-status-line.js"
     },
-    "./ui/mail-detail": {
-      "types": "./dist/ui/mail-detail.d.ts",
-      "default": "./dist/ui/mail-detail.js"
-    },
-    "./ui/managed-list": {
-      "types": "./dist/ui/managed-list.d.ts",
-      "default": "./dist/ui/managed-list.js"
-    },
     "./ui/menu": {
       "types": "./dist/ui/menu.d.ts",
       "default": "./dist/ui/menu.js"
@@ -562,14 +375,6 @@
       "types": "./dist/ui/message-bubble.d.ts",
       "default": "./dist/ui/message-bubble.js"
     },
-    "./ui/message-list": {
-      "types": "./dist/ui/message-list.d.ts",
-      "default": "./dist/ui/message-list.js"
-    },
-    "./ui/moment-walker": {
-      "types": "./dist/ui/moment-walker.d.ts",
-      "default": "./dist/ui/moment-walker.js"
-    },
     "./ui/notifications-bell": {
       "types": "./dist/ui/notifications-bell.d.ts",
       "default": "./dist/ui/notifications-bell.js"
@@ -578,10 +383,6 @@
       "types": "./dist/ui/now-cards.d.ts",
       "default": "./dist/ui/now-cards.js"
     },
-    "./ui/onboarding-tour": {
-      "types": "./dist/ui/onboarding-tour.d.ts",
-      "default": "./dist/ui/onboarding-tour.js"
-    },
     "./ui/page-panel": {
       "types": "./dist/ui/page-panel.d.ts",
       "default": "./dist/ui/page-panel.js"
@@ -590,10 +391,6 @@
       "types": "./dist/ui/page-shell.d.ts",
       "default": "./dist/ui/page-shell.js"
     },
-    "./ui/pagination": {
-      "types": "./dist/ui/pagination.d.ts",
-      "default": "./dist/ui/pagination.js"
-    },
     "./ui/parts-renderer": {
       "types": "./dist/ui/parts-renderer.d.ts",
       "default": "./dist/ui/parts-renderer.js"
@@ -610,10 +407,6 @@
       "types": "./dist/ui/provider-mark.d.ts",
       "default": "./dist/ui/provider-mark.js"
     },
-    "./ui/pulsing-ring": {
-      "types": "./dist/ui/pulsing-ring.d.ts",
-      "default": "./dist/ui/pulsing-ring.js"
-    },
     "./ui/quick-reply-chips": {
       "types": "./dist/ui/quick-reply-chips.d.ts",
       "default": "./dist/ui/quick-reply-chips.js"
@@ -622,26 +415,6 @@
       "types": "./dist/ui/quote-card.d.ts",
       "default": "./dist/ui/quote-card.js"
     },
-    "./ui/radio-group": {
-      "types": "./dist/ui/radio-group.d.ts",
-      "default": "./dist/ui/radio-group.js"
-    },
-    "./ui/read-block": {
-      "types": "./dist/ui/read-block.d.ts",
-      "default": "./dist/ui/read-block.js"
-    },
-    "./ui/reconnecting-overlay": {
-      "types": "./dist/ui/reconnecting-overlay.d.ts",
-      "default": "./dist/ui/reconnecting-overlay.js"
-    },
-    "./ui/recurrence-input": {
-      "types": "./dist/ui/recurrence-input.d.ts",
-      "default": "./dist/ui/recurrence-input.js"
-    },
-    "./ui/render-rail": {
-      "types": "./dist/ui/render-rail.d.ts",
-      "default": "./dist/ui/render-rail.js"
-    },
     "./ui/research-body": {
       "types": "./dist/ui/research-body.d.ts",
       "default": "./dist/ui/research-body.js"
@@ -654,38 +427,10 @@
       "types": "./dist/ui/run-now-button.d.ts",
       "default": "./dist/ui/run-now-button.js"
     },
-    "./ui/run-once-flow": {
-      "types": "./dist/ui/run-once-flow.d.ts",
-      "default": "./dist/ui/run-once-flow.js"
-    },
-    "./ui/schedule-flow": {
-      "types": "./dist/ui/schedule-flow.d.ts",
-      "default": "./dist/ui/schedule-flow.js"
-    },
-    "./ui/schedule-form-layout": {
-      "types": "./dist/ui/schedule-form-layout.d.ts",
-      "default": "./dist/ui/schedule-form-layout.js"
-    },
-    "./ui/schedule-header": {
-      "types": "./dist/ui/schedule-header.d.ts",
-      "default": "./dist/ui/schedule-header.js"
-    },
-    "./ui/schedule-inspector": {
-      "types": "./dist/ui/schedule-inspector.d.ts",
-      "default": "./dist/ui/schedule-inspector.js"
-    },
-    "./ui/schedule-list": {
-      "types": "./dist/ui/schedule-list.d.ts",
-      "default": "./dist/ui/schedule-list.js"
-    },
     "./ui/section": {
       "types": "./dist/ui/section.d.ts",
       "default": "./dist/ui/section.js"
     },
-    "./ui/section-nav": {
-      "types": "./dist/ui/section-nav.d.ts",
-      "default": "./dist/ui/section-nav.js"
-    },
     "./ui/select": {
       "types": "./dist/ui/select.d.ts",
       "default": "./dist/ui/select.js"
@@ -710,14 +455,6 @@
       "types": "./dist/ui/sidebar-panel.d.ts",
       "default": "./dist/ui/sidebar-panel.js"
     },
-    "./ui/sidebar-rail": {
-      "types": "./dist/ui/sidebar-rail.d.ts",
-      "default": "./dist/ui/sidebar-rail.js"
-    },
-    "./ui/sidebar-section": {
-      "types": "./dist/ui/sidebar-section.d.ts",
-      "default": "./dist/ui/sidebar-section.js"
-    },
     "./ui/skeleton": {
       "types": "./dist/ui/skeleton.d.ts",
       "default": "./dist/ui/skeleton.js"
@@ -734,38 +471,14 @@
       "types": "./dist/ui/stat-grid.d.ts",
       "default": "./dist/ui/stat-grid.js"
     },
-    "./ui/stat-tile": {
-      "types": "./dist/ui/stat-tile.d.ts",
-      "default": "./dist/ui/stat-tile.js"
-    },
     "./ui/status-dot": {
       "types": "./dist/ui/status-dot.d.ts",
       "default": "./dist/ui/status-dot.js"
     },
-    "./ui/step-graph": {
-      "types": "./dist/ui/step-graph.d.ts",
-      "default": "./dist/ui/step-graph.js"
-    },
-    "./ui/step-graph-node": {
-      "types": "./dist/ui/step-graph-node.d.ts",
-      "default": "./dist/ui/step-graph-node.js"
-    },
     "./ui/step-list": {
       "types": "./dist/ui/step-list.d.ts",
       "default": "./dist/ui/step-list.js"
     },
-    "./ui/step-primitives": {
-      "types": "./dist/ui/step-primitives.d.ts",
-      "default": "./dist/ui/step-primitives.js"
-    },
-    "./ui/step-sidebar": {
-      "types": "./dist/ui/step-sidebar.d.ts",
-      "default": "./dist/ui/step-sidebar.js"
-    },
-    "./ui/subagent-dock": {
-      "types": "./dist/ui/subagent-dock.d.ts",
-      "default": "./dist/ui/subagent-dock.js"
-    },
     "./ui/switch": {
       "types": "./dist/ui/switch.d.ts",
       "default": "./dist/ui/switch.js"
@@ -778,10 +491,6 @@
       "types": "./dist/ui/tabs.d.ts",
       "default": "./dist/ui/tabs.js"
     },
-    "./ui/tenant-selector": {
-      "types": "./dist/ui/tenant-selector.d.ts",
-      "default": "./dist/ui/tenant-selector.js"
-    },
     "./ui/textarea": {
       "types": "./dist/ui/textarea.d.ts",
       "default": "./dist/ui/textarea.js"
@@ -794,18 +503,6 @@
       "types": "./dist/ui/theme-toggle.d.ts",
       "default": "./dist/ui/theme-toggle.js"
     },
-    "./ui/thread-list": {
-      "types": "./dist/ui/thread-list.d.ts",
-      "default": "./dist/ui/thread-list.js"
-    },
-    "./ui/thread-switcher": {
-      "types": "./dist/ui/thread-switcher.d.ts",
-      "default": "./dist/ui/thread-switcher.js"
-    },
-    "./ui/time-range-control": {
-      "types": "./dist/ui/time-range-control.d.ts",
-      "default": "./dist/ui/time-range-control.js"
-    },
     "./ui/time-series-chart": {
       "types": "./dist/ui/time-series-chart.d.ts",
       "default": "./dist/ui/time-series-chart.js"
@@ -814,10 +511,6 @@
       "types": "./dist/ui/toast.d.ts",
       "default": "./dist/ui/toast.js"
     },
-    "./ui/toggle-list": {
-      "types": "./dist/ui/toggle-list.d.ts",
-      "default": "./dist/ui/toggle-list.js"
-    },
     "./ui/token-mosaic": {
       "types": "./dist/ui/token-mosaic.d.ts",
       "default": "./dist/ui/token-mosaic.js"
@@ -842,10 +535,6 @@
       "types": "./dist/ui/trace-waterfall.d.ts",
       "default": "./dist/ui/trace-waterfall.js"
     },
-    "./ui/triage-pane": {
-      "types": "./dist/ui/triage-pane.d.ts",
-      "default": "./dist/ui/triage-pane.js"
-    },
     "./ui/typing-indicator": {
       "types": "./dist/ui/typing-indicator.d.ts",
       "default": "./dist/ui/typing-indicator.js"
@@ -853,34 +542,6 @@
     "./ui/view-toggle": {
       "types": "./dist/ui/view-toggle.d.ts",
       "default": "./dist/ui/view-toggle.js"
-    },
-    "./ui/whats-new": {
-      "types": "./dist/ui/whats-new.d.ts",
-      "default": "./dist/ui/whats-new.js"
-    },
-    "./ui/workflow-catalog": {
-      "types": "./dist/ui/workflow-catalog.d.ts",
-      "default": "./dist/ui/workflow-catalog.js"
-    },
-    "./ui/workflow-dock": {
-      "types": "./dist/ui/workflow-dock.d.ts",
-      "default": "./dist/ui/workflow-dock.js"
-    },
-    "./ui/workflow-registry-list": {
-      "types": "./dist/ui/workflow-registry-list.d.ts",
-      "default": "./dist/ui/workflow-registry-list.js"
-    },
-    "./ui/workflow-registry-row": {
-      "types": "./dist/ui/workflow-registry-row.d.ts",
-      "default": "./dist/ui/workflow-registry-row.js"
-    },
-    "./ui/workflow-registry-section": {
-      "types": "./dist/ui/workflow-registry-section.d.ts",
-      "default": "./dist/ui/workflow-registry-section.js"
-    },
-    "./ui/workflow-status-badge": {
-      "types": "./dist/ui/workflow-status-badge.d.ts",
-      "default": "./dist/ui/workflow-status-badge.js"
     }
   }
 }
diff --git a/scripts/dep-guard.mjs b/scripts/dep-guard.mjs
index 52c495d5..488423ed 100644
--- a/scripts/dep-guard.mjs
+++ b/scripts/dep-guard.mjs
@@ -1,20 +1,13 @@
-// Three import rules that types alone cannot enforce. Each one is a property a
+// Two import rules that types alone cannot enforce. Each one is a property a
 // consumer would feel and no other step in the build would notice.
 //
 // 1. Nothing imports from @workbench/*. corbits-ui is a clean rewrite; a single
 //    leaked import would drag the old package back in.
 //
-// 2. Only lib/tanstack-data-port.ts imports @tanstack/react-query. That module
-//    is one implementation of the DataPort seam, and keeping it the sole
-//    importer is what lets the query library stay an *optional* peer
-//    dependency.
-//
-// 3. Nothing reachable from the root barrel imports an optional peer. This is
-//    rule 2's real point, and rule 2 alone does not cover it: the barrel is a
-//    single module, so re-exporting the adapter from index.ts loads it on *any*
-//    root import and crashes for every consumer who did not install the peer —
-//    while rule 2 stays green, because the adapter is still the only file with
-//    the import. That is exactly the bug this rule was added to catch.
+// 2. Nothing reachable from the root barrel imports an optional peer. The
+//    barrel is a single module, so re-exporting a module that statically
+//    imports an optional peer loads it on *any* root import and crashes for
+//    every consumer who did not install that peer.
 //
 //    Only Node and Vite surface it; a Turbopack consumer builds cleanly, so
 //    this cannot be left to whichever bundler the person testing happened to
@@ -24,15 +17,10 @@ import { dirname, join, relative, resolve } from "node:path";
 
 const ROOT = new URL("../src", import.meta.url).pathname;
 
-const OPTIONAL_PEERS = ["@tanstack/react-query"];
+const OPTIONAL_PEERS = [];
 
 const RULES = [
   { label: "@workbench/*", pattern: /["'](@workbench\/[^"']*)["']/g, allow: () => false },
-  {
-    label: "@tanstack/react-query",
-    pattern: /["'](@tanstack\/react-query)["']/g,
-    allow: (file) => file === "lib/tanstack-data-port.ts",
-  },
 ];
 
 const walk = (dir) =>
@@ -45,7 +33,7 @@ const sources = walk(ROOT).filter((path) => /\.tsx?$/.test(path));
 const read = (path) => readFileSync(path, "utf8");
 const id = (path) => relative(ROOT, path);
 
-// --- Rules 1 and 2: who imports what ---------------------------------------
+// --- Rule 1: who imports what ----------------------------------------------
 
 const violations = sources.flatMap((path) => {
   const source = read(path);
@@ -54,7 +42,7 @@ const violations = sources.flatMap((path) => {
   );
 });
 
-// --- Rule 3: what the root barrel drags in ---------------------------------
+// --- Rule 2: what the root barrel drags in ---------------------------------
 
 /** Source paths reachable from `entry` through relative imports. */
 function reachableFrom(entry) {
diff --git a/scripts/generate-exports.mjs b/scripts/generate-exports.mjs
index a69c6cb7..c7177e67 100644
--- a/scripts/generate-exports.mjs
+++ b/scripts/generate-exports.mjs
@@ -14,17 +14,16 @@
 // the root barrel*. A module that statically imports an optional peer
 // dependency cannot be re-exported from `index.ts`, because the barrel is one
 // module — importing anything from the root would load it and crash for every
-// consumer who did not install that peer. This is the whole reason the DataPort
-// seam and its TanStack adapter are separate files, and `dep-guard` enforces
-// the property independently.
+// consumer who did not install that peer. `dep-guard` enforces the property
+// independently.
 import { readdirSync, readFileSync, statSync, writeFileSync } from "node:fs";
 import { join, relative } from "node:path";
 
 const ROOT = new URL("..", import.meta.url).pathname;
 const SRC = join(ROOT, "src");
 
-const INTERNAL = new Set(["lib/chart-geometry", "lib/step-graph-layout"]);
-const BARREL_EXCLUDED = new Set(["lib/tanstack-data-port"]);
+const INTERNAL = new Set(["lib/chart-geometry"]);
+const BARREL_EXCLUDED = new Set();
 
 const walk = (dir) =>
   readdirSync(dir).flatMap((entry) => {
diff --git a/src/blocks/access-notice/access-notice.tsx b/src/blocks/access-notice/access-notice.tsx
deleted file mode 100644
index e92dd117..00000000
--- a/src/blocks/access-notice/access-notice.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import type { ReactNode } from "react";
-
-import { cn } from "../../lib/utils.js";
-
-export type AccessNoticeProps = {
-  readonly title: string;
-  /** What is happening and what to do next. Two sentences at most. */
-  readonly description: ReactNode;
-  /** The way forward — "Contact your administrator", "Sign out". */
-  readonly actions?: ReactNode;
-  readonly brand?: ReactNode;
-  readonly className?: string;
-};
-
-/**
- * The page someone lands on when they are signed in but have nothing to see:
- * awaiting an invitation, awaiting approval, removed from the last workspace
- * they had.
- *
- * A distinct surface rather than an empty dashboard, because those states are
- * not emptiness — they are a specific thing that happened, with a specific
- * next step, and rendering them as "no items yet" tells someone to wait when
- * they should be emailing an administrator.
- *
- * `<h1>` inside `<main>`: this is the whole page, not a panel on one. A page
- * whose only content is a notice still needs a document outline, and this is it.
- *
- * No illustration slot. The correct thing here is one sentence saying what to
- * do; artwork on a dead end is decoration on someone's bad moment.
- */
-export function AccessNotice({ title, description, actions, brand, className }: AccessNoticeProps) {
-  return (
-    <main className={cn("flex min-h-svh flex-col bg-background", className)}>
-      {brand === undefined ? null : (
-        <div className="flex items-center gap-2.5 p-6 text-base font-semibold tracking-tight md:p-8">{brand}</div>
-      )}
-      <div className="flex flex-1 items-center justify-center px-6 pb-16">
-        <div className="flex w-full max-w-md flex-col items-center gap-4 text-center">
-          <h1 className="text-2xl font-semibold tracking-tight text-balance">{title}</h1>
-          <p className="text-sm leading-relaxed text-muted-foreground">{description}</p>
-          {actions === undefined ? null : <div className="flex flex-wrap items-center justify-center gap-2">{actions}</div>}
-        </div>
-      </div>
-    </main>
-  );
-}
diff --git a/src/blocks/canvas-host/canvas-host-chrome.tsx b/src/blocks/canvas-host/canvas-host-chrome.tsx
deleted file mode 100644
index ff61efc3..00000000
--- a/src/blocks/canvas-host/canvas-host-chrome.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { Maximize2, MessageCircle, Minimize2, X } from "lucide-react";
-
-import { cn } from "../../lib/utils.js";
-import { Badge } from "../../ui/badge.js";
-import { Button } from "../../ui/button.js";
-
-/**
- * Extends an icon button's hit area to the 40px floor without inflating its
- * visual size — `size="icon"` renders at 36px (`size-9`). Same `::after`
- * technique as `ReasoningPartView` in `parts-renderer.tsx`, just applied to
- * all four sides of a square button instead of the height of a full-width
- * row: 2px of inset on every edge closes the 4px gap.
- */
-const ICON_HIT_AREA = "relative after:absolute after:-inset-0.5 after:content-['']";
-
-/**
- * The canvas column's header: title, a neutral "kind" badge, focus-toggle,
- * close. No orange here — `bg-primary` is reserved for the one deliberate
- * call-to-action a surface has, and a chrome row that's on screen for the
- * entire time the canvas is open is not that; both icon buttons stay
- * `ghost` even while focused.
- */
-export function CanvasHostHeader({
-  title,
-  kind,
-  focus,
-  onFocusChange,
-  onClose,
-  className,
-}: {
-  readonly title: string;
-  readonly kind: string;
-  readonly focus: boolean;
-  readonly onFocusChange: (focus: boolean) => void;
-  readonly onClose: () => void;
-  readonly className?: string;
-}) {
-  return (
-    <header
-      data-slot="canvas-host-header"
-      className={cn("flex shrink-0 items-center gap-2 border-b border-border px-4 py-3", className)}
-    >
-      <div className="flex min-w-0 flex-1 items-center gap-2">
-        <p className="truncate text-sm font-semibold">{title}</p>
-        <Badge tone="neutral">{kind}</Badge>
-      </div>
-      <div className="flex shrink-0 items-center gap-1">
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          onClick={() => onFocusChange(!focus)}
-          aria-label={focus ? "Exit focus" : "Focus canvas"}
-          className={ICON_HIT_AREA}
-        >
-          {focus ? <Minimize2 aria-hidden /> : <Maximize2 aria-hidden />}
-        </Button>
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          onClick={onClose}
-          aria-label="Close canvas"
-          className={ICON_HIT_AREA}
-        >
-          <X aria-hidden />
-        </Button>
-      </div>
-    </header>
-  );
-}
-
-/**
- * A decorative stand-in for the chat column once focus mode has collapsed it
- * past usability. `aria-hidden`: it conveys nothing a screen reader needs —
- * the real chat content underneath is `invisible` rather than removed (see
- * `canvas-host.tsx`'s layout-mode comment), and the way back is the
- * focus-toggle button in `CanvasHostHeader` above, not this rail.
- */
-export function ChatRailIndicator({ className }: { className?: string }) {
-  return (
-    <div
-      aria-hidden
-      data-slot="canvas-host-chat-rail"
-      className={cn("hidden h-full w-full flex-col items-center gap-2 pt-4 text-muted-foreground lg:flex", className)}
-    >
-      <MessageCircle className="size-4" />
-    </div>
-  );
-}
diff --git a/src/blocks/canvas-host/canvas-host.test.tsx b/src/blocks/canvas-host/canvas-host.test.tsx
deleted file mode 100644
index 4a037397..00000000
--- a/src/blocks/canvas-host/canvas-host.test.tsx
+++ /dev/null
@@ -1,390 +0,0 @@
-import { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { describe, expect, mock, test } from "bun:test";
-
-import {
-  CanvasHost,
-  CHAT_CONTENT_VISIBILITY_CLASS,
-  GRID_CLASS,
-  type CanvasHostContent,
-} from "./canvas-host.js";
-
-type Mounted = {
-  container: HTMLElement;
-  unmount: () => void;
-};
-
-function render(node: React.ReactElement): Mounted {
-  const container = document.createElement("div");
-  document.body.appendChild(container);
-  let root!: Root;
-  act(() => {
-    root = createRoot(container);
-    root.render(node);
-  });
-  return {
-    container,
-    unmount: () => {
-      act(() => root.unmount());
-      container.remove();
-    },
-  };
-}
-
-const CONTENT: CanvasHostContent<{ body: string }> = {
-  kind: "note",
-  title: "Release notes",
-  data: { body: "v1.2.0 shipped" },
-};
-
-function noop() {}
-
-describe("CanvasHost content-driven state", () => {
-  test("content === null renders the empty state, not the render-prop", () => {
-    const renderCanvas = mock(() => <div>should not render</div>);
-    const mounted = render(
-      <CanvasHost
-        messages={[]}
-        content={null}
-        renderCanvas={renderCanvas}
-        focus={false}
-        onFocusChange={noop}
-        onClose={noop}
-      />,
-    );
-    expect(renderCanvas).not.toHaveBeenCalled();
-    expect(mounted.container.querySelector('[data-slot="empty-state"]')).not.toBeNull();
-    expect(mounted.container.textContent).toContain("Nothing open");
-    mounted.unmount();
-  });
-
-  test("content set calls the render-prop instead of the empty state", () => {
-    const mounted = render(
-      <CanvasHost
-        messages={[]}
-        content={CONTENT}
-        renderCanvas={(content) => <div data-testid="canvas-body">{content.title}</div>}
-        focus={false}
-        onFocusChange={noop}
-        onClose={noop}
-      />,
-    );
-    expect(mounted.container.querySelector('[data-slot="empty-state"]')).toBeNull();
-    expect(mounted.container.querySelector('[data-testid="canvas-body"]')?.textContent).toBe("Release notes");
-    mounted.unmount();
-  });
-
-  test("re-rendering with a new focus value changes the layout — the host, not the component, owns focus", () => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-    let root!: Root;
-    act(() => {
-      root = createRoot(container);
-      root.render(
-        <CanvasHost
-          messages={[]}
-          content={CONTENT}
-          renderCanvas={(content) => <div>{content.title}</div>}
-          focus={false}
-          onFocusChange={noop}
-          onClose={noop}
-        />,
-      );
-    });
-    expect(container.querySelector('[data-slot="canvas-host"]')?.getAttribute("data-layout")).toBe("split");
-
-    act(() => {
-      root.render(
-        <CanvasHost
-          messages={[]}
-          content={CONTENT}
-          renderCanvas={(content) => <div>{content.title}</div>}
-          focus={true}
-          onFocusChange={noop}
-          onClose={noop}
-        />,
-      );
-    });
-    expect(container.querySelector('[data-slot="canvas-host"]')?.getAttribute("data-layout")).toBe("focus");
-
-    act(() => root.unmount());
-    container.remove();
-  });
-});
-
-describe("CanvasHost focus prop is fully controlled", () => {
-  function renderWithFocus(focus: boolean) {
-    return render(
-      <CanvasHost
-        messages={[]}
-        content={CONTENT}
-        renderCanvas={(content) => <div>{content.title}</div>}
-        focus={focus}
-        onFocusChange={noop}
-        onClose={noop}
-      />,
-    );
-  }
-
-  test("focus=false renders split layout", () => {
-    const mounted = renderWithFocus(false);
-    expect(mounted.container.querySelector('[data-slot="canvas-host"]')?.getAttribute("data-layout")).toBe("split");
-    mounted.unmount();
-  });
-
-  test("focus=true renders focus layout — driven purely by the prop, not internal state", () => {
-    const mounted = renderWithFocus(true);
-    expect(mounted.container.querySelector('[data-slot="canvas-host"]')?.getAttribute("data-layout")).toBe("focus");
-    mounted.unmount();
-  });
-});
-
-describe("CanvasHost header interactions", () => {
-  test("clicking close calls onClose exactly once and nothing else", () => {
-    const onClose = mock(() => {});
-    const onFocusChange = mock(() => {});
-    const mounted = render(
-      <CanvasHost
-        messages={[]}
-        content={CONTENT}
-        renderCanvas={(content) => <div>{content.title}</div>}
-        focus={false}
-        onFocusChange={onFocusChange}
-        onClose={onClose}
-      />,
-    );
-    const closeButton = mounted.container.querySelector('button[aria-label="Close canvas"]') as HTMLButtonElement;
-    act(() => closeButton.click());
-    expect(onClose).toHaveBeenCalledTimes(1);
-    expect(onFocusChange).not.toHaveBeenCalled();
-    mounted.unmount();
-  });
-
-  test("clicking the focus toggle calls onFocusChange with the next value", () => {
-    const onFocusChange = mock(() => {});
-    const mounted = render(
-      <CanvasHost
-        messages={[]}
-        content={CONTENT}
-        renderCanvas={(content) => <div>{content.title}</div>}
-        focus={false}
-        onFocusChange={onFocusChange}
-        onClose={noop}
-      />,
-    );
-    const focusButton = mounted.container.querySelector('button[aria-label="Focus canvas"]') as HTMLButtonElement;
-    act(() => focusButton.click());
-    expect(onFocusChange).toHaveBeenCalledTimes(1);
-    expect(onFocusChange).toHaveBeenCalledWith(true);
-    mounted.unmount();
-  });
-
-  test("focus and close are real <button type=button> elements, reachable via Tab and Enter/Space natively", () => {
-    const mounted = render(
-      <CanvasHost
-        messages={[]}
-        content={CONTENT}
-        renderCanvas={(content) => <div>{content.title}</div>}
-        focus={false}
-        onFocusChange={noop}
-        onClose={noop}
-      />,
-    );
-    const focusButton = mounted.container.querySelector('button[aria-label="Focus canvas"]');
-    const closeButton = mounted.container.querySelector('button[aria-label="Close canvas"]');
-    expect(focusButton?.tagName).toBe("BUTTON");
-    expect(focusButton?.getAttribute("type")).toBe("button");
-    expect(closeButton?.tagName).toBe("BUTTON");
-    expect(closeButton?.getAttribute("type")).toBe("button");
-    expect(focusButton?.hasAttribute("disabled")).toBe(false);
-    expect(closeButton?.hasAttribute("disabled")).toBe(false);
-    mounted.unmount();
-  });
-});
-
-describe("CanvasHost Escape key", () => {
-  function dispatchEscape() {
-    act(() => {
-      window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }));
-    });
-  }
-
-  test("Escape while focused exits focus first, without closing", () => {
-    const onFocusChange = mock(() => {});
-    const onClose = mock(() => {});
-    const mounted = render(
-      <CanvasHost
-        messages={[]}
-        content={CONTENT}
-        renderCanvas={(content) => <div>{content.title}</div>}
-        focus={true}
-        onFocusChange={onFocusChange}
-        onClose={onClose}
-      />,
-    );
-    dispatchEscape();
-    expect(onFocusChange).toHaveBeenCalledTimes(1);
-    expect(onFocusChange).toHaveBeenCalledWith(false);
-    expect(onClose).not.toHaveBeenCalled();
-    mounted.unmount();
-  });
-
-  test("Escape while open but not focused closes the canvas", () => {
-    const onFocusChange = mock(() => {});
-    const onClose = mock(() => {});
-    const mounted = render(
-      <CanvasHost
-        messages={[]}
-        content={CONTENT}
-        renderCanvas={(content) => <div>{content.title}</div>}
-        focus={false}
-        onFocusChange={onFocusChange}
-        onClose={onClose}
-      />,
-    );
-    dispatchEscape();
-    expect(onClose).toHaveBeenCalledTimes(1);
-    expect(onFocusChange).not.toHaveBeenCalled();
-    mounted.unmount();
-  });
-
-  test("Escape from a nested dialog inside renderCanvas is consumed by the nested UI, not the host", () => {
-    const onFocusChange = mock(() => {});
-    const onClose = mock(() => {});
-    const mounted = render(
-      <CanvasHost
-        messages={[]}
-        content={CONTENT}
-        renderCanvas={() => (
-          <div role="dialog" data-testid="nested-dialog">
-            nested overlay content
-          </div>
-        )}
-        focus={false}
-        onFocusChange={onFocusChange}
-        onClose={onClose}
-      />,
-    );
-    const nestedDialog = mounted.container.querySelector('[data-testid="nested-dialog"]') as HTMLElement;
-    act(() => {
-      nestedDialog.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }));
-    });
-    expect(onClose).not.toHaveBeenCalled();
-    expect(onFocusChange).not.toHaveBeenCalled();
-    mounted.unmount();
-  });
-
-  test("Escape is a no-op when nothing is open", () => {
-    const onFocusChange = mock(() => {});
-    const onClose = mock(() => {});
-    const mounted = render(
-      <CanvasHost
-        messages={[]}
-        content={null}
-        renderCanvas={() => <div />}
-        focus={false}
-        onFocusChange={onFocusChange}
-        onClose={onClose}
-      />,
-    );
-    dispatchEscape();
-    expect(onClose).not.toHaveBeenCalled();
-    expect(onFocusChange).not.toHaveBeenCalled();
-    mounted.unmount();
-  });
-});
-
-describe("CanvasHost chat transcript", () => {
-  test("renders one parts-renderer block per message, in order", () => {
-    const mounted = render(
-      <CanvasHost
-        messages={[
-          { id: "m1", parts: [{ kind: "text", text: "first" }] },
-          { id: "m2", parts: [{ kind: "text", text: "second" }] },
-        ]}
-        content={null}
-        renderCanvas={() => <div />}
-        focus={false}
-        onFocusChange={noop}
-        onClose={noop}
-      />,
-    );
-    const messageNodes = mounted.container.querySelectorAll('[data-slot="canvas-host-message"]');
-    expect(messageNodes.length).toBe(2);
-    expect(messageNodes[0]?.textContent).toBe("first");
-    expect(messageNodes[1]?.textContent).toBe("second");
-    mounted.unmount();
-  });
-
-  test("emptyChat renders when messages is empty", () => {
-    const mounted = render(
-      <CanvasHost
-        messages={[]}
-        content={null}
-        renderCanvas={() => <div />}
-        focus={false}
-        onFocusChange={noop}
-        onClose={noop}
-        emptyChat={<p data-testid="empty-chat">Nothing here yet</p>}
-      />,
-    );
-    expect(mounted.container.querySelector('[data-testid="empty-chat"]')).not.toBeNull();
-    mounted.unmount();
-  });
-});
-
-describe("CanvasHost composer footer", () => {
-  test("composer omitted renders no footer", () => {
-    const mounted = render(
-      <CanvasHost messages={[]} content={null} renderCanvas={() => <div />} focus={false} onFocusChange={noop} onClose={noop} />,
-    );
-    expect(mounted.container.querySelector('[data-slot="chat-panel-footer"]')).toBeNull();
-    mounted.unmount();
-  });
-
-  test("composer={null} renders no footer, identically to omitting it", () => {
-    const mounted = render(
-      <CanvasHost
-        messages={[]}
-        content={null}
-        renderCanvas={() => <div />}
-        focus={false}
-        onFocusChange={noop}
-        onClose={noop}
-        composer={null}
-      />,
-    );
-    expect(mounted.container.querySelector('[data-slot="chat-panel-footer"]')).toBeNull();
-    mounted.unmount();
-  });
-
-  test("composer with content renders the footer", () => {
-    const mounted = render(
-      <CanvasHost
-        messages={[]}
-        content={null}
-        renderCanvas={() => <div />}
-        focus={false}
-        onFocusChange={noop}
-        onClose={noop}
-        composer={<button type="button">send</button>}
-      />,
-    );
-    expect(mounted.container.querySelector('[data-slot="chat-panel-footer"]')).not.toBeNull();
-    mounted.unmount();
-  });
-});
-
-describe("CanvasHost layout class tables", () => {
-  test("GRID_CLASS: split shows chat below `lg`, both columns at `lg`+", () => {
-    expect(GRID_CLASS.chat).toBe("grid-cols-[minmax(0,1fr)_0px]");
-    expect(GRID_CLASS.split).toBe("grid-cols-[minmax(0,1fr)_0px] lg:grid-cols-[minmax(0,1fr)_min(28rem,40%)]");
-    expect(GRID_CLASS.focus).toBe("grid-cols-[0px_minmax(0,1fr)] lg:grid-cols-[4rem_minmax(0,1fr)]");
-  });
-
-  test("CHAT_CONTENT_VISIBILITY_CLASS: chat stays visible in chat/split, hidden only in focus", () => {
-    expect(CHAT_CONTENT_VISIBILITY_CLASS.chat).toBe("");
-    expect(CHAT_CONTENT_VISIBILITY_CLASS.split).toBe("");
-    expect(CHAT_CONTENT_VISIBILITY_CLASS.focus).toBe("invisible pointer-events-none");
-  });
-});
diff --git a/src/blocks/canvas-host/canvas-host.tsx b/src/blocks/canvas-host/canvas-host.tsx
deleted file mode 100644
index 58efad69..00000000
--- a/src/blocks/canvas-host/canvas-host.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import { useEffect, type ReactNode } from "react";
-
-import { isEscapeConsumedByNestedUI } from "../../hooks/use-chat-dock.js";
-import type { CanvasHostContent } from "../../lib/canvas-host-state.js";
-import type { Part } from "../../lib/chat-parts.js";
-import { cn } from "../../lib/utils.js";
-import { ChatPanel, ChatPanelFooter } from "../../ui/chat-panel.js";
-import { EmptyState } from "../../ui/empty-state.js";
-import { MessageList } from "../../ui/message-list.js";
-import { PartsRenderer } from "../../ui/parts-renderer.js";
-import { CanvasHostHeader, ChatRailIndicator } from "./canvas-host-chrome.js";
-
-export type { CanvasHostContent } from "../../lib/canvas-host-state.js";
-
-export type CanvasHostMessage = {
-  readonly id: string;
-  readonly parts: readonly Part[];
-};
-
-export type CanvasHostProps<TData = unknown> = {
-  readonly messages: readonly CanvasHostMessage[];
-  /** `null` means nothing is open — the canvas column renders its empty state and collapses. */
-  readonly content: CanvasHostContent<TData> | null;
-  /** The host's own renderer for `content` — this package knows nothing about what a `kind` means. */
-  readonly renderCanvas: (content: CanvasHostContent<TData>) => ReactNode;
-  readonly focus: boolean;
-  readonly onFocusChange: (focus: boolean) => void;
-  readonly onClose: () => void;
-  readonly chatHeader?: ReactNode;
-  readonly composer?: ReactNode | null;
-  /** Shown in place of the transcript while `messages` is empty. */
-  readonly emptyChat?: ReactNode;
-  readonly className?: string;
-};
-
-/**
- * Three ways the two columns can occupy the frame. `chat` and `split` differ
- * only in whether the canvas track has anything to show; `focus` is the one
- * mode a reader chooses deliberately, via the header's focus-toggle.
- */
-type CanvasHostLayoutMode = "chat" | "split" | "focus";
-
-function resolveLayoutMode<TData>(content: CanvasHostContent<TData> | null, focus: boolean): CanvasHostLayoutMode {
-  if (content === null) return "chat";
-  return focus ? "focus" : "split";
-}
-
-/**
- * Grid tracks for the chat/canvas pair, keyed by mode. Every entry keeps
- * exactly two tracks so the browser can interpolate `grid-template-columns`
- * between modes instead of snapping (a transition across a differing track
- * count cannot animate) — see the class on the root element below.
- *
- * Below `lg` (1024px) there is never room for both columns, so `split` and
- * `focus` diverge deliberately instead of collapsing to the same thing:
- *
- *              | below `lg`                | `lg`+
- *   -----------|----------------------------|------------------------------
- *   chat       | chat full, canvas 0px      | chat full, canvas 0px
- *   split      | chat full, canvas 0px      | chat + canvas share the row
- *   focus      | canvas full, chat 0px      | canvas full, chat rail (4rem)
- *
- * `split` below `lg` keeps the chat column full-width with the canvas
- * merely off-screen (not torn down) — a reader who opens a canvas on a
- * phone still has their conversation, and the header's focus toggle is what
- * swaps to `focus` (canvas full-width) and back, exactly the affordance the
- * toggle already provides at `lg`+. Without this split, any open canvas
- * below `lg` would trap the reader away from the composer with no way back
- * short of closing the canvas outright.
- */
-export const GRID_CLASS: Record<CanvasHostLayoutMode, string> = {
-  chat: "grid-cols-[minmax(0,1fr)_0px]",
-  split: "grid-cols-[minmax(0,1fr)_0px] lg:grid-cols-[minmax(0,1fr)_min(28rem,40%)]",
-  focus: "grid-cols-[0px_minmax(0,1fr)] lg:grid-cols-[4rem_minmax(0,1fr)]",
-};
-
-/**
- * Visibility for the chat column's *interactive* content, keyed by mode.
- * `invisible` (not `hidden`, not `inert`) is what removes it from both
- * hit-testing and the tab order without any JS knowledge of the current
- * breakpoint. `chat` and `split` both keep the chat content visible at every
- * breakpoint now — in `split`, `GRID_CLASS` alone is what takes the canvas
- * column out of view below `lg` (a `0px` track), so no separate visibility
- * toggle is needed here. `focus` hides the chat content at every
- * breakpoint: below `lg` the canvas owns the whole row, and at `lg`+ the
- * chat column is a decorative rail (`ChatRailIndicator`), never real content.
- */
-export const CHAT_CONTENT_VISIBILITY_CLASS: Record<CanvasHostLayoutMode, string> = {
-  chat: "",
-  split: "",
-  focus: "invisible pointer-events-none",
-};
-
-/**
- * The dual-column generative-UI chat host: chat on the left, a
- * consumer-rendered canvas on the right. Fully controlled — `content` and
- * `focus` are props, `onFocusChange`/`onClose` are callbacks, and this
- * component owns no state of its own beyond the derived `mode` above. A
- * host wanting a state container to drive these props can reach for
- * `lib/canvas-host-state.ts`'s pure transition functions, but nothing here
- * requires it.
- *
- * Escape steps down exactly like `useChatDock`: focused → split first, then
- * split/chat → closed on a second press. A reader who filled the screen
- * with the canvas and hits Escape expects to land back at the split view,
- * not to lose the canvas outright.
- */
-export function CanvasHost<TData = unknown>({
-  messages,
-  content,
-  renderCanvas,
-  focus,
-  onFocusChange,
-  onClose,
-  chatHeader,
-  composer,
-  emptyChat,
-  className,
-}: CanvasHostProps<TData>) {
-  const mode = resolveLayoutMode(content, focus);
-
-  useEffect(() => {
-    if (content === null) return;
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") return;
-      if (isEscapeConsumedByNestedUI(event, "canvas-host")) return;
-      if (focus) {
-        onFocusChange(false);
-      } else {
-        onClose();
-      }
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [content, focus, onFocusChange, onClose]);
-
-  return (
-    <div
-      data-slot="canvas-host"
-      data-layout={mode}
-      className={cn(
-        // Animates `grid-template-columns` — a layout property, not
-        // `transform` — an accepted tradeoff shared with `now-cards.tsx`'s
-        // and `live-status-line.tsx`'s own `grid-template-rows` transitions.
-        // A family-wide transform-based (FLIP) rewrite is a candidate for a
-        // future pass, not this one. A morph (growing/shrinking in place,
-        // not entering/exiting) uses the in-out curve, not the decelerate
-        // one `ease-out` is tuned for.
-        "grid h-full min-h-0 transition-[grid-template-columns] duration-300 ease-[var(--ease-in-out)]",
-        GRID_CLASS[mode],
-        className,
-      )}
-    >
-      <div data-slot="canvas-host-chat" className="flex min-h-0 min-w-0 flex-col overflow-hidden">
-        {mode === "focus" ? <ChatRailIndicator /> : null}
-        <div className={cn("flex min-h-0 flex-1 flex-col", CHAT_CONTENT_VISIBILITY_CLASS[mode])}>
-          <ChatPanel className="min-h-0 flex-1">
-            {chatHeader}
-            <MessageList itemCount={messages.length} className="flex-1 px-4 py-3">
-              {messages.length === 0
-                ? emptyChat
-                : messages.map((message) => (
-                    <div key={message.id} data-slot="canvas-host-message">
-                      <PartsRenderer parts={message.parts} />
-                    </div>
-                  ))}
-            </MessageList>
-            {/* `null` and omitted must behave identically — no empty bordered footer either way. */}
-            {composer === undefined || composer === null ? null : <ChatPanelFooter>{composer}</ChatPanelFooter>}
-          </ChatPanel>
-        </div>
-      </div>
-
-      <div
-        data-slot="canvas-host-canvas"
-        className={cn(
-          "flex min-h-0 min-w-0 flex-col overflow-hidden bg-background",
-          content !== null && "border-l border-border",
-        )}
-      >
-        {content === null ? (
-          <EmptyState
-            title="Nothing open"
-            description="Content opens here when something needs a closer look."
-          />
-        ) : (
-          <>
-            <CanvasHostHeader
-              title={content.title}
-              kind={content.kind}
-              focus={focus}
-              onFocusChange={onFocusChange}
-              onClose={onClose}
-            />
-            <div className="min-h-0 flex-1 overflow-y-auto">
-              <div className="mx-auto max-w-3xl px-4 py-4">{renderCanvas(content)}</div>
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/hooks/use-anchored-scroll.test.tsx b/src/hooks/use-anchored-scroll.test.tsx
deleted file mode 100644
index ee7b1d96..00000000
--- a/src/hooks/use-anchored-scroll.test.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { describe, expect, test } from "bun:test";
-
-import { useAnchoredScroll } from "./use-anchored-scroll.js";
-import { renderHook } from "../test/render-hook.js";
-
-/** happy-dom reports zero for scroll metrics unless a test stubs them. */
-function stubScrollMetrics(el: HTMLElement, { scrollHeight, scrollTop, clientHeight }: Record<string, number>) {
-  Object.defineProperty(el, "scrollHeight", { configurable: true, value: scrollHeight });
-  Object.defineProperty(el, "scrollTop", { configurable: true, value: scrollTop, writable: true });
-  Object.defineProperty(el, "clientHeight", { configurable: true, value: clientHeight });
-}
-
-/**
- * happy-dom's `ResizeObserver` never actually fires — there's no layout
- * engine behind it to detect a real size change. This stub hands the test
- * direct control over the callback the hook registers, so a test can
- * trigger it the same way a real resize would.
- */
-function stubResizeObserver(): { fire: () => void; restore: () => void } {
-  let callback: (() => void) | undefined;
-  class StubResizeObserver {
-    constructor(cb: () => void) {
-      callback = cb;
-    }
-    observe() {}
-    disconnect() {}
-  }
-  const original = globalThis.ResizeObserver;
-  globalThis.ResizeObserver = StubResizeObserver as unknown as typeof ResizeObserver;
-  return {
-    fire: () => callback?.(),
-    restore: () => {
-      globalThis.ResizeObserver = original;
-    },
-  };
-}
-
-/**
- * happy-dom's `scrollHeight`/`clientHeight` getters are real accessors
- * backed by an internal field that always reads 0 — there's no layout
- * engine behind them. Overriding on `Element.prototype` (not per-instance)
- * is what lets a real, freshly-mounted DOM node report non-zero metrics the
- * moment `useAnchoredScroll`'s own mount effect reads them.
- */
-function withScrollMetrics<T>(scrollHeight: number, clientHeight: number, fn: () => T): T {
-  const scrollHeightDescriptor = Object.getOwnPropertyDescriptor(Element.prototype, "scrollHeight");
-  const clientHeightDescriptor = Object.getOwnPropertyDescriptor(Element.prototype, "clientHeight");
-  Object.defineProperty(Element.prototype, "scrollHeight", { configurable: true, get: () => scrollHeight });
-  Object.defineProperty(Element.prototype, "clientHeight", { configurable: true, get: () => clientHeight });
-  try {
-    return fn();
-  } finally {
-    if (scrollHeightDescriptor !== undefined) {
-      Object.defineProperty(Element.prototype, "scrollHeight", scrollHeightDescriptor);
-    }
-    if (clientHeightDescriptor !== undefined) {
-      Object.defineProperty(Element.prototype, "clientHeight", clientHeightDescriptor);
-    }
-  }
-}
-
-function ScrollHarness({ itemCount }: { itemCount: number }) {
-  const { containerRef, contentRef, handleScroll } = useAnchoredScroll<HTMLDivElement>(itemCount);
-  return (
-    <div ref={containerRef} onScroll={handleScroll}>
-      <div ref={contentRef} />
-    </div>
-  );
-}
-
-describe("useAnchoredScroll", () => {
-  test("pins to the bottom on first render", () => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-    let root!: Root;
-
-    withScrollMetrics(500, 200, () => {
-      act(() => {
-        root = createRoot(container);
-        root.render(<ScrollHarness itemCount={1} />);
-      });
-    });
-
-    const scrollEl = container.firstElementChild as HTMLDivElement;
-    expect(scrollEl.scrollTop).toBe(500);
-
-    act(() => root.unmount());
-    container.remove();
-  });
-
-  test("scrolls to the bottom when itemCount grows while pinned", () => {
-    let count = 1;
-    const hook = renderHook(() => useAnchoredScroll<HTMLDivElement>(count));
-    const el = document.createElement("div");
-    stubScrollMetrics(el, { scrollHeight: 500, scrollTop: 300, clientHeight: 200 });
-    hook.result.current.containerRef.current = el;
-
-    count = 2;
-    stubScrollMetrics(el, { scrollHeight: 700, scrollTop: 300, clientHeight: 200 });
-    act(() => hook.rerender());
-
-    expect(el.scrollTop).toBe(700);
-    hook.unmount();
-  });
-
-  test("does not move scrollTop when the reader has scrolled away from the bottom", () => {
-    let count = 1;
-    const hook = renderHook(() => useAnchoredScroll<HTMLDivElement>(count));
-    const el = document.createElement("div");
-    hook.result.current.containerRef.current = el;
-
-    // Reader scrolled up: 300px from the bottom, well past the pin threshold.
-    stubScrollMetrics(el, { scrollHeight: 900, scrollTop: 100, clientHeight: 200 });
-    act(() => hook.result.current.handleScroll());
-
-    count = 2;
-    stubScrollMetrics(el, { scrollHeight: 1100, scrollTop: 100, clientHeight: 200 });
-    act(() => hook.rerender());
-
-    expect(el.scrollTop).toBe(100);
-    hook.unmount();
-  });
-
-  test("re-pins once the reader scrolls back within the bottom threshold", () => {
-    let count = 1;
-    const hook = renderHook(() => useAnchoredScroll<HTMLDivElement>(count));
-    const el = document.createElement("div");
-    hook.result.current.containerRef.current = el;
-
-    stubScrollMetrics(el, { scrollHeight: 900, scrollTop: 100, clientHeight: 200 });
-    act(() => hook.result.current.handleScroll());
-
-    // Reader scrolls back down, within the 40px pin threshold.
-    stubScrollMetrics(el, { scrollHeight: 900, scrollTop: 690, clientHeight: 200 });
-    act(() => hook.result.current.handleScroll());
-
-    count = 2;
-    stubScrollMetrics(el, { scrollHeight: 1100, scrollTop: 690, clientHeight: 200 });
-    act(() => hook.rerender());
-
-    expect(el.scrollTop).toBe(1100);
-    hook.unmount();
-  });
-
-  test("re-pins on in-place content growth while itemCount stays constant", () => {
-    const resizeObserver = stubResizeObserver();
-    try {
-      const hook = renderHook(() => useAnchoredScroll<HTMLDivElement>(1));
-      const container = document.createElement("div");
-      const content = document.createElement("div");
-      hook.result.current.containerRef.current = container;
-      stubScrollMetrics(container, { scrollHeight: 500, scrollTop: 300, clientHeight: 200 });
-
-      act(() => hook.result.current.contentRef(content));
-
-      // The content element grows taller in place (streaming text, a
-      // growing tool-output block) — itemCount never changes, only
-      // scrollHeight does.
-      stubScrollMetrics(container, { scrollHeight: 900, scrollTop: 300, clientHeight: 200 });
-      act(() => resizeObserver.fire());
-
-      expect(container.scrollTop).toBe(900);
-      hook.unmount();
-    } finally {
-      resizeObserver.restore();
-    }
-  });
-
-  test("does not re-pin on in-place content growth once the reader has scrolled away", () => {
-    const resizeObserver = stubResizeObserver();
-    try {
-      const hook = renderHook(() => useAnchoredScroll<HTMLDivElement>(1));
-      const container = document.createElement("div");
-      const content = document.createElement("div");
-      hook.result.current.containerRef.current = container;
-
-      stubScrollMetrics(container, { scrollHeight: 900, scrollTop: 100, clientHeight: 200 });
-      act(() => hook.result.current.handleScroll());
-
-      act(() => hook.result.current.contentRef(content));
-
-      stubScrollMetrics(container, { scrollHeight: 1200, scrollTop: 100, clientHeight: 200 });
-      act(() => resizeObserver.fire());
-
-      expect(container.scrollTop).toBe(100);
-      hook.unmount();
-    } finally {
-      resizeObserver.restore();
-    }
-  });
-});
diff --git a/src/hooks/use-anchored-scroll.ts b/src/hooks/use-anchored-scroll.ts
deleted file mode 100644
index d4ef0b8b..00000000
--- a/src/hooks/use-anchored-scroll.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { useCallback, useEffect, useRef, type RefObject } from "react";
-
-const BOTTOM_PIN_THRESHOLD_PX = 40;
-
-export type UseAnchoredScrollResult<T extends HTMLElement> = {
-  /** Attach to the scrollable container. */
-  readonly containerRef: RefObject<T | null>;
-  /**
-   * Callback ref for the element that wraps the scrollable content (the
-   * direct child that actually grows: new items, streaming text, an
-   * expanding tool-output block). A callback ref, not a `RefObject`, so a
-   * `ResizeObserver` attaches the instant the node mounts rather than only
-   * on the hook's own first render — it is what catches in-place content
-   * growth, since `itemCount` alone only fires when an item is added or
-   * removed, never when an existing item grows taller.
-   */
-  readonly contentRef: (node: HTMLElement | null) => void;
-  /** Attach to the container's `onScroll`. */
-  readonly handleScroll: () => void;
-};
-
-/**
- * Stick-to-bottom scrolling for a growing message list: while the reader is
- * at (or near) the bottom, a new item keeps them pinned there; once they
- * scroll up to read history, new items arrive quietly and their position
- * holds — nothing yanks them back down.
- *
- * "Near the bottom" is a `BOTTOM_PIN_THRESHOLD_PX` band rather than an exact
- * match: a container that is pinned but has a few stray pixels of subpixel
- * scroll rounding must still count as pinned, or the reader gets un-pinned by
- * their own browser's rendering.
- *
- * `itemCount` is a single number — the length of whatever list is rendered —
- * rather than the list itself, so a new array identity with the same length
- * never fires a scroll that has nothing new to show for it. The initial
- * render always lands pinned to the bottom, matching how a chat transcript
- * should open: at the most recent message.
- */
-export function useAnchoredScroll<T extends HTMLElement = HTMLDivElement>(
-  itemCount: number,
-): UseAnchoredScrollResult<T> {
-  const containerRef = useRef<T>(null);
-  const pinnedRef = useRef(true);
-  const resizeObserverRef = useRef<ResizeObserver | null>(null);
-
-  const scrollToBottom = () => {
-    const container = containerRef.current;
-    if (container === null) return;
-    container.scrollTop = container.scrollHeight;
-  };
-
-  const handleScroll = () => {
-    const container = containerRef.current;
-    if (container === null) return;
-    const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
-    pinnedRef.current = distanceFromBottom <= BOTTOM_PIN_THRESHOLD_PX;
-  };
-
-  useEffect(() => {
-    if (pinnedRef.current) scrollToBottom();
-  }, [itemCount]);
-
-  // Re-pins on in-place content growth — streaming text or a growing
-  // tool-output block changes the content's height without changing
-  // `itemCount`, so the effect above alone never catches it.
-  const contentRef = useCallback((node: HTMLElement | null) => {
-    resizeObserverRef.current?.disconnect();
-    resizeObserverRef.current = null;
-    if (node === null || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(() => {
-      if (pinnedRef.current) scrollToBottom();
-    });
-    observer.observe(node);
-    resizeObserverRef.current = observer;
-  }, []);
-
-  return { containerRef, contentRef, handleScroll };
-}
diff --git a/src/hooks/use-chat-dock.test.tsx b/src/hooks/use-chat-dock.test.tsx
deleted file mode 100644
index 9b5b62e3..00000000
--- a/src/hooks/use-chat-dock.test.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import { act } from "react";
-import { describe, expect, test } from "bun:test";
-
-import { useChatDock } from "./use-chat-dock.js";
-import { renderHook } from "../test/render-hook.js";
-
-function pressEscape(): void {
-  act(() => {
-    window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
-  });
-}
-
-describe("useChatDock", () => {
-  test("open moves closed -> docked", () => {
-    const hook = renderHook(() => useChatDock());
-    act(() => hook.result.current.open());
-    expect(hook.result.current.mode).toBe("docked");
-  });
-
-  test("expand moves docked -> fullpage, collapse moves back", () => {
-    const hook = renderHook(() => useChatDock("docked"));
-    act(() => hook.result.current.expand());
-    expect(hook.result.current.mode).toBe("fullpage");
-    act(() => hook.result.current.collapse());
-    expect(hook.result.current.mode).toBe("docked");
-  });
-
-  test("close moves any open mode back to closed", () => {
-    const hook = renderHook(() => useChatDock("fullpage"));
-    act(() => hook.result.current.close());
-    expect(hook.result.current.mode).toBe("closed");
-  });
-
-  test("open is a no-op once already open", () => {
-    const hook = renderHook(() => useChatDock("fullpage"));
-    act(() => hook.result.current.open());
-    expect(hook.result.current.mode).toBe("fullpage");
-  });
-
-  test("collapse is a no-op while already closed", () => {
-    const hook = renderHook(() => useChatDock("closed"));
-    act(() => hook.result.current.collapse());
-    expect(hook.result.current.mode).toBe("closed");
-  });
-
-  test("Escape steps fullpage -> docked, not straight to closed", () => {
-    const hook = renderHook(() => useChatDock("fullpage"));
-    pressEscape();
-    expect(hook.result.current.mode).toBe("docked");
-  });
-
-  test("Escape closes directly from docked", () => {
-    const hook = renderHook(() => useChatDock("docked"));
-    pressEscape();
-    expect(hook.result.current.mode).toBe("closed");
-  });
-
-  test("Escape does nothing while closed", () => {
-    const hook = renderHook(() => useChatDock("closed"));
-    pressEscape();
-    expect(hook.result.current.mode).toBe("closed");
-  });
-
-  test("Escape already handled by nested UI (defaultPrevented) does not step the dock down", () => {
-    const hook = renderHook(() => useChatDock("fullpage"));
-    act(() => {
-      const event = new KeyboardEvent("keydown", { key: "Escape", cancelable: true, bubbles: true });
-      event.preventDefault();
-      window.dispatchEvent(event);
-    });
-    expect(hook.result.current.mode).toBe("fullpage");
-  });
-
-  test("Escape originating inside a nested overlay (e.g. a native select) does not step the dock down", () => {
-    const dockContainer = document.createElement("div");
-    dockContainer.dataset.slot = "chat-dock";
-    document.body.appendChild(dockContainer);
-    const select = document.createElement("select");
-    dockContainer.appendChild(select);
-
-    const hook = renderHook(() => useChatDock("fullpage"));
-    act(() => {
-      select.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true, composed: true }));
-    });
-    expect(hook.result.current.mode).toBe("fullpage");
-
-    dockContainer.remove();
-  });
-
-  test("Escape originating inside a portal-rendered overlay (role=dialog) does not step the dock down, even outside the dock's DOM subtree", () => {
-    const dockContainer = document.createElement("div");
-    dockContainer.dataset.slot = "chat-dock";
-    document.body.appendChild(dockContainer);
-
-    const portalOverlay = document.createElement("div");
-    portalOverlay.setAttribute("role", "dialog");
-    document.body.appendChild(portalOverlay);
-
-    const hook = renderHook(() => useChatDock("fullpage"));
-    act(() => {
-      portalOverlay.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true, composed: true }));
-    });
-    expect(hook.result.current.mode).toBe("fullpage");
-
-    dockContainer.remove();
-    portalOverlay.remove();
-  });
-
-  test("Escape from within the dock's own container (no nested overlay) still steps the dock down", () => {
-    const dockContainer = document.createElement("div");
-    dockContainer.dataset.slot = "chat-dock";
-    document.body.appendChild(dockContainer);
-    const button = document.createElement("button");
-    dockContainer.appendChild(button);
-
-    const hook = renderHook(() => useChatDock("fullpage"));
-    act(() => {
-      button.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true, composed: true }));
-    });
-    expect(hook.result.current.mode).toBe("docked");
-
-    dockContainer.remove();
-  });
-
-  test("shouldAnimateEntrance is true only when the previous mode was closed", () => {
-    const hook = renderHook(() => useChatDock());
-    expect(hook.result.current.shouldAnimateEntrance).toBe(false);
-
-    act(() => hook.result.current.open());
-    expect(hook.result.current.mode).toBe("docked");
-    expect(hook.result.current.shouldAnimateEntrance).toBe(true);
-
-    act(() => hook.result.current.expand());
-    expect(hook.result.current.mode).toBe("fullpage");
-    expect(hook.result.current.shouldAnimateEntrance).toBe(false);
-
-    act(() => hook.result.current.collapse());
-    expect(hook.result.current.mode).toBe("docked");
-    expect(hook.result.current.shouldAnimateEntrance).toBe(false);
-  });
-});
diff --git a/src/hooks/use-chat-dock.ts b/src/hooks/use-chat-dock.ts
deleted file mode 100644
index b99e709b..00000000
--- a/src/hooks/use-chat-dock.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-
-/**
- * The three ways the dock can occupy the screen. `docked` and `fullpage` are
- * both "open" — the difference is size and position only, never a remount —
- * so the transition between them is a plain CSS transition on one element.
- */
-export type ChatDockMode = "closed" | "docked" | "fullpage";
-
-/**
- * Elements whose own Escape handling should win over the dock's step-down —
- * a `<select>` popup, a Radix Popover/DropdownMenu/Select/Dialog (all of
- * which mark their content with `role="dialog"`, `role="listbox"`, or
- * `role="menu"`, and Radix specifically renders its floating content inside
- * `[data-radix-popper-content-wrapper]`), or any other overlay the composer
- * hosts. Matched against `composedPath()` so a portal-rendered overlay still
- * counts, even though it lives outside the dock's own DOM subtree.
- */
-export const NESTED_OVERLAY_SELECTOR = [
-  "select",
-  '[role="dialog"]',
-  '[role="alertdialog"]',
-  '[role="listbox"]',
-  '[role="menu"]',
-  "[data-radix-popper-content-wrapper]",
-].join(",");
-
-/**
- * True when this Escape keypress belongs to UI nested inside a container, not
- * the container itself — either something already called `preventDefault()`
- * on it, or `composedPath()` reaches a nested overlay element before it
- * reaches `ownSlot`. Overlay matches are checked first and win immediately
- * regardless of whose container the path eventually reaches, so this is safe
- * to reuse for any container (`chat-dock`, `canvas-host`, ...) — `ownSlot`
- * only trims the walk short once it's clear nothing nested caught the key.
- */
-export function isEscapeConsumedByNestedUI(event: KeyboardEvent, ownSlot = "chat-dock"): boolean {
-  if (event.defaultPrevented) return true;
-  const path = typeof event.composedPath === "function" ? event.composedPath() : [];
-  for (const node of path) {
-    if (!(node instanceof HTMLElement)) continue;
-    if (node.matches(NESTED_OVERLAY_SELECTOR)) return true;
-    if (node.dataset.slot === ownSlot) return false;
-  }
-  return false;
-}
-
-export type UseChatDockResult = {
-  readonly mode: ChatDockMode;
-  readonly isOpen: boolean;
-  /**
-   * True only on the render where `mode` just left `closed` — cycling
-   * `docked <-> fullpage` never sets this, so the pop-in entrance plays once
-   * per open, not on every resize between the two open sizes.
-   */
-  readonly shouldAnimateEntrance: boolean;
-  readonly setMode: (mode: ChatDockMode) => void;
-  /** Closed → docked. No-op once already open, so a stray call never demotes fullpage. */
-  readonly open: () => void;
-  readonly close: () => void;
-  readonly expand: () => void;
-  readonly collapse: () => void;
-  readonly toggle: () => void;
-};
-
-/**
- * Owns the dock's open/closed/size state. Nothing here renders — the
- * `ChatDock` piece reads `mode` and applies the matching CSS classes, and the
- * three-state CSS transition (not a component swap) is what makes
- * `docked → fullpage` feel like one panel growing instead of two panels
- * trading places.
- *
- * Escape steps down one level rather than closing outright: `fullpage` →
- * `docked`, then `docked` → `closed`. A fullpage reader who hits Escape once
- * expects to land back at the corner panel, not to lose the conversation
- * outright — a second press finishes the job.
- */
-export function useChatDock(initialMode: ChatDockMode = "closed"): UseChatDockResult {
-  const [mode, setMode] = useState<ChatDockMode>(initialMode);
-
-  const previousModeRef = useRef<ChatDockMode>(initialMode);
-  const previousMode = previousModeRef.current;
-  if (previousMode !== mode) previousModeRef.current = mode;
-  const shouldAnimateEntrance = previousMode === "closed" && mode !== "closed";
-
-  useEffect(() => {
-    if (mode === "closed") return;
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") return;
-      if (isEscapeConsumedByNestedUI(event)) return;
-      setMode((current) => (current === "fullpage" ? "docked" : "closed"));
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [mode]);
-
-  const open = useCallback(() => setMode((current) => (current === "closed" ? "docked" : current)), []);
-  const close = useCallback(() => setMode("closed"), []);
-  const expand = useCallback(() => setMode("fullpage"), []);
-  const collapse = useCallback(() => setMode((current) => (current === "closed" ? current : "docked")), []);
-  const toggle = useCallback(() => setMode((current) => (current === "closed" ? "docked" : "closed")), []);
-
-  return { mode, isOpen: mode !== "closed", shouldAnimateEntrance, setMode, open, close, expand, collapse, toggle };
-}
diff --git a/src/hooks/use-collection-state.ts b/src/hooks/use-collection-state.ts
deleted file mode 100644
index 67efa65e..00000000
--- a/src/hooks/use-collection-state.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-
-import { type CollectionRequest, useDataPort } from "../lib/data-port.js";
-
-/**
- * Collapses a `CollectionResult` into the four states every collection surface
- * has to render, so a table, a list, a grid or a step rail can each branch on
- * the same thing instead of re-deriving it. It renders nothing — the surface
- * owns its own markup.
- */
-export type CollectionState<T> =
-  | { readonly status: "loading" }
-  | { readonly status: "error"; readonly error: Error }
-  | { readonly status: "empty" }
-  | { readonly status: "ready"; readonly items: readonly T[] };
-
-export type UseCollectionStateResult<T> = {
-  readonly state: CollectionState<T>;
-  /** True during background refetches too — wire this to `aria-busy`. */
-  readonly isFetching: boolean;
-  readonly refetch: () => void;
-  readonly hasNextPage: boolean;
-  readonly fetchNextPage: () => void;
-};
-
-export function useCollectionState<T>(request: CollectionRequest<T>): UseCollectionStateResult<T> {
-  const { items, isLoading, isFetching, error, refetch, hasNextPage, fetchNextPage } =
-    useDataPort().useCollection(request);
-
-  const state: CollectionState<T> = isLoading
-    ? { status: "loading" }
-    : error !== null
-      ? { status: "error", error }
-      : items.length === 0
-        ? { status: "empty" }
-        : { status: "ready", items };
-
-  return { state, isFetching, refetch, hasNextPage, fetchNextPage };
-}
diff --git a/src/hooks/use-flip-transition.test.tsx b/src/hooks/use-flip-transition.test.tsx
deleted file mode 100644
index 0cb89780..00000000
--- a/src/hooks/use-flip-transition.test.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-import { act, useState } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { describe, expect, test } from "bun:test";
-
-import { useFlipTransition, type UseFlipTransitionOptions } from "./use-flip-transition.js";
-
-type Rect = Pick<DOMRect, "top" | "left" | "width" | "height">;
-
-function rect({ top, left, width, height }: Rect): DOMRect {
-  return {
-    top,
-    left,
-    width,
-    height,
-    right: left + width,
-    bottom: top + height,
-    x: left,
-    y: top,
-    toJSON: () => ({}),
-  } as DOMRect;
-}
-
-/**
- * Stubs `getBoundingClientRect` on `element` to return the next value from
- * `queue` on each call (repeating the last value once exhausted), and counts
- * calls so tests can assert on read ordering, not just the final math.
- */
-function stubRects(element: HTMLElement, queue: readonly Rect[]): { calls: number } {
-  const state = { calls: 0 };
-  let index = 0;
-  element.getBoundingClientRect = () => {
-    const value = queue[Math.min(index, queue.length - 1)] ?? queue[0];
-    index += 1;
-    state.calls += 1;
-    if (!value) throw new Error("stubRects requires at least one rect");
-    return rect(value);
-  };
-  return state;
-}
-
-type Harness = {
-  element: HTMLDivElement;
-  setKey: (key: string | null) => void;
-  unmount: () => void;
-};
-
-/**
- * Mounts a single element driven by `useFlipTransition`. `initialRect`, when
- * given, is installed on the element the instant its ref is attached — i.e.
- * before the hook's layout effect runs on the mounting commit — so the very
- * first effect run captures it as the "First" rect for the *next* key
- * change, without needing a wasted extra render to seed it.
- */
-function mount(initialKey: string | null, options?: UseFlipTransitionOptions, initialRect?: Rect): Harness {
-  const container = document.createElement("div");
-  document.body.appendChild(container);
-  let root!: Root;
-  let setKeyState!: (key: string | null) => void;
-  let element!: HTMLDivElement;
-
-  function Harness() {
-    const [key, setKey] = useState<string | null>(initialKey);
-    setKeyState = setKey;
-    const ref = useFlipTransition<HTMLDivElement>(key, options);
-    return (
-      <div
-        ref={(node) => {
-          ref.current = node;
-          if (node && !element) {
-            element = node;
-            if (initialRect) stubRects(node, [initialRect]);
-          }
-        }}
-      />
-    );
-  }
-
-  act(() => {
-    root = createRoot(container);
-    root.render(<Harness />);
-  });
-
-  return {
-    element,
-    setKey: (key) => act(() => setKeyState(key)),
-    unmount: () => {
-      act(() => root.unmount());
-      container.remove();
-    },
-  };
-}
-
-describe("useFlipTransition", () => {
-  test("does nothing on the first render — nothing to invert against yet", () => {
-    const harness = mount("a");
-    expect(harness.element.style.transform).toBe("");
-    expect(harness.element.style.transition).toBe("");
-    harness.unmount();
-  });
-
-  test("skips the morph when key goes from null to a value", () => {
-    const harness = mount(null, undefined, { top: 0, left: 0, width: 10, height: 10 });
-    harness.setKey("a");
-    expect(harness.element.style.transform).toBe("");
-    harness.unmount();
-  });
-
-  test("skips the morph when key goes to null (exit already has its own animation)", () => {
-    const harness = mount("a", undefined, { top: 0, left: 0, width: 10, height: 10 });
-    harness.setKey(null);
-    expect(harness.element.style.transform).toBe("");
-    harness.unmount();
-  });
-
-  test("skips the morph when the key is unchanged", () => {
-    const harness = mount("a", undefined, { top: 0, left: 0, width: 100, height: 100 });
-    const rectStub = stubRects(harness.element, [{ top: 0, left: 0, width: 100, height: 100 }]);
-    // Same primitive key value: React bails out of the render entirely, so
-    // the effect never re-runs and no extra read happens.
-    harness.setKey("a");
-    expect(rectStub.calls).toBe(0);
-    expect(harness.element.style.transform).toBe("");
-    harness.unmount();
-  });
-
-  test("performs exactly First, then the forced-layout read, then arms Play's transition — in that order", () => {
-    const harness = mount("docked", undefined, { top: 100, left: 200, width: 50, height: 40 });
-
-    const writesAtRead: Array<{ transition: string; transform: string }> = [];
-    let call = 0;
-    const rects: Rect[] = [
-      { top: 10, left: 20, width: 200, height: 160 }, // Last: read at the top of the morph
-      { top: 10, left: 20, width: 200, height: 160 }, // the forced-reflow read
-      { top: 10, left: 20, width: 200, height: 160 }, // tail capture for the next morph
-    ];
-    harness.element.getBoundingClientRect = () => {
-      writesAtRead.push({
-        transition: harness.element.style.transition,
-        transform: harness.element.style.transform,
-      });
-      const value = rects[Math.min(call, rects.length - 1)] ?? rects[0];
-      call += 1;
-      if (!value) throw new Error("rects requires at least one entry");
-      return rect(value);
-    };
-
-    harness.setKey("fullpage");
-
-    expect(writesAtRead.length).toBe(3);
-    // First (Last-rect) read: happens before any style has been touched.
-    expect(writesAtRead[0]).toEqual({ transition: "", transform: "" });
-    // Invert: the forced-reflow read happens after the inverted transform is
-    // written but before Play arms the real transition — that ordering is
-    // exactly what makes the transition actually animate instead of
-    // coalescing straight to its resting state.
-    expect(writesAtRead[1]?.transition).toBe("none");
-    expect(writesAtRead[1]?.transform).not.toBe("");
-    expect(writesAtRead[1]?.transform).toContain("translate(");
-    expect(writesAtRead[1]?.transform).toContain("scale(");
-    // Play: the transition is armed and the transform cleared back to
-    // identity so it animates there.
-    expect(harness.element.style.transition).toBe("transform 280ms var(--ease-out)");
-    expect(harness.element.style.transform).toBe("");
-
-    harness.unmount();
-  });
-
-  test("computes the inverse transform from the First/Last rect diff", () => {
-    // First: x100,y50, 50x40. Last: x20,y10, 200x160.
-    const harness = mount("docked", undefined, { top: 50, left: 100, width: 50, height: 40 });
-
-    let capturedTransform = "";
-    let readCount = 0;
-    harness.element.getBoundingClientRect = () => {
-      readCount += 1;
-      if (readCount === 2) {
-        // The forced-reflow read: the inverted transform has just been
-        // written and is the value under test.
-        capturedTransform = harness.element.style.transform;
-      }
-      return rect({ top: 10, left: 20, width: 200, height: 160 });
-    };
-
-    harness.setKey("fullpage");
-
-    // deltaX = First.left - Last.left = 100 - 20 = 80
-    // deltaY = First.top - Last.top = 50 - 10 = 40
-    // scaleX = First.width / Last.width = 50 / 200 = 0.25
-    // scaleY = First.height / Last.height = 40 / 160 = 0.25
-    expect(capturedTransform).toBe("translate(80px, 40px) scale(0.25, 0.25)");
-
-    harness.unmount();
-  });
-
-  test("respects a custom duration and easing", () => {
-    const harness = mount("a", { durationMs: 500, easing: "ease-in-out" }, { top: 0, left: 0, width: 10, height: 10 });
-    harness.element.getBoundingClientRect = () => rect({ top: 0, left: 0, width: 20, height: 20 });
-
-    harness.setKey("b");
-
-    expect(harness.element.style.transition).toBe("transform 500ms ease-in-out");
-    harness.unmount();
-  });
-});
diff --git a/src/hooks/use-flip-transition.ts b/src/hooks/use-flip-transition.ts
deleted file mode 100644
index 500728fc..00000000
--- a/src/hooks/use-flip-transition.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useLayoutEffect, useRef, type RefObject } from "react";
-
-export type UseFlipTransitionOptions = {
-  readonly durationMs?: number;
-  readonly easing?: string;
-};
-
-/**
- * FLIP (First, Last, Invert, Play): pass a `key` that changes whenever the
- * element's box should visually morph into a new size/position. Layout
- * itself is never animated — the element jumps straight to its new geometry
- * — this hook measures the rect from before and after that jump, applies the
- * inverse as a `transform`, and transitions only `transform` back to
- * identity. `key === null` means "this change shouldn't morph" (e.g. an
- * entrance/exit already has its own animation) and is measured but skipped.
- */
-export function useFlipTransition<T extends HTMLElement>(
-  key: string | null,
-  { durationMs = 280, easing = "var(--ease-out)" }: UseFlipTransitionOptions = {},
-): RefObject<T | null> {
-  const ref = useRef<T>(null);
-  const previousRectRef = useRef<DOMRect | null>(null);
-  const previousKeyRef = useRef<string | null>(null);
-
-  useLayoutEffect(() => {
-    const element = ref.current;
-    if (!element) return;
-
-    const previousRect = previousRectRef.current;
-    const previousKey = previousKeyRef.current;
-    const shouldMorph = previousRect !== null && previousKey !== null && key !== null && previousKey !== key;
-
-    if (shouldMorph && previousRect) {
-      const nextRect = element.getBoundingClientRect();
-      const deltaX = previousRect.left - nextRect.left;
-      const deltaY = previousRect.top - nextRect.top;
-      const scaleX = previousRect.width / nextRect.width;
-      const scaleY = previousRect.height / nextRect.height;
-
-      element.style.transition = "none";
-      element.style.transformOrigin = "top left";
-      element.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(${scaleX}, ${scaleY})`;
-
-      // Read layout back before switching the transition on: two style writes
-      // in the same tick otherwise coalesce, and the element skips straight
-      // to its resting transform instead of animating there.
-      void element.getBoundingClientRect();
-
-      element.style.transition = `transform ${durationMs}ms ${easing}`;
-      element.style.transform = "";
-    }
-
-    previousKeyRef.current = key;
-    previousRectRef.current = element.getBoundingClientRect();
-  }, [key, durationMs, easing]);
-
-  return ref;
-}
diff --git a/src/hooks/use-focus-trap.test.tsx b/src/hooks/use-focus-trap.test.tsx
deleted file mode 100644
index 81977126..00000000
--- a/src/hooks/use-focus-trap.test.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-import { act, useState } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { describe, expect, test } from "bun:test";
-
-import { useFocusTrap } from "./use-focus-trap.js";
-
-type Harness = {
-  container: HTMLElement;
-  trigger: HTMLButtonElement;
-  trap: HTMLDivElement;
-  setActive: (active: boolean) => void;
-  setMiddleButton: (present: boolean) => void;
-  setTrailingButton: (present: boolean) => void;
-  /** Unmounts only the trap's own React tree — the trigger lives outside it, in plain DOM, so it survives to be asserted on afterwards. */
-  unmountTrap: () => void;
-  unmount: () => void;
-};
-
-/**
- * Mounts a plain-DOM trigger button (outside any React tree, so it survives
- * the trap's own unmount) alongside a React-rendered trap container with
- * `first` and `last` focusable buttons. Tests can toggle a `middle` button
- * (between `first` and `last`, never a boundary) and a `trailing` button
- * (after `last`, becoming the new last boundary once present) to exercise
- * focusable-set recalculation while the trap stays active.
- */
-function mount(initialActive: boolean): Harness {
-  const container = document.createElement("div");
-  document.body.appendChild(container);
-
-  const trigger = document.createElement("button");
-  trigger.id = "trigger";
-  trigger.textContent = "trigger";
-  container.appendChild(trigger);
-
-  const trapHost = document.createElement("div");
-  container.appendChild(trapHost);
-
-  let root!: Root;
-  let setActiveState!: (active: boolean) => void;
-  let setMiddleState!: (present: boolean) => void;
-  let setTrailingState!: (present: boolean) => void;
-  let trapElement!: HTMLDivElement;
-
-  function TrapOnly() {
-    const [active, setActive] = useState(initialActive);
-    const [middle, setMiddle] = useState(false);
-    const [trailing, setTrailing] = useState(false);
-    setActiveState = setActive;
-    setMiddleState = setMiddle;
-    setTrailingState = setTrailing;
-    const trapRef = useFocusTrap<HTMLDivElement>(active);
-
-    return (
-      <div
-        ref={(node) => {
-          trapRef.current = node;
-          if (node) trapElement = node;
-        }}
-      >
-        <button id="first">first</button>
-        {middle ? <button id="middle">middle</button> : null}
-        <button id="last">last</button>
-        {trailing ? <button id="trailing">trailing</button> : null}
-      </div>
-    );
-  }
-
-  act(() => {
-    root = createRoot(trapHost);
-    root.render(<TrapOnly />);
-  });
-
-  return {
-    container,
-    trigger,
-    trap: trapElement,
-    setActive: (active) => act(() => setActiveState(active)),
-    setMiddleButton: (present) => act(() => setMiddleState(present)),
-    setTrailingButton: (present) => act(() => setTrailingState(present)),
-    unmountTrap: () =>
-      act(() => {
-        root.unmount();
-      }),
-    unmount: () => {
-      act(() => {
-        root.unmount();
-      });
-      container.remove();
-    },
-  };
-}
-
-function fireTab(target: EventTarget, shiftKey: boolean): void {
-  target.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab", shiftKey, bubbles: true, cancelable: true }));
-}
-
-function byId(id: string): HTMLElement {
-  const element = document.getElementById(id);
-  if (!element) throw new Error(`missing #${id}`);
-  return element;
-}
-
-describe("useFocusTrap", () => {
-  test("moves focus into the container on activation", () => {
-    const harness = mount(false);
-    harness.trigger.focus();
-    harness.setActive(true);
-    expect(document.activeElement).toBe(byId("first"));
-    harness.unmount();
-  });
-
-  test("does not steal focus if it's already inside the container on activation", () => {
-    const harness = mount(false);
-    byId("last").focus();
-    harness.setActive(true);
-    expect(document.activeElement).toBe(byId("last"));
-    harness.unmount();
-  });
-
-  test("Tab on the last focusable wraps to the first", () => {
-    const harness = mount(true);
-    byId("last").focus();
-    act(() => fireTab(harness.trap, false));
-    expect(document.activeElement).toBe(byId("first"));
-    harness.unmount();
-  });
-
-  test("Shift+Tab on the first focusable wraps to the last", () => {
-    const harness = mount(true);
-    byId("first").focus();
-    act(() => fireTab(harness.trap, true));
-    expect(document.activeElement).toBe(byId("last"));
-    harness.unmount();
-  });
-
-  test("Tab in the middle of the trap does not wrap", () => {
-    const harness = mount(true);
-    harness.setMiddleButton(true);
-    byId("middle").focus();
-    const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true });
-    act(() => harness.trap.dispatchEvent(event));
-    // The hook only intervenes at the boundaries; a mid-trap Tab is left
-    // alone entirely — no preventDefault, no forced focus() call — so focus
-    // stays on `middle` and the event is left to the browser's native order.
-    expect(event.defaultPrevented).toBe(false);
-    expect(document.activeElement).toBe(byId("middle"));
-    harness.unmount();
-  });
-
-  test("recalculates the focusable set when a trailing element shifts the last boundary", () => {
-    const harness = mount(true);
-
-    // Before `trailing` exists, `last` is the boundary: Tab from it wraps.
-    byId("last").focus();
-    act(() => fireTab(harness.trap, false));
-    expect(document.activeElement).toBe(byId("first"));
-
-    // Adding `trailing` while the trap stays active shifts the boundary —
-    // this only passes if the keydown handler recomputes the focusable set
-    // from the live DOM on every keypress instead of reusing a stale list
-    // captured when the trap activated.
-    harness.setTrailingButton(true);
-    byId("last").focus();
-    const midEvent = new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true });
-    act(() => harness.trap.dispatchEvent(midEvent));
-    expect(midEvent.defaultPrevented).toBe(false);
-    expect(document.activeElement).toBe(byId("last"));
-
-    // `trailing` is now the boundary: Tab from it wraps to `first`.
-    byId("trailing").focus();
-    act(() => fireTab(harness.trap, false));
-    expect(document.activeElement).toBe(byId("first"));
-
-    harness.unmount();
-  });
-
-  test("restores focus to the trigger when active turns false", () => {
-    const harness = mount(false);
-    harness.trigger.focus();
-    harness.setActive(true);
-    expect(document.activeElement).toBe(byId("first"));
-
-    harness.setActive(false);
-    expect(document.activeElement).toBe(harness.trigger);
-    harness.unmount();
-  });
-
-  test("restores focus to the trigger on unmount while still active", () => {
-    const harness = mount(false);
-    harness.trigger.focus();
-    harness.setActive(true);
-    expect(document.activeElement).toBe(byId("first"));
-
-    // Only the trap's own React tree unmounts here — the trigger lives
-    // outside it in plain DOM, so it's still attached (and focusable) when
-    // the cleanup effect restores focus to it.
-    harness.unmountTrap();
-    expect(document.activeElement).toBe(harness.trigger);
-    harness.container.remove();
-  });
-
-  test("Tab with no focusable children prevents default instead of throwing", () => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-    let trapElement!: HTMLDivElement;
-    let root!: Root;
-
-    function EmptyHarness() {
-      const trapRef = useFocusTrap<HTMLDivElement>(true);
-      return (
-        <div
-          ref={(node) => {
-            trapRef.current = node;
-            if (node) trapElement = node;
-          }}
-        />
-      );
-    }
-
-    act(() => {
-      root = createRoot(container);
-      root.render(<EmptyHarness />);
-    });
-
-    const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true });
-    act(() => {
-      trapElement.dispatchEvent(event);
-    });
-    expect(event.defaultPrevented).toBe(true);
-
-    act(() => root.unmount());
-    container.remove();
-  });
-});
-
diff --git a/src/hooks/use-focus-trap.ts b/src/hooks/use-focus-trap.ts
deleted file mode 100644
index d9d89042..00000000
--- a/src/hooks/use-focus-trap.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useEffect, useRef, type RefObject } from "react";
-
-const FOCUSABLE_SELECTOR = [
-  "a[href]",
-  "button:not([disabled])",
-  "textarea:not([disabled])",
-  "input:not([disabled])",
-  "select:not([disabled])",
-  "[tabindex]:not([tabindex='-1'])",
-].join(",");
-
-function getFocusable(container: HTMLElement): readonly HTMLElement[] {
-  return Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
-    (element) => element.offsetParent !== null,
-  );
-}
-
-/**
- * Confines Tab/Shift+Tab focus to `containerRef` while `active`, and restores
- * focus to whatever had it beforehand once `active` goes false — the two
- * halves a modal dialog needs and a headless component can't get from CSS
- * alone. Dependency-free by design: the whole trap is a keydown listener and
- * a saved `Element` reference, not a library.
- *
- * On activation, focus moves into the container (its first focusable
- * descendant, or the container itself if none exists) only if focus isn't
- * already inside it — reopening a dock that already contains the active
- * element shouldn't yank focus off whatever the user just clicked.
- */
-export function useFocusTrap<T extends HTMLElement>(active: boolean): RefObject<T | null> {
-  const containerRef = useRef<T>(null);
-  const previouslyFocusedRef = useRef<Element | null>(null);
-
-  useEffect(() => {
-    if (!active) return;
-    const container = containerRef.current;
-    if (!container) return;
-
-    previouslyFocusedRef.current = document.activeElement;
-
-    if (!container.contains(document.activeElement)) {
-      const [first] = getFocusable(container);
-      (first ?? container).focus();
-    }
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== "Tab") return;
-      const focusable = getFocusable(container);
-      if (focusable.length === 0) {
-        event.preventDefault();
-        return;
-      }
-
-      const first = focusable[0];
-      const last = focusable[focusable.length - 1];
-      const current = document.activeElement;
-
-      if (event.shiftKey && current === first) {
-        event.preventDefault();
-        last?.focus();
-      } else if (!event.shiftKey && current === last) {
-        event.preventDefault();
-        first?.focus();
-      }
-    };
-
-    container.addEventListener("keydown", onKeyDown);
-    return () => {
-      container.removeEventListener("keydown", onKeyDown);
-      const restoreTo = previouslyFocusedRef.current;
-      if (restoreTo instanceof HTMLElement) restoreTo.focus();
-    };
-  }, [active]);
-
-  return containerRef;
-}
diff --git a/src/hooks/use-render-rail.test.tsx b/src/hooks/use-render-rail.test.tsx
deleted file mode 100644
index 21ffbb36..00000000
--- a/src/hooks/use-render-rail.test.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { act } from "react";
-import { describe, expect, test } from "bun:test";
-
-import { useRenderRail } from "./use-render-rail.js";
-import type { GenerativeBlock } from "../lib/generative-block.js";
-import { renderHook } from "../test/render-hook.js";
-
-function block(id: string): GenerativeBlock {
-  return { type: "callout", id, title: id, body: id };
-}
-
-describe("useRenderRail", () => {
-  test("shows the latest block when nothing is pinned", () => {
-    const hook = renderHook(() => useRenderRail([block("a"), block("b")]));
-    expect(hook.result.current.activeBlock?.id).toBe("b");
-    expect(hook.result.current.isPinned).toBe(false);
-  });
-
-  test("a pinned block takes precedence over latest", () => {
-    const hook = renderHook(() => useRenderRail([block("a"), block("b")]));
-    act(() => hook.result.current.pin("a"));
-    expect(hook.result.current.activeBlock?.id).toBe("a");
-    expect(hook.result.current.isPinned).toBe(true);
-  });
-
-  test("togglePin unpins when the same id is pinned again", () => {
-    const hook = renderHook(() => useRenderRail([block("a"), block("b")]));
-    act(() => hook.result.current.togglePin("a"));
-    expect(hook.result.current.isPinned).toBe(true);
-    act(() => hook.result.current.togglePin("a"));
-    expect(hook.result.current.isPinned).toBe(false);
-    expect(hook.result.current.activeBlock?.id).toBe("b");
-  });
-
-  test("a new block while pinned does not change the active block, but flips hasNewerBlock", () => {
-    let blocks: readonly GenerativeBlock[] = [block("a"), block("b")];
-    const hook = renderHook(() => useRenderRail(blocks));
-
-    act(() => hook.result.current.pin("a"));
-    expect(hook.result.current.hasNewerBlock).toBe(false);
-
-    blocks = [...blocks, block("c")];
-    hook.rerender();
-
-    expect(hook.result.current.activeBlock?.id).toBe("a");
-    expect(hook.result.current.hasNewerBlock).toBe(true);
-  });
-
-  test("jumpToLatest clears the pin and the newer-block signal", () => {
-    let blocks: readonly GenerativeBlock[] = [block("a"), block("b")];
-    const hook = renderHook(() => useRenderRail(blocks));
-
-    act(() => hook.result.current.pin("a"));
-    blocks = [...blocks, block("c")];
-    hook.rerender();
-    expect(hook.result.current.hasNewerBlock).toBe(true);
-
-    act(() => hook.result.current.jumpToLatest());
-    expect(hook.result.current.isPinned).toBe(false);
-    expect(hook.result.current.hasNewerBlock).toBe(false);
-    expect(hook.result.current.activeBlock?.id).toBe("c");
-  });
-
-  test("a new block while nothing is pinned never raises hasNewerBlock", () => {
-    let blocks: readonly GenerativeBlock[] = [block("a")];
-    const hook = renderHook(() => useRenderRail(blocks));
-
-    blocks = [...blocks, block("b")];
-    hook.rerender();
-
-    expect(hook.result.current.hasNewerBlock).toBe(false);
-    expect(hook.result.current.activeBlock?.id).toBe("b");
-  });
-});
diff --git a/src/hooks/use-render-rail.ts b/src/hooks/use-render-rail.ts
deleted file mode 100644
index 8b7858f3..00000000
--- a/src/hooks/use-render-rail.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-
-import { generativeBlockId, type GenerativeBlock } from "../lib/generative-block.js";
-
-export type UseRenderRailResult = {
-  /** The block mirrored into the rail: the pinned block if one is pinned, otherwise the latest. */
-  readonly activeBlock: GenerativeBlock | null;
-  readonly pinnedId: string | null;
-  readonly isPinned: boolean;
-  /** True once a block newer than the pinned one has arrived — the rail's "newer result" affordance reads this. */
-  readonly hasNewerBlock: boolean;
-  readonly pin: (id: string) => void;
-  readonly unpin: () => void;
-  /** Pins `id` if nothing else is pinned yet, otherwise unpins — the toggle a corner button wants. */
-  readonly togglePin: (id: string) => void;
-  /** Drops the pin so the rail follows latest again — what the "newer result" affordance calls. */
-  readonly jumpToLatest: () => void;
-};
-
-/**
- * "Latest wins unless pinned": the render rail always shows the most recent
- * generative block that appeared in the transcript, except once the reader
- * pins one — then that block stays put no matter what the agent produces
- * next, until they unpin it.
- *
- * `blocks` is the full ordered list from the transcript, newest last, the
- * same shape every generative block already renders inline with. The hook
- * derives the active block from it rather than being handed one directly, so
- * "latest" never drifts out of sync with what is actually on screen.
- *
- * While pinned, a block arriving behind the scenes doesn't yank the reader
- * off what they pinned — instead `hasNewerBlock` flips true so the rail can
- * surface a "newer result" affordance, and `jumpToLatest` is the one gesture
- * that clears it.
- */
-export function useRenderRail(blocks: readonly GenerativeBlock[]): UseRenderRailResult {
-  const [pinnedId, setPinnedId] = useState<string | null>(null);
-  const [hasNewerBlock, setHasNewerBlock] = useState(false);
-
-  const latest = blocks.length > 0 ? blocks[blocks.length - 1] : undefined;
-  const latestId = latest ? generativeBlockId(latest) : null;
-  const pinned = pinnedId === null ? undefined : blocks.find((block) => generativeBlockId(block) === pinnedId);
-
-  const activeBlock = useMemo(() => pinned ?? latest ?? null, [pinned, latest]);
-
-  const seenLatestIdRef = useRef<string | null>(latestId);
-  useEffect(() => {
-    if (latestId === seenLatestIdRef.current) return;
-    seenLatestIdRef.current = latestId;
-    if (pinnedId !== null && pinnedId !== latestId) setHasNewerBlock(true);
-  }, [latestId, pinnedId]);
-
-  const pin = (id: string) => {
-    setPinnedId(id);
-    setHasNewerBlock(false);
-  };
-  const unpin = () => {
-    setPinnedId(null);
-    setHasNewerBlock(false);
-  };
-  const togglePin = (id: string) => {
-    setPinnedId((current) => (current === id ? null : id));
-    setHasNewerBlock(false);
-  };
-  const jumpToLatest = () => {
-    setPinnedId(null);
-    setHasNewerBlock(false);
-  };
-
-  return { activeBlock, pinnedId, isPinned: pinnedId !== null, hasNewerBlock, pin, unpin, togglePin, jumpToLatest };
-}
diff --git a/src/hooks/use-resizable-rail.test.ts b/src/hooks/use-resizable-rail.test.ts
deleted file mode 100644
index 6688ebde..00000000
--- a/src/hooks/use-resizable-rail.test.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { beforeEach, describe, expect, test } from "bun:test";
-import { act, createElement } from "react";
-import { createRoot } from "react-dom/client";
-
-import { useResizableRail, type ResizableRail } from "./use-resizable-rail.js";
-
-const OPTIONS = { storageKey: "test-rail", defaultWidth: 300, minWidth: 200, maxWidth: 500 } as const;
-
-async function mount(options: Parameters<typeof useResizableRail>[0] = OPTIONS) {
-  const container = document.createElement("div");
-  document.body.appendChild(container);
-  const root = createRoot(container);
-  let result: ResizableRail | undefined;
-
-  function Host() {
-    result = useResizableRail(options);
-    return null;
-  }
-
-  act(() => {
-    root.render(createElement(Host));
-  });
-  // The hook's mount effect re-clamps against the container on a microtask
-  // after commit; flush it before reading state.
-  await act(async () => {
-    await new Promise((resolve) => setTimeout(resolve, 0));
-  });
-
-  return {
-    get: () => result as ResizableRail,
-    unmount: () => act(() => root.unmount()),
-  };
-}
-
-describe("useResizableRail", () => {
-  beforeEach(() => {
-    window.localStorage.clear();
-  });
-
-  test("starts at defaultWidth when nothing is stored", async () => {
-    const handle = await mount();
-    expect(handle.get().width).toBe(300);
-    expect(handle.get().dragging).toBe(false);
-    handle.unmount();
-  });
-
-  test("double-click resets to defaultWidth after a drag moved it", async () => {
-    const handle = await mount();
-    act(() => {
-      handle.get().handleProps.onKeyDown({
-        key: "ArrowRight",
-        preventDefault: () => {},
-      } as unknown as Parameters<ResizableRail["handleProps"]["onKeyDown"]>[0]);
-    });
-    expect(handle.get().width).toBe(324);
-    act(() => {
-      handle.get().handleProps.onDoubleClick();
-    });
-    expect(handle.get().width).toBe(300);
-    handle.unmount();
-  });
-
-  test("ArrowLeft/ArrowRight nudge the width by the keyboard step and clamp at the bounds", async () => {
-    const handle = await mount({ ...OPTIONS, defaultWidth: 200 });
-    const fire = (key: string) =>
-      act(() => {
-        handle.get().handleProps.onKeyDown({ key, preventDefault: () => {} } as unknown as Parameters<
-          ResizableRail["handleProps"]["onKeyDown"]
-        >[0]);
-      });
-    fire("ArrowLeft");
-    expect(handle.get().width).toBe(200); // clamped at minWidth
-    fire("ArrowRight");
-    fire("ArrowRight");
-    expect(handle.get().width).toBe(248);
-    handle.unmount();
-  });
-
-  test("persists width to localStorage and a later mount reads it back", async () => {
-    const first = await mount();
-    act(() => {
-      first.get().handleProps.onKeyDown({
-        key: "ArrowRight",
-        preventDefault: () => {},
-      } as unknown as Parameters<ResizableRail["handleProps"]["onKeyDown"]>[0]);
-    });
-    expect(window.localStorage.getItem("test-rail")).toBe("324");
-    first.unmount();
-
-    const second = await mount();
-    expect(second.get().width).toBe(324);
-    second.unmount();
-  });
-
-  test("a window resize re-clamps the current width, not the width at mount", async () => {
-    const handle = await mount();
-    act(() => {
-      handle.get().handleProps.onKeyDown({
-        key: "ArrowRight",
-        preventDefault: () => {},
-      } as unknown as Parameters<ResizableRail["handleProps"]["onKeyDown"]>[0]);
-    });
-    expect(handle.get().width).toBe(324);
-
-    await act(async () => {
-      window.dispatchEvent(new Event("resize"));
-      await new Promise((resolve) => setTimeout(resolve, 0));
-    });
-
-    // Regression: the resize listener used to close over the mount-time
-    // width and revert the rail to defaultWidth on every resize.
-    expect(handle.get().width).toBe(324);
-    handle.unmount();
-  });
-});
diff --git a/src/hooks/use-resizable-rail.ts b/src/hooks/use-resizable-rail.ts
deleted file mode 100644
index 391f1827..00000000
--- a/src/hooks/use-resizable-rail.ts
+++ /dev/null
@@ -1,180 +0,0 @@
-import { useCallback, useEffect, useRef, useState, type KeyboardEvent, type PointerEvent, type RefObject } from "react";
-
-export type UseResizableRailOptions = {
-  /** localStorage key the width persists under. */
-  readonly storageKey: string;
-  /** Width in px when nothing is stored yet, and what double-click resets to. */
-  readonly defaultWidth: number;
-  readonly minWidth: number;
-  /** Static ceiling. The effective max is also clamped against `reserve` below. */
-  readonly maxWidth: number;
-  /**
-   * Px reserved for whatever sits beside the rail, so the dynamic max leaves
-   * that content room rather than letting the rail crowd it out entirely.
-   */
-  readonly reserve?: number;
-  /** Px moved per arrow-key press on the handle. Defaults to 24. */
-  readonly keyboardStep?: number;
-};
-
-export type ResizableRail = {
-  /** Rail width in px, clamped to [minWidth, dynamic max]. */
-  readonly width: number;
-  /** For `aria-valuemin` on the drag handle. */
-  readonly min: number;
-  /** Current upper bound in px, for `aria-valuemax`. */
-  readonly max: number;
-  /** True while a drag is in progress — callers suppress width transitions. */
-  readonly dragging: boolean;
-  /** Attach to the container that spans rail + handle + neighbouring content. */
-  readonly containerRef: RefObject<HTMLDivElement | null>;
-  /** Spread onto the drag handle element. */
-  readonly handleProps: {
-    readonly onPointerDown: (event: PointerEvent) => void;
-    readonly onDoubleClick: () => void;
-    readonly onKeyDown: (event: KeyboardEvent) => void;
-  };
-};
-
-/**
- * Drag-to-resize a rail: pointer drag, double-click to reset to
- * `defaultWidth`, arrow keys to nudge, width persisted to `localStorage`
- * under `storageKey`.
- *
- * The effective max shrinks with the container's own width (via
- * `containerRef`, `maxWidth`, and `reserve`) so a resized rail cannot crowd
- * out everything beside it on a narrow viewport; it re-clamps on mount and on
- * window resize since a persisted width can outlive the viewport it was set
- * on.
- */
-export function useResizableRail({
-  storageKey,
-  defaultWidth,
-  minWidth,
-  maxWidth,
-  reserve = 0,
-  keyboardStep = 24,
-}: UseResizableRailOptions): ResizableRail {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-
-  const clampStatic = useCallback((px: number) => Math.max(minWidth, Math.min(px, maxWidth)), [minWidth, maxWidth]);
-
-  const readStoredWidth = useCallback((): number => {
-    if (typeof window === "undefined") return defaultWidth;
-    try {
-      const stored = window.localStorage.getItem(storageKey);
-      if (stored !== null) {
-        const parsed = Number.parseInt(stored, 10);
-        if (Number.isFinite(parsed)) return clampStatic(parsed);
-      }
-    } catch {
-      // localStorage unavailable — use the default.
-    }
-    return defaultWidth;
-  }, [storageKey, defaultWidth, clampStatic]);
-
-  const [width, setWidth] = useState<number>(readStoredWidth);
-  const [dynamicMaxWidth, setDynamicMaxWidth] = useState<number>(maxWidth);
-  const [dragging, setDragging] = useState(false);
-
-  // Mirrors `width` for handlers registered once (e.g. the resize listener
-  // below) that need the latest value without re-subscribing on every change.
-  const widthRef = useRef(width);
-  useEffect(() => {
-    widthRef.current = width;
-  }, [width]);
-
-  const dynamicMax = useCallback((): number => {
-    const container = containerRef.current;
-    return container ? Math.min(maxWidth, container.clientWidth - reserve) : maxWidth;
-  }, [maxWidth, reserve]);
-
-  const setRail = useCallback(
-    (px: number) => {
-      const max = dynamicMax();
-      const clamped = Math.max(minWidth, Math.min(px, max));
-      setDynamicMaxWidth(max);
-      setWidth(clamped);
-      try {
-        window.localStorage.setItem(storageKey, String(clamped));
-      } catch {
-        // Best-effort persistence.
-      }
-    },
-    [dynamicMax, minWidth, storageKey],
-  );
-
-  // Re-clamp the persisted width against the live container size on mount and
-  // on viewport resize — the stored value may exceed the current dynamic max.
-  useEffect(() => {
-    setRail(readStoredWidth());
-    // Reads widthRef, not the `width` in scope: a resize listener registered
-    // once on mount would otherwise close over that mount-time value and
-    // reset a user-adjusted rail back to it on every subsequent resize.
-    const onResize = () => setRail(widthRef.current);
-    window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
-    // Runs once on mount; a live re-clamp loop on every width change is not
-    // wanted since a drag already clamps as it goes.
-  }, []);
-
-  const draggingRef = useRef(false);
-  // Cached container left edge for the drag's duration — invariant while
-  // dragging, so this avoids a getBoundingClientRect() layout read per move.
-  const dragLeftRef = useRef(0);
-  // The pointerId captured on down; move/up filter to it so a second touch
-  // landing mid-drag (multi-touch) can't hijack the resize.
-  const pointerIdRef = useRef<number | null>(null);
-
-  const onPointerDown = useCallback((event: PointerEvent) => {
-    const container = containerRef.current;
-    if (container !== null) dragLeftRef.current = container.getBoundingClientRect().left;
-    pointerIdRef.current = event.pointerId;
-    event.currentTarget.setPointerCapture(event.pointerId);
-    draggingRef.current = true;
-    setDragging(true);
-  }, []);
-
-  useEffect(() => {
-    function onMove(event: globalThis.PointerEvent) {
-      if (!draggingRef.current || event.pointerId !== pointerIdRef.current) return;
-      setRail(event.clientX - dragLeftRef.current);
-    }
-    function onUp(event: globalThis.PointerEvent) {
-      if (!draggingRef.current || event.pointerId !== pointerIdRef.current) return;
-      draggingRef.current = false;
-      pointerIdRef.current = null;
-      setDragging(false);
-    }
-    window.addEventListener("pointermove", onMove);
-    window.addEventListener("pointerup", onUp);
-    return () => {
-      window.removeEventListener("pointermove", onMove);
-      window.removeEventListener("pointerup", onUp);
-    };
-  }, [setRail]);
-
-  const onDoubleClick = useCallback(() => setRail(defaultWidth), [setRail, defaultWidth]);
-
-  const onKeyDown = useCallback(
-    (event: KeyboardEvent) => {
-      if (event.key === "ArrowLeft") {
-        setRail(width - keyboardStep);
-        event.preventDefault();
-      } else if (event.key === "ArrowRight") {
-        setRail(width + keyboardStep);
-        event.preventDefault();
-      }
-    },
-    [setRail, width, keyboardStep],
-  );
-
-  return {
-    width,
-    min: minWidth,
-    max: dynamicMaxWidth,
-    dragging,
-    containerRef,
-    handleProps: { onPointerDown, onDoubleClick, onKeyDown },
-  };
-}
diff --git a/src/hooks/use-sidebar-panel.ts b/src/hooks/use-sidebar-panel.ts
deleted file mode 100644
index 7947a9d2..00000000
--- a/src/hooks/use-sidebar-panel.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { useCallback, useState } from "react";
-
-export type UseSidebarPanelOptions = {
-  /** The rail's current page id. Drives which page's content the panel shows. */
-  readonly activePageId: string;
-  readonly defaultSelectedId?: string | null;
-  /** Section ids that start collapsed — a "Direct messages" group folded by default. */
-  readonly initiallyCollapsedSectionIds?: readonly string[];
-};
-
-export type UseSidebarPanelResult = {
-  /** The selected row inside the panel — a channel, a thread. Distinct from `activePageId`. */
-  readonly selectedId: string | null;
-  readonly select: (id: string | null) => void;
-  readonly isSectionCollapsed: (sectionId: string) => boolean;
-  readonly toggleSection: (sectionId: string) => void;
-  /** Key the swapped-in content with this. A new key is what replays the swap. */
-  readonly panelKey: string;
-  /** Apply to the element keyed by `panelKey` — see `corbits-panel-swap-in` in theme.css. */
-  readonly panelTransitionClassName: string;
-};
-
-/**
- * The panel's behaviour, with no markup of its own: which row is selected,
- * which sections are folded, and the key + class a consumer needs to replay
- * the page-swap animation.
- *
- * Selection and collapse are plain `useState` here rather than lifted to the
- * host, because they are UI-only state that resets are fine for — nothing
- * downstream persists "channel #general was selected" across a reload. A
- * host that *does* want to persist it swaps this hook for its own without
- * changing any of `ui/sidebar-panel`'s pieces, since they take everything
- * through props.
- *
- * The swap animation is deliberately not driven by a timer or an
- * `useEffect`. Keying the incoming content on `activePageId` and letting
- * React remount it is what plays `corbits-panel-swap-in` — the same "mount
- * plays the keyframe" trick `SidebarItemRow` uses for its rows — so there is
- * no window where the class is applied before the browser has painted the
- * previous frame.
- */
-export function useSidebarPanel({
-  activePageId,
-  defaultSelectedId = null,
-  initiallyCollapsedSectionIds = [],
-}: UseSidebarPanelOptions): UseSidebarPanelResult {
-  const [selectedId, setSelectedId] = useState<string | null>(defaultSelectedId);
-  const [collapsedSectionIds, setCollapsedSectionIds] = useState<ReadonlySet<string>>(
-    () => new Set(initiallyCollapsedSectionIds),
-  );
-
-  const toggleSection = useCallback((sectionId: string) => {
-    setCollapsedSectionIds((current) => {
-      const next = new Set(current);
-      if (next.has(sectionId)) {
-        next.delete(sectionId);
-      } else {
-        next.add(sectionId);
-      }
-      return next;
-    });
-  }, []);
-
-  const isSectionCollapsed = useCallback(
-    (sectionId: string) => collapsedSectionIds.has(sectionId),
-    [collapsedSectionIds],
-  );
-
-  return {
-    selectedId,
-    select: setSelectedId,
-    isSectionCollapsed,
-    toggleSection,
-    panelKey: activePageId,
-    panelTransitionClassName: "animate-[corbits-panel-swap-in_180ms_ease-out]",
-  };
-}
diff --git a/src/hooks/use-view-mode.test.ts b/src/hooks/use-view-mode.test.ts
deleted file mode 100644
index 81a1dff2..00000000
--- a/src/hooks/use-view-mode.test.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { beforeEach, describe, expect, test } from "bun:test";
-import { act, createElement } from "react";
-import { createRoot } from "react-dom/client";
-
-import { useViewMode } from "./use-view-mode.js";
-import type { ViewMode } from "../ui/view-toggle.js";
-
-function mount(storageKey: string, defaultMode?: ViewMode) {
-  const container = document.createElement("div");
-  document.body.appendChild(container);
-  const root = createRoot(container);
-  let result: { mode: ViewMode; setMode: (mode: ViewMode) => void } | undefined;
-
-  function Host() {
-    result = useViewMode(storageKey, defaultMode);
-    return null;
-  }
-
-  act(() => {
-    root.render(createElement(Host));
-  });
-
-  return {
-    get: () => result as { mode: ViewMode; setMode: (mode: ViewMode) => void },
-    rerender: () => {
-      act(() => {
-        root.render(createElement(Host));
-      });
-    },
-    unmount: () => act(() => root.unmount()),
-  };
-}
-
-describe("useViewMode", () => {
-  beforeEach(() => {
-    window.localStorage.clear();
-  });
-
-  test("defaults to grid when nothing is stored", () => {
-    const handle = mount("test-view-mode-a");
-    expect(handle.get().mode).toBe("grid");
-    handle.unmount();
-  });
-
-  test("honors an explicit default", () => {
-    const handle = mount("test-view-mode-b", "rows");
-    expect(handle.get().mode).toBe("rows");
-    handle.unmount();
-  });
-
-  test("setMode updates state and persists to localStorage", () => {
-    const handle = mount("test-view-mode-c");
-    act(() => {
-      handle.get().setMode("rows");
-    });
-    expect(handle.get().mode).toBe("rows");
-    expect(window.localStorage.getItem("test-view-mode-c")).toBe("rows");
-    handle.unmount();
-  });
-
-  test("a later mount reads the persisted mode back", () => {
-    const first = mount("test-view-mode-d");
-    act(() => {
-      first.get().setMode("rows");
-    });
-    first.unmount();
-
-    const second = mount("test-view-mode-d");
-    expect(second.get().mode).toBe("rows");
-    second.unmount();
-  });
-
-  test("distinct storage keys keep independent preferences", () => {
-    const a = mount("test-view-mode-e");
-    const b = mount("test-view-mode-f");
-    act(() => {
-      a.get().setMode("rows");
-    });
-    expect(a.get().mode).toBe("rows");
-    expect(b.get().mode).toBe("grid");
-    a.unmount();
-    b.unmount();
-  });
-});
diff --git a/src/hooks/use-view-mode.ts b/src/hooks/use-view-mode.ts
deleted file mode 100644
index 92dfe03c..00000000
--- a/src/hooks/use-view-mode.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useCallback, useState } from "react";
-
-import type { ViewMode } from "../ui/view-toggle.js";
-
-function readStoredMode(storageKey: string, fallback: ViewMode): ViewMode {
-  if (typeof window === "undefined") return fallback;
-  try {
-    const raw = window.localStorage.getItem(storageKey);
-    return raw === "grid" || raw === "rows" ? raw : fallback;
-  } catch {
-    return fallback;
-  }
-}
-
-function writeStoredMode(storageKey: string, mode: ViewMode): void {
-  if (typeof window === "undefined") return;
-  try {
-    window.localStorage.setItem(storageKey, mode);
-  } catch {
-    // Quota / private mode — the choice still applies for this session.
-  }
-}
-
-export type UseViewModeResult = {
-  readonly mode: ViewMode;
-  readonly setMode: (mode: ViewMode) => void;
-};
-
-/**
- * A page's Grid/Rows preference (see `ViewToggle`), persisted to
- * `localStorage` under a caller-supplied key so distinct pages can each keep
- * their own choice.
- *
- * Storage-backed rather than lifted to the host on purpose: this is the same
- * kind of "outlives the session" UI preference `ThemeProvider` owns, and a
- * host that wants server-persisted view modes swaps this hook for its own
- * without touching `ViewToggle`, which takes `mode` through props either way.
- */
-export function useViewMode(storageKey: string, defaultMode: ViewMode = "grid"): UseViewModeResult {
-  const [mode, setModeState] = useState<ViewMode>(() => readStoredMode(storageKey, defaultMode));
-
-  const setMode = useCallback(
-    (next: ViewMode) => {
-      setModeState(next);
-      writeStoredMode(storageKey, next);
-    },
-    [storageKey],
-  );
-
-  return { mode, setMode };
-}
diff --git a/src/index.ts b/src/index.ts
index e1a934d0..2d6a55d8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -7,45 +7,25 @@
 // on purpose and must be imported by their subpath. The barrel is a single
 // module: anything it re-exports is loaded by any root import, so one such
 // re-export would make the optional peer mandatory for everyone.
-//   @corbits/react-ui/lib/tanstack-data-port
 
-export * from "./blocks/access-notice/access-notice.js";
-export * from "./blocks/canvas-host/canvas-host.js";
-export * from "./blocks/canvas-host/canvas-host-chrome.js";
 export * from "./blocks/login/auth-layout.js";
 export * from "./blocks/login/login-form.js";
-export * from "./hooks/use-anchored-scroll.js";
-export * from "./hooks/use-chat-dock.js";
-export * from "./hooks/use-collection-state.js";
 export * from "./hooks/use-command-palette-navigation.js";
 export * from "./hooks/use-controllable-state.js";
 export * from "./hooks/use-delayed-autofocus.js";
 export * from "./hooks/use-dismissable-popover.js";
-export * from "./hooks/use-flip-transition.js";
-export * from "./hooks/use-focus-trap.js";
 export * from "./hooks/use-list-selection.js";
 export * from "./hooks/use-prefers-reduced-motion.js";
-export * from "./hooks/use-render-rail.js";
-export * from "./hooks/use-resizable-rail.js";
 export * from "./hooks/use-scroll-current-into-view.js";
-export * from "./hooks/use-sidebar-panel.js";
-export * from "./hooks/use-view-mode.js";
-export * from "./lib/activity.js";
 export * from "./lib/artifact.js";
-export * from "./lib/canvas-host-state.js";
 export * from "./lib/chart-palette.js";
 export * from "./lib/chat-message.js";
 export * from "./lib/chat-parts.js";
-export * from "./lib/command-registry.js";
 export * from "./lib/csv.js";
-export * from "./lib/data-port.js";
-export * from "./lib/generative-block.js";
 export * from "./lib/metrics.js";
 export * from "./lib/now-item.js";
 export * from "./lib/relative-time.js";
-export * from "./lib/schedule.js";
 export * from "./lib/theme.js";
-export * from "./lib/time-range.js";
 export * from "./lib/url.js";
 export * from "./lib/utils.js";
 export * from "./lib/workflow-display-flow.js";
@@ -54,15 +34,10 @@ export * from "./lib/workflow-run.js";
 export * from "./lib/workflow-run-error.js";
 export * from "./lib/workflow-run-progress.js";
 export * from "./ui/activity-block.js";
-export * from "./ui/activity-timeline.js";
-export * from "./ui/actor-summary.js";
-export * from "./ui/add-artifact-dialog.js";
 export * from "./ui/agent-turn.js";
 export * from "./ui/animated-number.js";
 export * from "./ui/approval-card.js";
 export * from "./ui/artifact-body.js";
-export * from "./ui/artifact-detail.js";
-export * from "./ui/artifact-gallery.js";
 export * from "./ui/artifact-notice.js";
 export * from "./ui/avatar.js";
 export * from "./ui/badge.js";
@@ -72,135 +47,77 @@ export * from "./ui/boot-screen.js";
 export * from "./ui/bulk-action-bar.js";
 export * from "./ui/button.js";
 export * from "./ui/card.js";
-export * from "./ui/catalog-glyph.js";
 export * from "./ui/category-bars.js";
 export * from "./ui/chart-frame.js";
 export * from "./ui/chat-composer.js";
-export * from "./ui/chat-dock.js";
 export * from "./ui/chat-dock-timing.js";
 export * from "./ui/chat-input.js";
 export * from "./ui/chat-panel.js";
 export * from "./ui/chat-thread.js";
 export * from "./ui/checkbox.js";
 export * from "./ui/command-palette.js";
-export * from "./ui/command-queue.js";
 export * from "./ui/compare-body.js";
 export * from "./ui/confirm-button.js";
-export * from "./ui/context-strip.js";
 export * from "./ui/corbits-mark.js";
-export * from "./ui/count-table.js";
 export * from "./ui/csv-table.js";
-export * from "./ui/dashboard.js";
-export * from "./ui/dashboard-section.js";
-export * from "./ui/data-table.js";
-export * from "./ui/delta-badge.js";
-export * from "./ui/dial.js";
 export * from "./ui/dialog.js";
-export * from "./ui/dither-background.js";
 export * from "./ui/dither-canvas.js";
 export * from "./ui/embed-body.js";
 export * from "./ui/empty-state.js";
-export * from "./ui/failed-run-notice.js";
 export * from "./ui/file-input.js";
 export * from "./ui/filter-bar.js";
 export * from "./ui/filter-chip.js";
 export * from "./ui/gate-block.js";
-export * from "./ui/generative-block-view.js";
-export * from "./ui/heatmap.js";
 export * from "./ui/horizontal-stepper.js";
 export * from "./ui/input.js";
 export * from "./ui/inspector-shell.js";
 export * from "./ui/intake-form.js";
 export * from "./ui/kind-card-grid.js";
-export * from "./ui/kind-picker.js";
 export * from "./ui/library-page-header.js";
-export * from "./ui/library-search-input.js";
 export * from "./ui/list-detail.js";
 export * from "./ui/live-run-banner.js";
-export * from "./ui/live-run-header.js";
-export * from "./ui/live-run-inspector.js";
 export * from "./ui/live-status-line.js";
-export * from "./ui/mail-detail.js";
-export * from "./ui/managed-list.js";
 export * from "./ui/menu.js";
 export * from "./ui/message-bubble.js";
-export * from "./ui/message-list.js";
-export * from "./ui/moment-walker.js";
 export * from "./ui/notifications-bell.js";
 export * from "./ui/now-cards.js";
-export * from "./ui/onboarding-tour.js";
 export * from "./ui/page-panel.js";
 export * from "./ui/page-shell.js";
-export * from "./ui/pagination.js";
 export * from "./ui/parts-renderer.js";
 export * from "./ui/profile-card.js";
 export * from "./ui/progress-checklist.js";
 export * from "./ui/provider-mark.js";
-export * from "./ui/pulsing-ring.js";
 export * from "./ui/quick-reply-chips.js";
 export * from "./ui/quote-card.js";
-export * from "./ui/radio-group.js";
-export * from "./ui/read-block.js";
-export * from "./ui/reconnecting-overlay.js";
-export * from "./ui/recurrence-input.js";
-export * from "./ui/render-rail.js";
 export * from "./ui/research-body.js";
 export * from "./ui/rich-empty-state.js";
 export * from "./ui/run-now-button.js";
-export * from "./ui/run-once-flow.js";
-export * from "./ui/schedule-flow.js";
-export * from "./ui/schedule-form-layout.js";
-export * from "./ui/schedule-header.js";
-export * from "./ui/schedule-inspector.js";
-export * from "./ui/schedule-list.js";
 export * from "./ui/section.js";
-export * from "./ui/section-nav.js";
 export * from "./ui/select.js";
 export * from "./ui/selection-checkbox.js";
 export * from "./ui/settings-panel.js";
 export * from "./ui/sidebar.js";
 export * from "./ui/sidebar-item-row.js";
 export * from "./ui/sidebar-panel.js";
-export * from "./ui/sidebar-rail.js";
-export * from "./ui/sidebar-section.js";
 export * from "./ui/skeleton.js";
 export * from "./ui/sortable-table.js";
 export * from "./ui/sparkline.js";
 export * from "./ui/stat-grid.js";
-export * from "./ui/stat-tile.js";
 export * from "./ui/status-dot.js";
-export * from "./ui/step-graph.js";
-export * from "./ui/step-graph-node.js";
 export * from "./ui/step-list.js";
-export * from "./ui/step-primitives.js";
-export * from "./ui/step-sidebar.js";
-export * from "./ui/subagent-dock.js";
 export * from "./ui/switch.js";
 export * from "./ui/table.js";
 export * from "./ui/tabs.js";
-export * from "./ui/tenant-selector.js";
 export * from "./ui/textarea.js";
 export * from "./ui/theme-provider.js";
 export * from "./ui/theme-toggle.js";
-export * from "./ui/thread-list.js";
-export * from "./ui/thread-switcher.js";
-export * from "./ui/time-range-control.js";
 export * from "./ui/time-series-chart.js";
 export * from "./ui/toast.js";
-export * from "./ui/toggle-list.js";
 export * from "./ui/token-mosaic.js";
 export * from "./ui/tool-block.js";
 export * from "./ui/tool-narrative.js";
 export * from "./ui/tooltip.js";
 export * from "./ui/top-bar.js";
 export * from "./ui/trace-waterfall.js";
-export * from "./ui/triage-pane.js";
 export * from "./ui/typing-indicator.js";
 export * from "./ui/view-toggle.js";
-export * from "./ui/whats-new.js";
-export * from "./ui/workflow-catalog.js";
-export * from "./ui/workflow-dock.js";
-export * from "./ui/workflow-registry-list.js";
-export * from "./ui/workflow-registry-row.js";
-export * from "./ui/workflow-registry-section.js";
-export * from "./ui/workflow-status-badge.js";
diff --git a/src/lib/activity.ts b/src/lib/activity.ts
deleted file mode 100644
index 07e6eb4b..00000000
--- a/src/lib/activity.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * One thing that happened, at a time.
- *
- * The vocabulary of `kind` belongs to whatever produced the entry — this is a
- * viewer, and a closed union here would fork on the first event type a producer
- * adds. `summary` is the sentence a reader actually reads; producing it is the
- * producer's job, because only it knows what "ran" means for its own events.
- */
-export type ActivityEntry = {
-  readonly id: string;
-  /** ISO 8601. Sorting and grouping both depend on it parsing. */
-  readonly timestamp: string;
-  readonly kind: string;
-  /** One line, already written. Absent when the producer recorded no detail. */
-  readonly summary?: string;
-  readonly actorName?: string;
-  /** Colours the badge. Omit for the ordinary case — most events are ordinary. */
-  readonly tone?: "neutral" | "positive" | "warning" | "critical";
-};
-
-export type ActivityDay = {
-  /** `YYYY-MM-DD` in the viewer's timezone — the grouping key. */
-  readonly key: string;
-  /** "Fri, 24 Jul 2026", localised. */
-  readonly label: string;
-  readonly entries: readonly ActivityEntry[];
-};
-
-/** Local `YYYY-MM-DD`. Deliberately not UTC — a feed's "today" is the reader's. */
-function dayKey(date: Date): string {
-  return [
-    date.getFullYear(),
-    String(date.getMonth() + 1).padStart(2, "0"),
-    String(date.getDate()).padStart(2, "0"),
-  ].join("-");
-}
-
-/**
- * Groups a time-ordered list into runs of the same day.
- *
- * A single forward pass that starts a new group whenever the key changes,
- * rather than bucketing into a map and sorting the buckets. That preserves
- * whatever order the source sent — which is the source's decision, and usually
- * newest-first — instead of silently re-sorting it. Entries whose timestamp
- * does not parse are dropped rather than grouped under "Invalid Date": a feed
- * that shows a real event under a nonsense heading is worse than one that shows
- * one fewer event.
- */
-export function groupByDay(entries: readonly ActivityEntry[]): readonly ActivityDay[] {
-  const days: ActivityDay[] = [];
-
-  for (const entry of entries) {
-    const date = new Date(entry.timestamp);
-    if (Number.isNaN(date.getTime())) continue;
-
-    const key = dayKey(date);
-    const last = days[days.length - 1];
-    if (last !== undefined && last.key === key) {
-      (last.entries as ActivityEntry[]).push(entry);
-      continue;
-    }
-    days.push({
-      key,
-      label: date.toLocaleDateString(undefined, {
-        weekday: "short",
-        month: "short",
-        day: "numeric",
-        year: "numeric",
-      }),
-      entries: [entry],
-    });
-  }
-
-  return days;
-}
diff --git a/src/lib/canvas-host-state.ts b/src/lib/canvas-host-state.ts
deleted file mode 100644
index 5dda81c5..00000000
--- a/src/lib/canvas-host-state.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * The canvas side's content/focus contract, generic over one content type —
- * this package renders whatever a consumer hands it through
- * `CanvasHostContent`, it never knows what a "profile card" or "artifact"
- * is. A host with more than one content family (say, profiles and
- * documents) picks its own discriminant and puts it in `kind`; from here
- * it's all one shape.
- *
- * These are pure transition functions, not a hook: `CanvasHost` itself
- * (`blocks/canvas-host/canvas-host.tsx`) owns no state of its own — it is
- * `content`/`focus` in as props, `onFocusChange`/`onClose` out as
- * callbacks. A host wires these transitions into whatever state container
- * it already uses (`useState`, a reducer, a store) rather than this package
- * prescribing one.
- */
-export type CanvasHostContent<TData = unknown> = {
-  readonly kind: string;
-  readonly title: string;
-  readonly data: TData;
-};
-
-export type CanvasHostState<TData = unknown> = {
-  readonly content: CanvasHostContent<TData> | null;
-  readonly focus: boolean;
-};
-
-export function initialCanvasHostState<TData = unknown>(): CanvasHostState<TData> {
-  return { content: null, focus: false };
-}
-
-/**
- * Open (or replace) the canvas's content. Focus is left exactly as it was —
- * swapping to a second piece of content while already focused stays
- * focused, since the reader was already reading the canvas full-width.
- */
-export function openCanvasContent<TData>(
-  state: CanvasHostState<TData>,
-  content: CanvasHostContent<TData>,
-): CanvasHostState<TData> {
-  return { ...state, content };
-}
-
-/** Close the canvas outright: content and focus both clear, since there is nothing left to focus on. */
-export function closeCanvas<TData>(state: CanvasHostState<TData>): CanvasHostState<TData> {
-  return { ...state, content: null, focus: false };
-}
-
-export function focusCanvas<TData>(state: CanvasHostState<TData>): CanvasHostState<TData> {
-  return { ...state, focus: true };
-}
-
-/** Exit focus without closing the canvas — it settles back to the even split. */
-export function unfocusCanvas<TData>(state: CanvasHostState<TData>): CanvasHostState<TData> {
-  return { ...state, focus: false };
-}
-
-/** Toggles between the even split and canvas-dominant focus. A no-op with nothing open — there is no content to read full-screen. */
-export function toggleCanvasFocus<TData>(state: CanvasHostState<TData>): CanvasHostState<TData> {
-  if (state.content === null) return state;
-  return state.focus ? unfocusCanvas(state) : focusCanvas(state);
-}
diff --git a/src/lib/chart-geometry.ts b/src/lib/chart-geometry.ts
index 7028befc..63af6a96 100644
--- a/src/lib/chart-geometry.ts
+++ b/src/lib/chart-geometry.ts
@@ -97,43 +97,3 @@ export function formatCompact(value: number): string {
   return value.toLocaleString();
 }
 
-/**
- * The step-graph's node layout runs along one axis at a time — a compact
- * preview reads left to right, an expanded trace pane reads top to bottom —
- * so the same edge-drawing and default-ordering helpers serve both instead of
- * a bespoke path builder per orientation.
- */
-export type StepGraphLayoutAxis = "horizontal" | "vertical";
-
-export type StepGraphEdgeEndpoint = { readonly from: string; readonly to: string };
-
-/** Every step connects to the next, in array order — the default edge set
- * when a caller has no real DAG dependency data to draw. */
-export function sequentialStepEdges(stepIds: readonly string[]): readonly StepGraphEdgeEndpoint[] {
-  const edges: StepGraphEdgeEndpoint[] = [];
-  for (let i = 0; i < stepIds.length - 1; i++) {
-    const from = stepIds[i];
-    const to = stepIds[i + 1];
-    if (from !== undefined && to !== undefined) edges.push({ from, to });
-  }
-  return edges;
-}
-
-/**
- * An SVG path for one node-to-node connector, straight and inset from both
- * node centers by `inset` so the line meets each node's edge rather than
- * running through its label. Returns `""` for a degenerate (near-zero-length)
- * connector — an arrowhead with nothing to point along would be a rendering
- * artifact, not information.
- */
-export function buildStepGraphEdgePath(from: Point, to: Point, inset: number): string {
-  const dx = to.x - from.x;
-  const dy = to.y - from.y;
-  const length = Math.hypot(dx, dy);
-  if (length <= inset * 2) return "";
-  const ux = dx / length;
-  const uy = dy / length;
-  const start = { x: from.x + ux * inset, y: from.y + uy * inset };
-  const end = { x: to.x - ux * inset, y: to.y - uy * inset };
-  return linePath([start, end]);
-}
diff --git a/src/lib/command-registry.tsx b/src/lib/command-registry.tsx
deleted file mode 100644
index 508c9cff..00000000
--- a/src/lib/command-registry.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
-import type { ReactNode } from "react";
-
-/** One thing the user can do. */
-export type CommandAction = {
-  readonly id: string;
-  readonly label: string;
-  /** Section heading. Actions with no group render before any grouped ones. */
-  readonly group?: string;
-  /** Extra words that should find this action — synonyms, the old name for it. */
-  readonly keywords?: readonly string[];
-  readonly icon?: ReactNode;
-  /** Displayed hint like "⌘K". Purely a label; this file binds nothing. */
-  readonly shortcut?: string;
-  readonly run: () => void;
-};
-
-/**
- * Lets a page contribute commands to the palette without the palette importing
- * the page.
- *
- * This exists for one reason: the palette is mounted once at the app root, and
- * the actions worth offering depend on where the user is. Without a registry
- * the root has to import every page's actions, which inverts the dependency and
- * makes the root the thing that changes whenever any page does.
- *
- * It is a `useState` array behind a context — not a plugin system. There are no
- * lifecycle hooks, no priorities, no middleware. A component contributes a list
- * while it is mounted and the list goes away when it unmounts, which is the
- * only rule.
- */
-
-type CommandRegistryValue = {
-  readonly actions: readonly CommandAction[];
-  readonly setScope: (scope: string, actions: readonly CommandAction[]) => void;
-  readonly clearScope: (scope: string) => void;
-};
-
-const CommandRegistryContext = createContext<CommandRegistryValue | null>(null);
-
-export function CommandRegistryProvider({
-  /** Always-available commands. Contributions are appended after these. */
-  base = [],
-  children,
-}: {
-  base?: readonly CommandAction[];
-  children: ReactNode;
-}) {
-  const [scopes, setScopes] = useState<readonly { scope: string; actions: readonly CommandAction[] }[]>([]);
-
-  const value = useMemo<CommandRegistryValue>(
-    () => ({
-      // Insertion-ordered: base first, then contributions in mount order, so
-      // the palette's top rows do not shuffle as pages come and go.
-      actions: [...base, ...scopes.flatMap((entry) => entry.actions)],
-      setScope: (scope, actions) =>
-        setScopes((current) => [...current.filter((entry) => entry.scope !== scope), { scope, actions }]),
-      clearScope: (scope) => setScopes((current) => current.filter((entry) => entry.scope !== scope)),
-    }),
-    [base, scopes],
-  );
-
-  return <CommandRegistryContext.Provider value={value}>{children}</CommandRegistryContext.Provider>;
-}
-
-/** Every registered command. The palette reads this. */
-export function useCommands(): readonly CommandAction[] {
-  const context = useContext(CommandRegistryContext);
-  if (context === null) {
-    throw new Error("No command registry in scope — wrap the tree in <CommandRegistryProvider>.");
-  }
-  return context.actions;
-}
-
-/**
- * Contribute commands for as long as this component is mounted.
- *
- * `scope` is a stable string naming the contributor ("inbox", "run:42"). It is
- * the identity the registry replaces on update and removes on unmount — without
- * it, a re-render would append a second copy of the same commands.
- *
- * Memoise `actions`, or pass a module-level constant. An array literal built in
- * the render body is a new value every render and will re-register in a loop.
- */
-export function useRegisterCommands(scope: string, actions: readonly CommandAction[]): void {
-  const context = useContext(CommandRegistryContext);
-  if (context === null) {
-    throw new Error("No command registry in scope — wrap the tree in <CommandRegistryProvider>.");
-  }
-  const { setScope, clearScope } = context;
-
-  useEffect(() => {
-    setScope(scope, actions);
-    return () => clearScope(scope);
-  }, [scope, actions, setScope, clearScope]);
-}
diff --git a/src/lib/data-port.ts b/src/lib/data-port.ts
deleted file mode 100644
index ac60300f..00000000
--- a/src/lib/data-port.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-
-import { createContext, useContext } from "react";
-
-/**
- * A data port is the seam between a corbits-ui component and whatever fetches
- * its data. Components declare *what* they need (a stable key plus a fetch
- * thunk) and never learn how it is cached, deduped or revalidated.
- *
- * It is a plain record of functions produced by a factory
- * (`createTanstackDataPort()`), not a class hierarchy — so a host can swap in
- * SWR, Relay, a websocket cache or a fixture port with no inheritance and no
- * changes to the components.
- *
- * Collections only. Single-record reads and mutations are deliberately absent:
- * nothing in the registry has a caller for them yet, and guessing at a mutation
- * shape now would bake in the wrong one. Add `useRecord` / `useMutation` to
- * `DataPort` when the first real consumer lands.
- */
-
-export type CollectionFetchArgs = {
-  readonly signal: AbortSignal;
-  /** `0` for the first page; thereafter the previous page's `nextOffset`. */
-  readonly offset: number;
-  /** Rows the caller wants. `undefined` means "the source decides". */
-  readonly pageSize: number | undefined;
-};
-
-export type CollectionPage<T> = {
-  readonly items: readonly T[];
-  /** Offset to fetch next, or `null` when the collection is exhausted. */
-  readonly nextOffset: number | null;
-};
-
-export type CollectionRequest<T> = {
-  /** Stable cache identity, e.g. `["mail", mailboxId]`. */
-  readonly key: readonly unknown[];
-  readonly fetch: (args: CollectionFetchArgs) => Promise<CollectionPage<T>>;
-  /** Skip fetching until prerequisites resolve. Defaults to true. */
-  readonly enabled?: boolean;
-  /** Rows per page. Omit for sources that return everything in one page. */
-  readonly pageSize?: number;
-};
-
-export type CollectionResult<T> = {
-  /** Every page fetched so far, flattened. */
-  readonly items: readonly T[];
-  /** First load — there is nothing to show yet. */
-  readonly isLoading: boolean;
-  /** Any request in flight, including a background refetch over cached data. */
-  readonly isFetching: boolean;
-  readonly error: Error | null;
-  readonly refetch: () => void;
-  readonly hasNextPage: boolean;
-  readonly fetchNextPage: () => void;
-};
-
-export type DataPort = {
-  readonly useCollection: <T>(request: CollectionRequest<T>) => CollectionResult<T>;
-};
-
-const DataPortContext = createContext<DataPort | null>(null);
-
-export const DataPortProvider = DataPortContext.Provider;
-
-export function useDataPort(): DataPort {
-  const port = useContext(DataPortContext);
-  if (port === null) {
-    throw new Error("No DataPort in scope — wrap the tree in <DataPortProvider value={createTanstackDataPort()}>.");
-  }
-  return port;
-}
diff --git a/src/lib/generative-block.ts b/src/lib/generative-block.ts
deleted file mode 100644
index c0f13931..00000000
--- a/src/lib/generative-block.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * The generative-UI payload an agent turn can carry alongside its prose.
- *
- * A discriminated union rather than one shape with optional fields — each
- * variant composes a *different* existing primitive (`StatGrid`, the `Table`
- * family, `Sparkline`, `Badge`), and a union makes that pairing exhaustive and
- * checkable instead of a runtime guess over which optional fields are set.
- *
- * Every variant carries an `id`: the render rail tracks "the latest block"
- * and "the pinned block" by identity, and a block with no stable id cannot be
- * told apart from the next one the agent produces.
- */
-
-export type KpiItem = {
-  readonly label: string;
-  readonly value: string;
-  readonly sub?: string;
-  /** Rendered as a `DeltaBadge`-style string, e.g. "+12%". Plain text — the block owns no arithmetic. */
-  readonly delta?: string;
-  readonly danger?: boolean;
-};
-
-export type KpisBlock = {
-  readonly type: "kpis";
-  readonly id: string;
-  readonly title?: string;
-  readonly items: readonly KpiItem[];
-};
-
-export type TableBlock = {
-  readonly type: "table";
-  readonly id: string;
-  readonly title?: string;
-  readonly caption: string;
-  readonly columns: readonly string[];
-  readonly rows: readonly (readonly string[])[];
-};
-
-export type SparkBlock = {
-  readonly type: "spark";
-  readonly id: string;
-  readonly title?: string;
-  readonly label: string;
-  readonly values: readonly number[];
-};
-
-export type CalloutTone = "neutral" | "accent" | "info" | "success" | "danger";
-
-export type CalloutBlock = {
-  readonly type: "callout";
-  readonly id: string;
-  readonly title: string;
-  readonly body?: string;
-  readonly tone?: CalloutTone;
-};
-
-export type MarkdownBlock = {
-  readonly type: "markdown";
-  readonly id: string;
-  readonly title?: string;
-  /** Plain text, paragraph-split on blank lines. No markdown parser ships here — see `RenderRail`. */
-  readonly text: string;
-};
-
-export type GenerativeBlock = KpisBlock | TableBlock | SparkBlock | CalloutBlock | MarkdownBlock;
-
-/** The id every variant carries, read without a switch. */
-export function generativeBlockId(block: GenerativeBlock): string {
-  return block.id;
-}
diff --git a/src/lib/schedule.ts b/src/lib/schedule.ts
deleted file mode 100644
index baabbea0..00000000
--- a/src/lib/schedule.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * When something repeats.
- *
- * An interval plus an optional time of day — not a cron string. Cron cannot be
- * read back to a user without a parser, cannot be edited with two controls, and
- * its five fields can express schedules no UI here would ever offer. A host that
- * genuinely needs cron can translate at its own edge; everything the scheduling
- * UI can express is representable here, which is the honest boundary.
- */
-
-export type RecurrenceUnit = "hour" | "day" | "week" | "month";
-
-export type Recurrence = {
-  /** How many units between runs. `1` with unit `day` is daily. */
-  readonly every: number;
-  readonly unit: RecurrenceUnit;
-  /** Local time of day, "HH:MM". Meaningless for `hour` and ignored there. */
-  readonly at?: string;
-  /** 0 = Sunday. `week` only. */
-  readonly weekday?: number;
-};
-
-export type Schedule = {
-  readonly id: string;
-  readonly name: string;
-  /** Paused schedules keep their config and stop running. */
-  readonly enabled: boolean;
-  readonly recurrence: Recurrence;
-  /** ISO timestamps. `nextRunAt` is null while paused. */
-  readonly nextRunAt: string | null;
-  readonly lastRunAt?: string | null;
-};
-
-export const RECURRENCE_UNITS: readonly RecurrenceUnit[] = ["hour", "day", "week", "month"];
-
-const WEEKDAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-
-/**
- * A recurrence in words: "Every 2 days at 09:00", "Weekly on Monday at 07:30".
- *
- * The single source of the human phrasing, used by both the editor's live
- * preview and the list rows — so what you agreed to when saving is worded
- * exactly the way it is shown to you afterwards.
- */
-export function describeRecurrence(recurrence: Recurrence): string {
-  const { every, unit, at, weekday } = recurrence;
-  const plural = every === 1 ? unit : `${unit}s`;
-
-  if (unit === "hour") {
-    return every === 1 ? "Every hour" : `Every ${every} hours`;
-  }
-
-  const time = at === undefined || at === "" ? "" : ` at ${at}`;
-
-  if (unit === "week") {
-    const day = weekday === undefined ? "" : ` on ${WEEKDAYS[weekday] ?? ""}`;
-    return every === 1 ? `Weekly${day}${time}` : `Every ${every} weeks${day}${time}`;
-  }
-
-  if (every === 1) {
-    return `${unit === "day" ? "Daily" : "Monthly"}${time}`;
-  }
-  return `Every ${every} ${plural}${time}`;
-}
diff --git a/src/lib/step-graph-layout.ts b/src/lib/step-graph-layout.ts
deleted file mode 100644
index 3f5ec282..00000000
--- a/src/lib/step-graph-layout.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { Point, StepGraphLayoutAxis } from "./chart-geometry.js";
-
-/**
- * The step graph's layout arithmetic, separated from its rendering the same
- * way `chart-geometry.ts` is separated from the charts: plain functions over
- * plain numbers, checkable in isolation. Internal — none of these names
- * appear in a public prop type.
- */
-
-export type StepGraphDensitySpec = {
-  readonly nodeWidth: number;
-  readonly nodeHeight: number;
-  readonly gap: number;
-  readonly nodeInset: number;
-  readonly crossCenter: number;
-  readonly padding: number;
-  readonly axis: StepGraphLayoutAxis;
-};
-
-export const STEP_GRAPH_DENSITY: Record<"compact" | "expanded", StepGraphDensitySpec> = {
-  compact: { nodeWidth: 172, nodeHeight: 48, gap: 20, nodeInset: 14, crossCenter: 18, padding: 4, axis: "horizontal" },
-  expanded: { nodeWidth: 240, nodeHeight: 56, gap: 28, nodeInset: 18, crossCenter: 120, padding: 8, axis: "vertical" },
-};
-
-export function stepGraphSpan(count: number, spec: StepGraphDensitySpec): number {
-  if (count <= 0) return 0;
-  const size = spec.axis === "horizontal" ? spec.nodeWidth : spec.nodeHeight;
-  return spec.padding * 2 + count * size + Math.max(0, count - 1) * spec.gap;
-}
-
-export function stepGraphNodeOffset(index: number, spec: StepGraphDensitySpec): { readonly left: number; readonly top: number } {
-  if (spec.axis === "horizontal") {
-    return { left: spec.padding + index * (spec.nodeWidth + spec.gap), top: spec.crossCenter + 10 };
-  }
-  return { left: spec.padding, top: spec.padding + index * (spec.nodeHeight + spec.gap) };
-}
-
-export type StepGraphLayout = {
-  readonly centers: readonly Point[];
-  readonly width: number;
-  readonly height: number;
-};
-
-/** The full frame: node centers for edge drawing plus the canvas extent. */
-export function computeStepGraphLayout(count: number, spec: StepGraphDensitySpec): StepGraphLayout {
-  const span = stepGraphSpan(count, spec);
-  const centers = Array.from({ length: count }, (_, index) => {
-    const { left, top } = stepGraphNodeOffset(index, spec);
-    return spec.axis === "horizontal"
-      ? { x: left + spec.nodeWidth / 2, y: top + 14 }
-      : { x: left + spec.nodeWidth / 2, y: top + spec.nodeHeight / 2 };
-  });
-  const width = spec.axis === "horizontal" ? span : spec.nodeWidth + spec.padding * 2;
-  const height = spec.axis === "horizontal" ? spec.nodeHeight + spec.crossCenter + 24 : span;
-  return { centers, width, height };
-}
diff --git a/src/lib/tanstack-data-port.ts b/src/lib/tanstack-data-port.ts
deleted file mode 100644
index d79c8a27..00000000
--- a/src/lib/tanstack-data-port.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-
-import { useInfiniteQuery } from "@tanstack/react-query";
-
-import type { CollectionRequest, CollectionResult, DataPort } from "./data-port.js";
-
-/**
- * Default DataPort. Requires a TanStack `QueryClientProvider` above it; the
- * host owns the client so its cache, retry and devtools settings apply.
- *
- * Every collection is an infinite query — a source that returns everything at
- * once simply reports `nextOffset: null` and never grows a second page. One
- * code path, no paginated/non-paginated branching.
- */
-function useCollection<T>(request: CollectionRequest<T>): CollectionResult<T> {
-  const query = useInfiniteQuery({
-    queryKey: request.key,
-    queryFn: ({ signal, pageParam }) => request.fetch({ signal, offset: pageParam, pageSize: request.pageSize }),
-    initialPageParam: 0,
-    getNextPageParam: (page) => page.nextOffset,
-    enabled: request.enabled ?? true,
-  });
-  return {
-    items: query.data?.pages.flatMap((page) => page.items) ?? [],
-    // isPending is "no data yet". isFetching also covers background refetches
-    // over cached rows, which isPending reports as idle — keep both.
-    isLoading: query.isPending,
-    isFetching: query.isFetching,
-    error: query.error,
-    refetch: () => void query.refetch(),
-    hasNextPage: query.hasNextPage,
-    fetchNextPage: () => void query.fetchNextPage(),
-  };
-}
-
-export function createTanstackDataPort(): DataPort {
-  return { useCollection };
-}
diff --git a/src/lib/time-range.ts b/src/lib/time-range.ts
deleted file mode 100644
index ca5ff31f..00000000
--- a/src/lib/time-range.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * The time window a dashboard is looking at.
- *
- * Presets plus a custom range, resolved to plain `YYYY-MM-DD` bounds. Dates,
- * not timestamps: a dashboard's window is a span of days a human picked, and
- * carrying an instant with it invites a timezone argument that shifts every
- * total by one day's worth of rows.
- */
-
-export type TimeRangePreset = "24h" | "7d" | "30d" | "90d" | "all" | "custom";
-
-export type DateRange = {
-  /** Inclusive lower bound, `YYYY-MM-DD`. Absent means unbounded. */
-  readonly from?: string;
-  /** Inclusive upper bound, `YYYY-MM-DD`. Absent means "up to now". */
-  readonly to?: string;
-};
-
-export const TIME_RANGE_PRESETS: readonly { readonly value: TimeRangePreset; readonly label: string }[] = [
-  { value: "24h", label: "24 hours" },
-  { value: "7d", label: "7 days" },
-  { value: "30d", label: "30 days" },
-  { value: "90d", label: "90 days" },
-  { value: "all", label: "All time" },
-  { value: "custom", label: "Custom" },
-];
-
-const PRESET_DAYS: Record<Exclude<TimeRangePreset, "all" | "custom">, number> = {
-  "24h": 1,
-  "7d": 7,
-  "30d": 30,
-  "90d": 90,
-};
-
-/** `YYYY-MM-DD` in UTC. `toISOString` is the only date formatter that is not locale-dependent. */
-function isoDate(ms: number): string {
-  return new Date(ms).toISOString().slice(0, 10);
-}
-
-/**
- * Turns a preset plus whatever the custom inputs hold into concrete bounds.
- *
- * `now` is a parameter, not a `Date.now()` inside. A resolver that reads the
- * clock is a function whose output changes between the render that produced a
- * query key and the render that used it — which is exactly how a dashboard ends
- * up refetching forever.
- *
- * A `custom` preset with no start resolves to unbounded rather than to an
- * error. Someone selecting "Custom" has not entered anything yet, and showing
- * them all their data for one keystroke is better than an error where their
- * chart used to be.
- */
-export function resolveTimeRange(
-  preset: TimeRangePreset,
-  custom: DateRange,
-  now: number = Date.now(),
-): DateRange {
-  if (preset === "all") return {};
-  if (preset === "custom") {
-    if (custom.from === undefined || custom.from === "") return {};
-    return custom.to === undefined || custom.to === "" ? { from: custom.from } : { from: custom.from, to: custom.to };
-  }
-  return { from: isoDate(now - PRESET_DAYS[preset] * 24 * 60 * 60 * 1000) };
-}
diff --git a/src/theme.css b/src/theme.css
index 3e5c6353..04dd236f 100644
--- a/src/theme.css
+++ b/src/theme.css
@@ -417,39 +417,10 @@
   }
 }
 
-/* The chat dock's FAB entrance: a small pop up off the corner it lives in.
-   Used by ui/chat-dock. */
-@keyframes corbits-fab-in {
-  from {
-    opacity: 0;
-    transform: translateY(8px) scale(0.92);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-/* The chat dock's panel entrance, once open — a slightly larger pop than the
-   FAB's, since the panel is the bigger surface. Only plays on the
-   closed→docked transition; docked→fullpage is a plain CSS transition on the
-   same element, not a re-entrance. Used by ui/chat-dock. */
-@keyframes corbits-dock-in {
-  from {
-    opacity: 0;
-    transform: translateY(18px) scale(0.97);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-/* The render rail's block swap: a small slide-and-fade for whichever block
-   just became active, including the empty-state's own transition into the
-   first block. Keyed by block id so React remounts a fresh node per swap and
-   this plays every time, unlike the dock's own once-per-open entrances. Used
-   by ui/render-rail. */
+/* The block swap: a small slide-and-fade for whichever block just became
+   active, including the empty-state's own transition into the first block.
+   Keyed by block id so React remounts a fresh node per swap and this plays
+   every time. Used by ui/parts-renderer and ui/tool-block. */
 @keyframes corbits-rail-block-in {
   from {
     opacity: 0;
@@ -461,20 +432,6 @@
   }
 }
 
-/* A small scale-and-fade for a swapped icon — the render rail's Pin/PinOff
-   toggle uses it so the glyph change reads as a cross-fade rather than a
-   jump-cut. Used by ui/render-rail. */
-@keyframes corbits-icon-swap {
-  from {
-    opacity: 0;
-    transform: scale(0.7);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
 /* The typing indicator's three dots. Each dot offsets its own
    animation-delay, so the bounce travels left to right. Used by
    ui/typing-indicator. */
@@ -490,21 +447,6 @@
     transform: translateY(-3px);
   }
 }
-/* The contextual panel's page-swap. One direction, always: the incoming
-   page's content settles upward and fades in, whichever page it came from.
-   Ships by ui/sidebar-panel via hooks/use-sidebar-panel, keyed on the active
-   page id so remounting the swapped content is what replays it. */
-@keyframes corbits-panel-swap-in {
-  from {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 /* SelectionCheckbox's pop on select: a small overshoot so the check reads as
    a deliberate snap rather than a plain fade. No `--spring-*` token exists
    yet in this theme — the overshoot curve below is a literal cubic-bezier
diff --git a/src/ui/activity-timeline.tsx b/src/ui/activity-timeline.tsx
deleted file mode 100644
index a0335947..00000000
--- a/src/ui/activity-timeline.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { History } from "lucide-react";
-
-import { useCollectionState } from "../hooks/use-collection-state.js";
-import { type ActivityEntry, groupByDay } from "../lib/activity.js";
-import type { CollectionRequest } from "../lib/data-port.js";
-import { formatRelativeTime } from "../lib/relative-time.js";
-import { cn } from "../lib/utils.js";
-import { Badge, type BadgeTone } from "./badge.js";
-import { Button } from "./button.js";
-import { EmptyState } from "./empty-state.js";
-import { Skeleton } from "./skeleton.js";
-
-const TONES: Record<NonNullable<ActivityEntry["tone"]>, BadgeTone> = {
-  neutral: "neutral",
-  positive: "success",
-  warning: "accent",
-  critical: "danger",
-};
-
-export type ActivityTimelineProps = {
-  readonly request: CollectionRequest<ActivityEntry>;
-  /** Names the feed for assistive tech: "Dana's activity", "Workspace activity". */
-  readonly label: string;
-  /** Shown when the feed is empty. */
-  readonly emptyTitle?: string;
-  /** Render-time for relative stamps. */
-  readonly now?: number;
-  readonly className?: string;
-};
-
-/**
- * What happened, newest first, under day headings.
- *
- * One component for a person's history and for a whole workspace's feed. They
- * differ only in which request is handed to them — same rows, same grouping,
- * same paging — and two files would be two places for the timestamp formatting
- * to drift apart.
- *
- * Day headings are what make a long feed skimmable: without them every row
- * carries a full date and the reader parses forty of them to find yesterday.
- * They are real `<h3>`s inside a `<section>` per day, so the feed has an
- * outline a screen reader can jump through rather than being one flat list.
- *
- * Each row carries both a relative stamp and a machine-readable `<time>`. "3 h
- * ago" is what a person reads; the `dateTime` attribute is what anyone auditing
- * when something happened actually needs, and it costs one attribute.
- *
- * Paging is an explicit control, not a scroll sentinel — see the gallery for
- * the same reasoning. On a feed it matters more: an infinitely-growing list of
- * history has no natural end to reach.
- */
-export function ActivityTimeline({ request, label, emptyTitle = "No activity yet", now, className }: ActivityTimelineProps) {
-  const { state, isFetching, hasNextPage, fetchNextPage } = useCollectionState(request);
-
-  if (state.status === "loading") {
-    return (
-      <div className={cn("flex flex-col gap-2", className)}>
-        <p role="status" className="text-sm text-muted-foreground">
-          Loading activity…
-        </p>
-        {[0, 1, 2, 3, 4].map((index) => (
-          <div key={index} className="flex items-start gap-3 py-2">
-            <Skeleton className="size-6 shrink-0" />
-            <div className="flex min-w-0 flex-1 flex-col gap-1.5">
-              <Skeleton className="h-3 w-20" />
-              <Skeleton className="h-3.5 w-3/4" />
-            </div>
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  if (state.status === "error") {
-    return <EmptyState className={className} icon={<History />} title="Couldn't load activity" description={state.error.message} />;
-  }
-
-  if (state.status === "empty") {
-    return <EmptyState className={className} icon={<History />} title={emptyTitle} />;
-  }
-
-  const days = groupByDay(state.items);
-
-  return (
-    <div className={cn("flex flex-col gap-5", className)} aria-busy={isFetching}>
-      {days.map((day) => (
-        <section key={day.key} className="flex flex-col gap-1" aria-label={day.label}>
-          <h3 className="sticky top-0 bg-background py-1 text-xs font-semibold text-muted-foreground">{day.label}</h3>
-          <ul aria-label={label} className="flex flex-col">
-            {day.entries.map((entry) => (
-              <li key={entry.id} className="flex items-start gap-3 rounded-md px-2 py-2 hover:bg-muted">
-                <span className="flex min-w-0 flex-1 flex-col gap-1">
-                  <span className="flex flex-wrap items-center gap-2">
-                    <Badge tone={TONES[entry.tone ?? "neutral"]}>{entry.kind}</Badge>
-                    {entry.actorName === undefined ? null : (
-                      <span className="text-xs text-muted-foreground">{entry.actorName}</span>
-                    )}
-                  </span>
-                  <span className="text-sm leading-snug">{entry.summary ?? "No details recorded"}</span>
-                </span>
-                <time
-                  dateTime={entry.timestamp}
-                  className="shrink-0 pt-0.5 font-mono text-xs text-muted-foreground tabular-nums"
-                >
-                  {formatRelativeTime(entry.timestamp, now)}
-                </time>
-              </li>
-            ))}
-          </ul>
-        </section>
-      ))}
-
-      {hasNextPage ? (
-        <Button type="button" variant="outline" size="sm" onClick={fetchNextPage} disabled={isFetching} className="self-center">
-          {isFetching ? "Loading…" : "Load more"}
-        </Button>
-      ) : null}
-    </div>
-  );
-}
diff --git a/src/ui/actor-summary.tsx b/src/ui/actor-summary.tsx
deleted file mode 100644
index 7e63b905..00000000
--- a/src/ui/actor-summary.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import type { ReactNode } from "react";
-
-import { cn } from "../lib/utils.js";
-import { Badge } from "./badge.js";
-
-export type ActorFacet = {
-  readonly label: string;
-  /** Zero values are shown, not hidden — "0 approvals" is a finding. */
-  readonly values: readonly string[];
-};
-
-export type ActorSummaryProps = {
-  readonly name: string;
-  /** What they are — "Member", "Agent", "Service account". */
-  readonly role?: string;
-  /**
-   * Headline numbers. Pre-formatted: this component does not know whether 1.4
-   * is seconds, dollars or a ratio.
-   */
-  readonly stats?: readonly { readonly label: string; readonly value: string }[];
-  /**
-   * Attributes with several values each — permissions, teams, tools. Rendered
-   * as chips, so a long grant list stays scannable instead of becoming a
-   * comma-separated paragraph.
-   */
-  readonly facets?: readonly ActorFacet[];
-  readonly actions?: ReactNode;
-  readonly className?: string;
-};
-
-/** Initials from a name, at most two. Falls back to "?" for an empty name. */
-function initials(name: string): string {
-  const parts = name.trim().split(/\s+/).filter((part) => part !== "");
-  if (parts.length === 0) return "?";
-  const first = parts[0]?.[0] ?? "";
-  const last = parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? "") : "";
-  return (first + last).toUpperCase();
-}
-
-/**
- * Who this is, at the top of their detail page: identity, headline numbers, and
- * the attributes that explain what they can do.
- *
- * The facets are a real `<dl>`. Grants, teams and tools are definitions of a
- * term — a screen reader announcing "Permissions: read, write, approve" as a
- * described list is the difference between an audit surface and a wall of
- * chips, and it is the same markup either way.
- *
- * The avatar is initials, not a fetched image. A detail header should not have
- * a network dependency for decoration, and initials never fail to load, never
- * flash, and never leak an identity through a third-party avatar service.
- * `aria-hidden`, because the name is right beside it.
- */
-export function ActorSummary({ name, role, stats, facets, actions, className }: ActorSummaryProps) {
-  return (
-    <header className={cn("flex flex-col gap-4 rounded-lg border border-border bg-card p-4", className)}>
-      <div className="flex items-start gap-3">
-        <span
-          aria-hidden
-          className="grid size-10 shrink-0 place-items-center rounded-full bg-muted text-sm font-semibold text-muted-foreground"
-        >
-          {initials(name)}
-        </span>
-        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-          <h2 className="truncate text-base font-semibold">{name}</h2>
-          {role === undefined ? null : <p className="text-xs text-muted-foreground">{role}</p>}
-        </div>
-        {actions === undefined ? null : <div className="flex shrink-0 items-center gap-2">{actions}</div>}
-      </div>
-
-      {stats === undefined || stats.length === 0 ? null : (
-        <dl className="grid grid-cols-[repeat(auto-fit,minmax(7rem,1fr))] gap-3">
-          {stats.map((stat) => (
-            <div key={stat.label} className="flex flex-col gap-0.5">
-              <dt className="text-xs text-muted-foreground">{stat.label}</dt>
-              <dd className="text-lg leading-none font-semibold">{stat.value}</dd>
-            </div>
-          ))}
-        </dl>
-      )}
-
-      {facets === undefined || facets.length === 0 ? null : (
-        <dl className="flex flex-col gap-2">
-          {facets.map((facet) => (
-            <div key={facet.label} className="flex flex-wrap items-baseline gap-2">
-              <dt className="text-xs font-medium text-muted-foreground">{facet.label}</dt>
-              <dd className="flex flex-wrap gap-1">
-                {facet.values.length === 0 ? (
-                  <span className="text-xs text-muted-foreground">None</span>
-                ) : (
-                  facet.values.map((value) => (
-                    <Badge key={value} tone="neutral">
-                      {value}
-                    </Badge>
-                  ))
-                )}
-              </dd>
-            </div>
-          ))}
-        </dl>
-      )}
-    </header>
-  );
-}
diff --git a/src/ui/add-artifact-dialog.tsx b/src/ui/add-artifact-dialog.tsx
deleted file mode 100644
index c2d16656..00000000
--- a/src/ui/add-artifact-dialog.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import { useState } from "react";
-
-import { isSafeUrl } from "../lib/url.js";
-import { Button } from "./button.js";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "./dialog.js";
-import { FileInput } from "./file-input.js";
-import { Input } from "./input.js";
-import { Tabs } from "./tabs.js";
-
-/** What the user is adding. */
-export type ArtifactSourceKind = "link" | "text" | "files";
-
-export type ArtifactDraft =
-  | { readonly source: "link"; readonly title: string; readonly url: string }
-  | { readonly source: "text"; readonly title: string; readonly text: string }
-  | { readonly source: "files"; readonly files: readonly File[] };
-
-const MODES: readonly { readonly id: ArtifactSourceKind; readonly label: string }[] = [
-  { id: "link", label: "Link" },
-  { id: "text", label: "Paste text" },
-  { id: "files", label: "Upload" },
-];
-
-export type AddArtifactDialogProps = {
-  readonly open: boolean;
-  readonly onOpenChange: (open: boolean) => void;
-  /**
-   * Persists the draft. Rejecting shows its message inline and keeps the dialog
-   * open with the user's input intact — a submit failure that also discards
-   * what they typed is the worst possible outcome of a form.
-   */
-  readonly onSubmit: (draft: ArtifactDraft) => Promise<void>;
-};
-
-/**
- * Add an artifact from a link, pasted text, or files.
- *
- * The modes are `<Tabs>` rather than three styled buttons that swap a form.
- * Those look identical and are announced as three unrelated buttons — the tab
- * pattern is what makes it "choose a source type" instead of "here are some
- * buttons", and it is already a component here, so it is not rebuilt inline.
- *
- * Submission is a promise the host owns. This component never learns what
- * storing an artifact means — it collects a `ArtifactDraft`, hands it over, and
- * renders whatever the rejection said. That is the whole seam.
- *
- * Validation happens on submit, not on change. Telling someone their URL is
- * invalid while they are still on the third character of it is noise.
- */
-export function AddArtifactDialog({ open, onOpenChange, onSubmit }: AddArtifactDialogProps) {
-  const [mode, setMode] = useState<ArtifactSourceKind>("link");
-  const [title, setTitle] = useState("");
-  const [value, setValue] = useState("");
-  const [files, setFiles] = useState<readonly File[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [saving, setSaving] = useState(false);
-
-  function reset() {
-    setMode("link");
-    setTitle("");
-    setValue("");
-    setFiles([]);
-    setError(null);
-  }
-
-  function close(next: boolean) {
-    if (saving) return;
-    if (!next) reset();
-    onOpenChange(next);
-  }
-
-  function draft(): ArtifactDraft | string {
-    if (mode === "files") {
-      if (files.length === 0) return "Choose at least one file.";
-      return { source: "files", files };
-    }
-    const trimmedTitle = title.trim();
-    const trimmedValue = value.trim();
-    if (trimmedTitle === "") return "Give the artifact a name.";
-    if (trimmedValue === "") return mode === "link" ? "Enter a URL." : "Enter some text.";
-    if (mode === "link") {
-      if (!isSafeUrl(trimmedValue)) {
-        return "That does not look like a URL.";
-      }
-      return { source: "link", title: trimmedTitle, url: trimmedValue };
-    }
-    return { source: "text", title: trimmedTitle, text: trimmedValue };
-  }
-
-  function submit() {
-    const next = draft();
-    if (typeof next === "string") {
-      setError(next);
-      return;
-    }
-    setError(null);
-    setSaving(true);
-    onSubmit(next)
-      .then(() => {
-        setSaving(false);
-        reset();
-        onOpenChange(false);
-      })
-      .catch((cause: unknown) => {
-        setSaving(false);
-        setError(cause instanceof Error ? cause.message : "Could not add that. Try again.");
-      });
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={close}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Add an artifact</DialogTitle>
-          <DialogDescription>Link something, paste it, or upload it.</DialogDescription>
-        </DialogHeader>
-
-        <Tabs
-          tabs={MODES}
-          active={mode}
-          label="Source"
-          variant="enclosed"
-          onChange={(next) => {
-            setMode(next);
-            setError(null);
-          }}
-        >
-          {(activeMode) => (
-            <div className="flex flex-col gap-3">
-              {activeMode === "files" ? (
-                <>
-                  <FileInput multiple onFiles={(list) => setFiles(Array.from(list))} label="Choose files" />
-                  {files.length === 0 ? null : (
-                    <ul className="max-h-40 overflow-y-auto text-xs text-muted-foreground">
-                      {files.map((file) => (
-                        <li key={file.name} className="truncate">
-                          {file.name}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </>
-              ) : (
-                <>
-                  <label className="flex flex-col gap-1.5 text-xs font-medium text-muted-foreground">
-                    Name
-                    <Input
-                      value={title}
-                      onChange={(event) => setTitle(event.target.value)}
-                      placeholder="Name this artifact"
-                    />
-                  </label>
-                  <label className="flex flex-col gap-1.5 text-xs font-medium text-muted-foreground">
-                    {activeMode === "link" ? "URL" : "Text"}
-                    {activeMode === "link" ? (
-                      <Input
-                        type="url"
-                        value={value}
-                        onChange={(event) => setValue(event.target.value)}
-                        placeholder="https://example.com/page"
-                      />
-                    ) : (
-                      <textarea
-                        value={value}
-                        onChange={(event) => setValue(event.target.value)}
-                        rows={6}
-                        placeholder="Paste the content to store"
-                        className="resize-y rounded-md border border-input bg-card px-3 py-2 text-sm text-foreground shadow-xs placeholder:text-muted-foreground"
-                      />
-                    )}
-                  </label>
-                </>
-              )}
-            </div>
-          )}
-        </Tabs>
-
-        {/* role="alert" so a failure that lands below the fold is still heard. */}
-        {error === null ? null : (
-          <p role="alert" className="text-sm text-destructive">
-            {error}
-          </p>
-        )}
-
-        <DialogFooter>
-          <Button type="button" variant="ghost" onClick={() => close(false)} disabled={saving}>
-            Cancel
-          </Button>
-          <Button type="button" onClick={submit} disabled={saving}>
-            {saving ? "Adding…" : "Add"}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/src/ui/artifact-detail.tsx b/src/ui/artifact-detail.tsx
deleted file mode 100644
index 7a18ab2d..00000000
--- a/src/ui/artifact-detail.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import type { ReactNode } from "react";
-
-import { type Artifact, artifactKindLabel } from "../lib/artifact.js";
-import { formatRelativeTime } from "../lib/relative-time.js";
-import { cn } from "../lib/utils.js";
-
-export type ArtifactDetailProps = {
-  readonly artifact: Artifact;
-  /** Actions for this artifact — download, archive, share. */
-  readonly actions?: ReactNode;
-  /**
-   * Extra facts for the metadata rail. Omit it entirely and the rail collapses:
-   * an empty aside is a column of whitespace the reader keeps checking.
-   */
-  readonly rail?: ReactNode;
-  /** The rendered artifact — usually `<ArtifactBody artifact={artifact} />`. */
-  readonly children: ReactNode;
-  /** Render-time for the relative timestamp. */
-  readonly now?: number;
-  readonly className?: string;
-};
-
-/**
- * The frame one artifact is read in: a header that names it, a wide stage, and
- * a metadata rail.
- *
- * The stage takes the width and the rail is fixed, rather than the reverse.
- * Artifact bodies are the variable part — a CSV wants every pixel, a deck wants
- * an aspect ratio, prose caps its own measure — while the metadata is a short,
- * known list. Giving the flexible thing the flexible space is the only
- * arrangement that works for all of them.
- *
- * Below `md` the rail moves under the stage instead of squeezing beside it. Two
- * columns in 360px is one unreadable body next to one unreadable rail.
- *
- * The scroll container is the stage, not the page. The header stays put, which
- * is what makes it possible to know what you are looking at halfway down a long
- * document — and it means this composes inside `PageShell`, which owns exactly
- * one page-level scroller.
- */
-export function ArtifactDetail({ artifact, actions, rail, children, now, className }: ArtifactDetailProps) {
-  const stamp = artifact.updatedAt ?? artifact.createdAt;
-
-  return (
-    <article className={cn("flex h-full min-h-0 w-full flex-col", className)}>
-      <header className="flex shrink-0 flex-col gap-2 border-b border-border px-4 py-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4 sm:px-6">
-        <div className="flex min-w-0 flex-col gap-1">
-          <h1 className="truncate text-xl font-semibold tracking-tight">{artifact.title}</h1>
-          <p className="font-mono text-xs text-muted-foreground">
-            {artifactKindLabel(artifact.kind)}
-            {artifact.ownerName === undefined ? "" : ` · ${artifact.ownerName}`}
-            {" · "}
-            {/* The machine-readable date is the accessible one: "3 mo. ago" is
-                unusable for anyone auditing when something was produced. */}
-            <time dateTime={stamp}>{formatRelativeTime(stamp, now)}</time>
-          </p>
-        </div>
-        {actions === undefined ? null : <div className="flex shrink-0 items-center gap-2">{actions}</div>}
-      </header>
-
-      <div className="flex min-h-0 flex-1 flex-col md:flex-row">
-        <main className="min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-6 sm:py-6">{children}</main>
-        {rail === undefined ? null : (
-          <aside
-            aria-label="Artifact details"
-            className="shrink-0 overflow-y-auto border-t border-border px-4 py-4 md:w-72 md:border-t-0 md:border-l lg:w-80"
-          >
-            {rail}
-          </aside>
-        )}
-      </div>
-    </article>
-  );
-}
diff --git a/src/ui/artifact-gallery.tsx b/src/ui/artifact-gallery.tsx
deleted file mode 100644
index 6ceed66c..00000000
--- a/src/ui/artifact-gallery.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-import { FileStack } from "lucide-react";
-import type { ReactNode } from "react";
-
-import { useCollectionState } from "../hooks/use-collection-state.js";
-import { type Artifact, artifactKindLabel } from "../lib/artifact.js";
-import type { CollectionRequest } from "../lib/data-port.js";
-import { formatRelativeTime } from "../lib/relative-time.js";
-import { toSafeHref } from "../lib/url.js";
-import { cn } from "../lib/utils.js";
-import { Button } from "./button.js";
-import { CatalogGlyph } from "./catalog-glyph.js";
-import { EmptyState } from "./empty-state.js";
-import { Skeleton } from "./skeleton.js";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
-import type { ViewMode } from "./view-toggle.js";
-
-/**
- * One tile.
- *
- * A `<button>`, not a div wearing `role="button"`. The div version needs a
- * tabindex, an Enter handler, a Space handler that also has to `preventDefault`
- * to stop the page scrolling, and it still will not repeat on key-hold or fire
- * on Enter the way a real button does. A button is all of that for free, and the
- * `text-left`/`w-full` reset costs two classes.
- *
- * The thumbnail falls back to a generated glyph rather than to blank space, so a
- * grid of artifacts with no imagery still reads as a grid of distinct things.
- */
-export function ArtifactCard({
-  artifact,
-  onOpen,
-  now,
-}: {
-  readonly artifact: Artifact;
-  readonly onOpen?: (artifact: Artifact) => void;
-  /** Render-time for the relative timestamp. Pass one to keep output stable. */
-  readonly now?: number;
-}) {
-  const stamp = artifact.updatedAt ?? artifact.createdAt;
-  const thumbnailUrl = toSafeHref(artifact.thumbnailUrl);
-
-  const inner = (
-    <>
-      <span className="relative block h-28 w-full overflow-hidden bg-muted">
-        {thumbnailUrl === undefined ? (
-          <CatalogGlyph seed={artifact.kind} className="h-28 rounded-none" />
-        ) : (
-          // Decorative: the title sits directly below in the same control, so
-          // alt text here would make a screen reader read the name twice.
-          //
-          // A plain <img>, not `next/image`: this file is copied into whatever
-          // app installs it, and half of those are not Next apps. A framework
-          // import here would be a build error for them.
-          <img src={thumbnailUrl} alt="" className="size-full object-cover" />
-        )}
-      </span>
-      <span className="flex min-w-0 flex-col gap-0.5 border-t border-border p-3">
-        <span className="truncate text-sm font-semibold">{artifact.title}</span>
-        <span className="truncate font-mono text-xs text-muted-foreground">
-          {artifactKindLabel(artifact.kind)} · {formatRelativeTime(stamp, now)}
-        </span>
-      </span>
-    </>
-  );
-
-  const shell = "flex flex-col overflow-hidden rounded-lg border border-border bg-card text-left";
-
-  if (onOpen === undefined) {
-    return <div className={shell}>{inner}</div>;
-  }
-  return (
-    <button type="button" onClick={() => onOpen(artifact)} className={cn(shell, "w-full transition-colors hover:border-primary-emphasis")}>
-      {inner}
-    </button>
-  );
-}
-
-export type ArtifactGalleryProps = {
-  readonly request: CollectionRequest<Artifact>;
-  readonly viewMode?: ViewMode;
-  readonly onOpen?: (artifact: Artifact) => void;
-  /** Offered from the empty state — usually the "add artifact" control. */
-  readonly action?: ReactNode;
-  /** Render-time for relative timestamps. */
-  readonly now?: number;
-  readonly className?: string;
-};
-
-/**
- * A collection of artifacts as a grid or as rows.
- *
- * Both views render the same items in the same order from the same request, so
- * toggling the layout never changes what is in front of you — a gallery whose
- * two modes disagree about the result set is a bug users report as data loss.
- *
- * The four states come from `useCollectionState`, so this makes no decisions
- * about loading or emptiness of its own. The loading state is skeleton tiles
- * *plus* a `role="status"` line: the skeletons are `aria-hidden` by design, and
- * without the status a screen-reader user gets silence where a sighted user gets
- * six pulsing boxes.
- *
- * Paging is an explicit "Load more" rather than an intersection observer.
- * Infinite scroll makes the page's end unreachable, which on a surface that
- * usually has a footer or a next section is a trap, and it takes control of
- * loading away from the person who might be on a metered connection.
- */
-export function ArtifactGallery({ request, viewMode = "grid", onOpen, action, now, className }: ArtifactGalleryProps) {
-  const { state, isFetching, hasNextPage, fetchNextPage } = useCollectionState(request);
-
-  if (state.status === "loading") {
-    return (
-      <div className={cn("flex flex-col gap-3", className)}>
-        <p role="status" className="text-sm text-muted-foreground">
-          Loading artifacts…
-        </p>
-        <div className="grid grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] gap-3">
-          {[0, 1, 2, 3, 4, 5].map((index) => (
-            <Skeleton key={index} className="h-40" />
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  if (state.status === "error") {
-    return (
-      <EmptyState
-        className={className}
-        icon={<FileStack />}
-        title="Couldn't load artifacts"
-        description={state.error.message}
-      />
-    );
-  }
-
-  if (state.status === "empty") {
-    return (
-      <EmptyState
-        className={className}
-        icon={<FileStack />}
-        title="No artifacts yet"
-        description="Anything produced here — a document, an export, a deck — shows up in this gallery."
-        action={action}
-      />
-    );
-  }
-
-  return (
-    <div className={cn("flex flex-col gap-4", className)} aria-busy={isFetching}>
-      {viewMode === "rows" ? (
-        <Table aria-label="Artifacts">
-          <TableHeader>
-            <TableRow>
-              <TableHead scope="col">Name</TableHead>
-              <TableHead scope="col">Kind</TableHead>
-              <TableHead scope="col">Owner</TableHead>
-              <TableHead scope="col">Updated</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {state.items.map((artifact) => (
-              <TableRow key={artifact.id}>
-                <TableCell className="font-medium">
-                  {onOpen === undefined ? (
-                    artifact.title
-                  ) : (
-                    <button
-                      type="button"
-                      onClick={() => onOpen(artifact)}
-                      className="rounded-sm text-left underline-offset-2 hover:underline"
-                    >
-                      {artifact.title}
-                    </button>
-                  )}
-                </TableCell>
-                <TableCell className="text-muted-foreground">{artifactKindLabel(artifact.kind)}</TableCell>
-                <TableCell className="text-muted-foreground">{artifact.ownerName ?? "—"}</TableCell>
-                <TableCell className="text-muted-foreground">
-                  {formatRelativeTime(artifact.updatedAt ?? artifact.createdAt, now)}
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      ) : (
-        <div className="grid grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] gap-3">
-          {state.items.map((artifact) => (
-            <ArtifactCard
-              key={artifact.id}
-              artifact={artifact}
-              {...(onOpen === undefined ? {} : { onOpen })}
-              {...(now === undefined ? {} : { now })}
-            />
-          ))}
-        </div>
-      )}
-
-      {hasNextPage ? (
-        <Button type="button" variant="outline" size="sm" onClick={fetchNextPage} disabled={isFetching} className="self-center">
-          {isFetching ? "Loading…" : "Load more"}
-        </Button>
-      ) : null}
-    </div>
-  );
-}
diff --git a/src/ui/catalog-glyph.tsx b/src/ui/catalog-glyph.tsx
deleted file mode 100644
index d6b561cb..00000000
--- a/src/ui/catalog-glyph.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { cn } from "../lib/utils.js";
-
-export const CATALOG_GLYPH_KINDS = ["code", "doc", "grid", "nodes"] as const;
-export type CatalogGlyphKind = (typeof CATALOG_GLYPH_KINDS)[number];
-
-/**
- * Stable hash of a string. Deterministic so a catalog grid looks varied but
- * never reshuffles between renders — a tile that changes its face on refresh is
- * worse than one with no face at all.
- */
-export function hashString(value: string): number {
-  let hash = 0;
-  for (let index = 0; index < value.length; index += 1) {
-    hash = (hash * 31 + value.charCodeAt(index)) | 0;
-  }
-  return Math.abs(hash);
-}
-
-/** The glyph a given id always gets. */
-export function glyphKindFor(id: string): CatalogGlyphKind {
-  return CATALOG_GLYPH_KINDS[hashString(id) % CATALOG_GLYPH_KINDS.length] ?? "grid";
-}
-
-const PATHS: Record<CatalogGlyphKind, readonly string[]> = {
-  code: ["M44 26 L28 40 L44 54", "M76 26 L92 40 L76 54", "M64 22 L56 58"],
-  doc: ["M40 22 h30 l12 12 v24 a4 4 0 0 1 -4 4 h-38 a4 4 0 0 1 -4 -4 v-32 a4 4 0 0 1 4 -4 z", "M50 44 h20", "M50 52 h14"],
-  grid: ["M34 24 h22 v22 h-22 z", "M64 24 h22 v22 h-22 z", "M34 54 h22 v14 h-22 z", "M64 54 h22 v14 h-22 z"],
-  nodes: ["M36 40 h20", "M64 28 h20", "M64 52 h20", "M60 40 L64 28", "M60 40 L64 52"],
-};
-
-/**
- * A decorative face for a catalog tile whose subject has no artwork of its own.
- *
- * Drawn in `currentColor` on a tokened surface rather than the app's original
- * white-on-brand-fill palette. That version needed four saturated fills and a
- * white stroke, which is a second colour system to keep contrast-tested; taking
- * its colour from context means it is correct in both themes for free.
- *
- * Always `aria-hidden`. It is generated from a hash and carries no information
- * — the tile's title is the content, and announcing "nodes glyph" tells the
- * user nothing true about the thing.
- */
-export function CatalogGlyph({
-  /** Anything stable about the subject — its id, its kind. Picks the glyph. */
-  seed,
-  kind,
-  className,
-}: {
-  seed: string;
-  /** Force a glyph instead of deriving it. */
-  kind?: CatalogGlyphKind;
-  className?: string;
-}) {
-  const resolved = kind ?? glyphKindFor(seed);
-
-  return (
-    <span
-      aria-hidden
-      className={cn(
-        "grid h-20 w-full place-items-center overflow-hidden rounded-md bg-muted text-muted-foreground",
-        className,
-      )}
-    >
-      <svg viewBox="0 0 120 80" fill="none" className="size-full">
-        {PATHS[resolved].map((path) => (
-          <path
-            key={path}
-            d={path}
-            stroke="currentColor"
-            strokeWidth={4}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        ))}
-      </svg>
-    </span>
-  );
-}
diff --git a/src/ui/chat-dock-fab.test.tsx b/src/ui/chat-dock-fab.test.tsx
deleted file mode 100644
index 332e75cf..00000000
--- a/src/ui/chat-dock-fab.test.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { describe, expect, test } from "bun:test";
-
-import { ChatDockFab } from "./chat-dock.js";
-
-type Mounted = {
-  container: HTMLElement;
-  unmount: () => void;
-};
-
-function render(node: React.ReactElement): Mounted {
-  const container = document.createElement("div");
-  document.body.appendChild(container);
-  let root!: Root;
-  act(() => {
-    root = createRoot(container);
-    root.render(node);
-  });
-  return {
-    container,
-    unmount: () => {
-      act(() => root.unmount());
-      container.remove();
-    },
-  };
-}
-
-describe("ChatDockFab unread badge", () => {
-  test("renders no badge when unreadCount is 0 or omitted", () => {
-    const mounted = render(<ChatDockFab onOpen={() => {}} />);
-    expect(mounted.container.querySelector('[data-slot="chat-dock-fab-badge"]')).toBeNull();
-    expect(mounted.container.querySelector("button")?.getAttribute("aria-label")).toBe("Open chat");
-    mounted.unmount();
-  });
-
-  test("renders the exact count when unreadCount is positive and small", () => {
-    const mounted = render(<ChatDockFab onOpen={() => {}} unreadCount={5} />);
-    const badge = mounted.container.querySelector('[data-slot="chat-dock-fab-badge"]');
-    expect(badge?.textContent).toBe("5");
-    expect(mounted.container.querySelector("button")?.getAttribute("aria-label")).toBe("Open chat, 5 unread");
-    mounted.unmount();
-  });
-
-  test("caps the displayed count at 9+", () => {
-    const mounted = render(<ChatDockFab onOpen={() => {}} unreadCount={42} />);
-    const badge = mounted.container.querySelector('[data-slot="chat-dock-fab-badge"]');
-    expect(badge?.textContent).toBe("9+");
-    mounted.unmount();
-  });
-
-  test("hides the badge again once unreadCount drops back to 0", () => {
-    const mounted = render(<ChatDockFab onOpen={() => {}} unreadCount={3} />);
-    expect(mounted.container.querySelector('[data-slot="chat-dock-fab-badge"]')).not.toBeNull();
-    mounted.unmount();
-
-    const remounted = render(<ChatDockFab onOpen={() => {}} unreadCount={0} />);
-    expect(remounted.container.querySelector('[data-slot="chat-dock-fab-badge"]')).toBeNull();
-    remounted.unmount();
-  });
-});
diff --git a/src/ui/chat-dock-modality.test.tsx b/src/ui/chat-dock-modality.test.tsx
deleted file mode 100644
index 992306d1..00000000
--- a/src/ui/chat-dock-modality.test.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { describe, expect, test } from "bun:test";
-
-import { ChatDock, ChatDockScrim } from "./chat-dock.js";
-
-type Mounted = {
-  container: HTMLElement;
-  unmount: () => void;
-};
-
-function render(node: React.ReactElement): Mounted {
-  const container = document.createElement("div");
-  document.body.appendChild(container);
-  let root!: Root;
-  act(() => {
-    root = createRoot(container);
-    root.render(node);
-  });
-  return {
-    container,
-    unmount: () => {
-      act(() => root.unmount());
-      container.remove();
-    },
-  };
-}
-
-function query(container: HTMLElement, selector: string): HTMLElement | null {
-  return container.querySelector(selector);
-}
-
-describe("ChatDock modality", () => {
-  test("docked mode is non-modal: role complementary, no aria-modal, no focus trap engaged", () => {
-    const outside = document.createElement("button");
-    outside.id = "outside-button";
-    document.body.appendChild(outside);
-    outside.focus();
-
-    const mounted = render(
-      <ChatDock mode="docked">
-        <button id="inside-docked">inside</button>
-      </ChatDock>,
-    );
-
-    const dock = query(mounted.container, '[data-slot="chat-dock"]');
-    expect(dock?.getAttribute("role")).toBe("complementary");
-    expect(dock?.getAttribute("aria-modal")).toBeNull();
-    // Non-modal: the focus trap never activated, so focus was never yanked
-    // away from whatever had it outside the dock.
-    expect(document.activeElement).toBe(outside);
-
-    mounted.unmount();
-    outside.remove();
-  });
-
-  test("docked mode leaves background elements focusable and clickable", () => {
-    const outside = document.createElement("button");
-    let clicked = false;
-    outside.addEventListener("click", () => {
-      clicked = true;
-    });
-    document.body.appendChild(outside);
-
-    const mounted = render(
-      <ChatDock mode="docked">
-        <button>inside</button>
-      </ChatDock>,
-    );
-
-    outside.focus();
-    expect(document.activeElement).toBe(outside);
-    outside.click();
-    expect(clicked).toBe(true);
-    expect(outside.hasAttribute("inert")).toBe(false);
-    expect(outside.disabled).toBe(false);
-
-    mounted.unmount();
-    outside.remove();
-  });
-
-  test("fullpage mode is modal: role dialog, aria-modal true, focus trap engaged", () => {
-    const outside = document.createElement("button");
-    document.body.appendChild(outside);
-    outside.focus();
-
-    const mounted = render(
-      <ChatDock mode="fullpage">
-        <button id="inside-fullpage">inside</button>
-      </ChatDock>,
-    );
-
-    const dock = query(mounted.container, '[data-slot="chat-dock"]');
-    expect(dock?.getAttribute("role")).toBe("dialog");
-    expect(dock?.getAttribute("aria-modal")).toBe("true");
-    // Modal: activation moved focus into the dock, off the outside trigger.
-    expect(document.activeElement).toBe(document.getElementById("inside-fullpage"));
-
-    mounted.unmount();
-    outside.remove();
-  });
-
-  test("fullpage mode locks page scroll; docked mode does not", () => {
-    const docked = render(<ChatDock mode="docked">content</ChatDock>);
-    expect(document.body.style.overflow).not.toBe("hidden");
-    docked.unmount();
-
-    const fullpage = render(<ChatDock mode="fullpage">content</ChatDock>);
-    expect(document.body.style.overflow).toBe("hidden");
-    fullpage.unmount();
-    expect(document.body.style.overflow).not.toBe("hidden");
-  });
-});
-
-describe("ChatDockScrim", () => {
-  test("renders nothing for docked mode", () => {
-    const mounted = render(<ChatDockScrim mode="docked" onClose={() => {}} />);
-    expect(mounted.container.firstChild).toBeNull();
-    mounted.unmount();
-  });
-
-  test("renders nothing for closed mode", () => {
-    const mounted = render(<ChatDockScrim mode="closed" onClose={() => {}} />);
-    expect(mounted.container.firstChild).toBeNull();
-    mounted.unmount();
-  });
-
-  test("renders for fullpage mode and closes on click", () => {
-    let closed = false;
-    const mounted = render(<ChatDockScrim mode="fullpage" onClose={() => (closed = true)} />);
-    const scrim = mounted.container.querySelector("button");
-    expect(scrim).not.toBeNull();
-    act(() => scrim?.click());
-    expect(closed).toBe(true);
-    mounted.unmount();
-  });
-});
diff --git a/src/ui/chat-dock.tsx b/src/ui/chat-dock.tsx
deleted file mode 100644
index d8ee694b..00000000
--- a/src/ui/chat-dock.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import { MessageCircle } from "lucide-react";
-import { useEffect, useState, type MutableRefObject, type ReactNode, type RefObject } from "react";
-
-import type { ChatDockMode } from "../hooks/use-chat-dock.js";
-import { useFlipTransition } from "../hooks/use-flip-transition.js";
-import { useFocusTrap } from "../hooks/use-focus-trap.js";
-import { cn } from "../lib/utils.js";
-import { CHAT_DOCK_ENTRANCE_MS, CHAT_DOCK_SCRIM_MS } from "./chat-dock-timing.js";
-
-/** Only `fullpage` covers the whole viewport and demands modal behavior — `docked` is a corner panel the rest of the page stays usable behind. */
-function isModal(mode: ChatDockMode): boolean {
-  return mode === "fullpage";
-}
-
-/** Caps the badge at "9+" rather than growing unboundedly wide on a fixed-size FAB. */
-function formatUnreadCount(unreadCount: number): string {
-  return unreadCount > 9 ? "9+" : String(unreadCount);
-}
-
-function mergeRefs<T>(...refs: ReadonlyArray<RefObject<T | null>>): (node: T | null) => void {
-  return (node) => {
-    for (const ref of refs) (ref as MutableRefObject<T | null>).current = node;
-  };
-}
-
-/** `docked` and `fullpage` are the only two modes that morph into each other; `closed` plays its own entrance/exit animation instead. */
-function flipKey(mode: ChatDockMode): string | null {
-  return mode === "closed" ? null : mode;
-}
-
-/**
- * Locks the page's own scroll while `locked` is true, restoring whatever
- * `overflow` it had on unmount — `fullpage` covers the viewport, so a
- * background scroll underneath it would move content the reader can't see.
- */
-function useBodyScrollLock(locked: boolean): void {
-  useEffect(() => {
-    if (!locked) return;
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = previousOverflow;
-    };
-  }, [locked]);
-}
-
-/**
- * The dim-and-blur backdrop behind an open dock. Rendered only for
- * `fullpage` — that is the one mode that covers the viewport and is modal;
- * `docked` is a non-modal corner panel and must leave the rest of the page
- * fully interactive, so it gets no scrim. Clicking the scrim closes the
- * dock, same as Escape.
- */
-export function ChatDockScrim({ mode, onClose, className }: { mode: ChatDockMode; onClose: () => void; className?: string }) {
-  if (!isModal(mode)) return null;
-  return (
-    <button
-      type="button"
-      onClick={onClose}
-      aria-label="Close chat"
-      style={{ animationDuration: `${CHAT_DOCK_SCRIM_MS}ms` }}
-      className={cn(
-        "fixed inset-0 z-40 cursor-default bg-foreground/20 backdrop-blur-[2px] [animation-name:corbits-fade-in] [animation-timing-function:var(--ease-out)] [animation-fill-mode:both]",
-        className,
-      )}
-    />
-  );
-}
-
-/**
- * The closed-state pill. Rendered *inside* `ChatDock` while `mode === "closed"`
- * — the pill and the panel share the one dock element, so opening the dock is
- * a class change on that element, not a swap between two fixed-position nodes.
- *
- * The pop-in plays once, tracked with a mount flag rather than left as a
- * static animation class: a class that's always present can be retriggered
- * by unrelated DOM churn, where a flag that flips once after mount cannot.
- */
-export function ChatDockFab({
-  onOpen,
-  label = "Ask",
-  unreadCount = 0,
-  className,
-}: {
-  onOpen: () => void;
-  label?: string;
-  /** Unread message count to surface on the launcher. Non-positive values render no badge. */
-  unreadCount?: number;
-  className?: string;
-}) {
-  const [playEntrance, setPlayEntrance] = useState(true);
-  const hasUnread = unreadCount > 0;
-
-  useEffect(() => {
-    const timer = window.setTimeout(() => setPlayEntrance(false), CHAT_DOCK_ENTRANCE_MS);
-    return () => window.clearTimeout(timer);
-  }, []);
-
-  return (
-    <button
-      type="button"
-      onClick={onOpen}
-      aria-expanded={false}
-      aria-label={hasUnread ? `Open chat, ${unreadCount} unread` : "Open chat"}
-      className={cn(
-        "relative inline-flex h-full w-full items-center justify-center gap-2 rounded-full bg-primary px-4 text-sm font-bold text-primary-foreground shadow-lg transition-colors hover:bg-primary-active",
-        playEntrance && "[animation:corbits-fab-in_280ms_var(--ease-out)_both]",
-        className,
-      )}
-    >
-      <MessageCircle className="size-4" aria-hidden />
-      {label}
-      {hasUnread ? (
-        <span
-          data-slot="chat-dock-fab-badge"
-          aria-hidden="true"
-          className="absolute -top-1 -right-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full border-2 border-popover bg-destructive px-1 text-[10px] font-bold text-destructive-foreground"
-        >
-          {formatUnreadCount(unreadCount)}
-        </span>
-      ) : null}
-    </button>
-  );
-}
-
-const MODE_CLASS: Record<ChatDockMode, string> = {
-  closed: "pointer-events-none right-6 bottom-6 h-14 w-14 rounded-full opacity-0",
-  docked:
-    "pointer-events-auto top-3 right-3 bottom-3 left-auto h-auto w-[min(520px,50vw)] max-w-[calc(100vw-24px)] rounded-2xl opacity-100",
-  fullpage: "pointer-events-auto inset-3 h-auto w-auto rounded-2xl opacity-100",
-};
-
-export type ChatDockProps = {
-  readonly mode: ChatDockMode;
-  readonly children: ReactNode;
-  /** Plays the pop-in entrance for this render — pass `useChatDock().shouldAnimateEntrance`. Never true for a `docked <-> fullpage` resize. */
-  readonly shouldAnimateEntrance?: boolean;
-  readonly className?: string;
-};
-
-/**
- * The dock's own persistent element: `closed`, `docked` and `fullpage` are
- * three sets of classes on this *one* fixed-position container, never three
- * components — `closed` is the one mode whose content (the FAB) is a
- * genuinely different child, but the container itself never remounts.
- *
- * Mode changes jump straight to their new `inset`/`width`/`height` — nothing
- * here transitions a layout property. A fixed element sized against the
- * viewport is exactly the case where animating `inset`/`width`/`height`
- * forces a layout recalculation on every frame; `useFlipTransition` measures
- * the box before and after the jump and animates only `transform` (plus
- * `opacity` for the closed states) to make `docked ↔ fullpage` read as one
- * panel growing, at zero layout cost.
- *
- * `prefers-reduced-motion` is handled once, globally, in `theme.css` — every
- * transition and animation on this element collapses to a single frame there,
- * so this piece carries no reduced-motion logic of its own.
- *
- * Modality differs by mode, deliberately: `fullpage` covers the viewport and
- * behaves like a dialog — `aria-modal`, a focus trap, the page's own scroll
- * locked. `docked` is a corner panel the reader can leave open while working
- * elsewhere on the page, so it stays non-modal — `role="complementary"`, no
- * `aria-modal`, no focus trap, no scroll lock, and nothing about the rest of
- * the page is disabled or made inert. Escape still steps `fullpage` down to
- * `docked` and `docked` down to `closed` in both cases (see `useChatDock`).
- */
-export function ChatDock({ mode, children, shouldAnimateEntrance = false, className }: ChatDockProps) {
-  const isOpen = mode !== "closed";
-  const modal = isModal(mode);
-  const trapRef = useFocusTrap<HTMLDivElement>(modal);
-  const flipRef = useFlipTransition<HTMLDivElement>(flipKey(mode));
-  useBodyScrollLock(modal);
-
-  return (
-    <div
-      ref={mergeRefs(trapRef, flipRef)}
-      data-slot="chat-dock"
-      data-mode={mode}
-      role={modal ? "dialog" : "complementary"}
-      aria-label="Chat"
-      aria-modal={modal ? "true" : undefined}
-      aria-hidden={mode === "closed"}
-      tabIndex={-1}
-      className={cn(
-        "fixed z-50 flex flex-col overflow-hidden border border-border bg-popover text-popover-foreground shadow-xl transition-opacity duration-300 ease-[var(--ease-out)]",
-        MODE_CLASS[mode],
-        isOpen && shouldAnimateEntrance && "[animation:corbits-dock-in_280ms_var(--ease-out)_both]",
-        className,
-      )}
-    >
-      {children}
-    </div>
-  );
-}
diff --git a/src/ui/command-queue.tsx b/src/ui/command-queue.tsx
deleted file mode 100644
index 2d96289f..00000000
--- a/src/ui/command-queue.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import { Inbox } from "lucide-react";
-import type { ReactNode } from "react";
-
-import { useCollectionState } from "../hooks/use-collection-state.js";
-import type { CollectionRequest } from "../lib/data-port.js";
-import { PRIORITY_LABEL, STATUS_LABEL, type NowItem } from "../lib/now-item.js";
-import { formatRelativeTime } from "../lib/relative-time.js";
-import { cn } from "../lib/utils.js";
-import { Button } from "./button.js";
-import { EmptyState } from "./empty-state.js";
-
-export type CommandQueueProps = {
-  /** The queue's collection, resolved by whatever DataPort is in scope. */
-  readonly request: CollectionRequest<NowItem>;
-  readonly selectedId?: string | null;
-  readonly onOpen: (item: NowItem) => void;
-  /** Shown when the collection is ready and empty. */
-  readonly empty?: ReactNode;
-  readonly now?: number;
-  readonly className?: string;
-};
-
-/**
- * The full attention queue under the Now strip: everything, densest form.
- *
- * Fed by a `DataPort` rather than an items array, because this is the surface
- * that paginates — `hasNextPage`/`fetchNextPage` come from the port, and a
- * caller passing a plain array would have to rebuild that. Its four states come
- * from `useCollectionState`, the same machine the data table uses, so a queue
- * and a table never disagree about what "empty" means.
- *
- * Rows are buttons, not links: opening an item selects it in a two-pane layout
- * rather than navigating. Give the row an `href` and render `NowCards` instead
- * when it really is a navigation.
- */
-export function CommandQueue({ request, selectedId = null, onOpen, empty, now, className }: CommandQueueProps) {
-  const { state, isFetching, refetch, hasNextPage, fetchNextPage } = useCollectionState(request);
-
-  if (state.status === "loading") {
-    return (
-      <p role="status" className={cn("px-3 py-6 text-sm text-muted-foreground", className)}>
-        Loading…
-      </p>
-    );
-  }
-
-  if (state.status === "error") {
-    return (
-      <div className={cn("px-3 py-6", className)}>
-        <p className="text-sm">{state.error.message}</p>
-        <Button variant="outline" size="sm" className="mt-2" onClick={refetch}>
-          Try again
-        </Button>
-      </div>
-    );
-  }
-
-  if (state.status === "empty") {
-    return <div className={className}>{empty ?? <EmptyState icon={<Inbox />} title="You're all caught up" />}</div>;
-  }
-
-  return (
-    <div className={className}>
-      <ul aria-label="Queue" aria-busy={isFetching} className="flex flex-col">
-        {state.items.map((item) => (
-          <li key={`${item.type}:${item.id}`}>
-            <QueueRow item={item} selected={item.id === selectedId} onOpen={() => onOpen(item)} now={now} />
-          </li>
-        ))}
-      </ul>
-      {hasNextPage ? (
-        <div className="p-2">
-          <Button variant="ghost" size="sm" className="w-full" onClick={fetchNextPage} disabled={isFetching}>
-            {isFetching ? "Loading…" : "Load more"}
-          </Button>
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-/**
- * One item as a row: status, priority band, subject, classification, who it is
- * from (or the decision being asked for), and when.
- *
- * Exported, and it is also the mail row: an inbox list and the queue differ in
- * where their items come from, not in how an item reads. A second component
- * over the same fields would drift from this one within a release.
- */
-export function QueueRow({
-  item,
-  selected,
-  onOpen,
-  now,
-}: {
-  item: NowItem;
-  selected: boolean;
-  onOpen: () => void;
-  now?: number;
-}) {
-  const unread = item.type === "mail" && !item.read;
-
-  return (
-    <button
-      type="button"
-      onClick={onOpen}
-      aria-current={selected ? "true" : undefined}
-      className={cn(
-        "flex w-full min-w-0 items-center gap-2 border-b border-border px-3 py-2 text-left text-sm transition-colors last:border-b-0",
-        selected ? "bg-primary/10" : "hover:bg-muted",
-      )}
-    >
-      {/* One marker, not two: the dot says "still asking" — unread mail or an
-          undecided gate — and the label behind it names which. A done item
-          shows nothing here, which is the point. */}
-      <span className="grid size-2 shrink-0 place-items-center">
-        {item.status === "needs-action" ? (
-          <span
-            role="img"
-            aria-label={unread ? `${STATUS_LABEL[item.status]}, unread` : STATUS_LABEL[item.status]}
-            className="size-2 rounded-full bg-primary"
-          />
-        ) : null}
-      </span>
-      <span
-        className={cn(
-          "w-11 shrink-0 text-[10px] font-semibold tracking-wide uppercase",
-          item.priority === "now" ? "text-primary-emphasis" : "text-muted-foreground",
-        )}
-      >
-        {PRIORITY_LABEL[item.priority]}
-      </span>
-      <span className={cn("min-w-0 flex-1 truncate", unread ? "font-semibold" : "text-muted-foreground")}>
-        {item.title}
-      </span>
-      <span className="hidden shrink-0 rounded-sm bg-muted px-1.5 py-0.5 text-[10px] font-medium tracking-wide text-muted-foreground uppercase sm:inline">
-        {item.classification}
-      </span>
-      <span className="hidden max-w-28 min-w-0 truncate text-xs text-muted-foreground md:inline">
-        {item.type === "mail" ? item.from : item.action}
-      </span>
-      <time dateTime={item.when} className="shrink-0 text-[11px] text-muted-foreground">
-        {formatRelativeTime(item.when, now)}
-      </time>
-    </button>
-  );
-}
diff --git a/src/ui/context-strip.tsx b/src/ui/context-strip.tsx
deleted file mode 100644
index 048526e2..00000000
--- a/src/ui/context-strip.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import { ExternalLink, X } from "lucide-react";
-import type { ReactNode } from "react";
-
-import { cn } from "../lib/utils.js";
-
-/**
- * What the app is currently "on" — the artifact, run, thread or record the next
- * action will apply to.
- *
- * `kind` is a free string, not a union of the host's entity types: this file is
- * copied into apps whose entity vocabularies differ, and a union here would be
- * the first thing every consumer had to edit. The label the user reads is
- * whatever the host passes.
- */
-export type ContextRef = {
-  readonly id: string;
-  /** Short type label shown before the name, e.g. "Artifact". */
-  readonly kind: string;
-  readonly label: string;
-  /** Where the context lives. Without it the strip renders as static text. */
-  readonly href?: string;
-  /** Leaves the app. Opens in a new tab, and says so to a screen reader. */
-  readonly external?: boolean;
-  readonly icon?: ReactNode;
-};
-
-/** The single active context, as one line in the top bar. */
-export function ContextStrip({ context, className }: { context: ContextRef | null; className?: string }) {
-  if (context === null) return null;
-
-  const body = (
-    <>
-      {context.icon === undefined ? null : (
-        <span className="grid size-3.5 shrink-0 place-items-center text-muted-foreground [&_svg]:size-3.5" aria-hidden>
-          {context.icon}
-        </span>
-      )}
-      <span className="shrink-0 text-xs text-muted-foreground">{context.kind}</span>
-      <span className="min-w-0 truncate font-medium">{context.label}</span>
-    </>
-  );
-
-  const shared = cn("flex min-w-0 max-w-[26rem] items-center gap-2 rounded-md px-2 py-1 text-sm", className);
-
-  if (context.href === undefined) {
-    return (
-      <span data-slot="context-strip" className={shared}>
-        {body}
-      </span>
-    );
-  }
-  return (
-    <a
-      data-slot="context-strip"
-      href={context.href}
-      title={context.label}
-      className={cn(shared, "text-muted-foreground transition-colors hover:bg-muted hover:text-foreground")}
-    >
-      {body}
-    </a>
-  );
-}
-
-/**
- * One typed entity reference, as a link chip. This is the "Related" affordance
- * on a detail surface — the same `ContextRef` the strip and the pills take,
- * because a reference to a thing is a reference to a thing whether you are
- * about to act on it, detach it, or follow it.
- *
- * An external ref opens in a new tab and says so in the accessible name; a
- * visual icon alone leaves a screen-reader user to discover it by surprise.
- */
-export function RefChip({ item, className }: { item: ContextRef; className?: string }) {
-  const label = `${item.kind}: ${item.label}`;
-  const shell = cn(
-    "inline-flex min-h-9 items-center gap-1.5 rounded-full border border-border bg-muted px-3 text-xs font-medium text-muted-foreground transition-colors hover:bg-background hover:text-foreground",
-    className,
-  );
-
-  if (item.href === undefined) {
-    return (
-      <span className={shell} title={label}>
-        {label}
-      </span>
-    );
-  }
-
-  if (item.external === true) {
-    return (
-      <a href={item.href} target="_blank" rel="noreferrer" className={shell} title={label}>
-        {label}
-        <ExternalLink className="size-3" aria-hidden />
-        <span className="sr-only">(opens in a new tab)</span>
-      </a>
-    );
-  }
-
-  return (
-    <a href={item.href} className={shell} title={label}>
-      {label}
-    </a>
-  );
-}
-
-/** The "Related" row on a detail surface. Renders nothing when there is nothing. */
-export function RefChips({ items, className }: { items: readonly ContextRef[]; className?: string }) {
-  if (items.length === 0) return null;
-  return (
-    <ul data-slot="ref-chips" aria-label="Related" className={cn("flex flex-wrap gap-2", className)}>
-      {items.map((item) => (
-        <li key={`${item.kind}:${item.id}`}>
-          <RefChip item={item} />
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-/**
- * The set of contexts attached to the next action, each removable. `onRemove`
- * is required — a pill you cannot detach should be a `ContextStrip`, not a
- * pill, and making the prop optional would quietly allow that mistake.
- */
-export function ContextPills({
-  items,
-  onRemove,
-  className,
-}: {
-  items: readonly ContextRef[];
-  onRemove: (item: ContextRef) => void;
-  className?: string;
-}) {
-  if (items.length === 0) return null;
-  return (
-    <ul data-slot="context-pills" className={cn("flex flex-wrap items-center gap-1.5", className)}>
-      {items.map((item) => (
-        <li
-          key={`${item.kind}:${item.id}`}
-          className="flex items-center gap-1.5 rounded-md border border-border bg-muted py-1 pr-1 pl-2 text-xs"
-        >
-          {item.icon === undefined ? null : (
-            <span className="grid size-3 shrink-0 place-items-center text-muted-foreground [&_svg]:size-3" aria-hidden>
-              {item.icon}
-            </span>
-          )}
-          <span className="max-w-44 truncate" title={item.label}>
-            <span className="text-muted-foreground">{item.kind}:</span> {item.label}
-          </span>
-          <button
-            type="button"
-            onClick={() => onRemove(item)}
-            aria-label={`Remove ${item.kind} ${item.label}`}
-            className="grid size-5 shrink-0 place-items-center rounded-sm text-muted-foreground transition-colors hover:bg-background hover:text-foreground"
-          >
-            <X className="size-3" aria-hidden />
-          </button>
-        </li>
-      ))}
-    </ul>
-  );
-}
diff --git a/src/ui/count-table.tsx b/src/ui/count-table.tsx
deleted file mode 100644
index 9a7cc504..00000000
--- a/src/ui/count-table.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { formatCompact, scaleLinear } from "../lib/chart-geometry.js";
-import { seriesColor } from "../lib/chart-palette.js";
-import { cn } from "../lib/utils.js";
-import { EmptyState } from "./empty-state.js";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
-
-export type CountRow = {
-  readonly label: string;
-  readonly count: number;
-};
-
-export type CountTableProps = {
-  /** Names the table. A count of *what* is the first thing a reader needs. */
-  readonly caption: string;
-  readonly rows: readonly CountRow[];
-  /** Header for the count column. */
-  readonly countLabel?: string;
-  readonly format?: (value: number) => string;
-  readonly className?: string;
-};
-
-/**
- * A ranked tally: what, how many, and how the tail compares to the head.
- *
- * A table rather than a chart, with the bar as a *secondary* encoding behind the
- * number. The exact count is the answer here — "412 runs", not "roughly this
- * long" — so the number is the content and the bar is what lets the eye rank
- * fifteen rows without reading fifteen numbers. That is the opposite of a bar
- * chart's priority, and it is why this is not one.
- *
- * The bar is a background layer inside the label cell, not its own column. Its
- * own column would either squeeze the labels or push the counts off the right of
- * a narrow card, and the comparison reads better when the bar sits directly
- * under the thing it measures.
- *
- * The bar is `aria-hidden` and scaled to the largest row rather than to a round
- * axis: it carries no value a reader needs, since the count is right there in
- * text, and against the maximum the ranking is as legible as it can be.
- *
- * Rows are rendered in the order given. Sorting here would fight whatever
- * ranking the caller computed — which is usually the point of the table.
- */
-export function CountTable({ caption, rows, countLabel = "Count", format = formatCompact, className }: CountTableProps) {
-  if (rows.length === 0) {
-    return <EmptyState className={className} title={`No ${caption.toLowerCase()} recorded`} />;
-  }
-
-  const max = Math.max(...rows.map((row) => row.count));
-
-  return (
-    <Table aria-label={caption} className={className}>
-      <TableHeader>
-        <TableRow>
-          <TableHead scope="col">{caption}</TableHead>
-          <TableHead scope="col" className="text-right">
-            {countLabel}
-          </TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {rows.map((row) => (
-          <TableRow key={row.label}>
-            <TableCell className="relative">
-              <span
-                aria-hidden
-                className="absolute inset-y-1 left-0 rounded-xs opacity-15"
-                style={{ width: `${scaleLinear(row.count, max, 100)}%`, backgroundColor: seriesColor(0) }}
-              />
-              <span className={cn("relative")}>{row.label}</span>
-            </TableCell>
-            <TableCell className="text-right font-mono tabular-nums">{format(row.count)}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-}
diff --git a/src/ui/dashboard-section.tsx b/src/ui/dashboard-section.tsx
deleted file mode 100644
index 95d8868f..00000000
--- a/src/ui/dashboard-section.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { ReactNode } from "react";
-
-import { cn } from "../lib/utils.js";
-
-export type DashboardSectionVariant = "plain" | "highlighted";
-
-export type DashboardSectionProps = {
-  /** Section heading, set in the dashboard caption style. */
-  readonly title: ReactNode;
-  /** Optional supporting copy under the title. */
-  readonly description?: ReactNode;
-  /** Optional header controls (filters, links) aligned to the title row. */
-  readonly action?: ReactNode;
-  /**
-   * `highlighted` adds a bordered gradient shell — the KPI band treatment.
-   * `plain` is the default section stack.
-   */
-  readonly variant?: DashboardSectionVariant;
-  readonly children: ReactNode;
-  readonly className?: string;
-};
-
-/**
- * A dashboard's section shell: caption title, optional description and
- * controls, and one vertical rhythm for the blocks beneath.
- *
- * It is not `Section` — that is the document-outline block with real heading
- * sizes. A dashboard's sections are captions over dense panels: small,
- * uppercase, letterspaced, so the numbers stay the loudest thing on screen.
- */
-export function DashboardSection({
-  title,
-  description,
-  action,
-  variant = "plain",
-  children,
-  className,
-}: DashboardSectionProps) {
-  const shell =
-    variant === "highlighted"
-      ? "rounded-[16px] border border-border bg-gradient-to-b from-muted to-card p-4 max-md:p-3"
-      : "";
-
-  return (
-    <section data-slot="dashboard-section" data-variant={variant} className={cn("flex flex-col gap-4", shell, className)}>
-      <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
-        <div className="flex min-w-0 flex-col gap-1">
-          <h2 className="text-[11px] font-semibold tracking-[0.14em] uppercase text-muted-foreground">{title}</h2>
-          {description === undefined ? null : (
-            <p className="text-[13px] leading-snug text-muted-foreground">{description}</p>
-          )}
-        </div>
-        {action === undefined ? null : <div className="flex shrink-0 items-center gap-2">{action}</div>}
-      </div>
-      {children}
-    </section>
-  );
-}
diff --git a/src/ui/dashboard.tsx b/src/ui/dashboard.tsx
deleted file mode 100644
index 097709bb..00000000
--- a/src/ui/dashboard.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import type { ReactNode } from "react";
-
-import { cn } from "../lib/utils.js";
-import { Skeleton } from "./skeleton.js";
-
-export type DashboardProps = {
-  readonly title: string;
-  readonly description?: string;
-  /** Page-level actions — export, refresh. Sits beside the title. */
-  readonly actions?: ReactNode;
-  /**
-   * Controls that apply to every panel below: a `TimeRangeControl`, a
-   * `FilterBar`. They live above the tabs, not inside a panel, because the
-   * window a dashboard is looking at should survive switching between views of
-   * it — a time range that resets when you change tab is a time range you set
-   * five times.
-   */
-  readonly controls?: ReactNode;
-  /** The tab set, when there is one — usually a `<Tabs>`. */
-  readonly children: ReactNode;
-  readonly className?: string;
-};
-
-/**
- * The frame a dashboard's panels hang off: a header that names the view, one
- * band of controls that govern all of it, and the body.
- *
- * It draws almost nothing, on purpose. What it actually contributes is the
- * *arrangement* — title, then scope, then content — and the guarantee that
- * scope is declared once above everything it scopes. Dashboards that grow
- * per-panel date pickers end up showing four panels of four different weeks
- * beside each other, which is worse than showing nothing.
- *
- * The body is a slot rather than a tabs prop. A dashboard with one view has no
- * business rendering a one-tab tablist, and one with five composes `<Tabs>`
- * here — the shell should not care which.
- */
-export function Dashboard({ title, description, actions, controls, children, className }: DashboardProps) {
-  return (
-    <div className={cn("flex flex-col gap-6", className)}>
-      <header className="flex flex-col gap-3">
-        <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
-          <div className="flex min-w-0 flex-col gap-1">
-            <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
-            {description === undefined ? null : (
-              <p className="text-sm leading-snug text-muted-foreground">{description}</p>
-            )}
-          </div>
-          {actions === undefined ? null : <div className="flex shrink-0 items-center gap-2">{actions}</div>}
-        </div>
-        {controls === undefined ? null : controls}
-      </header>
-      {children}
-    </div>
-  );
-}
-
-/**
- * The dashboard's loading state, shaped like the dashboard.
- *
- * A skeleton whose geometry does not match what replaces it is worse than a
- * spinner: the page settles, then jumps, and the reader loses whatever they had
- * started reading. So this mirrors the real arrangement — a KPI row of tiles
- * over a two-up panel grid — rather than being a generic stack of bars.
- *
- * The `role="status"` line is the whole accessibility story here. `Skeleton` is
- * `aria-hidden` by design, so without this a screen reader is told nothing at
- * all while the page loads.
- */
-export function DashboardSkeleton({ className }: { readonly className?: string }) {
-  return (
-    <div className={cn("flex flex-col gap-6", className)}>
-      <p role="status" className="text-sm text-muted-foreground">
-        Loading…
-      </p>
-      <div className="grid grid-cols-[repeat(auto-fit,minmax(11rem,1fr))] gap-3">
-        {[0, 1, 2, 3].map((index) => (
-          <Skeleton key={index} className="h-24" />
-        ))}
-      </div>
-      <div className="grid gap-4 lg:grid-cols-2">
-        {[0, 1].map((index) => (
-          <Skeleton key={index} className="h-56" />
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/src/ui/data-table.tsx b/src/ui/data-table.tsx
deleted file mode 100644
index 6c630db2..00000000
--- a/src/ui/data-table.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import type * as React from "react";
-import type { ReactNode } from "react";
-
-import { useCollectionState } from "../hooks/use-collection-state.js";
-import type { CollectionRequest } from "../lib/data-port.js";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
-
-export type Column<T> = {
-  readonly header: string;
-  readonly cell: (row: T) => ReactNode;
-};
-
-export type DataTableProps<T> = {
-  readonly caption: string;
-  readonly request: CollectionRequest<T>;
-  readonly columns: readonly Column<T>[];
-  readonly rowKey: (row: T) => string;
-  readonly empty?: ReactNode;
-  /**
-   * Row activation — a detail view, an inspector. Rows become focusable and
-   * keyboard-activatable (Enter and Space), so the pointer is never the only
-   * way in. Keep per-cell interactive elements out of clickable rows: a link
-   * inside a button-role row is two targets in one hit area.
-   */
-  readonly onRowClick?: (row: T) => void;
-};
-
-/** A table fed by whatever DataPort is in scope — the port is the only data seam. */
-export function DataTable<T>({ caption, request, columns, rowKey, empty, onRowClick }: DataTableProps<T>) {
-  const { state, isFetching } = useCollectionState(request);
-
-  const body = (): ReactNode => {
-    if (state.status === "loading") return <Status colSpan={columns.length}>Loading…</Status>;
-    if (state.status === "error") return <Status colSpan={columns.length}>{state.error.message}</Status>;
-    if (state.status === "empty") return <Status colSpan={columns.length}>{empty ?? "Nothing here yet."}</Status>;
-    return state.items.map((row) => (
-      <TableRow
-        key={rowKey(row)}
-        {...(onRowClick === undefined
-          ? {}
-          : {
-              role: "button" as const,
-              tabIndex: 0,
-              className: "cursor-pointer",
-              onClick: () => onRowClick(row),
-              onKeyDown: (event: React.KeyboardEvent<HTMLTableRowElement>) => {
-                if (event.key === "Enter" || event.key === " ") {
-                  event.preventDefault();
-                  onRowClick(row);
-                }
-              },
-            })}
-      >
-        {columns.map((column) => (
-          <TableCell key={column.header}>{column.cell(row)}</TableCell>
-        ))}
-      </TableRow>
-    ));
-  };
-
-  return (
-    // isFetching, not isLoading: a refetch over cached rows is still busy.
-    <Table aria-label={caption} aria-busy={isFetching}>
-      <TableHeader>
-        <TableRow>
-          {columns.map((column) => (
-            <TableHead key={column.header} scope="col">
-              {column.header}
-            </TableHead>
-          ))}
-        </TableRow>
-      </TableHeader>
-      <TableBody>{body()}</TableBody>
-    </Table>
-  );
-}
-
-function Status({ colSpan, children }: { colSpan: number; children: ReactNode }) {
-  return (
-    <TableRow>
-      <TableCell colSpan={colSpan} className="text-muted-foreground">
-        {children}
-      </TableCell>
-    </TableRow>
-  );
-}
diff --git a/src/ui/delta-badge.tsx b/src/ui/delta-badge.tsx
deleted file mode 100644
index 1755f6f6..00000000
--- a/src/ui/delta-badge.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { DeltaResult } from "../lib/metrics.js";
-import { cn } from "../lib/utils.js";
-
-export type DeltaBadgeProps = {
-  /** From `computeDelta`. Renders nothing when there is no comparison window. */
-  readonly delta: DeltaResult;
-  /**
-   * Whether an increase is a good thing. Error rate and cost say `false`;
-   * throughput says `true`. Required because the mapping from direction to
-   * sentiment is a property of the metric — defaulting it paints a rising
-   * error rate as improvement.
-   */
-  readonly upIsGood: boolean;
-  readonly className?: string;
-};
-
-/**
- * The period-over-period chip beside a stat's headline number.
- *
- * Renders nothing when the delta is not comparable: a flat "0%" over a range
- * with no previous window would read as stability that was never measured.
- * When the percentage has no baseline (previous period was zero) it shows the
- * absolute delta instead of a misleading "∞%". Sentiment is carried by tone
- * *and* by words — the `aria-label` says the direction and whether that is
- * better or worse, so the colour is never the only channel.
- */
-export function DeltaBadge({ delta, upIsGood, className }: DeltaBadgeProps) {
-  if (!delta.comparable) {
-    return null;
-  }
-  if (delta.direction === "flat") {
-    return (
-      <span
-        className={cn("font-mono text-[11px] tracking-[0.04em] text-muted-foreground tabular-nums", className)}
-        aria-label="no change vs previous period"
-      >
-        0%
-      </span>
-    );
-  }
-  const up = delta.direction === "up";
-  const good = up === upIsGood;
-  const text =
-    delta.pct !== null ? `${Math.abs(delta.pct).toFixed(0)}%` : `${delta.delta > 0 ? "+" : ""}${delta.delta}`;
-  return (
-    <span
-      className={cn(
-        "flex items-center gap-1 font-mono text-[11px] tracking-[0.04em] tabular-nums",
-        good ? "text-primary-emphasis" : "text-destructive",
-        className,
-      )}
-      aria-label={`${up ? "up" : "down"} ${text} vs previous period, ${good ? "better" : "worse"}`}
-    >
-      <span aria-hidden>{up ? "▲" : "▼"}</span>
-      {text}
-    </span>
-  );
-}
diff --git a/src/ui/dial.tsx b/src/ui/dial.tsx
deleted file mode 100644
index 23d21b7c..00000000
--- a/src/ui/dial.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useId } from "react";
-
-import { cn } from "../lib/utils.js";
-
-export type DialProps = {
-  readonly label: string;
-  readonly value: number;
-  readonly onValueChange: (value: number) => void;
-  readonly min: number;
-  readonly max: number;
-  readonly step?: number;
-  /** What the number means, and what moving it costs. */
-  readonly description?: string;
-  /**
-   * Words for the current value — "Focused", "Creative". Shown beside the
-   * number and used as `aria-valuetext`, because "0.7" tells a screen-reader
-   * user nothing that "0.7, balanced" does not tell them better.
-   */
-  readonly valueText?: string;
-  readonly disabled?: boolean;
-  readonly className?: string;
-};
-
-/**
- * A continuous setting — temperature, a token budget, a threshold.
- *
- * A native `range` input, not a custom track: it already has full keyboard
- * support (arrows, Page Up/Down, Home/End), works with a screen reader, and is
- * draggable on touch. Every hand-built slider re-implements some of that and
- * misses the rest.
- *
- * The current value is always visible. A slider whose value you can only learn
- * by dragging it is a slider you cannot check.
- */
-export function Dial({
-  label,
-  value,
-  onValueChange,
-  min,
-  max,
-  step = 1,
-  description,
-  valueText,
-  disabled = false,
-  className,
-}: DialProps) {
-  const id = useId();
-  const descriptionId = description === undefined ? undefined : `${id}-description`;
-
-  return (
-    <div className={cn("flex flex-col gap-1.5", className)}>
-      <div className="flex items-baseline justify-between gap-2">
-        <label htmlFor={id} className="text-sm font-medium">
-          {label}
-        </label>
-        <span className="font-mono text-xs text-muted-foreground tabular-nums">
-          {value}
-          {valueText === undefined ? null : ` · ${valueText}`}
-        </span>
-      </div>
-
-      <input
-        id={id}
-        type="range"
-        min={min}
-        max={max}
-        step={step}
-        value={value}
-        disabled={disabled}
-        aria-describedby={descriptionId}
-        aria-valuetext={valueText}
-        onChange={(event) => onValueChange(event.target.valueAsNumber)}
-        className="h-5 w-full accent-[var(--primary)] disabled:opacity-50"
-      />
-
-      {description === undefined ? null : (
-        <p id={descriptionId} className="text-xs leading-relaxed text-muted-foreground">
-          {description}
-        </p>
-      )}
-    </div>
-  );
-}
diff --git a/src/ui/dither-background.test.tsx b/src/ui/dither-background.test.tsx
deleted file mode 100644
index 89dc9b14..00000000
--- a/src/ui/dither-background.test.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { afterEach, beforeEach, describe, expect, test } from "bun:test";
-
-import { DitherBackground } from "./dither-background.js";
-
-type Mounted = {
-  container: HTMLElement;
-  unmount: () => void;
-};
-
-function render(node: React.ReactElement): Mounted {
-  const container = document.createElement("div");
-  document.body.appendChild(container);
-  let root!: Root;
-  act(() => {
-    root = createRoot(container);
-    root.render(node);
-  });
-  return {
-    container,
-    unmount: () => {
-      act(() => root.unmount());
-      container.remove();
-    },
-  };
-}
-
-function fakeContext() {
-  return {
-    clearRect: () => {},
-    drawImage: () => {},
-    fillRect: () => {},
-    createImageData: (width: number, height: number) => ({ data: new Uint8ClampedArray(width * height * 4) }),
-    getImageData: (_x: number, _y: number, width: number, height: number) => ({
-      data: new Uint8ClampedArray(width * height * 4),
-    }),
-    putImageData: () => {},
-  };
-}
-
-class FakeImage {
-  naturalWidth = 10;
-  naturalHeight = 10;
-  onload: (() => void) | null = null;
-  private currentSrc = "";
-  set src(value: string) {
-    this.currentSrc = value;
-    if (value !== "") this.onload?.();
-  }
-  get src() {
-    return this.currentSrc;
-  }
-}
-
-class FakeIntersectionObserver {
-  static instances: FakeIntersectionObserver[] = [];
-  callback: IntersectionObserverCallback;
-  constructor(callback: IntersectionObserverCallback) {
-    this.callback = callback;
-    FakeIntersectionObserver.instances.push(this);
-  }
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
-
-function setHidden(value: boolean) {
-  Object.defineProperty(document, "hidden", { value, configurable: true });
-}
-
-let originalGetContext: typeof HTMLCanvasElement.prototype.getContext;
-let originalImage: typeof Image;
-let originalIntersectionObserver: typeof IntersectionObserver;
-let originalRAF: typeof requestAnimationFrame;
-let originalCAF: typeof cancelAnimationFrame;
-let pendingFrames: Map<number, FrameRequestCallback>;
-let nextFrameId: number;
-
-beforeEach(() => {
-  originalGetContext = HTMLCanvasElement.prototype.getContext;
-  HTMLCanvasElement.prototype.getContext = function fakeGetContext(this: HTMLCanvasElement, type: string) {
-    if (type === "2d") return fakeContext() as unknown as CanvasRenderingContext2D;
-    return null;
-  } as typeof HTMLCanvasElement.prototype.getContext;
-
-  originalImage = globalThis.Image;
-  globalThis.Image = FakeImage as unknown as typeof Image;
-
-  originalIntersectionObserver = globalThis.IntersectionObserver;
-  FakeIntersectionObserver.instances = [];
-  globalThis.IntersectionObserver = FakeIntersectionObserver as unknown as typeof IntersectionObserver;
-
-  originalRAF = globalThis.requestAnimationFrame;
-  originalCAF = globalThis.cancelAnimationFrame;
-  pendingFrames = new Map();
-  nextFrameId = 1;
-  globalThis.requestAnimationFrame = ((callback: FrameRequestCallback) => {
-    const id = nextFrameId;
-    nextFrameId += 1;
-    pendingFrames.set(id, callback);
-    return id;
-  }) as typeof requestAnimationFrame;
-  globalThis.cancelAnimationFrame = ((id: number) => {
-    pendingFrames.delete(id);
-  }) as typeof cancelAnimationFrame;
-
-  setHidden(false);
-});
-
-afterEach(() => {
-  HTMLCanvasElement.prototype.getContext = originalGetContext;
-  globalThis.Image = originalImage;
-  globalThis.IntersectionObserver = originalIntersectionObserver;
-  globalThis.requestAnimationFrame = originalRAF;
-  globalThis.cancelAnimationFrame = originalCAF;
-  setHidden(false);
-});
-
-describe("DitherBackground", () => {
-  test("is aria-hidden unconditionally", () => {
-    const mounted = render(<DitherBackground src="https://picsum.photos/seed/dither/800/600" />);
-    const canvas = mounted.container.querySelector("canvas");
-    expect(canvas?.getAttribute("aria-hidden")).toBe("true");
-    mounted.unmount();
-  });
-
-  test("reduced motion skips the animation loop and reacts to a live change event", () => {
-    let reduce = true;
-    let changeListener: (() => void) | null = null;
-    const originalMatchMedia = window.matchMedia;
-    window.matchMedia = ((query: string) => ({
-      get matches() {
-        return query.includes("reduce") ? reduce : false;
-      },
-      media: query,
-      addEventListener: (_type: string, listener: () => void) => {
-        changeListener = listener;
-      },
-      removeEventListener: () => {},
-    })) as unknown as typeof window.matchMedia;
-
-    const mounted = render(<DitherBackground src="https://picsum.photos/seed/dither/800/600" />);
-
-    // The image "loaded" synchronously (FakeImage), rendered one static frame,
-    // and must not have scheduled an animation loop while reduced motion holds.
-    expect(pendingFrames.size).toBe(0);
-
-    reduce = false;
-    act(() => {
-      changeListener?.();
-    });
-    expect(pendingFrames.size).toBe(1);
-
-    window.matchMedia = originalMatchMedia;
-    mounted.unmount();
-  });
-
-  test("pauses the loop when the tab becomes hidden and resumes when visible again", () => {
-    const mounted = render(<DitherBackground src="https://picsum.photos/seed/dither/800/600" />);
-    expect(pendingFrames.size).toBe(1);
-
-    act(() => {
-      setHidden(true);
-      document.dispatchEvent(new Event("visibilitychange"));
-    });
-    expect(pendingFrames.size).toBe(0);
-
-    act(() => {
-      setHidden(false);
-      document.dispatchEvent(new Event("visibilitychange"));
-    });
-    expect(pendingFrames.size).toBe(1);
-
-    mounted.unmount();
-  });
-
-  test("skips the pointermove listener entirely when warp is disabled", () => {
-    const addSpy = window.addEventListener.bind(window) as typeof window.addEventListener;
-    const calls: string[] = [];
-    window.addEventListener = ((type: string, ...rest: unknown[]) => {
-      calls.push(type);
-      return (addSpy as (...args: unknown[]) => void)(type, ...rest);
-    }) as typeof window.addEventListener;
-
-    const mounted = render(<DitherBackground src="https://picsum.photos/seed/dither/800/600" warp={false} />);
-    expect(calls).not.toContain("pointermove");
-
-    window.addEventListener = addSpy;
-    mounted.unmount();
-  });
-
-  test("pauses the loop when IntersectionObserver reports the canvas offscreen", () => {
-    const mounted = render(<DitherBackground src="https://picsum.photos/seed/dither/800/600" />);
-    expect(pendingFrames.size).toBe(1);
-
-    const observer = FakeIntersectionObserver.instances.at(-1);
-    act(() => {
-      observer?.callback([{ isIntersecting: false } as IntersectionObserverEntry], observer as unknown as IntersectionObserver);
-    });
-    expect(pendingFrames.size).toBe(0);
-
-    act(() => {
-      observer?.callback([{ isIntersecting: true } as IntersectionObserverEntry], observer as unknown as IntersectionObserver);
-    });
-    expect(pendingFrames.size).toBe(1);
-
-    mounted.unmount();
-  });
-});
diff --git a/src/ui/dither-background.tsx b/src/ui/dither-background.tsx
deleted file mode 100644
index 023c5d4a..00000000
--- a/src/ui/dither-background.tsx
+++ /dev/null
@@ -1,281 +0,0 @@
-import { useEffect, useRef } from "react";
-
-import { cn } from "../lib/utils.js";
-
-/**
- * 8×8 Bayer matrix. Twice the resolution of `DitherCanvas`'s 4×4: a
- * photographic source needs a finer threshold grid than a generated field to
- * avoid banding across broad tonal regions.
- */
-// prettier-ignore
-const BAYER = [
-   0, 32,  8, 40,  2, 34, 10, 42,
-  48, 16, 56, 24, 50, 18, 58, 26,
-  12, 44,  4, 36, 14, 46,  6, 38,
-  60, 28, 52, 20, 62, 30, 54, 22,
-   3, 35, 11, 43,  1, 33,  9, 41,
-  51, 19, 59, 27, 49, 17, 57, 25,
-  15, 47,  7, 39, 13, 45,  5, 37,
-  63, 31, 55, 23, 61, 29, 53, 21,
-];
-const BAYER_DIM = 8;
-const BAYER_DIVISOR = BAYER_DIM * BAYER_DIM;
-const FRAME_MS = 1000 / 30;
-const MOUSE_FALLOFF = 18;
-const MOUSE_LERP = 0.1;
-const STRENGTH_LERP = 0.08;
-
-export type DitherBackgroundProps = {
-  /** URL of the source image to dither. */
-  readonly src: string;
-  /** Edge of one dither cell, in device pixels once upscaled. */
-  readonly cell?: number;
-  /** Quantization levels per channel. */
-  readonly levels?: number;
-  /**
-   * Ambient sine-warp amplitude, in source pixels. `0` or `false` disables
-   * the warp (and the cursor displacement with it) entirely, leaving a
-   * static dithered image.
-   */
-  readonly warp?: number | false;
-  readonly className?: string;
-};
-
-/**
- * An image-sourced sibling of `DitherCanvas`: instead of a generated field,
- * a source image is drawn to an offscreen buffer, ordered-dithered with an
- * 8×8 Bayer matrix, and redrawn each frame with a slow ambient sine warp plus
- * a cursor-driven displacement.
- *
- * The `requestAnimationFrame` callback still fires at the display's native
- * rate; only the paint work inside it is gated to ~30fps by timestamp delta,
- * so a 120Hz display doesn't triple the redraw cost for no visual gain. The
- * loop is paused while the canvas is offscreen (`IntersectionObserver`) or
- * the tab is hidden (`visibilitychange`), and
- * reacts live to `prefers-reduced-motion` — a `MediaQueryList` `change`
- * listener, not a value read once at mount — by dropping to a single static
- * frame with the warp disabled.
- *
- * `aria-hidden`, unconditionally: it is decorative, and anything a reader
- * needs is in the content laid over it.
- */
-export function DitherBackground({ src, cell = 4, levels = 4, warp = 1.6, className }: DitherBackgroundProps) {
-  const ref = useRef<HTMLCanvasElement>(null);
-
-  useEffect(() => {
-    const canvas = ref.current;
-    if (canvas === null) return;
-    const context = canvas.getContext("2d");
-    if (context === null) return;
-
-    const working = document.createElement("canvas");
-    const workingContext = working.getContext("2d");
-    if (workingContext === null) return;
-
-    let disposed = false;
-    let width = 1;
-    let height = 1;
-    let sourcePixels: Uint8ClampedArray | null = null;
-    let dest: ImageData | null = null;
-    let imageLoaded = false;
-    let sinU = new Float32Array(1);
-    let sinU2 = new Float32Array(1);
-    let sinV = new Float32Array(1);
-    let sinV2 = new Float32Array(1);
-
-    const image = new Image();
-
-    const resample = () => {
-      if (!imageLoaded) return;
-      working.width = width;
-      working.height = height;
-      const imageRatio = image.naturalWidth / image.naturalHeight;
-      const canvasRatio = width / height;
-      let drawWidth = width;
-      let drawHeight = height;
-      if (canvasRatio > imageRatio) {
-        drawHeight = width / imageRatio;
-      } else {
-        drawWidth = height * imageRatio;
-      }
-      workingContext.clearRect(0, 0, width, height);
-      workingContext.drawImage(image, (width - drawWidth) / 2, (height - drawHeight) / 2, drawWidth, drawHeight);
-      sourcePixels = workingContext.getImageData(0, 0, width, height).data;
-      dest = context.createImageData(width, height);
-    };
-
-    const resize = () => {
-      width = Math.max(1, Math.round(canvas.clientWidth / cell));
-      height = Math.max(1, Math.round(canvas.clientHeight / cell));
-      canvas.width = width;
-      canvas.height = height;
-      sinU = new Float32Array(width);
-      sinU2 = new Float32Array(width);
-      sinV = new Float32Array(height);
-      sinV2 = new Float32Array(height);
-      resample();
-    };
-    const resizeObserver = new ResizeObserver(resize);
-    resizeObserver.observe(canvas);
-    resize();
-
-    let mouseX = 0.5;
-    let mouseY = 0.5;
-    let targetMouseX = 0.5;
-    let targetMouseY = 0.5;
-    let mouseStrength = 0;
-    let targetStrength = 0;
-    const onPointerMove = (event: PointerEvent) => {
-      const box = canvas.getBoundingClientRect();
-      if (box.width === 0 || box.height === 0) return;
-      targetMouseX = (event.clientX - box.left) / box.width;
-      targetMouseY = (event.clientY - box.top) / box.height;
-      const inside = targetMouseX > -0.1 && targetMouseX < 1.1 && targetMouseY > -0.1 && targetMouseY < 1.1;
-      targetStrength = inside ? 1 : 0;
-    };
-    // Disabled warp means the cursor displacement it drives is unused too —
-    // skip the listener rather than paying a getBoundingClientRect per event
-    // for a feature that's off.
-    if (warp !== false) window.addEventListener("pointermove", onPointerMove, { passive: true });
-
-    const reduceQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    let reduce = reduceQuery.matches;
-
-    const render = (time: number) => {
-      if (sourcePixels === null || dest === null) return;
-      const data = dest.data;
-      const aspect = width / height;
-      const amplitude = reduce || warp === false ? 0 : warp;
-      for (let x = 0; x < width; x += 1) {
-        const u = x / width;
-        sinU[x] = Math.sin(u * 6.2 + time * 0.6);
-        sinU2[x] = Math.sin(u * 9.1 + time * 0.27);
-      }
-      for (let y = 0; y < height; y += 1) {
-        const v = y / height;
-        sinV[y] = Math.sin(v * 5.3 - time * 0.5);
-        sinV2[y] = Math.sin(v * 8.4 + time * 0.4);
-      }
-      const useMouse = amplitude > 0 && mouseStrength > 0.01;
-      for (let y = 0; y < height; y += 1) {
-        const v = y / height;
-        const rowBayer = (y % BAYER_DIM) * BAYER_DIM;
-        const svy = sinV[y] ?? 0;
-        const sv2y = sinV2[y] ?? 0;
-        for (let x = 0; x < width; x += 1) {
-          let warpX = ((sinU[x] ?? 0) + sv2y) * amplitude;
-          let warpY = (svy + (sinU2[x] ?? 0)) * amplitude;
-          if (useMouse) {
-            const dx = x / width - mouseX;
-            const dy = v - mouseY;
-            const distance = Math.sqrt(dx * dx * aspect * aspect + dy * dy);
-            const influence = Math.exp(-distance * distance * MOUSE_FALLOFF) * mouseStrength;
-            const inverse = 1 / (distance + 1e-4);
-            warpX += dx * inverse * influence * amplitude * 3;
-            warpY += dy * inverse * influence * amplitude * 3;
-          }
-          let sourceX = x + Math.round(warpX);
-          let sourceY = y + Math.round(warpY);
-          if (sourceX < 0) sourceX = 0;
-          else if (sourceX >= width) sourceX = width - 1;
-          if (sourceY < 0) sourceY = 0;
-          else if (sourceY >= height) sourceY = height - 1;
-          const sourceIndex = (sourceY * width + sourceX) * 4;
-          const destIndex = (y * width + x) * 4;
-          const threshold = ((BAYER[rowBayer + (x % BAYER_DIM)] ?? 0) + 0.5) / BAYER_DIVISOR;
-          for (let channel = 0; channel < 3; channel += 1) {
-            const quantized = Math.floor(((sourcePixels[sourceIndex + channel] ?? 0) / 255) * (levels - 1) + threshold);
-            data[destIndex + channel] = (quantized / (levels - 1)) * 255;
-          }
-          data[destIndex + 3] = 255;
-        }
-      }
-      context.putImageData(dest, 0, 0);
-    };
-
-    let visible = true;
-    const running = () => !disposed && !reduce && visible && !document.hidden;
-
-    let frame = 0;
-    let lastDraw = 0;
-    const start = performance.now();
-    const loop = (now: number) => {
-      frame = 0;
-      if (!running()) return;
-      if (now - lastDraw >= FRAME_MS) {
-        lastDraw = now;
-        mouseX += (targetMouseX - mouseX) * MOUSE_LERP;
-        mouseY += (targetMouseY - mouseY) * MOUSE_LERP;
-        mouseStrength += (targetStrength - mouseStrength) * STRENGTH_LERP;
-        render((now - start) / 1000);
-      }
-      schedule();
-    };
-    const schedule = () => {
-      if (frame !== 0 || !running()) return;
-      frame = requestAnimationFrame(loop);
-    };
-    const stop = () => {
-      if (frame === 0) return;
-      cancelAnimationFrame(frame);
-      frame = 0;
-    };
-
-    const intersectionObserver = new IntersectionObserver(
-      (entries) => {
-        visible = entries[0]?.isIntersecting ?? true;
-        if (visible) schedule();
-        else stop();
-      },
-      { threshold: 0 },
-    );
-    intersectionObserver.observe(canvas);
-
-    const onVisibilityChange = () => {
-      if (document.hidden) stop();
-      else schedule();
-    };
-    document.addEventListener("visibilitychange", onVisibilityChange);
-
-    const onReduceChange = () => {
-      reduce = reduceQuery.matches;
-      if (reduce) {
-        stop();
-        render(0);
-      } else {
-        schedule();
-      }
-    };
-    reduceQuery.addEventListener("change", onReduceChange);
-
-    image.onload = () => {
-      if (disposed) return;
-      imageLoaded = true;
-      resample();
-      render(0);
-      schedule();
-    };
-    image.src = src;
-
-    return () => {
-      disposed = true;
-      stop();
-      image.onload = null;
-      image.src = "";
-      resizeObserver.disconnect();
-      intersectionObserver.disconnect();
-      reduceQuery.removeEventListener("change", onReduceChange);
-      document.removeEventListener("visibilitychange", onVisibilityChange);
-      if (warp !== false) window.removeEventListener("pointermove", onPointerMove);
-    };
-  }, [src, cell, levels, warp]);
-
-  return (
-    <canvas
-      ref={ref}
-      aria-hidden
-      className={cn("block size-full", className)}
-      style={{ imageRendering: "pixelated" }}
-    />
-  );
-}
diff --git a/src/ui/failed-run-notice.tsx b/src/ui/failed-run-notice.tsx
deleted file mode 100644
index 20029595..00000000
--- a/src/ui/failed-run-notice.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { classifyRunError } from "../lib/workflow-run-error.js";
-import { cn } from "../lib/utils.js";
-
-const NO_ERROR_DETAILS = "No error details are available. Start a new run to try again.";
-const NEVER_STARTED_DETAILS = "This run couldn't be started. Start a new run to try again.";
-const LOG_UNAVAILABLE_DETAILS = "We couldn't load this run's details. Refresh to try again, or start a new run.";
-
-export type FailedRunNoticeProps = {
-  /** The failed display step's name, or `null` when no step names the failure. */
-  readonly failedStepLabel?: string | null;
-  /** True for a genuine never-started run — see `runNeverStarted` in
-   * `workflow-run-progress.ts` for the exact rule. */
-  readonly neverStarted?: boolean;
-  /** True when the run's own step log could not be read at all. */
-  readonly logUnavailable?: boolean;
-  /** The step's raw error text, sanitized here before render. Omit when no
-   * step carries one — the fallback copy explains why none is shown. */
-  readonly rawErrorMessage?: string | null;
-  readonly className?: string;
-};
-
-/**
- * The one failed-run notice a workflow surface renders: which step failed,
- * plus a sanitized message — never the step's raw error text, which can
- * carry internal identifiers. Falls back to an honest no-details line when
- * nothing more specific is known.
- */
-export function FailedRunNotice({
-  failedStepLabel = null,
-  neverStarted = false,
-  logUnavailable = false,
-  rawErrorMessage = null,
-  className,
-}: FailedRunNoticeProps) {
-  let heading: string;
-  if (neverStarted) {
-    heading = "This run didn't start";
-  } else if (failedStepLabel === null) {
-    heading = "Run failed";
-  } else {
-    heading = `Run failed at ${failedStepLabel}`;
-  }
-
-  let fallbackDetails: string;
-  if (neverStarted) {
-    fallbackDetails = NEVER_STARTED_DETAILS;
-  } else if (logUnavailable) {
-    fallbackDetails = LOG_UNAVAILABLE_DETAILS;
-  } else {
-    fallbackDetails = NO_ERROR_DETAILS;
-  }
-
-  const message = rawErrorMessage === null ? fallbackDetails : classifyRunError(rawErrorMessage).userMessage;
-
-  return (
-    <div role="alert" className={cn("rounded-lg border border-destructive/40 bg-destructive/10 p-4", className)}>
-      <p className="text-sm font-medium text-destructive">{heading}</p>
-      <p className="mt-1 text-sm text-destructive">{message}</p>
-    </div>
-  );
-}
diff --git a/src/ui/generative-block-view.tsx b/src/ui/generative-block-view.tsx
deleted file mode 100644
index 00f7b8ff..00000000
--- a/src/ui/generative-block-view.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import type { CalloutTone, GenerativeBlock } from "../lib/generative-block.js";
-import { cn } from "../lib/utils.js";
-import { Badge, type BadgeTone } from "./badge.js";
-import { Sparkline } from "./sparkline.js";
-import { StatGrid, StatGridItem, type StatGridColumns } from "./stat-grid.js";
-import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
-
-function kpiColumns(count: number): StatGridColumns {
-  if (count >= 4) return 4;
-  if (count === 3) return 3;
-  return 2;
-}
-
-const CALLOUT_TONE: Record<CalloutTone, BadgeTone> = {
-  neutral: "neutral",
-  accent: "accent",
-  info: "info",
-  success: "success",
-  danger: "danger",
-};
-
-function BlockTitle({ children }: { children: string }) {
-  return <h3 className="text-xs font-semibold tracking-[0.08em] text-muted-foreground uppercase">{children}</h3>;
-}
-
-/**
- * Renders one `GenerativeBlock` by composing this library's own primitives —
- * `StatGrid` for `kpis`, the `Table` family for `table`, `Sparkline` for
- * `spark`, `Badge` for `callout` — rather than a bespoke chart or table for
- * generative content. The same function draws a block inline in the
- * transcript and, for the active one, again inside `RenderRail`: one renderer,
- * two places it can appear.
- */
-export function GenerativeBlockView({ block, className }: { block: GenerativeBlock; className?: string }) {
-  if (block.type === "kpis") {
-    return (
-      <div className={cn("flex flex-col gap-2", className)}>
-        {block.title === undefined ? null : <BlockTitle>{block.title}</BlockTitle>}
-        <StatGrid columns={kpiColumns(block.items.length)}>
-          {block.items.map((item) => (
-            <StatGridItem
-              key={item.label}
-              label={item.label}
-              value={item.value}
-              sub={item.sub}
-              danger={item.danger}
-              delta={
-                item.delta === undefined ? undefined : (
-                  <span className="font-mono text-[11px] tracking-[0.04em] text-primary-emphasis tabular-nums">
-                    {item.delta}
-                  </span>
-                )
-              }
-            />
-          ))}
-        </StatGrid>
-      </div>
-    );
-  }
-
-  if (block.type === "table") {
-    return (
-      <div className={cn("flex flex-col gap-2", className)}>
-        {block.title === undefined ? null : <BlockTitle>{block.title}</BlockTitle>}
-        <Table aria-label={block.caption}>
-          <TableCaption className="sr-only">{block.caption}</TableCaption>
-          <TableHeader>
-            <TableRow>
-              {block.columns.map((column) => (
-                <TableHead key={column} scope="col">
-                  {column}
-                </TableHead>
-              ))}
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {block.rows.map((row) => (
-              <TableRow key={row.join("\u0000")}>
-                {row.map((cell, cellIndex) => (
-                  <TableCell key={`${cellIndex}-${cell}`}>{cell}</TableCell>
-                ))}
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
-    );
-  }
-
-  if (block.type === "spark") {
-    return (
-      <div className={cn("flex flex-col gap-2", className)}>
-        {block.title === undefined ? null : <BlockTitle>{block.title}</BlockTitle>}
-        <Sparkline values={block.values} summary={block.label} className="h-10 w-full" />
-      </div>
-    );
-  }
-
-  if (block.type === "callout") {
-    return (
-      <div
-        className={cn(
-          "flex flex-col gap-1.5 rounded-[12px] border border-border bg-card p-4",
-          className,
-        )}
-      >
-        <div className="flex items-center gap-2">
-          <Badge tone={CALLOUT_TONE[block.tone ?? "neutral"]}>{block.tone ?? "note"}</Badge>
-          <span className="text-sm font-semibold">{block.title}</span>
-        </div>
-        {block.body === undefined ? null : <p className="text-sm text-muted-foreground">{block.body}</p>}
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn("flex flex-col gap-2", className)}>
-      {block.title === undefined ? null : <BlockTitle>{block.title}</BlockTitle>}
-      <div className="flex flex-col gap-2 text-sm leading-relaxed">
-        {block.text.split(/\n{2,}/).map((paragraph) => (
-          <p key={paragraph}>{paragraph}</p>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/src/ui/heatmap.tsx b/src/ui/heatmap.tsx
deleted file mode 100644
index 21a1bbc4..00000000
--- a/src/ui/heatmap.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { seriesColor } from "../lib/chart-palette.js";
-import { cn } from "../lib/utils.js";
-
-export type HeatmapDay = {
-  /** UTC calendar date, `YYYY-MM-DD`. Also the React key. */
-  readonly date: string;
-  readonly value: number;
-};
-
-export type HeatmapProps = {
-  readonly days: readonly HeatmapDay[];
-  /** What a cell counts — "Runs per day". Read with the computed summary. */
-  readonly label: string;
-  readonly className?: string;
-};
-
-/**
- * A calendar strip of intensity cells — the "how often" picture beside charts
- * that say "how much".
- *
- * Intensity is the first series colour at graded opacity, never a second hue:
- * a sequential scale that changes hue mid-ramp reads as categories. Zero days
- * keep the muted fill with a border, so "nothing happened" stays visible
- * instead of disappearing into the page. The whole strip is one `role="img"`
- * whose name carries the summary (active days, peak); per-cell values are in
- * each cell's `title`.
- */
-export function Heatmap({ days, label, className }: HeatmapProps) {
-  const max = days.reduce((peak, day) => Math.max(peak, day.value), 0);
-  const activeDays = days.filter((day) => day.value > 0).length;
-  return (
-    <div
-      className={cn("flex flex-wrap gap-[3px]", className)}
-      role="img"
-      aria-label={`${label}: ${activeDays} active days, peak ${max}`}
-    >
-      {days.map((day) => {
-        const empty = day.value === 0;
-        const intensity = max <= 0 ? 0 : day.value / max;
-        return (
-          <span
-            key={day.date}
-            title={`${day.date}: ${day.value}`}
-            className={cn("size-3 rounded-[2px] border border-border", empty && "bg-muted")}
-            style={empty ? undefined : { backgroundColor: seriesColor(0), opacity: 0.4 + intensity * 0.6 }}
-          />
-        );
-      })}
-    </div>
-  );
-}
diff --git a/src/ui/kind-picker.tsx b/src/ui/kind-picker.tsx
deleted file mode 100644
index a598da4b..00000000
--- a/src/ui/kind-picker.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import type { ReactNode } from "react";
-
-import type { KindPickerItem } from "../lib/workflow-registry.js";
-import { cn } from "../lib/utils.js";
-import { Badge } from "./badge.js";
-import { EmptyState } from "./empty-state.js";
-import { FilterChip } from "./filter-chip.js";
-import { Input } from "./input.js";
-
-export type KindPickerCardProps = {
-  readonly item: KindPickerItem;
-  readonly selected?: boolean;
-  readonly onSelect?: (item: KindPickerItem) => void;
-  readonly className?: string;
-};
-
-/** One selectable kind card — a workflow kind to attach to a schedule or an
- * automation rule. A real `<button>` carrying `aria-pressed`, not a `div`
- * with a click handler. */
-export function KindPickerCard({ item, selected = false, onSelect, className }: KindPickerCardProps) {
-  return (
-    <button
-      type="button"
-      aria-pressed={selected}
-      onClick={() => onSelect?.(item)}
-      className={cn(
-        // active:brightness-95 mirrors Button's press state: it lands on
-        // pointer-down, so it sits outside transition-colors.
-        "flex w-full flex-col gap-1 rounded-lg border px-3.5 py-3 text-left transition-colors ease-out hover:bg-muted active:brightness-95",
-        selected ? "border-primary-emphasis bg-primary/10" : "border-border bg-card",
-        className,
-      )}
-    >
-      <span className="flex items-center gap-2">
-        <span className="text-sm font-semibold">{item.label}</span>
-        {item.alreadyOn === true ? <Badge tone="success">{item.alreadyOnLabel ?? "Already on"}</Badge> : null}
-      </span>
-      <span className="text-xs leading-snug text-muted-foreground">{item.description}</span>
-      {item.categoryLabel === undefined ? null : (
-        <span className="mt-1 text-[10.5px] font-bold uppercase tracking-[0.05em] text-muted-foreground">
-          {item.categoryLabel}
-        </span>
-      )}
-    </button>
-  );
-}
-
-export type KindPickerCategory = {
-  readonly id: string;
-  readonly label: string;
-};
-
-export type KindPickerFiltersProps = {
-  readonly categories: readonly KindPickerCategory[];
-  readonly selectedCategory?: string;
-  readonly onCategoryChange: (id: string) => void;
-  readonly className?: string;
-};
-
-/** The category-facet row above a picker's results, split out so a caller
- * that has no categories can skip it entirely rather than render an empty
- * strip. */
-export function KindPickerFilters({ categories, selectedCategory, onCategoryChange, className }: KindPickerFiltersProps) {
-  if (categories.length === 0) return null;
-  return (
-    <div className={cn("flex flex-wrap gap-1.5", className)}>
-      {categories.map((category) => (
-        <FilterChip key={category.id} selected={selectedCategory === category.id} onClick={() => onCategoryChange(category.id)}>
-          {category.label}
-        </FilterChip>
-      ))}
-    </div>
-  );
-}
-
-export type KindPickerSearchProps = {
-  readonly value: string;
-  readonly onChange: (value: string) => void;
-  readonly placeholder?: string;
-  readonly className?: string;
-};
-
-/** The picker's search box, standalone so a caller without search can leave
- * it out instead of wiring a no-op handler. */
-export function KindPickerSearch({ value, onChange, placeholder = "Search workflows…", className }: KindPickerSearchProps) {
-  return (
-    <Input
-      value={value}
-      onChange={(event) => onChange(event.target.value)}
-      placeholder={placeholder}
-      aria-label="Search workflow kinds"
-      className={className}
-    />
-  );
-}
-
-export type KindPickerListProps = {
-  readonly items: readonly KindPickerItem[];
-  readonly selectedId?: string | null;
-  readonly onSelect?: (item: KindPickerItem) => void;
-  readonly empty?: ReactNode;
-  readonly className?: string;
-};
-
-/** The results themselves — the one piece that actually needs the item
- * array, kept apart from search and category state so a caller can drive
- * filtering however it likes and still reuse this list. */
-export function KindPickerList({ items, selectedId = null, onSelect, empty, className }: KindPickerListProps) {
-  if (items.length === 0) {
-    return empty ?? <EmptyState title="No workflow kinds match" description="Try a different search or category." />;
-  }
-  return (
-    <div className={cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto", className)}>
-      {items.map((item) => (
-        <KindPickerCard key={item.id} item={item} selected={selectedId === item.id} onSelect={onSelect} />
-      ))}
-    </div>
-  );
-}
diff --git a/src/ui/library-search-input.tsx b/src/ui/library-search-input.tsx
deleted file mode 100644
index e4b7e403..00000000
--- a/src/ui/library-search-input.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { useRef, useState } from "react";
-
-import { cn } from "../lib/utils.js";
-
-export type LibrarySearchInputProps = {
-  /** Accessible name, and the default placeholder. */
-  readonly label: string;
-  readonly value: string;
-  readonly onChange: (value: string) => void;
-  readonly placeholder?: string;
-  /** `bordered` (default) for catalog pages; `ghost` for denser lists. */
-  readonly variant?: "bordered" | "ghost";
-  readonly className?: string;
-};
-
-const VARIANT_CLASS = {
-  bordered: "rounded-md border border-input bg-background",
-  ghost: "rounded-md border border-transparent bg-transparent focus:border-input focus:bg-background",
-} as const;
-
-const COLLAPSED_WIDTH = "180px";
-const EXPANDED_WIDTH = "340px";
-
-/**
- * The search box for library headers. Controlled — the page owns the query
- * state and any filtering derived from it.
- *
- * Reserves a fixed-width slot in the header's flex flow at all times, so
- * neighbouring controls never shift; the input itself is positioned absolutely
- * inside that slot and grows leftward — over the header's flexible spacer,
- * never over another control — while focused or holding a value. Escape clears
- * an active query first, then relinquishes focus once already empty, so it
- * never traps the keyboard.
- */
-export function LibrarySearchInput({
-  label,
-  value,
-  onChange,
-  placeholder,
-  variant = "bordered",
-  className,
-}: LibrarySearchInputProps) {
-  const [focused, setFocused] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const expanded = focused || value.length > 0;
-
-  return (
-    <div className="relative h-[34px] shrink-0" style={{ width: COLLAPSED_WIDTH }}>
-      <input
-        ref={inputRef}
-        type="search"
-        aria-label={label}
-        placeholder={placeholder ?? label}
-        value={value}
-        onFocus={() => setFocused(true)}
-        onBlur={() => setFocused(false)}
-        onChange={(event) => onChange(event.target.value)}
-        onKeyDown={(event) => {
-          if (event.key !== "Escape") return;
-          if (value.length > 0) {
-            event.stopPropagation();
-            onChange("");
-          } else {
-            inputRef.current?.blur();
-          }
-        }}
-        className={cn(
-          "absolute top-0 right-0 h-[34px] px-[11px] text-[12.5px] placeholder:text-muted-foreground transition-[width] duration-150 ease-out",
-          expanded ? "z-20" : "z-10",
-          VARIANT_CLASS[variant],
-          className,
-        )}
-        style={{ width: expanded ? EXPANDED_WIDTH : COLLAPSED_WIDTH }}
-      />
-    </div>
-  );
-}
diff --git a/src/ui/live-run-banner.tsx b/src/ui/live-run-banner.tsx
index 390b1d1f..b4d864b7 100644
--- a/src/ui/live-run-banner.tsx
+++ b/src/ui/live-run-banner.tsx
@@ -10,8 +10,8 @@ export type LiveRunBannerProps = {
 /**
  * The one-line status strip above a live run's steps: awaiting gets the
  * accent tone that marks "this needs you" everywhere else in the registry,
- * running gets the info tone. Standalone from `LiveRunInspector` so a
- * consumer building its own run surface can reuse just this strip.
+ * running gets the info tone. Standalone so a consumer building its own run
+ * surface can reuse just this strip.
  */
 export function LiveRunBanner({ awaiting = false, message, elapsed, className }: LiveRunBannerProps) {
   return (
diff --git a/src/ui/live-run-header.tsx b/src/ui/live-run-header.tsx
deleted file mode 100644
index 1982e138..00000000
--- a/src/ui/live-run-header.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { ReactNode } from "react";
-
-import {
-  LIVE_RUN_PHASE_LABEL,
-  LIVE_RUN_PHASE_TONE,
-  WORKFLOW_SCOPE_BADGE_TONE,
-  workflowScopeLabel,
-  type LiveRunPhase,
-  type WorkflowScope,
-} from "../lib/workflow-registry.js";
-import { Badge } from "./badge.js";
-import { InspectorHeader } from "./inspector-shell.js";
-import { WorkflowStatusBadge } from "./workflow-status-badge.js";
-
-export type LiveRunHeaderProps = {
-  readonly phase: LiveRunPhase;
-  readonly scope?: WorkflowScope;
-  readonly title: string;
-  readonly description?: string;
-  readonly actions?: ReactNode;
-  readonly className?: string;
-};
-
-/** A live run's header block — phase chip, optional scope pill, title and
- * caller-supplied actions — standalone so a run surface that is not an
- * inspector (a full-page run view, a dialog) can reuse exactly this row. */
-export function LiveRunHeader({ phase, scope, title, description, actions, className }: LiveRunHeaderProps) {
-  return (
-    <InspectorHeader
-      className={className}
-      eyebrow={
-        <>
-          <WorkflowStatusBadge tone={LIVE_RUN_PHASE_TONE[phase]} label={LIVE_RUN_PHASE_LABEL[phase]} />
-          {scope === undefined ? null : (
-            <Badge tone={WORKFLOW_SCOPE_BADGE_TONE[scope]}>{workflowScopeLabel(scope)}</Badge>
-          )}
-        </>
-      }
-      title={title}
-      description={description}
-      actions={actions}
-    />
-  );
-}
diff --git a/src/ui/live-run-inspector.tsx b/src/ui/live-run-inspector.tsx
deleted file mode 100644
index e14731c0..00000000
--- a/src/ui/live-run-inspector.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import type { ReactNode } from "react";
-
-import type { LiveRunPhase, StepListItem, WorkflowScope } from "../lib/workflow-registry.js";
-import { Button } from "./button.js";
-import { InspectorKv, InspectorPanelTitle, InspectorShell } from "./inspector-shell.js";
-import { LiveRunBanner } from "./live-run-banner.js";
-import { LiveRunHeader } from "./live-run-header.js";
-import { StepList } from "./step-list.js";
-
-export type { LiveRunPhase } from "../lib/workflow-registry.js";
-
-export type LiveRunInspectorProps = {
-  readonly phase: LiveRunPhase;
-  readonly scope?: WorkflowScope;
-  readonly title: string;
-  readonly description?: string;
-  readonly elapsed?: string;
-  readonly started?: string;
-  readonly runId?: string;
-  readonly steps?: readonly StepListItem[];
-  /** The gate shell + its interactive payload, from the caller. */
-  readonly gate?: ReactNode;
-  readonly onStop?: () => void;
-  readonly onOpenChat?: () => void;
-  readonly className?: string;
-  /** Shown instead of the whole inspector when no run is selected. */
-  readonly empty?: ReactNode;
-};
-
-/**
- * A live run's inspector — the composition wrapper, and nothing more: every
- * visible piece is `InspectorShell`, `LiveRunHeader`, `LiveRunBanner`,
- * `GateBlock` (via the `gate` slot), `StepList` or `InspectorKv`, each
- * importable on its own. This component only decides which of them render
- * and in what order.
- */
-export function LiveRunInspector({
-  phase,
-  scope,
-  title,
-  description,
-  elapsed,
-  started,
-  runId,
-  steps,
-  gate,
-  onStop,
-  onOpenChat,
-  className,
-  empty,
-}: LiveRunInspectorProps) {
-  if (empty !== undefined) {
-    return <InspectorShell empty={empty} className={className} />;
-  }
-
-  const awaiting = phase === "awaiting";
-  const elapsedLine = [elapsed, started === undefined ? null : `started ${started}`].filter(Boolean).join(" · ");
-  const metaRows = runId === undefined ? [] : [{ label: "Run id", value: runId, mono: true }];
-
-  return (
-    <InspectorShell
-      className={className}
-      header={
-        <LiveRunHeader
-          phase={phase}
-          scope={scope}
-          title={title}
-          description={description}
-          actions={
-            <>
-              {!awaiting && onStop !== undefined ? (
-                <Button variant="destructive" size="sm" onClick={onStop}>
-                  Stop
-                </Button>
-              ) : null}
-              {onOpenChat === undefined ? null : (
-                <Button variant="outline" size="sm" onClick={onOpenChat}>
-                  Open in chat
-                </Button>
-              )}
-            </>
-          }
-        />
-      }
-    >
-      <LiveRunBanner awaiting={awaiting} elapsed={elapsedLine === "" ? undefined : elapsedLine} />
-      {gate}
-      {steps === undefined ? null : <StepList steps={steps} label="Run steps" />}
-      {metaRows.length === 0 ? null : (
-        <>
-          <InspectorPanelTitle>Run</InspectorPanelTitle>
-          <InspectorKv rows={metaRows} />
-        </>
-      )}
-    </InspectorShell>
-  );
-}
diff --git a/src/ui/mail-detail.tsx b/src/ui/mail-detail.tsx
deleted file mode 100644
index f130ea2e..00000000
--- a/src/ui/mail-detail.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import type { ReactNode } from "react";
-
-import { STATUS_LABEL, type NowItem } from "../lib/now-item.js";
-import { formatRelativeTime } from "../lib/relative-time.js";
-import { cn } from "../lib/utils.js";
-import { Badge } from "./badge.js";
-import { RefChips, type ContextRef } from "./context-strip.js";
-import { DialogBody, DialogFooter, DialogHeader, DialogTitle } from "./dialog.js";
-
-/** The mail variant of `NowItem` — the same item the queue row renders. */
-export type MailItem = Extract<NowItem, { type: "mail" }>;
-
-export type MailDetailProps = {
-  readonly item: MailItem;
-  /** The message body, already plain text. Pass a renderer as `children` for rich bodies. */
-  readonly body?: string;
-  /** Typed entity references — the "Related" row. */
-  readonly refs?: readonly ContextRef[];
-  /** Buttons: archive, mark done, reply. The host owns what they do. */
-  readonly actions?: ReactNode;
-  readonly children?: ReactNode;
-  readonly now?: number;
-  readonly className?: string;
-};
-
-/**
- * The reading pane for one message: who it is from and when, its enrichment
- * badges, the body, its related references, and the actions available on it.
- *
- * Content only — it renders inside a `DialogContent side="right"` and never
- * opens or closes anything, so the host keeps ownership of which message is
- * open. It uses `DialogTitle` rather than a bare heading because Radix needs a
- * titled dialog; to reuse this as the right column of a two-pane layout, swap
- * those three `Dialog*` parts for `header` / `div` / `footer` — outside a
- * dialog they have no dialog context to attach to.
- *
- * `body` is plain text on purpose. Rendering host-supplied markup is a decision
- * with a security cost, and it is the host's to make: pass a renderer as
- * `children` instead.
- */
-export function MailDetail({ item, body, refs = [], actions, children, now, className }: MailDetailProps) {
-  return (
-    <div className={cn("flex min-h-0 flex-1 flex-col gap-4", className)}>
-      <DialogHeader>
-        <div className="flex flex-wrap items-center gap-1.5">
-          <Badge tone={item.priority === "now" ? "accent" : "neutral"}>{item.classification}</Badge>
-          <Badge tone={item.status === "needs-action" ? "info" : "success"}>{STATUS_LABEL[item.status]}</Badge>
-          {item.read ? null : <Badge tone="neutral">Unread</Badge>}
-        </div>
-        <DialogTitle>{item.title}</DialogTitle>
-        <p className="text-sm text-muted-foreground">
-          {item.from} ·{" "}
-          <time dateTime={item.when}>{formatRelativeTime(item.when, now)}</time>
-        </p>
-      </DialogHeader>
-
-      <DialogBody className="flex flex-col gap-4">
-        {children ?? (body === undefined ? null : <p className="text-sm leading-relaxed whitespace-pre-wrap">{body}</p>)}
-        {refs.length === 0 ? null : (
-          <div className="flex flex-col gap-2">
-            <p className="text-xs font-semibold tracking-[0.12em] text-muted-foreground uppercase">Related</p>
-            <RefChips items={refs} />
-          </div>
-        )}
-      </DialogBody>
-
-      {actions === undefined ? null : <DialogFooter className="justify-start border-t border-border pt-4">{actions}</DialogFooter>}
-    </div>
-  );
-}
diff --git a/src/ui/managed-list.tsx b/src/ui/managed-list.tsx
deleted file mode 100644
index 6d348988..00000000
--- a/src/ui/managed-list.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { X } from "lucide-react";
-import type { ReactNode } from "react";
-
-import { cn } from "../lib/utils.js";
-
-export type ManagedItem = {
-  readonly id: string;
-  readonly label: string;
-  readonly description?: string;
-  /** Status line — "Connected as ada@example.com", "Expired". */
-  readonly status?: string;
-  readonly icon?: ReactNode;
-  /** Row control: a Connect button, a Reconnect, a menu. Replaces remove. */
-  readonly action?: ReactNode;
-};
-
-export type ManagedListProps = {
-  /** Names the collection. Required. */
-  readonly label: string;
-  readonly items: readonly ManagedItem[];
-  /** Omit for read-only lists — a row with no way out needs no remove button. */
-  readonly onRemove?: (item: ManagedItem) => void;
-  /** The add control: a picker, a "Connect account" button. */
-  readonly add?: ReactNode;
-  readonly empty?: ReactNode;
-  readonly className?: string;
-};
-
-/**
- * A collection the user curates: pinned skills, connected accounts, allowed
- * senders.
- *
- * Connections and pinned items are the same list with a different row control,
- * so `action` replaces the remove button per row rather than there being a
- * second component for the connected-accounts case.
- *
- * Remove is labelled with the item's name, not "Remove". Ten buttons all
- * announced as "Remove" are ten identical buttons to anyone navigating by
- * control.
- */
-export function ManagedList({ label, items, onRemove, add, empty, className }: ManagedListProps) {
-  return (
-    <div className={cn("flex flex-col gap-3", className)}>
-      {items.length === 0 ? (
-        <p className="text-sm text-muted-foreground">{empty ?? "Nothing here yet."}</p>
-      ) : (
-        <ul aria-label={label} className="flex flex-col divide-y divide-border">
-          {items.map((item) => (
-            <li key={item.id} className="flex items-center gap-3 py-2.5 first:pt-0 last:pb-0">
-              {item.icon === undefined ? null : (
-                <span className="grid size-5 shrink-0 place-items-center text-muted-foreground [&_svg]:size-4" aria-hidden>
-                  {item.icon}
-                </span>
-              )}
-              <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-                <span className="truncate text-sm font-medium">{item.label}</span>
-                {item.description === undefined ? null : (
-                  <span className="truncate text-xs text-muted-foreground">{item.description}</span>
-                )}
-                {item.status === undefined ? null : (
-                  <span className="truncate text-xs text-muted-foreground">{item.status}</span>
-                )}
-              </div>
-              {item.action ??
-                (onRemove === undefined ? null : (
-                  <button
-                    type="button"
-                    onClick={() => onRemove(item)}
-                    aria-label={`Remove ${item.label}`}
-                    className="grid size-8 shrink-0 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-                  >
-                    <X className="size-4" aria-hidden />
-                  </button>
-                ))}
-            </li>
-          ))}
-        </ul>
-      )}
-      {add}
-    </div>
-  );
-}
diff --git a/src/ui/message-list.test.tsx b/src/ui/message-list.test.tsx
deleted file mode 100644
index 335d9eca..00000000
--- a/src/ui/message-list.test.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { describe, expect, test } from "bun:test";
-
-import { MessageList } from "./message-list.js";
-
-type Mounted = {
-  container: HTMLElement;
-  unmount: () => void;
-};
-
-function render(node: React.ReactElement): Mounted {
-  const container = document.createElement("div");
-  document.body.appendChild(container);
-  let root!: Root;
-  act(() => {
-    root = createRoot(container);
-    root.render(node);
-  });
-  return {
-    container,
-    unmount: () => {
-      act(() => root.unmount());
-      container.remove();
-    },
-  };
-}
-
-describe("MessageList", () => {
-  test("renders its children inside the scroll container", () => {
-    const mounted = render(
-      <MessageList itemCount={1}>
-        <p>Hello</p>
-      </MessageList>,
-    );
-    const list = mounted.container.querySelector("[data-slot='message-list']");
-    expect(list?.textContent).toContain("Hello");
-    mounted.unmount();
-  });
-});
diff --git a/src/ui/message-list.tsx b/src/ui/message-list.tsx
deleted file mode 100644
index 00f3e8cc..00000000
--- a/src/ui/message-list.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { ReactNode } from "react";
-
-import { useAnchoredScroll } from "../hooks/use-anchored-scroll.js";
-import { cn } from "../lib/utils.js";
-
-export type MessageListProps = {
-  /** One entry per rendered item — only the count drives the scroll anchor, see `useAnchoredScroll`. */
-  readonly itemCount: number;
-  readonly children?: ReactNode;
-  readonly className?: string;
-};
-
-/**
- * The scrollable frame around a message transcript, anchored with
- * `useAnchoredScroll`: pinned to the bottom while the reader is there,
- * inert while they've scrolled up into history. Pure scroll mechanics — it
- * renders whatever `children` a caller gives it and owns no message model.
- */
-export function MessageList({ itemCount, children, className }: MessageListProps) {
-  const { containerRef, contentRef, handleScroll } = useAnchoredScroll<HTMLDivElement>(itemCount);
-
-  return (
-    <div
-      data-slot="message-list"
-      ref={containerRef}
-      onScroll={handleScroll}
-      className={cn("overflow-y-auto", className)}
-    >
-      <div ref={contentRef} className="flex flex-col gap-3">
-        {children}
-      </div>
-    </div>
-  );
-}
diff --git a/src/ui/moment-walker.tsx b/src/ui/moment-walker.tsx
deleted file mode 100644
index 4d01acfd..00000000
--- a/src/ui/moment-walker.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { useId } from "react";
-import type { ReactNode } from "react";
-
-import { type ActivityEntry } from "../lib/activity.js";
-import { formatRelativeTime } from "../lib/relative-time.js";
-import { cn } from "../lib/utils.js";
-import { Button } from "./button.js";
-import { EmptyState } from "./empty-state.js";
-
-export type MomentWalkerProps = {
-  /** In the order they should be walked — usually oldest to newest. */
-  readonly moments: readonly ActivityEntry[];
-  readonly index: number;
-  readonly onIndexChange: (index: number) => void;
-  /** The detail for the current moment — a payload, a trace, a diff. */
-  readonly children?: (moment: ActivityEntry) => ReactNode;
-  readonly now?: number;
-  readonly className?: string;
-};
-
-/**
- * One moment at a time, with the sequence underneath.
- *
- * A timeline answers "what happened"; this answers "what happened *then*". The
- * difference is that a feed asks you to hold context across forty rows, whereas
- * this pins one moment on screen and gives you a step control — which is the
- * right shape whenever the interesting thing is a single event's detail and its
- * position in a run.
- *
- * The strip beneath the controls is a `role="listbox"` of moments, not a row of
- * buttons. Walking a sequence is picking one of many — the listbox role is what
- * says the options are a set with a current selection, and it is what makes
- * "moment 4 of 19, selected" the announcement instead of nineteen unlabelled
- * buttons. The listbox keeps focus and points at the current option with
- * `aria-activedescendant`, which is the half of the composite-widget pattern
- * that actually tells a screen reader *which* option moved; a focused container
- * with a silently changing `aria-selected` underneath announces nothing.
- *
- * Arrow keys move; Home and End jump to the ends. A stepper whose only affordance
- * is two buttons makes stepping through nineteen moments nineteen tab-and-space
- * cycles.
- *
- * The index is the caller's. It is almost always shared — a URL, a chart's
- * hover, a sibling list — and a walker holding it privately cannot be driven
- * from any of them.
- */
-export function MomentWalker({ moments, index, onIndexChange, children, now, className }: MomentWalkerProps) {
-  const base = useId();
-  const optionId = (position: number) => `${base}-moment-${position}`;
-
-  if (moments.length === 0) {
-    return <EmptyState className={className} title="No moments recorded" />;
-  }
-
-  const clamped = Math.min(moments.length - 1, Math.max(0, index));
-  const current = moments[clamped];
-  if (current === undefined) return <EmptyState className={className} title="No moments recorded" />;
-
-  const go = (next: number) => onIndexChange(Math.min(moments.length - 1, Math.max(0, next)));
-
-  return (
-    <div className={cn("flex flex-col gap-3 rounded-lg border border-border bg-card p-4", className)}>
-      <div className="flex items-center justify-between gap-3">
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          onClick={() => go(clamped - 1)}
-          disabled={clamped === 0}
-          aria-label="Previous moment"
-        >
-          <ChevronLeft aria-hidden />
-          Previous
-        </Button>
-        {/* Announced on change, so stepping is audible and not only visible. */}
-        <p role="status" className="font-mono text-xs text-muted-foreground tabular-nums">
-          {clamped + 1} of {moments.length}
-        </p>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          onClick={() => go(clamped + 1)}
-          disabled={clamped === moments.length - 1}
-          aria-label="Next moment"
-        >
-          Next
-          <ChevronRight aria-hidden />
-        </Button>
-      </div>
-
-      <div
-        role="listbox"
-        aria-label="Moments"
-        aria-orientation="horizontal"
-        aria-activedescendant={optionId(clamped)}
-        tabIndex={0}
-        onKeyDown={(event) => {
-          if (event.key === "ArrowRight") {
-            event.preventDefault();
-            go(clamped + 1);
-          } else if (event.key === "ArrowLeft") {
-            event.preventDefault();
-            go(clamped - 1);
-          } else if (event.key === "Home") {
-            event.preventDefault();
-            go(0);
-          } else if (event.key === "End") {
-            event.preventDefault();
-            go(moments.length - 1);
-          }
-        }}
-        className="flex gap-1 overflow-x-auto rounded-md border border-border p-1"
-      >
-        {moments.map((moment, momentIndex) => {
-          const active = momentIndex === clamped;
-          return (
-            <div
-              key={moment.id}
-              id={optionId(momentIndex)}
-              role="option"
-              aria-selected={active}
-              // Not focusable: focus stays on the listbox and the selection
-              // moves, which is the composite-widget pattern. Nineteen tab
-              // stops in a strip is the thing this avoids.
-              onClick={() => go(momentIndex)}
-              className={cn(
-                "h-6 min-w-2 shrink-0 cursor-pointer rounded-xs transition-colors",
-                active ? "bg-primary-emphasis" : "bg-muted hover:bg-input",
-              )}
-              title={`${momentIndex + 1}. ${moment.kind}`}
-            >
-              <span className="sr-only">
-                {momentIndex + 1}. {moment.kind}
-                {moment.summary === undefined ? "" : ` — ${moment.summary}`}
-              </span>
-            </div>
-          );
-        })}
-      </div>
-
-      <div className="flex flex-col gap-1">
-        <div className="flex items-baseline justify-between gap-3">
-          <p className="text-sm font-semibold">{current.kind}</p>
-          <time dateTime={current.timestamp} className="font-mono text-xs text-muted-foreground">
-            {formatRelativeTime(current.timestamp, now)}
-          </time>
-        </div>
-        <p className="text-sm leading-relaxed text-muted-foreground">{current.summary ?? "No details recorded"}</p>
-        {children === undefined ? null : <div className="mt-2">{children(current)}</div>}
-      </div>
-    </div>
-  );
-}
diff --git a/src/ui/onboarding-tour.tsx b/src/ui/onboarding-tour.tsx
deleted file mode 100644
index edd0f84d..00000000
--- a/src/ui/onboarding-tour.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-
-import { cn } from "../lib/utils.js";
-import { Button } from "./button.js";
-
-export type TourStep = {
-  readonly id: string;
-  /** CSS selector for the element to spotlight. Omit to centre the card. */
-  readonly target?: string;
-  readonly title: string;
-  readonly body: string;
-};
-
-export type OnboardingTourProps = {
-  readonly steps: readonly TourStep[];
-  readonly open: boolean;
-  /** Fired on finish and on skip alike — the host records "seen" either way. */
-  readonly onClose: () => void;
-  readonly className?: string;
-};
-
-type Rect = { top: number; left: number; width: number; height: number };
-
-const PADDING = 8;
-const CARD_WIDTH = 320;
-const GAP = 12;
-
-/**
- * A guided walkthrough: dim the page, cut a hole around one element, explain it.
- *
- * The spotlight is a single fixed div sized to the target with a very large
- * spread `box-shadow`, so the "hole" is the element's own box and the dimming
- * is the shadow around it. That beats an SVG mask or four dimming rectangles:
- * one element, no seams between panels, and the browser handles the geometry.
- *
- * The hole has `pointer-events: none` so the highlighted control stays usable —
- * a tour that says "click here" and then blocks the click is worse than no tour.
- * Escape ends it at any point, because a walkthrough the user cannot leave is a
- * trap, and so does a click on the dimmed area — in both branches, anchored and
- * not, since "click outside to dismiss" that works on some steps and silently
- * does nothing on others teaches the user the tour is stuck. `onClose` fires
- * for finishing and skipping alike so the host records "seen" without caring
- * which happened.
- *
- * Steps whose `target` matches nothing still render, centred. A tour that
- * silently drops steps when a selector goes stale is a tour that quietly stops
- * explaining half the product.
- */
-export function OnboardingTour({ steps, open, onClose, className }: OnboardingTourProps) {
-  const [index, setIndex] = useState(0);
-  const [rect, setRect] = useState<Rect | null>(null);
-  const cardRef = useRef<HTMLDivElement>(null);
-
-  // Reset to the first step whenever the tour is reopened. Adjusted during
-  // render rather than in an effect: an effect would paint step 3 of the last
-  // run for one frame before snapping back to step 1.
-  const [wasOpen, setWasOpen] = useState(open);
-  if (open !== wasOpen) {
-    setWasOpen(open);
-    if (open) setIndex(0);
-  }
-
-  const step = steps[index];
-  const target = step?.target;
-  const isLast = index === steps.length - 1;
-
-  const measure = useCallback(() => {
-    if (!open || target === undefined) {
-      setRect(null);
-      return;
-    }
-    const element = document.querySelector(target);
-    if (element === null) {
-      setRect(null);
-      return;
-    }
-    element.scrollIntoView({ block: "center", behavior: "smooth" });
-    const box = element.getBoundingClientRect();
-    setRect({
-      top: box.top - PADDING,
-      left: box.left - PADDING,
-      width: box.width + PADDING * 2,
-      height: box.height + PADDING * 2,
-    });
-  }, [open, target]);
-
-  // Measuring the DOM is the one legitimate reason to set state from an effect:
-  // the rect cannot be known until the element is laid out, and this has to run
-  // before paint or the card renders once at the wrong position.
-  useLayoutEffect(measure, [measure]);
-
-  useEffect(() => {
-    if (!open) return;
-    // `true` on scroll: the target may sit inside a scrolling pane, and a
-    // listener on window alone never hears those.
-    window.addEventListener("scroll", measure, true);
-    window.addEventListener("resize", measure);
-    return () => {
-      window.removeEventListener("scroll", measure, true);
-      window.removeEventListener("resize", measure);
-    };
-  }, [open, measure]);
-
-  useEffect(() => {
-    if (!open) return;
-    cardRef.current?.focus();
-  }, [open, index]);
-
-  useEffect(() => {
-    if (!open) return;
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [open, onClose]);
-
-  if (!open || step === undefined) return null;
-
-  // Below the target if it fits, above if not, centred when unanchored.
-  const cardStyle: React.CSSProperties =
-    rect === null
-      ? { top: "50%", left: "50%", transform: "translate(-50%, -50%)" }
-      : rect.top + rect.height + GAP + 180 < window.innerHeight
-        ? { top: rect.top + rect.height + GAP, left: Math.max(GAP, Math.min(rect.left, window.innerWidth - CARD_WIDTH - GAP)) }
-        : { bottom: window.innerHeight - rect.top + GAP, left: Math.max(GAP, Math.min(rect.left, window.innerWidth - CARD_WIDTH - GAP)) };
-
-  return (
-    <div className={cn("fixed inset-0 z-90", className)}>
-      {rect === null ? (
-        <div className="absolute inset-0 bg-black/60" onClick={onClose} />
-      ) : (
-        <>
-          {/* Click-out, cut into four strips around the spotlight rather than
-              one sheet over the page. A single `inset-0` catcher would end the
-              tour when the user clicked the very control it is pointing at;
-              these leave that rectangle alone, so "click anywhere else to
-              leave" is true in both branches without taking the target back. */}
-          {[
-            { top: 0, left: 0, width: "100%", height: Math.max(0, rect.top) },
-            { top: rect.top + rect.height, left: 0, width: "100%", bottom: 0 },
-            { top: rect.top, left: 0, width: Math.max(0, rect.left), height: rect.height },
-            { top: rect.top, left: rect.left + rect.width, right: 0, height: rect.height },
-          ].map((style, index) => (
-            <div key={index} className="absolute" style={style} onClick={onClose} />
-          ))}
-          <div
-            aria-hidden
-            className="pointer-events-none absolute rounded-md ring-2 ring-primary transition-all duration-200"
-            style={{
-              top: rect.top,
-              left: rect.left,
-              width: rect.width,
-              height: rect.height,
-              boxShadow: "0 0 0 9999px rgba(0, 0, 0, 0.6)",
-            }}
-          />
-        </>
-      )}
-
-      <div
-        ref={cardRef}
-        role="dialog"
-        aria-label={step.title}
-        tabIndex={-1}
-        style={{ ...cardStyle, position: "absolute", width: CARD_WIDTH }}
-        className="flex flex-col gap-3 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-lg"
-      >
-        <div className="flex flex-col gap-1">
-          <p className="text-xs text-muted-foreground">
-            Step {index + 1} of {steps.length}
-          </p>
-          <h3 className="text-sm font-semibold">{step.title}</h3>
-          <p className="text-sm leading-relaxed text-muted-foreground">{step.body}</p>
-        </div>
-
-        <div className="flex items-center gap-2">
-          <Button variant="ghost" size="sm" onClick={onClose}>
-            Skip
-          </Button>
-          <div className="ml-auto flex gap-2">
-            {index > 0 ? (
-              <Button variant="outline" size="sm" onClick={() => setIndex((value) => value - 1)}>
-                Back
-              </Button>
-            ) : null}
-            <Button size="sm" onClick={() => (isLast ? onClose() : setIndex((value) => value + 1))}>
-              {isLast ? "Done" : "Next"}
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/ui/pagination.tsx b/src/ui/pagination.tsx
deleted file mode 100644
index b322143b..00000000
--- a/src/ui/pagination.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { cn } from "../lib/utils.js";
-import { AnimatedNumber } from "./animated-number.js";
-import { Button } from "./button.js";
-
-export type PaginationProps = {
-  /** 1-based. */
-  readonly page: number;
-  readonly totalPages: number;
-  /** Total rows across all pages, for the legend. */
-  readonly total?: number;
-  readonly onPageChange: (page: number) => void;
-  readonly className?: string;
-};
-
-/**
- * Prev/Next around a "Page X of Y" legend, for numbered server-side paging.
- *
- * This is not what the `DataPort` gives you. The port's
- * `hasNextPage`/`fetchNextPage` drive an append-as-you-go "Load more", which is
- * what the queue, thread list and schedule list use. Numbered pages are a
- * different thing — you can go back, and you can tell how much there is — and
- * they suit a table you are working through rather than a feed you are reading.
- * Reach for this when the user needs to know where they are.
- *
- * Renders nothing at one page or fewer, so a list that fits shows no chrome.
- *
- * The legend is an `aria-live` region: after pressing Next, focus stays on the
- * button, and without this nothing tells a screen-reader user the page changed.
- */
-export function Pagination({ page, totalPages, total, onPageChange, className }: PaginationProps) {
-  if (totalPages <= 1) return null;
-
-  return (
-    <nav
-      aria-label="Pagination"
-      className={cn(
-        "flex flex-wrap items-center justify-between gap-3 border-t border-border px-3 py-2 text-sm text-muted-foreground",
-        className,
-      )}
-    >
-      <p aria-live="polite">
-        Page <AnimatedNumber value={page} className="text-foreground" /> of{" "}
-        <AnimatedNumber value={totalPages} className="text-foreground" />
-        {total === undefined ? null : (
-          <>
-            {" · "}
-            <AnimatedNumber value={total} /> total
-          </>
-        )}
-      </p>
-      <div className="flex gap-2">
-        <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => onPageChange(page - 1)}>
-          Previous
-        </Button>
-        <Button variant="outline" size="sm" disabled={page >= totalPages} onClick={() => onPageChange(page + 1)}>
-          Next
-        </Button>
-      </div>
-    </nav>
-  );
-}
diff --git a/src/ui/pulsing-ring.test.tsx b/src/ui/pulsing-ring.test.tsx
deleted file mode 100644
index f7420bb6..00000000
--- a/src/ui/pulsing-ring.test.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import { createElement } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
-
-import { PulsingRing } from "./pulsing-ring.js";
-
-describe("PulsingRing", () => {
-  test("renders as an aria-hidden overlay carrying the given color class", () => {
-    const html = renderToStaticMarkup(createElement(PulsingRing, { colorClassName: "bg-destructive" }));
-    expect(html).toContain("aria-hidden");
-    expect(html).toContain("bg-destructive");
-  });
-
-  test("merges a caller className alongside the color class", () => {
-    const html = renderToStaticMarkup(
-      createElement(PulsingRing, { colorClassName: "bg-primary-emphasis", className: "size-3" }),
-    );
-    expect(html).toContain("bg-primary-emphasis");
-    expect(html).toContain("size-3");
-  });
-});
diff --git a/src/ui/pulsing-ring.tsx b/src/ui/pulsing-ring.tsx
deleted file mode 100644
index adc60248..00000000
--- a/src/ui/pulsing-ring.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { cn } from "../lib/utils.js";
-
-export type PulsingRingProps = {
-  /** Fill token for the ring, e.g. `bg-primary-emphasis` or `bg-destructive`. */
-  readonly colorClassName: string;
-  readonly className?: string;
-};
-
-/**
- * A ring that scales and fades outward from its container: "this is live and
- * still changing", detached from any one marker.
- *
- * `StatusDot`'s `live` ring uses the same `corbits-status-pulse` keyframe
- * fused to its dot; this is that motion as a standalone `aria-hidden`
- * overlay for surfaces that need the pulse around something that is not a
- * dot — a phase stepper's active step, a running row's leading edge. Reduced
- * motion is handled once at the theme level (see `theme.css`), so this
- * component carries no motion-preference logic of its own.
- */
-export function PulsingRing({ colorClassName, className }: PulsingRingProps) {
-  return (
-    <span
-      aria-hidden
-      className={cn(
-        "absolute inset-0 rounded-full [animation:corbits-status-pulse_1.8s_ease-out_infinite]",
-        colorClassName,
-        className,
-      )}
-    />
-  );
-}
diff --git a/src/ui/radio-group.test.tsx b/src/ui/radio-group.test.tsx
deleted file mode 100644
index e3ccafc7..00000000
--- a/src/ui/radio-group.test.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import { act, createElement } from "react";
-import { createRoot } from "react-dom/client";
-
-import { RadioGroup, RadioOption } from "./radio-group.js";
-
-function mount(value: string, onValueChange: (value: string) => void) {
-  const container = document.createElement("div");
-  document.body.appendChild(container);
-  const root = createRoot(container);
-  act(() => {
-    root.render(
-      createElement(RadioGroup, {
-        name: "mode",
-        label: "Mode",
-        value,
-        onValueChange,
-        children: [
-          createElement(RadioOption, { key: "agent", value: "agent", label: "Agent", description: "Runs on its own." }),
-          createElement(RadioOption, { key: "chat", value: "chat", label: "Chat" }),
-        ],
-      }),
-    );
-  });
-  return {
-    group: () => container.querySelector('[role="radiogroup"]') as HTMLElement,
-    inputs: () => Array.from(container.querySelectorAll('input[type="radio"]')) as HTMLInputElement[],
-    container,
-    unmount: () => root.unmount(),
-  };
-}
-
-describe("RadioGroup / RadioOption", () => {
-  test("the container carries role=radiogroup and an accessible name", () => {
-    const { group, unmount } = mount("agent", () => {});
-    expect(group().getAttribute("aria-label")).toBe("Mode");
-    unmount();
-  });
-
-  test("options share the same name so arrow-key roving works between them", () => {
-    const { inputs, unmount } = mount("agent", () => {});
-    const names = inputs().map((input) => input.name);
-    expect(new Set(names).size).toBe(1);
-    unmount();
-  });
-
-  test("only the option matching value is checked", () => {
-    const { inputs, unmount } = mount("chat", () => {});
-    const all = inputs();
-    expect(all[0]?.checked).toBe(false);
-    expect(all[1]?.checked).toBe(true);
-    unmount();
-  });
-
-  test("selecting an option calls onValueChange with its value", () => {
-    let received: string | undefined;
-    const { inputs, unmount } = mount("agent", (value) => {
-      received = value;
-    });
-    act(() => {
-      inputs()[1]?.click();
-    });
-    expect(received).toBe("chat");
-    unmount();
-  });
-
-  test("description text is wired via aria-describedby", () => {
-    const { inputs, container, unmount } = mount("agent", () => {});
-    const describedBy = inputs()[0]?.getAttribute("aria-describedby") ?? null;
-    expect(describedBy).not.toBeNull();
-    const description = container.querySelector(`#${describedBy}`);
-    expect(description?.textContent).toBe("Runs on its own.");
-    unmount();
-  });
-
-  test("an option without a description has no aria-describedby", () => {
-    const { inputs, unmount } = mount("agent", () => {});
-    expect(inputs()[1]?.getAttribute("aria-describedby") ?? null).toBeNull();
-    unmount();
-  });
-
-  test("clicking the description text selects the option — the whole row is the label", () => {
-    let received: string | undefined;
-    const { container, inputs, unmount } = mount("chat", (value) => {
-      received = value;
-    });
-    const describedBy = inputs()[0]?.getAttribute("aria-describedby") ?? null;
-    const description = container.querySelector(`#${describedBy}`) as HTMLElement;
-    act(() => {
-      description.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-    });
-    expect(received).toBe("agent");
-    unmount();
-  });
-
-  test("without a label, renders just the bare control", () => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-    const root = createRoot(container);
-    act(() => {
-      root.render(
-        createElement(RadioGroup, {
-          name: "bare",
-          label: "Mode",
-          value: "agent",
-          onValueChange: () => {},
-          children: createElement(RadioOption, { key: "agent", value: "agent", id: "bare-radio" }),
-        }),
-      );
-    });
-    expect(container.querySelector("label")).toBeNull();
-    expect((container.querySelector("input") as HTMLInputElement).id).toBe("bare-radio");
-    root.unmount();
-  });
-
-  test("without a label, describedBy passes through to aria-describedby", () => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-    const root = createRoot(container);
-    act(() => {
-      root.render(
-        createElement(RadioGroup, {
-          name: "bare",
-          label: "Mode",
-          value: "agent",
-          onValueChange: () => {},
-          children: createElement(RadioOption, {
-            key: "agent",
-            value: "agent",
-            id: "bare-radio",
-            describedBy: "external-description",
-          }),
-        }),
-      );
-    });
-    expect((container.querySelector("input") as HTMLInputElement).getAttribute("aria-describedby")).toBe(
-      "external-description",
-    );
-    root.unmount();
-  });
-
-  test("throws when RadioOption is rendered outside a RadioGroup", () => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-    const root = createRoot(container);
-    expect(() => {
-      act(() => {
-        root.render(createElement(RadioOption, { value: "solo", label: "Solo" }));
-      });
-    }).toThrow();
-    root.unmount();
-  });
-});
diff --git a/src/ui/radio-group.tsx b/src/ui/radio-group.tsx
deleted file mode 100644
index 83d8d09a..00000000
--- a/src/ui/radio-group.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { createContext, useContext, useId } from "react";
-import type { ReactNode } from "react";
-
-import { cn } from "../lib/utils.js";
-
-type RadioGroupContextValue = {
-  readonly name: string;
-  readonly value: string;
-  readonly onValueChange: (value: string) => void;
-};
-
-const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
-
-export type RadioGroupProps = {
-  /** Distinguishes this group's inputs so arrow-key roving works between them. */
-  readonly name: string;
-  readonly value: string;
-  readonly onValueChange: (value: string) => void;
-  /** Accessible name for the group. */
-  readonly label: string;
-  readonly children: ReactNode;
-  readonly className?: string;
-};
-
-/**
- * A compact single-select list — "pick an agent/mode" — not a card grid.
- *
- * `role="radiogroup"` on the container names the set; each `RadioOption`
- * inside is a real native `<input type="radio">` sharing `name`, which is
- * what gives arrow-key roving between options for free.
- */
-export function RadioGroup({ name, value, onValueChange, label, children, className }: RadioGroupProps) {
-  return (
-    <RadioGroupContext.Provider value={{ name, value, onValueChange }}>
-      <div role="radiogroup" aria-label={label} className={cn("flex flex-col divide-y divide-border", className)}>
-        {children}
-      </div>
-    </RadioGroupContext.Provider>
-  );
-}
-
-export type RadioOptionProps = {
-  readonly value: string;
-  /**
-   * Row label. Omit to render just the control, with `id`/`describedBy`
-   * passthrough — for composing into an externally labeled row, the way
-   * `ToggleList` composes `Switch`.
-   */
-  readonly label?: string;
-  /** Secondary text under the label, tied to the input via `aria-describedby`. Labeled-row mode only. */
-  readonly description?: string;
-  readonly disabled?: boolean;
-  readonly invalid?: boolean;
-  readonly id?: string;
-  /** Id of external text describing the control, for `aria-describedby`. Bare-control mode only. */
-  readonly describedBy?: string;
-  readonly className?: string;
-};
-
-const CONTROL_CLASS = "relative mt-0.5 flex size-4 shrink-0 items-center justify-center";
-
-export function RadioOption({
-  value,
-  label,
-  description,
-  disabled = false,
-  invalid = false,
-  id,
-  describedBy,
-  className,
-}: RadioOptionProps) {
-  const context = useContext(RadioGroupContext);
-  if (context === null) {
-    throw new Error("RadioOption must be rendered inside a RadioGroup");
-  }
-  const { name, value: groupValue, onValueChange } = context;
-
-  const generatedId = useId();
-  const optionId = id ?? `${generatedId}-${value}`;
-  const descriptionId = description === undefined ? undefined : `${optionId}-description`;
-  const isBare = label === undefined;
-
-  const control = (
-    <span className={cn(CONTROL_CLASS, isBare && className)}>
-      <input
-        type="radio"
-        id={optionId}
-        name={name}
-        value={value}
-        checked={groupValue === value}
-        disabled={disabled}
-        aria-describedby={isBare ? describedBy : descriptionId}
-        aria-invalid={invalid}
-        onChange={() => onValueChange(value)}
-        className={cn(
-          "peer size-4 shrink-0 appearance-none rounded-full border border-input bg-card shadow-xs transition-colors",
-          "checked:border-primary aria-invalid:border-destructive disabled:cursor-not-allowed",
-        )}
-      />
-      <span className="pointer-events-none absolute size-1.5 scale-0 rounded-full bg-primary transition-transform peer-checked:scale-100" />
-    </span>
-  );
-
-  if (isBare) return control;
-
-  return (
-    <label
-      htmlFor={optionId}
-      className={cn(
-        "flex items-start gap-2 py-2 first:pt-0 last:pb-0",
-        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
-        className,
-      )}
-    >
-      {control}
-      <span className="flex flex-col gap-0.5">
-        <span className="text-sm font-medium">{label}</span>
-        {description === undefined ? null : (
-          <span id={descriptionId} className="text-xs leading-relaxed text-muted-foreground">
-            {description}
-          </span>
-        )}
-      </span>
-    </label>
-  );
-}
diff --git a/src/ui/read-block.tsx b/src/ui/read-block.tsx
deleted file mode 100644
index b6dcf7a9..00000000
--- a/src/ui/read-block.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { ReactNode } from "react";
-
-import { cn } from "../lib/utils.js";
-
-export type ReadBlockProps = {
-  readonly label: string;
-  readonly value: ReactNode;
-  readonly sub?: ReactNode;
-  readonly mono?: boolean;
-  readonly className?: string;
-};
-
-/** A single labelled read-only fact card — a cadence, a next-fire time.
- * Split out from `ScheduleInspectorView` because a summary panel or a
- * details drawer wants the exact same card without the rest of the
- * inspector's chrome. */
-export function ReadBlock({ label, value, sub, mono = false, className }: ReadBlockProps) {
-  return (
-    <div className={cn("rounded-lg border border-border bg-muted/40 px-3 py-2.5", className)}>
-      <div className="text-[10.5px] font-bold uppercase tracking-[0.05em] text-muted-foreground">{label}</div>
-      <div className={cn("mt-0.5 text-sm font-semibold", mono && "font-mono text-[12.5px]")}>{value}</div>
-      {sub === undefined ? null : <div className="mt-0.5 text-xs text-muted-foreground">{sub}</div>}
-    </div>
-  );
-}
diff --git a/src/ui/reconnecting-overlay.tsx b/src/ui/reconnecting-overlay.tsx
deleted file mode 100644
index 0d9133af..00000000
--- a/src/ui/reconnecting-overlay.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { ReactNode } from "react";
-
-import { BootScreen } from "./boot-screen.js";
-
-export type ReconnectingOverlayProps = {
-  /** The host's connection state. `false` unmounts the cover entirely. */
-  readonly open: boolean;
-  readonly message?: string;
-  readonly brand?: ReactNode;
-  readonly footer?: ReactNode;
-};
-
-/**
- * Full-viewport cover for a live app that has lost its connection. The same
- * boot screen as first load, because it is the same fact: the app is not usable
- * yet, and showing a second visual language for it only teaches the user two
- * things instead of one.
- *
- * IMPORTANT — this covers the app, it does not disable it. An element cannot
- * make its siblings inert, so the host must set `inert` on the app root while
- * `open` is true, or keyboard focus walks straight into the frozen UI behind
- * the cover:
- *
- *     <div id="app" {...(reconnecting ? { inert: true } : {})}>…</div>
- *     <ReconnectingOverlay open={reconnecting} />
- */
-export function ReconnectingOverlay({
-  open,
-  message = "Reconnecting…",
-  brand,
-  footer,
-}: ReconnectingOverlayProps) {
-  if (!open) return null;
-  return (
-    <div className="fixed inset-0 z-100 [animation:corbits-fade-in_200ms_ease-out]">
-      <BootScreen message={message} brand={brand} footer={footer} />
-    </div>
-  );
-}
diff --git a/src/ui/recurrence-input.tsx b/src/ui/recurrence-input.tsx
deleted file mode 100644
index 775deb54..00000000
--- a/src/ui/recurrence-input.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { useId } from "react";
-
-import {
-  describeRecurrence,
-  RECURRENCE_UNITS,
-  type Recurrence,
-  type RecurrenceUnit,
-} from "../lib/schedule.js";
-import { cn } from "../lib/utils.js";
-import { Input } from "./input.js";
-
-const WEEKDAY_LABELS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-
-/**
- * How often something runs: a count, a unit, and — where it means anything — a
- * time of day and a weekday.
- *
- * The controls that do not apply are not rendered rather than disabled. A
- * greyed time picker next to "every hour" invites the user to wonder what they
- * did wrong; an absent one says the question does not arise.
- *
- * It reads back what it is set to, in the same words the schedule list will use
- * later. Confirming a repeating job from two dropdowns without a sentence is
- * how people end up with a workflow that runs every hour forever.
- */
-export function RecurrenceInput({
-  value,
-  onChange,
-  disabled = false,
-  className,
-}: {
-  value: Recurrence;
-  onChange: (next: Recurrence) => void;
-  disabled?: boolean;
-  className?: string;
-}) {
-  const baseId = useId();
-  const showTime = value.unit !== "hour";
-  const showWeekday = value.unit === "week";
-
-  return (
-    <fieldset className={cn("flex flex-col gap-3", className)} disabled={disabled}>
-      <legend className="text-sm font-medium">Repeats</legend>
-
-      <div className="flex flex-wrap items-end gap-2">
-        <div className="flex flex-col gap-1.5">
-          <label htmlFor={`${baseId}-every`} className="text-xs text-muted-foreground">
-            Every
-          </label>
-          <Input
-            id={`${baseId}-every`}
-            type="number"
-            min={1}
-            max={99}
-            value={value.every}
-            onChange={(event) => {
-              // Clamp rather than trust: an empty field parses to NaN and a
-              // recurrence of "every NaN days" is a schedule nobody can fix.
-              const parsed = event.target.valueAsNumber;
-              onChange({ ...value, every: Number.isFinite(parsed) ? Math.max(1, Math.min(99, parsed)) : 1 });
-            }}
-            className="w-20"
-          />
-        </div>
-
-        <div className="flex flex-col gap-1.5">
-          <label htmlFor={`${baseId}-unit`} className="text-xs text-muted-foreground">
-            Unit
-          </label>
-          <select
-            id={`${baseId}-unit`}
-            value={value.unit}
-            onChange={(event) => onChange({ ...value, unit: event.target.value as RecurrenceUnit })}
-            className="h-9 rounded-md border border-input bg-background px-3 text-sm"
-          >
-            {RECURRENCE_UNITS.map((unit) => (
-              <option key={unit} value={unit}>
-                {value.every === 1 ? unit : `${unit}s`}
-              </option>
-            ))}
-          </select>
-        </div>
-
-        {showWeekday ? (
-          <div className="flex flex-col gap-1.5">
-            <label htmlFor={`${baseId}-weekday`} className="text-xs text-muted-foreground">
-              On
-            </label>
-            <select
-              id={`${baseId}-weekday`}
-              value={value.weekday ?? 1}
-              onChange={(event) => onChange({ ...value, weekday: Number(event.target.value) })}
-              className="h-9 rounded-md border border-input bg-background px-3 text-sm"
-            >
-              {WEEKDAY_LABELS.map((label, index) => (
-                <option key={label} value={index}>
-                  {label}
-                </option>
-              ))}
-            </select>
-          </div>
-        ) : null}
-
-        {showTime ? (
-          <div className="flex flex-col gap-1.5">
-            <label htmlFor={`${baseId}-at`} className="text-xs text-muted-foreground">
-              At
-            </label>
-            <Input
-              id={`${baseId}-at`}
-              type="time"
-              value={value.at ?? "09:00"}
-              onChange={(event) => onChange({ ...value, at: event.target.value })}
-              className="w-32"
-            />
-          </div>
-        ) : null}
-      </div>
-
-      <p aria-live="polite" className="text-sm text-muted-foreground">
-        {describeRecurrence(value)}
-      </p>
-    </fieldset>
-  );
-}
diff --git a/src/ui/render-rail.tsx b/src/ui/render-rail.tsx
deleted file mode 100644
index 4323ff0d..00000000
--- a/src/ui/render-rail.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { ArrowDown, Pin, PinOff } from "lucide-react";
-
-import { generativeBlockId, type GenerativeBlock } from "../lib/generative-block.js";
-import { cn } from "../lib/utils.js";
-import { GenerativeBlockView } from "./generative-block-view.js";
-
-export type RenderRailProps = {
-  readonly block: GenerativeBlock | null;
-  readonly isPinned: boolean;
-  readonly onTogglePin: () => void;
-  /** True once a block newer than the pinned one has arrived. Omit (or leave false) to skip the affordance entirely. */
-  readonly hasNewerBlock?: boolean;
-  readonly onJumpToLatest?: () => void;
-  readonly className?: string;
-};
-
-/**
- * Cross-fades between the Pin and PinOff glyphs rather than swapping them
- * in place — keyed by which icon is showing, so the swap remounts and its
- * `corbits-icon-swap` animation plays every time the pin state flips.
- */
-function PinIcon({ isPinned }: { isPinned: boolean }) {
-  return (
-    <span key={isPinned ? "pinned" : "unpinned"} className="inline-flex [animation:corbits-icon-swap_150ms_var(--ease-out)_both]">
-      {isPinned ? <Pin className="size-3.5 fill-current" aria-hidden /> : <PinOff className="size-3.5" aria-hidden />}
-    </span>
-  );
-}
-
-/**
- * The banner that appears over a pinned block once a newer one has arrived
- * behind it — clicking it is the one way `jumpToLatest` gets called, so the
- * reader always chooses when to leave what they pinned.
- */
-function NewerResultAffordance({ onJumpToLatest }: { onJumpToLatest: () => void }) {
-  return (
-    <button
-      type="button"
-      onClick={onJumpToLatest}
-      className="flex items-center justify-center gap-1.5 rounded-md border border-primary/30 bg-primary/10 px-2 py-1 text-xs font-medium text-primary-emphasis transition-colors [animation:corbits-rail-block-in_200ms_var(--ease-out)_both] hover:bg-primary/20"
-    >
-      <ArrowDown className="size-3" aria-hidden />
-      Newer result available
-    </button>
-  );
-}
-
-/**
- * The dual-column rail: one active generative block, mirrored from the
- * transcript, with a pin control in its corner. Only meaningful in `fullpage`
- * mode — `fullpage` is the one mode with the width to spare for a second
- * column, so the host only mounts this rail there.
- *
- * The rail itself holds no state; `useRenderRail` decides which block is
- * "active", whether it is pinned, and whether a newer block has arrived
- * behind it. This piece just renders that decision and reports the gestures
- * the reader can make against it.
- *
- * The active block is keyed by its id, so React remounts a fresh node on
- * every swap — including from the empty state — and `corbits-rail-block-in`
- * (transform + opacity only) plays on each one.
- */
-export function RenderRail({ block, isPinned, onTogglePin, hasNewerBlock = false, onJumpToLatest, className }: RenderRailProps) {
-  if (block === null) {
-    return (
-      <aside
-        aria-label="Rendered content"
-        className={cn(
-          "flex min-h-0 w-[22rem] shrink-0 flex-col items-center justify-center border-l border-border p-6 text-center text-sm text-muted-foreground",
-          className,
-        )}
-      >
-        <span key="empty" className="[animation:corbits-rail-block-in_200ms_var(--ease-out)_both]">
-          Generative content will appear here.
-        </span>
-      </aside>
-    );
-  }
-
-  return (
-    <aside
-      aria-label="Rendered content"
-      className={cn("flex min-h-0 w-[22rem] shrink-0 flex-col gap-3 overflow-y-auto border-l border-border p-4", className)}
-    >
-      <div className="flex items-center justify-between gap-2">
-        {hasNewerBlock && onJumpToLatest ? <NewerResultAffordance onJumpToLatest={onJumpToLatest} /> : <span />}
-        <button
-          type="button"
-          onClick={onTogglePin}
-          aria-pressed={isPinned}
-          aria-label={isPinned ? "Unpin from rail" : "Pin to rail"}
-          className="grid size-7 shrink-0 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-        >
-          <PinIcon isPinned={isPinned} />
-        </button>
-      </div>
-      <div key={generativeBlockId(block)} className="[animation:corbits-rail-block-in_200ms_var(--ease-out)_both]">
-        <GenerativeBlockView block={block} />
-      </div>
-    </aside>
-  );
-}
diff --git a/src/ui/run-once-flow.tsx b/src/ui/run-once-flow.tsx
deleted file mode 100644
index a9e345f1..00000000
--- a/src/ui/run-once-flow.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { Button } from "./button.js";
-import { IntakeForm, intakeFieldsComplete, type IntakeField } from "./intake-form.js";
-
-export type RunOnceFlowProps = {
-  readonly fields: readonly IntakeField[];
-  readonly values: Record<string, unknown>;
-  readonly onValuesChange: (next: Record<string, unknown>) => void;
-  readonly onRun: () => void;
-  readonly onCancel: () => void;
-  readonly busy?: boolean;
-  /** Failure from the last attempt. Announced, not just shown. */
-  readonly error?: string | null;
-  readonly className?: string;
-};
-
-/**
- * Start one run, now, with these inputs — no recurrence, nothing saved.
- *
- * It submits through a real `<form>` rather than a click handler on a button:
- * that gets Enter-to-submit and the browser's own required-field handling for
- * free, and the `intakeFieldsComplete` check exists to disable the control
- * before the user reaches for it, not to replace validation.
- *
- * No confirmation step. The panel is already the confirmation — the user chose
- * a workflow, filled its inputs and pressed a button that says what it does.
- */
-export function RunOnceFlow({
-  fields,
-  values,
-  onValuesChange,
-  onRun,
-  onCancel,
-  busy = false,
-  error = null,
-  className,
-}: RunOnceFlowProps) {
-  const complete = intakeFieldsComplete(fields, values);
-
-  return (
-    <form
-      className={className}
-      onSubmit={(event) => {
-        event.preventDefault();
-        onRun();
-      }}
-    >
-      <p className="text-xs text-muted-foreground">
-        {fields.length === 0
-          ? "No inputs needed — this runs with its defaults."
-          : "Runs once, right now, with the inputs below. It will not repeat."}
-      </p>
-
-      <IntakeForm
-        fields={fields}
-        values={values}
-        onChange={onValuesChange}
-        disabled={busy}
-        className="mt-4"
-      />
-
-      {error === null ? null : (
-        <p role="alert" className="mt-3 text-sm text-destructive">
-          {error}
-        </p>
-      )}
-
-      <div className="mt-4 flex flex-wrap gap-2">
-        <Button type="submit" size="sm" disabled={busy || !complete}>
-          {busy ? "Starting…" : "Run once now"}
-        </Button>
-        <Button type="button" variant="ghost" size="sm" onClick={onCancel} disabled={busy}>
-          Cancel
-        </Button>
-      </div>
-    </form>
-  );
-}
diff --git a/src/ui/schedule-flow.tsx b/src/ui/schedule-flow.tsx
deleted file mode 100644
index 29b21df3..00000000
--- a/src/ui/schedule-flow.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import type { Recurrence } from "../lib/schedule.js";
-import { cn } from "../lib/utils.js";
-import { Button } from "./button.js";
-import { Input } from "./input.js";
-import { IntakeForm, intakeFieldsComplete, type IntakeField } from "./intake-form.js";
-import { RecurrenceInput } from "./recurrence-input.js";
-
-export type ScheduleDraft = {
-  readonly name: string;
-  readonly recurrence: Recurrence;
-  readonly values: Record<string, unknown>;
-};
-
-export type ScheduleFlowProps = {
-  readonly draft: ScheduleDraft;
-  readonly onDraftChange: (next: ScheduleDraft) => void;
-  /** The inputs the scheduled thing needs — the same fields a one-off run uses. */
-  readonly fields: readonly IntakeField[];
-  readonly onSave: () => void;
-  readonly onCancel: () => void;
-  /** Offered only when editing. Its absence is how this knows it is a create. */
-  readonly onDelete?: () => void;
-  readonly busy?: boolean;
-  readonly error?: string | null;
-  readonly className?: string;
-};
-
-/**
- * Create or edit a repeating job: what to call it, how often, and the inputs it
- * runs with.
- *
- * The same `IntakeForm` a one-off run uses. A schedule is a run plus a
- * recurrence, and giving the two surfaces separate field renderers is how they
- * start disagreeing about what a workflow needs.
- *
- * Create and edit are one component, distinguished by whether `onDelete` was
- * given. They differ by one button; two components would differ by one button
- * and then, quietly, by more.
- *
- * Delete sits apart from save and cancel, and is destructive-styled. It is the
- * one control here that loses something.
- */
-export function ScheduleFlow({
-  draft,
-  onDraftChange,
-  fields,
-  onSave,
-  onCancel,
-  onDelete,
-  busy = false,
-  error = null,
-  className,
-}: ScheduleFlowProps) {
-  const named = draft.name.trim().length > 0;
-  const complete = named && intakeFieldsComplete(fields, draft.values);
-
-  return (
-    <form
-      className={cn("flex flex-col gap-5", className)}
-      onSubmit={(event) => {
-        event.preventDefault();
-        if (complete) onSave();
-      }}
-    >
-      <div className="flex flex-col gap-1.5">
-        <label htmlFor="schedule-name" className="text-sm font-medium">
-          Name
-        </label>
-        <Input
-          id="schedule-name"
-          value={draft.name}
-          required
-          disabled={busy}
-          placeholder="Morning brief"
-          onChange={(event) => onDraftChange({ ...draft, name: event.target.value })}
-        />
-      </div>
-
-      <RecurrenceInput
-        value={draft.recurrence}
-        disabled={busy}
-        onChange={(recurrence) => onDraftChange({ ...draft, recurrence })}
-      />
-
-      <IntakeForm
-        fields={fields}
-        values={draft.values}
-        disabled={busy}
-        idPrefix="schedule"
-        onChange={(values) => onDraftChange({ ...draft, values })}
-      />
-
-      {error === null ? null : (
-        <p role="alert" className="text-sm text-destructive">
-          {error}
-        </p>
-      )}
-
-      <div className="flex flex-wrap items-center gap-2 border-t border-border pt-4">
-        <Button type="submit" size="sm" disabled={busy || !complete}>
-          {busy ? "Saving…" : onDelete === undefined ? "Create schedule" : "Save schedule"}
-        </Button>
-        <Button type="button" variant="ghost" size="sm" onClick={onCancel} disabled={busy}>
-          Cancel
-        </Button>
-        {onDelete === undefined ? null : (
-          <Button type="button" variant="destructive" size="sm" onClick={onDelete} disabled={busy} className="ml-auto">
-            Delete
-          </Button>
-        )}
-      </div>
-    </form>
-  );
-}
diff --git a/src/ui/schedule-form-layout.tsx b/src/ui/schedule-form-layout.tsx
deleted file mode 100644
index e4bfa2d4..00000000
--- a/src/ui/schedule-form-layout.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { ReactNode } from "react";
-
-import { cn } from "../lib/utils.js";
-
-export type ScheduleFormLayoutProps = {
-  readonly form: ReactNode;
-  readonly summary: ReactNode;
-  readonly footer?: ReactNode;
-  readonly className?: string;
-};
-
-/** Two-column create/edit layout: form body on the left, a sticky summary on
- * the right. The caller owns the form's fields and validation and the
- * summary's content — this is layout only. */
-export function ScheduleFormLayout({ form, summary, footer, className }: ScheduleFormLayoutProps) {
-  return (
-    <div className={cn("grid min-h-0 flex-1 gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(240px,320px)]", className)}>
-      <div className="min-w-0">
-        {form}
-        {footer === undefined ? null : <div className="mt-5">{footer}</div>}
-      </div>
-      <aside className="h-fit rounded-lg border border-border bg-card p-4 shadow-sm lg:sticky lg:top-4">{summary}</aside>
-    </div>
-  );
-}
-
-export type ScheduleFormSummaryRow = {
-  readonly label: string;
-  readonly value: ReactNode;
-};
-
-export type ScheduleFormSummaryProps = {
-  readonly title?: string;
-  readonly rows: readonly ScheduleFormSummaryRow[];
-  readonly actions?: ReactNode;
-  readonly className?: string;
-};
-
-/** The summary card's content — split from the layout so a caller can reuse
- * just the label/value list elsewhere (a confirmation dialog, say). */
-export function ScheduleFormSummary({ title = "Summary", rows, actions, className }: ScheduleFormSummaryProps) {
-  return (
-    <div className={cn("flex flex-col gap-3", className)}>
-      <p className="text-[10.5px] font-bold uppercase tracking-[0.05em] text-muted-foreground">{title}</p>
-      <dl className="flex flex-col gap-2">
-        {rows.map((row) => (
-          <div key={row.label} className="flex flex-col gap-0.5">
-            <dt className="text-[11px] font-semibold text-muted-foreground">{row.label}</dt>
-            <dd className="text-sm font-semibold">{row.value}</dd>
-          </div>
-        ))}
-      </dl>
-      {actions === undefined ? null : <div className="mt-2 flex flex-col gap-2">{actions}</div>}
-    </div>
-  );
-}
diff --git a/src/ui/schedule-header.tsx b/src/ui/schedule-header.tsx
deleted file mode 100644
index e295534a..00000000
--- a/src/ui/schedule-header.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { ReactNode } from "react";
-
-import { WORKFLOW_SCOPE_BADGE_TONE, workflowScopeLabel, type WorkflowScope } from "../lib/workflow-registry.js";
-import { Badge } from "./badge.js";
-import { InspectorHeader } from "./inspector-shell.js";
-import { WorkflowStatusBadge } from "./workflow-status-badge.js";
-
-export type ScheduleHeaderProps = {
-  readonly enabled: boolean;
-  readonly scope: WorkflowScope;
-  readonly title: string;
-  readonly description?: string;
-  readonly actions?: ReactNode;
-  readonly className?: string;
-};
-
-/** A schedule's header block — active/paused chip, scope pill, title and
- * caller-supplied actions — the schedule counterpart of `LiveRunHeader`,
- * reusable outside the inspector shell. */
-export function ScheduleHeader({ enabled, scope, title, description, actions, className }: ScheduleHeaderProps) {
-  return (
-    <InspectorHeader
-      className={className}
-      eyebrow={
-        <>
-          <WorkflowStatusBadge tone={enabled ? "running" : "paused"} label={enabled ? "Active" : "Paused"} />
-          <Badge tone={WORKFLOW_SCOPE_BADGE_TONE[scope]}>{workflowScopeLabel(scope)}</Badge>
-        </>
-      }
-      title={title}
-      description={description}
-      actions={actions}
-    />
-  );
-}
diff --git a/src/ui/schedule-inspector.tsx b/src/ui/schedule-inspector.tsx
deleted file mode 100644
index d9e6856d..00000000
--- a/src/ui/schedule-inspector.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import type { ReactNode } from "react";
-
-import type { WorkflowScope } from "../lib/workflow-registry.js";
-import { Button } from "./button.js";
-import { InspectorKv, InspectorPanelTitle, InspectorShell } from "./inspector-shell.js";
-import { ReadBlock } from "./read-block.js";
-import { ScheduleHeader } from "./schedule-header.js";
-
-export type ScheduleInspectorViewProps = {
-  readonly enabled: boolean;
-  readonly scope: WorkflowScope;
-  readonly title: string;
-  readonly description?: string;
-  readonly cadence: string;
-  readonly next?: string;
-  readonly last?: string;
-  readonly name?: string;
-  readonly scheduleId?: string;
-  /** Rendered under the details block — a recent-runs list from the caller. */
-  readonly recentRuns?: ReactNode;
-  readonly onEdit?: () => void;
-  readonly onRunNow?: () => void;
-  readonly onTogglePause?: () => void;
-  readonly className?: string;
-  readonly empty?: ReactNode;
-};
-
-/**
- * A schedule's inspector — the composition wrapper, and nothing more:
- * `InspectorShell` for the frame, `ScheduleHeader` for the header row,
- * `ReadBlock`/`InspectorKv` for the read-only facts, each importable on its
- * own.
- */
-export function ScheduleInspectorView({
-  enabled,
-  scope,
-  title,
-  description,
-  cadence,
-  next,
-  last,
-  name,
-  scheduleId,
-  recentRuns,
-  onEdit,
-  onRunNow,
-  onTogglePause,
-  className,
-  empty,
-}: ScheduleInspectorViewProps) {
-  if (empty !== undefined) {
-    return <InspectorShell empty={empty} className={className} />;
-  }
-
-  const cadenceSub = [next === undefined ? null : `Next ${next}`, last === undefined ? null : `last ${last}`]
-    .filter((part): part is string => part !== null)
-    .join(" · ");
-
-  return (
-    <InspectorShell
-      className={className}
-      header={
-        <ScheduleHeader
-          enabled={enabled}
-          scope={scope}
-          title={title}
-          description={description}
-          actions={
-            <>
-              {onEdit === undefined ? null : (
-                <Button size="sm" onClick={onEdit}>
-                  Edit
-                </Button>
-              )}
-              {onRunNow === undefined ? null : (
-                <Button variant="outline" size="sm" onClick={onRunNow}>
-                  Run now
-                </Button>
-              )}
-              {onTogglePause === undefined ? null : (
-                <Button variant="outline" size="sm" onClick={onTogglePause}>
-                  {enabled ? "Pause" : "Resume"}
-                </Button>
-              )}
-            </>
-          }
-        />
-      }
-    >
-      <InspectorPanelTitle>Overview</InspectorPanelTitle>
-      <ReadBlock label="Cadence" value={cadence} mono sub={cadenceSub === "" ? undefined : cadenceSub} />
-
-      <InspectorPanelTitle>Details</InspectorPanelTitle>
-      <InspectorKv
-        rows={[
-          { label: "Name", value: name?.trim() ? name : "Default (workflow name)" },
-          { label: "Scope", value: scope === "tenant" ? "Everyone" : "Just me" },
-        ]}
-      />
-
-      {recentRuns}
-
-      {scheduleId === undefined && last === undefined ? null : (
-        <>
-          <InspectorPanelTitle>Meta</InspectorPanelTitle>
-          <InspectorKv
-            rows={[
-              ...(scheduleId === undefined ? [] : [{ label: "Id", value: scheduleId, mono: true }]),
-              ...(last === undefined ? [] : [{ label: "Last fire", value: last }]),
-            ]}
-          />
-        </>
-      )}
-    </InspectorShell>
-  );
-}
diff --git a/src/ui/schedule-list.tsx b/src/ui/schedule-list.tsx
deleted file mode 100644
index 8000ba7e..00000000
--- a/src/ui/schedule-list.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { useCollectionState } from "../hooks/use-collection-state.js";
-import type { CollectionRequest } from "../lib/data-port.js";
-import { formatRelativeTime } from "../lib/relative-time.js";
-import { describeRecurrence, type Schedule } from "../lib/schedule.js";
-import { cn } from "../lib/utils.js";
-import { Button } from "./button.js";
-import { RunNowButton } from "./run-now-button.js";
-import { Switch } from "./switch.js";
-
-export type ScheduleListProps = {
-  readonly request: CollectionRequest<Schedule>;
-  readonly onEdit: (schedule: Schedule) => void;
-  readonly onToggleEnabled: (schedule: Schedule, enabled: boolean) => void;
-  /** Run ahead of the next occurrence. Omit to hide the control. */
-  readonly onRunNow?: (schedule: Schedule) => void | Promise<void>;
-  readonly empty?: React.ReactNode;
-  readonly now?: number;
-  readonly className?: string;
-};
-
-/**
- * The user's repeating jobs.
- *
- * Each row says when it next runs, in words and as a time. A schedule list that
- * only shows "Every 2 days" leaves the user to work out whether that means
- * tonight, and the whole reason to open this page is to find out.
- *
- * The pause switch is not behind an edit screen. Turning a schedule off is the
- * most common thing anyone does here and the most urgent — it is usually done
- * because something is going wrong.
- */
-export function ScheduleList({
-  request,
-  onEdit,
-  onToggleEnabled,
-  onRunNow,
-  empty,
-  now,
-  className,
-}: ScheduleListProps) {
-  const { state, isFetching, refetch } = useCollectionState(request);
-
-  if (state.status === "loading") {
-    return (
-      <p role="status" className="px-3 py-6 text-sm text-muted-foreground">
-        Loading schedules…
-      </p>
-    );
-  }
-
-  if (state.status === "error") {
-    return (
-      <div className="px-3 py-6">
-        <p className="text-sm">{state.error.message}</p>
-        <Button variant="outline" size="sm" className="mt-2" onClick={refetch}>
-          Try again
-        </Button>
-      </div>
-    );
-  }
-
-  if (state.status === "empty") {
-    return (
-      <p className="px-3 py-8 text-center text-sm text-muted-foreground">
-        {empty ?? "Nothing scheduled yet."}
-      </p>
-    );
-  }
-
-  return (
-    <ul
-      aria-label="Schedules"
-      aria-busy={isFetching}
-      className={cn("flex flex-col divide-y divide-border", className)}
-    >
-      {state.items.map((schedule) => (
-        <li key={schedule.id} className="flex flex-wrap items-center gap-3 py-3 first:pt-0 last:pb-0">
-          <Switch
-            checked={schedule.enabled}
-            label={`${schedule.enabled ? "Pause" : "Resume"} ${schedule.name}`}
-            onCheckedChange={(enabled) => onToggleEnabled(schedule, enabled)}
-          />
-
-          <button
-            type="button"
-            onClick={() => onEdit(schedule)}
-            className="flex min-w-0 flex-1 flex-col items-start gap-0.5 text-left"
-          >
-            <span className={cn("truncate text-sm font-medium", !schedule.enabled && "text-muted-foreground")}>
-              {schedule.name}
-            </span>
-            <span className="truncate text-xs text-muted-foreground">
-              {describeRecurrence(schedule.recurrence)}
-              {schedule.enabled && schedule.nextRunAt !== null
-                ? ` · next ${formatRelativeTime(schedule.nextRunAt, now)}`
-                : " · paused"}
-            </span>
-          </button>
-
-          {onRunNow === undefined ? null : (
-            <RunNowButton
-              variant="outline"
-              size="sm"
-              disabled={!schedule.enabled}
-              onRun={() => onRunNow(schedule)}
-              label="Run now"
-              doneLabel="Started"
-            />
-          )}
-        </li>
-      ))}
-    </ul>
-  );
-}
diff --git a/src/ui/section-nav.tsx b/src/ui/section-nav.tsx
deleted file mode 100644
index 5abd9a9d..00000000
--- a/src/ui/section-nav.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { cn } from "../lib/utils.js";
-
-export type SectionNavItem = {
-  readonly id: string;
-  readonly label: string;
-  readonly href: string;
-  /**
-   * An in-page anchor rather than a route. Marked `aria-current="location"`
-   * instead of `"page"` when active — the user has not navigated anywhere, they
-   * have scrolled, and the two are different facts.
-   */
-  readonly anchor?: boolean;
-};
-
-export type SectionNavGroup = {
-  readonly heading?: string;
-  readonly items: readonly SectionNavItem[];
-};
-
-export type SectionNavProps = {
-  /** Names the nav. Required — a settings page may hold more than one. */
-  readonly label: string;
-  readonly groups: readonly SectionNavGroup[];
-  readonly activeId: string | null;
-  readonly className?: string;
-};
-
-/**
- * The in-page rail for a sectioned area: settings, a library, a long
- * configuration page.
- *
- * Not the `Sidebar` parts, and the difference is the container. `Sidebar` is
- * the app's chrome — a fixed-width `<aside>` with a collapsed icon-only mode
- * and its own surface. This lives inside the page content, scrolls
- * horizontally when the viewport is narrow instead of collapsing, and has no
- * surface of its own. Sharing one component would mean a `variant` prop that
- * switches nearly every class, which is two components wearing one name.
- *
- * A group the viewer may not use should be left out of `groups` entirely
- * rather than passed and rendered disabled. A greyed row advertises something
- * the user cannot have and invites them to go looking for why.
- */
-export function SectionNav({ label, groups, activeId, className }: SectionNavProps) {
-  return (
-    <nav aria-label={label} className={cn("flex flex-col gap-1", className)}>
-      {groups.map((group, index) => (
-        <div
-          key={group.heading ?? `group-${index}`}
-          className={cn("flex flex-col gap-1", index > 0 && "mt-2 border-t border-border pt-2")}
-        >
-          {group.heading === undefined ? null : (
-            <p className="px-3 pt-1 pb-1 text-[11px] font-medium tracking-wide text-muted-foreground uppercase">
-              {group.heading}
-            </p>
-          )}
-          {/* Horizontal strip on narrow screens, column from lg. A settings
-              rail that stacks into a tall list pushes the content it navigates
-              off the first screen entirely. */}
-          <div className="flex gap-1 overflow-x-auto pb-2 lg:flex-col lg:overflow-visible lg:pb-0">
-            {group.items.map((item) => {
-              const active = item.id === activeId;
-              return (
-                <a
-                  key={item.id}
-                  href={item.href}
-                  aria-current={active ? (item.anchor === true ? "location" : "page") : undefined}
-                  className={cn(
-                    "shrink-0 rounded-md px-3 py-2 text-sm font-medium transition-colors",
-                    active
-                      ? "bg-primary/10 text-primary-emphasis"
-                      : "text-muted-foreground hover:bg-muted hover:text-foreground",
-                  )}
-                >
-                  {item.label}
-                </a>
-              );
-            })}
-          </div>
-        </div>
-      ))}
-    </nav>
-  );
-}
-
-/**
- * A sectioned area: the rail beside the content, stacking on narrow screens.
- *
- * The rail sticks on wide viewports so it stays reachable down a long settings
- * page, and does not on narrow ones, where a sticky element would eat a third
- * of the screen.
- */
-export function SectionNavLayout({
-  nav,
-  children,
-  className,
-}: {
-  nav: React.ReactNode;
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <div className={cn("flex flex-col gap-8 lg:flex-row lg:gap-8", className)}>
-      <div className="lg:sticky lg:top-4 lg:w-56 lg:shrink-0 lg:self-start">{nav}</div>
-      <div className="flex min-w-0 flex-1 flex-col gap-6">{children}</div>
-    </div>
-  );
-}
diff --git a/src/ui/sidebar-item-row.tsx b/src/ui/sidebar-item-row.tsx
index 9d8e165e..0689ffc5 100644
--- a/src/ui/sidebar-item-row.tsx
+++ b/src/ui/sidebar-item-row.tsx
@@ -15,9 +15,8 @@ export type SidebarItemRowProps = {
   readonly selected?: boolean;
   /**
    * Set right before removing the row from its list, and keep it mounted for
-   * one more frame (~150ms) so `corbits-row-out` gets to play. `use-sidebar-
-   * panel` does not manage this — list membership is the consumer's data,
-   * not the panel's.
+   * one more frame (~150ms) so the leave transition gets to play. List
+   * membership is the consumer's data — nothing here manages it for you.
    */
   readonly leaving?: boolean;
   readonly onSelect?: () => void;
diff --git a/src/ui/sidebar-rail.test.tsx b/src/ui/sidebar-rail.test.tsx
deleted file mode 100644
index 9a61299c..00000000
--- a/src/ui/sidebar-rail.test.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { describe, expect, test } from "bun:test";
-
-import { SidebarRail, type SidebarRailItem } from "./sidebar-rail.js";
-
-type Mounted = {
-  container: HTMLElement;
-  unmount: () => void;
-};
-
-function render(node: React.ReactElement): Mounted {
-  const container = document.createElement("div");
-  document.body.appendChild(container);
-  let root!: Root;
-  act(() => {
-    root = createRoot(container);
-    root.render(node);
-  });
-  return {
-    container,
-    unmount: () => {
-      act(() => root.unmount());
-      container.remove();
-    },
-  };
-}
-
-describe("SidebarRail item rest props", () => {
-  test("forwards data-* attributes onto the rendered button", () => {
-    const items: readonly SidebarRailItem[] = [
-      { id: "channels", label: "Channels", icon: null, "data-ctx-target": "rail-channels" },
-      { id: "routines", label: "Routines", icon: null },
-    ];
-    const mounted = render(<SidebarRail items={items} activeId="channels" onSelect={() => {}} />);
-    const target = mounted.container.querySelector("[data-ctx-target='rail-channels']");
-    expect(target).not.toBeNull();
-    expect(target?.tagName).toBe("BUTTON");
-    mounted.unmount();
-  });
-
-  test("renders each item's id as the button's DOM id", () => {
-    const items: readonly SidebarRailItem[] = [{ id: "channels", label: "Channels", icon: null }];
-    const mounted = render(<SidebarRail items={items} activeId="channels" onSelect={() => {}} />);
-    const button = mounted.container.querySelector("button");
-    expect(button?.id).toBe("channels");
-    mounted.unmount();
-  });
-
-  test("a consumer's data-* attribute cannot clobber the component's own onClick handling", () => {
-    let selected = "";
-    const items: readonly SidebarRailItem[] = [{ id: "channels", label: "Channels", icon: null, "data-ctx-target": "rail-channels" }];
-    const mounted = render(<SidebarRail items={items} activeId="" onSelect={(id) => (selected = id)} />);
-    const button = mounted.container.querySelector("button") as HTMLButtonElement;
-    act(() => {
-      button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-    });
-    expect(selected).toBe("channels");
-    mounted.unmount();
-  });
-});
diff --git a/src/ui/sidebar-rail.tsx b/src/ui/sidebar-rail.tsx
deleted file mode 100644
index a897b938..00000000
--- a/src/ui/sidebar-rail.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import { useId } from "react";
-import type * as React from "react";
-
-import { cn } from "../lib/utils.js";
-
-export type SidebarRailItem = {
-  readonly id: string;
-  /** The accessible name and the tooltip text — one string, not two. */
-  readonly label: string;
-  readonly icon: React.ReactNode;
-  /** An unread dot or count. Rendered small and off to the icon's corner. */
-  readonly badge?: React.ReactNode;
-} & Omit<React.ComponentPropsWithoutRef<"button">, "id" | "type" | "onClick" | "children" | "className"> & {
-    /** Arbitrary `data-*` targeting attributes, e.g. `data-ctx-target` for a tour or spotlight. */
-    readonly [key: `data-${string}`]: string | number | boolean | undefined;
-  };
-
-/** Props this component manages itself — never spread onto the button, so an item can never clobber them by accident. */
-const OWN_ITEM_KEYS = new Set(["id", "label", "icon", "badge"]);
-
-function restItemProps(item: SidebarRailItem): Record<string, unknown> {
-  return Object.fromEntries(Object.entries(item).filter(([key]) => !OWN_ITEM_KEYS.has(key)));
-}
-
-export type SidebarRailProps = {
-  readonly items: readonly SidebarRailItem[];
-  readonly activeId: string;
-  readonly onSelect: (id: string) => void;
-  /** Bench switcher, identity avatar — whatever sits below the page icons. */
-  readonly footer?: React.ReactNode;
-  /** Names the rail's nav landmark. Defaults to "Pages". */
-  readonly label?: string;
-  /**
-   * Renders each item's label as a small caption under its icon instead of
-   * tooltip-only text. The rail widens modestly (56px → 72px) to fit the
-   * caption without wrapping — still a rail, never a full sidebar — and the
-   * hover/focus tooltip is dropped since the label is already on screen.
-   */
-  readonly showLabels?: boolean;
-  readonly className?: string;
-};
-
-/**
- * The first column: which top-level page you are on. Icon-only by default at
- * 56px; `showLabels` switches to a 72px wide caption-under-icon variant for
- * apps that want the page name always visible rather than tooltip-only.
- *
- * Each button is a real `<button>` in document order, so Tab and arrow-free
- * keyboard navigation both work with no roving-tabindex machinery. The
- * tooltip (icon-only mode) is pure CSS (`group-hover`/`group-focus-within`)
- * tied to the button by `aria-describedby`, so it never depends on JS having
- * run.
- */
-export function SidebarRail({
-  items,
-  activeId,
-  onSelect,
-  footer,
-  label = "Pages",
-  showLabels = false,
-  className,
-}: SidebarRailProps) {
-  const railId = useId();
-
-  return (
-    <nav
-      data-slot="sidebar-rail"
-      aria-label={label}
-      className={cn(
-        "flex h-full shrink-0 flex-col items-center border-r border-border bg-card py-2",
-        showLabels ? "w-[72px]" : "w-14",
-        className,
-      )}
-    >
-      <ul className="flex w-full flex-col items-center gap-1">
-        {items.map((item) => {
-          const active = item.id === activeId;
-          const tooltipId = `${railId}-${item.id}-tooltip`;
-          return (
-            <li key={item.id} className="group relative w-full">
-              <button
-                {...restItemProps(item)}
-                type="button"
-                id={item.id}
-                data-slot="sidebar-rail-item"
-                aria-current={active ? "page" : undefined}
-                aria-describedby={showLabels ? undefined : tooltipId}
-                onClick={() => onSelect(item.id)}
-                className={cn(
-                  "relative mx-auto flex items-center justify-center rounded-md transition-colors active:brightness-95",
-                  "[&_svg]:size-5 [&_svg]:shrink-0",
-                  showLabels
-                    ? "h-14 w-16 flex-col gap-1 px-1"
-                    : "size-10",
-                  active
-                    ? "bg-primary/10 text-primary-emphasis"
-                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
-                )}
-              >
-                {item.icon}
-                {showLabels ? (
-                  <span
-                    data-slot="sidebar-rail-item-label"
-                    className="max-w-full truncate text-[10px] leading-none font-medium"
-                  >
-                    {item.label}
-                  </span>
-                ) : null}
-                {item.badge === undefined ? null : (
-                  <span className="absolute top-1 right-1.5">{item.badge}</span>
-                )}
-              </button>
-              {showLabels ? null : (
-                <span
-                  id={tooltipId}
-                  role="tooltip"
-                  className={cn(
-                    "pointer-events-none absolute top-1/2 left-full z-50 ml-2 -translate-y-1/2 rounded-md border border-border",
-                    "bg-popover px-2 py-1 text-xs whitespace-nowrap text-popover-foreground opacity-0 shadow-lg transition-opacity",
-                    // Hover-in is gated to fine pointers and waits out a short
-                    // delay so a touch tap or a passing cursor never triggers
-                    // it; hiding (removing these classes) has no delay so the
-                    // tooltip clears the instant the pointer leaves. Focus is
-                    // unconditioned and immediate — a keyboard user should
-                    // never wait for their own tab stop.
-                    "[@media(pointer:fine)]:group-hover:opacity-100 [@media(pointer:fine)]:group-hover:delay-300",
-                    "group-focus-within:opacity-100",
-                  )}
-                >
-                  {item.label}
-                </span>
-              )}
-            </li>
-          );
-        })}
-      </ul>
-
-      {footer === undefined ? null : <div className="mt-auto flex w-full flex-col items-center gap-1">{footer}</div>}
-    </nav>
-  );
-}
diff --git a/src/ui/sidebar-section.tsx b/src/ui/sidebar-section.tsx
deleted file mode 100644
index 8a16a212..00000000
--- a/src/ui/sidebar-section.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { ChevronRight, Plus } from "lucide-react";
-import { useId } from "react";
-import type * as React from "react";
-
-import { cn } from "../lib/utils.js";
-
-export type SidebarPanelSectionProps = {
-  readonly label: string;
-  readonly children: React.ReactNode;
-  /** Shows a trailing "+" affordance — "Add channel", "New view". */
-  readonly onAdd?: () => void;
-  /** Text under `aria-label` on the add control. Defaults to `Add ${label}`. */
-  readonly addLabel?: string;
-  /** Omit to render an always-open section with no disclosure control. */
-  readonly collapsed?: boolean;
-  readonly onToggleCollapse?: () => void;
-  readonly className?: string;
-};
-
-/**
- * One labelled group inside `SidebarPanelBody` — "Channels", "Direct
- * messages", "Recent runs". The label is the house micro-label scale
- * (11px, uppercase, wide tracking), matching `ui/sidebar`'s `SidebarSection`
- * so the two rails read as the same design language even though they never
- * share a component.
- *
- * Collapse is a prop, not internal state: `use-sidebar-panel` is the thing
- * that remembers which sections are open, so two sections never end up
- * disagreeing with each other's idea of "collapsed" after a re-render.
- *
- * Not `ui/sidebar`'s `SidebarSection` — that's the single-column family's section.
- */
-export function SidebarPanelSection({
-  label,
-  children,
-  onAdd,
-  addLabel,
-  collapsed = false,
-  onToggleCollapse,
-  className,
-}: SidebarPanelSectionProps) {
-  const labelId = useId();
-
-  return (
-    <div data-slot="sidebar-panel-section" className={cn("px-2 py-1.5", className)}>
-      <div className="flex items-center justify-between gap-1 px-1">
-        {onToggleCollapse === undefined ? (
-          <p id={labelId} className="text-[11px] font-semibold tracking-[0.12em] text-muted-foreground uppercase">
-            {label}
-          </p>
-        ) : (
-          <button
-            type="button"
-            id={labelId}
-            aria-expanded={!collapsed}
-            onClick={onToggleCollapse}
-            className="-my-2 flex items-center gap-1 rounded-sm py-2 text-[11px] font-semibold tracking-[0.12em] text-muted-foreground uppercase transition-colors hover:text-foreground active:brightness-95"
-          >
-            <ChevronRight
-              aria-hidden
-              className={cn("size-3 shrink-0 transition-transform", !collapsed && "rotate-90")}
-            />
-            {label}
-          </button>
-        )}
-
-        {onAdd === undefined ? null : (
-          <button
-            type="button"
-            aria-label={addLabel ?? `Add ${label}`}
-            onClick={onAdd}
-            className={cn(
-              "relative grid size-5 shrink-0 place-items-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground active:brightness-95",
-              // The visual target stays 20px; `after:` pads the hit area out to
-              // 40px (10px on every side) without growing the icon itself.
-              "after:absolute after:-inset-2.5 after:content-['']",
-            )}
-          >
-            <Plus aria-hidden className="size-3.5" />
-          </button>
-        )}
-      </div>
-
-      {collapsed ? null : (
-        <ul aria-labelledby={labelId} className="flex flex-col gap-0.5 pt-0.5">
-          {children}
-        </ul>
-      )}
-    </div>
-  );
-}
diff --git a/src/ui/stat-tile.tsx b/src/ui/stat-tile.tsx
deleted file mode 100644
index 18b6befe..00000000
--- a/src/ui/stat-tile.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { ArrowDown, ArrowUp, Minus } from "lucide-react";
-import type { ReactNode } from "react";
-
-import { cn } from "../lib/utils.js";
-import { Sparkline } from "./sparkline.js";
-
-export type StatDelta = {
-  /** Signed change, already computed. `0` renders as "no change". */
-  readonly value: number;
-  /** What it is measured against — "vs last week". */
-  readonly period: string;
-  /**
-   * Whether an increase is a good thing. Error rate and cost say `false`;
-   * revenue and uptime say `true`. There is no safe default, which is why this
-   * is required — guessing paints a rising error rate green.
-   */
-  readonly upIsGood: boolean;
-  readonly format?: (value: number) => string;
-};
-
-export type StatTileProps = {
-  /** Sentence case, no trailing colon. */
-  readonly label: string;
-  /** Pre-formatted. The tile does not know your units. */
-  readonly value: ReactNode;
-  readonly delta?: StatDelta;
-  /** A short trend behind the number — twelve points or so. */
-  readonly trend?: readonly number[];
-  readonly className?: string;
-};
-
-/**
- * One number, said properly: what it is, what it is now, and which way it is
- * going.
- *
- * The direction is carried by an arrow *and* by words, never by colour alone. A
- * green number and a red number are the same number to a substantial minority of
- * readers, and "which way is this going" is the entire content of a delta.
- *
- * `upIsGood` is required rather than defaulted because the mapping from
- * direction to sentiment is a property of the metric, not of the component. The
- * common default — up is green — is wrong for every cost, latency and failure
- * metric on a typical dashboard.
- *
- * The value uses the font's proportional figures, not `tabular-nums`. Tabular
- * gives every digit the width of a zero, which at display size makes `121` look
- * like it has fallen apart; tabular belongs in columns that must align, which a
- * tile is not.
- */
-export function StatTile({ label, value, delta, trend, className }: StatTileProps) {
-  return (
-    <div className={cn("flex flex-col gap-1.5 rounded-lg border border-border bg-card p-4", className)}>
-      <p className="text-xs text-muted-foreground">{label}</p>
-      <p className="text-2xl leading-none font-semibold">{value}</p>
-      {delta === undefined ? null : <Delta {...delta} />}
-      {trend === undefined || trend.length < 2 ? null : (
-        <Sparkline values={trend} summary={`${label} trend over the last ${trend.length} periods`} className="mt-1" />
-      )}
-    </div>
-  );
-}
-
-function Delta({ value, period, upIsGood, format }: StatDelta) {
-  const rendered = format === undefined ? `${value > 0 ? "+" : ""}${value.toLocaleString()}` : format(value);
-  const direction = value === 0 ? "flat" : value > 0 ? "up" : "down";
-  const Icon = direction === "flat" ? Minus : direction === "up" ? ArrowUp : ArrowDown;
-  const good = direction === "flat" ? null : (direction === "up") === upIsGood;
-
-  return (
-    <p
-      className={cn(
-        "flex items-center gap-1 text-xs",
-        good === null ? "text-muted-foreground" : good ? "text-primary-emphasis" : "text-destructive",
-      )}
-    >
-      <Icon className="size-3" aria-hidden />
-      <span className="tabular-nums">{rendered}</span>
-      <span className="text-muted-foreground">{period}</span>
-      {/* The direction in words, for anyone the arrow and the colour do not
-          reach. Not visible: the arrow already says it on screen. */}
-      <span className="sr-only">
-        {direction === "flat" ? "no change" : direction === "up" ? "up" : "down"}
-        {good === null ? "" : good ? ", better" : ", worse"}
-      </span>
-    </p>
-  );
-}
diff --git a/src/ui/step-graph-node.tsx b/src/ui/step-graph-node.tsx
deleted file mode 100644
index de9df9e1..00000000
--- a/src/ui/step-graph-node.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { cn } from "../lib/utils.js";
-
-export type StepGraphNodeKind = "auto" | "agent" | "human";
-export type StepGraphNodeStatus = "pending" | "running" | "completed" | "failed";
-
-const KIND_LABEL: Record<StepGraphNodeKind, string> = {
-  auto: "Automated",
-  agent: "AI agent",
-  human: "Your input",
-};
-
-const KIND_GLYPH: Record<StepGraphNodeKind, string> = { auto: "●", agent: "◆", human: "★" };
-
-// Kind colours: auto stays neutral ink, agent takes the info blue, human
-// takes the accent orange that marks "needs a person" everywhere else in the
-// registry — the same three-way split the status badge's tones draw on.
-const CHIP_CLASS: Record<StepGraphNodeKind, string> = {
-  auto: "border-border bg-card",
-  agent: "border-accent bg-accent/40",
-  human: "border-primary-emphasis/50 bg-primary/10",
-};
-
-const BADGE_CLASS: Record<StepGraphNodeKind, string> = {
-  auto: "text-muted-foreground",
-  agent: "text-accent-foreground",
-  human: "text-primary-emphasis",
-};
-
-const STATUS_RING_CLASS: Record<StepGraphNodeStatus, string> = {
-  completed: "ring-2 ring-success/70",
-  running: "ring-2 ring-primary-emphasis",
-  failed: "ring-2 ring-destructive",
-  pending: "ring-1 ring-input",
-};
-
-function statusGlyph(status: StepGraphNodeStatus | undefined): string | null {
-  if (status === "completed") return "✓";
-  if (status === "failed") return "!";
-  if (status === "running") return "…";
-  return null;
-}
-
-export type StepGraphNodeProps = {
-  readonly title: string;
-  readonly kind: StepGraphNodeKind;
-  readonly status?: StepGraphNodeStatus;
-  readonly index: number;
-  readonly width: number;
-  readonly minHeight: number;
-  readonly left: number;
-  readonly top: number;
-  readonly className?: string;
-};
-
-/** One node in the step graph, absolutely positioned by the caller's layout
- * math. Kept apart from the graph itself so a caller wanting a single node
- * preview (a hover card, say) can render exactly this. */
-export function StepGraphNode({ title, kind, status, index, width, minHeight, left, top, className }: StepGraphNodeProps) {
-  const mark = statusGlyph(status);
-  return (
-    <li
-      className={cn(
-        "absolute flex items-center gap-2.5 rounded-lg border px-2.5 py-2",
-        CHIP_CLASS[kind],
-        status === undefined ? "" : STATUS_RING_CLASS[status],
-        className,
-      )}
-      style={{ width, minHeight, left, top }}
-    >
-      <span aria-hidden className="relative grid size-7 shrink-0 place-items-center rounded-md border border-border bg-card text-[10px] font-bold tabular-nums">
-        {mark ?? index + 1}
-      </span>
-      <div className="flex min-w-0 flex-col">
-        <span className="truncate text-[12.5px] font-semibold leading-tight">{title}</span>
-        <span className={cn("flex items-center gap-1 text-[10.5px] font-bold uppercase tracking-[0.05em]", BADGE_CLASS[kind])}>
-          <span aria-hidden>{KIND_GLYPH[kind]}</span>
-          {KIND_LABEL[kind]}
-        </span>
-      </div>
-    </li>
-  );
-}
diff --git a/src/ui/step-graph.tsx b/src/ui/step-graph.tsx
deleted file mode 100644
index 3b5bfecb..00000000
--- a/src/ui/step-graph.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { useId, useMemo } from "react";
-
-import { buildStepGraphEdgePath, sequentialStepEdges } from "../lib/chart-geometry.js";
-import { computeStepGraphLayout, STEP_GRAPH_DENSITY, stepGraphNodeOffset } from "../lib/step-graph-layout.js";
-import { StepGraphNode, type StepGraphNodeKind, type StepGraphNodeStatus } from "./step-graph-node.js";
-
-export type StepGraphStep = {
-  readonly id: string;
-  readonly title: string;
-  readonly kind: StepGraphNodeKind;
-  readonly status?: StepGraphNodeStatus;
-};
-
-export type StepGraphEdge = { readonly from: string; readonly to: string };
-
-export type StepGraphProps = {
-  readonly steps: readonly StepGraphStep[];
-  /** Defaults to a straight chain through `steps` in order. */
-  readonly edges?: readonly StepGraphEdge[];
-  readonly density?: "compact" | "expanded";
-  readonly emptyMessage?: string;
-  readonly className?: string;
-};
-
-/**
- * A workflow's steps as a small node-and-edge diagram: nodes in run order,
- * connectors drawn between them. `StepGraphNode` renders each node and
- * `lib/step-graph-layout` computes the geometry; this component only wires
- * the two together and draws the SVG connectors.
- */
-export function StepGraph({
-  steps,
-  edges,
-  density = "compact",
-  emptyMessage = "This workflow has no preview available. You can still run it.",
-  className,
-}: StepGraphProps) {
-  const labelId = useId();
-  const spec = STEP_GRAPH_DENSITY[density];
-
-  const resolvedEdges = useMemo(
-    () => (edges !== undefined && edges.length > 0 ? edges : sequentialStepEdges(steps.map((step) => step.id))),
-    [edges, steps],
-  );
-
-  const layout = useMemo(() => computeStepGraphLayout(steps.length, spec), [steps.length, spec]);
-
-  const idToIndex = useMemo(() => new Map(steps.map((step, index) => [step.id, index])), [steps]);
-
-  if (steps.length === 0) {
-    return <p className={className}>{emptyMessage}</p>;
-  }
-
-  return (
-    <figure aria-labelledby={labelId} className={className}>
-      <p id={labelId} className="sr-only">
-        {`Workflow steps: ${steps.map((step, index) => `${index + 1}. ${step.title}`).join("; ")}`}
-      </p>
-      <div className={density === "compact" ? "overflow-x-auto pb-1" : "overflow-y-auto"}>
-        <div className="relative" style={{ width: layout.width, height: layout.height, minWidth: "100%" }}>
-          <svg
-            aria-hidden
-            width={layout.width}
-            height={layout.height}
-            viewBox={`0 0 ${layout.width} ${layout.height}`}
-            className="pointer-events-none absolute left-0 top-0 text-border"
-          >
-            <defs>
-              <marker id={`${labelId}-arrow`} markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
-                <path d="M0,0 L6,3 L0,6 Z" className="fill-border" />
-              </marker>
-            </defs>
-            {resolvedEdges.map((edge) => {
-              const fromIdx = idToIndex.get(edge.from);
-              const toIdx = idToIndex.get(edge.to);
-              if (fromIdx === undefined || toIdx === undefined) return null;
-              const fromCenter = layout.centers[fromIdx];
-              const toCenter = layout.centers[toIdx];
-              if (fromCenter === undefined || toCenter === undefined) return null;
-              const d = buildStepGraphEdgePath(fromCenter, toCenter, spec.nodeInset);
-              if (d === "") return null;
-              return (
-                <path
-                  key={`${edge.from}-${edge.to}`}
-                  d={d}
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth={1.5}
-                  strokeLinecap="round"
-                  markerEnd={`url(#${labelId}-arrow)`}
-                />
-              );
-            })}
-          </svg>
-
-          <ol className="relative m-0 list-none p-0">
-            {steps.map((step, index) => {
-              const { left, top } = stepGraphNodeOffset(index, spec);
-              return (
-                <StepGraphNode
-                  key={step.id}
-                  title={step.title}
-                  kind={step.kind}
-                  status={step.status}
-                  index={index}
-                  width={spec.nodeWidth}
-                  minHeight={spec.nodeHeight}
-                  left={left}
-                  top={top}
-                />
-              );
-            })}
-          </ol>
-        </div>
-      </div>
-    </figure>
-  );
-}
diff --git a/src/ui/step-primitives.tsx b/src/ui/step-primitives.tsx
deleted file mode 100644
index 12fcadad..00000000
--- a/src/ui/step-primitives.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import type * as React from "react";
-
-import { cn } from "../lib/utils.js";
-
-/**
- * Low-level, un-opinionated step-list building blocks — a compound API
- * (`Steps` / `Step` / `StepIndicator` / `StepLabel` / `StepTitle` /
- * `StepDescription`) for a caller assembling a bespoke step layout that
- * neither `HorizontalStepper` nor `StepList` fits. Each piece is a plain
- * styled element with no shared state between them; the caller wires status
- * into each `StepIndicator` itself.
- */
-
-export type StepsProps = React.ComponentProps<"div"> & { readonly orientation?: "horizontal" | "vertical" };
-
-export function Steps({ className, orientation = "horizontal", ...props }: StepsProps) {
-  return <div className={cn("flex", orientation === "horizontal" ? "gap-2" : "flex-col gap-4", className)} {...props} />;
-}
-
-export function Step({ className, ...props }: React.ComponentProps<"div">) {
-  return <div className={cn("flex items-center gap-3", className)} {...props} />;
-}
-
-export type StepIndicatorStatus = "complete" | "active" | "incomplete";
-
-export type StepIndicatorProps = React.ComponentProps<"div"> & {
-  readonly status?: StepIndicatorStatus;
-  readonly index?: number;
-};
-
-export function StepIndicator({ className, status = "incomplete", index, ...props }: StepIndicatorProps) {
-  return (
-    <div
-      className={cn(
-        "flex size-8 items-center justify-center rounded-full text-sm font-semibold",
-        status === "complete" && "bg-success text-success-foreground",
-        status === "active" && "border-2 border-primary-emphasis text-primary-emphasis",
-        status === "incomplete" && "border-2 border-border text-muted-foreground",
-        className,
-      )}
-      {...props}
-    >
-      {status === "complete" ? "✓" : index === undefined ? "" : index + 1}
-    </div>
-  );
-}
-
-export function StepLabel({ className, ...props }: React.ComponentProps<"div">) {
-  return <div className={cn("flex flex-col gap-1", className)} {...props} />;
-}
-
-export function StepTitle({ className, ...props }: React.ComponentProps<"h3">) {
-  return <h3 className={cn("text-sm font-semibold", className)} {...props} />;
-}
-
-export function StepDescription({ className, ...props }: React.ComponentProps<"p">) {
-  return <p className={cn("text-xs text-muted-foreground", className)} {...props} />;
-}
diff --git a/src/ui/step-sidebar.test.tsx b/src/ui/step-sidebar.test.tsx
deleted file mode 100644
index c1169876..00000000
--- a/src/ui/step-sidebar.test.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import { act, createElement, useState } from "react";
-import { createRoot } from "react-dom/client";
-
-import { StepSidebar } from "./step-sidebar.js";
-import type { WorkflowStep } from "../lib/workflow-run-progress.js";
-
-const STEPS: WorkflowStep[] = [
-  { number: 1, label: "Collect open invoices", status: "completed" },
-  { number: 2, label: "Draft the reminder email", status: "current" },
-  { number: 3, label: "Send to customers", status: "pending" },
-];
-
-function noop() {
-  // default onToggle for mounts that don't assert on it
-}
-
-function mount(props: Partial<React.ComponentProps<typeof StepSidebar>> = {}) {
-  const container = document.createElement("div");
-  document.body.appendChild(container);
-  const root = createRoot(container);
-  act(() => {
-    root.render(createElement(StepSidebar, { steps: STEPS, onToggle: noop, ...props }));
-  });
-  return {
-    container,
-    toggle: () => container.querySelector("[data-slot='sidebar-collapse-toggle']") as HTMLButtonElement,
-    root: () => container.querySelector("[data-slot='step-sidebar']") as HTMLElement,
-    unmount: () => root.unmount(),
-  };
-}
-
-/** A minimal host wrapper that owns `collapsed` state, mirroring how any
- * real consumer wires the controlled prop. */
-function ControlledStepSidebar(props: Omit<React.ComponentProps<typeof StepSidebar>, "collapsed" | "onToggle">) {
-  const [collapsed, setCollapsed] = useState(false);
-  return createElement(StepSidebar, {
-    ...props,
-    collapsed,
-    onToggle: () => setCollapsed((c) => !c),
-  });
-}
-
-describe("StepSidebar", () => {
-  test("renders every step with its number and label", () => {
-    const { container, unmount } = mount();
-    const items = container.querySelectorAll("li[data-step-status]");
-    expect(items.length).toBe(3);
-    expect(container.textContent).toContain("Collect open invoices");
-    expect(container.textContent).toContain("Draft the reminder email");
-    expect(container.textContent).toContain("Send to customers");
-    unmount();
-  });
-
-  test("status glyphs reflect completed, current, and pending steps", () => {
-    const { container, unmount } = mount();
-    const items = Array.from(container.querySelectorAll("li[data-step-status]"));
-    expect(items[0]?.getAttribute("data-step-status")).toBe("completed");
-    expect(items[0]?.textContent).toContain("✓");
-    expect(items[1]?.getAttribute("data-step-status")).toBe("current");
-    expect(items[1]?.textContent).toContain("2");
-    expect(items[2]?.getAttribute("data-step-status")).toBe("pending");
-    unmount();
-  });
-
-  test("a failed step renders the failure glyph", () => {
-    const { container, unmount } = mount({
-      steps: [{ number: 1, label: "Send for approval", status: "failed" }],
-    });
-    const item = container.querySelector("li[data-step-status='failed']");
-    expect(item).not.toBeNull();
-    expect(item?.textContent).toContain("!");
-    unmount();
-  });
-
-  test("defaults expanded when collapsed is omitted", () => {
-    const { toggle, root, unmount } = mount();
-    expect(root().getAttribute("data-collapsed")).toBe("false");
-    expect(toggle().getAttribute("aria-label")).toBe("Collapse sidebar");
-    expect(toggle().getAttribute("aria-expanded")).toBe("true");
-    unmount();
-  });
-
-  test("collapsed is host-controlled: the toggle calls onToggle with no args, and the host decides the next state", () => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-    const root = createRoot(container);
-    let toggleCalls = 0;
-    act(() => {
-      root.render(
-        createElement(StepSidebar, {
-          steps: STEPS,
-          collapsed: false,
-          onToggle: () => {
-            toggleCalls++;
-          },
-        }),
-      );
-    });
-    const toggle = () => container.querySelector("[data-slot='sidebar-collapse-toggle']") as HTMLButtonElement;
-    act(() => {
-      toggle().dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
-    });
-    expect(toggleCalls).toBe(1);
-    // The component does not flip its own state: still reflects the prop.
-    expect(container.querySelector("[data-slot='step-sidebar']")?.getAttribute("data-collapsed")).toBe("false");
-    root.unmount();
-  });
-
-  test("a host wrapper owning collapsed state toggles the rendered state end to end", () => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-    const root = createRoot(container);
-    act(() => {
-      root.render(createElement(ControlledStepSidebar, { steps: STEPS }));
-    });
-    const rootEl = () => container.querySelector("[data-slot='step-sidebar']") as HTMLElement;
-    const toggle = () => container.querySelector("[data-slot='sidebar-collapse-toggle']") as HTMLButtonElement;
-    expect(rootEl().getAttribute("data-collapsed")).toBe("false");
-
-    act(() => {
-      toggle().dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
-    });
-    expect(rootEl().getAttribute("data-collapsed")).toBe("true");
-    expect(toggle().getAttribute("aria-label")).toBe("Expand sidebar");
-
-    act(() => {
-      toggle().dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
-    });
-    expect(rootEl().getAttribute("data-collapsed")).toBe("false");
-    root.unmount();
-  });
-
-  test("renders no footer slot when omitted", () => {
-    const { container, unmount } = mount();
-    expect(container.querySelector("[data-slot='step-sidebar-footer']")).toBeNull();
-    unmount();
-  });
-
-  test("renders arbitrary footer content, e.g. a sign-out control", () => {
-    let signedOut = false;
-    const { container, unmount } = mount({
-      footer: createElement(
-        "button",
-        { type: "button", "aria-label": "Sign out", onClick: () => (signedOut = true) },
-        "Sign out",
-      ),
-    });
-    const footer = container.querySelector("[data-slot='step-sidebar-footer']");
-    expect(footer).not.toBeNull();
-    const signOutButton = footer?.querySelector("button[aria-label='Sign out']") as HTMLButtonElement;
-    expect(signOutButton).not.toBeUndefined();
-    act(() => {
-      signOutButton.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
-    });
-    expect(signedOut).toBe(true);
-    unmount();
-  });
-
-  test("an empty steps array renders no items and does not crash", () => {
-    const { container, unmount } = mount({ steps: [] });
-    expect(container.querySelectorAll("li[data-step-status]").length).toBe(0);
-    expect(container.querySelector("ol[aria-label='Workflow steps']")).not.toBeNull();
-    unmount();
-  });
-
-  test("a long label truncates via the truncate class and carries a title attribute with the full text", () => {
-    const longLabel =
-      "Reconcile every outstanding invoice across all connected payment processors before sending the weekly summary";
-    const { container, unmount } = mount({
-      steps: [{ number: 1, label: longLabel, status: "current" }],
-    });
-    const labelSpan = container.querySelector("li[data-step-status='current'] span[title]") as HTMLElement;
-    expect(labelSpan).not.toBeNull();
-    expect(labelSpan.getAttribute("title")).toBe(longLabel);
-    expect(labelSpan.className).toContain("truncate");
-    unmount();
-  });
-
-  test("many steps still all render in the DOM inside the scrollable container", () => {
-    const manySteps: WorkflowStep[] = Array.from({ length: 15 }, (_, i) => ({
-      number: i + 1,
-      label: `Step ${i + 1}`,
-      status: i === 0 ? "completed" : i === 1 ? "current" : "pending",
-    }));
-    const { container, unmount } = mount({ steps: manySteps });
-    const list = container.querySelector("ol[aria-label='Workflow steps']") as HTMLElement;
-    expect(list.className).toContain("overflow-y-auto");
-    expect(container.querySelectorAll("li[data-step-status]").length).toBe(15);
-    unmount();
-  });
-});
diff --git a/src/ui/step-sidebar.tsx b/src/ui/step-sidebar.tsx
deleted file mode 100644
index 3cb751eb..00000000
--- a/src/ui/step-sidebar.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import type * as React from "react";
-
-import type { WorkflowStep, WorkflowStepStatus } from "../lib/workflow-run-progress.js";
-import { workflowStepGlyph, workflowStepLabelClass } from "../lib/workflow-run-progress.js";
-import { cn } from "../lib/utils.js";
-import { SidebarCollapseToggle } from "./sidebar.js";
-
-function markClass(status: WorkflowStepStatus): string {
-  if (status === "completed") return "border-transparent bg-success text-success-foreground";
-  if (status === "failed") return "border-transparent bg-destructive text-destructive-foreground";
-  if (status === "current") return "border-primary-emphasis bg-primary/10 text-primary-emphasis";
-  return "border-input text-muted-foreground";
-}
-
-export type StepSidebarProps = {
-  readonly steps: readonly WorkflowStep[];
-  /** Collapse is host-owned state, not internal — same contract as `Sidebar`.
-   * The host persists it and flips it; this component only renders it. */
-  readonly collapsed?: boolean;
-  /** Called with no args when the toggle is pressed; the host flips its own
-   * `collapsed` boolean. */
-  readonly onToggle: () => void;
-  /** Arbitrary content pinned below the step list — a source summary, a
-   * sign-out control, or nothing. Stays visible through collapse; compose a
-   * layout inside it that degrades gracefully at 64px if it needs to. */
-  readonly footer?: React.ReactNode;
-  readonly className?: string;
-};
-
-/**
- * A vertical rail of a workflow's steps, numbered and coloured by status,
- * that collapses to a 64px icon-only strip or expands to a 224px labelled
- * list. Labels hide with `sr-only` on collapse, never `hidden` — the
- * icon-only rail keeps its accessible names.
- */
-export function StepSidebar({ steps, collapsed = false, onToggle, footer, className }: StepSidebarProps) {
-  return (
-    <div
-      data-slot="step-sidebar"
-      data-collapsed={collapsed}
-      className={cn(
-        "group/step-sidebar flex h-full flex-col border-r border-border bg-card",
-        "w-56 transition-[width] duration-200 data-[collapsed=true]:w-16",
-        className,
-      )}
-    >
-      <div className="flex items-center justify-end border-b border-border p-2">
-        <SidebarCollapseToggle collapsed={collapsed} onToggle={onToggle} />
-      </div>
-
-      <ol aria-label="Workflow steps" aria-live="polite" className="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto p-2">
-        {steps.map((step) => (
-          <li
-            key={step.number}
-            data-step-status={step.status}
-            className={cn(
-              "flex min-w-0 items-center gap-2 rounded-md p-2",
-              step.status === "current" && "bg-muted",
-            )}
-          >
-            <span
-              aria-hidden
-              className={cn(
-                "grid size-6 shrink-0 place-items-center rounded-full border text-xs font-medium",
-                markClass(step.status),
-              )}
-            >
-              {workflowStepGlyph(step.status, step.number)}
-            </span>
-            <span
-              title={step.label}
-              className={cn(
-                "min-w-0 flex-1 truncate text-sm font-medium group-data-[collapsed=true]/step-sidebar:sr-only",
-                workflowStepLabelClass(step.status),
-              )}
-            >
-              {step.label}
-            </span>
-          </li>
-        ))}
-      </ol>
-
-      {footer === undefined ? null : (
-        <div data-slot="step-sidebar-footer" className="mt-auto border-t border-border">
-          {footer}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/ui/subagent-dock.tsx b/src/ui/subagent-dock.tsx
deleted file mode 100644
index 3e64a338..00000000
--- a/src/ui/subagent-dock.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { ChevronRight } from "lucide-react";
-import { useState } from "react";
-
-import type { SubagentRun, SubagentState } from "../lib/chat-message.js";
-import { formatRelativeTime } from "../lib/relative-time.js";
-import { cn } from "../lib/utils.js";
-import { Badge, type BadgeTone } from "./badge.js";
-import { StatusDot } from "./status-dot.js";
-import { ToolNarrative } from "./tool-narrative.js";
-
-export type SubagentDockProps = {
-  /** In the order they were spawned. */
-  readonly subagents: readonly SubagentRun[];
-  readonly now?: number;
-  readonly className?: string;
-};
-
-const STATE_LABEL: Record<SubagentState, string> = {
-  queued: "Queued",
-  running: "Working",
-  done: "Done",
-  error: "Failed",
-};
-
-const STATE_TONE: Record<SubagentState, BadgeTone> = {
-  queued: "neutral",
-  running: "accent",
-  done: "success",
-  error: "danger",
-};
-
-/**
- * Who else is working on this, while it is happening.
- *
- * When an agent delegates, the transcript stops explaining itself: the user
- * sees a long pause and one summarised answer, and has no way to tell four
- * helpers running in parallel from one that has hung. This is the strip that
- * answers it — one row per delegated task, its state, and what it has actually
- * been calling.
- *
- * Not the workflow dock. That lists server-owned runs from a `DataPort`, keyed
- * by run id and paginated. Subagents are turn-scoped: they are born and die
- * inside one reply, the host already has them streaming in, and putting them
- * behind a collection request would mean polling for state the caller is
- * holding in its hand.
- *
- * A row's detail is `ToolNarrative`, the same component the main transcript
- * uses, so a helper's work reads the way the agent's own work reads. The
- * running rows open by default and finished ones stay shut: while it is
- * running, "what is it doing" is the question; afterwards, the answer is.
- *
- * Renders nothing when no one was delegated to — the ordinary case is a turn
- * with no helpers, and a permanent empty strip announcing that is furniture.
- */
-export function SubagentDock({ subagents, now, className }: SubagentDockProps) {
-  if (subagents.length === 0) return null;
-
-  return (
-    <section
-      aria-label="Delegated work"
-      className={cn("flex flex-col gap-1 rounded-lg border border-border bg-card p-2", className)}
-    >
-      {subagents.map((subagent) => (
-        <SubagentRow key={subagent.id} subagent={subagent} {...(now === undefined ? {} : { now })} />
-      ))}
-    </section>
-  );
-}
-
-function SubagentRow({ subagent, now }: { subagent: SubagentRun; now?: number }) {
-  const detail = subagent.tools ?? [];
-  const hasDetail = detail.length > 0 || subagent.result !== undefined;
-  const [open, setOpen] = useState(subagent.state === "running");
-
-  return (
-    <div data-slot="subagent-row" className="flex flex-col">
-      <button
-        type="button"
-        onClick={() => setOpen((value) => !value)}
-        aria-expanded={open}
-        disabled={!hasDetail}
-        className="flex items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted disabled:hover:bg-transparent"
-      >
-        <StatusDot
-          label={STATE_LABEL[subagent.state]}
-          live={subagent.state === "running"}
-          tone={subagent.state === "error" ? "danger" : subagent.state === "running" ? "emphasis" : "neutral"}
-        />
-        <span className="min-w-0 flex-1">
-          <span className="block truncate text-sm font-medium">{subagent.name}</span>
-          {subagent.task === undefined ? null : (
-            <span className="block truncate text-xs text-muted-foreground">{subagent.task}</span>
-          )}
-        </span>
-        {subagent.startedAt === undefined ? null : (
-          <time dateTime={subagent.startedAt} className="shrink-0 font-mono text-[11px] text-muted-foreground">
-            {formatRelativeTime(subagent.startedAt, now)}
-          </time>
-        )}
-        <Badge tone={STATE_TONE[subagent.state]}>{STATE_LABEL[subagent.state]}</Badge>
-        {hasDetail ? (
-          <ChevronRight className={cn("size-3.5 shrink-0 transition-transform", open && "rotate-90")} aria-hidden />
-        ) : null}
-      </button>
-
-      {open && hasDetail ? (
-        <div className="mt-1 mb-1 ml-4 flex flex-col gap-1 border-l border-border pl-3">
-          {detail.map((part) => (
-            <ToolNarrative key={part.toolCallId} part={part} />
-          ))}
-          {subagent.result === undefined ? null : (
-            <p className="px-2 py-1 text-xs leading-relaxed whitespace-pre-wrap text-muted-foreground">
-              {subagent.result}
-            </p>
-          )}
-        </div>
-      ) : null}
-    </div>
-  );
-}
diff --git a/src/ui/tenant-selector.tsx b/src/ui/tenant-selector.tsx
deleted file mode 100644
index 4130ac25..00000000
--- a/src/ui/tenant-selector.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import { Check, ChevronsUpDown } from "lucide-react";
-import { useEffect, useId, useRef, useState } from "react";
-
-import { useDismissablePopover } from "../hooks/use-dismissable-popover.js";
-import { cn } from "../lib/utils.js";
-
-export type Tenant = {
-  readonly id: string;
-  readonly name: string;
-};
-
-export type TenantSelectorProps = {
-  readonly tenants: readonly Tenant[];
-  readonly activeId: string | null;
-  readonly onSelect: (id: string) => void;
-  /** Accessible name for the trigger, e.g. "Workbench". */
-  readonly label: string;
-  /** Controlled open state. Pair with `onOpenChange` to lift it to a parent. */
-  readonly open?: boolean;
-  readonly onOpenChange?: (open: boolean) => void;
-  readonly className?: string;
-};
-
-/**
- * Which tenant/workspace the app is pointed at. The list and the selection are
- * props — this never learns where tenants come from.
- *
- * The popup is a real `listbox`: the list itself takes focus and moves a
- * highlight with `aria-activedescendant`, rather than tabbing through options.
- * That is the ARIA APG listbox pattern, and it is why the options are `<li>`
- * and not buttons — a button per option would put every tenant in the tab
- * order, which is exactly what a listbox exists to avoid.
- *
- * Uncontrolled by default. Pass `open`/`onOpenChange` to drive it from a parent.
- */
-export function TenantSelector({
-  tenants,
-  activeId,
-  onSelect,
-  label,
-  open: openProp,
-  onOpenChange,
-  className,
-}: TenantSelectorProps) {
-  const [activeIndex, setActiveIndex] = useState(0);
-  const { open, setOpen, rootRef, triggerRef, close } = useDismissablePopover<HTMLDivElement, HTMLButtonElement>({
-    // Escape is handled by `onListKeyDown` below, alongside Tab — the two
-    // close the listbox the same way, so one handler owns both.
-    closeOnEscape: false,
-    open: openProp,
-    onOpenChange,
-  });
-  const listRef = useRef<HTMLUListElement>(null);
-  const listId = useId();
-
-  const active = tenants.find((tenant) => tenant.id === activeId) ?? null;
-
-  useEffect(() => {
-    if (!open) return;
-    listRef.current?.focus();
-  }, [open]);
-
-  const openAt = (index: number) => {
-    setActiveIndex(index);
-    setOpen(true);
-  };
-
-  const commit = (index: number) => {
-    const tenant = tenants[index];
-    if (tenant !== undefined) onSelect(tenant.id);
-    close();
-  };
-
-  if (tenants.length === 0) return null;
-
-  const selectedIndex = Math.max(
-    tenants.findIndex((tenant) => tenant.id === activeId),
-    0,
-  );
-
-  const onTriggerKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
-    if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      openAt(selectedIndex);
-    } else if (event.key === "ArrowUp") {
-      event.preventDefault();
-      openAt(tenants.length - 1);
-    }
-  };
-
-  const onListKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {
-    if (event.key === "ArrowDown") {
-      event.preventDefault();
-      setActiveIndex((index) => Math.min(index + 1, tenants.length - 1));
-    } else if (event.key === "ArrowUp") {
-      event.preventDefault();
-      setActiveIndex((index) => Math.max(index - 1, 0));
-    } else if (event.key === "Home") {
-      event.preventDefault();
-      setActiveIndex(0);
-    } else if (event.key === "End") {
-      event.preventDefault();
-      setActiveIndex(tenants.length - 1);
-    } else if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      commit(activeIndex);
-    } else if (event.key === "Escape" || event.key === "Tab") {
-      event.preventDefault();
-      close();
-    }
-  };
-
-  return (
-    <div ref={rootRef} className={cn("relative", className)}>
-      <button
-        ref={triggerRef}
-        type="button"
-        aria-haspopup="listbox"
-        aria-expanded={open}
-        aria-controls={open ? listId : undefined}
-        aria-label={`${label}: ${active?.name ?? "none selected"}`}
-        onClick={() => (open ? close() : openAt(selectedIndex))}
-        onKeyDown={onTriggerKeyDown}
-        className="flex w-full items-center gap-2 rounded-md border border-input px-2 py-2 text-sm text-foreground transition-colors hover:bg-muted"
-      >
-        <span className="min-w-0 flex-1 truncate text-left">{active?.name ?? label}</span>
-        <ChevronsUpDown className="size-4 shrink-0 text-muted-foreground" aria-hidden />
-      </button>
-
-      {open ? (
-        <ul
-          ref={listRef}
-          id={listId}
-          role="listbox"
-          tabIndex={-1}
-          aria-label={label}
-          aria-activedescendant={`${listId}-${activeIndex}`}
-          onKeyDown={onListKeyDown}
-          className="absolute bottom-full left-0 z-50 mb-1 max-h-64 w-full overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg"
-        >
-          {tenants.map((tenant, index) => (
-            <li
-              key={tenant.id}
-              id={`${listId}-${index}`}
-              role="option"
-              aria-selected={tenant.id === activeId}
-              onClick={() => commit(index)}
-              onPointerMove={() => setActiveIndex(index)}
-              className={cn(
-                "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
-                index === activeIndex && "bg-muted",
-              )}
-            >
-              <Check
-                className={cn("size-4 shrink-0", tenant.id === activeId ? "text-primary-emphasis" : "opacity-0")}
-                aria-hidden
-              />
-              <span className="min-w-0 truncate">{tenant.name}</span>
-            </li>
-          ))}
-        </ul>
-      ) : null}
-    </div>
-  );
-}
diff --git a/src/ui/thread-list.tsx b/src/ui/thread-list.tsx
deleted file mode 100644
index e1c120dd..00000000
--- a/src/ui/thread-list.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { Plus } from "lucide-react";
-
-import { useCollectionState } from "../hooks/use-collection-state.js";
-import type { ChatThreadSummary } from "../lib/chat-message.js";
-import type { CollectionRequest } from "../lib/data-port.js";
-import { formatRelativeTime } from "../lib/relative-time.js";
-import { cn } from "../lib/utils.js";
-import { Button } from "./button.js";
-
-export type ThreadListProps = {
-  /** The threads collection. Unlike the transcript, this really is a collection. */
-  readonly request: CollectionRequest<ChatThreadSummary>;
-  readonly activeId?: string | null;
-  readonly onSelect: (thread: ChatThreadSummary) => void;
-  readonly onNewThread?: () => void;
-  readonly now?: number;
-  readonly className?: string;
-};
-
-/**
- * Past conversations. DataPort-backed — this is paginated, cacheable, server-
- * owned data, which is exactly what the transcript is not.
- *
- * The active thread is `aria-current="true"`, not merely tinted, so it is the
- * current item for someone who cannot see the tint.
- */
-export function ThreadList({ request, activeId = null, onSelect, onNewThread, now, className }: ThreadListProps) {
-  const { state, isFetching, refetch, hasNextPage, fetchNextPage } = useCollectionState(request);
-
-  return (
-    <div className={cn("flex min-h-0 flex-col", className)}>
-      {onNewThread === undefined ? null : (
-        <div className="p-2">
-          <Button variant="outline" size="sm" className="w-full justify-start" onClick={onNewThread}>
-            <Plus className="size-4" aria-hidden />
-            New thread
-          </Button>
-        </div>
-      )}
-
-      {state.status === "loading" ? (
-        <p role="status" className="px-3 py-4 text-sm text-muted-foreground">
-          Loading threads…
-        </p>
-      ) : state.status === "error" ? (
-        <div className="px-3 py-4">
-          <p className="text-sm">{state.error.message}</p>
-          <Button variant="outline" size="sm" className="mt-2" onClick={refetch}>
-            Try again
-          </Button>
-        </div>
-      ) : state.status === "empty" ? (
-        <p className="px-3 py-4 text-sm text-muted-foreground">No conversations yet.</p>
-      ) : (
-        <>
-          <ul aria-label="Conversations" aria-busy={isFetching} className="min-h-0 flex-1 overflow-y-auto px-2">
-            {state.items.map((thread) => {
-              const active = thread.id === activeId;
-              return (
-                <li key={thread.id}>
-                  <button
-                    type="button"
-                    onClick={() => onSelect(thread)}
-                    aria-current={active ? "true" : undefined}
-                    className={cn(
-                      "flex w-full flex-col gap-0.5 rounded-md px-2 py-2 text-left transition-colors",
-                      active ? "bg-primary/10" : "hover:bg-muted",
-                    )}
-                  >
-                    <span className="flex items-baseline gap-2">
-                      <span className={cn("min-w-0 flex-1 truncate text-sm", active && "font-medium")}>
-                        {thread.title}
-                      </span>
-                      <time dateTime={thread.updatedAt} className="shrink-0 text-[11px] text-muted-foreground">
-                        {formatRelativeTime(thread.updatedAt, now)}
-                      </time>
-                    </span>
-                    {thread.preview === undefined ? null : (
-                      <span className="truncate text-xs text-muted-foreground">{thread.preview}</span>
-                    )}
-                  </button>
-                </li>
-              );
-            })}
-          </ul>
-          {hasNextPage ? (
-            <div className="p-2">
-              <Button variant="ghost" size="sm" className="w-full" onClick={fetchNextPage} disabled={isFetching}>
-                {isFetching ? "Loading…" : "Load more"}
-              </Button>
-            </div>
-          ) : null}
-        </>
-      )}
-    </div>
-  );
-}
diff --git a/src/ui/thread-switcher.tsx b/src/ui/thread-switcher.tsx
deleted file mode 100644
index 7d0aceec..00000000
--- a/src/ui/thread-switcher.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { ChevronsUpDown, MessagesSquare } from "lucide-react";
-import { useId } from "react";
-
-import { useDismissablePopover } from "../hooks/use-dismissable-popover.js";
-import type { ChatThreadSummary } from "../lib/chat-message.js";
-import type { CollectionRequest } from "../lib/data-port.js";
-import { cn } from "../lib/utils.js";
-import { ThreadList } from "./thread-list.js";
-
-export type ThreadSwitcherProps = {
-  /** The same threads collection `ThreadList` takes. */
-  readonly request: CollectionRequest<ChatThreadSummary>;
-  /** The open conversation. Its title is what the trigger reads. */
-  readonly active?: ChatThreadSummary | null;
-  readonly onSelect: (thread: ChatThreadSummary) => void;
-  readonly onNewThread?: () => void;
-  /** Shown on the trigger before a thread exists. */
-  readonly placeholder?: string;
-  readonly now?: number;
-  /** Controlled open state. Pair with `onOpenChange` to lift it to a parent. */
-  readonly open?: boolean;
-  readonly onOpenChange?: (open: boolean) => void;
-  readonly className?: string;
-};
-
-/**
- * Which conversation you are in, and the way out of it — for layouts with no
- * room for a list.
- *
- * A sidebar list and a switcher are not the same surface. The list is furniture:
- * always visible, always showing the neighbours. The switcher is a control that
- * spends one line saying *which thread this is* — the thing a docked bar, a
- * floating panel or a mobile header has no other way to state — and reveals the
- * rest only when asked. Chat shells that have no sidebar still need the answer
- * to "which conversation am I typing into", and a list cannot give it in the
- * space available.
- *
- * The list inside the popover is `ThreadList`, unmodified. Loading, empty,
- * error, paging and the active marker are already solved there and a second
- * copy would be a second thing to fix. What lives here is the part a list has
- * no notion of: a collapsed trigger that names the current thread, `aria-expanded`
- * and `aria-controls` tying it to the panel, Escape and outside-click to close,
- * focus returning to the trigger when it does, and closing on selection —
- * because a switcher that stays open after you switch is a list.
- *
- * Uncontrolled by default. Pass `open`/`onOpenChange` to drive it from a parent.
- */
-export function ThreadSwitcher({
-  request,
-  active = null,
-  onSelect,
-  onNewThread,
-  placeholder = "No conversation",
-  now,
-  open: openProp,
-  onOpenChange,
-  className,
-}: ThreadSwitcherProps) {
-  const panelId = useId();
-  const { open, setOpen, rootRef, triggerRef, close } = useDismissablePopover<HTMLDivElement, HTMLButtonElement>({
-    open: openProp,
-    onOpenChange,
-  });
-
-  return (
-    <div ref={rootRef} className={cn("relative", className)}>
-      <button
-        ref={triggerRef}
-        type="button"
-        aria-haspopup="dialog"
-        aria-expanded={open}
-        aria-controls={open ? panelId : undefined}
-        aria-label={`Conversation: ${active?.title ?? placeholder}. Switch conversation`}
-        onClick={() => setOpen((value) => !value)}
-        className="flex w-full items-center gap-2 rounded-md border border-input px-2 py-2 text-sm text-foreground transition-colors hover:bg-muted"
-      >
-        <MessagesSquare className="size-4 shrink-0 text-muted-foreground" aria-hidden />
-        <span className="min-w-0 flex-1 truncate text-left">{active?.title ?? placeholder}</span>
-        <ChevronsUpDown className="size-4 shrink-0 text-muted-foreground" aria-hidden />
-      </button>
-
-      {open ? (
-        <div
-          id={panelId}
-          role="dialog"
-          aria-label="Switch conversation"
-          className="absolute top-full left-0 z-50 mt-1 flex max-h-80 w-full min-w-64 flex-col overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-lg"
-        >
-          <ThreadList
-            request={request}
-            activeId={active?.id ?? null}
-            onSelect={(thread) => {
-              onSelect(thread);
-              close();
-            }}
-            {...(onNewThread === undefined
-              ? {}
-              : {
-                  onNewThread: () => {
-                    onNewThread();
-                    close();
-                  },
-                })}
-            {...(now === undefined ? {} : { now })}
-          />
-        </div>
-      ) : null}
-    </div>
-  );
-}
diff --git a/src/ui/time-range-control.tsx b/src/ui/time-range-control.tsx
deleted file mode 100644
index 23a4a7cc..00000000
--- a/src/ui/time-range-control.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { type DateRange, TIME_RANGE_PRESETS, type TimeRangePreset } from "../lib/time-range.js";
-import { cn } from "../lib/utils.js";
-import { Input } from "./input.js";
-
-export type TimeRangeControlProps = {
-  readonly preset: TimeRangePreset;
-  readonly onPresetChange: (preset: TimeRangePreset) => void;
-  readonly custom: DateRange;
-  readonly onCustomChange: (range: DateRange) => void;
-  readonly className?: string;
-};
-
-/**
- * The window selector: presets as a single-choice group, with two date fields
- * that appear only for "Custom".
- *
- * `role="radiogroup"` with `aria-checked` buttons, not a row of toggles.
- * Choosing a window is a one-of-many choice, and the radio role is what tells a
- * screen reader that picking one un-picks the rest — six independent
- * `aria-pressed` buttons announce as six unrelated switches, six of which could
- * apparently be on.
- *
- * The custom fields are revealed rather than always present. Two date inputs
- * that do nothing for five of six presets are five-sixths noise, and their
- * emptiness reads as something the user forgot to fill in.
- *
- * Native `<input type="date">`, not a bespoke calendar. It comes with the
- * platform's own picker, its keyboard handling, its locale formatting and its
- * mobile behaviour — all of which a hand-rolled popover has to re-earn and
- * usually does not.
- */
-export function TimeRangeControl({ preset, onPresetChange, custom, onCustomChange, className }: TimeRangeControlProps) {
-  return (
-    <div className={cn("flex flex-wrap items-center gap-2", className)}>
-      <div role="radiogroup" aria-label="Time range" className="flex flex-wrap items-center gap-0.5 rounded-md border border-border p-0.5">
-        {TIME_RANGE_PRESETS.map((option) => {
-          const active = option.value === preset;
-          return (
-            <button
-              key={option.value}
-              type="button"
-              role="radio"
-              aria-checked={active}
-              onClick={() => onPresetChange(option.value)}
-              className={cn(
-                "rounded-sm px-2.5 py-1 text-xs font-medium transition-colors",
-                active ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground",
-              )}
-            >
-              {option.label}
-            </button>
-          );
-        })}
-      </div>
-
-      {preset !== "custom" ? null : (
-        <div className="flex items-center gap-1.5">
-          <Input
-            type="date"
-            aria-label="From"
-            value={custom.from ?? ""}
-            // `max`/`min` cross-bound the pair so the picker itself refuses an
-            // inverted range — cheaper and clearer than validating afterwards.
-            max={custom.to ?? undefined}
-            onChange={(event) => onCustomChange({ ...custom, from: event.target.value })}
-            className="h-8 w-auto text-xs"
-          />
-          <span className="text-xs text-muted-foreground">to</span>
-          <Input
-            type="date"
-            aria-label="To"
-            value={custom.to ?? ""}
-            min={custom.from ?? undefined}
-            onChange={(event) => onCustomChange({ ...custom, to: event.target.value })}
-            className="h-8 w-auto text-xs"
-          />
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/ui/toggle-list.tsx b/src/ui/toggle-list.tsx
deleted file mode 100644
index e5a46fb3..00000000
--- a/src/ui/toggle-list.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useId } from "react";
-import type { ReactNode } from "react";
-
-import { cn } from "../lib/utils.js";
-import { Switch } from "./switch.js";
-
-export type ToggleItem = {
-  readonly id: string;
-  readonly label: string;
-  readonly description?: string;
-  readonly enabled: boolean;
-  readonly disabled?: boolean;
-  /** Anything trailing the label — a provider marker, a badge. */
-  readonly meta?: ReactNode;
-};
-
-export type ToggleListProps = {
-  /** Names the group. Required — a bare list of switches has no subject. */
-  readonly label: string;
-  readonly items: readonly ToggleItem[];
-  readonly onToggle: (item: ToggleItem, enabled: boolean) => void;
-  readonly empty?: ReactNode;
-  readonly className?: string;
-};
-
-/**
- * A list of things that are on or off: available tools, auto-approved actions,
- * notification preferences, the sources feeding a brief.
- *
- * One component for all of them because they are the same interaction. The
- * difference between "tools the agent may use" and "sources in your brief" is
- * the label and the data, and shipping a component per subject would be the
- * same file four times.
- *
- * Each row's description is tied to its switch with `aria-describedby`, so the
- * explanation is read out with the control instead of being visual-only.
- */
-export function ToggleList({ label, items, onToggle, empty, className }: ToggleListProps) {
-  const baseId = useId();
-
-  if (items.length === 0) {
-    return <p className="text-sm text-muted-foreground">{empty ?? "Nothing to configure here yet."}</p>;
-  }
-
-  return (
-    <ul aria-label={label} className={cn("flex flex-col divide-y divide-border", className)}>
-      {items.map((item) => {
-        const switchId = `${baseId}-${item.id}`;
-        const descriptionId = item.description === undefined ? undefined : `${switchId}-description`;
-        return (
-          <li key={item.id} className="flex items-start gap-3 py-3 first:pt-0 last:pb-0">
-            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-              <label htmlFor={switchId} className="flex flex-wrap items-center gap-2 text-sm font-medium">
-                {item.label}
-                {item.meta}
-              </label>
-              {item.description === undefined ? null : (
-                <p id={descriptionId} className="text-xs leading-relaxed text-muted-foreground">
-                  {item.description}
-                </p>
-              )}
-            </div>
-            <Switch
-              id={switchId}
-              checked={item.enabled}
-              disabled={item.disabled}
-              describedBy={descriptionId}
-              onCheckedChange={(enabled) => onToggle(item, enabled)}
-            />
-          </li>
-        );
-      })}
-    </ul>
-  );
-}
diff --git a/src/ui/triage-pane.tsx b/src/ui/triage-pane.tsx
deleted file mode 100644
index 3ca9f546..00000000
--- a/src/ui/triage-pane.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import type { ReactNode } from "react";
-
-import { cn } from "../lib/utils.js";
-
-export type TriagePaneProps = {
-  /** Filter chips / group counts for the list column. */
-  readonly listHeader?: ReactNode;
-  /** Scrollable item list. */
-  readonly list: ReactNode;
-  /** Full context for the selected item. */
-  readonly detail: ReactNode;
-  /** Empty-state when nothing is selected or the list is empty. */
-  readonly empty?: ReactNode;
-  readonly className?: string;
-};
-
-/**
- * Two-pane triage layout: denselist left, full context right. Used by the
- * inbox surface so list selection and detail actions stay one layout.
- */
-export function TriagePane({ listHeader, list, detail, empty, className }: TriagePaneProps) {
-  return (
-    <div
-      data-slot="triage-pane"
-      className={cn("grid h-full min-h-0 grid-cols-[minmax(16rem,22rem)_1fr] border-t border-border", className)}
-    >
-      <section
-        data-slot="triage-list"
-        className="flex min-h-0 flex-col border-r border-border"
-        aria-label="Triage list"
-      >
-        {listHeader === undefined ? null : (
-          <div className="shrink-0 border-b border-border px-3 py-2">{listHeader}</div>
-        )}
-        <div className="min-h-0 flex-1 overflow-y-auto">{list}</div>
-      </section>
-      <section
-        data-slot="triage-detail"
-        className="flex min-h-0 flex-col overflow-y-auto"
-        aria-label="Triage detail"
-      >
-        {detail ?? empty ?? null}
-      </section>
-    </div>
-  );
-}
-
-export type TriageListItemProps = {
-  readonly selected?: boolean;
-  readonly onSelect?: () => void;
-  readonly children: ReactNode;
-  readonly className?: string;
-};
-
-/** One selectable row in the triage list. */
-export function TriageListItem({ selected = false, onSelect, children, className }: TriageListItemProps) {
-  return (
-    <button
-      type="button"
-      aria-pressed={selected}
-      onClick={onSelect}
-      className={cn(
-        "flex w-full flex-col gap-0.5 border-b border-border px-3 py-2.5 text-left transition-colors",
-        "hover:bg-muted/60",
-        selected ? "bg-primary/10" : "bg-transparent",
-        className,
-      )}
-    >
-      {children}
-    </button>
-  );
-}
diff --git a/src/ui/whats-new.tsx b/src/ui/whats-new.tsx
deleted file mode 100644
index 407a46e7..00000000
--- a/src/ui/whats-new.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import { X } from "lucide-react";
-
-import { cn } from "../lib/utils.js";
-import { Badge } from "./badge.js";
-import { Button } from "./button.js";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./dialog.js";
-import { EmptyState } from "./empty-state.js";
-
-export type ReleaseNote = {
-  readonly id: string;
-  readonly title: string;
-  /** ISO date. Rendered as a plain date — a release is not "3 minutes ago". */
-  readonly date: string;
-  readonly body: string;
-  /** "New", "Fixed", "Improved". Free text; shown verbatim. */
-  readonly tag?: string;
-};
-
-/**
- * What changed, in three shapes: a list you can put anywhere, a dialog the user
- * asked for, and a popup that asks for them.
- *
- * One file because they render the same notes and differ only in framing. Three
- * files would be three copies of the entry markup drifting apart, which is how
- * the popup ends up showing a date the dialog does not.
- */
-
-function NoteList({ notes }: { notes: readonly ReleaseNote[] }) {
-  if (notes.length === 0) {
-    return <EmptyState title="Nothing new" description="Changes show up here as they ship." />;
-  }
-
-  return (
-    <ul className="flex flex-col gap-5">
-      {notes.map((note) => (
-        <li key={note.id} className="flex flex-col gap-1.5">
-          <div className="flex flex-wrap items-center gap-2">
-            {note.tag === undefined ? null : <Badge tone="accent">{note.tag}</Badge>}
-            <h4 className="text-sm font-semibold">{note.title}</h4>
-            <time dateTime={note.date} className="ml-auto shrink-0 text-xs text-muted-foreground">
-              {new Date(note.date).toLocaleDateString(undefined, { day: "numeric", month: "short", year: "numeric" })}
-            </time>
-          </div>
-          <p className="text-sm leading-relaxed whitespace-pre-wrap text-muted-foreground">{note.body}</p>
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-/** The notes inline — a settings page, a help panel, a changelog route. */
-export function WhatsNewSection({ notes, className }: { notes: readonly ReleaseNote[]; className?: string }) {
-  return (
-    <div data-slot="whats-new-section" className={className}>
-      <NoteList notes={notes} />
-    </div>
-  );
-}
-
-/** The notes as a dialog, opened deliberately from a menu or a button. */
-export function WhatsNewDialog({
-  open,
-  onOpenChange,
-  notes,
-  title = "What's new",
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  notes: readonly ReleaseNote[];
-  title?: string;
-}) {
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-h-[80vh] overflow-y-auto">
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-        </DialogHeader>
-        <NoteList notes={notes} />
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-/**
- * An unsolicited nudge, bottom-right.
- *
- * `role="complementary"`, never a dialog: the user did not ask for this, and
- * trapping their focus in something they did not open is hostile. It is
- * dismissible and nothing else on the page changes behaviour while it is up.
- *
- * `onDismiss` is required. A notice that appears on its own and cannot be sent
- * away is the worst version of this pattern, and the host needs the signal
- * anyway to stop showing it.
- */
-export function WhatsNewPopup({
-  open,
-  notes,
-  onDismiss,
-  onSeeAll,
-  title = "What's new",
-  className,
-}: {
-  open: boolean;
-  notes: readonly ReleaseNote[];
-  onDismiss: () => void;
-  onSeeAll?: () => void;
-  title?: string;
-  className?: string;
-}) {
-  if (!open || notes.length === 0) return null;
-
-  return (
-    <aside
-      role="complementary"
-      aria-label={title}
-      className={cn(
-        "fixed right-6 bottom-6 z-40 flex w-[min(22rem,calc(100vw-3rem))] flex-col gap-3 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-xl",
-        "[animation:corbits-fade-in_200ms_ease-out]",
-        className,
-      )}
-    >
-      <div className="flex items-start gap-2">
-        <h3 className="flex-1 text-sm font-semibold">{title}</h3>
-        <button
-          type="button"
-          onClick={onDismiss}
-          aria-label={`Dismiss ${title}`}
-          className="grid size-6 shrink-0 place-items-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-        >
-          <X className="size-3.5" aria-hidden />
-        </button>
-      </div>
-
-      {/* Only the most recent note: a popup nobody asked for gets one thing to
-          say, and the dialog is where the rest lives. */}
-      <NoteList notes={notes.slice(0, 1)} />
-
-      {onSeeAll === undefined ? null : (
-        <Button variant="outline" size="sm" onClick={onSeeAll}>
-          See everything
-        </Button>
-      )}
-    </aside>
-  );
-}
diff --git a/src/ui/workflow-catalog.tsx b/src/ui/workflow-catalog.tsx
deleted file mode 100644
index b1319527..00000000
--- a/src/ui/workflow-catalog.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { Star, Workflow } from "lucide-react";
-
-import { useCollectionState } from "../hooks/use-collection-state.js";
-import type { CollectionRequest } from "../lib/data-port.js";
-import { cn } from "../lib/utils.js";
-import { Badge } from "./badge.js";
-import { Button } from "./button.js";
-import { EmptyState } from "./empty-state.js";
-import type { IntakeField } from "./intake-form.js";
-
-/** One thing the user can run. */
-export type WorkflowOffering = {
-  /** Stable identifier for the kind, e.g. `daily-brief`. */
-  readonly kind: string;
-  /** Human title. Already humanised — this file does not guess at casing. */
-  readonly title: string;
-  readonly description?: string;
-  readonly tags?: readonly string[];
-  readonly favorite?: boolean;
-  /** Inputs this offering asks for. Drives the run-once panel. */
-  readonly fields?: readonly IntakeField[];
-};
-
-export type WorkflowCatalogProps = {
-  readonly request: CollectionRequest<WorkflowOffering>;
-  readonly selectedKind?: string | null;
-  readonly onSelect: (offering: WorkflowOffering) => void;
-  readonly onToggleFavorite?: (offering: WorkflowOffering) => void;
-  /** Rendered under the selected card — the run-once panel goes here. */
-  readonly renderDetail?: (offering: WorkflowOffering) => React.ReactNode;
-  readonly className?: string;
-};
-
-/**
- * What the user can start. DataPort-backed like every other collection here, so
- * its loading, error and empty states come from `useCollectionState` rather
- * than being spelled out again.
- *
- * Favourites are a callback, not local state: the star has to survive a reload
- * to mean anything, so the host owns it and this renders what it is told.
- */
-export function WorkflowCatalog({
-  request,
-  selectedKind = null,
-  onSelect,
-  onToggleFavorite,
-  renderDetail,
-  className,
-}: WorkflowCatalogProps) {
-  const { state, isFetching, refetch } = useCollectionState(request);
-
-  if (state.status === "loading") {
-    return (
-      <p role="status" className="px-3 py-6 text-sm text-muted-foreground">
-        Loading workflows…
-      </p>
-    );
-  }
-
-  if (state.status === "error") {
-    return (
-      <div className="px-3 py-6">
-        <p className="text-sm">{state.error.message}</p>
-        <Button variant="outline" size="sm" className="mt-2" onClick={refetch}>
-          Try again
-        </Button>
-      </div>
-    );
-  }
-
-  if (state.status === "empty") {
-    return (
-      <EmptyState
-        icon={<Workflow />}
-        title="No workflows yet"
-        description="Anything published to this workbench shows up here, ready to run."
-      />
-    );
-  }
-
-  return (
-    <ul aria-label="Workflows" aria-busy={isFetching} className={cn("grid gap-2.5 sm:grid-cols-2", className)}>
-      {state.items.map((offering) => {
-        const selected = offering.kind === selectedKind;
-        return (
-          <li
-            key={offering.kind}
-            className={cn(
-              "flex flex-col rounded-lg border transition-colors",
-              selected ? "border-primary-emphasis bg-primary/10" : "border-border bg-card",
-              // A selected card with a detail panel spans the grid, so the
-              // panel gets the full width instead of a half-width column.
-              selected && renderDetail !== undefined && "sm:col-span-2",
-            )}
-          >
-            <div className="flex items-start gap-2 p-3.5">
-              <button
-                type="button"
-                onClick={() => onSelect(offering)}
-                aria-pressed={selected}
-                className="min-w-0 flex-1 text-left"
-              >
-                <span className="flex flex-wrap items-center gap-2">
-                  <span className="text-sm font-semibold">{offering.title}</span>
-                  {(offering.tags ?? []).map((tag) => (
-                    <Badge key={tag}>{tag}</Badge>
-                  ))}
-                </span>
-                {offering.description === undefined ? null : (
-                  <span className="mt-1 block text-xs leading-relaxed text-muted-foreground">
-                    {offering.description}
-                  </span>
-                )}
-              </button>
-              {onToggleFavorite === undefined ? null : (
-                <button
-                  type="button"
-                  onClick={() => onToggleFavorite(offering)}
-                  aria-pressed={offering.favorite === true}
-                  aria-label={offering.favorite === true ? `Unfavourite ${offering.title}` : `Favourite ${offering.title}`}
-                  className="grid size-8 shrink-0 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-                >
-                  <Star
-                    className={cn("size-4", offering.favorite === true && "fill-current text-primary-emphasis")}
-                    aria-hidden
-                  />
-                </button>
-              )}
-            </div>
-            {selected && renderDetail !== undefined ? (
-              <div className="border-t border-border p-3.5">{renderDetail(offering)}</div>
-            ) : null}
-          </li>
-        );
-      })}
-    </ul>
-  );
-}
diff --git a/src/ui/workflow-dock.tsx b/src/ui/workflow-dock.tsx
deleted file mode 100644
index ca903263..00000000
--- a/src/ui/workflow-dock.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { useCollectionState } from "../hooks/use-collection-state.js";
-import type { CollectionRequest } from "../lib/data-port.js";
-import { formatRelativeTime } from "../lib/relative-time.js";
-import { cn } from "../lib/utils.js";
-import {
-  isActiveRun,
-  RUN_STATUS_DOT_TONE,
-  RUN_STATUS_LABEL,
-  RUN_STATUS_TONE,
-  sortRunsByAttention,
-  type WorkflowRunSummary,
-} from "../lib/workflow-run.js";
-import { Badge } from "./badge.js";
-import { StatusDot } from "./status-dot.js";
-
-export type WorkflowDockProps = {
-  /** The runs collection, resolved by whatever DataPort is in scope. */
-  readonly request: CollectionRequest<WorkflowRunSummary>;
-  readonly selectedId?: string | null;
-  readonly onSelect?: (run: WorkflowRunSummary) => void;
-  /** Show finished runs too. Off by default — the dock is for work in flight. */
-  readonly includeTerminal?: boolean;
-  readonly now?: number;
-  readonly className?: string;
-};
-
-/**
- * The active-runs strip: what is in flight, and which of it is waiting on you.
- *
- * Renders nothing when there is nothing running. That is not a missing empty
- * state — the dock sits above a page that has its own primary content, and an
- * empty strip saying "no active runs" is a permanent piece of furniture
- * reporting the normal case. The same silence covers loading, because a strip
- * that flashes a skeleton on every poll is worse than one that appears when it
- * has something to say.
- *
- * A run's *contents* are not here. This lists runs by status, identity and
- * timing; rendering what a run produced is a separate contract.
- */
-export function WorkflowDock({
-  request,
-  selectedId = null,
-  onSelect,
-  includeTerminal = false,
-  now,
-  className,
-}: WorkflowDockProps) {
-  const { state, isFetching } = useCollectionState(request);
-
-  if (state.status !== "ready") return null;
-
-  const runs = sortRunsByAttention(
-    includeTerminal ? state.items : state.items.filter((run) => isActiveRun(run.status)),
-  );
-  if (runs.length === 0) return null;
-
-  return (
-    <section aria-label="Active runs" aria-busy={isFetching} className={cn("flex flex-col gap-2", className)}>
-      <h2 className="text-xs font-semibold tracking-[0.06em] text-muted-foreground uppercase">Active runs</h2>
-      <ul className="flex flex-col gap-0.5">
-        {runs.map((run) => {
-          const selected = run.runId === selectedId;
-          const body = (
-            <>
-              <StatusDot
-                label={RUN_STATUS_LABEL[run.status]}
-                tone={RUN_STATUS_DOT_TONE[run.status]}
-                live={run.status === "running" || run.status === "provisioning"}
-              />
-              <span className="min-w-0 flex-1 truncate text-sm font-medium">{run.title}</span>
-              <time dateTime={run.startedAt} className="shrink-0 text-xs text-muted-foreground tabular-nums">
-                {formatRelativeTime(run.startedAt, now)}
-              </time>
-              <Badge tone={RUN_STATUS_TONE[run.status]}>{RUN_STATUS_LABEL[run.status]}</Badge>
-            </>
-          );
-          const shell = cn(
-            "flex w-full items-center gap-2.5 rounded-md px-2.5 py-2 text-left transition-colors",
-            selected ? "bg-primary/10" : "hover:bg-muted",
-          );
-
-          return (
-            <li key={run.runId}>
-              {onSelect === undefined ? (
-                <a href={run.href ?? "#"} aria-current={selected ? "true" : undefined} className={shell}>
-                  {body}
-                </a>
-              ) : (
-                <button
-                  type="button"
-                  onClick={() => onSelect(run)}
-                  aria-current={selected ? "true" : undefined}
-                  className={shell}
-                >
-                  {body}
-                </button>
-              )}
-            </li>
-          );
-        })}
-      </ul>
-    </section>
-  );
-}
diff --git a/src/ui/workflow-registry-list.tsx b/src/ui/workflow-registry-list.tsx
deleted file mode 100644
index a9c71263..00000000
--- a/src/ui/workflow-registry-list.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import type { ReactNode } from "react";
-
-import type { WorkflowListItem } from "../lib/workflow-registry.js";
-import { cn } from "../lib/utils.js";
-import { EmptyState } from "./empty-state.js";
-import { WorkflowRegistryHead, WorkflowRegistrySectionHeader } from "./workflow-registry-section.js";
-import { WorkflowRegistryRow } from "./workflow-registry-row.js";
-
-export type WorkflowRegistryListProps = {
-  readonly live: readonly WorkflowListItem[];
-  readonly scheduled: readonly WorkflowListItem[];
-  readonly selectedId?: string | null;
-  readonly selectedKind?: "run" | "schedule" | null;
-  readonly onSelect?: (item: WorkflowListItem) => void;
-  readonly empty?: ReactNode;
-  readonly className?: string;
-  readonly showHead?: boolean;
-};
-
-/**
- * The combined live-runs-and-schedules registry: a thin composition of
- * `WorkflowRegistryHead`, `WorkflowRegistrySectionHeader` and
- * `WorkflowRegistryRow`. Each of those renders standalone — this component
- * only decides which sections exist and which row is selected.
- */
-export function WorkflowRegistryList({
-  live,
-  scheduled,
-  selectedId = null,
-  selectedKind = null,
-  onSelect,
-  empty,
-  className,
-  showHead = true,
-}: WorkflowRegistryListProps) {
-  const hasRows = live.length > 0 || scheduled.length > 0;
-
-  return (
-    <div aria-label="Workflows" className={cn("flex min-h-0 min-w-0 flex-col", className)}>
-      {showHead ? <WorkflowRegistryHead /> : null}
-      {!hasRows ? (
-        <div className="min-h-0 flex-1 overflow-auto">{empty ?? <EmptyState title="No workflows match these filters" />}</div>
-      ) : (
-        <ul className="min-h-0 flex-1 list-none overflow-auto">
-          {live.length === 0 ? null : (
-            <>
-              <li>
-                <WorkflowRegistrySectionHeader title="Live" count={live.length} />
-              </li>
-              {live.map((item) => (
-                <li key={item.id}>
-                  <WorkflowRegistryRow item={item} selected={selectedKind === "run" && selectedId === item.id} onSelect={onSelect} />
-                </li>
-              ))}
-            </>
-          )}
-          {scheduled.length === 0 ? null : (
-            <>
-              <li>
-                <WorkflowRegistrySectionHeader title="Scheduled" count={scheduled.length} />
-              </li>
-              {scheduled.map((item) => (
-                <li key={item.id}>
-                  <WorkflowRegistryRow
-                    item={item}
-                    selected={selectedKind === "schedule" && selectedId === item.id}
-                    onSelect={onSelect}
-                  />
-                </li>
-              ))}
-            </>
-          )}
-        </ul>
-      )}
-    </div>
-  );
-}
diff --git a/src/ui/workflow-registry-row.tsx b/src/ui/workflow-registry-row.tsx
deleted file mode 100644
index 8230290b..00000000
--- a/src/ui/workflow-registry-row.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { WORKFLOW_SCOPE_BADGE_TONE, workflowScopeLabel, type WorkflowListItem } from "../lib/workflow-registry.js";
-import { cn } from "../lib/utils.js";
-import { Badge } from "./badge.js";
-import { WorkflowStatusBadge } from "./workflow-status-badge.js";
-
-export const WORKFLOW_REGISTRY_GRID = "grid grid-cols-[minmax(0,1.6fr)_110px_72px_88px_100px] gap-2";
-
-export type WorkflowRegistryRowProps = {
-  readonly item: WorkflowListItem;
-  readonly selected?: boolean;
-  readonly onSelect?: (item: WorkflowListItem) => void;
-  readonly className?: string;
-};
-
-/** One row in the combined live-runs-and-schedules list. Split from
- * `WorkflowRegistryList` so a caller building a different container
- * (virtualized, grouped some other way) can reuse the row on its own. */
-export function WorkflowRegistryRow({ item, selected = false, onSelect, className }: WorkflowRegistryRowProps) {
-  return (
-    <button
-      type="button"
-      data-kind={item.itemKind}
-      aria-pressed={selected}
-      onClick={() => onSelect?.(item)}
-      className={cn(
-        WORKFLOW_REGISTRY_GRID,
-        // active:brightness-95 mirrors Button's press state: it lands on
-        // pointer-down, so it sits outside transition-colors.
-        "h-[46px] w-full items-center border-b border-border px-3.5 text-left transition-colors ease-out last:border-b-0 hover:bg-muted active:brightness-95",
-        selected && "bg-primary/10",
-        item.needsYou === true && !selected && "bg-primary/5",
-        className,
-      )}
-    >
-      <span className="min-w-0">
-        <span className="block truncate text-sm font-semibold">{item.title}</span>
-        {item.subtitle === undefined ? null : <span className="block truncate text-xs text-muted-foreground">{item.subtitle}</span>}
-      </span>
-      <span className="truncate text-xs text-muted-foreground">{item.when}</span>
-      <Badge tone={WORKFLOW_SCOPE_BADGE_TONE[item.scope]}>{workflowScopeLabel(item.scope)}</Badge>
-      <WorkflowStatusBadge tone={item.statusTone} label={item.statusLabel} />
-      <span className={cn("truncate font-mono text-[11.5px] tabular-nums text-muted-foreground", item.nextSoon === true && "font-semibold text-primary-emphasis")}>
-        {item.nextOrElapsed}
-      </span>
-    </button>
-  );
-}
diff --git a/src/ui/workflow-registry-section.tsx b/src/ui/workflow-registry-section.tsx
deleted file mode 100644
index 53e56db5..00000000
--- a/src/ui/workflow-registry-section.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { cn } from "../lib/utils.js";
-import { WORKFLOW_REGISTRY_GRID } from "./workflow-registry-row.js";
-
-export type WorkflowRegistryHeadProps = {
-  readonly className?: string;
-  readonly columns?: readonly [string, string, string, string, string];
-};
-
-/** The sticky column-label row above the list. */
-export function WorkflowRegistryHead({
-  className,
-  columns = ["Workflow", "When", "Scope", "Status", "Next"],
-}: WorkflowRegistryHeadProps) {
-  return (
-    <div
-      className={cn(
-        WORKFLOW_REGISTRY_GRID,
-        "sticky top-0 z-10 shrink-0 border-b border-border bg-muted/60 px-3.5 py-2 text-[10.5px] font-bold uppercase tracking-[0.05em] text-muted-foreground",
-        className,
-      )}
-    >
-      {columns.map((column) => (
-        <span key={column}>{column}</span>
-      ))}
-    </div>
-  );
-}
-
-export type WorkflowRegistrySectionHeaderProps = {
-  readonly title: string;
-  readonly count?: number;
-  readonly className?: string;
-};
-
-/** A "Live" / "Scheduled" group divider inside the list. */
-export function WorkflowRegistrySectionHeader({ title, count, className }: WorkflowRegistrySectionHeaderProps) {
-  return (
-    <div
-      className={cn(
-        "sticky top-0 z-10 border-b border-border bg-muted/80 px-3.5 py-1.5 text-[10.5px] font-bold uppercase tracking-[0.05em] text-muted-foreground",
-        className,
-      )}
-    >
-      {count === undefined ? title : `${title} · ${count}`}
-    </div>
-  );
-}
diff --git a/src/ui/workflow-status-badge.tsx b/src/ui/workflow-status-badge.tsx
deleted file mode 100644
index e2eac1a0..00000000
--- a/src/ui/workflow-status-badge.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import {
-  WORKFLOW_STATUS_BADGE_TONE,
-  WORKFLOW_STATUS_DOT_TONE,
-  workflowStatusLive,
-  type WorkflowStatusTone,
-} from "../lib/workflow-registry.js";
-import { Badge } from "./badge.js";
-import { StatusDot } from "./status-dot.js";
-
-export type WorkflowStatusBadgeProps = {
-  readonly tone: WorkflowStatusTone;
-  readonly label: string;
-  readonly className?: string;
-};
-
-/** A run or schedule's status chip: a `Badge` carrying a `StatusDot` sized to
- * the same `WorkflowStatusTone`, with the dot's `live` pulse derived from that
- * tone. Callers own the label and which tone a given phase maps to — this
- * only removes the Badge/StatusDot/tone-lookup wiring that was copy-pasted
- * across `LiveRunHeader`, `ScheduleHeader` and `WorkflowRegistryRow`. */
-export function WorkflowStatusBadge({ tone, label, className }: WorkflowStatusBadgeProps) {
-  return (
-    <Badge tone={WORKFLOW_STATUS_BADGE_TONE[tone]} className={className}>
-      <StatusDot label="" tone={WORKFLOW_STATUS_DOT_TONE[tone]} live={workflowStatusLive(tone)} />
-      {label}
-    </Badge>
-  );
-}
diff --git a/stories/blocks/auth-layout.stories.tsx b/stories/blocks/auth-layout.stories.tsx
index 0600018f..c3b5b3a9 100644
--- a/stories/blocks/auth-layout.stories.tsx
+++ b/stories/blocks/auth-layout.stories.tsx
@@ -1,5 +1,4 @@
 import { AuthLayout } from "../../src/blocks/login/auth-layout.js";
-import { DitherBackground } from "../../src/ui/dither-background.js";
 import { DitherCanvas } from "../../src/ui/dither-canvas.js";
 import { LoginForm } from "../../src/blocks/login/login-form.js";
 
@@ -17,11 +16,3 @@ export const WithDitherCanvasPanel = () => (
   </AuthLayout>
 );
 
-export const WithDitherBackgroundPanel = () => (
-  <AuthLayout
-    brand="Acme"
-    panel={<DitherBackground className="absolute inset-0" src="https://picsum.photos/seed/auth-panel/1200/1600" />}
-  >
-    <LoginForm mode="sign-up" heading="Create your account" onSubmit={() => {}} />
-  </AuthLayout>
-);
diff --git a/stories/blocks/canvas-host.stories.tsx b/stories/blocks/canvas-host.stories.tsx
deleted file mode 100644
index f8716f5b..00000000
--- a/stories/blocks/canvas-host.stories.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-// Both themes are exercised by the workbench's existing global theme toggle
-// (see `src/ui/theme-provider.tsx` / `theme-toggle.tsx`), wired once for
-// every story here — no theme machinery of this story's own.
-import { useState } from "react";
-
-import { CanvasHost, type CanvasHostContent } from "../../src/blocks/canvas-host/canvas-host.js";
-import type { CanvasHostMessage } from "../../src/blocks/canvas-host/canvas-host.js";
-import type { Part } from "../../src/lib/chat-parts.js";
-import { ChatComposer } from "../../src/ui/chat-composer.js";
-import { ChatPanelHeader } from "../../src/ui/chat-panel.js";
-
-export default { title: "Blocks / Canvas host" };
-
-type NoteData = { readonly body: string };
-
-const NOTE: CanvasHostContent<NoteData> = {
-  kind: "note",
-  title: "Release notes — v1.2.0",
-  data: { body: "Shipped the canvas chat host block. Dual-column layout, focus mode, responsive collapse." },
-};
-
-const IDENTITY = { name: "Corbits" };
-
-function seedMessages(): CanvasHostMessage[] {
-  return [
-    { id: "m1", parts: [{ kind: "text", text: "What changed in the last release?" }] },
-    {
-      id: "m2",
-      parts: [
-        { kind: "reasoning", text: "Checking the changelog for the most recent tag.", durationMs: 1200 },
-        { kind: "text", text: "Here's the note — opened it in the canvas." },
-      ],
-    },
-  ];
-}
-
-function longMessages(): CanvasHostMessage[] {
-  const messages: CanvasHostMessage[] = [];
-  for (let i = 0; i < 40; i += 1) {
-    const parts: Part[] = [{ kind: "text", text: `Message ${i + 1}: a line of transcript to prove scroll containment.` }];
-    messages.push({ id: `m${i}`, parts });
-  }
-  return messages;
-}
-
-function renderNote(content: CanvasHostContent<NoteData>) {
-  return <p className="text-sm leading-relaxed whitespace-pre-wrap text-foreground">{content.data.body}</p>;
-}
-
-/** Chat only — `content` is `null`, so the canvas column collapses and the transcript takes the full frame. */
-export const ChatOnly = () => (
-  <div className="h-[640px] w-full overflow-hidden rounded-lg border border-border">
-    <CanvasHost
-      messages={seedMessages()}
-      content={null}
-      renderCanvas={renderNote}
-      focus={false}
-      onFocusChange={() => {}}
-      onClose={() => {}}
-      chatHeader={<ChatPanelHeader identity={IDENTITY} />}
-      composer={<ChatComposer value="" onValueChange={() => {}} onSend={() => {}} />}
-    />
-  </div>
-);
-
-/** Content set, not focused: the even split — chat and canvas share the frame. */
-export const ChatAndCanvas = () => {
-  const [focus, setFocus] = useState(false);
-  const [open, setOpen] = useState(true);
-  return (
-    <div className="h-[640px] w-full overflow-hidden rounded-lg border border-border">
-      <CanvasHost
-        messages={seedMessages()}
-        content={open ? NOTE : null}
-        renderCanvas={renderNote}
-        focus={focus}
-        onFocusChange={setFocus}
-        onClose={() => setOpen(false)}
-        chatHeader={<ChatPanelHeader identity={IDENTITY} />}
-        composer={<ChatComposer value="" onValueChange={() => {}} onSend={() => {}} />}
-      />
-    </div>
-  );
-};
-
-/** Focus mode: the canvas dominates the frame and the chat column collapses to a decorative rail at `lg`+. */
-export const Focused = () => (
-  <div className="h-[640px] w-full overflow-hidden rounded-lg border border-border">
-    <CanvasHost
-      messages={seedMessages()}
-      content={NOTE}
-      renderCanvas={renderNote}
-      focus={true}
-      onFocusChange={() => {}}
-      onClose={() => {}}
-      chatHeader={<ChatPanelHeader identity={IDENTITY} />}
-      composer={<ChatComposer value="" onValueChange={() => {}} onSend={() => {}} />}
-    />
-  </div>
-);
-
-/** Canvas is open but the host hasn't handed a title/body worth showing yet — same empty state as `content === null`, kept as its own story since a consumer may reach it via a different path (e.g. a still-loading fetch that hasn't produced content). */
-export const EmptyCanvas = () => (
-  <div className="h-[640px] w-full overflow-hidden rounded-lg border border-border">
-    <CanvasHost
-      messages={[]}
-      content={null}
-      renderCanvas={renderNote}
-      focus={false}
-      onFocusChange={() => {}}
-      onClose={() => {}}
-      chatHeader={<ChatPanelHeader identity={IDENTITY} />}
-      composer={<ChatComposer value="" onValueChange={() => {}} onSend={() => {}} />}
-      emptyChat={<p className="p-4 text-sm text-muted-foreground">Ask anything to get started.</p>}
-    />
-  </div>
-);
-
-/**
- * Below `lg` (1024px), a narrow frame proves the chat-first split: `split`
- * mode keeps the composer reachable instead of hiding it behind the canvas,
- * and the focus toggle is what swaps to the canvas full-screen and back —
- * the mobile affordance the toggle was previously missing below `lg`.
- */
-export const MobileSplit = () => {
-  const [focus, setFocus] = useState(false);
-  return (
-    <div className="relative h-[640px] w-[375px] overflow-hidden rounded-lg border border-dashed border-border">
-      <CanvasHost
-        messages={seedMessages()}
-        content={NOTE}
-        renderCanvas={renderNote}
-        focus={focus}
-        onFocusChange={setFocus}
-        onClose={() => {}}
-        chatHeader={<ChatPanelHeader identity={IDENTITY} />}
-        composer={<ChatComposer value="" onValueChange={() => {}} onSend={() => {}} />}
-      />
-    </div>
-  );
-};
-
-/** A long transcript and a long canvas payload, to prove each column scrolls in its own box rather than the page overflowing. */
-export const LongContentOverflow = () => (
-  <div className="h-[640px] w-full overflow-hidden rounded-lg border border-border">
-    <CanvasHost
-      messages={longMessages()}
-      content={{
-        kind: "note",
-        title: "A very long note",
-        data: { body: Array.from({ length: 60 }, (_, i) => `Line ${i + 1} of a long canvas payload.`).join("\n") },
-      }}
-      renderCanvas={renderNote}
-      focus={false}
-      onFocusChange={() => {}}
-      onClose={() => {}}
-      chatHeader={<ChatPanelHeader identity={IDENTITY} />}
-      composer={<ChatComposer value="" onValueChange={() => {}} onSend={() => {}} />}
-    />
-  </div>
-);
diff --git a/stories/chat/chat-dock.stories.tsx b/stories/chat/chat-dock.stories.tsx
deleted file mode 100644
index 3a606b44..00000000
--- a/stories/chat/chat-dock.stories.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { Maximize2, Minimize2 } from "lucide-react";
-import { useState } from "react";
-
-import { useChatDock } from "../../src/hooks/use-chat-dock.js";
-import type { ChatMessage } from "../../src/lib/chat-message.js";
-import { ChatComposer } from "../../src/ui/chat-composer.js";
-import { ChatDock, ChatDockFab, ChatDockScrim } from "../../src/ui/chat-dock.js";
-import { ChatPanel, ChatPanelFooter, ChatPanelHeader } from "../../src/ui/chat-panel.js";
-import { ChatThread } from "../../src/ui/chat-thread.js";
-import { TypingIndicator } from "../../src/ui/typing-indicator.js";
-
-export default { title: "Chat / Chat dock" };
-
-const IDENTITY = { name: "Corbits", tagline: "Sales, catalog, orders" };
-
-const SUGGESTIONS = [
-  { id: "s1", label: "What shipped this week?" },
-  { id: "s2", label: "Show slow-moving inventory" },
-];
-
-function seedMessages(): ChatMessage[] {
-  return [
-    {
-      id: "m1",
-      role: "user",
-      createdAt: new Date().toISOString(),
-      parts: [{ type: "text", text: "What shipped this week?" }],
-    },
-    {
-      id: "m2",
-      role: "agent",
-      createdAt: new Date().toISOString(),
-      parts: [{ type: "text", text: "412 orders shipped this week, up 8% over last week." }],
-    },
-  ];
-}
-
-/**
- * Closed → docked → fullpage, driven by `useChatDock`. The dock element never
- * remounts across the walkthrough — only its mode (and therefore its CSS
- * classes) changes, which is what makes `docked → fullpage` a size/position
- * transition on one panel rather than a swap between two.
- */
-export const Walkthrough = () => {
-  const dock = useChatDock();
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
-  const [draft, setDraft] = useState("");
-
-  const send = (text: string) => {
-    setMessages((current) => [
-      ...current,
-      { id: crypto.randomUUID(), role: "user", createdAt: new Date().toISOString(), parts: [{ type: "text", text }] },
-    ]);
-    setDraft("");
-  };
-
-  return (
-    <div className="relative h-[640px] w-full overflow-hidden rounded-lg border border-dashed border-border">
-      <div className="p-4 text-sm text-muted-foreground">
-        Mode: <strong className="text-foreground">{dock.mode}</strong> — open the dock, then expand it to fullpage.
-      </div>
-
-      <ChatDockScrim mode={dock.mode} onClose={dock.close} />
-      <ChatDock mode={dock.mode} shouldAnimateEntrance={dock.shouldAnimateEntrance}>
-        {dock.mode === "closed" ? (
-          <ChatDockFab onOpen={dock.open} />
-        ) : (
-          <ChatPanel>
-            <ChatPanelHeader identity={IDENTITY}>
-              <button
-                type="button"
-                onClick={dock.mode === "fullpage" ? dock.collapse : dock.expand}
-                aria-label={dock.mode === "fullpage" ? "Collapse" : "Expand to fullpage"}
-                className="grid size-7 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
-              >
-                {dock.mode === "fullpage" ? (
-                  <Minimize2 className="size-3.5" aria-hidden />
-                ) : (
-                  <Maximize2 className="size-3.5" aria-hidden />
-                )}
-              </button>
-              <button
-                type="button"
-                onClick={dock.close}
-                aria-label="Close"
-                className="grid size-7 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
-              >
-                ✕
-              </button>
-            </ChatPanelHeader>
-
-            <ChatThread messages={messages} identity={IDENTITY} empty={<p>Ask anything about this week's store.</p>} />
-
-            <ChatPanelFooter>
-              <ChatComposer
-                value={draft}
-                onValueChange={setDraft}
-                onSend={() => send(draft)}
-                suggestions={messages.length === 0 ? SUGGESTIONS : []}
-                onSuggestionSelect={(reply) => send(reply.value ?? reply.label)}
-                autoFocusOn={dock.isOpen}
-              />
-            </ChatPanelFooter>
-          </ChatPanel>
-        )}
-      </ChatDock>
-    </div>
-  );
-};
-
-export const DockedWithTyping = () => (
-  <div className="relative h-[560px] w-full overflow-hidden rounded-lg border border-dashed border-border">
-    <ChatDock mode="docked">
-      <ChatPanel>
-        <ChatPanelHeader identity={IDENTITY} />
-        <ChatThread messages={seedMessages()} identity={IDENTITY} />
-        <div className="px-4">
-          <TypingIndicator />
-        </div>
-        <ChatPanelFooter>
-          <ChatComposer value="" onValueChange={() => {}} onSend={() => {}} busy />
-        </ChatPanelFooter>
-      </ChatPanel>
-    </ChatDock>
-  </div>
-);
diff --git a/stories/chat/generative-ui.stories.tsx b/stories/chat/generative-ui.stories.tsx
deleted file mode 100644
index f90816b6..00000000
--- a/stories/chat/generative-ui.stories.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { useRenderRail } from "../../src/hooks/use-render-rail.js";
-import type { ChatMessage } from "../../src/lib/chat-message.js";
-import type { GenerativeBlock } from "../../src/lib/generative-block.js";
-import { ChatDock } from "../../src/ui/chat-dock.js";
-import { ChatPanel, ChatPanelHeader } from "../../src/ui/chat-panel.js";
-import { ChatThread } from "../../src/ui/chat-thread.js";
-import { GenerativeBlockView } from "../../src/ui/generative-block-view.js";
-import { RenderRail } from "../../src/ui/render-rail.js";
-
-export default { title: "Chat / Generative UI" };
-
-const IDENTITY = { name: "Corbits", tagline: "Sales, catalog, orders" };
-
-const BLOCKS: readonly GenerativeBlock[] = [
-  {
-    type: "kpis",
-    id: "b1",
-    title: "This week",
-    items: [
-      { label: "Orders", value: "412", delta: "+8%" },
-      { label: "Revenue", value: "$38.2k", delta: "+3%" },
-      { label: "Refunds", value: "9", danger: true, delta: "+2" },
-      { label: "AOV", value: "$92.7" },
-    ],
-  },
-  {
-    type: "spark",
-    id: "b2",
-    title: "Orders, 14 days",
-    label: "Orders, rising over 14 days",
-    values: [22, 25, 24, 29, 31, 28, 34, 38, 36, 41, 39, 44, 47, 46],
-  },
-  {
-    type: "table",
-    id: "b3",
-    title: "Slow movers",
-    caption: "Slow-moving inventory",
-    columns: ["SKU", "Units on hand", "Last sold"],
-    rows: [
-      ["FLC-2201", "184", "31 days ago"],
-      ["MUG-0087", "96", "22 days ago"],
-      ["TOTE-14", "61", "19 days ago"],
-    ],
-  },
-  {
-    type: "callout",
-    id: "b4",
-    title: "Reorder point reached",
-    body: "FLC-2201 will stock out in an estimated 9 days at the current sell-through rate.",
-    tone: "danger",
-  },
-];
-
-function buildMessages(): ChatMessage[] {
-  return [
-    {
-      id: "m1",
-      role: "user",
-      createdAt: new Date().toISOString(),
-      parts: [{ type: "text", text: "Give me a full rundown of this week, plus anything at risk." }],
-    },
-    {
-      id: "m2",
-      role: "agent",
-      createdAt: new Date().toISOString(),
-      parts: [{ type: "text", text: "Here is the week at a glance, the trend, and one thing worth a decision." }],
-    },
-  ];
-}
-
-/**
- * The fullpage, dual-column arrangement: the transcript on the left carries
- * every generative block inline, and the rail on the right mirrors whichever
- * one is "active" — the latest by default, or whatever the reader pinned.
- */
-export const FullpageWithRail = () => {
-  const rail = useRenderRail(BLOCKS);
-
-  return (
-    <div className="relative h-[640px] w-full overflow-hidden rounded-lg border border-dashed border-border">
-      <ChatDock mode="fullpage">
-        <div className="flex min-h-0 flex-1">
-          <ChatPanel className="min-w-0 flex-1">
-            <ChatPanelHeader identity={IDENTITY} />
-            <ChatThread
-              messages={buildMessages()}
-              identity={IDENTITY}
-              renderBody={(message) =>
-                message.id === "m2" ? (
-                  <div className="mt-3 flex flex-col gap-4">
-                    {BLOCKS.map((block) => (
-                      <GenerativeBlockView key={block.id} block={block} />
-                    ))}
-                  </div>
-                ) : undefined
-              }
-            />
-          </ChatPanel>
-          <RenderRail
-            block={rail.activeBlock}
-            isPinned={rail.isPinned}
-            onTogglePin={() => rail.togglePin(rail.activeBlock?.id ?? "")}
-            hasNewerBlock={rail.hasNewerBlock}
-            onJumpToLatest={rail.jumpToLatest}
-          />
-        </div>
-      </ChatDock>
-    </div>
-  );
-};
-
-/**
- * A block the reader pinned: `RenderRail` itself is stateless, so this story
- * shows the pinned state directly rather than through the hook's own effect.
- */
-export const PinnedBlock = () => (
-  <div className="h-[420px] w-[22rem]">
-    <RenderRail block={BLOCKS[2] ?? null} isPinned onTogglePin={() => {}} />
-  </div>
-);
diff --git a/stories/chat/message-list.stories.tsx b/stories/chat/message-list.stories.tsx
deleted file mode 100644
index f6979984..00000000
--- a/stories/chat/message-list.stories.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useState } from "react";
-
-import { MessageList } from "../../src/ui/message-list.js";
-
-export default { title: "Chat / Message list" };
-
-function bubble(text: string) {
-  return (
-    <div className="rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground">{text}</div>
-  );
-}
-
-/** A short list — no scrolling needed, but the container is set up the same way. */
-export const ShortList = () => (
-  <MessageList itemCount={3} className="h-64 rounded-lg border border-border p-3">
-    {bubble("Hi there.")}
-    {bubble("What shipped this week?")}
-    {bubble("412 orders shipped this week, up 8% over last week.")}
-  </MessageList>
-);
-
-/**
- * A live-updating list: "Send message" appends to the bottom while pinned —
- * the list follows. "Scroll up, then send" simulates the reader reading
- * history while a message arrives — the list holds their position instead
- * of yanking them down.
- */
-export const StickToBottomVsPreservePosition = () => {
-  const [items, setItems] = useState(() => Array.from({ length: 8 }, (_, i) => `Message ${i + 1}`));
-
-  return (
-    <div className="flex max-w-md flex-col gap-2">
-      <div className="flex gap-2">
-        <button
-          type="button"
-          className="rounded-md border border-border px-2.5 py-1.5 text-xs"
-          onClick={() => setItems((current) => [...current, `Message ${current.length + 1}`])}
-        >
-          Send message
-        </button>
-      </div>
-      <p className="text-xs text-muted-foreground">
-        Scroll the list up first, then send a message — the view holds still instead of jumping to the new one.
-      </p>
-      <MessageList itemCount={items.length} className="h-56 rounded-lg border border-border p-3">
-        {items.map((text) => (
-          <div key={text} className="rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground">
-            {text}
-          </div>
-        ))}
-      </MessageList>
-    </div>
-  );
-};
-
-/** No items: an empty scroll frame, ready for the first message. */
-export const Empty = () => (
-  <MessageList itemCount={0} className="h-40 rounded-lg border border-dashed border-border p-3" />
-);
diff --git a/stories/primitives/dashboard-section.stories.tsx b/stories/primitives/dashboard-section.stories.tsx
deleted file mode 100644
index 17f75fa0..00000000
--- a/stories/primitives/dashboard-section.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { DashboardSection } from "../../src/ui/dashboard-section.js";
-import { StatGrid, StatGridItem } from "../../src/ui/stat-grid.js";
-import { ViewToggle } from "../../src/ui/view-toggle.js";
-
-export default { title: "Primitives / Dashboard section" };
-
-export const Plain = () => (
-  <DashboardSection title="Engagement" description="Turns and tool calls over the selected range.">
-    <p className="text-sm text-muted-foreground">Chart panels compose here.</p>
-  </DashboardSection>
-);
-
-export const Highlighted = () => (
-  <DashboardSection
-    title="At a glance"
-    variant="highlighted"
-    action={<ViewToggle mode="grid" onChange={() => undefined} />}
-  >
-    <StatGrid>
-      <StatGridItem label="Turns" value="1,284" />
-      <StatGridItem label="Tool calls" value="9,102" />
-      <StatGridItem label="Tokens" value="4.2M" />
-      <StatGridItem label="Tool errors" value="37" danger />
-    </StatGrid>
-  </DashboardSection>
-);
diff --git a/stories/primitives/dial.stories.tsx b/stories/primitives/dial.stories.tsx
deleted file mode 100644
index 4278723c..00000000
--- a/stories/primitives/dial.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useState } from "react";
-
-import { Dial } from "../../src/ui/dial.js";
-
-export default { title: "Primitives / Dial" };
-
-export const Interactive = () => {
-  const [value, setValue] = useState(0.7);
-  return (
-    <Dial
-      label="Creativity"
-      value={value}
-      onValueChange={setValue}
-      min={0}
-      max={1}
-      step={0.1}
-      description="Higher values allow more varied responses."
-      valueText={value >= 0.7 ? "Creative" : value >= 0.4 ? "Balanced" : "Focused"}
-    />
-  );
-};
-
-export const Disabled = () => (
-  <Dial label="Token budget" value={40} onValueChange={() => {}} min={0} max={100} disabled />
-);
diff --git a/stories/primitives/dither-background.stories.tsx b/stories/primitives/dither-background.stories.tsx
deleted file mode 100644
index 0527472d..00000000
--- a/stories/primitives/dither-background.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { DitherBackground } from "../../src/ui/dither-background.js";
-
-export default { title: "Primitives / Dither Background" };
-
-export const Default = () => (
-  <div className="h-96 w-full max-w-xl overflow-hidden rounded-lg">
-    <DitherBackground src="https://picsum.photos/seed/dither-background/1200/900" />
-  </div>
-);
-
-export const CoarseGrain = () => (
-  <div className="h-96 w-full max-w-xl overflow-hidden rounded-lg">
-    <DitherBackground cell={8} levels={2} src="https://picsum.photos/seed/dither-coarse/1200/900" />
-  </div>
-);
-
-export const NoWarp = () => (
-  <div className="h-96 w-full max-w-xl overflow-hidden rounded-lg">
-    <DitherBackground warp={false} src="https://picsum.photos/seed/dither-static/1200/900" />
-  </div>
-);
diff --git a/stories/primitives/library-page-header.stories.tsx b/stories/primitives/library-page-header.stories.tsx
index c4a53920..62d033f7 100644
--- a/stories/primitives/library-page-header.stories.tsx
+++ b/stories/primitives/library-page-header.stories.tsx
@@ -2,17 +2,14 @@ import { useState } from "react";
 
 import { Button } from "../../src/ui/button.js";
 import { LibraryPageHeader } from "../../src/ui/library-page-header.js";
-import { LibrarySearchInput } from "../../src/ui/library-search-input.js";
 import { ViewToggle, type ViewMode } from "../../src/ui/view-toggle.js";
 
 export default { title: "Primitives / Library page header" };
 
 function CatalogHeader() {
-  const [query, setQuery] = useState("");
   const [mode, setMode] = useState<ViewMode>("grid");
   return (
     <LibraryPageHeader title="Skills" count={24} subtitle="Everything your agents know how to do.">
-      <LibrarySearchInput label="Search skills" value={query} onChange={setQuery} />
       <ViewToggle mode={mode} onChange={setMode} />
       <Button size="sm">New skill</Button>
     </LibraryPageHeader>
@@ -21,13 +18,8 @@ function CatalogHeader() {
 
 export const Catalog = () => <CatalogHeader />;
 
-function DenseHeader() {
-  const [query, setQuery] = useState("");
-  return (
-    <LibraryPageHeader title="Chats" titleSize="sm" count={112}>
-      <LibrarySearchInput label="Search chats" value={query} onChange={setQuery} variant="ghost" />
-    </LibraryPageHeader>
-  );
-}
-
-export const Dense = () => <DenseHeader />;
+export const Dense = () => (
+  <LibraryPageHeader title="Chats" titleSize="sm" count={112}>
+    <Button size="sm" variant="ghost">New chat</Button>
+  </LibraryPageHeader>
+);
diff --git a/stories/primitives/pagination.stories.tsx b/stories/primitives/pagination.stories.tsx
deleted file mode 100644
index 9891345d..00000000
--- a/stories/primitives/pagination.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useState } from "react";
-
-import { Pagination } from "../../src/ui/pagination.js";
-
-export default { title: "Primitives / Pagination" };
-
-export const Interactive = () => {
-  const [page, setPage] = useState(1);
-  return <Pagination page={page} totalPages={8} total={193} onPageChange={setPage} />;
-};
-
-export const SinglePageRendersNothing = () => (
-  <div className="text-sm text-muted-foreground">
-    <Pagination page={1} totalPages={1} onPageChange={() => {}} />
-    Nothing renders above — a list that fits on one page shows no pagination chrome.
-  </div>
-);
diff --git a/stories/primitives/pulsing-ring.stories.tsx b/stories/primitives/pulsing-ring.stories.tsx
deleted file mode 100644
index 5486f3e5..00000000
--- a/stories/primitives/pulsing-ring.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { PulsingRing } from "../../src/ui/pulsing-ring.js";
-
-export default { title: "Primitives / Pulsing ring" };
-
-export const OnAStep = () => (
-  <div className="relative inline-flex size-3 items-center justify-center rounded-full bg-primary-emphasis">
-    <PulsingRing colorClassName="bg-primary-emphasis" />
-  </div>
-);
-
-export const Danger = () => (
-  <div className="relative inline-flex size-3 items-center justify-center rounded-full bg-destructive">
-    <PulsingRing colorClassName="bg-destructive" />
-  </div>
-);
-
-export const InARow = () => (
-  <div className="flex items-center gap-6 p-4">
-    {["Queued", "Running", "Retrying"].map((label, index) => (
-      <div key={label} className="flex items-center gap-2">
-        <span className="relative inline-flex size-2.5 rounded-full bg-primary-emphasis">
-          {index === 1 ? <PulsingRing colorClassName="bg-primary-emphasis" /> : null}
-        </span>
-        <span className="text-sm text-muted-foreground">{label}</span>
-      </div>
-    ))}
-  </div>
-);
diff --git a/stories/primitives/radio-group.stories.tsx b/stories/primitives/radio-group.stories.tsx
deleted file mode 100644
index 91e76838..00000000
--- a/stories/primitives/radio-group.stories.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useState } from "react";
-
-import { RadioGroup, RadioOption } from "../../src/ui/radio-group.js";
-
-export default { title: "Primitives / Radio group" };
-
-export const Default = () => {
-  const [value, setValue] = useState("sonnet");
-  return (
-    <RadioGroup name="model" label="Model" value={value} onValueChange={setValue}>
-      <RadioOption value="sonnet" label="Sonnet" description="Balanced speed and capability." />
-      <RadioOption value="opus" label="Opus" description="Most capable, slower and pricier." />
-      <RadioOption value="haiku" label="Haiku" description="Fastest, best for simple tasks." />
-    </RadioGroup>
-  );
-};
-
-export const Focus = () => {
-  const [value, setValue] = useState("sonnet");
-  return (
-    <RadioGroup name="model-focus" label="Model" value={value} onValueChange={setValue}>
-      <RadioOption value="sonnet" label="Sonnet" />
-      <RadioOption value="opus" label="Opus" />
-    </RadioGroup>
-  );
-};
-
-export const Disabled = () => (
-  <RadioGroup name="model-disabled" label="Model" value="sonnet" onValueChange={() => {}}>
-    <RadioOption value="sonnet" label="Sonnet" />
-    <RadioOption value="opus" label="Opus" disabled />
-  </RadioGroup>
-);
-
-export const Invalid = () => (
-  <RadioGroup name="model-invalid" label="Model" value="" onValueChange={() => {}}>
-    <RadioOption value="sonnet" label="Sonnet" invalid />
-    <RadioOption value="opus" label="Opus" invalid />
-  </RadioGroup>
-);
-
-export const DisabledWithDescription = () => (
-  <RadioGroup name="model-disabled-description" label="Model" value="sonnet" onValueChange={() => {}}>
-    <RadioOption value="sonnet" label="Sonnet" description="Balanced speed and capability." />
-    <RadioOption value="opus" label="Opus" description="Most capable, slower and pricier." disabled />
-  </RadioGroup>
-);
-
-export const InvalidWithDescription = () => (
-  <RadioGroup name="model-invalid-description" label="Model" value="" onValueChange={() => {}}>
-    <RadioOption value="sonnet" label="Sonnet" description="Balanced speed and capability." invalid />
-    <RadioOption value="opus" label="Opus" description="Most capable, slower and pricier." invalid />
-  </RadioGroup>
-);
-
-export const DisabledInvalid = () => (
-  <RadioGroup name="model-disabled-invalid" label="Model" value="" onValueChange={() => {}}>
-    <RadioOption value="sonnet" label="Sonnet" description="Balanced speed and capability." disabled invalid />
-    <RadioOption value="opus" label="Opus" description="Most capable, slower and pricier." invalid />
-  </RadioGroup>
-);
-
-export const WithDescriptions = () => {
-  const [value, setValue] = useState("agent");
-  return (
-    <RadioGroup name="mode" label="Mode" value={value} onValueChange={setValue}>
-      <RadioOption value="agent" label="Agent" description="Plans and runs multi-step work on its own." />
-      <RadioOption value="chat" label="Chat" description="Responds in the thread, one turn at a time." />
-      <RadioOption value="review" label="Review" description="Reads and comments without taking action." />
-    </RadioGroup>
-  );
-};
diff --git a/stories/primitives/sidebar-rail-and-panel.stories.tsx b/stories/primitives/sidebar-rail-and-panel.stories.tsx
index 68ee3bb5..926813d4 100644
--- a/stories/primitives/sidebar-rail-and-panel.stories.tsx
+++ b/stories/primitives/sidebar-rail-and-panel.stories.tsx
@@ -1,84 +1,30 @@
-import { Activity, Bell, Hash, Lock, MessagesSquare, Pin, Settings, User, Users, Workflow } from "lucide-react";
-import { useEffect, useState, type CSSProperties, type ReactNode } from "react";
+import { Hash, MessagesSquare, Pin, Settings, Users } from "lucide-react";
+import { useEffect, useState } from "react";
 
-import { useSidebarPanel } from "../../src/hooks/use-sidebar-panel.js";
 import { formatRelativeTime } from "../../src/lib/relative-time.js";
 import { Badge } from "../../src/ui/badge.js";
 import { SidebarItemRow } from "../../src/ui/sidebar-item-row.js";
 import { SidebarPanel, SidebarPanelBody, SidebarPanelFooter, SidebarPanelHeader, SidebarPanelPins } from "../../src/ui/sidebar-panel.js";
-import { SidebarRail, type SidebarRailItem } from "../../src/ui/sidebar-rail.js";
-import { SidebarPanelSection } from "../../src/ui/sidebar-section.js";
 import { StatusDot } from "../../src/ui/status-dot.js";
 
-export default { title: "Primitives / Sidebar rail + panel" };
-
-// `data-ctx-target` on "channels" demonstrates a consumer attaching its own
-// targeting attribute (a tour, a spotlight) to a specific rail item — passed
-// straight through by SidebarRail to the rendered <button>.
-const PAGES: readonly SidebarRailItem[] = [
-  { id: "channels", label: "Channels", icon: <Hash />, "data-ctx-target": "rail-channels" },
-  { id: "routines", label: "Routines", icon: <Workflow /> },
-  { id: "activity", label: "Activity", icon: <Activity />, badge: <StatusDot label="3 unread" tone="emphasis" size="xs" /> },
-];
-
-/**
- * Composition contract, demonstrated: an app owns `SidebarRail`'s `items` and
- * `activeId`/`onSelect`, and swaps what it renders inside `SidebarPanel`
- * based on that same `activeId` — `useSidebarPanel({ activePageId })` is what
- * hands back the `panelKey`/`panelTransitionClassName` pair that replays the
- * page-swap animation when the app does.
- */
-function TwoColumnShell({ page, onPageChange, children }: { page: string; onPageChange: (id: string) => void; children: ReactNode }) {
-  const { panelKey, panelTransitionClassName } = useSidebarPanel({ activePageId: page });
-
-  return (
-    <div className="flex h-[520px] overflow-hidden rounded-lg border border-border">
-      <SidebarRail
-        items={PAGES}
-        activeId={page}
-        onSelect={onPageChange}
-        footer={
-          <>
-            <button type="button" aria-label="Notifications" className="grid size-10 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground">
-              <Bell className="size-5" aria-hidden />
-            </button>
-            <button type="button" aria-label="Corbits Bench, signed in as Dana" className="grid size-10 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground">
-              <User className="size-5" aria-hidden />
-            </button>
-          </>
-        }
-      />
-      <SidebarPanel key={panelKey} className={panelTransitionClassName}>
-        {children}
-      </SidebarPanel>
-    </div>
-  );
-}
+export default { title: "Primitives / Sidebar panel" };
 
 export const ChannelsPanel = () => {
-  const [page, setPage] = useState("channels");
-  const { selectedId, select, isSectionCollapsed, toggleSection } = useSidebarPanel({ activePageId: page });
+  const [selectedId, setSelectedId] = useState("general");
 
   return (
-    <TwoColumnShell page={page} onPageChange={setPage}>
-      <SidebarPanelHeader title="Channels" action={<Settings className="size-4 text-muted-foreground" aria-hidden />} />
-      <SidebarPanelPins>
-        <SidebarPanelSection label="Pinned">
+    <div className="flex h-[520px] overflow-hidden rounded-lg border border-border">
+      <SidebarPanel>
+        <SidebarPanelHeader title="Channels" action={<Settings className="size-4 text-muted-foreground" aria-hidden />} />
+        <SidebarPanelPins>
           <SidebarItemRow
             leading={<Pin className="text-muted-foreground" />}
             name="#launch-week"
             selected={selectedId === "launch-week"}
-            onSelect={() => select("launch-week")}
+            onSelect={() => setSelectedId("launch-week")}
           />
-        </SidebarPanelSection>
-      </SidebarPanelPins>
-      <SidebarPanelBody>
-        <SidebarPanelSection
-          label="Channels"
-          onAdd={() => undefined}
-          collapsed={isSectionCollapsed("channels")}
-          onToggleCollapse={() => toggleSection("channels")}
-        >
+        </SidebarPanelPins>
+        <SidebarPanelBody>
           {[
             { id: "general", name: "general", unread: true },
             { id: "eng", name: "eng", unread: false },
@@ -91,39 +37,25 @@ export const ChannelsPanel = () => {
               unread={channel.unread}
               meta={channel.unread ? <Badge tone="accent">3</Badge> : undefined}
               selected={selectedId === channel.id}
-              onSelect={() => select(channel.id)}
+              onSelect={() => setSelectedId(channel.id)}
             />
           ))}
-        </SidebarPanelSection>
-
-        <SidebarPanelSection
-          label="Direct messages"
-          collapsed={isSectionCollapsed("dms")}
-          onToggleCollapse={() => toggleSection("dms")}
-        >
           <SidebarItemRow
             leading={<MessagesSquare className="text-muted-foreground" />}
             name="Priya Shah"
             meta={<StatusDot label="Online" tone="emphasis" size="xs" />}
             selected={selectedId === "priya"}
-            onSelect={() => select("priya")}
+            onSelect={() => setSelectedId("priya")}
           />
-          <SidebarItemRow
-            leading={<MessagesSquare className="text-muted-foreground" />}
-            name="Marcus Webb"
-            meta={<StatusDot label="Away" tone="neutral" size="xs" />}
-            selected={selectedId === "marcus"}
-            onSelect={() => select("marcus")}
-          />
-        </SidebarPanelSection>
-      </SidebarPanelBody>
-      <SidebarPanelFooter>
-        <button type="button" className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-muted-foreground hover:bg-muted">
-          <Users className="size-4" aria-hidden />
-          Invite people
-        </button>
-      </SidebarPanelFooter>
-    </TwoColumnShell>
+        </SidebarPanelBody>
+        <SidebarPanelFooter>
+          <button type="button" className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-muted-foreground hover:bg-muted">
+            <Users className="size-4" aria-hidden />
+            Invite people
+          </button>
+        </SidebarPanelFooter>
+      </SidebarPanel>
+    </div>
   );
 };
 
@@ -134,8 +66,7 @@ type RoutineRun = { readonly id: string; readonly name: string; readonly started
  * plays `corbits-row-in` on mount, and the oldest run is marked `leaving`
  * for one frame — playing `corbits-row-out` — before it is actually dropped.
  */
-export const RoutinesActivity = () => {
-  const [page] = useState("routines");
+export const LiveRows = () => {
   const [now, setNow] = useState(() => Date.now());
   const [runs, setRuns] = useState<readonly RoutineRun[]>([
     { id: "r1", name: "Nightly digest", startedAt: new Date(Date.now() - 45_000).toISOString() },
@@ -156,10 +87,10 @@ export const RoutinesActivity = () => {
   }, []);
 
   return (
-    <TwoColumnShell page={page} onPageChange={() => undefined}>
-      <SidebarPanelHeader title="Routines activity" />
-      <SidebarPanelBody>
-        <SidebarPanelSection label="Running now">
+    <div className="flex h-[520px] overflow-hidden rounded-lg border border-border">
+      <SidebarPanel>
+        <SidebarPanelHeader title="Routines activity" />
+        <SidebarPanelBody>
           {runs.map((run) => (
             <SidebarItemRow
               key={run.id}
@@ -169,55 +100,8 @@ export const RoutinesActivity = () => {
               leaving={run.leaving}
             />
           ))}
-        </SidebarPanelSection>
-      </SidebarPanelBody>
-    </TwoColumnShell>
-  );
-};
-
-/**
- * `--sidebar-row-radius`/`--sidebar-row-selected-bg` are the row's own restyle
- * points — a consumer sets them once on a scoping element and every row under
- * it reads the override, no specificity fight with the Tailwind utility the
- * row ships with by default.
- */
-export const CustomRowTokens = () => {
-  const [page] = useState("channels");
-  const { selectedId, select } = useSidebarPanel({ activePageId: page });
-
-  return (
-    <div style={{ "--sidebar-row-radius": "0px", "--sidebar-row-selected-bg": "color-mix(in srgb, var(--destructive) 12%, transparent)" } as CSSProperties}>
-      <TwoColumnShell page={page} onPageChange={() => undefined}>
-        <SidebarPanelHeader title="Channels" />
-        <SidebarPanelBody>
-          <SidebarPanelSection label="Channels">
-            <SidebarItemRow leading={<Hash className="text-muted-foreground" />} name="general" selected={selectedId === "general"} onSelect={() => select("general")} />
-            <SidebarItemRow leading={<Hash className="text-muted-foreground" />} name="eng" selected={selectedId === "eng"} onSelect={() => select("eng")} />
-          </SidebarPanelSection>
         </SidebarPanelBody>
-      </TwoColumnShell>
+      </SidebarPanel>
     </div>
   );
 };
-
-export const PinsSection = () => {
-  const [page] = useState("activity");
-  const { selectedId, select } = useSidebarPanel({ activePageId: page });
-
-  return (
-    <TwoColumnShell page={page} onPageChange={() => undefined}>
-      <SidebarPanelHeader title="Activity" />
-      <SidebarPanelPins>
-        <SidebarPanelSection label="Pins">
-          <SidebarItemRow leading={<Pin className="text-primary-emphasis" />} name="Q3 roadmap" selected={selectedId === "roadmap"} onSelect={() => select("roadmap")} />
-          <SidebarItemRow leading={<Pin className="text-primary-emphasis" />} name="Incident #482" meta={<Badge tone="danger">Open</Badge>} selected={selectedId === "incident"} onSelect={() => select("incident")} />
-        </SidebarPanelSection>
-      </SidebarPanelPins>
-      <SidebarPanelBody>
-        <SidebarPanelSection label="Recent">
-          <SidebarItemRow leading={<Lock className="text-muted-foreground" />} name="Access review" onSelect={() => select("access-review")} />
-        </SidebarPanelSection>
-      </SidebarPanelBody>
-    </TwoColumnShell>
-  );
-};
diff --git a/stories/primitives/toggle-list.stories.tsx b/stories/primitives/toggle-list.stories.tsx
deleted file mode 100644
index 174c8012..00000000
--- a/stories/primitives/toggle-list.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useState } from "react";
-
-import { ToggleList, type ToggleItem } from "../../src/ui/toggle-list.js";
-
-export default { title: "Primitives / Toggle list" };
-
-const initial: ToggleItem[] = [
-  { id: "web-search", label: "Web search", description: "Allow the agent to search the web.", enabled: true },
-  { id: "code-exec", label: "Code execution", description: "Run generated code in a sandbox.", enabled: false },
-  { id: "file-write", label: "File write", description: "Allow writes outside the sandbox.", enabled: false, disabled: true },
-];
-
-export const Interactive = () => {
-  const [items, setItems] = useState(initial);
-  return (
-    <ToggleList
-      label="Available tools"
-      items={items}
-      onToggle={(item, enabled) =>
-        setItems((current) => current.map((entry) => (entry.id === item.id ? { ...entry, enabled } : entry)))
-      }
-    />
-  );
-};
-
-export const Empty = () => <ToggleList label="Available tools" items={[]} onToggle={() => {}} />;
diff --git a/stories/primitives/viz.stories.tsx b/stories/primitives/viz.stories.tsx
index dc986f04..89c661d2 100644
--- a/stories/primitives/viz.stories.tsx
+++ b/stories/primitives/viz.stories.tsx
@@ -1,18 +1,8 @@
-import { computeDelta } from "../../src/lib/metrics.js";
-import { DeltaBadge } from "../../src/ui/delta-badge.js";
-import { Heatmap } from "../../src/ui/heatmap.js";
 import { StatGrid, StatGridItem } from "../../src/ui/stat-grid.js";
 import { TokenMosaic } from "../../src/ui/token-mosaic.js";
 
 export default { title: "Primitives / Viz" };
 
-const days = Array.from({ length: 42 }, (_, index) => ({
-  date: `2026-06-${String((index % 30) + 1).padStart(2, "0")}`,
-  value: [0, 2, 5, 0, 9, 3, 1][index % 7] ?? 0,
-}));
-
-export const HeatmapStrip = () => <Heatmap days={days} label="Runs per day" />;
-
 export const Mosaic = () => (
   <TokenMosaic
     label="Token usage by class"
@@ -25,15 +15,10 @@ export const Mosaic = () => (
   />
 );
 
-export const Deltas = () => (
+export const Stats = () => (
   <StatGrid columns={3}>
-    <StatGridItem label="Turns" value="1,284" delta={<DeltaBadge delta={computeDelta(1284, 1100)} upIsGood />} />
-    <StatGridItem
-      label="Tool errors"
-      value="37"
-      danger
-      delta={<DeltaBadge delta={computeDelta(37, 21)} upIsGood={false} />}
-    />
-    <StatGridItem label="Tokens" value="4.2M" delta={<DeltaBadge delta={computeDelta(42, null)} upIsGood />} />
+    <StatGridItem label="Turns" value="1,284" />
+    <StatGridItem label="Tool errors" value="37" danger />
+    <StatGridItem label="Tokens" value="4.2M" />
   </StatGrid>
 );
diff --git a/stories/workflow/kind-picker.stories.tsx b/stories/workflow/kind-picker.stories.tsx
deleted file mode 100644
index 32e31e7c..00000000
--- a/stories/workflow/kind-picker.stories.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useState } from "react";
-
-import { KindPickerCard, KindPickerFilters, KindPickerList, KindPickerSearch } from "../../src/ui/kind-picker.js";
-import type { KindPickerItem } from "../../src/lib/workflow-registry.js";
-
-export default { title: "Workflow / Kind picker" };
-
-const ITEMS: KindPickerItem[] = [
-  {
-    id: "invoice-reminders",
-    label: "Invoice reminders",
-    description: "Chases every invoice more than 30 days overdue.",
-    category: "finance",
-    categoryLabel: "Finance",
-  },
-  {
-    id: "vendor-renewal",
-    label: "Vendor renewal review",
-    description: "Flags vendor contracts renewing in the next 30 days.",
-    category: "finance",
-    categoryLabel: "Finance",
-    alreadyOn: true,
-  },
-  {
-    id: "inbox-triage",
-    label: "Daily inbox triage",
-    description: "Sorts and labels new mail every weekday morning.",
-    category: "productivity",
-    categoryLabel: "Productivity",
-  },
-];
-
-export const Card = () => <KindPickerCard item={ITEMS[1]!} selected />;
-
-export const SearchAndFilters = () => {
-  const [selectedCategory, setSelectedCategory] = useState<string>();
-  return (
-    <div className="flex w-96 flex-col gap-3">
-      <KindPickerSearch value="" onChange={() => {}} />
-      <KindPickerFilters
-        categories={[
-          { id: "finance", label: "Finance" },
-          { id: "productivity", label: "Productivity" },
-        ]}
-        selectedCategory={selectedCategory}
-        onCategoryChange={setSelectedCategory}
-      />
-      <KindPickerList items={ITEMS} selectedId="vendor-renewal" />
-    </div>
-  );
-};
-
-export const NoResults = () => (
-  <div className="w-96">
-    <KindPickerList items={[]} />
-  </div>
-);
diff --git a/stories/workflow/live-run-inspector.stories.tsx b/stories/workflow/live-run-inspector.stories.tsx
deleted file mode 100644
index d7d9753f..00000000
--- a/stories/workflow/live-run-inspector.stories.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { InspectorEmpty } from "../../src/ui/inspector-shell.js";
-import { LiveRunInspector } from "../../src/ui/live-run-inspector.js";
-import type { StepListItem } from "../../src/lib/workflow-registry.js";
-
-export default { title: "Workflow / Live run inspector" };
-
-const STEPS: StepListItem[] = [
-  { id: "1", name: "Collect open invoices", status: "done" },
-  { id: "2", name: "Draft the reminder email", status: "done", meta: "3 recipients" },
-  { id: "3", name: "Send for approval", status: "active" },
-  { id: "4", name: "Send to customers", status: "pending" },
-];
-
-export const Running = () => (
-  <div className="h-[520px] w-96">
-    <LiveRunInspector
-      phase="running"
-      scope="personal"
-      title="Invoice reminders"
-      description="Chases every invoice more than 30 days overdue."
-      elapsed="00:42"
-      started="8:02 PM"
-      runId="run_9f2a1c"
-      steps={STEPS}
-    />
-  </div>
-);
-
-export const AwaitingYou = () => (
-  <div className="h-[520px] w-96">
-    <LiveRunInspector
-      phase="awaiting"
-      scope="tenant"
-      title="Vendor renewal review"
-      elapsed="04:11"
-      steps={STEPS}
-      gate={
-        <div className="rounded-lg border border-primary-emphasis/30 bg-primary/5 px-3.5 py-3">
-          <p className="text-sm font-semibold">Approve the renewal terms?</p>
-        </div>
-      }
-    />
-  </div>
-);
-
-export const Failed = () => (
-  <div className="h-[520px] w-96">
-    <LiveRunInspector
-      phase="failed"
-      title="Weekly metrics summary"
-      steps={[
-        { id: "1", name: "Fetch the latest metrics export", status: "done" },
-        { id: "2", name: "Build the weekly summary", status: "failed", meta: "Timed out after 30s" },
-      ]}
-    />
-  </div>
-);
-
-export const Empty = () => (
-  <div className="h-[520px] w-96">
-    <LiveRunInspector
-      phase="running"
-      title="Live run"
-      empty={<InspectorEmpty title="No run selected" description="Pick a live run from the list to see its details here." />}
-    />
-  </div>
-);
diff --git a/stories/workflow/schedule-inspector.stories.tsx b/stories/workflow/schedule-inspector.stories.tsx
deleted file mode 100644
index 64546e67..00000000
--- a/stories/workflow/schedule-inspector.stories.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { InspectorEmpty } from "../../src/ui/inspector-shell.js";
-import { ScheduleInspectorView } from "../../src/ui/schedule-inspector.js";
-
-export default { title: "Workflow / Schedule inspector" };
-
-export const Active = () => (
-  <div className="h-[420px] w-96">
-    <ScheduleInspectorView
-      enabled
-      scope="tenant"
-      title="Weekly metrics summary"
-      description="Posts the last 7 days of usage to #leadership every Monday."
-      cadence="Every Monday at 8:00 AM"
-      next="Mon, 8:00 AM"
-      last="Last Monday"
-    />
-  </div>
-);
-
-export const Paused = () => (
-  <div className="h-[420px] w-96">
-    <ScheduleInspectorView
-      enabled={false}
-      scope="personal"
-      title="Daily inbox triage"
-      cadence="Every weekday at 7:30 AM"
-      last="Friday"
-    />
-  </div>
-);
-
-export const Empty = () => (
-  <div className="h-[420px] w-96">
-    <ScheduleInspectorView
-      enabled
-      scope="personal"
-      title="Schedule"
-      cadence=""
-      empty={<InspectorEmpty title="No schedule selected" description="Pick a schedule from the list to see its details here." />}
-    />
-  </div>
-);
diff --git a/stories/workflow/step-graph.stories.tsx b/stories/workflow/step-graph.stories.tsx
deleted file mode 100644
index a66caa35..00000000
--- a/stories/workflow/step-graph.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { StepGraph, type StepGraphStep } from "../../src/ui/step-graph.js";
-
-export default { title: "Workflow / Step graph" };
-
-const STEPS: StepGraphStep[] = [
-  { id: "1", title: "Watch inbox", kind: "auto", status: "completed" },
-  { id: "2", title: "Summarize the thread", kind: "agent", status: "completed" },
-  { id: "3", title: "Approve the reply", kind: "human", status: "running" },
-  { id: "4", title: "Send the reply", kind: "auto", status: "pending" },
-];
-
-export const Compact = () => <StepGraph steps={STEPS} density="compact" />;
-
-export const Expanded = () => <StepGraph steps={STEPS} density="expanded" />;
-
-export const Empty = () => <StepGraph steps={[]} />;
diff --git a/stories/workflow/step-sidebar.stories.tsx b/stories/workflow/step-sidebar.stories.tsx
deleted file mode 100644
index cfa73457..00000000
--- a/stories/workflow/step-sidebar.stories.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useState } from "react";
-
-import { StepSidebar } from "../../src/ui/step-sidebar.js";
-import type { WorkflowStep } from "../../src/lib/workflow-run-progress.js";
-
-export default { title: "Workflow / Step sidebar" };
-
-const STEPS: WorkflowStep[] = [
-  { number: 1, label: "Collect open invoices", status: "completed" },
-  { number: 2, label: "Draft the reminder email", status: "completed" },
-  { number: 3, label: "Send for approval", status: "current" },
-  { number: 4, label: "Send to customers", status: "pending" },
-];
-
-/** Owns `collapsed` state the way any real consumer would — `StepSidebar`
- * itself holds no state. */
-function ToggleableStepSidebar(props: Omit<React.ComponentProps<typeof StepSidebar>, "collapsed" | "onToggle">) {
-  const [collapsed, setCollapsed] = useState(false);
-  return <StepSidebar {...props} collapsed={collapsed} onToggle={() => setCollapsed((c) => !c)} />;
-}
-
-export const Expanded = () => (
-  <div className="h-96">
-    <ToggleableStepSidebar steps={STEPS} />
-  </div>
-);
-
-export const Collapsed = () => {
-  const [collapsed, setCollapsed] = useState(true);
-  return (
-    <div className="h-96">
-      <StepSidebar steps={STEPS} collapsed={collapsed} onToggle={() => setCollapsed((c) => !c)} />
-    </div>
-  );
-};
-
-export const WithFooter = () => (
-  <div className="h-96">
-    <ToggleableStepSidebar
-      steps={STEPS}
-      footer={
-        <div className="flex flex-col gap-1 p-3">
-          <div className="text-[10.5px] font-bold uppercase tracking-[0.05em] text-muted-foreground">Stage source</div>
-          <div className="text-sm font-medium text-foreground">3 pain points selected</div>
-        </div>
-      }
-    />
-  </div>
-);
-
-export const WithAFailure = () => (
-  <div className="h-96">
-    <ToggleableStepSidebar
-      steps={[
-        { number: 1, label: "Collect open invoices", status: "completed" },
-        { number: 2, label: "Draft the reminder email", status: "failed" },
-        { number: 3, label: "Send for approval", status: "pending" },
-      ]}
-    />
-  </div>
-);
-
-export const Empty = () => (
-  <div className="h-96">
-    <ToggleableStepSidebar steps={[]} />
-  </div>
-);
-
-export const LongLabel = () => (
-  <div className="h-96">
-    <ToggleableStepSidebar
-      steps={[
-        {
-          number: 1,
-          label: "Reconcile every outstanding invoice across all connected payment processors before sending the weekly summary",
-          status: "current",
-        },
-        { number: 2, label: "Send to customers", status: "pending" },
-      ]}
-    />
-  </div>
-);
-
-const MANY_STEPS: WorkflowStep[] = Array.from({ length: 15 }, (_, i) => ({
-  number: i + 1,
-  label: `Step ${i + 1}: ${["Collect", "Draft", "Review", "Approve", "Send"][i % 5]} batch ${Math.ceil((i + 1) / 5)}`,
-  status: i === 0 ? "completed" : i === 3 ? "current" : i < 3 ? "completed" : "pending",
-}));
-
-export const ManyStepsOverflow = () => (
-  <div className="h-72">
-    <ToggleableStepSidebar steps={MANY_STEPS} />
-  </div>
-);
diff --git a/stories/workflow/workflows-list.stories.tsx b/stories/workflow/workflows-list.stories.tsx
deleted file mode 100644
index c16ab569..00000000
--- a/stories/workflow/workflows-list.stories.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { WorkflowRegistryList } from "../../src/ui/workflow-registry-list.js";
-import type { WorkflowListItem } from "../../src/lib/workflow-registry.js";
-
-export default { title: "Workflow / Workflows list" };
-
-const LIVE: WorkflowListItem[] = [
-  {
-    id: "1",
-    itemKind: "run",
-    title: "Invoice reminders",
-    subtitle: "Started from the finance channel",
-    when: "Started 42m ago",
-    scope: "personal",
-    statusTone: "running",
-    statusLabel: "Running",
-    nextOrElapsed: "00:42",
-  },
-  {
-    id: "2",
-    itemKind: "run",
-    title: "Vendor renewal review",
-    when: "Started 4h ago",
-    scope: "tenant",
-    statusTone: "awaiting",
-    statusLabel: "Needs you",
-    nextOrElapsed: "04:11",
-    needsYou: true,
-  },
-];
-
-const SCHEDULED: WorkflowListItem[] = [
-  {
-    id: "3",
-    itemKind: "schedule",
-    title: "Weekly metrics summary",
-    when: "Every Monday, 8:00 AM",
-    scope: "tenant",
-    statusTone: "paused",
-    statusLabel: "Paused",
-    nextOrElapsed: "—",
-  },
-  {
-    id: "4",
-    itemKind: "schedule",
-    title: "Daily inbox triage",
-    when: "Weekdays, 7:30 AM",
-    scope: "personal",
-    statusTone: "done",
-    statusLabel: "Done",
-    nextOrElapsed: "Tomorrow, 7:30 AM",
-    nextSoon: true,
-  },
-];
-
-export const LiveAndScheduled = () => (
-  <div className="h-96 w-full max-w-3xl">
-    <WorkflowRegistryList live={LIVE} scheduled={SCHEDULED} selectedId="1" selectedKind="run" />
-  </div>
-);
-
-export const NoMatches = () => (
-  <div className="h-96 w-full max-w-3xl">
-    <WorkflowRegistryList live={[]} scheduled={[]} />
-  </div>
-);