diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 725c2378..7cbb9ef0 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -38,6 +38,50 @@ jobs:
       - name: Tests
         run: uv run pytest -q
 
+  ui:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ui
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - name: Enable pnpm via corepack (Node is preinstalled on the runner)
+        run: corepack enable && corepack prepare pnpm@11.10.0 --activate
+      - name: Install
+        run: pnpm install --frozen-lockfile
+      - name: Lint, format, and typecheck
+        run: pnpm check
+      - name: Build
+        run: pnpm build
+      - uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
+        with:
+          python-version: "3.11"
+      - name: Verify src/apiSchema.ts still matches the server's OpenAPI schema
+        # The browser's types are generated from the server's own declaration.
+        # If a contract change lands without regenerating, they silently drift
+        # apart again -- which is exactly the failure this generation replaced.
+        run: |
+          pnpm gen:api
+          if ! git diff --exit-code src/apiSchema.ts; then
+            echo "src/apiSchema.ts is stale: run \`pnpm gen:api\` and commit the result." >&2
+            exit 1
+          fi
+      - name: Verify the hflow-server wheel would carry the built frontend
+        working-directory: .
+        # The UI is only usable if the built assets reach the package; without
+        # this the wheel builds happily and serves the "frontend not built"
+        # placeholder instead.
+        run: |
+          rm -rf packages/hflow-server/src/hflow_server/static
+          mkdir -p packages/hflow-server/src/hflow_server/static
+          cp -r ui/dist/. packages/hflow-server/src/hflow_server/static/
+          uv build --package hflow-server
+          wheel_path="$(printf '%s\n' dist/hflow_server-*.whl)"
+          if ! unzip -l "${wheel_path}" | grep -q 'hflow_server/static/index.html'; then
+            echo "${wheel_path} has no hflow_server/static/index.html -- the frontend build did not reach the package." >&2
+            exit 1
+          fi
+
   links:
     runs-on: ubuntu-latest
     steps:
diff --git a/ui/.gitignore b/ui/.gitignore
new file mode 100644
index 00000000..e5537bed
--- /dev/null
+++ b/ui/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+dist/
+*.local
diff --git a/ui/README.md b/ui/README.md
new file mode 100644
index 00000000..fe472987
--- /dev/null
+++ b/ui/README.md
@@ -0,0 +1,140 @@
+# HFlow workspace UI (frontend)
+
+Read-only React SPA for browsing an hflow catalog. Served in production by the
+`hflow-server` FastAPI package (`packages/hflow-server/`), which copies the built
+assets from `ui/dist` into `hflow_ui/static/` at integration time.
+
+## Development
+
+Requires Node >= 20.19 and pnpm.
+
+```bash
+cd ui
+pnpm install
+pnpm dev        # Vite dev server; proxies /api to http://127.0.0.1:4356
+```
+
+Start the API in another terminal (`hflow serve` binds 127.0.0.1:4356 by
+default), then open the Vite URL. The API server authenticates nobody, so the
+proxied calls just work — there is no credential to carry over.
+
+`pnpm preview` serves the built bundle with the same `/api` proxy — use it when
+you need to see production behaviour, such as the pre-paint theme script, which
+dev cannot show because dev injects the stylesheet from JS.
+
+## Checks and build
+
+```bash
+pnpm check      # tsc --noEmit && biome check .
+pnpm format     # biome check --write .
+pnpm build      # type-checks, then emits ui/dist
+```
+
+The frontend must stay fully offline: no CDN scripts, no web fonts, no remote
+assets of any kind. Everything ships in the bundle.
+
+## What this UI is built out of
+
+Prefer a well-maintained library over a hand-rolled one, and prefer the
+headless kind — take the behaviour, leave the visual language. The look is
+ours: one hand-written `src/styles.css` over CSS custom properties, no
+framework, no utility classes.
+
+- **[radix-ui](https://www.radix-ui.com/primitives)** (the umbrella package —
+  one dependency, tree-shakes to the same bytes as the ~55 scoped ones) for
+  every overlay and composite widget: `Dialog`, `Popover`, `DropdownMenu`,
+  `Tabs`, `Tooltip`. It brings focus traps, floating-ui positioning,
+  portalling, dismiss layers, roving tabindex and the ARIA wiring. Style Radix
+  parts with the existing classes and their `data-state` / `data-highlighted`
+  / `data-disabled` attributes.
+  - `components/CatalogTree.tsx` stays hand-rolled on purpose: it is a correct
+    disclosure pattern and deliberately does not claim `role="tree"`.
+- **[lucide-react](https://lucide.dev)** for every glyph. Import icons
+  directly — `import { Search } from "lucide-react"` — and let the icon-scale
+  block in `styles.css` size them; do not pass `size` at call sites. Icons are
+  decorative and lucide marks them `aria-hidden` unless you give them an
+  `aria-*`, `role` or `title` prop. `components/BrandMark.tsx` is the one glyph
+  from outside lucide: it is the real Hebbian Robotics mark, and
+  `docs/assets/hebbian-logo-on-black.svg` is the source of truth for the
+  artwork. Its five paths are copied verbatim into both `BrandMark.tsx` and the
+  favicon data URI in `index.html`, so re-cutting the logo changes all three.
+  The component drops the artboard's black rect, paints with `currentColor` so
+  the mark takes the accent in both themes, and tightens the viewBox to the
+  glyph's own bounds; the mark is 0.77 : 1, so `.brand-mark` sizes it by height
+  rather than taking the square `.lucide` box.
+- **[@tanstack/react-query](https://tanstack.com/query)** for every server
+  read and write, **[@tanstack/react-table](https://tanstack.com/table)** for
+  the grids, **[react-router](https://reactrouter.com)** for routing, and
+  **[CodeMirror 6](https://codemirror.net)** for the SQL editor.
+
+### Theme
+
+Three states — `"system"` (the default), `"light"`, `"dark"` — modelled in
+`src/theme.ts` and persisted in `localStorage` under `hflow-ui-theme`. The
+choice is stamped on `<html>` as `data-theme`; `"system"` sets no attribute and
+lets the stylesheet's `prefers-color-scheme` block answer, with a `matchMedia`
+listener keeping the control's label honest as the OS flips.
+
+`components/ThemeControl.tsx` drives those three states from one quiet icon
+button in the rail's footer that cycles `system → light → dark`, showing the
+glyph of the state it is in. Because the glyph alone says neither what the
+state is nor what a press will do, the accessible name says both ("Theme:
+following system (light). Switch to light.") and a visually-hidden
+`role="status"` region announces the new state after each press.
+
+`styles.css` is authoritative for all three: every colour token has a value in
+the base `:root` block, and the two dark blocks (OS dark, explicit dark) are
+the same palette twice and must stay in sync. The inline script at the top of
+`index.html` applies the stored choice before the first paint — it duplicates
+the storage key and the attribute contract, so change the two together.
+
+### Nav rail width
+
+The rail collapses to icons only. Two states — `"expanded"` (the default),
+`"collapsed"` — modelled in `src/railLayout.ts`, persisted in `localStorage`
+under `hflow-ui-rail`, and stamped on `<html>` as `data-rail` (expanded sets no
+attribute). The same inline script in `index.html` applies it before the first
+paint, so a reload never shows the wrong width for a frame.
+
+Three rules the markup keeps, and CSS cannot:
+
+- every destination keeps its label in the DOM in both states — collapsed,
+  `styles.css` clips it rather than removing it, so a link is never an unnamed
+  icon;
+- collapsed, each destination and each rail control grows a Radix `Tooltip`
+  (not `title`, which no keyboard reaches and no stylesheet can touch). The
+  Radix wrapper is mounted in both states with a controlled `open`, so
+  collapsing does not rebuild the element under the reader's focus;
+- the collapse control names the action rather than the state ("Collapse the
+  sidebar to icons only") and carries `aria-expanded` + `aria-controls`.
+
+At and below 780px the rail is already a horizontal bar, so the collapse is
+suspended: the labels come back, the control leaves the layout, and the stored
+choice is untouched and returns when the window widens. `railLayout.ts`
+duplicates that breakpoint so the markup agrees with the stylesheet about
+whether the preference is in force — change the two together.
+
+### Colour
+
+One rule: **chrome is neutral, colour means something.**
+
+Backgrounds, ink, borders, the accent and the focus ring are greys, near-black
+and near-white. `--accent` is the far end of that ramp and *inverts* between
+themes (near-black on light, near-white on dark), which is why
+`--accent-contrast` exists — "the ink that reads on a solid accent fill" cannot
+be spelled at the call site. `--boundary` is the one grey held at 3:1 against
+every surface it lands on: the outline of anything a reader must be able to
+find (fields, buttons, graph nodes, graph connectors), as distinct from the
+decorative `--border` / `--border-strong` hairlines.
+
+The hues left in the file all answer a question about the data:
+`--ok` / `--warn` / `--err` for status, `--viz-1..3` for interval kinds (a
+categorical encoding; `--viz-other` is a true grey because "everything else"
+should read as the absence of an identity). Work in flight — `running`,
+`deferred` — is the `--run` tone, aliased to the neutral accent: it is the most
+separable slot left beside green, amber, red and faint grey, and it separates
+by lightness so it survives every form of colour blindness. `src/runState.ts`
+owns which Airflow state maps to which tone.
+
+If you need a new colour, first check whether what you are building is chrome.
+If it is, it does not get one.
diff --git a/ui/biome.json b/ui/biome.json
new file mode 100644
index 00000000..a03c8fb6
--- /dev/null
+++ b/ui/biome.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "includes": ["**", "!dist", "!node_modules"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "preset": "recommended"
+    }
+  },
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}
diff --git a/ui/index.html b/ui/index.html
new file mode 100644
index 00000000..0de2ec78
--- /dev/null
+++ b/ui/index.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="light dark" />
+    <!--
+      Favicon: the Hebbian Robotics mark, as a data: URI so the tab icon costs
+      no request and the app stays fully offline.
+
+      Same five paths and the same tightened viewBox as src/components/
+      BrandMark.tsx; docs/assets/hebbian-logo-on-black.svg is the source of
+      truth for the artwork, so re-cutting the logo means updating all three.
+
+      One difference from BrandMark, unavoidable: a favicon cannot inherit
+      currentColor, so the fill is literal. The app accent is now a NEUTRAL that
+      inverts between themes (near-black light, near-white dark), and neither
+      end survives the other's tab strip, so the favicon takes the mid-grey they
+      straddle. #808080 is the grey that clears 3:1 against every tab strip a
+      browser paints: 3.95:1 on white, 3.01:1 on Chrome's light strip (#dee1e6),
+      3.09:1 on Chrome's dark strip (#323639), 3.59:1 on Firefox's (#2b2a33).
+      Lighter greys buy dark-strip contrast at the light strip's expense and
+      drop under 3:1 there, so this is the middle and not a rounding.
+    -->
+    <link
+      rel="icon"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.79 -0.23 106.03 137.62'%3E%3Cg fill='%23808080'%3E%3Cpath d='m24.3 68v-61c-0.2-3.5-3.1-6.5-6.3-7-1.9-0.3-6.3-0.3-8.6 0-2.5 0.2-4 1-5.4 2.6-1.8 2.1-2.2 3.6-2.2 7.4v114.2 2.4c0.1 4.1 0.2 5.2 1.4 7.1s3 3.3 5.3 3.6 6.9-0.3 9.2-0.9c2.7-0.6 5.5-2.7 6.3-5.9 0.5-2.4 0.3-0.9 0.3-62.5z'/%3E%3Cpath d='m99.9 1.7c-1.7-0.1-5.3-0.1-7.5 0.2-3.1 0.5-5.9 3.1-6.3 6.3-0.2 1.7-1.2 59.2-1.2 59.8l0.1 58.9c0.1 2.6 0.1 4 1.3 5.9 1.3 2 3.2 3.3 5.6 3.7 2.3 0.3 6.5 0.4 9.1 0.1 2.8-0.4 5.7-2.5 6.5-5.6 0.4-1.6 0.3-4.4 0.3-6.5v-112.1c0-3.4-0.1-5.4-1.3-7-1.2-2-3.6-3.5-6.6-3.7z'/%3E%3Cpath d='m44 16.2c-0.6 1.6-0.6 3.5-0.6 6.8v15c0.1 4.4 0.1 6 1.6 8s3.1 3.4 5.5 3.7c1.8 0.3 6.4 0.4 8.5 0.1 3.3-0.4 6.2-3 6.7-6.2 0.2-1.5 0.2-2.4 0.2-6.1l-0.1-16.5c0-3.6-0.4-5.1-2.2-7.1-1.1-1.2-2.8-2.4-5.1-2.7-1.4-0.2-5.5-0.2-7.5 0-3.1 0.2-6 2.3-7 5z'/%3E%3Cpath d='m68.8 58.5c-1.7-0.3-3.8-0.4-6.2-0.4h-17.7c-1.3 0-3 0.1-4.1 0.3-2.8 1-5.2 3.6-5.5 6.7-0.2 1.7-0.2 5.9 0.1 8.4 0.5 2.9 2.4 4.9 5.4 6.2 1.4 0.2 3.2 0.4 4.2 0.4h19.6c1.7 0 2.3 0 4.5-0.3 2.7-0.8 5-3.3 5.5-6.3 0.2-1.9 0.1-6.9-0.4-9.5-0.8-3-3.2-4.8-5.4-5.5z'/%3E%3Cpath d='m59.4 88c-1.8-0.3-6.9-0.4-9.1 0-2.9 0.6-5.4 2.8-6.2 5.8-0.4 1.8-0.3 4.3-0.3 8.2v11.7c0 4.9 0 7.7 1.3 9.5 1.2 1.9 2.8 3.4 5.4 3.8 1.6 0.3 6.7 0.3 8.4 0 2.6-0.3 4.8-1.9 5.8-3.9 1.2-1.7 1.1-4.5 1.1-8.5v-15.2c0-2.5 0-4.8-0.5-6.1-0.9-2.8-3.4-4.9-5.9-5.3z'/%3E%3C/g%3E%3C/svg%3E"
+    />
+    <title>HFlow</title>
+    <!--
+      Apply the stored CHROME PREFERENCES before the first paint. A classic
+      inline script in <head> runs before the deferred module bundle and before
+      the stylesheet paints, so an explicit choice never flashes the other
+      state: not the wrong theme, and not a 184px nav rail that snaps to 56px
+      once React mounts.
+
+      Deliberately dependency-free and offline. It duplicates two storage keys
+      and two attribute contracts from src/ — change each pair together:
+
+        "hflow-ui-theme" / data-theme  ->  src/theme.ts
+        "hflow-ui-rail"  / data-rail   ->  src/railLayout.ts
+
+      Both defaults are spelled as the ABSENCE of the attribute ("system" for
+      the theme, "expanded" for the rail), so a blocked localStorage and a
+      never-touched control land in the same place with nothing to apply.
+    -->
+    <script>
+      (function applyStoredChrome() {
+        const root = document.documentElement;
+        function apply(key, attribute, allowed) {
+          try {
+            const stored = localStorage.getItem(key);
+            if (allowed.indexOf(stored) !== -1) root.setAttribute(attribute, stored);
+          } catch {
+            /* localStorage is blocked; fall through to the default. */
+          }
+        }
+        apply("hflow-ui-theme", "data-theme", ["dark", "light"]);
+        apply("hflow-ui-rail", "data-rail", ["collapsed"]);
+      })();
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/ui/package.json b/ui/package.json
new file mode 100644
index 00000000..9ece5e68
--- /dev/null
+++ b/ui/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "hflow-workspace-ui",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Workspace UI for hflow catalogs. A client of the hflow-server JSON API.",
+  "license": "Apache-2.0",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "check": "tsc --noEmit && biome check .",
+    "format": "biome check --write .",
+    "gen:api": "uv run --project .. python scripts/dump-openapi.py > .openapi.json && openapi-typescript .openapi.json -o src/apiSchema.ts && rm -f .openapi.json && biome check --write src/apiSchema.ts"
+  },
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/commands": "^6.11.0",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/state": "^6.7.1",
+    "@codemirror/view": "^6.43.9",
+    "@lezer/highlight": "^1.2.3",
+    "@tanstack/react-query": "^5.62.0",
+    "@tanstack/react-table": "^9.1.2",
+    "lucide-react": "^1.33.0",
+    "radix-ui": "^1.6.7",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-router-dom": "^7.18.2"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.2.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.1.0",
+    "openapi-typescript": "^7.13.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.2.2"
+  }
+}
diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
new file mode 100644
index 00000000..898756a5
--- /dev/null
+++ b/ui/pnpm-lock.yaml
@@ -0,0 +1,3037 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@codemirror/autocomplete':
+        specifier: ^6.20.3
+        version: 6.20.3
+      '@codemirror/commands':
+        specifier: ^6.11.0
+        version: 6.11.0
+      '@codemirror/lang-sql':
+        specifier: ^6.10.0
+        version: 6.10.0
+      '@codemirror/language':
+        specifier: ^6.12.4
+        version: 6.12.4
+      '@codemirror/state':
+        specifier: ^6.7.1
+        version: 6.7.1
+      '@codemirror/view':
+        specifier: ^6.43.9
+        version: 6.43.9
+      '@lezer/highlight':
+        specifier: ^1.2.3
+        version: 1.2.3
+      '@tanstack/react-query':
+        specifier: ^5.62.0
+        version: 5.101.4(react@19.2.8)
+      '@tanstack/react-table':
+        specifier: ^9.1.2
+        version: 9.1.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      lucide-react:
+        specifier: ^1.33.0
+        version: 1.33.0(react@19.2.8)
+      radix-ui:
+        specifier: ^1.6.7
+        version: 1.6.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react:
+        specifier: ^19.2.8
+        version: 19.2.8
+      react-dom:
+        specifier: ^19.2.8
+        version: 19.2.8(react@19.2.8)
+      react-router-dom:
+        specifier: ^7.18.2
+        version: 7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+    devDependencies:
+      '@biomejs/biome':
+        specifier: ^2.2.0
+        version: 2.5.9
+      '@types/react':
+        specifier: ^19.2.18
+        version: 19.2.18
+      '@types/react-dom':
+        specifier: ^19.2.4
+        version: 19.2.4(@types/react@19.2.18)
+      '@vitejs/plugin-react':
+        specifier: ^6.1.0
+        version: 6.1.0(vite@8.2.2(esbuild@0.28.2))
+      openapi-typescript:
+        specifier: ^7.13.0
+        version: 7.13.0(typescript@6.0.3)
+      typescript:
+        specifier: ^6.0.3
+        version: 6.0.3
+      vite:
+        specifier: ^8.2.2
+        version: 8.2.2(esbuild@0.28.2)
+
+packages:
+
+  '@babel/code-frame@7.29.7':
+    resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@biomejs/biome@2.5.9':
+    resolution: {integrity: sha512-KkgCvdHB4IhtpHpF564plA9jo6fDOwWGQ/3jvreLzgOtRLEDoPqr7QO9qejNA8jKwDsSkAKr77hqBHnyUbIw4g==}
+    engines: {node: '>=14.21.3'}
+    hasBin: true
+
+  '@biomejs/cli-darwin-arm64@2.5.9':
+    resolution: {integrity: sha512-am22pX2aBqznqq1eMyIj/bZ++riF3Lk6ct7cbv+gQK0csFhr+d8O0RkOi2FF2qSgFgANbqNkIZ0/PxlnW2pLFg==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@biomejs/cli-darwin-x64@2.5.9':
+    resolution: {integrity: sha512-l44KWDHLDvEnD0N/XcrVs7VXb3A18xL7QS3WB0eL93wbmk529ffIG55vleGCqaunpRUjLrdnjK05Qki1dsjylg==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@biomejs/cli-linux-arm64-musl@2.5.9':
+    resolution: {integrity: sha512-7ImVPwBLCtkmpR5esd8RHhTqW94f0JLJQum6AneYcy94jRm18TaPPm7slaigGzFhfgt3QiD1Vj52LKmBAnKizA==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@biomejs/cli-linux-arm64@2.5.9':
+    resolution: {integrity: sha512-ICaK+IYaVZvKbBxX2rwrPT0DdUDMnE9Vm3nQGe+mltQPmUg19pONzkPWGdY4FCsoreDETWDynvdt4ysCbF5gNQ==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@biomejs/cli-linux-x64-musl@2.5.9':
+    resolution: {integrity: sha512-RXGaD0o1/pTTguYw1aeDJh9ad6Lfrui0fI7mBderTyGr7WuUJkBIttgLkR3XJyoxOkkgfBDspaUT8wXArTqLZw==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@biomejs/cli-linux-x64@2.5.9':
+    resolution: {integrity: sha512-z22Q/zFYSvbIJfW1CbfZPu4X8PddS6Qd2ORbc6h+aT6EcwAxUF3m6fA4HjNvA3TU4X0dTJRwNPB165ES3PJXzg==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@biomejs/cli-win32-arm64@2.5.9':
+    resolution: {integrity: sha512-nHK+/HHC+D0ogAHUxomgoSTdjImb6fmNNVTKmf0tyu4eDL1DqPKIHc+i+UL8+b0RnAu8224qo8F2tCVnaT0A3w==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@biomejs/cli-win32-x64@2.5.9':
+    resolution: {integrity: sha512-Yiq0H56LjXSSw/hd9YkXgSLQfzyDJzbzU2TezozxyNw+uKWAqOtqGVvBfzKRRDiaFF5avGAhHdWKx7LtDOShUw==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [win32]
+
+  '@codemirror/autocomplete@6.20.3':
+    resolution: {integrity: sha512-tlosUqb+3BbxCxZdu4tKeRghPFC+QM7q4X5YhKV2eCmPG+1r2F3f4AaSz5sCrFqUtX4Jh20VFTKecl16MgiV9g==}
+
+  '@codemirror/commands@6.11.0':
+    resolution: {integrity: sha512-/K4Rl5BN0OtTiPWmJCdqODu38XnDMsDxKY5rgrPnCkutPTJf2wVbkoixLfealF5Kwse/s8P8M5jAiURiwSwnFA==}
+
+  '@codemirror/lang-sql@6.10.0':
+    resolution: {integrity: sha512-6ayPkEd/yRw0XKBx5uAiToSgGECo/GY2NoJIHXIIQh1EVwLuKoU8BP/qK0qH5NLXAbtJRLuT73hx7P9X34iO4w==}
+
+  '@codemirror/language@6.12.4':
+    resolution: {integrity: sha512-1q4PaT+o6PbgpkJt4Q8Fv5XJxTy4FUZ4MWETtyiDw3J0Pyr9E2vqcKL+k9wcvjNTIsauxvE7OfmWj3FRPHQ76A==}
+
+  '@codemirror/state@6.7.1':
+    resolution: {integrity: sha512-9QzNDgE4EYDnAHfrTlR2lwiPciiOymLtwKK+8yHQzCc7GXhAP9xdEbEJFy2IWB1j9UGUl9BsgMmTo/ImA02T7A==}
+
+  '@codemirror/view@6.43.9':
+    resolution: {integrity: sha512-sTuUzTpPMFebRhg6dawChoKKgndIwfjmJgKVxBefPElcU2NwQ6AFroupk0SFqEerQyZOGRfDNnSN8Dw/lMAsXw==}
+
+  '@esbuild/aix-ppc64@0.28.2':
+    resolution: {integrity: sha512-XExcO+dvLKvVtNTibSTBej1NCAbaGhWn9Ww1ZPx80qsahhPFe/8jgWP0IchNe0F3HwkU7n8ejhH8bjonqht8mQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.28.2':
+    resolution: {integrity: sha512-5YfKeeI8qWfBZIX+u2xZC3Zlb3Os/gLS2sbEKM+I4ZOcsWmHS2WLysCcQZDAFRslDUU5Oiq44gf6PYN1vGwG5A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.28.2':
+    resolution: {integrity: sha512-kXXoiPVVGQcnIYGOeaovwOURpniDBpSq4A03qkQ+BMQqtGG6HYap3xne9C1O1yo4TR3qxlCX5IqqmX6fFo2Lqg==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.28.2':
+    resolution: {integrity: sha512-O387ite7SzUyCcy3JQX4P4bLtEA7bLLkx+esve5JHnyYfNTxcVpXZo9jhdB0lTKN44gztELTdU7nS8Nr16Fs1Q==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.28.2':
+    resolution: {integrity: sha512-n4KqkOQrraxHJcgjM1RvwbigfQKIKJVpM7xp+KsxiyUSrRdIXnt73VhrPAx0fV44hgfmIVKjxMN9J1t5jySVkw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.28.2':
+    resolution: {integrity: sha512-uq6suIWYP37qzGddBKPw5QEQPi6HiLGsO7UmkpfyaYNQ3D+rN6w6WfwH+nuqcGXWvawGwxOEroO4YGnFh95azw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.28.2':
+    resolution: {integrity: sha512-n+I0BTSRIoy+d6RPKnEVwql5UwBJolytvY4mAOIEJorKlqgPII8ix6slVVrfZ5Tnj7glIZvloylbB/EJPMWEXw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.28.2':
+    resolution: {integrity: sha512-78XJTJkvPs0kz2w61301PJjXl4g7q3JqiYMZ/M/yVI73EHBrCRTgkhu9oqG7vPqq+a/yadEW8aD+agKlk5xrmg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.28.2':
+    resolution: {integrity: sha512-pW4AC0P3it8c7do9MVM4p51FzHzdM/TZrerurgRcHJ2WTa1VQ1CIq18xncfpBJw4ojkiZZrKW2yIBWBP92j6Ug==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.28.2':
+    resolution: {integrity: sha512-XlDnu2q5yoqems+xay6wSAcg9DDD7K9RLKZEBOMZm3ckNpJBvOX20tSfby8KfrrhINDyv9V2YVZKY/SpoGJI8w==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.28.2':
+    resolution: {integrity: sha512-CYbnj78HsIeA+DhgUKgFCfvNsTHFhMMrinUrMZpDXJXKN8T3XViTZ/+wtHeVxEWY8ewSzTFN+nRmSwO2tZaLUQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.28.2':
+    resolution: {integrity: sha512-buwkd8nsph4R+ajRvw0qM5Hja/TXQow3ptzWO2EbG/cqcIkHloRrdlBtQlshyYGTNFvfkfJ5tpPLVkY4DtsPfQ==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.28.2':
+    resolution: {integrity: sha512-ZVykbDyk7519VwiNb9Lcj9m8XM6v5V9uKPvrEMkkEedVewf+0itkhahp4HDpgERXhwLRpWFypsGbG/J8s0QjJA==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.28.2':
+    resolution: {integrity: sha512-CAXl+Dtd9UUuJd8pKKdwh6MLm3MUMiqMPmhZ3tTSXPqfyQ3vDl6R5hZdZ/kYojK4ofXtdfSv1tFq8XzWx3heNQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.28.2':
+    resolution: {integrity: sha512-GeXCej4IQtU1B+QlDV8W/RRvbzI3O/Stss+/bCXv4lZls5WGRtu2a+3JkA3i4qIUlMXpcHebWpF8AkJhATowuA==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.28.2':
+    resolution: {integrity: sha512-3H1weTYZPxt/WOhByszQZybS9w5lKzUn1FDMsgEChbHWQwHYQQRfBxgCcZvPhjHfKyJjIievvMmEUawJrdY9Dg==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.28.2':
+    resolution: {integrity: sha512-4xTZr1FUmSoQW4XIWmit3tzQrUTZM+N3P0XV8xROKYF50XfI7xeO90+1bZvNwxIufQ9hDQVRJH5YhgPVF8A/HQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.28.2':
+    resolution: {integrity: sha512-sSATRjPeDBg3pdgHoQfoYBob11Kk1FGa9lui5RIHZCoCkJa9QKlvl3/vKz2usCmYYjs7ymJR/2Nnsqe+Hjt5nw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.28.2':
+    resolution: {integrity: sha512-lqnzCV+mM0gIADaKihiCg6ifgfU2L3h5E33rNQBN1Y4MaVGnzryzmvvf7UHxprpQdE8hpqLolJ9Rl+SkIRDpyw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.28.2':
+    resolution: {integrity: sha512-AL2qJILH7lNjrDmCQDvdxMfAUIv8KMNZOvrwAQ8i8//ntL9FflhOyMJ8OZSMBb8/AWXe3/5v5S20y3zCoZWKoQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.28.2':
+    resolution: {integrity: sha512-QtiuPytchRyC4rwUKhexJdQKvDuZ6hWloi3igqPQNUJCS1/v9EiO3UTOXR6A3FoMo4fnAKbWJdqaIwhOzh8qEw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.28.2':
+    resolution: {integrity: sha512-WkhYDmpTjLvGlScA1rwjRUmhl4k8oXR3cIbtqWmELgU/dFeHHlEllxDvdWcNJV9rbzCexB5vz8gtNewWLgCT7Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.28.2':
+    resolution: {integrity: sha512-GPMSkTOtMnv2U2F8gxe4Io6qmVs+YKyp832Etqqxr0hFngmXQ3rzwytelm3GIn7T4VviRUlf3sOgBOiTdvaf7g==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.28.2':
+    resolution: {integrity: sha512-PIhhEkE9uPBleRBrQEJpUn7MBnibZzbGzYWPmY3x+YoVg/95zbjB4CxPPOQ8l5tYYM4mMaCthF8/1DIfBQQyWQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.28.2':
+    resolution: {integrity: sha512-YmJbfTlvU7Sdn9BB+4PRES4oB6pxgS37MAONj+hBr/cpXS1aBPKXxNnDbu+QCWPj0o9dgyxeq79g6c5P8KeuYA==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.28.2':
+    resolution: {integrity: sha512-5ebpxr3nWMzrL/rnUI755Jkuee0bHL/Gq0WTF9lvcpv73wAp5eu8MfBUgWK9bhWvZjj7yX8etf/8tI8Ney695g==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@floating-ui/core@1.8.0':
+    resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==}
+
+  '@floating-ui/dom@1.8.0':
+    resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==}
+
+  '@floating-ui/react-dom@2.1.9':
+    resolution: {integrity: sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.12':
+    resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
+
+  '@lezer/common@1.5.2':
+    resolution: {integrity: sha512-sxQE460fPZyU3sdc8lafxiPwJHBzZRy/udNFynGQky1SePYBdhkBl1kOagA9uT3pxR8K09bOrmTUqA9wb/PjSQ==}
+
+  '@lezer/highlight@1.2.3':
+    resolution: {integrity: sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==}
+
+  '@lezer/lr@1.4.10':
+    resolution: {integrity: sha512-rnCpTIBafOx4mRp43xOxDJbFipJm/c0cia/V5TiGlhmMa+wsSdoGmUN3w5Bqrks/09Q/D4tNAmWaT8p6NRi77A==}
+
+  '@marijn/find-cluster-break@1.0.3':
+    resolution: {integrity: sha512-FY+MKLBoTsLNJF/eLWaOsXGdz6uh3Iu1axjPf6TUq92IYumcTcXWHoS747JARLkcdlJ/Waiaxc5wQfFO8jC6NA==}
+
+  '@oxc-project/types@0.146.0':
+    resolution: {integrity: sha512-XC0QsnnhVe7sLIWmYmdPw7x5P0h4W8vUU3Nv1ySgWXtvCz8NizoAEpGXA0sOYoJQV2Rl13LgURAHQ5cI5ILCSA==}
+
+  '@radix-ui/number@1.1.3':
+    resolution: {integrity: sha512-Road2bidD0uu/1BGDOWNdPI06g0lIRy6IF9GZcIrDK2KGItfor8IQwQa+yM2ERgHM1MmHxaxpTzk0/Jp42lNfA==}
+
+  '@radix-ui/primitive@1.1.7':
+    resolution: {integrity: sha512-rqWnm76nYT8HoNNqEjpgJ7Pw/DrBj5iBTrmEPo6HTX5+VJyBNOqTdv4g89G63HuR5g0AaENoAcH7Is5fF2kZ8Q==}
+
+  '@radix-ui/react-accessible-icon@1.1.15':
+    resolution: {integrity: sha512-WTQwcAvQf5sOcuUyi90lKPbhwcvQ+j55cjrSmeaN+L2vKU3DooOvlKw2MDeiJ5IkV5N905KW0/fGojKOBhD11A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-accordion@1.2.20':
+    resolution: {integrity: sha512-jDhG9FvAEnlhnjrsINbNXcUa4G+L1KqSkJSunkbKEzFRcAb52jvM0PjPxPRvhe1HNc5F5yc0yzzWeeqlH4yBIg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-alert-dialog@1.1.23':
+    resolution: {integrity: sha512-VAYOiQRqj3GPpYJE0I9J+X8Ip05cyVlNdKOFeiGS2Ou1HHGfpl0BxOyZm6nmVDyU+W+NF3/XLzmjHmVGydhwgA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-arrow@1.1.15':
+    resolution: {integrity: sha512-v4zggRcjadnI+ClKDuijlQEW4tw3NoaeHc/PwpKnLoLLKNUG4InLegkstooLcRIUWCs+8L22dGURCVuFfOKfnA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-aspect-ratio@1.1.15':
+    resolution: {integrity: sha512-fy+dyVR+90nelK8rqIznFlxzx7uPcGbhxH8Nfr2bHb4UfSe+e3hklOC0luK0hDwVwnRX7xTRySpsrQVeW+/oNQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-avatar@1.2.6':
+    resolution: {integrity: sha512-4ULOTJ/mqy2hT9GlWa/MFHxHSvH3nJzHnZM1waNsc5Bonv7i70aNenghXmD97S6OJ81ekXONGGt4nT1r0PfEdA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-checkbox@1.3.11':
+    resolution: {integrity: sha512-Gnptr9pDDQxD3hgq2dtPbtrp/c2qH1mBwIzw3X/ivrMb2e1t0jMTi606fVEqFPaQR1ggXIVQWKj3P2WW9v7zGQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collapsible@1.1.20':
+    resolution: {integrity: sha512-mcGesGplBnzN2sbvJETzpCNfSMyPnb29q1GRLU+Ib7bJrpIG2ywmRoh2V5VbA2uNvKikKUlVbAPks7JDjz4A8Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.15':
+    resolution: {integrity: sha512-9W+B9NPF0NaaPh/1NJd3+KqsnlLqU9H7T2rvww+fp+T/evVXdNAyYcnfRQZFOjkR1ajQp3yORlqnI8soawLvNA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-compose-refs@1.1.5':
+    resolution: {integrity: sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context-menu@2.3.7':
+    resolution: {integrity: sha512-CtXP35dxaB5T3zXSd+E3uHe/QpXcpYnZmxp6OaIbfthtfW4wyb77M23BG+bwIJDtsMwEP/YssdsmNyZu7jhWew==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-context@1.2.2':
+    resolution: {integrity: sha512-RHCUGwKHDr0hDGg4X7ma4JG4/+12qxw8rkh5QKdDldlCvtja6nUx1Ef/8HVrJze81lEsgLQlqjzjGNHantgnQA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dialog@1.1.23':
+    resolution: {integrity: sha512-Ksw4WeROkO4rC9k/onilX/Ao2Cr1ku1unMNH+XSCcP4jSXYu7HDsg9n4ojMjVb22XpYjAQ9qfrFlVbru1vXDUA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.4':
+    resolution: {integrity: sha512-5pzg4FGQNpExhnhT2zlrP1wZFaYCd1K0nYWoFAdcYoYK868IEigqMX3B3f8yIoRlAhAeDWciLI6ZdCKHF9P4Vg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.19':
+    resolution: {integrity: sha512-8g4pfOL9HoKKLWGiypT+dphVqjFfmcXO5GBnhsG6zI+lxAx/8feQpr+1LSN8Re3hiZ+XkLNS4O9ztK11/LzQ6w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dropdown-menu@2.1.24':
+    resolution: {integrity: sha512-geq8l2rJkxvkXsT9RMgtUE3P8pITFpTsvYpbySi1IH4fZEABD/Gp85myayFgxk0ktljGMJnCbeFkyTusvSvv7g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.6':
+    resolution: {integrity: sha512-RNOJjfZMTyBM6xYmV3IVGXkPjIhcBAuv48POevAXwrGJhkWZ9p1rFoIS1JFooPuT193AZmRsCPhpoVJxx6OPoQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.16':
+    resolution: {integrity: sha512-wmRZ2WWLvmt6KHy2rNPOdPUjwq5xOHY02+m+udwJTn0aNIox/rkskAvJTyTLGhPK6KgrUjlJUJpgmx/+wFiFIQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-form@0.1.16':
+    resolution: {integrity: sha512-Q4TLEn2A7TAypxwmd6R9EwrlXDvkfYSDMrq9/887AXAGh+G1rH+kYJKSTv+Si9Y0JPKTwKYv6PviAJosysNimA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-hover-card@1.1.23':
+    resolution: {integrity: sha512-H8qONfZd3ltrU3+jHCIgITbWo6e1iTKvP9DHdrvYbX48ooRM5FjEDTn16AMwdfuOGkWdZEhpl3PLL/Wk/AnHDQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.4':
+    resolution: {integrity: sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-label@2.1.15':
+    resolution: {integrity: sha512-o/rdYEwZTTo5tjknnPeyQFU45kUC4i/XyeDPP+HGyi6XqpOP6Zf5Ya5vh/Yfe9Id5JiuWnnAx2XqIeD3UYZt0g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-menu@2.1.24':
+    resolution: {integrity: sha512-uW7RVuU6Lp/ZtfeY4b3kL32zccgEWvPv1+cf17ubYzHa9cL8AHokmk36cG/XEiH/smbQvumnieXX9j/e9RqJWA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-menubar@1.1.24':
+    resolution: {integrity: sha512-eeVs0vf7cuqXaM0qLQCPcufImiJNVBXdJDLu7ZGYl2732UH23Qat/foNGrr6vYV3/DdTsBqASoggUFgH14OcZA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-navigation-menu@1.2.22':
+    resolution: {integrity: sha512-ou7iLEJ+yrhQndkkA4U21XIdS/CS45F4iXIkTZcb6/Ne9EMsOuDudVmCwmDnfFZZ+y1FZqXRNSIgBy+YMvZVZg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-one-time-password-field@0.1.16':
+    resolution: {integrity: sha512-Tj9P6ntAJEw52oq/F0AGknXR4XncxEt7XU47O3xJQOiWfLzEy3d9gtgKfvjSzGxzHkfL+VzvxGu2KTFsloJqXw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-password-toggle-field@0.1.11':
+    resolution: {integrity: sha512-4gvFnmDXu3dgj21CqsufzIameRvlRd4SBqaWhcrlrNhRo0Y5i/49AmRJYe1fdAM3G2VNBbmin4b0D6cdQocwgw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popover@1.1.23':
+    resolution: {integrity: sha512-mw58MrBlyHWFisTOYignD0vf/3gdcgAR+9of1s9G/38CbFiUwH1nCDkc0AUM9IrXFgN5Ue8n45j9WCgyM1sbiQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.3.7':
+    resolution: {integrity: sha512-UsJrrd7w4wuKKTdvd/DNERVlwSlUcyXzjhyDwBk+3aPOsCjOY6ZSbxuw8E6lZTjjfP8Cpd0J8VVkrYUWyGYXyg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.17':
+    resolution: {integrity: sha512-vKQLcWypUnwZVvfV7UkGahH2g6ySe8M8R+zYBwPrv5byZ9QAW6cQVvNKo7GgmD+p8aYb6D9JBuvy8/WhOno2wQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.10':
+    resolution: {integrity: sha512-3wyzCQ6+ubRA+D4uv9m95JYLXxmOHp05qjrkjeA7uKHHtjpPggQzc6DAb0URl7j67oR0K2foO4ip27TiX037Bw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.10':
+    resolution: {integrity: sha512-MucOnzh6hR5mid6VpkbglRAMYMjKLqRnGBbjXkzjK52fuQDd1qbkx78a5P40mkcnVXJdEVxm26E9OPAiUq7nBg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-progress@1.1.16':
+    resolution: {integrity: sha512-5XnomAsoZZCY+KNTxbIghpGqPruZvKFNlvcAljVAOdDRDsH4/OZQxhtwo5wdtoDM5R6MhJBb2sPnDuRFep3lzg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-radio-group@1.4.7':
+    resolution: {integrity: sha512-cgYFEkntCxppHZgtSZ+7vh0wbZQ+IC7PPMw8DSnRG27B6kDd32/Zw0OJt7dGDigCoprMuWHjg2PvUn3PYvPFoQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.1.19':
+    resolution: {integrity: sha512-V9jI6hDjT7l3jsCQD9bLNvDLM3tH/gdbOTp7Tefp3hbbgCGQoK7tUvrWiRlcoBHIZ809ElXwNQwVo0B98LuTXQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-scroll-area@1.2.18':
+    resolution: {integrity: sha512-Zn5Cd171wxsO3Dfg8HaW6RifTb9CYTKQJHs/G4+LN1GfmJpaQMZQyQxMprVPHpaz7QY4l9BxK2JwQuzHsXC8nA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-select@2.3.7':
+    resolution: {integrity: sha512-WFGImkmbzcfxeIwq/+4HvRN0pizBwbwQUED4I13ezQsDdfl38ZntN6TmR8XaSzPBqoCToe8rF75j6NPNDSzhbg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-separator@1.1.15':
+    resolution: {integrity: sha512-jOLO4lssEzWpoDu7G+Ze4VjwMRUBt291pnZD0gmalREZipnTX3wadQo7Fy48GCTfe14/YRN6rw/rOJqrE85Wxw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slider@1.4.7':
+    resolution: {integrity: sha512-mTSLf1GC/C0moWjTbvCM6Qn/gBjvlFt1azuWF2v7MN5C3Zq2U2J2lN3ZEYkpujuOU5Ro7A28wkviSxaKnG0BYg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.3.3':
+    resolution: {integrity: sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-switch@1.3.7':
+    resolution: {integrity: sha512-48tB/4dn2UVLBCYhTu9AuR63IHl73l/qLbLgxd86noTUor4/K4LFDAcYjK+isP5313qxaFpjPVogE7+Y0/V3Kw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tabs@1.1.21':
+    resolution: {integrity: sha512-UKxJlZid7FVtsk/WTxj4i4uSEgj2Au+KBbS7SQyTlzMhhn+86Cz3tISZdTa87bfEfcuvZezf2ZsxD4xuEKtkog==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toast@1.2.23':
+    resolution: {integrity: sha512-ofhyAsYaocRGOs/n0XWdUOSVzEAG6BfrMVM8z0c0kLEWY38w/0WuMFPTJP/HVaZPYkMvHZoKIIhNcjbTCBILPg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle-group@1.1.19':
+    resolution: {integrity: sha512-OtnwuSVjd1Ofi+AdnvhsjQdyuhCDwYs1w9RyB5BN/OavXOVQo42SYqQjwUnbPnaiPFBpQ9aX70dWeee+v2oBLA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle@1.1.18':
+    resolution: {integrity: sha512-7lonPlKfSacd20GlOBx2ltuVKz9oqWYZz+oMQyOltw6t1y2nyftj2ZmwwUHYn49kqfDWcp8dNZm5NgV+5Z+mug==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toolbar@1.1.19':
+    resolution: {integrity: sha512-Ph0IvtYw4VB12ZnZg+YtrGs8yJQsnizwo/zu0R4Y/nWugtJzA7Pg1eWeuDR9+LSqn+xjamss+UOSOJJJ4gx8jw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tooltip@1.2.16':
+    resolution: {integrity: sha512-6EamKFRRnlpdadndbZ6LMwycfwkwPte1B42hs6QA0gYhjaOKqW4PZ4pjaW9UrlDX5eVt/OjncE7BFTPL5nmZhg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.4':
+    resolution: {integrity: sha512-R6OUY2e2fA6Yn6s+VSx5KBV6Nx8LQEhu+cz7LCej18rQ1HLyg9PSC9jP/ZNx0o6FAIK9c0F1kHylzSxKsdlkrQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.6':
+    resolution: {integrity: sha512-uEQJGT97ZA/TgP/Hydw47lHu+/vQj6z/0jA+WeTbK1o9Rx45GImjpD0tc3W5ad3D6XTSR6e1yEO0FvGq6WQfVQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.5':
+    resolution: {integrity: sha512-7cshFL8HGS/7HEiHH+9kL9HBwp2sa9yX18Knwek6KYWmXwM7pegMgta2AXMQKI+rq3JnfSj9x8wYqFMTdG1Jgg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.5':
+    resolution: {integrity: sha512-ge3ipobwSXTj4JyVtswQ7qZj0ZHdtbGuOno/LrgAAeSxtsJ6Vs4Gz5IkPH2bmqpjcLUFoqGhA/mueuIf63UXlA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-is-hydrated@0.1.3':
+    resolution: {integrity: sha512-umO/aJ+82CpOnhDZUTbILCQf7kU/g0iv+oGs/Q8jw7IkhWBzaEP4sA268PhFAJTFetbwp3ICc6ktpI4TqtxcIw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.4':
+    resolution: {integrity: sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-previous@1.1.4':
+    resolution: {integrity: sha512-XoSLhbRbqxFtgJoi2fNHA3C6pDlY34x508vUpUGoFZfvePfHXHbE1lC4FYFMnJWgiCRroSTw6fOsXQoVS9RwZg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.4':
+    resolution: {integrity: sha512-cSOCh6JlkmfjLyNcLiu2nB4v+nm+dkZ+Q5KHWk/soo4U7ZLiEQFKHK9/YmtBHjfCEaU43IBKQOc4/uJmCaiCTQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.4':
+    resolution: {integrity: sha512-D3anSY15EJoxrihpsXI6SMrmmonnQtR2ni7arO+Lfdg3O95b9hNXxONk8jA5C8ANdF/h5HMAxejgs8PWJ6rlhw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-visually-hidden@1.2.11':
+    resolution: {integrity: sha512-NFS86RYYZb4/exihaESBGOpMJFz8MGLAfu3mOBSGByVnVPC9JPASfYubxd/8KbkQK0sYAv8lVQDEQukDX/qXvQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/rect@1.1.3':
+    resolution: {integrity: sha512-JtyZR+mqgBibTo8xea3B6ZRmzZiM/YeVBtUkas6zMuXjAlfIFIW2FgqeM9eLyvEaYX66vr6DJMK+4U6LV0KhNw==}
+
+  '@redocly/ajv@8.11.2':
+    resolution: {integrity: sha512-io1JpnwtIcvojV7QKDUSIuMN/ikdOUd1ReEnUnMKGfDVridQZ31J0MmIuqwuRjWDZfmvr+Q0MqCcfHM2gTivOg==}
+
+  '@redocly/config@0.22.0':
+    resolution: {integrity: sha512-gAy93Ddo01Z3bHuVdPWfCwzgfaYgMdaZPcfL7JZ7hWJoK9V0lXDbigTWkhiPFAaLWzbOJ+kbUQG1+XwIm0KRGQ==}
+
+  '@redocly/openapi-core@1.34.19':
+    resolution: {integrity: sha512-o/0VgsBXgwcY1lyeqcVtSGdTQAPnVggo0fbFVPlxl5XVDKUcVH0OLRqt3CbkwByT5FU305E0iE0O7MzThjDblw==}
+    engines: {node: '>=18.17.0', npm: '>=9.5.0'}
+
+  '@rolldown/binding-android-arm-eabi@1.2.5':
+    resolution: {integrity: sha512-DLe/i+l8ynIBY7XEQ191TeZvCoowIGa18R+dIV30GW7DiOtp74i/xX8hs8GUjW5ARV7VZuie3d6AumSmCwbeRA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@rolldown/binding-android-arm64@1.2.5':
+    resolution: {integrity: sha512-zXcwKlQApYAOELHd8PwKDFkagYF9Wy4e0RJ+0qnzl9Pjnpj75TEG8ufv40p2J7kCEfwZAsNiuzRIyNNMWT38ig==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@rolldown/binding-darwin-arm64@1.2.5':
+    resolution: {integrity: sha512-dK4QakI42nzWgJT5sm4y4y/O//D4OxM75/cH28RLV+nzIN9AY+YsbuUVrUTjlLjXR6vpyxFbSsbmNuJ6BP9sww==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-x64@1.2.5':
+    resolution: {integrity: sha512-fqSALaUu1Wjd1nK2uW2kJDWdLCc8lx1IcY+MTY26Aurfdx19anlzhqXOgCFbBFQnlFDTn4TC1/7Nz4Bl2mLP3A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rolldown/binding-freebsd-x64@1.2.5':
+    resolution: {integrity: sha512-/vCnNxlkxs9tKxNDcyWUePpJ/PgTzxIaVhoM5SmG8UV+GR/IcPam4VYxi7GIMo7PSDuNqlJqvprqii9NqqVCMw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.5':
+    resolution: {integrity: sha512-abk0NLA519LxRCszmbE0jYKuQ9YPocOXTiOXOo6Yr+YAT95VH+PtqYAjOJvGKt3viEd/x4qzabAlwd5bHOOARg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm64-gnu@1.2.5':
+    resolution: {integrity: sha512-Y7eALiJ8lr0M2HH103Js+g7V34wf6snlpZLAsHI90uLhr3PVlNsbFVAXJC9d/V6BnPyKtpSwI+NcB/RLxsQxuA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-arm64-musl@1.2.5':
+    resolution: {integrity: sha512-xMvZgnbZg4YVnR/AX2b3oOPDTFYJvUVaJg5FedA/LuvexAtXibZQej4cnTkw3rjsJ/ggUROB64TdtETiim+FYA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-linux-ppc64-gnu@1.2.5':
+    resolution: {integrity: sha512-GRjeqTUDHTo5GwntsLaAMcBahG3nlpjftXWZLN73HiYQlhwEowvarFgQnRnQZtIp4keXX7quXFbG38uPZBa2EA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-s390x-gnu@1.2.5':
+    resolution: {integrity: sha512-vLNTR45F2Uwc8AufkNXPmB4VliaXs+FvcheEogIzOXzO4l+LzieXF5A/TWxLy5HtqpsRCHUfd0lPVrrdgXdLHQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-gnu@1.2.5':
+    resolution: {integrity: sha512-Mgj59/HTuYeK9Gz2MA+mBWKnHsAgkBSec15ZMb1st3oIfFbX7gCjOae7GydHhzcyQi9Z/7M1QuN9bR3oFqF0jQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-musl@1.2.5':
+    resolution: {integrity: sha512-mY8AP0/ichsbhAxGnLa3d3+MwV0EfgrPND2bplI3Ym8T6R2pJ0N87bvrKVwNXmdy3jnr6eQBecdqx/HMknBmpA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-openharmony-arm64@1.2.5':
+    resolution: {integrity: sha512-8SLssA2oweAxyRgDp789ACfRb/3P+zNRJpzZxSizxF9m8NUDQ4+3xjo8ttjhVGGw6Qxb70oZiEtIjaKikCO7Yw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rolldown/binding-win32-arm64-msvc@1.2.5':
+    resolution: {integrity: sha512-vGbruD5zquhoc8D9SViXgN2FBJtNdTyQ4DtG+SWiEGlJiAzoKcZ2xp+xuXCffhubVdt0NJlTZqkeRuERy7g8Cw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rolldown/binding-win32-x64-msvc@1.2.5':
+    resolution: {integrity: sha512-e/SXpgISz+IoqVcSSI0rx/d/he8zqLex+/rCWpnHpmVfmPIUjag9H6P7zotf0gJHwPUhQxZ/mF8tr6acebT9yw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/pluginutils@1.0.1':
+    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
+
+  '@tanstack/query-core@5.101.4':
+    resolution: {integrity: sha512-gNwcvOJcRbLWPOLG/2OBm+zM+Yv+MKsXKEOWC57USuZDEsI71hEErQsiEGx5wX9rzWWkfwM0fVSPoiIFSsxfiw==}
+
+  '@tanstack/react-query@5.101.4':
+    resolution: {integrity: sha512-yRg2pfOCxIs4ZJW3XYYHU/WgtD04FHSnfHlpRT7h7pR77hwkdRG4wxbKe4aq6P0RvXUTBSQpQeadS1SUYUe+KA==}
+    peerDependencies:
+      react: ^18 || ^19
+
+  '@tanstack/react-store@0.11.1':
+    resolution: {integrity: sha512-HaIGKI3YLmjBYIvy5DFDY23oNaYZIsTZfngey07Uh5iLVJgM3bIGCnZeOFOqzjFld9JHWcaHJnasD/bKoGKwJQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@tanstack/react-table@9.1.2':
+    resolution: {integrity: sha512-YQPZFJ1nIi/bjjwsPZVouABgahDcl7Gdm33CdTStUJBn0DjEVJ2uhSTVmIoWt9MVKdQziXGAsXipSzy949Hygg==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      react: '>=18'
+
+  '@tanstack/store@0.11.1':
+    resolution: {integrity: sha512-mzTOBhypOuDJAy/D8n2MfUZ1HFkXnmSETviRyhqEC8LUE7/IZQExOTxMANj3KjTofYTkFNpBY67qaVrT41YccA==}
+
+  '@tanstack/table-core@9.1.2':
+    resolution: {integrity: sha512-ONpWQeass1sfg80CWF1NSwQ8r3GiqxA2lT/EdqIcrDEPZ0Z+0mM94eQoFYLPN0Kztzj8TQVb2+PrSZSItqA61g==}
+    engines: {node: '>=20'}
+
+  '@types/react-dom@19.2.4':
+    resolution: {integrity: sha512-Bsc+QHgp+P/F02XDzNCY9jnZNCUuLki36KT7VKrTXXLdHf+vHMNZnW1rVu5DNW/rCK+fya3DATySbLM4yhtKUw==}
+    peerDependencies:
+      '@types/react': ^19.2.0
+
+  '@types/react@19.2.18':
+    resolution: {integrity: sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==}
+
+  '@vitejs/plugin-react@6.1.0':
+    resolution: {integrity: sha512-qd2BzUBehkov86WFhg0JkEFEYyCLG9uPCe6qWTY/kRlss9OvJrOF2UbIWT7p+8IzZHkEu0DNGHc4HSv+JdDLsw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      '@rolldown/plugin-babel': ^0.1.7 || ^0.2.0
+      babel-plugin-react-compiler: ^1.0.0
+      oxc-transform-react: ^0.145.0
+      vite: ^8.0.0
+    peerDependenciesMeta:
+      '@rolldown/plugin-babel':
+        optional: true
+      babel-plugin-react-compiler:
+        optional: true
+      oxc-transform-react:
+        optional: true
+
+  agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
+    engines: {node: '>= 14'}
+
+  ansi-colors@4.1.3:
+    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
+    engines: {node: '>=6'}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  brace-expansion@2.1.4:
+    resolution: {integrity: sha512-hGfVzPxthbf3+2yjg/RBs60cB0FhqBS/zvdV/4wn4/BmN0bNMMHPc4V/BbFieqf1TKAGGAHnY4eSjajCl0f2Xg==}
+
+  change-case@5.4.4:
+    resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
+
+  colorette@1.4.0:
+    resolution: {integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==}
+
+  cookie@1.1.1:
+    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
+    engines: {node: '>=18'}
+
+  crelt@1.0.7:
+    resolution: {integrity: sha512-aK6BbWfhf4U/wCcLHKPJl/xa6VkVstRaPywWtMKGwuOLc/wZTyQYuoxgvZnNsBvv7Kg3YTBQYYBCggcviQczuA==}
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
+  esbuild@0.28.2:
+    resolution: {integrity: sha512-HKVLS8dvII+xoKW9kmqxbRKrnWEXfJJr/FZhhJmiqIB0e053QNYFqOBouTMO/k5sID4MvCiUCvv8b9M4h32wIA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
+  index-to-position@1.2.0:
+    resolution: {integrity: sha512-Yg7+ztRkqslMAS2iFaU+Oa4KTSidr63OsFGlOrJoW981kIYO3CGCS3wA95P1mUi/IVSJkn0D479KTJpVpvFNuw==}
+    engines: {node: '>=18'}
+
+  js-levenshtein@1.1.6:
+    resolution: {integrity: sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==}
+    engines: {node: '>=0.10.0'}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-yaml@4.3.1:
+    resolution: {integrity: sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==}
+    hasBin: true
+
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  lightningcss-android-arm64@1.33.0:
+    resolution: {integrity: sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.33.0:
+    resolution: {integrity: sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.33.0:
+    resolution: {integrity: sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.33.0:
+    resolution: {integrity: sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.33.0:
+    resolution: {integrity: sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.33.0:
+    resolution: {integrity: sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-musl@1.33.0:
+    resolution: {integrity: sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-gnu@1.33.0:
+    resolution: {integrity: sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-musl@1.33.0:
+    resolution: {integrity: sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-win32-arm64-msvc@1.33.0:
+    resolution: {integrity: sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.33.0:
+    resolution: {integrity: sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.33.0:
+    resolution: {integrity: sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==}
+    engines: {node: '>= 12.0.0'}
+
+  lucide-react@1.33.0:
+    resolution: {integrity: sha512-MTRwMy0ZlL8Ur/vOAiJ9XGHE+kFPC7brq6MxAm0GiGXEBj0qy0jA/pG4N675oSzciO/UCdX8T+5yUQdmDeTLxg==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  minimatch@5.1.9:
+    resolution: {integrity: sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==}
+    engines: {node: '>=10'}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  nanoid@3.3.18:
+    resolution: {integrity: sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  openapi-typescript@7.13.0:
+    resolution: {integrity: sha512-EFP392gcqXS7ntPvbhBzbF8TyBA+baIYEm791Hy5YkjDYKTnk/Tn5OQeKm5BIZvJihpp8Zzr4hzx0Irde1LNGQ==}
+    hasBin: true
+    peerDependencies:
+      typescript: ^5.x
+
+  parse-json@8.3.0:
+    resolution: {integrity: sha512-ybiGyvspI+fAoRQbIPRddCcSTV9/LsJbf0e/S85VLowVGzRmokfneg2kwVW/KU5rOXrPSbF1qAKPMgNTqqROQQ==}
+    engines: {node: '>=18'}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@4.0.5:
+    resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==}
+    engines: {node: '>=12'}
+
+  pluralize@8.0.0:
+    resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
+    engines: {node: '>=4'}
+
+  postcss@8.5.26:
+    resolution: {integrity: sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  radix-ui@1.6.7:
+    resolution: {integrity: sha512-QBdhh1arIEUvPC0dQ5+nwWAxt7+N+oP/9jPwjJkGFoSk/sqxg32gJtSXGtFh8frAIcS6oC9cx2Q+7KYCQLOAeA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  react-dom@19.2.8:
+    resolution: {integrity: sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==}
+    peerDependencies:
+      react: ^19.2.8
+
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.2:
+    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-router-dom@7.18.2:
+    resolution: {integrity: sha512-AIKJ/jgGlFb3EbfCXk5Gzshiwt+l3mqbCrNjmEWMMjqQxNJ3svBa6bgzFyCC2Sw3RA0VWF1kg3uQf2OFhxb8hw==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+
+  react-router@7.18.2:
+    resolution: {integrity: sha512-aUVMjFm3GAPTTZL7oYr5E7ETiqfQCHRLH+B+5afnICvf0r7kkK4eR6SMuwbSTJw/7t+12khT/Kahij49fqOCIg==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react@19.2.8:
+    resolution: {integrity: sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==}
+    engines: {node: '>=0.10.0'}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  rolldown@1.2.5:
+    resolution: {integrity: sha512-VD2IE5PUG4Oj8zz2VGykiYd5wbnjdIiSsNQb8Qu5B+noEp+A78mu2iVvpp27g8es14Tk9rofNs5Tku9iQCS4fA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+
+  set-cookie-parser@2.7.2:
+    resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  style-mod@4.1.3:
+    resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}
+
+  supports-color@10.2.2:
+    resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==}
+    engines: {node: '>=18'}
+
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  type-fest@4.41.0:
+    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
+    engines: {node: '>=16'}
+
+  typescript@6.0.3:
+    resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  uri-js-replace@1.0.1:
+    resolution: {integrity: sha512-W+C9NWNLFOoBI2QWDp4UT9pv65r2w5Cx+3sTYFvtMdDBxkKt1syCqsUdSFAChbEe1uK5TfS04wt/nGwmaeIQ0g==}
+
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  vite@8.2.2:
+    resolution: {integrity: sha512-cFKLV/PRgAUlIRm5WjMjJ86jrftzpqcgH+Us+DS8mI3CDNiH30Whrz8uHL3+MOLPAgqbMBAqWdAHAphOAM+z/Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      '@vitejs/devtools': ^0.4.0 || ^0.5.0
+      esbuild: ^0.27.0 || ^0.28.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      '@vitejs/devtools':
+        optional: true
+      esbuild:
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
+  yaml-ast-parser@0.0.43:
+    resolution: {integrity: sha512-2PTINUwsRqSd+s8XxKaJWQlUuEMHJQyEuh2edBbW8KNJz0SJPwUSD2zRWqezFEdN7IzAgeuYHFUCF7o8zRdZ0A==}
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+snapshots:
+
+  '@babel/code-frame@7.29.7':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.29.7
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/helper-validator-identifier@7.29.7': {}
+
+  '@biomejs/biome@2.5.9':
+    optionalDependencies:
+      '@biomejs/cli-darwin-arm64': 2.5.9
+      '@biomejs/cli-darwin-x64': 2.5.9
+      '@biomejs/cli-linux-arm64': 2.5.9
+      '@biomejs/cli-linux-arm64-musl': 2.5.9
+      '@biomejs/cli-linux-x64': 2.5.9
+      '@biomejs/cli-linux-x64-musl': 2.5.9
+      '@biomejs/cli-win32-arm64': 2.5.9
+      '@biomejs/cli-win32-x64': 2.5.9
+
+  '@biomejs/cli-darwin-arm64@2.5.9':
+    optional: true
+
+  '@biomejs/cli-darwin-x64@2.5.9':
+    optional: true
+
+  '@biomejs/cli-linux-arm64-musl@2.5.9':
+    optional: true
+
+  '@biomejs/cli-linux-arm64@2.5.9':
+    optional: true
+
+  '@biomejs/cli-linux-x64-musl@2.5.9':
+    optional: true
+
+  '@biomejs/cli-linux-x64@2.5.9':
+    optional: true
+
+  '@biomejs/cli-win32-arm64@2.5.9':
+    optional: true
+
+  '@biomejs/cli-win32-x64@2.5.9':
+    optional: true
+
+  '@codemirror/autocomplete@6.20.3':
+    dependencies:
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.1
+      '@codemirror/view': 6.43.9
+      '@lezer/common': 1.5.2
+
+  '@codemirror/commands@6.11.0':
+    dependencies:
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.1
+      '@codemirror/view': 6.43.9
+      '@lezer/common': 1.5.2
+
+  '@codemirror/lang-sql@6.10.0':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.3
+      '@codemirror/language': 6.12.4
+      '@codemirror/state': 6.7.1
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@codemirror/language@6.12.4':
+    dependencies:
+      '@codemirror/state': 6.7.1
+      '@codemirror/view': 6.43.9
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+      style-mod: 4.1.3
+
+  '@codemirror/state@6.7.1':
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.3
+
+  '@codemirror/view@6.43.9':
+    dependencies:
+      '@codemirror/state': 6.7.1
+      crelt: 1.0.7
+      style-mod: 4.1.3
+      w3c-keyname: 2.2.8
+
+  '@esbuild/aix-ppc64@0.28.2':
+    optional: true
+
+  '@esbuild/android-arm64@0.28.2':
+    optional: true
+
+  '@esbuild/android-arm@0.28.2':
+    optional: true
+
+  '@esbuild/android-x64@0.28.2':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.28.2':
+    optional: true
+
+  '@esbuild/darwin-x64@0.28.2':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.28.2':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.28.2':
+    optional: true
+
+  '@esbuild/linux-arm64@0.28.2':
+    optional: true
+
+  '@esbuild/linux-arm@0.28.2':
+    optional: true
+
+  '@esbuild/linux-ia32@0.28.2':
+    optional: true
+
+  '@esbuild/linux-loong64@0.28.2':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.28.2':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.28.2':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.28.2':
+    optional: true
+
+  '@esbuild/linux-s390x@0.28.2':
+    optional: true
+
+  '@esbuild/linux-x64@0.28.2':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.28.2':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.28.2':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.28.2':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.28.2':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.28.2':
+    optional: true
+
+  '@esbuild/sunos-x64@0.28.2':
+    optional: true
+
+  '@esbuild/win32-arm64@0.28.2':
+    optional: true
+
+  '@esbuild/win32-ia32@0.28.2':
+    optional: true
+
+  '@esbuild/win32-x64@0.28.2':
+    optional: true
+
+  '@floating-ui/core@1.8.0':
+    dependencies:
+      '@floating-ui/utils': 0.2.12
+
+  '@floating-ui/dom@1.8.0':
+    dependencies:
+      '@floating-ui/core': 1.8.0
+      '@floating-ui/utils': 0.2.12
+
+  '@floating-ui/react-dom@2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@floating-ui/dom': 1.8.0
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
+  '@floating-ui/utils@0.2.12': {}
+
+  '@lezer/common@1.5.2': {}
+
+  '@lezer/highlight@1.2.3':
+    dependencies:
+      '@lezer/common': 1.5.2
+
+  '@lezer/lr@1.4.10':
+    dependencies:
+      '@lezer/common': 1.5.2
+
+  '@marijn/find-cluster-break@1.0.3': {}
+
+  '@oxc-project/types@0.146.0': {}
+
+  '@radix-ui/number@1.1.3': {}
+
+  '@radix-ui/primitive@1.1.7': {}
+
+  '@radix-ui/react-accessible-icon@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-accordion@1.2.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collapsible': 1.1.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-alert-dialog@1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dialog': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-arrow@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-aspect-ratio@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-avatar@1.2.6(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-checkbox@1.3.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-collapsible@1.1.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-collection@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-compose-refs@1.1.5(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-context-menu@2.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-context@1.2.2(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-dialog@1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      aria-hidden: 1.2.6
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-remove-scroll: 2.7.2(@types/react@19.2.18)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-direction@1.1.4(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-dismissable-layer@1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-dropdown-menu@2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-focus-guards@1.1.6(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-focus-scope@1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-form@0.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-label': 2.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-hover-card@1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-id@1.1.4(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-label@2.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-menu@2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      aria-hidden: 1.2.6
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-remove-scroll: 2.7.2(@types/react@19.2.18)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-menubar@1.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-navigation-menu@1.2.22(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-previous': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-one-time-password-field@0.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/number': 1.1.3
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-password-toggle-field@0.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-popover@1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      aria-hidden: 1.2.6
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-remove-scroll: 2.7.2(@types/react@19.2.18)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-popper@1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-arrow': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-rect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/rect': 1.1.3
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-portal@1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-presence@1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-primitive@2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-progress@1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-radio-group@1.4.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-roving-focus@1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-scroll-area@1.2.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/number': 1.1.3
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-select@2.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/number': 1.1.3
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-previous': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      aria-hidden: 1.2.6
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-remove-scroll: 2.7.2(@types/react@19.2.18)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-separator@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-slider@1.4.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/number': 1.1.3
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-previous': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-slot@1.3.3(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-switch@1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-tabs@1.1.21(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-toast@1.2.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-toggle-group@1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toggle': 1.1.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-toggle@1.1.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-toolbar@1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toggle-group': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-tooltip@1.2.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-use-callback-ref@1.1.4(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-controllable-state@1.2.6(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-effect-event@0.0.5(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-escape-keydown@1.1.5(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-is-hydrated@0.1.3(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-layout-effect@1.1.4(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-previous@1.1.4(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-rect@1.1.4(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/rect': 1.1.3
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-size@1.1.4(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-visually-hidden@1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/rect@1.1.3': {}
+
+  '@redocly/ajv@8.11.2':
+    dependencies:
+      fast-deep-equal: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+      uri-js-replace: 1.0.1
+
+  '@redocly/config@0.22.0': {}
+
+  '@redocly/openapi-core@1.34.19(supports-color@10.2.2)':
+    dependencies:
+      '@redocly/ajv': 8.11.2
+      '@redocly/config': 0.22.0
+      colorette: 1.4.0
+      https-proxy-agent: 7.0.6(supports-color@10.2.2)
+      js-levenshtein: 1.1.6
+      js-yaml: 4.3.1
+      minimatch: 5.1.9
+      pluralize: 8.0.0
+      yaml-ast-parser: 0.0.43
+    transitivePeerDependencies:
+      - supports-color
+
+  '@rolldown/binding-android-arm-eabi@1.2.5':
+    optional: true
+
+  '@rolldown/binding-android-arm64@1.2.5':
+    optional: true
+
+  '@rolldown/binding-darwin-arm64@1.2.5':
+    optional: true
+
+  '@rolldown/binding-darwin-x64@1.2.5':
+    optional: true
+
+  '@rolldown/binding-freebsd-x64@1.2.5':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.5':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.2.5':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.2.5':
+    optional: true
+
+  '@rolldown/binding-linux-ppc64-gnu@1.2.5':
+    optional: true
+
+  '@rolldown/binding-linux-s390x-gnu@1.2.5':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.2.5':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.2.5':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.2.5':
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.2.5':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.2.5':
+    optional: true
+
+  '@rolldown/pluginutils@1.0.1': {}
+
+  '@tanstack/query-core@5.101.4': {}
+
+  '@tanstack/react-query@5.101.4(react@19.2.8)':
+    dependencies:
+      '@tanstack/query-core': 5.101.4
+      react: 19.2.8
+
+  '@tanstack/react-store@0.11.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@tanstack/store': 0.11.1
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      use-sync-external-store: 1.6.0(react@19.2.8)
+
+  '@tanstack/react-table@9.1.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@tanstack/react-store': 0.11.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@tanstack/table-core': 9.1.2
+      react: 19.2.8
+    transitivePeerDependencies:
+      - react-dom
+
+  '@tanstack/store@0.11.1': {}
+
+  '@tanstack/table-core@9.1.2':
+    dependencies:
+      '@tanstack/store': 0.11.1
+
+  '@types/react-dom@19.2.4(@types/react@19.2.18)':
+    dependencies:
+      '@types/react': 19.2.18
+
+  '@types/react@19.2.18':
+    dependencies:
+      csstype: 3.2.3
+
+  '@vitejs/plugin-react@6.1.0(vite@8.2.2(esbuild@0.28.2))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.1
+      vite: 8.2.2(esbuild@0.28.2)
+
+  agent-base@7.1.4: {}
+
+  ansi-colors@4.1.3: {}
+
+  argparse@2.0.1: {}
+
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
+  balanced-match@1.0.2: {}
+
+  brace-expansion@2.1.4:
+    dependencies:
+      balanced-match: 1.0.2
+
+  change-case@5.4.4: {}
+
+  colorette@1.4.0: {}
+
+  cookie@1.1.1: {}
+
+  crelt@1.0.7: {}
+
+  csstype@3.2.3: {}
+
+  debug@4.4.3(supports-color@10.2.2):
+    dependencies:
+      ms: 2.1.3
+    optionalDependencies:
+      supports-color: 10.2.2
+
+  detect-libc@2.1.2: {}
+
+  detect-node-es@1.1.0: {}
+
+  esbuild@0.28.2:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.28.2
+      '@esbuild/android-arm': 0.28.2
+      '@esbuild/android-arm64': 0.28.2
+      '@esbuild/android-x64': 0.28.2
+      '@esbuild/darwin-arm64': 0.28.2
+      '@esbuild/darwin-x64': 0.28.2
+      '@esbuild/freebsd-arm64': 0.28.2
+      '@esbuild/freebsd-x64': 0.28.2
+      '@esbuild/linux-arm': 0.28.2
+      '@esbuild/linux-arm64': 0.28.2
+      '@esbuild/linux-ia32': 0.28.2
+      '@esbuild/linux-loong64': 0.28.2
+      '@esbuild/linux-mips64el': 0.28.2
+      '@esbuild/linux-ppc64': 0.28.2
+      '@esbuild/linux-riscv64': 0.28.2
+      '@esbuild/linux-s390x': 0.28.2
+      '@esbuild/linux-x64': 0.28.2
+      '@esbuild/netbsd-arm64': 0.28.2
+      '@esbuild/netbsd-x64': 0.28.2
+      '@esbuild/openbsd-arm64': 0.28.2
+      '@esbuild/openbsd-x64': 0.28.2
+      '@esbuild/openharmony-arm64': 0.28.2
+      '@esbuild/sunos-x64': 0.28.2
+      '@esbuild/win32-arm64': 0.28.2
+      '@esbuild/win32-ia32': 0.28.2
+      '@esbuild/win32-x64': 0.28.2
+    optional: true
+
+  fast-deep-equal@3.1.3: {}
+
+  fdir@6.5.0(picomatch@4.0.5):
+    optionalDependencies:
+      picomatch: 4.0.5
+
+  fsevents@2.3.3:
+    optional: true
+
+  get-nonce@1.0.1: {}
+
+  https-proxy-agent@7.0.6(supports-color@10.2.2):
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  index-to-position@1.2.0: {}
+
+  js-levenshtein@1.1.6: {}
+
+  js-tokens@4.0.0: {}
+
+  js-yaml@4.3.1:
+    dependencies:
+      argparse: 2.0.1
+
+  json-schema-traverse@1.0.0: {}
+
+  lightningcss-android-arm64@1.33.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.33.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.33.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.33.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.33.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.33.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.33.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.33.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.33.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.33.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.33.0:
+    optional: true
+
+  lightningcss@1.33.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.33.0
+      lightningcss-darwin-arm64: 1.33.0
+      lightningcss-darwin-x64: 1.33.0
+      lightningcss-freebsd-x64: 1.33.0
+      lightningcss-linux-arm-gnueabihf: 1.33.0
+      lightningcss-linux-arm64-gnu: 1.33.0
+      lightningcss-linux-arm64-musl: 1.33.0
+      lightningcss-linux-x64-gnu: 1.33.0
+      lightningcss-linux-x64-musl: 1.33.0
+      lightningcss-win32-arm64-msvc: 1.33.0
+      lightningcss-win32-x64-msvc: 1.33.0
+
+  lucide-react@1.33.0(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+
+  minimatch@5.1.9:
+    dependencies:
+      brace-expansion: 2.1.4
+
+  ms@2.1.3: {}
+
+  nanoid@3.3.18: {}
+
+  openapi-typescript@7.13.0(typescript@6.0.3):
+    dependencies:
+      '@redocly/openapi-core': 1.34.19(supports-color@10.2.2)
+      ansi-colors: 4.1.3
+      change-case: 5.4.4
+      parse-json: 8.3.0
+      supports-color: 10.2.2
+      typescript: 6.0.3
+      yargs-parser: 21.1.1
+
+  parse-json@8.3.0:
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      index-to-position: 1.2.0
+      type-fest: 4.41.0
+
+  picocolors@1.1.1: {}
+
+  picomatch@4.0.5: {}
+
+  pluralize@8.0.0: {}
+
+  postcss@8.5.26:
+    dependencies:
+      nanoid: 3.3.18
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  radix-ui@1.6.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-accessible-icon': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-accordion': 1.2.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-alert-dialog': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-arrow': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-aspect-ratio': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-avatar': 1.2.6(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-checkbox': 1.3.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-collapsible': 1.1.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context-menu': 2.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-dialog': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-dropdown-menu': 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-form': 0.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-hover-card': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-label': 2.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-menubar': 1.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-navigation-menu': 1.2.22(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-one-time-password-field': 0.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-password-toggle-field': 0.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-popover': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-progress': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-radio-group': 1.4.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-scroll-area': 1.2.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-select': 2.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slider': 1.4.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-switch': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-tabs': 1.1.21(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toast': 1.2.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toggle': 1.1.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toggle-group': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toolbar': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-tooltip': 1.2.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-escape-keydown': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  react-dom@19.2.8(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      scheduler: 0.27.0
+
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.18)(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-style-singleton: 2.2.3(@types/react@19.2.18)(react@19.2.8)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  react-remove-scroll@2.7.2(@types/react@19.2.18)(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.18)(react@19.2.8)
+      react-style-singleton: 2.2.3(@types/react@19.2.18)(react@19.2.8)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      use-sidecar: 1.1.3(@types/react@19.2.18)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  react-router-dom@7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-router: 7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+
+  react-router@7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      cookie: 1.1.1
+      react: 19.2.8
+      set-cookie-parser: 2.7.2
+    optionalDependencies:
+      react-dom: 19.2.8(react@19.2.8)
+
+  react-style-singleton@2.2.3(@types/react@19.2.18)(react@19.2.8):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 19.2.8
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  react@19.2.8: {}
+
+  require-from-string@2.0.2: {}
+
+  rolldown@1.2.5:
+    dependencies:
+      '@oxc-project/types': 0.146.0
+      '@rolldown/pluginutils': 1.0.1
+    optionalDependencies:
+      '@rolldown/binding-android-arm-eabi': 1.2.5
+      '@rolldown/binding-android-arm64': 1.2.5
+      '@rolldown/binding-darwin-arm64': 1.2.5
+      '@rolldown/binding-darwin-x64': 1.2.5
+      '@rolldown/binding-freebsd-x64': 1.2.5
+      '@rolldown/binding-linux-arm-gnueabihf': 1.2.5
+      '@rolldown/binding-linux-arm64-gnu': 1.2.5
+      '@rolldown/binding-linux-arm64-musl': 1.2.5
+      '@rolldown/binding-linux-ppc64-gnu': 1.2.5
+      '@rolldown/binding-linux-s390x-gnu': 1.2.5
+      '@rolldown/binding-linux-x64-gnu': 1.2.5
+      '@rolldown/binding-linux-x64-musl': 1.2.5
+      '@rolldown/binding-openharmony-arm64': 1.2.5
+      '@rolldown/binding-win32-arm64-msvc': 1.2.5
+      '@rolldown/binding-win32-x64-msvc': 1.2.5
+
+  scheduler@0.27.0: {}
+
+  set-cookie-parser@2.7.2: {}
+
+  source-map-js@1.2.1: {}
+
+  style-mod@4.1.3: {}
+
+  supports-color@10.2.2: {}
+
+  tinyglobby@0.2.17:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.5)
+      picomatch: 4.0.5
+
+  tslib@2.8.1: {}
+
+  type-fest@4.41.0: {}
+
+  typescript@6.0.3: {}
+
+  uri-js-replace@1.0.1: {}
+
+  use-callback-ref@1.3.3(@types/react@19.2.18)(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  use-sidecar@1.1.3(@types/react@19.2.18)(react@19.2.8):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.2.8
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  use-sync-external-store@1.6.0(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+
+  vite@8.2.2(esbuild@0.28.2):
+    dependencies:
+      lightningcss: 1.33.0
+      picomatch: 4.0.5
+      postcss: 8.5.26
+      rolldown: 1.2.5
+      tinyglobby: 0.2.17
+    optionalDependencies:
+      esbuild: 0.28.2
+      fsevents: 2.3.3
+
+  w3c-keyname@2.2.8: {}
+
+  yaml-ast-parser@0.0.43: {}
+
+  yargs-parser@21.1.1: {}
diff --git a/ui/pnpm-workspace.yaml b/ui/pnpm-workspace.yaml
new file mode 100644
index 00000000..280f65fd
--- /dev/null
+++ b/ui/pnpm-workspace.yaml
@@ -0,0 +1,7 @@
+# ui/ is a standalone pnpm project; this file also carries pnpm settings.
+packages:
+  - "."
+
+# esbuild's postinstall validates its platform binary; allow it to run.
+allowBuilds:
+  esbuild: true
diff --git a/ui/scripts/dump-openapi.py b/ui/scripts/dump-openapi.py
new file mode 100644
index 00000000..9760d7fa
--- /dev/null
+++ b/ui/scripts/dump-openapi.py
@@ -0,0 +1,27 @@
+"""Print the workspace server's OpenAPI schema to stdout.
+
+The generated TypeScript in ``src/apiSchema.ts`` is derived from this, so the
+browser's idea of every payload comes from the server's own declaration
+rather than from a hand-copied interface. Run it through ``pnpm gen:api``.
+
+No server is started and no workspace is read: ``create_app`` builds the
+routes from ``hflow_server._contract``, and the schema is a property of those
+routes. The data root only has to exist, so a temporary directory does.
+"""
+
+import json
+import sys
+import tempfile
+from pathlib import Path
+
+from hflow_server import ServerSettings, create_app
+
+with tempfile.TemporaryDirectory() as temporary_root:
+    # assets_dir is pinned empty so the schema never depends on whether
+    # someone happens to have a frontend built locally.
+    settings = ServerSettings(
+        data_root=temporary_root,
+        assets_dir=Path(temporary_root) / "no-assets",
+    )
+    json.dump(create_app(settings).openapi(), sys.stdout, indent=2, sort_keys=True)
+    sys.stdout.write("\n")
diff --git a/ui/src/AppShell.tsx b/ui/src/AppShell.tsx
new file mode 100644
index 00000000..b9de8f62
--- /dev/null
+++ b/ui/src/AppShell.tsx
@@ -0,0 +1,264 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  CirclePlay,
+  Film,
+  Funnel,
+  Lock,
+  PanelLeftClose,
+  PanelLeftOpen,
+  TriangleAlert,
+  Waypoints,
+} from "lucide-react";
+import { Tooltip } from "radix-ui";
+import { type ComponentType, type ReactElement, type ReactNode, useState } from "react";
+import { Link, Outlet, useLocation } from "react-router-dom";
+import { fetchWorkspaceConfig } from "./api";
+import { BrandMark } from "./components/BrandMark";
+import { ThemeControl } from "./components/ThemeControl";
+import { useRailLayout } from "./railLayout";
+
+// The rail collapses to icons only (src/railLayout.ts owns the preference and
+// the pre-paint attribute; styles.css owns the widths). Two rules follow from
+// that and are enforced here rather than in CSS:
+//
+//   * every destination keeps an accessible name in both states — the label
+//     stays in the DOM and only becomes visually-hidden, so the name can never
+//     depend on JS and CSS agreeing about which state we are in;
+//   * collapsed, an icon alone does not say where it goes, so each destination
+//     grows a tooltip. Radix, not `title`: `title` is unreachable by keyboard,
+//     appears after a browser-controlled delay nobody can tune, and cannot be
+//     styled to match the rest of the chrome.
+//
+// The width itself is CSS. `isCollapsed` from useRailLayout() is the stored
+// choice AND whether the stylesheet is currently honouring it, so below the
+// bar-layout breakpoint this file agrees with what is on screen: labels shown,
+// tooltips silent.
+
+/** How long the pointer has to rest before a rail tooltip appears. */
+const TOOLTIP_DELAY_MS = 250;
+
+/**
+ * A rail control with a tooltip that is live only while `when` is true.
+ *
+ * The Radix wrapper is mounted in BOTH states and the open state is fully
+ * controlled, rather than the tooltip being conditionally wrapped around the
+ * child. Wrapping conditionally would change the element tree at the moment of
+ * collapse, so React would tear down the <a>/<button> inside and rebuild it —
+ * and the keyboard focus sitting on it would fall to <body>. Same node either
+ * way means focus stays exactly where the reader left it.
+ */
+function RailTooltip({
+  when,
+  label,
+  children,
+}: {
+  when: boolean;
+  label: string;
+  children: ReactElement;
+}) {
+  const [isRequested, setIsRequested] = useState(false);
+  return (
+    <Tooltip.Root open={when && isRequested} onOpenChange={setIsRequested}>
+      <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content className="rail-tooltip" side="right" sideOffset={8} collisionPadding={8}>
+          {label}
+          <Tooltip.Arrow className="rail-tooltip-arrow" width={9} height={5} />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+}
+
+function NavItem({
+  to,
+  icon: Icon,
+  label,
+  isActive,
+  isCollapsed,
+}: {
+  to: string;
+  icon: ComponentType;
+  label: string;
+  isActive: boolean;
+  isCollapsed: boolean;
+}) {
+  return (
+    <RailTooltip when={isCollapsed} label={label}>
+      <Link
+        to={to}
+        className={isActive ? "nav-item is-active" : "nav-item"}
+        aria-current={isActive ? "page" : undefined}
+      >
+        <Icon />
+        {/* Present in both states. Collapsed, styles.css clips it rather than
+            dropping it, so the link keeps its name without an aria-label that
+            would have to be kept in sync with the visible word. */}
+        <span className="nav-item-label">{label}</span>
+      </Link>
+    </RailTooltip>
+  );
+}
+
+/**
+ * A single glyph standing in for a footer readout that will not fit at 56px.
+ *
+ * The glyph is a plain span, not a button — there is nothing to press — so it
+ * carries its sentence as visually-hidden text for the accessibility tree and
+ * shows the same sentence on hover for everyone else. A focusable non-control
+ * would put a stop in the tab order that leads nowhere.
+ */
+function RailGlyph({
+  icon: Icon,
+  label,
+  className,
+}: {
+  icon: ComponentType;
+  label: string;
+  className?: string;
+}) {
+  return (
+    <>
+      <RailTooltip when={true} label={label}>
+        <span className={className ? `rail-glyph ${className}` : "rail-glyph"} aria-hidden="true">
+          <Icon />
+        </span>
+      </RailTooltip>
+      <span className="visually-hidden">{label}</span>
+    </>
+  );
+}
+
+// Small workspace readout at the bottom of the rail: where the data lives and
+// which versions are serving it. Quiet on purpose.
+//
+// Collapsed there is no room for a filesystem path or a version pair, so the
+// readout drops to the two things that are still worth interrupting for — the
+// server being unreachable, and the workspace being read-only — each as one
+// tooltipped glyph. The prose comes back when the rail does.
+function WorkspaceSummary({ isCollapsed }: { isCollapsed: boolean }) {
+  const configQuery = useQuery({ queryKey: ["config"], queryFn: fetchWorkspaceConfig });
+
+  if (isCollapsed) {
+    if (configQuery.isPending) return null;
+    if (configQuery.isError) {
+      return (
+        <RailGlyph icon={TriangleAlert} label="Server unreachable." className="rail-glyph-error" />
+      );
+    }
+    return configQuery.data.read_only ? (
+      <RailGlyph icon={Lock} label="This workspace is read-only." />
+    ) : null;
+  }
+
+  if (configQuery.isPending) return <p className="rail-note">connecting…</p>;
+  if (configQuery.isError) return <p className="rail-note rail-note-error">server unreachable</p>;
+  const config = configQuery.data;
+  return (
+    <div className="rail-meta">
+      {config.read_only ? <span className="chip chip-muted">read-only</span> : null}
+      <p className="rail-note" title={config.data_root}>
+        {config.data_root}
+      </p>
+      <p className="rail-note">
+        hflow {config.hflow_version} · server {config.hflow_server_version}
+      </p>
+    </div>
+  );
+}
+
+/**
+ * The collapse/expand control.
+ *
+ * Its name says what pressing it will DO, not what state it is in — an icon
+ * button whose name is "Sidebar" leaves a screen-reader user to guess — and
+ * `aria-expanded` carries the state alongside it. The <button> element itself
+ * is the same node in both states, so collapsing never moves focus off it.
+ */
+function RailToggle({ isCollapsed, onToggle }: { isCollapsed: boolean; onToggle: () => void }) {
+  const label = isCollapsed
+    ? "Expand the sidebar to show labels"
+    : "Collapse the sidebar to icons only";
+  const Icon = isCollapsed ? PanelLeftOpen : PanelLeftClose;
+  return (
+    <RailTooltip when={true} label={label}>
+      <button
+        type="button"
+        className="rail-toggle"
+        aria-label={label}
+        aria-expanded={!isCollapsed}
+        aria-controls="primary-nav"
+        onClick={onToggle}
+      >
+        <Icon />
+      </button>
+    </RailTooltip>
+  );
+}
+
+export function AppShell() {
+  const location = useLocation();
+  const { isCollapsed, toggle } = useRailLayout();
+  const isEpisodesActive = location.pathname === "/" || location.pathname.startsWith("/episodes");
+  const isRunsActive = location.pathname.startsWith("/runs");
+  const isPipelineActive = location.pathname.startsWith("/pipeline");
+  const isCurateActive = location.pathname.startsWith("/curate");
+  const navItems: ReactNode = (
+    <>
+      <NavItem
+        to="/"
+        icon={Film}
+        label="Episodes"
+        isActive={isEpisodesActive}
+        isCollapsed={isCollapsed}
+      />
+      <NavItem
+        to="/runs"
+        icon={CirclePlay}
+        label="Runs"
+        isActive={isRunsActive}
+        isCollapsed={isCollapsed}
+      />
+      <NavItem
+        to="/pipeline"
+        icon={Waypoints}
+        label="Pipeline"
+        isActive={isPipelineActive}
+        isCollapsed={isCollapsed}
+      />
+      <NavItem
+        to="/curate"
+        icon={Funnel}
+        label="Curate"
+        isActive={isCurateActive}
+        isCollapsed={isCollapsed}
+      />
+    </>
+  );
+  return (
+    <Tooltip.Provider delayDuration={TOOLTIP_DELAY_MS}>
+      <div className="app-shell">
+        <nav className="nav-rail" id="primary-nav" aria-label="Primary">
+          <div className="brand">
+            {/* The mark is the company's, the word beside it is the product's, so
+                the pair reads "Hebbian Robotics HFlow" to a screen reader too.
+                Collapsed, the mark stays and the word is clipped, not dropped. */}
+            <BrandMark className="brand-mark" title="Hebbian Robotics" />
+            <span className="brand-word">HFlow</span>
+          </div>
+          {navItems}
+          <div className="rail-foot">
+            <div className="rail-controls">
+              <RailToggle isCollapsed={isCollapsed} onToggle={toggle} />
+              <ThemeControl />
+            </div>
+            <WorkspaceSummary isCollapsed={isCollapsed} />
+          </div>
+        </nav>
+        <main className="app-main">
+          <Outlet />
+        </main>
+      </div>
+    </Tooltip.Provider>
+  );
+}
diff --git a/ui/src/api.ts b/ui/src/api.ts
new file mode 100644
index 00000000..0ff0dc83
--- /dev/null
+++ b/ui/src/api.ts
@@ -0,0 +1,489 @@
+// Typed client for the hflow-server JSON API (/api/v1). The only module here
+// that talks to the network.
+//
+// Payload types are ALIASES of `apiSchema.ts`, which `pnpm gen:api` generates
+// from the server's own /api/openapi.json. They were hand-written once and
+// drifted: the server declared `kind: StepKind` while the copy said
+// `kind: string`, it grew a `curation` capability the copy never learned
+// about, and a renamed config field went unnoticed for a release. Nothing
+// caught any of it, because nothing compared them. Now there is one owner --
+// the server -- and regenerating is a diff rather than an audit.
+//
+// What stays hand-written below is the part the server does not declare:
+// request shapes this client composes, and view-model types (`EpisodesQuery`,
+// `FacetName`) that exist only in the browser.
+
+import type { components } from "./apiSchema";
+
+type Served = components["schemas"];
+
+export class ApiError extends Error {
+  readonly status: number;
+  readonly detail: string;
+
+  constructor(status: number, detail: string) {
+    super(`${status}: ${detail}`);
+    this.name = "ApiError";
+    this.status = status;
+    this.detail = detail;
+  }
+}
+
+export type WorkspaceCapabilities = Served["WorkspaceCapabilities"];
+
+export type WorkspaceConfig = Served["WorkspaceConfigResponse"];
+
+export type EpisodeColumn = Served["ColumnDescriptor"];
+
+/** One row of the wide `episodes` view; columns are described by EpisodeColumn. */
+export type EpisodeRow = Record<string, unknown>;
+
+export type EpisodesResponse = Served["EpisodePageResponse"];
+
+export type FacetEntry = Served["ValueCount"];
+
+export type FacetName = "task" | "operator" | "embodiment" | "status" | "pipeline_version";
+
+export type EpisodeFacets = Served["EpisodeFacetsResponse"];
+
+export type EpisodeStatus = "ok" | "quarantined";
+
+export type EpisodeMeasurement = Served["EpisodeMeasurementRecord"];
+
+export type EpisodeCheckRun = Served["EpisodeCheckRunRecord"];
+
+export type EpisodeInterval = Served["EpisodeIntervalRecord"];
+
+export type EpisodeTagRecord = Served["EpisodeTagRecord"];
+
+export type EpisodeMediaItem = Served["EpisodeMediaArtifact"];
+
+export type EpisodeDossier = Served["EpisodeDossierResponse"];
+
+/** The structured filter params /episodes and /episodes/stats share. */
+export interface EpisodesFilter {
+  task: string[];
+  operator: string[];
+  embodiment: string[];
+  status: EpisodeStatus | null;
+  success: "true" | "false" | null;
+  search: string;
+}
+
+export interface EpisodesQuery extends EpisodesFilter {
+  orderBy: string | null;
+  order: "asc" | "desc";
+  limit: number;
+  offset: number;
+}
+
+export const DEFAULT_PAGE_SIZE = 50;
+export const MAX_PAGE_SIZE = 500;
+/** The server's default sort column; mirrored so the header indicator is honest. */
+export const DEFAULT_ORDER_BY = "recorded_at";
+
+// --- fetch helpers ------------------------------------------------------------
+// The server carries no authentication of its own (see docs/UI.md, "Trust
+// posture"), so every call here is a plain same-origin request: no credential
+// is captured from the landing URL, stored, or attached. Server-side paths
+// (media, canonical downloads, pinned Parquet) are used verbatim in
+// <img src> / <a href>.
+
+type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
+
+async function requestJson<ResponseBody>(
+  path: string,
+  method: HttpMethod,
+  requestBody?: unknown,
+): Promise<ResponseBody> {
+  const headers: Record<string, string> = { Accept: "application/json" };
+  if (requestBody !== undefined) headers["Content-Type"] = "application/json";
+  let response: Response;
+  try {
+    response = await fetch(path, {
+      method,
+      headers,
+      body: requestBody === undefined ? undefined : JSON.stringify(requestBody),
+    });
+  } catch (networkError) {
+    const reason = networkError instanceof Error ? networkError.message : "network error";
+    throw new ApiError(0, reason);
+  }
+  if (!response.ok) {
+    let detail = `request failed with status ${response.status}`;
+    try {
+      const body: unknown = await response.json();
+      if (typeof body === "object" && body !== null) {
+        const detailValue = (body as { detail?: unknown }).detail;
+        if (typeof detailValue === "string") detail = detailValue;
+      }
+    } catch {
+      // Non-JSON error body; keep the status-based detail.
+    }
+    throw new ApiError(response.status, detail);
+  }
+  // DELETE endpoints answer 204 with no body.
+  if (response.status === 204) return undefined as unknown as ResponseBody;
+  return (await response.json()) as ResponseBody;
+}
+
+async function fetchJson<ResponseBody>(path: string): Promise<ResponseBody> {
+  return requestJson<ResponseBody>(path, "GET");
+}
+
+/** Only the filter params (no sort/pagination) — shared with /episodes/stats,
+ * whose distributions must reflect the same filtered set regardless of paging. */
+function buildEpisodesFilterParams(filter: EpisodesFilter): URLSearchParams {
+  const params = new URLSearchParams();
+  for (const value of filter.task) params.append("task", value);
+  for (const value of filter.operator) params.append("operator", value);
+  for (const value of filter.embodiment) params.append("embodiment", value);
+  if (filter.status) params.set("status", filter.status);
+  if (filter.success) params.set("success", filter.success);
+  if (filter.search) params.set("search", filter.search);
+  return params;
+}
+
+function buildEpisodesSearchParams(query: EpisodesQuery): URLSearchParams {
+  const params = buildEpisodesFilterParams(query);
+  if (query.orderBy) params.set("order_by", query.orderBy);
+  params.set("order", query.order);
+  params.set("limit", String(query.limit));
+  params.set("offset", String(query.offset));
+  return params;
+}
+
+/**
+ * Parse browser URL search params (which intentionally use the same names as
+ * the API: task, operator, embodiment, status, success, search, order_by,
+ * order, limit, offset) into a typed query.
+ */
+export function parseEpisodesQuery(params: URLSearchParams): EpisodesQuery {
+  const statusParam = params.get("status");
+  const successParam = params.get("success");
+  const orderParam = params.get("order");
+  const limitParsed = Number.parseInt(params.get("limit") ?? "", 10);
+  const offsetParsed = Number.parseInt(params.get("offset") ?? "", 10);
+  const limit = Number.isFinite(limitParsed)
+    ? Math.min(Math.max(limitParsed, 1), MAX_PAGE_SIZE)
+    : DEFAULT_PAGE_SIZE;
+  const offset = Number.isFinite(offsetParsed) ? Math.max(offsetParsed, 0) : 0;
+  return {
+    task: params.getAll("task"),
+    operator: params.getAll("operator"),
+    embodiment: params.getAll("embodiment"),
+    status: statusParam === "ok" || statusParam === "quarantined" ? statusParam : null,
+    success: successParam === "true" || successParam === "false" ? successParam : null,
+    search: params.get("search") ?? "",
+    orderBy: params.get("order_by"),
+    order: orderParam === "asc" ? "asc" : "desc",
+    limit,
+    offset,
+  };
+}
+
+// --- API calls ----------------------------------------------------------------
+
+export function fetchWorkspaceConfig(): Promise<WorkspaceConfig> {
+  return fetchJson<WorkspaceConfig>("/api/v1/config");
+}
+
+export function fetchEpisodesPage(query: EpisodesQuery): Promise<EpisodesResponse> {
+  return fetchJson<EpisodesResponse>(`/api/v1/episodes?${buildEpisodesSearchParams(query)}`);
+}
+
+export function fetchEpisodeFacets(): Promise<EpisodeFacets> {
+  return fetchJson<EpisodeFacets>("/api/v1/episodes/facets");
+}
+
+export function fetchEpisodeDossier(episodeId: string): Promise<EpisodeDossier> {
+  return fetchJson<EpisodeDossier>(`/api/v1/episodes/${encodeURIComponent(episodeId)}`);
+}
+
+// --- curation studio --------------------------------------------------------
+
+/** {name, type} column descriptor, as returned by the server's DESCRIBE. */
+export type ColumnDescriptor = EpisodeColumn;
+
+/** One generic result row; the server guarantees JSON-safe values. */
+export type ResultRow = Record<string, unknown>;
+
+/**
+ * One row of a DuckDB `SUMMARIZE` result (column_name, column_type, min, max,
+ * approx_unique, null_percentage, …). The exact key set varies with the DuckDB
+ * version, so it stays an open record and the UI renders whatever arrives.
+ */
+export type SummarizeRow = Record<string, unknown>;
+
+export interface CurationPreviewRequest {
+  sql: string;
+  /** Server default 100, max 1000. */
+  limit?: number;
+  /** When true the server also runs SUMMARIZE over the result. */
+  stats?: boolean;
+}
+
+export type CurationPreviewResult = Served["CurationPreviewResponse"];
+
+export type CoverageEntry = Served["CheckCoverageEntry"];
+
+export type CurationReport = Served["CurationReportResponse"];
+
+export interface PinManifestRequest {
+  sql: string;
+  name: string;
+  description?: string;
+}
+
+export type ManifestRegistryEntry = Served["PinnedManifestEntry"];
+
+export type SavedQuery = Served["SavedQueryEntry"];
+
+export type CatalogTable = Served["CatalogTableDescription"];
+
+export type CatalogTableSummary = Served["CatalogTableSummaryResponse"];
+
+export function runCurationPreview(
+  request: CurationPreviewRequest,
+): Promise<CurationPreviewResult> {
+  return requestJson<CurationPreviewResult>("/api/v1/curation/preview", "POST", request);
+}
+
+export function runCurationReport(sql: string): Promise<CurationReport> {
+  return requestJson<CurationReport>("/api/v1/curation/report", "POST", { sql });
+}
+
+export function pinManifest(request: PinManifestRequest): Promise<ManifestRegistryEntry> {
+  return requestJson<ManifestRegistryEntry>("/api/v1/curation/pin", "POST", request);
+}
+
+export function fetchManifests(): Promise<ManifestRegistryEntry[]> {
+  return fetchJson<{ manifests: ManifestRegistryEntry[] }>("/api/v1/manifests").then(
+    (body) => body.manifests,
+  );
+}
+
+/** Same-origin Parquet download path, ready to use as an href. */
+export function manifestDownloadPath(manifestId: string): string {
+  return `/api/v1/manifests/${encodeURIComponent(manifestId)}/download`;
+}
+
+export function fetchSavedQueries(): Promise<SavedQuery[]> {
+  return fetchJson<{ queries: SavedQuery[] }>("/api/v1/queries").then((body) => body.queries);
+}
+
+export function createSavedQuery(input: { name: string; sql: string }): Promise<SavedQuery> {
+  return requestJson<SavedQuery>("/api/v1/queries", "POST", input);
+}
+
+export function updateSavedQuery(
+  queryId: string,
+  changes: { name?: string; sql?: string },
+): Promise<SavedQuery> {
+  return requestJson<SavedQuery>(`/api/v1/queries/${encodeURIComponent(queryId)}`, "PUT", changes);
+}
+
+export function deleteSavedQuery(queryId: string): Promise<void> {
+  return requestJson<void>(`/api/v1/queries/${encodeURIComponent(queryId)}`, "DELETE");
+}
+
+export function fetchCatalogTables(): Promise<CatalogTable[]> {
+  return fetchJson<{ tables: CatalogTable[] }>("/api/v1/catalog/tables").then(
+    (body) => body.tables,
+  );
+}
+
+export function fetchCatalogTableSummary(tableName: string): Promise<CatalogTableSummary> {
+  return fetchJson<CatalogTableSummary>(
+    `/api/v1/catalog/tables/${encodeURIComponent(tableName)}/summary`,
+  );
+}
+
+// --- runs monitor -------------------------------------------------------------
+
+export type RuntimeHealth = Served["RuntimeHealthComponents"];
+
+export type RuntimeStatus = Served["RuntimeStatusResponse"];
+
+export type RuntimeRun = Served["RuntimeRunSummary"];
+
+/** Canonical hflow.steps.Stage order, for display sorting only — the server
+ * may emit stage names this build does not know (forward compat). */
+export const STAGE_ORDER: readonly string[] = ["sync", "meta", "labels", "media"];
+
+export type StageRun = Served["StageRunSummary"];
+
+export type StageRecentRuns = Served["StageRecentRuns"];
+
+export type RuntimeRunsResponse = Served["RuntimeRunsResponse"];
+
+export interface IngestRequest {
+  uris: string[];
+  profile: string;
+  /** A hflow.steps.IngestMode value; the server validates against the live set. */
+  mode: string;
+  batch_count?: number;
+}
+
+export type IngestResponse = Served["IngestTriggerResponse"];
+
+export function fetchRuntimeStatus(): Promise<RuntimeStatus> {
+  return fetchJson<RuntimeStatus>("/api/v1/runtime/status");
+}
+
+export function fetchRuntimeRuns(limit: number): Promise<RuntimeRunsResponse> {
+  return fetchJson<RuntimeRunsResponse>(`/api/v1/runtime/runs?limit=${limit}`);
+}
+
+export function triggerIngest(request: IngestRequest): Promise<IngestResponse> {
+  return requestJson<IngestResponse>("/api/v1/runtime/ingest", "POST", request);
+}
+
+// --- pipeline page --------------------------------------------------------------
+
+/** One registered step out of App.manifest() (hflow.manifest.StepManifest). */
+export interface PipelineStepManifest {
+  name: string;
+  kind: string;
+  /** Content hash of the live function — long; display truncated with copy. */
+  version: string;
+  critical: boolean;
+  requires: string[];
+  /** Endpoint alias the step declares, or null. */
+  uses: string | null;
+}
+
+export interface DerivedChannelManifest {
+  topic: string;
+  version: string;
+}
+
+export interface PipelineManifest {
+  manifest_version: number;
+  pipeline_name: string;
+  hflow_version: string;
+  schema_version: string;
+  pipeline_version: string;
+  checks: PipelineStepManifest[];
+  enrichments: PipelineStepManifest[];
+  derived_channels: DerivedChannelManifest[];
+  endpoint_aliases: string[];
+  has_transform_override: boolean;
+}
+
+export type ObservedVersion = Served["ObservedCheckVersion"];
+
+export type StaleSummary = Served["StaleSummary"];
+
+/**
+ * The served pipeline payload, with `manifest` narrowed.
+ *
+ * This is the one payload the schema cannot type for us: the server declares
+ * `manifest` as an open object because `hflow.manifest` owns that shape and it
+ * is forwarded verbatim rather than mirrored. Everything else here comes from
+ * the generated type; only the hole is filled in, and `PipelineManifest` above
+ * is the local restatement that fills it. Typing it server-side would delete
+ * this narrowing.
+ */
+export type PipelineResponse = Omit<Served["PipelineResponse"], "manifest"> & {
+  manifest: PipelineManifest;
+};
+
+/** 409 (ApiError with the server's detail) when no --pipeline is configured. */
+export function fetchPipeline(): Promise<PipelineResponse> {
+  return fetchJson<PipelineResponse>("/api/v1/pipeline");
+}
+
+// --- episode column distributions --------------------------------------------------
+
+export type StatsBucket = Served["NumericHistogramBucket"];
+
+export interface StatsValue {
+  value: string;
+  count: number;
+}
+
+export interface NumericColumnStats {
+  name: string;
+  kind: "numeric";
+  /** Bucket bounds carry the range; top-level min/max are optional extras. */
+  min?: number | null;
+  max?: number | null;
+  buckets: StatsBucket[];
+}
+
+export interface CategoricalColumnStats {
+  name: string;
+  kind: "categorical";
+  /** Top values with counts (server-capped). */
+  values: StatsValue[];
+  /** Rows beyond the cap, rolled up; 0 or absent when the cap covered everything. */
+  other_count?: number | null;
+}
+
+export type EpisodeColumnStats = NumericColumnStats | CategoricalColumnStats;
+
+export type EpisodesStatsResponse = Served["EpisodeStatsResponse"];
+
+/** Distributions over the SAME filtered set as /episodes (sort/paging excluded). */
+export function fetchEpisodeStats(filter: EpisodesFilter): Promise<EpisodesStatsResponse> {
+  const params = buildEpisodesFilterParams(filter);
+  const suffix = params.size > 0 ? `?${params}` : "";
+  return fetchJson<EpisodesStatsResponse>(`/api/v1/episodes/stats${suffix}`);
+}
+
+// --- Visualization wave: DAG topology, live run graph, episode timeline ----------
+
+export type DagTaskNode = Served["DagTaskNodePayload"];
+
+export type DagTopology = Served["DagTopologyPayload"];
+
+export type PipelineEngineStep = Served["PipelineEngineStep"];
+
+export type PipelineUserStep = Served["PipelineUserStep"];
+
+export type PipelineGraphStage = Served["PipelineGraphStage"];
+
+export type QuarantineGate = Served["QuarantineGate"];
+
+export type PipelineGraphResponse = Served["PipelineGraphResponse"];
+
+export function fetchPipelineGraph(): Promise<PipelineGraphResponse> {
+  return fetchJson<PipelineGraphResponse>("/api/v1/pipeline/graph");
+}
+
+export type RunTaskInstance = Served["RunTaskInstance"];
+
+export type RunGraphMaster = Served["RunGraphMaster"];
+
+export type MappedFanOutSummary = Served["MappedFanOutSummary"];
+
+export type RunGraphStage = Served["RunGraphStage"];
+
+export type RunGraphResponse = Served["RunGraphResponse"];
+
+export function fetchRunGraph(dagRunId: string): Promise<RunGraphResponse> {
+  return fetchJson<RunGraphResponse>(`/api/v1/runtime/runs/${encodeURIComponent(dagRunId)}/graph`);
+}
+
+export type TimelineInterval = Served["TimelineInterval"];
+
+export type TimelineMeasurement = Served["TimelineMeasurement"];
+
+export type EpisodeTimeline = Served["EpisodeTimelineResponse"];
+
+export function fetchEpisodeTimeline(episodeId: string): Promise<EpisodeTimeline> {
+  return fetchJson<EpisodeTimeline>(`/api/v1/episodes/${encodeURIComponent(episodeId)}/timeline`);
+}
+
+/** Human-readable message for any error a query can surface. */
+export function describeApiError(error: unknown): string {
+  if (error instanceof ApiError) {
+    if (error.status === 0) {
+      return `Could not reach the hflow server (${error.detail}). Is \`hflow serve\` running?`;
+    }
+    return error.detail;
+  }
+  if (error instanceof Error) return error.message;
+  return "Unknown error";
+}
diff --git a/ui/src/apiSchema.ts b/ui/src/apiSchema.ts
new file mode 100644
index 00000000..49d77b68
--- /dev/null
+++ b/ui/src/apiSchema.ts
@@ -0,0 +1,2210 @@
+/**
+ * This file was auto-generated by openapi-typescript.
+ * Do not make direct changes to the file.
+ */
+
+export interface paths {
+  "/api/v1/catalog/tables": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** List Catalog Tables */
+    get: operations["list_catalog_tables_api_v1_catalog_tables_get"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/catalog/tables/{table_name}/summary": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Read Catalog Table Summary */
+    get: operations["read_catalog_table_summary_api_v1_catalog_tables__table_name__summary_get"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/config": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Read Config */
+    get: operations["read_config_api_v1_config_get"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/curation/pin": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Pin Manifest */
+    post: operations["pin_manifest_api_v1_curation_pin_post"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/curation/preview": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Run Curation Preview */
+    post: operations["run_curation_preview_api_v1_curation_preview_post"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/curation/report": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Run Curation Report */
+    post: operations["run_curation_report_api_v1_curation_report_post"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/episodes": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** List Episodes */
+    get: operations["list_episodes_api_v1_episodes_get"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/episodes/facets": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Read Episode Facets */
+    get: operations["read_episode_facets_api_v1_episodes_facets_get"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/episodes/stats": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Read Episode Stats */
+    get: operations["read_episode_stats_api_v1_episodes_stats_get"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/episodes/{episode_id}": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Read Episode */
+    get: operations["read_episode_api_v1_episodes__episode_id__get"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/episodes/{episode_id}/canonical": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Read Episode Canonical */
+    get: operations["read_episode_canonical_api_v1_episodes__episode_id__canonical_get"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/episodes/{episode_id}/media/{artifact_name}": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Read Episode Media */
+    get: operations["read_episode_media_api_v1_episodes__episode_id__media__artifact_name__get"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/episodes/{episode_id}/timeline": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Read Episode Timeline */
+    get: operations["read_episode_timeline_api_v1_episodes__episode_id__timeline_get"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/health": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Read Health */
+    get: operations["read_health_api_v1_health_get"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/manifests": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** List Manifests */
+    get: operations["list_manifests_api_v1_manifests_get"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/manifests/{manifest_id}/download": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Download Manifest */
+    get: operations["download_manifest_api_v1_manifests__manifest_id__download_get"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/pipeline": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Read Pipeline */
+    get: operations["read_pipeline_api_v1_pipeline_get"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/pipeline/graph": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /**
+     * Read Pipeline Graph
+     * @description The merged picture: the DAG topology plus the pipeline's user steps.
+     *
+     *     Three degraded states, each explicit rather than an error: no runtime
+     *     addressed (``dag_ids_known: false``, display-only ids), no
+     *     ``--pipeline`` (``steps_known: false``, no user steps and no
+     *     quarantine gate), and both at once -- the common first-run case.
+     */
+    get: operations["read_pipeline_graph_api_v1_pipeline_graph_get"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/queries": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** List Saved Queries */
+    get: operations["list_saved_queries_api_v1_queries_get"];
+    put?: never;
+    /** Create Saved Query */
+    post: operations["create_saved_query_api_v1_queries_post"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/queries/{query_id}": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    /** Update Saved Query */
+    put: operations["update_saved_query_api_v1_queries__query_id__put"];
+    post?: never;
+    /** Delete Saved Query */
+    delete: operations["delete_saved_query_api_v1_queries__query_id__delete"];
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/runtime/ingest": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Trigger Ingest */
+    post: operations["trigger_ingest_api_v1_runtime_ingest_post"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/runtime/runs": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** List Runtime Runs */
+    get: operations["list_runtime_runs_api_v1_runtime_runs_get"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/runtime/runs/{dag_run_id}/graph": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /**
+     * Read Run Graph
+     * @description One master run's live state over the same topology.
+     *
+     *     The master run is addressed directly; each stage's sub-DAG run is
+     *     resolved by the documented heuristic in :func:`_matched_stage_run`.
+     */
+    get: operations["read_run_graph_api_v1_runtime_runs__dag_run_id__graph_get"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v1/runtime/status": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Read Runtime Status */
+    get: operations["read_runtime_status_api_v1_runtime_status_get"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+}
+export type webhooks = Record<string, never>;
+export interface components {
+  schemas: {
+    /**
+     * CatalogTableDescription
+     * @description One browsable catalog relation and its live columns.
+     */
+    CatalogTableDescription: {
+      /** Columns */
+      columns: components["schemas"]["ColumnDescriptor"][];
+      /**
+       * Kind
+       * @enum {string}
+       */
+      kind: "view" | "table";
+      /** Name */
+      name: string;
+    };
+    /**
+     * CatalogTableSummaryResponse
+     * @description One relation's row count and DuckDB's own column profile.
+     */
+    CatalogTableSummaryResponse: {
+      /**
+       * Columns
+       * @description DuckDB SUMMARIZE rows; see CurationPreviewResponse.column_stats.
+       */
+      columns: {
+        [key: string]: unknown;
+      }[];
+      /** Row Count */
+      row_count: number;
+    };
+    /** CatalogTablesResponse */
+    CatalogTablesResponse: {
+      /** Tables */
+      tables: components["schemas"]["CatalogTableDescription"][];
+    };
+    /**
+     * CategoricalColumnStats
+     * @description A low-cardinality column's top values under the current filters.
+     */
+    CategoricalColumnStats: {
+      /**
+       * @description discriminator enum property added by openapi-typescript
+       * @enum {string}
+       */
+      kind: "categorical";
+      /** Name */
+      name: string;
+      /**
+       * Other Count
+       * @description Non-null rows beyond the served top values.
+       */
+      other_count: number;
+      /** Values */
+      values: components["schemas"]["ValueCount"][];
+    };
+    /**
+     * CheckCoverageEntry
+     * @description One check's coverage denominator over the WHOLE catalog, not the cut.
+     *
+     *     Also the sidecar's stored shape, nested inside every stored manifest
+     *     entry's ``coverage`` (see the module note).
+     */
+    CheckCoverageEntry: {
+      /** Check Name */
+      check_name: string;
+      /** Episodes Ran */
+      episodes_ran: number;
+      /** Fraction */
+      fraction: number;
+      /** Total Episodes */
+      total_episodes: number;
+    };
+    /**
+     * ColumnDescriptor
+     * @description One result column as DuckDB's ``DESCRIBE`` reports it.
+     */
+    ColumnDescriptor: {
+      /** Name */
+      name: string;
+      /** Type */
+      type: string;
+    };
+    /**
+     * CurationPreviewResponse
+     * @description A user SELECT's first rows, its full count, and optional column stats.
+     */
+    CurationPreviewResponse: {
+      /**
+       * Column Stats
+       * @description DuckDB SUMMARIZE rows (column_name, column_type, min, max, null_percentage, ...). DuckDB owns that shape and varies it by version, so it is served as-is. Null unless the request asked for stats.
+       */
+      column_stats:
+        | {
+            [key: string]: unknown;
+          }[]
+        | null;
+      /** Columns */
+      columns: components["schemas"]["ColumnDescriptor"][];
+      /**
+       * Row Count
+       * @description Rows the SELECT returns in full, independent of limit.
+       */
+      row_count: number;
+      /**
+       * Rows
+       * @description Rows of the user's own SELECT; its columns are described by 'columns'.
+       */
+      rows: {
+        [key: string]: unknown;
+      }[];
+      /**
+       * Sql
+       * @description The logical wrapped SELECT, copy-pastable as-is. The executed statement adds a '* REPLACE (...)' projection rendering TIMESTAMPTZ columns as UTC ISO text (the locked connection cannot SET TimeZone), which is a rendering detail of these rows rather than part of the query a user wrote.
+       */
+      sql: string;
+      /** Truncated */
+      truncated: boolean;
+    };
+    /**
+     * CurationReportResponse
+     * @description What a cut would contain, and what evidence backs it -- no files written.
+     */
+    CurationReportResponse: {
+      /** Coverage */
+      coverage: components["schemas"]["CheckCoverageEntry"][];
+      /** Row Count */
+      row_count: number;
+      /** Total Episodes */
+      total_episodes: number;
+    };
+    /**
+     * DagTaskNodePayload
+     * @description One task of a generated DAG (mirrors ``hflow.runtime.DagTaskNode``).
+     */
+    DagTaskNodePayload: {
+      /**
+       * Deferred
+       * @description Defers instead of holding a worker slot.
+       */
+      deferred: boolean;
+      /**
+       * Mapped
+       * @description Dynamically mapped: one instance per planned batch.
+       */
+      mapped: boolean;
+      /** Summary */
+      summary: string;
+      /** Task Id */
+      task_id: string;
+    };
+    /**
+     * DagTopologyPayload
+     * @description One DAG's real shape: its tasks and their real dependency edges.
+     */
+    DagTopologyPayload: {
+      /** Dag Id */
+      dag_id: string;
+      /**
+       * Edges
+       * @description [upstream, downstream] task-id pairs, in declaration order.
+       */
+      edges: [string, string][];
+      /** Tasks */
+      tasks: components["schemas"]["DagTaskNodePayload"][];
+    };
+    /**
+     * DossierEpisode
+     * @description The episode's own ``episodes_latest`` row plus the two derived fields.
+     *
+     *     ``extra="allow"``: every column of that row rides along unchanged, because
+     *     the catalog's columns are data this module cannot enumerate.
+     */
+    DossierEpisode: {
+      /**
+       * Quarantine Tags
+       * @description Parsed out of the row's quarantine_tags_json; empty when not quarantined.
+       */
+      quarantine_tags: string[];
+      /**
+       * Status
+       * @enum {string}
+       */
+      status: "ok" | "quarantined";
+    } & {
+      [key: string]: unknown;
+    };
+    /**
+     * EpisodeCheckRunRecord
+     * @description One recorded check invocation.
+     */
+    EpisodeCheckRunRecord: {
+      /** Check Name */
+      check_name: string | null;
+      /** Check Version */
+      check_version: string | null;
+      /** Critical */
+      critical: boolean | null;
+      /** Duration S */
+      duration_s: number | null;
+      /** Error */
+      error: string | null;
+      /** Recorded At */
+      recorded_at: string | null;
+      /** Run Fingerprint */
+      run_fingerprint: string | null;
+      /** Status */
+      status: string | null;
+    };
+    /**
+     * EpisodeDossierResponse
+     * @description Everything the episode page shows for one episode.
+     */
+    EpisodeDossierResponse: {
+      /** Canonical Url */
+      canonical_url: string | null;
+      /** Check Runs */
+      check_runs: components["schemas"]["EpisodeCheckRunRecord"][];
+      episode: components["schemas"]["DossierEpisode"];
+      /**
+       * History
+       * @description Every append of this episode, newest first: raw episodes_raw rows, whose columns are the catalog's (see EpisodePageResponse.rows).
+       */
+      history: {
+        [key: string]: unknown;
+      }[];
+      /** Intervals */
+      intervals: components["schemas"]["EpisodeIntervalRecord"][];
+      /** Measurements */
+      measurements: components["schemas"]["EpisodeMeasurementRecord"][];
+      /** Media */
+      media: components["schemas"]["EpisodeMediaArtifact"][];
+      /** Tags */
+      tags: components["schemas"]["EpisodeTagRecord"][];
+    };
+    /**
+     * EpisodeFacetsResponse
+     * @description Facet value counts over the wide episodes view; NULL buckets skipped.
+     *
+     *     This model is the one owner of WHICH columns are faceted: ``_catalog``
+     *     reads the column list off these fields rather than restating it.
+     */
+    EpisodeFacetsResponse: {
+      /** Embodiment */
+      embodiment: components["schemas"]["ValueCount"][];
+      /** Operator */
+      operator: components["schemas"]["ValueCount"][];
+      /** Pipeline Version */
+      pipeline_version: components["schemas"]["ValueCount"][];
+      /** Status */
+      status: components["schemas"]["ValueCount"][];
+      /** Task */
+      task: components["schemas"]["ValueCount"][];
+    };
+    /**
+     * EpisodeIntervalRecord
+     * @description One interval of the episode's LATEST run.
+     *
+     *     ``check_version`` rides in from that run's ``check_runs`` row (a LEFT
+     *     JOIN -- the intervals table carries no version of its own).
+     */
+    EpisodeIntervalRecord: {
+      /** Check Name */
+      check_name: string | null;
+      /** Check Version */
+      check_version: string | null;
+      /** End Ns */
+      end_ns: number | null;
+      /** Label */
+      label: string | null;
+      /** Start Ns */
+      start_ns: number | null;
+    };
+    /**
+     * EpisodeMeasurementRecord
+     * @description One measurement, latest per key.
+     */
+    EpisodeMeasurementRecord: {
+      /** Check Name */
+      check_name: string | null;
+      /** Check Version */
+      check_version: string | null;
+      /** Key */
+      key: string | null;
+      /** Recorded At */
+      recorded_at: string | null;
+      /** Value Bool */
+      value_bool: boolean | null;
+      /** Value Double */
+      value_double: number | null;
+      /** Value Text */
+      value_text: string | null;
+    };
+    /**
+     * EpisodeMediaArtifact
+     * @description One cataloged media artifact and, when servable, its byte URL.
+     */
+    EpisodeMediaArtifact: {
+      /** Name */
+      name: string;
+      /** Uri */
+      uri: string;
+      /**
+       * Url
+       * @description Same-origin byte-serving path, or null when the cataloged file is missing or lands outside the workspace data root.
+       */
+      url: string | null;
+    };
+    /**
+     * EpisodePageResponse
+     * @description One filtered, ordered page of the wide ``episodes`` view.
+     */
+    EpisodePageResponse: {
+      /** Columns */
+      columns: components["schemas"]["ColumnDescriptor"][];
+      /**
+       * Rows
+       * @description Rows of the wide episodes view. Its columns are data (one per measurement key present at open time), so they are described by 'columns' rather than enumerated here.
+       */
+      rows: {
+        [key: string]: unknown;
+      }[];
+      /**
+       * Sql
+       * @description The SELECT compiled for exactly these filters, with values inlined so it is copy-pastable and runs against the same catalog.
+       */
+      sql: string;
+      /**
+       * Total
+       * @description Rows matching the SAME filters, ignoring limit/offset.
+       */
+      total: number;
+    };
+    /**
+     * EpisodeStatsResponse
+     * @description Per-column mini-distributions; degenerate columns are omitted entirely.
+     */
+    EpisodeStatsResponse: {
+      /** Columns */
+      columns: (
+        | components["schemas"]["NumericColumnStats"]
+        | components["schemas"]["CategoricalColumnStats"]
+      )[];
+    };
+    /**
+     * EpisodeTagRecord
+     * @description One tag of the episode's LATEST run.
+     */
+    EpisodeTagRecord: {
+      /** Check Name */
+      check_name: string | null;
+      /** Recorded At */
+      recorded_at: string | null;
+      /** Tag */
+      tag: string | null;
+    };
+    /**
+     * EpisodeTimelineResponse
+     * @description One episode's time axis. All-null bounds mean the span is unknown --
+     *     a client must say so rather than draw a fabricated axis.
+     */
+    EpisodeTimelineResponse: {
+      /** Duration S */
+      duration_s: number | null;
+      /** End Ns */
+      end_ns: number | null;
+      /** Intervals */
+      intervals: components["schemas"]["TimelineInterval"][];
+      /** Measurements */
+      measurements: components["schemas"]["TimelineMeasurement"][];
+      /** Start Ns */
+      start_ns: number | null;
+    };
+    /** HTTPValidationError */
+    HTTPValidationError: {
+      /** Detail */
+      detail?: components["schemas"]["ValidationError"][];
+    };
+    /**
+     * HealthResponse
+     * @description The liveness answer: the cheapest endpoint a probe can poll.
+     */
+    HealthResponse: {
+      /** Ok */
+      ok: boolean;
+    };
+    /** IngestRequest */
+    IngestRequest: {
+      /** Batch Count */
+      batch_count?: number | null;
+      /**
+       * Mode
+       * @default batch
+       */
+      mode: string;
+      /**
+       * Profile
+       * @default full
+       */
+      profile: string;
+      /** Uris */
+      uris: string[];
+    };
+    /**
+     * IngestTriggerResponse
+     * @description What Airflow answered when the run was triggered.
+     */
+    IngestTriggerResponse: {
+      /** Dag Run Id */
+      dag_run_id: string | null;
+      /** State */
+      state: string | null;
+    };
+    /**
+     * MappedFanOutSummary
+     * @description The fan-out's live split, counted server-side over EVERY mapped instance.
+     *
+     *     Complete on its own: ``by_state`` partitions all ``total`` instances of
+     *     ``task_id`` (an instance Airflow has not scheduled yet counts under
+     *     ``no_status``), so ``total == sum(by_state.values())`` always holds and a
+     *     client never has to recount the raw instances to size or colour the
+     *     fan-out. Only a replay at some earlier instant is a different fact, and
+     *     that one the server cannot answer.
+     */
+    MappedFanOutSummary: {
+      /** By State */
+      by_state: {
+        [key: string]: number;
+      };
+      /** Task Id */
+      task_id: string;
+      /**
+       * Total
+       * @description Instances reported for the mapped task. Before the fan-out expands Airflow reports one unexpanded instance, which is counted -- that is the truth at that moment.
+       */
+      total: number;
+    };
+    /**
+     * NumericColumnStats
+     * @description A numeric column's mini-distribution under the current filters.
+     */
+    NumericColumnStats: {
+      /** Buckets */
+      buckets: components["schemas"]["NumericHistogramBucket"][];
+      /**
+       * @description discriminator enum property added by openapi-typescript
+       * @enum {string}
+       */
+      kind: "numeric";
+      /** Name */
+      name: string;
+    };
+    /**
+     * NumericHistogramBucket
+     * @description One histogram bucket: ``lo`` inclusive, ``hi`` inclusive on the last.
+     */
+    NumericHistogramBucket: {
+      /** Count */
+      count: number;
+      /** Hi */
+      hi: number;
+      /** Lo */
+      lo: number;
+    };
+    /**
+     * ObservedCheckVersion
+     * @description What the catalog has SEEN of one (check, version) pair.
+     */
+    ObservedCheckVersion: {
+      /** Check Name */
+      check_name: string | null;
+      /** Check Version */
+      check_version: string | null;
+      /** First Seen */
+      first_seen: string | null;
+      /** Last Seen */
+      last_seen: string | null;
+      /** Run Count */
+      run_count: number;
+    };
+    /** PinRequest */
+    PinRequest: {
+      /**
+       * Description
+       * @default
+       */
+      description: string;
+      /** Name */
+      name: string;
+      /** Sql */
+      sql: string;
+    };
+    /**
+     * PinnedManifestEntry
+     * @description One registry entry for an immutable pinned manifest file.
+     *
+     *     Also the sidecar's stored shape for a manifest (see the module note).
+     */
+    PinnedManifestEntry: {
+      /**
+       * Coverage
+       * @description Frozen at pin time.
+       */
+      coverage: components["schemas"]["CheckCoverageEntry"][];
+      /**
+       * Created At
+       * @description ISO-8601 UTC.
+       */
+      created_at: string;
+      /** Description */
+      description: string;
+      /** Id */
+      id: string;
+      /**
+       * Manifest Path
+       * @description Data-root-relative, e.g. 'manifests/<slug>-<utc timestamp>.parquet'.
+       */
+      manifest_path: string;
+      /** Name */
+      name: string;
+      /** Row Count */
+      row_count: number;
+      /** Sql */
+      sql: string;
+      /** Total Episodes */
+      total_episodes: number;
+    };
+    /** PinnedManifestListResponse */
+    PinnedManifestListResponse: {
+      /** Manifests */
+      manifests: components["schemas"]["PinnedManifestEntry"][];
+    };
+    /**
+     * PipelineEngineStep
+     * @description Engine work inside one stage that no manifest lists.
+     */
+    PipelineEngineStep: {
+      /** Name */
+      name: string;
+      /** Summary */
+      summary: string;
+    };
+    /**
+     * PipelineGraphResponse
+     * @description The ingest DAG's shape merged with the pipeline's own steps.
+     */
+    PipelineGraphResponse: {
+      /**
+       * Dag Ids Known
+       * @description False when no runtime is addressed: the dag ids are display-only.
+       */
+      dag_ids_known: boolean;
+      master: components["schemas"]["DagTopologyPayload"];
+      /** @description Null exactly when steps_known is false. */
+      quarantine_gate: components["schemas"]["QuarantineGate"] | null;
+      /** Stages */
+      stages: components["schemas"]["PipelineGraphStage"][];
+      /**
+       * Steps Known
+       * @description False without --pipeline: what runs inside process_batch is unknown.
+       */
+      steps_known: boolean;
+    };
+    /**
+     * PipelineGraphStage
+     * @description One stage lane of the pipeline graph: its DAG plus what runs inside it.
+     */
+    PipelineGraphStage: {
+      dag: components["schemas"]["DagTopologyPayload"];
+      /** Description */
+      description: string;
+      /** Enabling Profiles */
+      enabling_profiles: string[];
+      /** Engine Steps */
+      engine_steps: components["schemas"]["PipelineEngineStep"][];
+      /** Gate Task Id */
+      gate_task_id: string;
+      stage: components["schemas"]["Stage"];
+      /** Title */
+      title: string;
+      /** Trigger Task Id */
+      trigger_task_id: string;
+      /** User Steps */
+      user_steps: components["schemas"]["PipelineUserStep"][];
+    };
+    /**
+     * PipelineResponse
+     * @description The startup-imported App, described over this workspace's catalog.
+     */
+    PipelineResponse: {
+      /**
+       * Manifest
+       * @description The pipeline manifest exactly as hflow.manifest.PipelineManifest renders it. hflow.manifest owns that shape and stamps it with 'manifest_version', so it is forwarded rather than mirrored here.
+       */
+      manifest: {
+        [key: string]: unknown;
+      };
+      /** Observed */
+      observed: components["schemas"]["ObservedCheckVersion"][];
+      /** @description Null when staleness is unknowable (no catalog yet). */
+      stale: components["schemas"]["StaleSummary"] | null;
+    };
+    /**
+     * PipelineUserStep
+     * @description A registered step as the graph endpoint serves it.
+     *
+     *     ``tier`` mirrors ``hflow.App._ordered_checks``: tier 2 is exactly the steps
+     *     declaring ``requires`` or ``uses``. Steps within a tier have NO ordering.
+     */
+    PipelineUserStep: {
+      /** Critical */
+      critical: boolean;
+      kind: components["schemas"]["StepKind"];
+      /** Name */
+      name: string;
+      /** Requires */
+      requires: string[];
+      /**
+       * Tier
+       * @enum {integer}
+       */
+      tier: 1 | 2;
+      /** Uses */
+      uses: string | null;
+      /**
+       * Version
+       * @description Content hash of the live function.
+       */
+      version: string;
+    };
+    /** PreviewRequest */
+    PreviewRequest: {
+      /**
+       * Limit
+       * @default 100
+       */
+      limit: number;
+      /** Sql */
+      sql: string;
+      /**
+       * Stats
+       * @default false
+       */
+      stats: boolean;
+    };
+    /**
+     * QuarantineGate
+     * @description The one real cross-step edge, served as its own object rather than as
+     *     an edge in either graph.
+     */
+    QuarantineGate: {
+      /** Critical Step Names */
+      critical_step_names: string[];
+      /** Explanation */
+      explanation: string;
+      from_stage: components["schemas"]["Stage"];
+      /** To Stages */
+      to_stages: components["schemas"]["Stage"][];
+    };
+    /** ReportRequest */
+    ReportRequest: {
+      /** Sql */
+      sql: string;
+    };
+    /**
+     * RunGraphMaster
+     * @description The master run's own live state.
+     */
+    RunGraphMaster: {
+      /** Dag Run Id */
+      dag_run_id: string;
+      /** State */
+      state: string | null;
+      /** Tasks */
+      tasks: components["schemas"]["RunTaskInstance"][];
+    };
+    /**
+     * RunGraphResponse
+     * @description One master run's live state over the ingest topology.
+     */
+    RunGraphResponse: {
+      master: components["schemas"]["RunGraphMaster"];
+      /** Stages */
+      stages: components["schemas"]["RunGraphStage"][];
+    };
+    /**
+     * RunGraphStage
+     * @description One stage's live state for this master run, or explicit nulls when the
+     *     stage never ran for it.
+     */
+    RunGraphStage: {
+      /** Dag Id */
+      dag_id: string;
+      /** Dag Run Id */
+      dag_run_id: string | null;
+      mapped_summary: components["schemas"]["MappedFanOutSummary"] | null;
+      /**
+       * Match
+       * @description How this stage run was attributed to the master run. Airflow stores no parent-run link, so the only honest answer is 'heuristic' -- the earliest stage run started inside this master run's own window -- or null (nothing matched). Two master runs OVERLAPPING in time can still be attributed the same stage run.
+       */
+      match: "heuristic" | null;
+      stage: components["schemas"]["Stage"];
+      /** State */
+      state: string | null;
+      /** Tasks */
+      tasks: components["schemas"]["RunTaskInstance"][];
+    };
+    /**
+     * RunTaskInstance
+     * @description One Airflow task instance, reduced to what the graph draws.
+     */
+    RunTaskInstance: {
+      /** Duration S */
+      duration_s: number | null;
+      /** End Date */
+      end_date: string | null;
+      /**
+       * Map Index
+       * @description -1 means the task is not mapped.
+       */
+      map_index: number;
+      /**
+       * Queued At
+       * @description When the scheduler queued the task, so a replay can tell 'waiting for a worker' from 'running'. Airflow may omit it.
+       */
+      queued_at: string | null;
+      /** Start Date */
+      start_date: string | null;
+      /** State */
+      state: string | null;
+      /** Task Id */
+      task_id: string | null;
+      /** Try Number */
+      try_number: number | null;
+    };
+    /**
+     * RuntimeHealthComponents
+     * @description Airflow's per-component health.
+     *
+     *     This model is the one owner of WHICH components /runtime/status reports:
+     *     ``_runtime`` reads the names off these fields. A component absent from the
+     *     deployment (a minimal stack runs no triggerer) reports null.
+     */
+    RuntimeHealthComponents: {
+      /** Dag Processor */
+      dag_processor: string | null;
+      /** Metadatabase */
+      metadatabase: string | null;
+      /** Scheduler */
+      scheduler: string | null;
+      /** Triggerer */
+      triggerer: string | null;
+    };
+    /**
+     * RuntimeRunSummary
+     * @description One master DAG run, reduced to what the Runs page shows.
+     */
+    RuntimeRunSummary: {
+      /**
+       * Conf
+       * @description The trigger's own input, forwarded verbatim.
+       */
+      conf: {
+        [key: string]: unknown;
+      };
+      /** Dag Run Id */
+      dag_run_id: string | null;
+      /** End Date */
+      end_date: string | null;
+      /** Logical Date */
+      logical_date: string | null;
+      /** Start Date */
+      start_date: string | null;
+      /** State */
+      state: string | null;
+    };
+    /** RuntimeRunsResponse */
+    RuntimeRunsResponse: {
+      /** Runs */
+      runs: components["schemas"]["RuntimeRunSummary"][];
+      /**
+       * Stages
+       * @description Per-stage recent runs; null for a remote runtime, whose stage sub-DAG ids only a bundle manifest records.
+       */
+      stages: components["schemas"]["StageRecentRuns"][] | null;
+    };
+    /**
+     * RuntimeStatusResponse
+     * @description Whether this workspace's ingest runtime is addressed AND answering.
+     *
+     *     Every field except ``available`` defaults to "not known", so an
+     *     unavailable answer states only the facts it actually has -- there is no
+     *     second hand-written shape for the unavailable case to drift from.
+     */
+    RuntimeStatusResponse: {
+      /**
+       * Airflow Web Url
+       * @description Deep-link base for the Airflow web UI, AS ADDRESSED FROM THE WORKSPACE HOST. Only a local bundle records its own address; a remote endpoint's is unknown, never guessed.
+       */
+      airflow_web_url?: string | null;
+      /**
+       * Airflow Web Url Host Only
+       * @description True when airflow_web_url is a loopback address, so it resolves only on the workspace host: a browser on another machine cannot follow it, and the runtime is reachable there only through a tunnel or a wider `hflow up --api-bind-host`.
+       * @default false
+       */
+      airflow_web_url_host_only: boolean;
+      /** Available */
+      available: boolean;
+      /** Dag Id */
+      dag_id?: string | null;
+      /**
+       * Detail
+       * @description Why the runtime is unavailable; null when it is available.
+       */
+      detail?: string | null;
+      health?: components["schemas"]["RuntimeHealthComponents"] | null;
+      /**
+       * Registered
+       * @description Whether the master DAG is registered. Null means unknown (an auth or transient failure), which is not the same as false.
+       */
+      registered?: boolean | null;
+      /** Source */
+      source?: ("bundle" | "remote") | null;
+    };
+    /** SavedQueryCreateRequest */
+    SavedQueryCreateRequest: {
+      /** Name */
+      name: string;
+      /** Sql */
+      sql: string;
+    };
+    /**
+     * SavedQueryEntry
+     * @description One saved studio query.
+     *
+     *     Also the sidecar's stored shape for a saved query (see the module note).
+     */
+    SavedQueryEntry: {
+      /** Id */
+      id: string;
+      /** Name */
+      name: string;
+      /** Sql */
+      sql: string;
+      /**
+       * Updated At
+       * @description ISO-8601 UTC.
+       */
+      updated_at: string;
+    };
+    /** SavedQueryListResponse */
+    SavedQueryListResponse: {
+      /** Queries */
+      queries: components["schemas"]["SavedQueryEntry"][];
+    };
+    /** SavedQueryUpdateRequest */
+    SavedQueryUpdateRequest: {
+      /** Name */
+      name?: string | null;
+      /** Sql */
+      sql?: string | null;
+    };
+    /**
+     * Stage
+     * @description The ingest stage graph's toggleable sub-DAGs, as stage names shared with the DAGs.
+     *
+     *     These strings are conf vocabulary: the master DAG resolves a run profile
+     *     to a stage set and triggers only the sub-DAGs it names, and
+     *     ``App.process(stages=...)`` runs the same set in-process. One owner --
+     *     here -- so the runner and the DAG bundle can never disagree.
+     * @enum {string}
+     */
+    Stage: "sync" | "meta" | "labels" | "media";
+    /**
+     * StageRecentRuns
+     * @description One stage's most recent runs. NOT correlated with any master run.
+     */
+    StageRecentRuns: {
+      /** Dag Id */
+      dag_id: string;
+      /** Recent */
+      recent: components["schemas"]["StageRunSummary"][];
+      stage: components["schemas"]["Stage"];
+    };
+    /**
+     * StageRunSummary
+     * @description One stage sub-DAG run in a stage's recent strip.
+     */
+    StageRunSummary: {
+      /** Dag Run Id */
+      dag_run_id: string | null;
+      /** End Date */
+      end_date: string | null;
+      /** Start Date */
+      start_date: string | null;
+      /** State */
+      state: string | null;
+    };
+    /**
+     * StaleSummary
+     * @description How many recorded episodes are stale against the App's current versions.
+     */
+    StaleSummary: {
+      /** Count */
+      count: number;
+      /** Pipeline Version */
+      pipeline_version: string;
+    };
+    /**
+     * StepKind
+     * @description Which registration surface a step came from.
+     * @enum {string}
+     */
+    StepKind: "check" | "enrichment";
+    /**
+     * TimelineInterval
+     * @description One interval placed on the episode's axis, in absolute ns and in
+     *     seconds RELATIVE to the span start (both computed server-side).
+     */
+    TimelineInterval: {
+      /** Check Name */
+      check_name: string | null;
+      /** End Ns */
+      end_ns: number | null;
+      /** End S */
+      end_s: number | null;
+      /**
+       * Kind
+       * @description Colour group: the label's '<kind>:<topic>' prefix, else the whole label, else the check that produced it.
+       */
+      kind: string;
+      /** Label */
+      label: string | null;
+      /** Start Ns */
+      start_ns: number | null;
+      /** Start S */
+      start_s: number | null;
+    };
+    /**
+     * TimelineMeasurement
+     * @description One numeric measurement, ready to draw as a bar.
+     */
+    TimelineMeasurement: {
+      /** Key */
+      key: string;
+      /**
+       * Unit
+       * @description Inferred from the key's unit suffix; null when no dimension is known.
+       */
+      unit: string | null;
+      /** Value */
+      value: number;
+    };
+    /** ValidationError */
+    ValidationError: {
+      /** Context */
+      ctx?: Record<string, never>;
+      /** Input */
+      input?: unknown;
+      /** Location */
+      loc: (string | number)[];
+      /** Message */
+      msg: string;
+      /** Error Type */
+      type: string;
+    };
+    /**
+     * ValueCount
+     * @description One value and how many episodes carry it.
+     */
+    ValueCount: {
+      /** Count */
+      count: number;
+      /** Value */
+      value: string;
+    };
+    /**
+     * WorkspaceCapabilities
+     * @description What this launch can actually do over this data root.
+     *
+     *     ``runtime`` means ADDRESSED (a rendered bundle or an exported remote URL),
+     *     not reachable -- /runtime/status owns liveness.
+     */
+    WorkspaceCapabilities: {
+      /** Catalog */
+      catalog: boolean;
+      /**
+       * Curation
+       * @description Whether the curation studio's durable state can be written at all: saved queries, the pinned-manifest registry, and the manifest files need a LOCAL data root, so a bucket-backed workspace answers 501 for every one of them and the frontend should not offer them.
+       */
+      curation: boolean;
+      /** Media */
+      media: boolean;
+      /** Pipeline */
+      pipeline: boolean;
+      /** Runtime */
+      runtime: boolean;
+    };
+    /**
+     * WorkspaceConfigResponse
+     * @description What this server is serving, and what the frontend may offer.
+     *
+     *     Deliberately carries no Airflow deep-link base: /runtime/status is the one
+     *     owner of the runtime's addressing facts, including its web URL.
+     */
+    WorkspaceConfigResponse: {
+      capabilities: components["schemas"]["WorkspaceCapabilities"];
+      /** Data Root */
+      data_root: string;
+      /** Hflow Server Version */
+      hflow_server_version: string;
+      /** Hflow Version */
+      hflow_version: string;
+      /**
+       * Ingest Modes
+       * @description Live ingest modes from hflow.steps.IngestMode; same contract as run_profiles.
+       */
+      ingest_modes: string[];
+      /**
+       * Mode
+       * @constant
+       */
+      mode: "local";
+      /** Read Only */
+      read_only: boolean;
+      /**
+       * Run Profiles
+       * @description Live run-profile names from hflow.steps.RUN_PROFILES, served so the frontend never hardcodes them.
+       */
+      run_profiles: string[];
+      /** Workspace Id */
+      workspace_id: string | null;
+    };
+  };
+  responses: never;
+  parameters: never;
+  requestBodies: never;
+  headers: never;
+  pathItems: never;
+}
+export type $defs = Record<string, never>;
+export interface operations {
+  list_catalog_tables_api_v1_catalog_tables_get: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CatalogTablesResponse"];
+        };
+      };
+    };
+  };
+  read_catalog_table_summary_api_v1_catalog_tables__table_name__summary_get: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        table_name: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CatalogTableSummaryResponse"];
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  read_config_api_v1_config_get: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["WorkspaceConfigResponse"];
+        };
+      };
+    };
+  };
+  pin_manifest_api_v1_curation_pin_post: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["PinRequest"];
+      };
+    };
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["PinnedManifestEntry"];
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  run_curation_preview_api_v1_curation_preview_post: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["PreviewRequest"];
+      };
+    };
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CurationPreviewResponse"];
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  run_curation_report_api_v1_curation_report_post: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["ReportRequest"];
+      };
+    };
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CurationReportResponse"];
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  list_episodes_api_v1_episodes_get: {
+    parameters: {
+      query?: {
+        order_by?: string;
+        order?: "asc" | "desc";
+        limit?: number;
+        offset?: number;
+        task?: string[] | null;
+        operator?: string[] | null;
+        embodiment?: string[] | null;
+        status?: ("ok" | "quarantined") | null;
+        success?: ("true" | "false") | null;
+        search?: string | null;
+      };
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["EpisodePageResponse"];
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  read_episode_facets_api_v1_episodes_facets_get: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["EpisodeFacetsResponse"];
+        };
+      };
+    };
+  };
+  read_episode_stats_api_v1_episodes_stats_get: {
+    parameters: {
+      query?: {
+        task?: string[] | null;
+        operator?: string[] | null;
+        embodiment?: string[] | null;
+        status?: ("ok" | "quarantined") | null;
+        success?: ("true" | "false") | null;
+        search?: string | null;
+      };
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["EpisodeStatsResponse"];
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  read_episode_api_v1_episodes__episode_id__get: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        episode_id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["EpisodeDossierResponse"];
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  read_episode_canonical_api_v1_episodes__episode_id__canonical_get: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        episode_id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description The file's bytes. An allowlisted inert media type (image, audio, video) is served inline under its own content type; anything else -- and every download -- is opaque application/octet-stream. */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/octet-stream": string;
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  read_episode_media_api_v1_episodes__episode_id__media__artifact_name__get: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        episode_id: string;
+        artifact_name: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description The file's bytes. An allowlisted inert media type (image, audio, video) is served inline under its own content type; anything else -- and every download -- is opaque application/octet-stream. */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/octet-stream": string;
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  read_episode_timeline_api_v1_episodes__episode_id__timeline_get: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        episode_id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["EpisodeTimelineResponse"];
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  read_health_api_v1_health_get: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["HealthResponse"];
+        };
+      };
+    };
+  };
+  list_manifests_api_v1_manifests_get: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["PinnedManifestListResponse"];
+        };
+      };
+    };
+  };
+  download_manifest_api_v1_manifests__manifest_id__download_get: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        manifest_id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description The file's bytes. An allowlisted inert media type (image, audio, video) is served inline under its own content type; anything else -- and every download -- is opaque application/octet-stream. */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/octet-stream": string;
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  read_pipeline_api_v1_pipeline_get: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["PipelineResponse"];
+        };
+      };
+    };
+  };
+  read_pipeline_graph_api_v1_pipeline_graph_get: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["PipelineGraphResponse"];
+        };
+      };
+    };
+  };
+  list_saved_queries_api_v1_queries_get: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["SavedQueryListResponse"];
+        };
+      };
+    };
+  };
+  create_saved_query_api_v1_queries_post: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["SavedQueryCreateRequest"];
+      };
+    };
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["SavedQueryEntry"];
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  update_saved_query_api_v1_queries__query_id__put: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        query_id: string;
+      };
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["SavedQueryUpdateRequest"];
+      };
+    };
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["SavedQueryEntry"];
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  delete_saved_query_api_v1_queries__query_id__delete: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        query_id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description Successful Response */
+      204: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      /** @description Validation Error */
+      422: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  trigger_ingest_api_v1_runtime_ingest_post: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["IngestRequest"];
+      };
+    };
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["IngestTriggerResponse"];
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  list_runtime_runs_api_v1_runtime_runs_get: {
+    parameters: {
+      query?: {
+        limit?: number;
+      };
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["RuntimeRunsResponse"];
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  read_run_graph_api_v1_runtime_runs__dag_run_id__graph_get: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        dag_run_id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["RunGraphResponse"];
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  read_runtime_status_api_v1_runtime_status_get: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description Successful Response */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["RuntimeStatusResponse"];
+        };
+      };
+    };
+  };
+}
diff --git a/ui/src/components/BrandMark.tsx b/ui/src/components/BrandMark.tsx
new file mode 100644
index 00000000..45234481
--- /dev/null
+++ b/ui/src/components/BrandMark.tsx
@@ -0,0 +1,71 @@
+import { useId } from "react";
+
+// The company mark — the one glyph in the app that does not come from
+// lucide-react, because this is an identity, not an icon from a set.
+//
+// SOURCE OF TRUTH for the artwork: docs/assets/hebbian-logo-on-black.svg.
+// The five path strings below are copied verbatim from that file, and the
+// favicon in index.html carries the same five. Re-cut the logo there and all
+// three change together.
+//
+// Two deliberate departures from that file, both so the mark works as an app
+// glyph rather than as a 1024px artboard:
+//
+//   * the black background rect is dropped and the paths take `currentColor`,
+//     so the mark is accent-on-surface in light and in dark instead of a black
+//     tile punched into the rail;
+//   * the viewBox is the glyph's own bounding box, not the artboard's, so the
+//     mark fills its box instead of floating small in a mostly-empty square.
+//     The artboard draws the group at translate(274.13 212) scale(4.347826);
+//     dropping that is safe, since a uniform scale plus a translate is exactly
+//     what a viewBox change undoes. In the paths' own units the bounds solve
+//     to x 1.800..107.811, y -0.225..137.380 — from the cubic-Bézier extrema,
+//     not from sampling or from eyeballing the artboard — and the box below is
+//     those bounds rounded outward to 2dp.
+//
+// The glyph is TALLER THAN IT IS WIDE (0.77 : 1), so it cannot take the square
+// `.lucide` sizing the rest of the icons use; `.brand-mark` in styles.css sizes
+// it by height and lets the width follow from this aspect ratio.
+
+/** Verbatim from docs/assets/hebbian-logo-on-black.svg — see the note above. */
+const GLYPH_PATHS: readonly string[] = [
+  "m24.3 68v-61c-0.2-3.5-3.1-6.5-6.3-7-1.9-0.3-6.3-0.3-8.6 0-2.5 0.2-4 1-5.4 2.6-1.8 2.1-2.2 3.6-2.2 7.4v114.2 2.4c0.1 4.1 0.2 5.2 1.4 7.1s3 3.3 5.3 3.6 6.9-0.3 9.2-0.9c2.7-0.6 5.5-2.7 6.3-5.9 0.5-2.4 0.3-0.9 0.3-62.5z",
+  "m99.9 1.7c-1.7-0.1-5.3-0.1-7.5 0.2-3.1 0.5-5.9 3.1-6.3 6.3-0.2 1.7-1.2 59.2-1.2 59.8l0.1 58.9c0.1 2.6 0.1 4 1.3 5.9 1.3 2 3.2 3.3 5.6 3.7 2.3 0.3 6.5 0.4 9.1 0.1 2.8-0.4 5.7-2.5 6.5-5.6 0.4-1.6 0.3-4.4 0.3-6.5v-112.1c0-3.4-0.1-5.4-1.3-7-1.2-2-3.6-3.5-6.6-3.7z",
+  "m44 16.2c-0.6 1.6-0.6 3.5-0.6 6.8v15c0.1 4.4 0.1 6 1.6 8s3.1 3.4 5.5 3.7c1.8 0.3 6.4 0.4 8.5 0.1 3.3-0.4 6.2-3 6.7-6.2 0.2-1.5 0.2-2.4 0.2-6.1l-0.1-16.5c0-3.6-0.4-5.1-2.2-7.1-1.1-1.2-2.8-2.4-5.1-2.7-1.4-0.2-5.5-0.2-7.5 0-3.1 0.2-6 2.3-7 5z",
+  "m68.8 58.5c-1.7-0.3-3.8-0.4-6.2-0.4h-17.7c-1.3 0-3 0.1-4.1 0.3-2.8 1-5.2 3.6-5.5 6.7-0.2 1.7-0.2 5.9 0.1 8.4 0.5 2.9 2.4 4.9 5.4 6.2 1.4 0.2 3.2 0.4 4.2 0.4h19.6c1.7 0 2.3 0 4.5-0.3 2.7-0.8 5-3.3 5.5-6.3 0.2-1.9 0.1-6.9-0.4-9.5-0.8-3-3.2-4.8-5.4-5.5z",
+  "m59.4 88c-1.8-0.3-6.9-0.4-9.1 0-2.9 0.6-5.4 2.8-6.2 5.8-0.4 1.8-0.3 4.3-0.3 8.2v11.7c0 4.9 0 7.7 1.3 9.5 1.2 1.9 2.8 3.4 5.4 3.8 1.6 0.3 6.7 0.3 8.4 0 2.6-0.3 4.8-1.9 5.8-3.9 1.2-1.7 1.1-4.5 1.1-8.5v-15.2c0-2.5 0-4.8-0.5-6.1-0.9-2.8-3.4-4.9-5.9-5.3z",
+];
+
+/** The glyph's own bounds, rounded outward — see the note above. */
+const GLYPH_VIEW_BOX = "1.79 -0.23 106.03 137.62";
+
+export function BrandMark({
+  className = "brand-mark",
+  title = "Hebbian Robotics",
+}: {
+  className?: string;
+  /**
+   * Accessible name for the mark. This is a company logo, not decoration, so
+   * it is always named — the default is who the logo belongs to.
+   */
+  title?: string;
+}) {
+  // useId, so one <title> node is both the accessible name and the hover
+  // tooltip, rather than an aria-label repeating it a second time.
+  const titleId = useId();
+  return (
+    <svg
+      className={className}
+      viewBox={GLYPH_VIEW_BOX}
+      fill="currentColor"
+      role="img"
+      aria-labelledby={titleId}
+      focusable="false"
+    >
+      <title id={titleId}>{title}</title>
+      {GLYPH_PATHS.map((path) => (
+        <path key={path} d={path} />
+      ))}
+    </svg>
+  );
+}
diff --git a/ui/src/components/CatalogTree.tsx b/ui/src/components/CatalogTree.tsx
new file mode 100644
index 00000000..98464fe1
--- /dev/null
+++ b/ui/src/components/CatalogTree.tsx
@@ -0,0 +1,212 @@
+import { useQuery } from "@tanstack/react-query";
+import { ChevronDown, Plus, X } from "lucide-react";
+import { useState } from "react";
+import { type CatalogTable, fetchCatalogTableSummary } from "../api";
+import { summarizeValueText } from "../format";
+import { EmptyPanel, ErrorPanel, LoadingPanel } from "./QueryStates";
+
+// Left pane of the studio: the registered catalog views with expandable
+// columns, plus a per-table profile (row count + SUMMARIZE) on click.
+
+const SUMMARY_PROFILE_KEYS = ["min", "max", "approx_unique", "null_percentage"] as const;
+
+const PLAIN_SQL_IDENTIFIER_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/;
+
+/** What click-to-insert puts in the editor: quoted unless the name is a plain
+ * identifier — the wide episodes view pivots measurement keys into columns,
+ * and those keys are arbitrary strings (e.g. "artifact/wrist_cam"), which
+ * DuckDB would otherwise parse as a division of two unknown columns. */
+function insertableSqlIdentifier(name: string): string {
+  return PLAIN_SQL_IDENTIFIER_PATTERN.test(name) ? name : `"${name.replaceAll('"', '""')}"`;
+}
+
+function TableSummarySection({
+  tableName,
+  onDeselect,
+}: {
+  tableName: string;
+  onDeselect: () => void;
+}) {
+  const summaryQuery = useQuery({
+    queryKey: ["table-summary", tableName],
+    queryFn: () => fetchCatalogTableSummary(tableName),
+  });
+  return (
+    <section className="table-summary" aria-label={`Summary of ${tableName}`}>
+      <header className="table-summary-header">
+        <h3 className="facet-label table-summary-title" title={tableName}>
+          {tableName}
+        </h3>
+        <button
+          type="button"
+          className="btn btn-ghost btn-tiny"
+          onClick={onDeselect}
+          title="Close summary"
+          aria-label={`Close summary of ${tableName}`}
+        >
+          <X />
+        </button>
+      </header>
+      {summaryQuery.isPending ? (
+        <LoadingPanel label="Profiling…" />
+      ) : summaryQuery.isError ? (
+        <ErrorPanel
+          error={summaryQuery.error}
+          onRetry={() => {
+            void summaryQuery.refetch();
+          }}
+        />
+      ) : (
+        <>
+          <p className="table-summary-rowcount">
+            <span className="cell-num">{summaryQuery.data.row_count}</span> rows
+          </p>
+          <div className="table-overflow">
+            <table className="evidence-table summary-table">
+              <thead>
+                <tr>
+                  <th>column</th>
+                  {SUMMARY_PROFILE_KEYS.map((key) => (
+                    <th key={key}>{key.replaceAll("_", " ")}</th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {summaryQuery.data.columns.map((summarizeRow) => {
+                  const columnName = summarizeValueText(summarizeRow.column_name);
+                  return (
+                    <tr key={columnName}>
+                      <td
+                        className="cell-mono"
+                        title={summarizeValueText(summarizeRow.column_type)}
+                      >
+                        {columnName}
+                      </td>
+                      {SUMMARY_PROFILE_KEYS.map((key) => {
+                        const valueText = summarizeValueText(summarizeRow[key]);
+                        return (
+                          <td key={key} className="cell-num" title={valueText}>
+                            {valueText}
+                          </td>
+                        );
+                      })}
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </>
+      )}
+    </section>
+  );
+}
+
+export function CatalogTree({
+  tables,
+  isPending,
+  error,
+  onRetry,
+  onInsertText,
+}: {
+  tables: CatalogTable[] | undefined;
+  isPending: boolean;
+  error: unknown;
+  onRetry: () => void;
+  onInsertText: (text: string) => void;
+}) {
+  const [expandedTableNames, setExpandedTableNames] = useState<ReadonlySet<string>>(new Set());
+  const [selectedTableName, setSelectedTableName] = useState<string | null>(null);
+
+  const toggleExpanded = (tableName: string) => {
+    setExpandedTableNames((previous) => {
+      const next = new Set(previous);
+      if (next.has(tableName)) next.delete(tableName);
+      else next.add(tableName);
+      return next;
+    });
+  };
+
+  return (
+    <aside className="catalog-pane" aria-label="Catalog tables">
+      <h3 className="facet-label">Catalog</h3>
+      <div className="catalog-scroll">
+        {isPending ? (
+          <LoadingPanel label="Loading catalog…" />
+        ) : error ? (
+          <ErrorPanel error={error} onRetry={onRetry} />
+        ) : (tables ?? []).length === 0 ? (
+          <EmptyPanel
+            title="No catalog views."
+            hint="Ingest episodes first — the registered views appear here."
+          />
+        ) : (
+          <ul className="catalog-list">
+            {(tables ?? []).map((table) => {
+              const isExpanded = expandedTableNames.has(table.name);
+              const isSelected = selectedTableName === table.name;
+              return (
+                <li key={table.name}>
+                  <div className="catalog-row">
+                    <button
+                      type="button"
+                      className="tree-toggle"
+                      onClick={() => toggleExpanded(table.name)}
+                      aria-expanded={isExpanded}
+                      aria-label={`${isExpanded ? "Collapse" : "Expand"} columns of ${table.name}`}
+                    >
+                      <ChevronDown className={isExpanded ? "chevron is-open" : "chevron"} />
+                    </button>
+                    <button
+                      type="button"
+                      className={isSelected ? "catalog-name is-selected" : "catalog-name"}
+                      onClick={() => setSelectedTableName(isSelected ? null : table.name)}
+                      title={`Profile ${table.name} (row count + column summary)`}
+                    >
+                      {table.name}
+                    </button>
+                    <span className="catalog-kind">{table.kind}</span>
+                    <button
+                      type="button"
+                      className="btn btn-ghost btn-tiny insert-btn"
+                      onClick={() => onInsertText(insertableSqlIdentifier(table.name))}
+                      title={`Insert "${table.name}" into the editor`}
+                      aria-label={`Insert ${table.name} into the editor`}
+                    >
+                      <Plus />
+                    </button>
+                  </div>
+                  {isExpanded ? (
+                    <ul className="catalog-columns">
+                      {table.columns.map((column) => (
+                        <li key={column.name}>
+                          <button
+                            type="button"
+                            className="catalog-column"
+                            onClick={() => onInsertText(insertableSqlIdentifier(column.name))}
+                            title={`${column.type} — insert "${column.name}" into the editor`}
+                          >
+                            <span className="catalog-column-name">{column.name}</span>
+                            <span className="catalog-column-type">{column.type}</span>
+                          </button>
+                        </li>
+                      ))}
+                    </ul>
+                  ) : null}
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </div>
+      {selectedTableName ? (
+        <TableSummarySection
+          tableName={selectedTableName}
+          onDeselect={() => setSelectedTableName(null)}
+        />
+      ) : (
+        <p className="catalog-hint">Click a table name to profile it.</p>
+      )}
+    </aside>
+  );
+}
diff --git a/ui/src/components/ColumnStatsPanel.tsx b/ui/src/components/ColumnStatsPanel.tsx
new file mode 100644
index 00000000..6bb5e016
--- /dev/null
+++ b/ui/src/components/ColumnStatsPanel.tsx
@@ -0,0 +1,70 @@
+import type { SummarizeRow } from "../api";
+import { summarizeValueText } from "../format";
+import { EmptyPanel } from "./QueryStates";
+
+// One card per result column, straight from the server's SUMMARIZE rows.
+// The key set is whatever DuckDB emitted; nothing is derived client-side.
+
+function statLabel(key: string): string {
+  return key.replaceAll("_", " ");
+}
+
+function StatCard({ statsRow }: { statsRow: SummarizeRow }) {
+  const columnName = summarizeValueText(statsRow.column_name);
+  const columnType = summarizeValueText(statsRow.column_type);
+  const detailEntries = Object.entries(statsRow).filter(
+    ([key]) => key !== "column_name" && key !== "column_type",
+  );
+  return (
+    <article className="stat-card">
+      <header className="stat-card-header">
+        <span className="stat-card-name" title={columnName}>
+          {columnName}
+        </span>
+        <span className="stat-card-type">{columnType}</span>
+      </header>
+      <dl className="stat-grid">
+        {detailEntries.map(([key, value]) => {
+          const valueText = summarizeValueText(value);
+          return (
+            <div key={key} className="stat-pair">
+              <dt className="stat-key">{statLabel(key)}</dt>
+              <dd className="stat-value" title={valueText}>
+                {valueText}
+              </dd>
+            </div>
+          );
+        })}
+      </dl>
+    </article>
+  );
+}
+
+/**
+ * The toggleable right pane of the studio. `stats` is undefined before any
+ * preview ran, null when the last preview ran with stats off.
+ */
+export function ColumnStatsPanel({ stats }: { stats: SummarizeRow[] | null | undefined }) {
+  return (
+    <aside className="curate-stats" aria-label="Column stats">
+      <h3 className="facet-label">Column stats</h3>
+      {stats === undefined ? (
+        <EmptyPanel
+          title="No profile yet."
+          hint="Run a preview and each result column gets summarized here."
+        />
+      ) : stats === null ? (
+        <EmptyPanel
+          title="Stats were off for the last run."
+          hint="Run the preview again while this panel is open."
+        />
+      ) : stats.length === 0 ? (
+        <EmptyPanel title="Nothing to summarize." hint="The preview returned no columns." />
+      ) : (
+        stats.map((statsRow) => (
+          <StatCard key={summarizeValueText(statsRow.column_name)} statsRow={statsRow} />
+        ))
+      )}
+    </aside>
+  );
+}
diff --git a/ui/src/components/DagGraph.tsx b/ui/src/components/DagGraph.tsx
new file mode 100644
index 00000000..0431c2ee
--- /dev/null
+++ b/ui/src/components/DagGraph.tsx
@@ -0,0 +1,475 @@
+import {
+  type MouseEvent as ReactMouseEvent,
+  type PointerEvent as ReactPointerEvent,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  type DagEdgeKind,
+  type LayoutInputEdge,
+  layoutDag,
+  NODE_HEIGHT,
+  NODE_WIDTH,
+} from "../dagLayout";
+import { runStateTone } from "../runState";
+
+// The graph renderer: SVG connectors under a layer of real <button> nodes, so
+// nodes are focusable, Enter/Space selects, and text gets browser typography
+// (ellipsis, hover titles) instead of hand-measured SVG glyphs.
+
+/**
+ * One thing that runs INSIDE a task, drawn within its node.
+ *
+ * These are not graph nodes and never get connectors: the steps inside a
+ * `process_batch` have no dependency edges on each other, so the only honest
+ * drawing is containment. Nesting them says "this task runs these, in this
+ * order, in one process" without inventing arrows.
+ */
+export interface DagGraphNodeContent {
+  /** Selection identity, unique within the node. */
+  id: string;
+  label: string;
+  /** Hover text: what this step does. */
+  summary: string;
+  /** Engine-owned work versus a user registration; drawn differently. */
+  kind: "engine" | "user";
+  /** A short trailing mark on the row: a tier number, "critical", a duration. */
+  badge?: string | null;
+}
+
+export interface DagGraphNode {
+  /** Task id — the identity the details panel and the API speak. */
+  id: string;
+  label: string;
+  /** Hover text: what this task actually does. */
+  summary: string;
+  /** Dynamically mapped: rendered as a stacked card with a fan-out badge. */
+  mapped?: boolean;
+  /** Defers while waiting; rendered as "waits", never as a stalled spinner. */
+  deferred?: boolean;
+  /** Live task state; absent on the static topology view. */
+  state?: string | null;
+  /** Short readout at the node's foot: "×N", "12/15 ok", a duration. */
+  badge?: string | null;
+  /** What runs inside this task, drawn nested within the node. */
+  contents?: readonly DagGraphNodeContent[];
+  /** One line under the contents: what their arrangement does and does not mean. */
+  contentsNote?: string | null;
+}
+
+export type DagGraphEdge = LayoutInputEdge;
+
+interface DagGraphProps {
+  nodes: readonly DagGraphNode[];
+  edges: readonly DagGraphEdge[];
+  /** Accessible name for the graph region. */
+  label: string;
+  selectedNodeId: string | null;
+  onSelectNode: (nodeId: string) => void;
+  /** Nodes that expand something below the graph (stage triggers). */
+  expandedNodeIds?: readonly string[];
+  /** Selected content row, as "<nodeId>/<contentId>"; null when none is. */
+  selectedContentKey?: string | null;
+  onSelectContent?: (nodeId: string, contentId: string) => void;
+}
+
+/** Past this width the canvas overflows any realistic pane, so the caption
+ * tells the reader the graph continues past the edge. */
+const WIDE_GRAPH_PX = 900;
+
+// A container node's height is computed here rather than measured, because the
+// layout needs it before anything renders. These must track the CSS in
+// index.css (.dag-node-content-row and friends); the graph is one component
+// with one stylesheet, so the coupling is local and visible.
+const CONTENT_ROW_HEIGHT = 20;
+const CONTENT_ROW_GAP = 3;
+const CONTENTS_PADDING = 8;
+/** Two wrapped lines at the note's font size, plus its padding. Keep
+ * `contentsNote` short enough to fit in two: the node clips rather than grows. */
+const CONTENTS_NOTE_HEIGHT = 38;
+
+export function contentAwareNodeHeight(node: DagGraphNode): number {
+  const contents = node.contents ?? [];
+  if (contents.length === 0) return NODE_HEIGHT;
+  const rows = contents.length * CONTENT_ROW_HEIGHT + (contents.length - 1) * CONTENT_ROW_GAP;
+  return NODE_HEIGHT + CONTENTS_PADDING + rows + (node.contentsNote ? CONTENTS_NOTE_HEIGHT : 0);
+}
+
+export function contentKey(nodeId: string, contentId: string): string {
+  return `${nodeId}/${contentId}`;
+}
+
+function arrowMarkerId(baseId: string, kind: DagEdgeKind): string {
+  return `${baseId}-arrow-${kind}`;
+}
+
+// ---- grab-to-pan -----------------------------------------------------------
+//
+// A long chain is wider than any pane, and reaching for a scrollbar (or
+// knowing that shift+wheel scrolls sideways) is not something a reader should
+// have to discover. So the empty space between the nodes is a handle: press it
+// and drag, and the view follows the pointer.
+//
+// This is ~60 lines of pointer arithmetic on the scroll offset, deliberately
+// not a pan/zoom library — the repo already turned down a graph library at
+// these sizes, and the whole of the behaviour is below.
+//
+// Motion: the offset tracks the pointer 1:1 and stops when the pointer stops.
+// There is no inertia, no fling, no easing — nothing that keeps moving after
+// the gesture, so there is nothing for prefers-reduced-motion to switch off.
+// `.dag-scroll` pins `scroll-behavior: auto` so a later global smooth-scroll
+// cannot turn a drag into an animation behind our back.
+
+/**
+ * How far the pointer must travel before a press counts as a pan. Under it the
+ * press is still a click, so a reader who wobbles a pixel while pressing gets
+ * what they aimed at instead of a one-pixel pan and a swallowed click.
+ */
+const PAN_THRESHOLD_PX = 4;
+
+/**
+ * Anything the reader can operate. A press landing on one of these belongs to
+ * that control — nodes keep their click, their selection and their focus, and
+ * only the graph's empty space pans.
+ */
+const INTERACTIVE_SELECTOR = "a, button, input, select, textarea, [contenteditable], [tabindex]";
+
+interface PanGesture {
+  pointerId: number;
+  originClientX: number;
+  originClientY: number;
+  originScrollLeft: number;
+  originScrollTop: number;
+  /** True once the pointer cleared PAN_THRESHOLD_PX: from there it is a pan. */
+  isPan: boolean;
+}
+
+function useDragToPan() {
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const gestureRef = useRef<PanGesture | null>(null);
+  const suppressNextClickRef = useRef(false);
+  const [isPanning, setIsPanning] = useState(false);
+  const [canPan, setCanPan] = useState(false);
+
+  // Only wear the grab cursor where there is somewhere to grab towards: on a
+  // graph that already fits, "grab" would be a promise the pane cannot keep.
+  useEffect(() => {
+    const scroll = scrollRef.current;
+    if (scroll === null) return;
+    const measure = () => {
+      setCanPan(
+        scroll.scrollWidth - scroll.clientWidth > 1 ||
+          scroll.scrollHeight - scroll.clientHeight > 1,
+      );
+    };
+    measure();
+    if (typeof ResizeObserver !== "function") return;
+    // Both boxes: the pane resizes with the window, the canvas resizes when a
+    // run adds tasks to the graph.
+    const observer = new ResizeObserver(measure);
+    observer.observe(scroll);
+    const canvas = scroll.firstElementChild;
+    if (canvas !== null) observer.observe(canvas);
+    return () => observer.disconnect();
+  }, []);
+
+  const handlePointerDown = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    // Clear here rather than only after a click: a gesture can end without one
+    // (released off-window), and a stale flag would eat a later real click.
+    suppressNextClickRef.current = false;
+    const scroll = scrollRef.current;
+    if (scroll === null) return;
+    // Touch already drags this container natively, with the momentum and the
+    // rubber-banding the platform tunes. Taking that gesture over would mean
+    // re-implementing it worse and fighting the browser for the first frames
+    // before it sends pointercancel. Mouse, trackpad and pen have no such
+    // default, and are what this is here for.
+    if (event.pointerType === "touch") return;
+    if (!event.isPrimary || event.button !== 0) return;
+    const target = event.target;
+    if (target instanceof Element) {
+      const control = target.closest(INTERACTIVE_SELECTOR);
+      if (control !== null && scroll.contains(control)) return;
+    }
+    gestureRef.current = {
+      pointerId: event.pointerId,
+      originClientX: event.clientX,
+      originClientY: event.clientY,
+      originScrollLeft: scroll.scrollLeft,
+      originScrollTop: scroll.scrollTop,
+      isPan: false,
+    };
+    // Capture from the press, not from the threshold: a quick drag can leave
+    // the pane between two frames, and uncaptured moves would go to whatever
+    // is underneath. Only background presses reach this line, so no node's
+    // click or focus is ever retargeted by it.
+    scroll.setPointerCapture(event.pointerId);
+  }, []);
+
+  const handlePointerMove = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    const gesture = gestureRef.current;
+    const scroll = scrollRef.current;
+    if (gesture === null || scroll === null || event.pointerId !== gesture.pointerId) return;
+    const deltaX = event.clientX - gesture.originClientX;
+    const deltaY = event.clientY - gesture.originClientY;
+    if (!gesture.isPan) {
+      if (Math.hypot(deltaX, deltaY) < PAN_THRESHOLD_PX) return;
+      gesture.isPan = true;
+      setIsPanning(true);
+    }
+    // Both axes, always: the offsets clamp themselves, so an axis that does
+    // not overflow simply does not move.
+    scroll.scrollLeft = gesture.originScrollLeft - deltaX;
+    scroll.scrollTop = gesture.originScrollTop - deltaY;
+  }, []);
+
+  const handlePointerEnd = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    const gesture = gestureRef.current;
+    if (gesture === null || event.pointerId !== gesture.pointerId) return;
+    gestureRef.current = null;
+    const scroll = scrollRef.current;
+    if (scroll?.hasPointerCapture(event.pointerId)) {
+      scroll.releasePointerCapture(event.pointerId);
+    }
+    setIsPanning(false);
+    // A drag that ends is not a click. Nothing under the graph listens for a
+    // background click today; swallow it anyway, so adding one later does not
+    // quietly start firing it at the end of every pan.
+    if (gesture.isPan) suppressNextClickRef.current = true;
+  }, []);
+
+  const handleClickCapture = useCallback((event: ReactMouseEvent<HTMLDivElement>) => {
+    if (!suppressNextClickRef.current) return;
+    suppressNextClickRef.current = false;
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+
+  return {
+    scrollRef,
+    canPan,
+    isPanning,
+    panHandlers: {
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerEnd,
+      onPointerCancel: handlePointerEnd,
+      onClickCapture: handleClickCapture,
+    },
+  };
+}
+
+export function DagGraph({
+  nodes,
+  edges,
+  label,
+  selectedNodeId,
+  onSelectNode,
+  expandedNodeIds = [],
+  selectedContentKey = null,
+  onSelectContent,
+}: DagGraphProps) {
+  // useId strings contain colons, which url(#…) will not take.
+  const baseId = useId().replace(/:/g, "");
+  const layoutNodes = useMemo(
+    () => nodes.map((node) => ({ id: node.id, height: contentAwareNodeHeight(node) })),
+    [nodes],
+  );
+  const layout = useMemo(() => layoutDag(layoutNodes, edges), [layoutNodes, edges]);
+  const { scrollRef, canPan, isPanning, panHandlers } = useDragToPan();
+  const scrollClasses = ["dag-scroll", canPan ? "is-pannable" : "", isPanning ? "is-panning" : ""]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <figure className="dag-figure" aria-label={label}>
+      {/* The pan handlers add nothing a keyboard user needs and so the container
+          stays a plain scroller with no role: the nodes inside are real buttons
+          that focus and scroll themselves into view, and the wheel, the
+          scrollbar and shift+wheel all still work. This is a second way to
+          reach the same scroll offset, not a control. */}
+      <div className={scrollClasses} ref={scrollRef} {...panHandlers}>
+        <div
+          className="dag-canvas"
+          style={{ width: `${layout.width}px`, height: `${layout.height}px` }}
+        >
+          <svg
+            className="dag-edge-layer"
+            width={layout.width}
+            height={layout.height}
+            aria-hidden="true"
+            focusable="false"
+          >
+            <defs>
+              {(["dependency", "gate"] as const).map((kind) => (
+                <marker
+                  key={kind}
+                  id={arrowMarkerId(baseId, kind)}
+                  viewBox="0 0 8 8"
+                  refX="7.2"
+                  refY="4"
+                  markerWidth="7"
+                  markerHeight="7"
+                  orient="auto-start-reverse"
+                >
+                  <path d="M0.4 0.6 L7.6 4 L0.4 7.4 z" className={`dag-arrow is-${kind}`} />
+                </marker>
+              ))}
+            </defs>
+            {layout.edges.map((edge) => (
+              <path
+                key={edge.key}
+                d={edge.path}
+                className={`dag-edge is-${edge.kind}`}
+                markerEnd={`url(#${arrowMarkerId(baseId, edge.kind)})`}
+              >
+                <title>{edge.title}</title>
+              </path>
+            ))}
+            {layout.edges
+              .filter((edge) => edge.label !== null)
+              .map((edge) => (
+                <text
+                  key={`${edge.key}:label`}
+                  className={`dag-edge-label is-${edge.kind}`}
+                  x={edge.labelX}
+                  y={edge.labelY}
+                  textAnchor="middle"
+                >
+                  {edge.label}
+                </text>
+              ))}
+          </svg>
+          {nodes.map((node) => {
+            const position = layout.nodes.get(node.id);
+            if (!position) return null;
+            const tone = node.state ? runStateTone(node.state) : null;
+            const isSelected = node.id === selectedNodeId;
+            const isExpanded = expandedNodeIds.includes(node.id);
+            const badgeText = node.badge ?? (node.mapped ? "×N" : null);
+            const contents = node.contents ?? [];
+            const hasContents = contents.length > 0;
+            const nodeClasses = [
+              "dag-node",
+              hasContents ? "has-contents" : "",
+              tone ? `is-${tone}` : "",
+              isSelected ? "is-selected" : "",
+              isExpanded ? "is-expanded" : "",
+            ]
+              .filter(Boolean)
+              .join(" ");
+            // A node with contents holds real buttons, so it cannot itself be
+            // one: it becomes a container whose HEAD is the button that selects
+            // the task. Without contents it stays a single button, as before.
+            const headContent = (
+              <>
+                <span className="dag-node-id">{node.label}</span>
+                <span className="dag-node-meta">
+                  {node.state ? (
+                    <span className={`dag-node-state is-${tone}`}>{node.state}</span>
+                  ) : null}
+                  {node.deferred ? (
+                    <span className="dag-node-waits" title="defers its worker slot and waits">
+                      waits
+                    </span>
+                  ) : null}
+                  {badgeText ? <span className="dag-node-badge">{badgeText}</span> : null}
+                </span>
+              </>
+            );
+            return (
+              <div
+                key={node.id}
+                className="dag-node-slot"
+                style={{
+                  left: `${position.x}px`,
+                  top: `${position.y}px`,
+                  width: `${NODE_WIDTH}px`,
+                  height: `${position.height}px`,
+                }}
+              >
+                {node.mapped ? (
+                  <>
+                    <span className="dag-node-stack is-back" aria-hidden="true" />
+                    <span className="dag-node-stack is-mid" aria-hidden="true" />
+                  </>
+                ) : null}
+                {hasContents ? (
+                  <div className={nodeClasses}>
+                    <button
+                      type="button"
+                      className="dag-node-head"
+                      onClick={() => onSelectNode(node.id)}
+                      aria-current={isSelected ? "true" : undefined}
+                      aria-expanded={isExpanded ? true : undefined}
+                      title={node.summary}
+                    >
+                      {headContent}
+                    </button>
+                    <div className="dag-node-contents">
+                      {contents.map((content) => {
+                        const key = contentKey(node.id, content.id);
+                        return (
+                          <button
+                            key={content.id}
+                            type="button"
+                            className={[
+                              "dag-node-content-row",
+                              `is-${content.kind}`,
+                              key === selectedContentKey ? "is-selected" : "",
+                            ]
+                              .filter(Boolean)
+                              .join(" ")}
+                            title={content.summary}
+                            aria-current={key === selectedContentKey ? "true" : undefined}
+                            onClick={() => onSelectContent?.(node.id, content.id)}
+                          >
+                            <span className="dag-node-content-name">{content.label}</span>
+                            {content.badge ? (
+                              <span className="dag-node-content-badge">{content.badge}</span>
+                            ) : null}
+                          </button>
+                        );
+                      })}
+                    </div>
+                    {node.contentsNote ? (
+                      <p className="dag-node-contents-note">{node.contentsNote}</p>
+                    ) : null}
+                  </div>
+                ) : (
+                  <button
+                    type="button"
+                    className={nodeClasses}
+                    onClick={() => onSelectNode(node.id)}
+                    aria-current={isSelected ? "true" : undefined}
+                    aria-expanded={isExpanded ? true : undefined}
+                    title={node.summary}
+                  >
+                    {headContent}
+                  </button>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <figcaption className="dag-hint">
+        Click a node (or focus it and press Enter) for details.
+        {edges.some((edge) => edge.kind === "gate")
+          ? " Dashed connectors are conditional gates, not task dependencies."
+          : null}
+        {/* A long chain is wider than any pane; say so rather than letting the
+            reader assume the graph ends at the pane's edge — and name the
+            gesture, since a drag handle with no scrollbar in sight is not
+            something anyone goes looking for. */}
+        {layout.width > WIDE_GRAPH_PX
+          ? " Drag the background, or scroll sideways, to follow the whole chain."
+          : null}
+      </figcaption>
+    </figure>
+  );
+}
diff --git a/ui/src/components/DetailsPanel.tsx b/ui/src/components/DetailsPanel.tsx
new file mode 100644
index 00000000..ed2286d1
--- /dev/null
+++ b/ui/src/components/DetailsPanel.tsx
@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+
+// The always-present second pane. Selecting a graph node fills it; selecting
+// nothing shows the hint. It never disappears when the view changes, so the
+// reader's eye keeps one home for "what am I looking at".
+
+export function DetailsPanel({
+  title,
+  kicker,
+  children,
+}: {
+  title: string;
+  /** Tiny uppercase line above the title: what kind of thing this is. */
+  kicker?: string;
+  children: ReactNode;
+}) {
+  return (
+    <aside className="details-panel" aria-label="Details">
+      <div className="details-panel-head">
+        {kicker ? <span className="details-kicker">{kicker}</span> : null}
+        <h3 className="details-title" title={title}>
+          {title}
+        </h3>
+      </div>
+      <div className="details-panel-body">{children}</div>
+    </aside>
+  );
+}
+
+export function DetailRow({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="detail-row">
+      <span className="detail-label">{label}</span>
+      <span className="detail-value">{children}</span>
+    </div>
+  );
+}
+
+/** A block that needs the full width of the panel (lists, prose, buttons). */
+export function DetailBlock({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="detail-block">
+      <span className="detail-label">{label}</span>
+      <div className="detail-block-body">{children}</div>
+    </div>
+  );
+}
diff --git a/ui/src/components/EpisodeTimeline.tsx b/ui/src/components/EpisodeTimeline.tsx
new file mode 100644
index 00000000..02c91c91
--- /dev/null
+++ b/ui/src/components/EpisodeTimeline.tsx
@@ -0,0 +1,298 @@
+import { useMemo } from "react";
+import type { EpisodeTimeline, TimelineInterval, TimelineMeasurement } from "../api";
+import { formatNumber } from "../format";
+
+// Visual evidence for one episode: where in the recording something happened,
+// and how big the numbers are. Everything drawn here comes from the server's
+// timeline payload (spans, per-interval seconds, numeric measurements) — the
+// UI only lays it out.
+
+/** Fixed categorical slots. A kind past the third folds into the neutral
+ * "other" slot rather than getting a generated hue, and the legend always
+ * names it, so identity never rests on colour alone. */
+const CATEGORY_SLOT_COUNT = 3;
+
+const TICK_COUNT = 5;
+/** Minimum visible width for a band, in percent of the span. */
+const MIN_BAND_PERCENT = 0.6;
+/** Band height plus the gap that keeps stacked lanes legible. */
+const LANE_PITCH_PX = 22;
+
+/**
+ * An interval the server could place on the episode's clock.
+ *
+ * The served `start_s`/`end_s` are nullable: they are offsets from the
+ * episode's own start, and the server sends null when it cannot derive that
+ * start. An interval with no position cannot go on a time axis, so this type
+ * marks the ones that can, and {@link placeableIntervals} separates them out
+ * once rather than every consumer re-checking.
+ */
+interface PlacedInterval extends Omit<TimelineInterval, "start_s" | "end_s"> {
+  start_s: number;
+  end_s: number;
+}
+
+/** Splits intervals into those that can be drawn and a count of those that
+ * cannot, so an unplaceable interval is reported rather than plotted at zero. */
+function placeableIntervals(intervals: readonly TimelineInterval[]): {
+  placed: PlacedInterval[];
+  unplaceableCount: number;
+} {
+  const placed: PlacedInterval[] = [];
+  let unplaceableCount = 0;
+  for (const interval of intervals) {
+    const { start_s, end_s } = interval;
+    if (start_s === null || end_s === null) unplaceableCount += 1;
+    else placed.push({ ...interval, start_s, end_s });
+  }
+  return { placed, unplaceableCount };
+}
+
+interface PackedInterval {
+  interval: PlacedInterval;
+  lane: number;
+}
+
+/** Greedy lane packing: overlapping intervals stack instead of hiding each
+ * other, and a small gap keeps neighbouring bands visually separate. */
+function packIntoLanes(intervals: readonly PlacedInterval[], spanSeconds: number) {
+  const minimumGapSeconds = spanSeconds * 0.004;
+  const ordered = [...intervals].sort(
+    (left, right) => left.start_s - right.start_s || left.end_s - right.end_s,
+  );
+  const laneEnds: number[] = [];
+  const packed: PackedInterval[] = [];
+  for (const interval of ordered) {
+    let laneIndex = laneEnds.findIndex((end) => end + minimumGapSeconds <= interval.start_s);
+    if (laneIndex === -1) {
+      laneIndex = laneEnds.length;
+      laneEnds.push(interval.end_s);
+    } else {
+      laneEnds[laneIndex] = Math.max(laneEnds[laneIndex] ?? 0, interval.end_s);
+    }
+    packed.push({ interval, lane: laneIndex });
+  }
+  return { packed, laneCount: Math.max(1, laneEnds.length) };
+}
+
+/** Stable colour slots keyed by the kind itself (never by rank or count), so
+ * a kind keeps its colour as episodes change. */
+function colourSlotByKind(intervals: readonly TimelineInterval[]): Map<string, number> {
+  const kinds = [...new Set(intervals.map((interval) => interval.kind))].sort();
+  return new Map(kinds.map((kind, index) => [kind, index < CATEGORY_SLOT_COUNT ? index + 1 : 0]));
+}
+
+function secondsLabel(seconds: number): string {
+  return `${formatNumber(Number(seconds.toFixed(seconds < 10 ? 2 : 1)))}s`;
+}
+
+export function TimelineStrip({ timeline }: { timeline: EpisodeTimeline }) {
+  const { placed: intervals, unplaceableCount } = useMemo(
+    () => placeableIntervals(timeline.intervals),
+    [timeline.intervals],
+  );
+  // The server owns the span; when it could not derive one, the intervals
+  // themselves are the only honest axis — and with neither, we say so.
+  const derivedSpan = intervals.reduce((longest, interval) => Math.max(longest, interval.end_s), 0);
+  const spanSeconds = timeline.duration_s ?? (derivedSpan > 0 ? derivedSpan : null);
+  const isSpanFromIntervals = timeline.duration_s === null && spanSeconds !== null;
+
+  const layout = useMemo(
+    () => (spanSeconds === null ? null : packIntoLanes(intervals, spanSeconds)),
+    [intervals, spanSeconds],
+  );
+  const slotByKind = useMemo(() => colourSlotByKind(intervals), [intervals]);
+
+  if (spanSeconds === null || layout === null) {
+    return (
+      <p className="empty-note">
+        No time span recorded for this episode — nothing in the catalog (no intervals, no duration
+        measurement) says how long it is, so there is no axis to draw.
+      </p>
+    );
+  }
+
+  if (intervals.length === 0) {
+    return (
+      <p className="empty-note">
+        The episode spans {secondsLabel(spanSeconds)}, but{" "}
+        {unplaceableCount === 0
+          ? "no check recorded an interval inside it."
+          : `none of its ${unplaceableCount} recorded interval${
+              unplaceableCount === 1 ? "" : "s"
+            } could be placed on that axis: the catalog has no start time to measure them from.`}
+      </p>
+    );
+  }
+
+  const ticks = Array.from({ length: TICK_COUNT }, (_, index) => ({
+    percent: (index / (TICK_COUNT - 1)) * 100,
+    seconds: (index / (TICK_COUNT - 1)) * spanSeconds,
+  }));
+  const kindCounts = new Map<string, number>();
+  for (const interval of intervals) {
+    kindCounts.set(interval.kind, (kindCounts.get(interval.kind) ?? 0) + 1);
+  }
+
+  return (
+    <div className="timeline">
+      <div
+        className="timeline-plot"
+        style={{ height: `${layout.laneCount * LANE_PITCH_PX + 6}px` }}
+      >
+        {ticks.map((tick) => (
+          <span
+            key={tick.percent}
+            className="timeline-gridline"
+            style={{ left: `${tick.percent}%` }}
+            aria-hidden="true"
+          />
+        ))}
+        {layout.packed.map(({ interval, lane }) => {
+          const startPercent = (interval.start_s / spanSeconds) * 100;
+          const widthPercent = Math.max(
+            MIN_BAND_PERCENT,
+            ((interval.end_s - interval.start_s) / spanSeconds) * 100,
+          );
+          const slot = slotByKind.get(interval.kind) ?? 0;
+          return (
+            <span
+              key={`${interval.label}:${interval.start_ns}:${interval.check_name}`}
+              className={`timeline-band is-slot-${slot}`}
+              style={{
+                left: `${Math.min(startPercent, 100 - MIN_BAND_PERCENT)}%`,
+                width: `${Math.min(widthPercent, 100 - startPercent)}%`,
+                top: `${lane * LANE_PITCH_PX}px`,
+              }}
+              title={`${interval.label} · ${secondsLabel(interval.start_s)} → ${secondsLabel(
+                interval.end_s,
+              )} (${secondsLabel(interval.end_s - interval.start_s)}) · ${interval.check_name}`}
+            >
+              <span className="timeline-band-label">{interval.label}</span>
+            </span>
+          );
+        })}
+      </div>
+      <div className="timeline-axis">
+        {ticks.map((tick) => (
+          <span key={tick.percent} className="timeline-tick" style={{ left: `${tick.percent}%` }}>
+            {secondsLabel(tick.seconds)}
+          </span>
+        ))}
+      </div>
+      <div className="timeline-legend">
+        {[...kindCounts.entries()]
+          .sort((left, right) => left[0].localeCompare(right[0]))
+          .map(([kind, count]) => (
+            <span key={kind} className="timeline-legend-item">
+              <span
+                className={`timeline-swatch is-slot-${slotByKind.get(kind) ?? 0}`}
+                aria-hidden="true"
+              />
+              <span className="timeline-legend-name">{kind}</span>
+              <span className="timeline-legend-count">{count}</span>
+            </span>
+          ))}
+        {isSpanFromIntervals ? (
+          <span className="timeline-legend-note">
+            axis spans the intervals themselves — the catalog records no episode duration
+          </span>
+        ) : null}
+        {unplaceableCount > 0 ? (
+          <span className="timeline-legend-note">
+            {unplaceableCount} interval{unplaceableCount === 1 ? "" : "s"} not drawn — the catalog
+            has no start time to measure {unplaceableCount === 1 ? "it" : "them"} from
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+interface MeasurementGroup {
+  unit: string | null;
+  measurements: TimelineMeasurement[];
+  largestMagnitude: number;
+}
+
+/** Bars are only comparable within one unit, so each unit gets its own scale
+ * and its own heading — one shared axis across mixed units would lie. */
+function groupByUnit(measurements: readonly TimelineMeasurement[]): MeasurementGroup[] {
+  const byUnit = new Map<string, TimelineMeasurement[]>();
+  for (const measurement of measurements) {
+    const key = measurement.unit ?? "";
+    const bucket = byUnit.get(key);
+    if (bucket) bucket.push(measurement);
+    else byUnit.set(key, [measurement]);
+  }
+  return [...byUnit.entries()]
+    .map(([unit, entries]) => ({
+      unit: unit === "" ? null : unit,
+      measurements: [...entries].sort((left, right) => right.value - left.value),
+      largestMagnitude: Math.max(...entries.map((entry) => Math.abs(entry.value)), 0),
+    }))
+    .sort((left, right) => right.measurements.length - left.measurements.length);
+}
+
+export function MeasurementBars({
+  measurements,
+}: {
+  measurements: readonly TimelineMeasurement[];
+}) {
+  const groups = useMemo(() => groupByUnit(measurements), [measurements]);
+  if (measurements.length === 0) {
+    return (
+      <p className="empty-note">
+        No numeric measurements recorded for this episode — text and boolean measurements are in the
+        table below.
+      </p>
+    );
+  }
+  return (
+    <div className="measure-groups">
+      {groups.map((group) => (
+        <div key={group.unit ?? "unitless"} className="measure-group">
+          <div className="measure-group-head">
+            <span className="measure-group-unit">{group.unit ?? "unitless"}</span>
+            <span className="measure-group-note">
+              bars scale to the largest value in this unit ({formatNumber(group.largestMagnitude)})
+            </span>
+          </div>
+          <ul className="measure-list">
+            {group.measurements.map((measurement) => {
+              const fraction =
+                group.largestMagnitude === 0
+                  ? 0
+                  : Math.abs(measurement.value) / group.largestMagnitude;
+              return (
+                <li key={measurement.key} className="measure-row">
+                  <span className="measure-key" title={measurement.key}>
+                    {measurement.key}
+                  </span>
+                  <span className="measure-track">
+                    <span
+                      className={
+                        measurement.value < 0 ? "measure-fill is-negative" : "measure-fill"
+                      }
+                      // Exactly zero draws nothing — a minimum-width sliver
+                      // would read as "small but non-zero".
+                      style={{
+                        width: measurement.value === 0 ? "0%" : `${Math.max(fraction * 100, 1)}%`,
+                      }}
+                    />
+                  </span>
+                  <span className="measure-value">
+                    {formatNumber(measurement.value)}
+                    {measurement.unit ? (
+                      <span className="measure-unit"> {measurement.unit}</span>
+                    ) : null}
+                  </span>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/ui/src/components/FacetSidebar.tsx b/ui/src/components/FacetSidebar.tsx
new file mode 100644
index 00000000..5e95ef66
--- /dev/null
+++ b/ui/src/components/FacetSidebar.tsx
@@ -0,0 +1,207 @@
+import { useState } from "react";
+import type { EpisodeFacets, EpisodeStatus, FacetEntry } from "../api";
+import { ErrorPanel, LoadingPanel } from "./QueryStates";
+
+export type MultiValueFacetName = "task" | "operator" | "embodiment";
+
+const VISIBLE_ENTRY_LIMIT = 8;
+
+function isEpisodeStatus(value: string): value is EpisodeStatus {
+  return value === "ok" || value === "quarantined";
+}
+
+function ShowMoreToggle({
+  totalCount,
+  showAll,
+  onToggle,
+}: {
+  totalCount: number;
+  showAll: boolean;
+  onToggle: () => void;
+}) {
+  if (totalCount <= VISIBLE_ENTRY_LIMIT) return null;
+  return (
+    <button type="button" className="facet-more" onClick={onToggle}>
+      {showAll ? "Show fewer" : `Show all ${totalCount}`}
+    </button>
+  );
+}
+
+function CheckboxFacetGroup({
+  label,
+  entries,
+  selectedValues,
+  onToggleValue,
+}: {
+  label: string;
+  entries: FacetEntry[];
+  selectedValues: string[];
+  onToggleValue: (value: string) => void;
+}) {
+  const [showAll, setShowAll] = useState(false);
+  const visibleEntries = showAll ? entries : entries.slice(0, VISIBLE_ENTRY_LIMIT);
+  return (
+    <section className="facet-group">
+      <h3 className="facet-label">{label}</h3>
+      {entries.length === 0 ? <p className="facet-empty">none recorded</p> : null}
+      <ul className="facet-list">
+        {visibleEntries.map((entry) => (
+          <li key={entry.value}>
+            <label className="facet-row">
+              <input
+                type="checkbox"
+                checked={selectedValues.includes(entry.value)}
+                onChange={() => onToggleValue(entry.value)}
+              />
+              <span className="facet-value" title={entry.value}>
+                {entry.value}
+              </span>
+              <span className="facet-count">{entry.count}</span>
+            </label>
+          </li>
+        ))}
+      </ul>
+      <ShowMoreToggle
+        totalCount={entries.length}
+        showAll={showAll}
+        onToggle={() => setShowAll((previous) => !previous)}
+      />
+    </section>
+  );
+}
+
+// The list endpoint's status param is single-valued, so this group behaves
+// like radio buttons where re-checking the active value clears the filter.
+function StatusFacetGroup({
+  entries,
+  selectedStatus,
+  onSelectStatus,
+}: {
+  entries: FacetEntry[];
+  selectedStatus: EpisodeStatus | null;
+  onSelectStatus: (status: EpisodeStatus | null) => void;
+}) {
+  return (
+    <section className="facet-group">
+      <h3 className="facet-label">Status</h3>
+      {entries.length === 0 ? <p className="facet-empty">none recorded</p> : null}
+      <ul className="facet-list">
+        {entries.map((entry) => {
+          const filterable = isEpisodeStatus(entry.value);
+          return (
+            <li key={entry.value}>
+              <label className="facet-row">
+                <input
+                  type="checkbox"
+                  checked={selectedStatus === entry.value}
+                  disabled={!filterable}
+                  onChange={() => {
+                    if (!isEpisodeStatus(entry.value)) return;
+                    onSelectStatus(selectedStatus === entry.value ? null : entry.value);
+                  }}
+                />
+                <span className="facet-value" title={entry.value}>
+                  {entry.value}
+                </span>
+                <span className="facet-count">{entry.count}</span>
+              </label>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}
+
+// pipeline_version is a facet in the counts response but the list endpoint
+// takes no such filter param, so it renders as informational counts without
+// checkboxes rather than as a control that would do nothing.
+function CountOnlyFacetGroup({ label, entries }: { label: string; entries: FacetEntry[] }) {
+  const [showAll, setShowAll] = useState(false);
+  const visibleEntries = showAll ? entries : entries.slice(0, VISIBLE_ENTRY_LIMIT);
+  return (
+    <section className="facet-group" title="Counts only — not a filter in this release">
+      <h3 className="facet-label">{label}</h3>
+      {entries.length === 0 ? <p className="facet-empty">none recorded</p> : null}
+      <ul className="facet-list">
+        {visibleEntries.map((entry) => (
+          <li key={entry.value} className="facet-row facet-row-static">
+            <span className="facet-value" title={entry.value}>
+              {entry.value}
+            </span>
+            <span className="facet-count">{entry.count}</span>
+          </li>
+        ))}
+      </ul>
+      <ShowMoreToggle
+        totalCount={entries.length}
+        showAll={showAll}
+        onToggle={() => setShowAll((previous) => !previous)}
+      />
+    </section>
+  );
+}
+
+export function FacetSidebar({
+  facets,
+  isPending,
+  error,
+  onRetry,
+  selectedValues,
+  selectedStatus,
+  onToggleValue,
+  onSelectStatus,
+}: {
+  facets: EpisodeFacets | undefined;
+  isPending: boolean;
+  error: unknown;
+  onRetry: () => void;
+  selectedValues: Record<MultiValueFacetName, string[]>;
+  selectedStatus: EpisodeStatus | null;
+  onToggleValue: (facet: MultiValueFacetName, value: string) => void;
+  onSelectStatus: (status: EpisodeStatus | null) => void;
+}) {
+  if (isPending) {
+    return (
+      <aside className="facet-sidebar" aria-label="Episode filters">
+        <LoadingPanel label="Loading facets…" />
+      </aside>
+    );
+  }
+  if (error) {
+    return (
+      <aside className="facet-sidebar" aria-label="Episode filters">
+        <ErrorPanel error={error} onRetry={onRetry} />
+      </aside>
+    );
+  }
+  if (!facets) return null;
+  return (
+    <aside className="facet-sidebar" aria-label="Episode filters">
+      <CheckboxFacetGroup
+        label="Task"
+        entries={facets.task ?? []}
+        selectedValues={selectedValues.task}
+        onToggleValue={(value) => onToggleValue("task", value)}
+      />
+      <CheckboxFacetGroup
+        label="Operator"
+        entries={facets.operator ?? []}
+        selectedValues={selectedValues.operator}
+        onToggleValue={(value) => onToggleValue("operator", value)}
+      />
+      <CheckboxFacetGroup
+        label="Embodiment"
+        entries={facets.embodiment ?? []}
+        selectedValues={selectedValues.embodiment}
+        onToggleValue={(value) => onToggleValue("embodiment", value)}
+      />
+      <StatusFacetGroup
+        entries={facets.status ?? []}
+        selectedStatus={selectedStatus}
+        onSelectStatus={onSelectStatus}
+      />
+      <CountOnlyFacetGroup label="Pipeline version" entries={facets.pipeline_version ?? []} />
+    </aside>
+  );
+}
diff --git a/ui/src/components/HeaderDistribution.tsx b/ui/src/components/HeaderDistribution.tsx
new file mode 100644
index 00000000..9a48191d
--- /dev/null
+++ b/ui/src/components/HeaderDistribution.tsx
@@ -0,0 +1,165 @@
+import { ChartNoAxesColumn } from "lucide-react";
+import { Popover } from "radix-ui";
+import type { CategoricalColumnStats, EpisodeColumnStats, NumericColumnStats } from "../api";
+import { formatNumber } from "../format";
+
+// Column-header mini-distribution: a small popover fed by /episodes/stats,
+// always computed over the ACTIVE filter set. For filterable categorical
+// columns a value click applies the structured filter param — the server
+// keeps compiling the SQL (thin-client rule).
+//
+// Radix Popover replaces hand-rolled positioning that only ever flipped on the
+// right edge, never repositioned on scroll or resize, and rendered in place —
+// so the panel was clipped by the table's own overflow:hidden. Radix portals
+// it to the body and floating-ui keeps it in view on every axis.
+//
+// It also collapses the old hover-to-peek / click-to-pin pair into one click:
+// once the panel is portaled, hover intent across the gap between trigger and
+// panel needs its own timers, and hovering never let a keyboard user in. One
+// click, Escape or an outside click to dismiss, focus returned to the trigger.
+
+function NumericHistogram({ stats }: { stats: NumericColumnStats }) {
+  if (stats.buckets.length === 0) {
+    return <p className="stats-popover-note">no histogram for this column</p>;
+  }
+  const maxCount = Math.max(...stats.buckets.map((bucket) => bucket.count), 1);
+  const rangeMin = stats.min ?? stats.buckets[0]?.lo ?? null;
+  const rangeMax = stats.max ?? stats.buckets[stats.buckets.length - 1]?.hi ?? null;
+  return (
+    <div>
+      <div className="histogram">
+        {stats.buckets.map((bucket) => (
+          <div
+            key={`${bucket.lo}-${bucket.hi}`}
+            className="histogram-bar"
+            style={{ height: `${Math.max(4, (bucket.count / maxCount) * 100)}%` }}
+            title={`${formatNumber(bucket.lo)} – ${formatNumber(bucket.hi)}: ${bucket.count}`}
+          />
+        ))}
+      </div>
+      <div className="histogram-range">
+        <span>{rangeMin === null ? "—" : formatNumber(rangeMin)}</span>
+        <span>{rangeMax === null ? "—" : formatNumber(rangeMax)}</span>
+      </div>
+    </div>
+  );
+}
+
+function CategoricalValues({
+  stats,
+  onSelectValue,
+  activeValues,
+}: {
+  stats: CategoricalColumnStats;
+  onSelectValue: ((value: string) => void) | null;
+  activeValues: readonly string[];
+}) {
+  if (stats.values.length === 0) {
+    return <p className="stats-popover-note">no values for this column</p>;
+  }
+  const maxCount = Math.max(...stats.values.map((entry) => entry.count), 1);
+  const otherCount = stats.other_count ?? 0;
+  return (
+    <ul className="stats-value-list">
+      {stats.values.map((entry) => {
+        // "other" is the server's rollup of the long tail, not a real category
+        // — never a click-to-filter target.
+        const isClickable = onSelectValue !== null && entry.value !== "other";
+        const isActive = activeValues.includes(entry.value);
+        const rowBody = (
+          <>
+            <span className="stats-value-name" title={entry.value}>
+              {entry.value}
+            </span>
+            <span className="stats-value-bar" aria-hidden="true">
+              <span
+                className="stats-value-bar-fill"
+                style={{ width: `${(entry.count / maxCount) * 100}%` }}
+              />
+            </span>
+            <span className="stats-value-count">{entry.count}</span>
+          </>
+        );
+        return (
+          <li key={entry.value}>
+            {isClickable ? (
+              <button
+                type="button"
+                className={isActive ? "stats-value-row is-active" : "stats-value-row"}
+                onClick={() => onSelectValue(entry.value)}
+                title={
+                  isActive
+                    ? `Remove the ${stats.name} = ${entry.value} filter`
+                    : `Filter to ${stats.name} = ${entry.value}`
+                }
+              >
+                {rowBody}
+              </button>
+            ) : (
+              <span className="stats-value-row stats-value-row-static">{rowBody}</span>
+            )}
+          </li>
+        );
+      })}
+      {otherCount > 0 ? (
+        <li>
+          <span className="stats-value-row stats-value-row-static">
+            <span className="stats-value-name">other</span>
+            <span className="stats-value-bar" aria-hidden="true">
+              <span
+                className="stats-value-bar-fill"
+                style={{ width: `${Math.min(100, (otherCount / maxCount) * 100)}%` }}
+              />
+            </span>
+            <span className="stats-value-count">{otherCount}</span>
+          </span>
+        </li>
+      ) : null}
+    </ul>
+  );
+}
+
+export function HeaderDistribution({
+  stats,
+  onSelectValue,
+  activeValues,
+}: {
+  stats: EpisodeColumnStats;
+  /** null for columns without a matching structured filter param. */
+  onSelectValue: ((value: string) => void) | null;
+  activeValues: readonly string[];
+}) {
+  const label = `Distribution of ${stats.name} under the active filters`;
+  return (
+    <Popover.Root>
+      <div className="th-stats">
+        <Popover.Trigger className="th-stats-trigger" aria-label={label} title={label}>
+          <ChartNoAxesColumn />
+        </Popover.Trigger>
+      </div>
+      <Popover.Portal>
+        <Popover.Content
+          className="stats-popover"
+          side="bottom"
+          align="start"
+          sideOffset={2}
+          collisionPadding={8}
+        >
+          <div className="stats-popover-header">
+            <span className="stats-popover-name">{stats.name}</span>
+            <span className="stats-popover-kind">{stats.kind} · active filters</span>
+          </div>
+          {stats.kind === "numeric" ? (
+            <NumericHistogram stats={stats} />
+          ) : (
+            <CategoricalValues
+              stats={stats}
+              onSelectValue={onSelectValue}
+              activeValues={activeValues}
+            />
+          )}
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
diff --git a/ui/src/components/ManifestsPanel.tsx b/ui/src/components/ManifestsPanel.tsx
new file mode 100644
index 00000000..365009bc
--- /dev/null
+++ b/ui/src/components/ManifestsPanel.tsx
@@ -0,0 +1,151 @@
+import { useQuery } from "@tanstack/react-query";
+import { Download } from "lucide-react";
+import { Fragment, useState } from "react";
+import { fetchManifests, manifestDownloadPath } from "../api";
+import { formatFractionAsPercent, formatTimestamp } from "../format";
+import { EmptyPanel, ErrorPanel, LoadingPanel } from "./QueryStates";
+
+// The Manifests tab: the registry of pinned cuts, newest first. Each pin is an
+// immutable Parquet file under <data_root>/manifests/ plus this registry row.
+
+export function ManifestsPanel() {
+  const manifestsQuery = useQuery({ queryKey: ["manifests"], queryFn: fetchManifests });
+  const [expandedSqlIds, setExpandedSqlIds] = useState<ReadonlySet<string>>(new Set());
+
+  const toggleSql = (manifestId: string) => {
+    setExpandedSqlIds((previous) => {
+      const next = new Set(previous);
+      if (next.has(manifestId)) next.delete(manifestId);
+      else next.add(manifestId);
+      return next;
+    });
+  };
+
+  if (manifestsQuery.isPending) {
+    return (
+      <div className="manifests-pane">
+        <LoadingPanel label="Loading manifests…" />
+      </div>
+    );
+  }
+  if (manifestsQuery.isError) {
+    return (
+      <div className="manifests-pane">
+        <ErrorPanel
+          error={manifestsQuery.error}
+          onRetry={() => {
+            void manifestsQuery.refetch();
+          }}
+        />
+      </div>
+    );
+  }
+  const manifests = manifestsQuery.data;
+  if (manifests.length === 0) {
+    return (
+      <div className="manifests-pane">
+        <EmptyPanel
+          title="No pinned manifests yet."
+          hint="Preview a cut in the Studio tab, then use “Pin manifest” to freeze it here."
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="manifests-pane">
+      <p className="manifests-note">
+        Pinned manifests are immutable Parquet cuts under the workspace’s <code>manifests/</code>{" "}
+        directory — the CLI’s mutable default manifest never appears here.
+      </p>
+      <div className="table-overflow">
+        <table className="evidence-table manifests-table">
+          <thead>
+            <tr>
+              <th>name</th>
+              <th>description</th>
+              <th>rows</th>
+              <th>episodes</th>
+              <th>min coverage</th>
+              <th>created</th>
+              <th>download</th>
+              <th>sql</th>
+            </tr>
+          </thead>
+          <tbody>
+            {manifests.map((manifest) => {
+              const isSqlExpanded = expandedSqlIds.has(manifest.id);
+              const lowestCoverage =
+                manifest.coverage.length > 0
+                  ? Math.min(...manifest.coverage.map((entry) => entry.fraction))
+                  : null;
+              return (
+                <Fragment key={manifest.id}>
+                  <tr>
+                    <td className="manifest-name" title={manifest.manifest_path}>
+                      {manifest.name}
+                    </td>
+                    <td className="cell-dim" title={manifest.description ?? undefined}>
+                      {manifest.description ? (
+                        manifest.description
+                      ) : (
+                        <span className="cell-null">—</span>
+                      )}
+                    </td>
+                    <td className="cell-num">{manifest.row_count}</td>
+                    <td className="cell-num">{manifest.total_episodes}</td>
+                    <td>
+                      {lowestCoverage === null ? (
+                        <span className="cell-null">—</span>
+                      ) : (
+                        <span
+                          className={
+                            lowestCoverage < 1 ? "coverage-percent is-partial" : "coverage-percent"
+                          }
+                          title="Lowest check coverage over this cut"
+                        >
+                          {formatFractionAsPercent(lowestCoverage)}
+                        </span>
+                      )}
+                    </td>
+                    <td className="cell-mono" title={manifest.created_at}>
+                      {formatTimestamp(manifest.created_at)}
+                    </td>
+                    <td>
+                      <a
+                        className="btn btn-tiny"
+                        href={manifestDownloadPath(manifest.id)}
+                        download
+                        title={`Download ${manifest.manifest_path}`}
+                      >
+                        <Download />
+                        <span>Parquet</span>
+                      </a>
+                    </td>
+                    <td>
+                      <button
+                        type="button"
+                        className="btn btn-ghost btn-tiny"
+                        onClick={() => toggleSql(manifest.id)}
+                        aria-expanded={isSqlExpanded}
+                      >
+                        {isSqlExpanded ? "Hide SQL" : "Show SQL"}
+                      </button>
+                    </td>
+                  </tr>
+                  {isSqlExpanded ? (
+                    <tr className="error-detail-row">
+                      <td colSpan={8}>
+                        <pre className="sql-block">{manifest.sql}</pre>
+                      </td>
+                    </tr>
+                  ) : null}
+                </Fragment>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
diff --git a/ui/src/components/PinManifestModal.tsx b/ui/src/components/PinManifestModal.tsx
new file mode 100644
index 00000000..84cf3d03
--- /dev/null
+++ b/ui/src/components/PinManifestModal.tsx
@@ -0,0 +1,234 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Pin, X } from "lucide-react";
+import { Dialog } from "radix-ui";
+import { type RefObject, useRef, useState } from "react";
+import { describeApiError, pinManifest } from "../api";
+import { formatFractionAsPercent } from "../format";
+
+// Pins an immutable Parquet manifest of the editor's SQL under
+// <data_root>/manifests/ (never the engine's mutable default manifest.parquet).
+// On success it links straight to the Manifests tab.
+//
+// Radix Dialog owns the overlay behaviour that used to be hand-rolled here:
+// the focus trap, aria-hidden on everything behind the dialog, the body
+// scroll lock, outside-click and Escape dismissal, and — the reason the
+// trigger lives INSIDE this component rather than in the toolbar — returning
+// focus to the opener on close. Radix restores focus to `Dialog.Trigger`, so
+// the trigger has to BE a Radix trigger; a plain toolbar button would leave
+// Radix with nothing to focus and drop focus on <body>, which is the bug this
+// replaced.
+
+function PinManifestBody({
+  sql,
+  nameInputRef,
+  onViewInManifests,
+}: {
+  sql: string;
+  nameInputRef: RefObject<HTMLInputElement | null>;
+  onViewInManifests: () => void;
+}) {
+  const queryClient = useQueryClient();
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+
+  const pinMutation = useMutation({
+    mutationFn: pinManifest,
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["manifests"] });
+    },
+  });
+
+  const pinnedEntry = pinMutation.data;
+  const partialCoverageCount = pinnedEntry
+    ? pinnedEntry.coverage.filter((entry) => entry.fraction < 1).length
+    : 0;
+
+  return (
+    <>
+      <header className="modal-header">
+        <Dialog.Title className="modal-title">
+          {pinnedEntry ? "Manifest pinned" : "Pin manifest"}
+        </Dialog.Title>
+        <Dialog.Close asChild>
+          <button type="button" className="btn btn-ghost btn-tiny" aria-label="Close" title="Close">
+            <X />
+          </button>
+        </Dialog.Close>
+      </header>
+
+      {pinnedEntry ? (
+        <div className="modal-body">
+          <p className="modal-success">
+            Pinned <strong>{pinnedEntry.name}</strong> — {pinnedEntry.row_count} rows over{" "}
+            {pinnedEntry.total_episodes} catalog episodes.
+          </p>
+          <p className="modal-path" title={pinnedEntry.manifest_path}>
+            {pinnedEntry.manifest_path}
+          </p>
+          {partialCoverageCount > 0 ? (
+            <p className="modal-coverage-warning">
+              {partialCoverageCount} check{partialCoverageCount === 1 ? "" : "s"} covered only part
+              of this cut (lowest:{" "}
+              {formatFractionAsPercent(
+                Math.min(...pinnedEntry.coverage.map((entry) => entry.fraction)),
+              )}
+              ) — see the coverage column in the Manifests tab.
+            </p>
+          ) : null}
+          <footer className="modal-actions">
+            <Dialog.Close asChild>
+              <button type="button" className="btn">
+                Done
+              </button>
+            </Dialog.Close>
+            <button type="button" className="btn btn-primary" onClick={onViewInManifests}>
+              View in Manifests
+            </button>
+          </footer>
+        </div>
+      ) : (
+        <form
+          className="modal-body"
+          onSubmit={(event) => {
+            event.preventDefault();
+            const trimmedName = name.trim();
+            if (!trimmedName) return;
+            const trimmedDescription = description.trim();
+            pinMutation.mutate({
+              sql,
+              name: trimmedName,
+              description: trimmedDescription === "" ? undefined : trimmedDescription,
+            });
+          }}
+        >
+          <p className="modal-hint">
+            Freezes this cut as an immutable Parquet manifest under the workspace’s{" "}
+            <code>manifests/</code> directory and records it in the registry.
+          </p>
+          <label className="modal-field">
+            <span className="meta-label">Name</span>
+            <input
+              ref={nameInputRef}
+              className="input"
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              placeholder="e.g. clean pick_place v1"
+              required
+            />
+          </label>
+          <label className="modal-field">
+            <span className="meta-label">Description (optional)</span>
+            <textarea
+              className="input modal-textarea"
+              rows={2}
+              value={description}
+              onChange={(event) => setDescription(event.target.value)}
+              placeholder="What this cut is for"
+            />
+          </label>
+          <details className="modal-sql">
+            <summary>SQL to pin</summary>
+            <pre className="sql-block">{sql}</pre>
+          </details>
+          {pinMutation.isError ? (
+            <p className="form-error" role="alert">
+              {describeApiError(pinMutation.error)}
+            </p>
+          ) : null}
+          <footer className="modal-actions">
+            <Dialog.Close asChild>
+              <button type="button" className="btn">
+                Cancel
+              </button>
+            </Dialog.Close>
+            <button
+              type="submit"
+              className="btn btn-primary"
+              disabled={!name.trim() || pinMutation.isPending}
+            >
+              <Pin />
+              <span>{pinMutation.isPending ? "Pinning…" : "Pin manifest"}</span>
+            </button>
+          </footer>
+        </form>
+      )}
+    </>
+  );
+}
+
+export function PinManifestModal({
+  disabled,
+  currentSql,
+  onOpenManifests,
+}: {
+  disabled: boolean;
+  /** Reads the editor's full document at the moment the dialog opens. */
+  currentSql: () => string;
+  /** Switches CuratePage to the Manifests tab AND focuses that tab. */
+  onOpenManifests: () => void;
+}) {
+  const [sql, setSql] = useState<string | null>(null);
+  const nameInputRef = useRef<HTMLInputElement | null>(null);
+  const handOffFocusToManifestsRef = useRef(false);
+
+  return (
+    <Dialog.Root
+      open={sql !== null}
+      onOpenChange={(open) => {
+        // Snapshot the SQL on open: the dialog pins exactly what the editor
+        // held when it was asked to, never a later edit.
+        setSql(open ? currentSql() || null : null);
+      }}
+    >
+      <Dialog.Trigger asChild>
+        <button
+          type="button"
+          className="btn"
+          disabled={disabled}
+          title="Freeze this cut as an immutable Parquet manifest"
+        >
+          <Pin />
+          <span>Pin manifest</span>
+        </button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay className="modal-overlay" />
+        <Dialog.Content
+          className="modal"
+          // The dialog has no single summary paragraph; opt out explicitly
+          // rather than let Radix warn about a missing description.
+          aria-describedby={undefined}
+          onOpenAutoFocus={(event) => {
+            // Radix would take the first tabbable node, which is the header's
+            // close button. The name field is what the reader came to fill in.
+            const nameInput = nameInputRef.current;
+            if (!nameInput) return;
+            event.preventDefault();
+            nameInput.focus();
+          }}
+          onCloseAutoFocus={(event) => {
+            if (!handOffFocusToManifestsRef.current) return;
+            handOffFocusToManifestsRef.current = false;
+            // "View in Manifests" hides the studio pane, and the trigger goes
+            // with it — focusing a display:none element silently no-ops and
+            // drops focus on <body>. Switch tabs from here instead, once the
+            // focus trap has let go, and let CuratePage focus the tab itself.
+            event.preventDefault();
+            onOpenManifests();
+          }}
+        >
+          {sql === null ? null : (
+            <PinManifestBody
+              sql={sql}
+              nameInputRef={nameInputRef}
+              onViewInManifests={() => {
+                handOffFocusToManifestsRef.current = true;
+                setSql(null);
+              }}
+            />
+          )}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
diff --git a/ui/src/components/QueryStates.tsx b/ui/src/components/QueryStates.tsx
new file mode 100644
index 00000000..6477b26f
--- /dev/null
+++ b/ui/src/components/QueryStates.tsx
@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+import { describeApiError } from "../api";
+
+export function LoadingPanel({ label }: { label: string }) {
+  return (
+    <div className="state-panel" role="status">
+      <span className="spinner" aria-hidden="true" />
+      <p className="state-title">{label}</p>
+    </div>
+  );
+}
+
+export function ErrorPanel({ error, onRetry }: { error: unknown; onRetry?: () => void }) {
+  return (
+    <div className="state-panel state-panel-error" role="alert">
+      <p className="state-title">Request failed</p>
+      <p className="state-detail">{describeApiError(error)}</p>
+      {onRetry ? (
+        <button type="button" className="btn" onClick={onRetry}>
+          Retry
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+export function EmptyPanel({
+  title,
+  hint,
+  children,
+}: {
+  title: string;
+  hint?: string;
+  children?: ReactNode;
+}) {
+  return (
+    <div className="state-panel">
+      <p className="state-title">{title}</p>
+      {hint ? <p className="state-detail">{hint}</p> : null}
+      {children}
+    </div>
+  );
+}
diff --git a/ui/src/components/ReportPanel.tsx b/ui/src/components/ReportPanel.tsx
new file mode 100644
index 00000000..a0107856
--- /dev/null
+++ b/ui/src/components/ReportPanel.tsx
@@ -0,0 +1,111 @@
+import type { CurationReport } from "../api";
+import { formatFractionAsPercent } from "../format";
+import { ErrorPanel, LoadingPanel } from "./QueryStates";
+
+// Coverage display is mandatory (CATALOG.md): a statistic computed over half a
+// delivery must not look like a statistic over all of it, so checks that ran
+// on only part of the catalog are highlighted, not hidden.
+
+function CoverageTable({ report }: { report: CurationReport }) {
+  if (report.coverage.length === 0) {
+    return <p className="empty-note">No check runs recorded — nothing to state coverage over.</p>;
+  }
+  const partialCount = report.coverage.filter((entry) => entry.fraction < 1).length;
+  return (
+    <>
+      <div className="table-overflow">
+        <table className="evidence-table coverage-table">
+          <thead>
+            <tr>
+              <th>check</th>
+              <th>episodes ran</th>
+              <th>coverage</th>
+            </tr>
+          </thead>
+          <tbody>
+            {report.coverage.map((entry) => {
+              const isPartial = entry.fraction < 1;
+              return (
+                <tr key={entry.check_name}>
+                  <td className="cell-mono">{entry.check_name}</td>
+                  <td className="cell-num">
+                    {entry.episodes_ran} / {entry.total_episodes}
+                  </td>
+                  <td>
+                    <div className="coverage-cell">
+                      <div
+                        className="coverage-bar"
+                        role="img"
+                        aria-label={`${formatFractionAsPercent(entry.fraction)} of episodes`}
+                      >
+                        <div
+                          className={
+                            isPartial ? "coverage-bar-fill is-partial" : "coverage-bar-fill"
+                          }
+                          style={{ width: `${Math.max(entry.fraction * 100, 1)}%` }}
+                        />
+                      </div>
+                      <span
+                        className={isPartial ? "coverage-percent is-partial" : "coverage-percent"}
+                      >
+                        {formatFractionAsPercent(entry.fraction)}
+                      </span>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+      {partialCount > 0 ? (
+        <p className="report-note">
+          {partialCount} check{partialCount === 1 ? "" : "s"} ran on only part of the catalog —
+          statistics they feed do not describe the whole cut.
+        </p>
+      ) : null}
+    </>
+  );
+}
+
+/**
+ * Row count + total episodes + check coverage for the SQL in the editor.
+ * Renders nothing until a report has been requested; stays visible afterwards.
+ */
+export function ReportPanel({
+  report,
+  isPending,
+  error,
+  onRetry,
+}: {
+  report: CurationReport | undefined;
+  isPending: boolean;
+  error: unknown;
+  onRetry: () => void;
+}) {
+  if (report === undefined && !isPending && !error) return null;
+  return (
+    <section className="report-panel" aria-label="Curation report">
+      <h3 className="facet-label">Report</h3>
+      {isPending ? (
+        <LoadingPanel label="Computing report…" />
+      ) : error ? (
+        <ErrorPanel error={error} onRetry={onRetry} />
+      ) : report ? (
+        <>
+          <div className="report-stats">
+            <div className="report-stat">
+              <span className="meta-label">rows in cut</span>
+              <span className="report-stat-value">{report.row_count}</span>
+            </div>
+            <div className="report-stat">
+              <span className="meta-label">catalog episodes</span>
+              <span className="report-stat-value">{report.total_episodes}</span>
+            </div>
+          </div>
+          <CoverageTable report={report} />
+        </>
+      ) : null}
+    </section>
+  );
+}
diff --git a/ui/src/components/ResultGrid.tsx b/ui/src/components/ResultGrid.tsx
new file mode 100644
index 00000000..f8c93a1c
--- /dev/null
+++ b/ui/src/components/ResultGrid.tsx
@@ -0,0 +1,70 @@
+import { type ColumnDef, flexRender, tableFeatures, useTable } from "@tanstack/react-table";
+import { useMemo } from "react";
+import type { ColumnDescriptor, ResultRow } from "../api";
+import { EmptyPanel } from "./QueryStates";
+import { ValueCell } from "./ValueCell";
+
+/**
+ * Read-only result grid for curation previews — the Episodes table's visual
+ * twin (same .data-table styling and value rendering), minus sorting and
+ * pagination, which the studio doesn't do client-side (thin-client rule).
+ */
+// v9 registers features explicitly so unused ones tree-shake away. The
+// preview grid renders exactly what the server returned -- no client-side
+// sorting, filtering or pagination (the thin-client rule) -- so it registers
+// none, and only the always-present core row model remains.
+const previewGridFeatures = tableFeatures({});
+
+export function ResultGrid({ columns, rows }: { columns: ColumnDescriptor[]; rows: ResultRow[] }) {
+  const tableColumns = useMemo<ColumnDef<typeof previewGridFeatures, ResultRow, unknown>[]>(() => {
+    return columns.map((column) => ({
+      id: column.name,
+      accessorFn: (row: ResultRow) => row[column.name],
+      header: () => (
+        <span className="th-label" title={`${column.name} · ${column.type}`}>
+          {column.name}
+        </span>
+      ),
+      cell: (cellContext) => <ValueCell columnName={column.name} value={cellContext.getValue()} />,
+    }));
+  }, [columns]);
+
+  const table = useTable({
+    features: previewGridFeatures,
+    data: rows,
+    columns: tableColumns,
+  });
+
+  if (rows.length === 0) {
+    return <EmptyPanel title="The query returned no rows." hint="Loosen the WHERE clause?" />;
+  }
+
+  return (
+    <div className="table-scroll">
+      <table className="data-table">
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th key={header.id} className="th-static">
+                  {flexRender(header.column.columnDef.header, header.getContext())}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map((tableRow) => (
+            <tr key={tableRow.id}>
+              {/* getAllCells, not getVisibleCells: the latter belongs to the
+                  column-visibility feature, which this grid does not register. */}
+              {tableRow.getAllCells().map((cell) => (
+                <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/ui/src/components/RunStateChip.tsx b/ui/src/components/RunStateChip.tsx
new file mode 100644
index 00000000..4f8c49ed
--- /dev/null
+++ b/ui/src/components/RunStateChip.tsx
@@ -0,0 +1,6 @@
+import { runStateChipClass } from "../runState";
+
+/** A run/task state as a chip, in the shared state vocabulary (runState.ts). */
+export function RunStateChip({ state }: { state: string | null | undefined }) {
+  return <span className={runStateChipClass(state)}>{state ?? "no state"}</span>;
+}
diff --git a/ui/src/components/RunTimeline.tsx b/ui/src/components/RunTimeline.tsx
new file mode 100644
index 00000000..271bb14b
--- /dev/null
+++ b/ui/src/components/RunTimeline.tsx
@@ -0,0 +1,836 @@
+import { ChevronDown, Info, Pause, Play, SkipBack, SkipForward } from "lucide-react";
+import {
+  type KeyboardEvent as ReactKeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { formatDurationCompact, formatOffsetCompact } from "../format";
+import { runStateTone } from "../runState";
+import {
+  axisTickOffsetsSeconds,
+  formatInstant,
+  formatOffsetLabel,
+  instanceSpans,
+  MAPPED_COLLAPSE_THRESHOLD,
+  MASTER_SCOPE,
+  type ReplayBatchRow,
+  type ReplayGroup,
+  type ReplayRow,
+  type ReplaySpan,
+  type RunNodeSelection,
+  type RunReplay,
+  replayedRunState,
+  type TimedInstance,
+} from "../runTimeline";
+import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
+import { RunStateChip } from "./RunStateChip";
+
+// The run replay: a Gantt of every task instance on one shared axis, with a
+// draggable playhead that re-paints the DAG above at the instant it names.
+//
+// Everything drawn here is derived from the timestamps the run-graph payload
+// already carries (see runTimeline.ts). The reconstruction's limits are stated
+// in the panel itself — a replay assembled from start/end stamps is not an
+// event log, and this UI never pretends otherwise.
+
+/** Playback stretches (or compresses) the run into roughly this long. */
+const PLAYBACK_FIT_SECONDS = 12;
+
+const SPEED_CHOICES: readonly { id: string; label: string }[] = [
+  { id: "fit", label: `fit ≈ ${PLAYBACK_FIT_SECONDS}s` },
+  { id: "1", label: "1×" },
+  { id: "5", label: "5×" },
+  { id: "25", label: "25×" },
+  { id: "100", label: "100×" },
+];
+
+/** An arrow key steps this fraction of the run; Shift multiplies it by ten. */
+const KEY_STEP_FRACTION = 1 / 100;
+
+/** So a zero-length span (a skip with no end) is still a visible mark. */
+const MIN_BAR_PERCENT = 0.4;
+
+/** In a collapsed fan-out every batch shares one lane, so the states that
+ * matter are painted last rather than hidden under the successes. */
+const FAN_OUT_PAINT_RANK: Record<string, number> = {
+  success: 0,
+  removed: 1,
+  skipped: 1,
+  upstream_failed: 2,
+  up_for_retry: 3,
+  up_for_reschedule: 3,
+  queued: 4,
+  scheduled: 4,
+  deferred: 5,
+  running: 6,
+  failed: 7,
+};
+
+/** The pointer contract every drag surface (ruler, row track, grip) shares. */
+interface ScrubHandlers {
+  onPointerDown: (event: ReactPointerEvent<HTMLElement>) => void;
+  onPointerMove: (event: ReactPointerEvent<HTMLElement>) => void;
+  onPointerUp: (event: ReactPointerEvent<HTMLElement>) => void;
+  onPointerCancel: (event: ReactPointerEvent<HTMLElement>) => void;
+}
+
+function clamp(value: number, low: number, high: number): number {
+  return Math.min(high, Math.max(low, value));
+}
+
+interface AxisGeometry {
+  startMs: number;
+  spanMs: number;
+  endMs: number;
+  offsetMinutes: number;
+}
+
+function percentOf(instantMs: number, axis: AxisGeometry): number {
+  return clamp(((instantMs - axis.startMs) / axis.spanMs) * 100, 0, 100);
+}
+
+function spanTitle(span: ReplaySpan, label: string, axis: AxisGeometry): string {
+  const fromSeconds = (span.fromMs - axis.startMs) / 1000;
+  const toSeconds = (span.toMs - axis.startMs) / 1000;
+  const offsetLabel = formatOffsetLabel(axis.offsetMinutes);
+  const what = span.kind === "queued" ? "queued, waiting for a worker" : "running";
+  const openNote = span.open ? " · still open (no end recorded yet)" : "";
+  return (
+    `${label} — ${what}\n` +
+    `+${formatOffsetCompact(fromSeconds)} → +${formatOffsetCompact(toSeconds)} ` +
+    `(${formatDurationCompact((span.toMs - span.fromMs) / 1000)})\n` +
+    `${formatInstant(span.fromMs, axis.offsetMinutes)} → ` +
+    `${formatInstant(span.toMs, axis.offsetMinutes)} ${offsetLabel}${openNote}`
+  );
+}
+
+function SpanBar({
+  span,
+  timed,
+  label,
+  axis,
+}: {
+  span: ReplaySpan;
+  timed: TimedInstance;
+  label: string;
+  axis: AxisGeometry;
+}) {
+  const left = percentOf(span.fromMs, axis);
+  const rawWidth = ((span.toMs - span.fromMs) / axis.spanMs) * 100;
+  const width = Math.max(MIN_BAR_PERCENT, Math.min(rawWidth, 100 - left));
+  const classes = [
+    "replay-bar",
+    span.kind === "queued" ? "is-queued" : `is-${runStateTone(timed.instance.state)}`,
+    span.open ? "is-open" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <span
+      className={classes}
+      style={{ left: `${left}%`, width: `${width}%` }}
+      title={spanTitle(span, label, axis)}
+    />
+  );
+}
+
+/** Every bar one instance contributes, in one row's track. */
+function InstanceBars({
+  timed,
+  label,
+  axis,
+}: {
+  timed: TimedInstance;
+  label: string;
+  axis: AxisGeometry;
+}) {
+  const spans = instanceSpans(timed, axis.endMs);
+  return (
+    <>
+      {spans.map((span) => (
+        <SpanBar
+          key={`${span.kind}:${span.fromMs}:${span.toMs}`}
+          span={span}
+          timed={timed}
+          label={label}
+          axis={axis}
+        />
+      ))}
+    </>
+  );
+}
+
+function fanOutPaintRank(timed: TimedInstance): number {
+  const state = timed.instance.state?.toLowerCase();
+  return state === undefined ? 4 : (FAN_OUT_PAINT_RANK[state] ?? 4);
+}
+
+function rowDurationText(timed: readonly TimedInstance[]): string {
+  if (timed.length === 1) {
+    const only = timed[0] as TimedInstance;
+    if (only.open && only.startedAtMs !== null) return "open";
+    return formatDurationCompact(only.instance.duration_s);
+  }
+  const total = timed.reduce((sum, entry) => sum + (entry.instance.duration_s ?? 0), 0);
+  return total > 0 ? formatDurationCompact(total) : "—";
+}
+
+// ---- the panel -------------------------------------------------------------------
+
+export interface RunTimelineProps {
+  replay: RunReplay;
+  /** The instant the graph above is painted at. */
+  playheadMs: number;
+  /** null re-pins the playhead to the axis end (which is "now" while live). */
+  onPlayheadChange: (playheadMs: number | null) => void;
+  /** True while the playhead is pinned to the end rather than parked. */
+  isPinnedToEnd: boolean;
+  selection: RunNodeSelection | null;
+  onSelect: (selection: RunNodeSelection) => void;
+  /** The page's 10s poll — live mode is only fed while it is on. */
+  isAutoRefreshOn: boolean;
+}
+
+export function RunTimeline({
+  replay,
+  playheadMs,
+  onPlayheadChange,
+  isPinnedToEnd,
+  selection,
+  onSelect,
+  isAutoRefreshOn,
+}: RunTimelineProps) {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [speedChoice, setSpeedChoice] = useState<string>("fit");
+  const [isScrubbing, setIsScrubbing] = useState(false);
+  const [toggledFanOutKeys, setToggledFanOutKeys] = useState<ReadonlySet<string>>(new Set());
+  const trackRef = useRef<HTMLDivElement | null>(null);
+
+  const axis: AxisGeometry = useMemo(
+    () => ({
+      startMs: replay.startMs,
+      spanMs: replay.spanMs,
+      endMs: replay.endMs,
+      offsetMinutes: replay.offsetMinutes,
+    }),
+    [replay.startMs, replay.spanMs, replay.endMs, replay.offsetMinutes],
+  );
+
+  const spanSeconds = replay.spanMs / 1000;
+  const offsetSeconds = (playheadMs - replay.startMs) / 1000;
+  const playheadPercent = percentOf(playheadMs, axis);
+  const isLive = replay.unfinished && isPinnedToEnd;
+  const speedMultiplier =
+    speedChoice === "fit"
+      ? Math.max(1, replay.spanMs / (PLAYBACK_FIT_SECONDS * 1000))
+      : Number.parseFloat(speedChoice);
+
+  // The playback loop reads these through refs so a frame never re-subscribes
+  // the effect (and so live mode's one-second axis growth cannot restart it).
+  const playheadRef = useRef(playheadMs);
+  playheadRef.current = playheadMs;
+  const speedRef = useRef(speedMultiplier);
+  speedRef.current = speedMultiplier;
+  const onPlayheadChangeRef = useRef(onPlayheadChange);
+  onPlayheadChangeRef.current = onPlayheadChange;
+
+  const endMs = replay.endMs;
+  useEffect(() => {
+    if (!isPlaying) return;
+    let frame = 0;
+    let previousTimestamp = performance.now();
+    const step = (timestamp: number) => {
+      const advancedMs = (timestamp - previousTimestamp) * speedRef.current;
+      previousTimestamp = timestamp;
+      const next = playheadRef.current + advancedMs;
+      if (next >= endMs) {
+        // Running off the end re-pins to the end, which for an unfinished run
+        // is live: playback ends by handing the reader back to the present.
+        onPlayheadChangeRef.current(null);
+        setIsPlaying(false);
+        return;
+      }
+      onPlayheadChangeRef.current(next);
+      frame = requestAnimationFrame(step);
+    };
+    frame = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(frame);
+  }, [isPlaying, endMs]);
+
+  // A reader who asked for reduced motion never gets an animation, so a
+  // playback session cannot survive the preference flipping mid-run either.
+  useEffect(() => {
+    if (prefersReducedMotion) setIsPlaying(false);
+  }, [prefersReducedMotion]);
+
+  const seekToMs = (instantMs: number) => {
+    setIsPlaying(false);
+    const clamped = clamp(instantMs, replay.startMs, replay.endMs);
+    // Landing exactly on the end re-pins (and re-attaches live) rather than
+    // parking a millisecond behind the present.
+    onPlayheadChange(clamped >= replay.endMs ? null : clamped);
+  };
+
+  const seekToClientX = (clientX: number) => {
+    const rect = trackRef.current?.getBoundingClientRect();
+    if (!rect || rect.width === 0) return;
+    const fraction = clamp((clientX - rect.left) / rect.width, 0, 1);
+    seekToMs(replay.startMs + fraction * replay.spanMs);
+  };
+
+  // A ref, not the state, decides whether a move is a drag: the first
+  // pointermove can arrive before React has re-rendered with the new state.
+  const isScrubbingRef = useRef(false);
+  const beginScrub = (event: ReactPointerEvent<HTMLElement>) => {
+    if (event.button !== 0) return;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    isScrubbingRef.current = true;
+    setIsScrubbing(true);
+    seekToClientX(event.clientX);
+  };
+  const continueScrub = (event: ReactPointerEvent<HTMLElement>) => {
+    if (!isScrubbingRef.current) return;
+    seekToClientX(event.clientX);
+  };
+  const endScrub = (event: ReactPointerEvent<HTMLElement>) => {
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    isScrubbingRef.current = false;
+    setIsScrubbing(false);
+  };
+  const scrubHandlers: ScrubHandlers = {
+    onPointerDown: beginScrub,
+    onPointerMove: continueScrub,
+    onPointerUp: endScrub,
+    onPointerCancel: endScrub,
+  };
+
+  const stepBy = (direction: -1 | 1, isCoarse: boolean) => {
+    const stepMs = replay.spanMs * KEY_STEP_FRACTION * (isCoarse ? 10 : 1);
+    seekToMs(playheadMs + direction * stepMs);
+  };
+
+  const togglePlay = () => {
+    if (prefersReducedMotion) return;
+    setIsPlaying((playing) => {
+      if (playing) return false;
+      // Playing from the very end would finish instantly; rewind first.
+      if (playheadMs >= replay.endMs) onPlayheadChange(replay.startMs);
+      return true;
+    });
+  };
+
+  const handleSliderKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
+    switch (event.key) {
+      case "ArrowLeft":
+      case "ArrowDown":
+        event.preventDefault();
+        stepBy(-1, event.shiftKey);
+        return;
+      case "ArrowRight":
+      case "ArrowUp":
+        event.preventDefault();
+        stepBy(1, event.shiftKey);
+        return;
+      case "Home":
+        event.preventDefault();
+        seekToMs(replay.startMs);
+        return;
+      case "End":
+        event.preventDefault();
+        setIsPlaying(false);
+        onPlayheadChange(null);
+        return;
+      case " ":
+      case "Spacebar":
+        event.preventDefault();
+        togglePlay();
+        return;
+      default:
+    }
+  };
+
+  const tickOffsets = useMemo(() => axisTickOffsetsSeconds(spanSeconds), [spanSeconds]);
+  const isFanOutExpanded = (row: ReplayRow): boolean => {
+    const expandedByDefault = row.batches.length <= MAPPED_COLLAPSE_THRESHOLD;
+    return toggledFanOutKeys.has(row.key) ? !expandedByDefault : expandedByDefault;
+  };
+  const toggleFanOut = (rowKey: string) => {
+    setToggledFanOutKeys((previous) => {
+      const next = new Set(previous);
+      if (next.has(rowKey)) next.delete(rowKey);
+      else next.add(rowKey);
+      return next;
+    });
+  };
+
+  const absoluteReadout = `${formatInstant(playheadMs, replay.offsetMinutes)} ${formatOffsetLabel(
+    replay.offsetMinutes,
+  )}`;
+
+  return (
+    <figure className={isScrubbing ? "replay is-scrubbing" : "replay"} aria-label="Run replay">
+      <div className="replay-head">
+        <span className="replay-title">Replay</span>
+        <div className="replay-transport">
+          <button
+            type="button"
+            className="btn btn-tiny"
+            onClick={() => seekToMs(replay.startMs)}
+            disabled={!replay.hasTimedInstances}
+            title="Jump to the run's start (Home)"
+          >
+            <SkipBack />
+          </button>
+          <button
+            type="button"
+            className={isPlaying ? "btn btn-tiny is-playing" : "btn btn-tiny"}
+            onClick={togglePlay}
+            disabled={prefersReducedMotion || !replay.hasTimedInstances}
+            title={
+              prefersReducedMotion
+                ? "Playback is off because this system asks for reduced motion — scrub or step with the arrow keys instead."
+                : isPlaying
+                  ? "Pause (Space)"
+                  : "Play the run back (Space)"
+            }
+          >
+            {isPlaying ? <Pause /> : <Play />}
+            <span>{isPlaying ? "Pause" : "Play"}</span>
+          </button>
+          <button
+            type="button"
+            className="btn btn-tiny"
+            onClick={() => {
+              setIsPlaying(false);
+              onPlayheadChange(null);
+            }}
+            disabled={!replay.hasTimedInstances}
+            title="Jump to the end of the axis (End)"
+          >
+            <SkipForward />
+          </button>
+          <label className="replay-speed">
+            <span className="replay-speed-label">speed</span>
+            <select
+              className="input"
+              value={speedChoice}
+              onChange={(event) => setSpeedChoice(event.target.value)}
+              disabled={prefersReducedMotion}
+              title={`Playback speed. "fit" stretches or compresses the whole run into about ${PLAYBACK_FIT_SECONDS} seconds.`}
+            >
+              {SPEED_CHOICES.map((choice) => (
+                <option key={choice.id} value={choice.id}>
+                  {choice.label}
+                </option>
+              ))}
+            </select>
+          </label>
+          {prefersReducedMotion ? (
+            <span
+              className="replay-reduced-note"
+              title="Nothing on this page animates itself while your system asks for reduced motion; the playhead still moves when you drag it or step it with the arrow keys."
+            >
+              auto-play off · reduced motion
+            </span>
+          ) : null}
+        </div>
+        <span className="toolbar-spacer" />
+        {replay.hasTimedInstances ? (
+          <span className="replay-readout">
+            <span className="replay-readout-offset">+{formatOffsetCompact(offsetSeconds)}</span>
+            <span className="replay-readout-absolute">{absoluteReadout}</span>
+          </span>
+        ) : null}
+        {replay.unfinished ? (
+          <button
+            type="button"
+            className={isLive ? "replay-live is-live" : "replay-live"}
+            onClick={() => {
+              setIsPlaying(false);
+              onPlayheadChange(null);
+            }}
+            aria-pressed={isLive}
+            title={
+              isLive
+                ? "The playhead is pinned to now; scrubbing back detaches it."
+                : "Re-attach the playhead to now."
+            }
+          >
+            <span className="replay-live-dot" aria-hidden="true" />
+            <span>{isLive ? "Live" : "Go live"}</span>
+          </button>
+        ) : null}
+      </div>
+
+      {replay.unfinished && isLive && !isAutoRefreshOn ? (
+        <p className="replay-note">
+          Live, but auto-refresh is off: the playhead follows the clock while the task data stays as
+          last fetched. Turn on auto-refresh above (or press Refresh) to keep it fed.
+        </p>
+      ) : null}
+
+      {!replay.hasTimedInstances ? (
+        <p className="empty-note replay-empty">
+          No task instance of this run carries a timestamp yet, so there is nothing to place on an
+          axis. The replay appears as soon as the first task is queued or starts.
+        </p>
+      ) : (
+        <div className="replay-chart">
+          <div className="replay-scroll">
+            <div className="replay-lanes">
+              <div className="replay-ruler">
+                <span className="replay-ruler-gutter">from run start</span>
+                {/* The ruler is the playhead's drag surface; the focusable
+                    slider below carries the keyboard contract for it. */}
+                <div
+                  className="replay-ruler-track"
+                  ref={trackRef}
+                  {...scrubHandlers}
+                  title="Drag to move the playhead"
+                >
+                  {tickOffsets.map((offset) => (
+                    <span
+                      key={offset}
+                      className="replay-tick"
+                      style={{ left: `${(offset / Math.max(spanSeconds, 1e-9)) * 100}%` }}
+                      title={`${formatInstant(
+                        replay.startMs + offset * 1000,
+                        replay.offsetMinutes,
+                      )} ${formatOffsetLabel(replay.offsetMinutes)}`}
+                    >
+                      {formatOffsetCompact(offset)}
+                    </span>
+                  ))}
+                </div>
+              </div>
+
+              {replay.groups.map((group) => (
+                <ReplayGroupRows
+                  key={group.scope}
+                  group={group}
+                  axis={axis}
+                  playheadMs={playheadMs}
+                  selection={selection}
+                  onSelect={onSelect}
+                  isFanOutExpanded={isFanOutExpanded}
+                  onToggleFanOut={toggleFanOut}
+                  scrubHandlers={scrubHandlers}
+                />
+              ))}
+
+              <div className="replay-overlay">
+                {tickOffsets.map((offset) => (
+                  <span
+                    key={offset}
+                    className="replay-gridline"
+                    style={{ left: `${(offset / Math.max(spanSeconds, 1e-9)) * 100}%` }}
+                    aria-hidden="true"
+                  />
+                ))}
+                <div className="replay-playhead" style={{ left: `${playheadPercent}%` }}>
+                  {/* A slider over a time axis has no native element:
+                      role=slider plus the arrow/Home/End contract below is the
+                      accessible equivalent, and it reports both readouts. */}
+                  <div
+                    className="replay-grip"
+                    role="slider"
+                    tabIndex={0}
+                    aria-label="Run replay playhead"
+                    aria-valuemin={0}
+                    aria-valuemax={Number(spanSeconds.toFixed(3))}
+                    aria-valuenow={Number(offsetSeconds.toFixed(3))}
+                    aria-valuetext={`+${formatOffsetCompact(offsetSeconds)}, ${absoluteReadout}`}
+                    onKeyDown={handleSliderKeyDown}
+                    {...scrubHandlers}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <ReplayLimits replay={replay} />
+
+      <figcaption className="dag-hint replay-hint">
+        Drag the axis (or any row) to move the playhead; the graphs take the state each task was in
+        at that instant. Click a task name for its details. With the playhead focused, Left and
+        Right step it (hold Shift for a bigger step), Home and End jump to the ends, and Space
+        plays. Hatched lead-ins are queued time; a bar that fades out at the edge has no end
+        recorded yet.
+      </figcaption>
+    </figure>
+  );
+}
+
+function ReplayGroupRows({
+  group,
+  axis,
+  playheadMs,
+  selection,
+  onSelect,
+  isFanOutExpanded,
+  onToggleFanOut,
+  scrubHandlers,
+}: {
+  group: ReplayGroup;
+  axis: AxisGeometry;
+  playheadMs: number;
+  selection: RunNodeSelection | null;
+  onSelect: (selection: RunNodeSelection) => void;
+  isFanOutExpanded: (row: ReplayRow) => boolean;
+  onToggleFanOut: (rowKey: string) => void;
+  scrubHandlers: ScrubHandlers;
+}) {
+  const replayedState = replayedRunState(group.instances, group.state, playheadMs, axis.endMs);
+  return (
+    <div className="replay-group">
+      <div className="replay-group-head">
+        <span className="replay-group-title">
+          {group.scope === MASTER_SCOPE ? "master DAG" : `${group.title} sub-DAG`}
+        </span>
+        <RunStateChip state={replayedState ?? "not run"} />
+        {group.dagId ? (
+          <code className="cell-mono replay-group-dag" title={group.dagId}>
+            {group.dagId}
+          </code>
+        ) : null}
+      </div>
+      {group.note ? <p className="replay-group-note">{group.note}</p> : null}
+      {group.rows.map((row) => (
+        <ReplayRowView
+          key={row.key}
+          row={row}
+          axis={axis}
+          isSelected={selection?.scope === row.scope && selection.taskId === row.taskId}
+          onSelect={onSelect}
+          isExpanded={isFanOutExpanded(row)}
+          onToggleFanOut={onToggleFanOut}
+          scrubHandlers={scrubHandlers}
+        />
+      ))}
+    </div>
+  );
+}
+
+function ReplayRowView({
+  row,
+  axis,
+  isSelected,
+  onSelect,
+  isExpanded,
+  onToggleFanOut,
+  scrubHandlers,
+}: {
+  row: ReplayRow;
+  axis: AxisGeometry;
+  isSelected: boolean;
+  onSelect: (selection: RunNodeSelection) => void;
+  isExpanded: boolean;
+  onToggleFanOut: (rowKey: string) => void;
+  scrubHandlers: ScrubHandlers;
+}) {
+  const isFanOut = row.kind === "fanout";
+  const paintOrdered = useMemo(
+    () => (isFanOut ? [...row.timed].sort((a, b) => fanOutPaintRank(a) - fanOutPaintRank(b)) : []),
+    [isFanOut, row.timed],
+  );
+  const batchesShown = isFanOut && isExpanded;
+  return (
+    <>
+      <div className={isSelected ? "replay-row is-selected" : "replay-row"}>
+        <div className="replay-row-label">
+          <button
+            type="button"
+            className="replay-row-name"
+            onClick={() => onSelect({ scope: row.scope, taskId: row.taskId })}
+            aria-current={isSelected ? "true" : undefined}
+            title={`${row.taskId} — ${row.summary}`}
+          >
+            {row.taskId}
+          </button>
+          {row.deferred ? (
+            <span
+              className="replay-tag is-waits"
+              title="This task defers its worker slot: most of its span was spent waiting on a trigger, not running. The payload cannot separate the two."
+            >
+              waits
+            </span>
+          ) : null}
+          {row.retriedTryNumber !== null ? (
+            <span
+              className="replay-tag is-retry"
+              title={`Attempt ${row.retriedTryNumber}. Only the latest attempt is in this payload — earlier attempts are not shown, so the span below is that last try alone.`}
+            >
+              try {row.retriedTryNumber}
+            </span>
+          ) : null}
+          {isFanOut ? (
+            <button
+              type="button"
+              className="replay-fanout-toggle"
+              onClick={() => onToggleFanOut(row.key)}
+              aria-expanded={isExpanded}
+              title={
+                isExpanded
+                  ? `Collapse these ${row.batches.length} batches into one summary row`
+                  : `Show all ${row.batches.length} batches (fan-outs over ${MAPPED_COLLAPSE_THRESHOLD} collapse by default)`
+              }
+            >
+              <ChevronDown className={isExpanded ? "chevron is-open" : "chevron"} />
+              <span>×{row.batches.length}</span>
+            </button>
+          ) : (
+            <span className="replay-row-duration">{rowDurationText(row.timed)}</span>
+          )}
+        </div>
+        {/* A track is a drag surface for the playhead; selection lives on the
+            row's button, and the playhead itself is the focusable control. */}
+        <div
+          className={isFanOut ? "replay-row-track is-summary" : "replay-row-track"}
+          {...scrubHandlers}
+        >
+          {row.timed.every((timed) => timed.untimed) ? (
+            <span
+              className="replay-untimed"
+              title="Airflow reported this instance with no queue time and no start time (a skip it never scheduled), so the replay cannot place it on the axis: it stays unstarted and only takes its reported state at the axis end."
+            >
+              no timestamps — cannot be placed on the axis
+            </span>
+          ) : (
+            (isFanOut ? paintOrdered : row.timed).map((timed) => (
+              <InstanceBars
+                key={`${timed.instance.map_index}:${timed.instance.start_date ?? "unstarted"}`}
+                timed={timed}
+                label={isFanOut ? `${row.taskId}[${timed.instance.map_index}]` : row.taskId}
+                axis={axis}
+              />
+            ))
+          )}
+        </div>
+      </div>
+      {batchesShown
+        ? row.batches.map((batch) => (
+            <ReplayBatchRowView
+              key={batch.key}
+              row={row}
+              batch={batch}
+              axis={axis}
+              isSelected={isSelected}
+              onSelect={onSelect}
+              scrubHandlers={scrubHandlers}
+            />
+          ))
+        : null}
+    </>
+  );
+}
+
+function ReplayBatchRowView({
+  row,
+  batch,
+  axis,
+  isSelected,
+  onSelect,
+  scrubHandlers,
+}: {
+  row: ReplayRow;
+  batch: ReplayBatchRow;
+  axis: AxisGeometry;
+  isSelected: boolean;
+  onSelect: (selection: RunNodeSelection) => void;
+  scrubHandlers: ScrubHandlers;
+}) {
+  const tryNumber = batch.timed.instance.try_number;
+  return (
+    <div className={isSelected ? "replay-row is-batch is-selected" : "replay-row is-batch"}>
+      <div className="replay-row-label">
+        <button
+          type="button"
+          className="replay-row-name is-batch"
+          onClick={() => onSelect({ scope: row.scope, taskId: row.taskId })}
+          title={`${row.taskId}[${batch.mapIndex}] — one mapped batch of this task`}
+        >
+          [{batch.mapIndex}]
+        </button>
+        {tryNumber !== null && tryNumber > 1 ? (
+          <span
+            className="replay-tag is-retry"
+            title={`Attempt ${tryNumber}. Earlier attempts of this batch are not in the payload.`}
+          >
+            try {tryNumber}
+          </span>
+        ) : null}
+        <span className="replay-row-duration">{rowDurationText([batch.timed])}</span>
+      </div>
+      {/* A drag surface, like the task row's track above. */}
+      <div className="replay-row-track" {...scrubHandlers}>
+        <InstanceBars timed={batch.timed} label={`${row.taskId}[${batch.mapIndex}]`} axis={axis} />
+      </div>
+    </div>
+  );
+}
+
+/** What this reconstruction can and cannot say, stated where it is drawn. */
+function ReplayLimits({ replay }: { replay: RunReplay }) {
+  return (
+    <details className="replay-limits">
+      <summary className="replay-limits-summary">
+        <Info />
+        <span>
+          Reconstructed from each task's start and end timestamps — not an event log.
+          {replay.retriedTaskCount === 0
+            ? null
+            : replay.retriedTaskCount === 1
+              ? " One task here shows only its latest attempt."
+              : ` ${replay.retriedTaskCount} tasks here show only their latest attempt.`}
+        </span>
+      </summary>
+      <ul className="replay-limits-list">
+        <li>
+          <strong>Latest attempt only.</strong> The payload carries one row per task instance, so a
+          retried task shows its final try. Earlier attempts — and the gaps between them — are not
+          in this data and are not drawn.
+        </li>
+        <li>
+          <strong>No progress inside a task.</strong> A bar is all-or-nothing between its start and
+          its end; nothing here knows how far through its work a task was.
+        </li>
+        <li>
+          <strong>Deferred tasks look busy.</strong> A <code>trigger_*</code> task releases its
+          worker and waits on a trigger, but the payload timestamps only its whole span, so it is
+          one continuous bar.
+        </li>
+        <li>
+          <strong>Queued time needs the stamp.</strong> The hatched lead-in is drawn only where
+          Airflow reported <code>queued_at</code>; without it a task appears to start the instant it
+          was scheduled.
+        </li>
+        {replay.untimedInstanceCount > 0 ? (
+          <li>
+            <strong>
+              {replay.untimedInstanceCount} instance
+              {replay.untimedInstanceCount === 1 ? "" : "s"} carry no timestamps.
+            </strong>{" "}
+            Nothing places them on the axis, so they stay unstarted through the replay and take
+            their reported state only at the axis end.
+          </li>
+        ) : null}
+        <li>
+          <strong>Fan-outs over {MAPPED_COLLAPSE_THRESHOLD} batches</strong> collapse to one summary
+          row where every batch shares a lane; expand it (the ×N control) for a row per batch.
+        </li>
+        <li>
+          Stage sub-DAG runs are matched to this master run by start time, as the stage headers say
+          — the replay inherits that heuristic.
+        </li>
+      </ul>
+    </details>
+  );
+}
diff --git a/ui/src/components/SavedQueriesMenu.tsx b/ui/src/components/SavedQueriesMenu.tsx
new file mode 100644
index 00000000..bd33c7b8
--- /dev/null
+++ b/ui/src/components/SavedQueriesMenu.tsx
@@ -0,0 +1,231 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { ChevronDown, Trash2 } from "lucide-react";
+import { DropdownMenu } from "radix-ui";
+import { useEffect, useRef, useState } from "react";
+import {
+  createSavedQuery,
+  deleteSavedQuery,
+  describeApiError,
+  type SavedQuery,
+  updateSavedQuery,
+} from "../api";
+import { formatTimestamp } from "../format";
+
+// Saved-queries dropdown: load always works; save / save-as / delete are
+// hidden entirely when the workspace is read-only (server 403s them anyway).
+//
+// Radix DropdownMenu supplies the roving arrow-key focus, typeahead, Escape
+// and outside-click dismissal, portalling and focus return that this used to
+// half-implement with two document listeners.
+
+export function SavedQueriesMenu({
+  queries,
+  isPending,
+  error,
+  readOnly,
+  loadedQuery,
+  hasText,
+  onLoad,
+  onLoadedQueryChange,
+  currentSql,
+}: {
+  queries: SavedQuery[] | undefined;
+  isPending: boolean;
+  error: unknown;
+  readOnly: boolean;
+  loadedQuery: SavedQuery | null;
+  hasText: boolean;
+  onLoad: (query: SavedQuery) => void;
+  onLoadedQueryChange: (query: SavedQuery | null) => void;
+  currentSql: () => string;
+}) {
+  const queryClient = useQueryClient();
+  const [isOpen, setIsOpen] = useState(false);
+  const [isSaveAsOpen, setIsSaveAsOpen] = useState(false);
+  const [saveAsName, setSaveAsName] = useState("");
+  const saveAsInputRef = useRef<HTMLInputElement | null>(null);
+
+  // The save-as field is not a menu item, so arrow keys never reach it; put
+  // the caret there the moment it appears instead.
+  useEffect(() => {
+    if (isSaveAsOpen) saveAsInputRef.current?.focus();
+  }, [isSaveAsOpen]);
+
+  const invalidateSavedQueries = () => {
+    void queryClient.invalidateQueries({ queryKey: ["saved-queries"] });
+  };
+
+  const createMutation = useMutation({
+    mutationFn: createSavedQuery,
+    onSuccess: (created) => {
+      invalidateSavedQueries();
+      onLoadedQueryChange(created);
+      setIsSaveAsOpen(false);
+      setSaveAsName("");
+    },
+  });
+  const updateMutation = useMutation({
+    mutationFn: (input: { queryId: string; sql: string }) =>
+      updateSavedQuery(input.queryId, { sql: input.sql }),
+    onSuccess: (updated) => {
+      invalidateSavedQueries();
+      onLoadedQueryChange(updated);
+    },
+  });
+  const deleteMutation = useMutation({
+    mutationFn: deleteSavedQuery,
+    onSuccess: (_result, deletedQueryId) => {
+      invalidateSavedQueries();
+      if (loadedQuery?.id === deletedQueryId) onLoadedQueryChange(null);
+    },
+  });
+
+  const saveToLoaded = () => {
+    const sqlText = currentSql();
+    if (!loadedQuery || !sqlText) return;
+    updateMutation.mutate({ queryId: loadedQuery.id, sql: sqlText });
+  };
+
+  const submitSaveAs = () => {
+    const sqlText = currentSql();
+    const trimmedName = saveAsName.trim();
+    if (!trimmedName || !sqlText) return;
+    createMutation.mutate({ name: trimmedName, sql: sqlText });
+  };
+
+  const writeError = createMutation.isError
+    ? createMutation.error
+    : updateMutation.isError
+      ? updateMutation.error
+      : deleteMutation.isError
+        ? deleteMutation.error
+        : null;
+
+  return (
+    <DropdownMenu.Root
+      open={isOpen}
+      onOpenChange={(open) => {
+        setIsOpen(open);
+        if (!open) setIsSaveAsOpen(false);
+      }}
+    >
+      <DropdownMenu.Trigger className="btn" title="Saved queries">
+        <span className="menu-toggle-label">
+          {loadedQuery ? loadedQuery.name : "Saved queries"}
+        </span>
+        <ChevronDown className={isOpen ? "chevron is-open" : "chevron"} />
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content className="menu-panel" align="start" sideOffset={4}>
+          {isPending ? (
+            <p className="menu-note">Loading saved queries…</p>
+          ) : error ? (
+            <p className="menu-note menu-error">{describeApiError(error)}</p>
+          ) : (queries ?? []).length === 0 ? (
+            <p className="menu-note">
+              No saved queries yet.{readOnly ? "" : " Use “Save as…” to keep the current SQL."}
+            </p>
+          ) : (
+            <div className="menu-list">
+              {(queries ?? []).map((savedQuery) => (
+                <div key={savedQuery.id} className="menu-row">
+                  <DropdownMenu.Item
+                    className={
+                      savedQuery.id === loadedQuery?.id ? "menu-item is-active" : "menu-item"
+                    }
+                    onSelect={() => onLoad(savedQuery)}
+                    title={savedQuery.sql}
+                  >
+                    <span className="menu-item-name">{savedQuery.name}</span>
+                    <span className="menu-item-time">{formatTimestamp(savedQuery.updated_at)}</span>
+                  </DropdownMenu.Item>
+                  {readOnly ? null : (
+                    <DropdownMenu.Item
+                      className="btn btn-ghost btn-tiny"
+                      disabled={deleteMutation.isPending}
+                      onSelect={(event) => {
+                        // Deleting must not close the menu — the point is to
+                        // prune several entries in one visit.
+                        event.preventDefault();
+                        deleteMutation.mutate(savedQuery.id);
+                      }}
+                      title={`Delete "${savedQuery.name}"`}
+                      aria-label={`Delete saved query ${savedQuery.name}`}
+                    >
+                      <Trash2 />
+                    </DropdownMenu.Item>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+          {readOnly ? null : (
+            <div className="menu-actions">
+              <DropdownMenu.Item
+                className="btn btn-tiny"
+                disabled={!loadedQuery || !hasText || updateMutation.isPending}
+                onSelect={(event) => {
+                  event.preventDefault();
+                  saveToLoaded();
+                }}
+                title={
+                  loadedQuery
+                    ? `Overwrite "${loadedQuery.name}" with the editor's SQL`
+                    : "Load a query first, or use Save as…"
+                }
+              >
+                {updateMutation.isPending ? "Saving…" : "Save"}
+              </DropdownMenu.Item>
+              <DropdownMenu.Item
+                className="btn btn-tiny"
+                disabled={!hasText}
+                onSelect={(event) => {
+                  event.preventDefault();
+                  setIsSaveAsOpen((previous) => !previous);
+                }}
+                title="Save the editor's SQL as a new named query"
+              >
+                Save as…
+              </DropdownMenu.Item>
+            </div>
+          )}
+          {isSaveAsOpen && !readOnly ? (
+            <form
+              className="menu-saveas"
+              onSubmit={(event) => {
+                event.preventDefault();
+                submitSaveAs();
+              }}
+            >
+              {/* A text field inside a menu has to opt out of the menu's own
+                  keyboard handling — Radix swallows Tab and reads printable
+                  keys as typeahead. Escape is left alone so the dismiss layer
+                  still closes the menu from inside the field. */}
+              <input
+                className="input"
+                placeholder="Query name"
+                value={saveAsName}
+                onChange={(event) => setSaveAsName(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key !== "Escape") event.stopPropagation();
+                }}
+                ref={saveAsInputRef}
+                aria-label="New saved query name"
+              />
+              <button
+                type="submit"
+                className="btn btn-tiny"
+                disabled={!saveAsName.trim() || createMutation.isPending}
+              >
+                {createMutation.isPending ? "Saving…" : "Save"}
+              </button>
+            </form>
+          ) : null}
+          {writeError ? (
+            <p className="menu-note menu-error">{describeApiError(writeError)}</p>
+          ) : null}
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+}
diff --git a/ui/src/components/SqlEditor.tsx b/ui/src/components/SqlEditor.tsx
new file mode 100644
index 00000000..ee506d48
--- /dev/null
+++ b/ui/src/components/SqlEditor.tsx
@@ -0,0 +1,196 @@
+import { autocompletion, closeBrackets, completionKeymap } from "@codemirror/autocomplete";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { PostgreSQL, sql } from "@codemirror/lang-sql";
+import { bracketMatching, HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { Compartment, EditorState } from "@codemirror/state";
+import { drawSelection, EditorView, keymap, lineNumbers, placeholder } from "@codemirror/view";
+import { tags } from "@lezer/highlight";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+
+// CodeMirror 6 SQL editor. Everything bundles locally (lezer grammars included),
+// so the offline rule holds: no CDN, no fonts, no remote assets.
+
+/** Table name -> column names, fed to SQL autocompletion. */
+export type SqlSchema = Record<string, string[]>;
+
+export interface SqlEditorHandle {
+  /** Replace the whole document (loading a saved query). */
+  setDocument(text: string): void;
+  /** Insert at the cursor, replacing any selection (catalog-tree affordance). */
+  insertText(text: string): void;
+  /**
+   * The SQL a run should use: the trimmed selection when one exists and
+   * preferSelection is set, otherwise the trimmed full document.
+   */
+  currentSql(preferSelection: boolean): string;
+}
+
+interface SqlEditorProps {
+  initialDoc: string;
+  schema: SqlSchema;
+  onDocChanged: (doc: string) => void;
+  onSelectionChanged: (hasSelection: boolean) => void;
+  /** Cmd/Ctrl+Enter. The parent decides what to run via the handle. */
+  onRunShortcut: () => void;
+}
+
+// Colors ride the app's CSS custom properties so light/dark themes just work.
+const editorTheme = EditorView.theme({
+  "&": {
+    height: "100%",
+    fontSize: "12.5px",
+    backgroundColor: "var(--surface)",
+    color: "var(--ink)",
+  },
+  "&.cm-focused": { outline: "none" },
+  ".cm-scroller": { fontFamily: "var(--font-mono)", lineHeight: "1.55" },
+  ".cm-content": { caretColor: "var(--ink)", padding: "8px 0" },
+  ".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--ink)" },
+  "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground":
+    {
+      backgroundColor: "var(--accent-soft)",
+    },
+  ".cm-gutters": {
+    backgroundColor: "var(--surface-sunken)",
+    color: "var(--ink-faint)",
+    border: "none",
+    borderRight: "1px solid var(--border)",
+  },
+  ".cm-placeholder": { color: "var(--ink-faint)" },
+  ".cm-tooltip": {
+    backgroundColor: "var(--surface)",
+    border: "1px solid var(--border-strong)",
+    color: "var(--ink)",
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {
+    backgroundColor: "var(--accent-soft)",
+    color: "var(--accent-ink)",
+  },
+});
+
+// Syntax highlighting under the app's neutral-chrome rule: the structural
+// tokens separate by WEIGHT and ink step (keyword, type, operator, comment)
+// and only the two token classes that are literal VALUES keep a hue — strings
+// green, numbers amber, the same --ok / --warn that mean "a value" elsewhere.
+// Keywords were accent-coloured while the accent was teal; a near-black accent
+// would have made them indistinguishable from plain text, so the weight that
+// was reinforcing the colour now carries the distinction on its own.
+const sqlHighlightStyle = HighlightStyle.define([
+  { tag: tags.keyword, color: "var(--ink)", fontWeight: "700" },
+  { tag: tags.string, color: "var(--ok)" },
+  { tag: tags.number, color: "var(--warn)" },
+  { tag: tags.bool, color: "var(--warn)" },
+  { tag: tags.comment, color: "var(--ink-faint)", fontStyle: "italic" },
+  { tag: tags.operator, color: "var(--ink-muted)" },
+  { tag: tags.punctuation, color: "var(--ink-muted)" },
+  { tag: tags.typeName, color: "var(--ink)", fontWeight: "600" },
+]);
+
+function sqlLanguageExtension(schema: SqlSchema) {
+  return sql({ dialect: PostgreSQL, schema, upperCaseKeywords: true });
+}
+
+export const SqlEditor = forwardRef<SqlEditorHandle, SqlEditorProps>(function SqlEditor(
+  { initialDoc, schema, onDocChanged, onSelectionChanged, onRunShortcut },
+  ref,
+) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const languageCompartmentRef = useRef<Compartment | null>(null);
+  if (languageCompartmentRef.current === null) languageCompartmentRef.current = new Compartment();
+  const languageCompartment = languageCompartmentRef.current;
+
+  // Latest callbacks live behind a ref so the (single) EditorView never holds
+  // stale closures and never needs recreating on parent re-renders.
+  const callbacksRef = useRef({ onDocChanged, onSelectionChanged, onRunShortcut });
+  callbacksRef.current = { onDocChanged, onSelectionChanged, onRunShortcut };
+  const initialDocRef = useRef(initialDoc);
+  const schemaRef = useRef(schema);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const runShortcutBinding = {
+      key: "Mod-Enter",
+      run: () => {
+        callbacksRef.current.onRunShortcut();
+        return true;
+      },
+    };
+    const updateListener = EditorView.updateListener.of((update) => {
+      if (update.docChanged) callbacksRef.current.onDocChanged(update.state.doc.toString());
+      if (update.selectionSet || update.docChanged) {
+        callbacksRef.current.onSelectionChanged(!update.state.selection.main.empty);
+      }
+    });
+    const state = EditorState.create({
+      doc: initialDocRef.current,
+      extensions: [
+        lineNumbers(),
+        drawSelection(),
+        history(),
+        bracketMatching(),
+        closeBrackets(),
+        autocompletion(),
+        // The run shortcut goes first so nothing below can shadow Mod-Enter.
+        keymap.of([runShortcutBinding, ...completionKeymap, ...defaultKeymap, ...historyKeymap]),
+        languageCompartment.of(sqlLanguageExtension(schemaRef.current)),
+        syntaxHighlighting(sqlHighlightStyle),
+        editorTheme,
+        EditorView.lineWrapping,
+        placeholder("SELECT episode_id, task, success FROM episodes WHERE …"),
+        updateListener,
+      ],
+    });
+    const view = new EditorView({ state, parent: container });
+    viewRef.current = view;
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+  }, [languageCompartment]);
+
+  // The catalog tables load async; feed them into completion when they arrive.
+  useEffect(() => {
+    schemaRef.current = schema;
+    const view = viewRef.current;
+    if (!view) return;
+    view.dispatch({ effects: languageCompartment.reconfigure(sqlLanguageExtension(schema)) });
+  }, [schema, languageCompartment]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      setDocument(text: string) {
+        const view = viewRef.current;
+        if (!view) return;
+        view.dispatch({
+          changes: { from: 0, to: view.state.doc.length, insert: text },
+          selection: { anchor: text.length },
+        });
+        view.focus();
+      },
+      insertText(text: string) {
+        const view = viewRef.current;
+        if (!view) return;
+        const range = view.state.selection.main;
+        view.dispatch({
+          changes: { from: range.from, to: range.to, insert: text },
+          selection: { anchor: range.from + text.length },
+        });
+        view.focus();
+      },
+      currentSql(preferSelection: boolean) {
+        const view = viewRef.current;
+        if (!view) return "";
+        const range = view.state.selection.main;
+        if (preferSelection && !range.empty)
+          return view.state.sliceDoc(range.from, range.to).trim();
+        return view.state.doc.toString().trim();
+      },
+    }),
+    [],
+  );
+
+  return <div className="sql-editor" ref={containerRef} />;
+});
diff --git a/ui/src/components/SqlFooter.tsx b/ui/src/components/SqlFooter.tsx
new file mode 100644
index 00000000..19b62dce
--- /dev/null
+++ b/ui/src/components/SqlFooter.tsx
@@ -0,0 +1,64 @@
+import { Check, ChevronDown, Copy } from "lucide-react";
+import { useState } from "react";
+import { useCopyToClipboard } from "../useCopyToClipboard";
+
+/**
+ * The compiled-query readout: the server returns the exact SELECT it ran for
+ * the current filters, and this strip keeps it visible, expandable, copyable.
+ */
+export function SqlFooter({
+  sql,
+  emptyMessage = "compiled query appears here once episodes load",
+}: {
+  sql: string | undefined;
+  emptyMessage?: string;
+}) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const { copyState, copyText } = useCopyToClipboard();
+
+  const copySql = () => {
+    if (sql) void copyText(sql);
+  };
+
+  const copyLabel =
+    copyState === "copied" ? "Copied" : copyState === "failed" ? "Copy failed" : "Copy";
+
+  return (
+    <footer className="sql-footer">
+      <button
+        type="button"
+        className="sql-toggle"
+        onClick={() => setIsExpanded((previous) => !previous)}
+        aria-expanded={isExpanded}
+        title={isExpanded ? "Collapse the compiled query" : "Expand the compiled query"}
+      >
+        <ChevronDown className={isExpanded ? "chevron is-open" : "chevron"} />
+        <span>SQL</span>
+      </button>
+      {sql ? (
+        isExpanded ? (
+          <pre className="sql-full">{sql}</pre>
+        ) : (
+          <code
+            className="sql-preview"
+            title="Query compiled by the server for the current filters"
+          >
+            {sql}
+          </code>
+        )
+      ) : (
+        <code className="sql-preview sql-empty">{emptyMessage}</code>
+      )}
+      <button
+        type="button"
+        className="btn btn-ghost sql-copy"
+        onClick={copySql}
+        disabled={!sql}
+        title="Copy the compiled SQL"
+      >
+        {copyState === "copied" ? <Check /> : <Copy />}
+        <span>{copyLabel}</span>
+      </button>
+    </footer>
+  );
+}
diff --git a/ui/src/components/StatusChip.tsx b/ui/src/components/StatusChip.tsx
new file mode 100644
index 00000000..72d65f33
--- /dev/null
+++ b/ui/src/components/StatusChip.tsx
@@ -0,0 +1,29 @@
+type StatusTone = "ok" | "warn" | "err" | "muted";
+
+// Unknown statuses render gracefully as muted rather than failing (forward compat).
+function toneForStatus(status: string): StatusTone {
+  switch (status.toLowerCase()) {
+    case "ok":
+    case "pass":
+    case "passed":
+    case "success":
+      return "ok";
+    case "quarantined":
+    case "warn":
+    case "warning":
+      return "warn";
+    case "fail":
+    case "failed":
+    case "error":
+      return "err";
+    default:
+      return "muted";
+  }
+}
+
+export function StatusChip({ status }: { status: string | null }) {
+  // A null state is Airflow's "not scheduled yet", not an error: it reads as
+  // the muted em dash the tables use for every other absent value.
+  if (status === null) return <span className="cell-null">—</span>;
+  return <span className={`chip chip-${toneForStatus(status)}`}>{status}</span>;
+}
diff --git a/ui/src/components/ThemeControl.tsx b/ui/src/components/ThemeControl.tsx
new file mode 100644
index 00000000..fb72fa85
--- /dev/null
+++ b/ui/src/components/ThemeControl.tsx
@@ -0,0 +1,87 @@
+import { Monitor, Moon, Sun } from "lucide-react";
+import { type ComponentType, useState } from "react";
+import {
+  type ResolvedTheme,
+  THEME_PREFERENCES,
+  type ThemePreference,
+  useThemePreference,
+} from "../theme";
+
+// Theme control, in the nav rail's footer next to the rest of the workspace
+// readout.
+//
+// ONE quiet icon button that cycles system -> light -> dark -> system, showing
+// the state it is in. The rail is chrome, and a three-way segmented control
+// down there was reading as loud as the four destinations above it; a theme is
+// set once and then forgotten, so it earns one muted glyph, not three lit ones.
+//
+// What a cycling toggle costs, and how each cost is paid:
+//   * the icon alone does not say what pressing will do — the accessible name
+//     says both ("Theme: dark. Switch to following the system theme."), and it
+//     is the button's tooltip as well, so sighted readers get the same sentence;
+//   * the icon alone is not announced when it changes under a screen reader —
+//     a visually-hidden polite status says the new state after every press;
+//   * a state three presses away is slower than one click — acceptable for a
+//     setting nobody touches twice a session.
+//
+// The three-state semantics, the persistence and the matchMedia tracking all
+// stay in theme.ts, untouched: this file only decides how they are driven.
+
+const THEME_ICONS: Record<ThemePreference, ComponentType> = {
+  system: Monitor,
+  light: Sun,
+  dark: Moon,
+};
+
+/** The cycle order is THEME_PREFERENCES' order — system, light, dark. */
+function nextPreference(current: ThemePreference): ThemePreference {
+  const index = THEME_PREFERENCES.indexOf(current);
+  return THEME_PREFERENCES[(index + 1) % THEME_PREFERENCES.length] ?? "system";
+}
+
+/**
+ * The state the button is in, in words. "system" names what it is currently
+ * resolving to, because that is the part a reader cannot see from the glyph.
+ */
+function describeState(preference: ThemePreference, resolvedTheme: ResolvedTheme): string {
+  return preference === "system" ? `following system (${resolvedTheme})` : preference;
+}
+
+/** The state a press moves to, phrased as the end of "Switch to …". */
+function describeTarget(preference: ThemePreference): string {
+  return preference === "system" ? "following the system theme" : preference;
+}
+
+export function ThemeControl() {
+  const { preference, resolvedTheme, setPreference } = useThemePreference();
+  // The status region stays in the DOM from the first paint so the screen
+  // reader has registered it, but stays EMPTY until the reader presses the
+  // button — a live region that arrives with text already in it gets announced
+  // on page load, which is not a change and not worth saying.
+  const [hasCycled, setHasCycled] = useState(false);
+  const Icon = THEME_ICONS[preference];
+  const target = nextPreference(preference);
+  const label = `Theme: ${describeState(preference, resolvedTheme)}. Switch to ${describeTarget(target)}.`;
+  return (
+    <div className="theme-control">
+      <button
+        type="button"
+        className="theme-toggle"
+        aria-label={label}
+        title={label}
+        onClick={() => {
+          setPreference(target);
+          setHasCycled(true);
+        }}
+      >
+        <Icon />
+      </button>
+      {/* Derived from the live preference rather than from remembered text, so
+          it cannot drift from what the button is showing — including when
+          "system" is re-entered and resolves to the theme already on screen. */}
+      <span className="visually-hidden" role="status" aria-live="polite">
+        {hasCycled ? `Theme: ${describeState(preference, resolvedTheme)}.` : ""}
+      </span>
+    </div>
+  );
+}
diff --git a/ui/src/components/ValueCell.tsx b/ui/src/components/ValueCell.tsx
new file mode 100644
index 00000000..f65b2380
--- /dev/null
+++ b/ui/src/components/ValueCell.tsx
@@ -0,0 +1,39 @@
+import { formatNumber, formatTimestamp, looksLikeIsoTimestamp } from "../format";
+import { StatusChip } from "./StatusChip";
+
+const LONG_TEXT_TITLE_THRESHOLD = 32;
+
+function isIdentifierColumn(columnName: string): boolean {
+  return (
+    columnName === "episode_id" ||
+    columnName.endsWith("_id") ||
+    columnName.endsWith("fingerprint") ||
+    columnName === "uri"
+  );
+}
+
+/** Generic display for one catalog value; column name only refines styling. */
+export function ValueCell({ columnName, value }: { columnName: string; value: unknown }) {
+  if (value === null || value === undefined) return <span className="cell-null">—</span>;
+  if (columnName === "status" && typeof value === "string") return <StatusChip status={value} />;
+  if (typeof value === "boolean") {
+    return <span className="cell-mono">{value ? "true" : "false"}</span>;
+  }
+  if (typeof value === "number") return <span className="cell-num">{formatNumber(value)}</span>;
+  const text = typeof value === "string" ? value : JSON.stringify(value);
+  if (looksLikeIsoTimestamp(text)) {
+    return (
+      <span className="cell-mono" title={text}>
+        {formatTimestamp(text)}
+      </span>
+    );
+  }
+  return (
+    <span
+      className={isIdentifierColumn(columnName) ? "cell-mono" : undefined}
+      title={text.length > LONG_TEXT_TITLE_THRESHOLD ? text : undefined}
+    >
+      {text}
+    </span>
+  );
+}
diff --git a/ui/src/components/VersionChip.tsx b/ui/src/components/VersionChip.tsx
new file mode 100644
index 00000000..f386276e
--- /dev/null
+++ b/ui/src/components/VersionChip.tsx
@@ -0,0 +1,38 @@
+import { Check, Copy } from "lucide-react";
+import { shortFingerprint } from "../format";
+import { useCopyToClipboard } from "../useCopyToClipboard";
+
+/**
+ * A step's content-hash version: truncated for density (the same
+ * shortFingerprint rule the episode dossier uses), full value on hover, one
+ * click copies the whole hash (diffing pipelines needs the exact string).
+ */
+export function VersionChip({ version }: { version: string | null }) {
+  const { copyState, copyText } = useCopyToClipboard();
+  // Some served versions are nullable (a check_runs LEFT JOIN that matched
+  // nothing). There is no hash to show or copy, so it reads as absent.
+  if (version === null) return <span className="cell-null">—</span>;
+
+  const title =
+    copyState === "copied"
+      ? "Copied"
+      : copyState === "failed"
+        ? "Copy failed"
+        : `${version} — click to copy`;
+
+  return (
+    <button
+      type="button"
+      className="version-chip"
+      onClick={() => void copyText(version)}
+      title={title}
+    >
+      <span className="version-chip-text">{shortFingerprint(version)}</span>
+      {copyState === "copied" ? (
+        <Check className="version-chip-icon" />
+      ) : (
+        <Copy className="version-chip-icon" />
+      )}
+    </button>
+  );
+}
diff --git a/ui/src/dagLayout.ts b/ui/src/dagLayout.ts
new file mode 100644
index 00000000..258a08cd
--- /dev/null
+++ b/ui/src/dagLayout.ts
@@ -0,0 +1,274 @@
+// Hand-rolled left-to-right DAG layout: longest-path layering plus barycenter
+// row ordering, then bezier routing. Pure functions, no dependency — the
+// offline rule (and the "no captive UI" posture) means the workspace UI ships
+// no graph or chart library, so the ~100 lines below are the layout engine.
+
+export type DagEdgeKind = "dependency" | "gate";
+
+/** The minimum a node must carry to be placed; DagGraph passes richer objects. */
+export interface LayoutInputNode {
+  id: string;
+  /**
+   * Taller than the default, for a node that draws its contents inside itself
+   * (process_batch lists the steps it runs). Width stays uniform: a column is
+   * a column, and only the vertical extent varies.
+   */
+  height?: number;
+}
+
+export interface LayoutInputEdge {
+  from: string;
+  to: string;
+  /** "gate" edges are conditional (the quarantine gate), drawn distinctly. */
+  kind?: DagEdgeKind;
+  label?: string | null;
+}
+
+export interface PositionedNode {
+  id: string;
+  layer: number;
+  row: number;
+  x: number;
+  y: number;
+  /** As requested by the node, or NODE_HEIGHT. Connectors anchor at its middle. */
+  height: number;
+}
+
+export interface RoutedEdge {
+  key: string;
+  path: string;
+  kind: DagEdgeKind;
+  label: string | null;
+  labelX: number;
+  labelY: number;
+  /** Hover text on the connector itself. */
+  title: string;
+}
+
+export interface DagLayout {
+  nodes: Map<string, PositionedNode>;
+  edges: RoutedEdge[];
+  width: number;
+  height: number;
+}
+
+export const NODE_WIDTH = 158;
+/** Two lines of task id plus the state/badge row: the longest generated id
+ * (quarantine_budget_gate) wraps rather than being cut off. This is the
+ * default; a node may ask for more via ``LayoutInputNode.height``. */
+export const NODE_HEIGHT = 58;
+
+const COLUMN_GAP = 44;
+const ROW_GAP = 18;
+const CANVAS_PADDING = 14;
+/** Room for the offset cards behind a mapped (fan-out) node. */
+const STACK_ALLOWANCE = 10;
+/** Control-point inset: small, so long connectors rise steeply and clear the
+ * nodes they fly over instead of grazing their boxes. */
+const ARC_CONTROL_INSET = 28;
+const ARC_BASE_LIFT = 30;
+const ARC_LIFT_PER_LAYER = 11;
+const GATE_BASE_DIP = 32;
+/** Long connectors stop climbing after this many layers: by then they already
+ * clear every node they fly over, and more lift is only wasted whitespace. */
+const MAX_ARC_LIFT_STEPS = 5;
+
+/** Longest-path layering (Kahn): a node sits one layer right of its deepest
+ * upstream. Nodes inside a cycle never dequeue and keep their relaxed layer —
+ * a cycle is not a DAG, and rendering something beats rendering nothing. */
+function assignLayers(nodeIds: readonly string[], edges: readonly LayoutInputEdge[]) {
+  const layerByNodeId = new Map<string, number>(nodeIds.map((nodeId) => [nodeId, 0]));
+  const downstreamByNodeId = new Map<string, string[]>(nodeIds.map((nodeId) => [nodeId, []]));
+  const remainingUpstream = new Map<string, number>(nodeIds.map((nodeId) => [nodeId, 0]));
+
+  for (const edge of edges) {
+    // Edges naming a task this graph does not render are ignored, not fatal.
+    if (!layerByNodeId.has(edge.from) || !layerByNodeId.has(edge.to)) continue;
+    downstreamByNodeId.get(edge.from)?.push(edge.to);
+    remainingUpstream.set(edge.to, (remainingUpstream.get(edge.to) ?? 0) + 1);
+  }
+
+  const queue = nodeIds.filter((nodeId) => remainingUpstream.get(nodeId) === 0);
+  for (let cursor = 0; cursor < queue.length; cursor++) {
+    const nodeId = queue[cursor] as string;
+    const nodeLayer = layerByNodeId.get(nodeId) ?? 0;
+    for (const downstreamId of downstreamByNodeId.get(nodeId) ?? []) {
+      layerByNodeId.set(
+        downstreamId,
+        Math.max(layerByNodeId.get(downstreamId) ?? 0, nodeLayer + 1),
+      );
+      const remaining = (remainingUpstream.get(downstreamId) ?? 0) - 1;
+      remainingUpstream.set(downstreamId, remaining);
+      if (remaining === 0) queue.push(downstreamId);
+    }
+  }
+  return layerByNodeId;
+}
+
+/** Two barycenter sweeps: pull each node towards the mean row of its
+ * neighbours in the previous/next column, which straightens the chains and
+ * keeps parallel branches from crossing. */
+function orderRows(
+  columns: string[][],
+  upstreamByNodeId: Map<string, string[]>,
+  downstreamByNodeId: Map<string, string[]>,
+): Map<string, number> {
+  const rowByNodeId = new Map<string, number>();
+  const refreshRows = () => {
+    for (const column of columns) {
+      for (const [rowIndex, nodeId] of column.entries()) rowByNodeId.set(nodeId, rowIndex);
+    }
+  };
+  refreshRows();
+
+  const barycenterOf = (nodeId: string, neighbours: readonly string[]): number => {
+    const rows = neighbours
+      .map((neighbourId) => rowByNodeId.get(neighbourId))
+      .filter((row): row is number => row !== undefined);
+    if (rows.length === 0) return rowByNodeId.get(nodeId) ?? 0;
+    return rows.reduce((total, row) => total + row, 0) / rows.length;
+  };
+
+  const sortColumn = (column: string[], neighboursOf: Map<string, string[]>) => {
+    const keyed = column.map((nodeId, index) => ({
+      nodeId,
+      index,
+      key: barycenterOf(nodeId, neighboursOf.get(nodeId) ?? []),
+    }));
+    keyed.sort((left, right) => left.key - right.key || left.index - right.index);
+    column.splice(0, column.length, ...keyed.map((entry) => entry.nodeId));
+  };
+
+  for (let pass = 0; pass < 2; pass++) {
+    for (let columnIndex = 1; columnIndex < columns.length; columnIndex++) {
+      sortColumn(columns[columnIndex] as string[], upstreamByNodeId);
+      refreshRows();
+    }
+    for (let columnIndex = columns.length - 2; columnIndex >= 0; columnIndex--) {
+      sortColumn(columns[columnIndex] as string[], downstreamByNodeId);
+      refreshRows();
+    }
+  }
+  return rowByNodeId;
+}
+
+export function layoutDag(
+  nodes: readonly LayoutInputNode[],
+  edges: readonly LayoutInputEdge[],
+): DagLayout {
+  const nodeIds = nodes.map((node) => node.id);
+  const layerByNodeId = assignLayers(nodeIds, edges);
+
+  const upstreamByNodeId = new Map<string, string[]>(nodeIds.map((nodeId) => [nodeId, []]));
+  const downstreamByNodeId = new Map<string, string[]>(nodeIds.map((nodeId) => [nodeId, []]));
+  const drawableEdges = edges.filter(
+    (edge) => layerByNodeId.has(edge.from) && layerByNodeId.has(edge.to),
+  );
+  for (const edge of drawableEdges) {
+    downstreamByNodeId.get(edge.from)?.push(edge.to);
+    upstreamByNodeId.get(edge.to)?.push(edge.from);
+  }
+
+  const columnCount = Math.max(1, ...nodeIds.map((nodeId) => (layerByNodeId.get(nodeId) ?? 0) + 1));
+  const columns: string[][] = Array.from({ length: columnCount }, () => []);
+  for (const nodeId of nodeIds) columns[layerByNodeId.get(nodeId) ?? 0]?.push(nodeId);
+  const rowByNodeId = orderRows(columns, upstreamByNodeId, downstreamByNodeId);
+
+  // Headroom for connectors that fly over a column, and legroom for the gate
+  // connectors, which dip below the band so they never trace a real edge.
+  const spanOf = (edge: LayoutInputEdge): number =>
+    (layerByNodeId.get(edge.to) ?? 0) - (layerByNodeId.get(edge.from) ?? 0);
+  const liftStepsOf = (span: number): number => Math.min(Math.abs(span) - 1, MAX_ARC_LIFT_STEPS);
+  const liftOf = (span: number): number => ARC_BASE_LIFT + liftStepsOf(span) * ARC_LIFT_PER_LAYER;
+  const dipOf = (span: number): number => GATE_BASE_DIP + liftStepsOf(span) * ARC_LIFT_PER_LAYER;
+  const arcLifts = drawableEdges
+    .filter((edge) => edge.kind !== "gate" && Math.abs(spanOf(edge)) > 1)
+    .map((edge) => liftOf(spanOf(edge)));
+  const gateDips = drawableEdges
+    .filter((edge) => edge.kind === "gate")
+    .map((edge) => dipOf(spanOf(edge)));
+  const headroom = arcLifts.length > 0 ? Math.max(...arcLifts) : 0;
+  const legroom = gateDips.length > 0 ? Math.max(...gateDips) + 14 : 0;
+
+  // Heights vary per node (a container node draws its contents inside itself),
+  // so a column's extent is the sum of its own nodes rather than a count times
+  // a constant, and the band is the tallest such column.
+  const heightByNodeId = new Map<string, number>(
+    nodes.map((node) => [node.id, node.height ?? NODE_HEIGHT]),
+  );
+  const heightOf = (nodeId: string): number => heightByNodeId.get(nodeId) ?? NODE_HEIGHT;
+  const columnHeightOf = (column: readonly string[]): number =>
+    column.reduce((total, nodeId) => total + heightOf(nodeId), 0) +
+    Math.max(0, column.length - 1) * ROW_GAP;
+  const bandHeight = Math.max(NODE_HEIGHT, ...columns.map(columnHeightOf));
+  const bandTop = CANVAS_PADDING + headroom;
+
+  const positionedNodes = new Map<string, PositionedNode>();
+  columns.forEach((column, columnIndex) => {
+    // Each column is centred in the band, so a short column sits beside a tall
+    // one's middle rather than being pinned to its top.
+    let nodeTop = bandTop + (bandHeight - columnHeightOf(column)) / 2;
+    column.forEach((nodeId, rowIndex) => {
+      const nodeHeight = heightOf(nodeId);
+      positionedNodes.set(nodeId, {
+        id: nodeId,
+        layer: columnIndex,
+        row: rowByNodeId.get(nodeId) ?? rowIndex,
+        x: CANVAS_PADDING + columnIndex * (NODE_WIDTH + COLUMN_GAP),
+        y: nodeTop,
+        height: nodeHeight,
+      });
+      nodeTop += nodeHeight + ROW_GAP;
+    });
+  });
+
+  const routedEdges: RoutedEdge[] = [];
+  for (const edge of drawableEdges) {
+    const source = positionedNodes.get(edge.from);
+    const target = positionedNodes.get(edge.to);
+    if (!source || !target) continue;
+    const kind: DagEdgeKind = edge.kind ?? "dependency";
+    const startX = source.x + NODE_WIDTH;
+    const startY = source.y + source.height / 2;
+    const endX = target.x;
+    const endY = target.y + target.height / 2;
+    const span = target.layer - source.layer;
+
+    let path: string;
+    let labelX = (startX + endX) / 2;
+    let labelY = (startY + endY) / 2 - 7;
+    if (kind === "gate") {
+      const apexY = bandTop + bandHeight + dipOf(span);
+      path = `M${startX} ${startY} C${startX + ARC_CONTROL_INSET} ${apexY} ${endX - ARC_CONTROL_INSET} ${apexY} ${endX} ${endY}`;
+      labelY = apexY - 6;
+    } else if (Math.abs(span) > 1) {
+      const apexY = bandTop - liftOf(span);
+      path = `M${startX} ${startY} C${startX + ARC_CONTROL_INSET} ${apexY} ${endX - ARC_CONTROL_INSET} ${apexY} ${endX} ${endY}`;
+      labelY = apexY + 14;
+    } else {
+      const bend = Math.max(22, (endX - startX) * 0.45);
+      path = `M${startX} ${startY} C${startX + bend} ${startY} ${endX - bend} ${endY} ${endX} ${endY}`;
+      labelX = (startX + endX) / 2;
+    }
+    routedEdges.push({
+      key: `${edge.from}->${edge.to}:${kind}`,
+      path,
+      kind,
+      label: edge.label ?? null,
+      labelX,
+      labelY,
+      title: edge.label ? `${edge.from} → ${edge.to} (${edge.label})` : `${edge.from} → ${edge.to}`,
+    });
+  }
+
+  return {
+    nodes: positionedNodes,
+    edges: routedEdges,
+    width:
+      CANVAS_PADDING * 2 +
+      columnCount * NODE_WIDTH +
+      (columnCount - 1) * COLUMN_GAP +
+      STACK_ALLOWANCE,
+    height: bandTop + bandHeight + legroom + CANVAS_PADDING + STACK_ALLOWANCE,
+  };
+}
diff --git a/ui/src/format.ts b/ui/src/format.ts
new file mode 100644
index 00000000..747bf541
--- /dev/null
+++ b/ui/src/format.ts
@@ -0,0 +1,126 @@
+// Display formatting for values coming out of the catalog. Pure functions only.
+
+import type { EpisodeMeasurement, EpisodeRow } from "./api";
+
+const ISO_TIMESTAMP_PATTERN = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/;
+
+export function looksLikeIsoTimestamp(text: string): boolean {
+  return ISO_TIMESTAMP_PATTERN.test(text);
+}
+
+/** "2026-08-21T14:03:22.123456+00:00" -> "2026-08-21 14:03:22" (full value goes in title). */
+export function formatTimestamp(isoText: string | null): string {
+  // Several served timestamps are nullable -- a run Airflow never stamped, a
+  // check_runs join that found no row. Absent renders as the same em dash as
+  // every other missing value, rather than throwing on .replace.
+  if (isoText === null) return "—";
+  return isoText.replace("T", " ").replace(/(\.\d+)?(Z|[+-]\d{2}:?\d{2})?$/, "");
+}
+
+export function formatNumber(value: number): string {
+  if (!Number.isFinite(value)) return String(value);
+  if (Number.isInteger(value)) return String(value);
+  return String(Number.parseFloat(value.toPrecision(6)));
+}
+
+export function formatDurationSeconds(seconds: number | null): string {
+  if (seconds === null) return "—";
+  return `${seconds.toFixed(3)} s`;
+}
+
+export function nanosecondsToRelativeSeconds(
+  valueNs: number | null,
+  originNs: number | null,
+): string {
+  // The served interval rows type their bounds nullable, so a row missing one
+  // has no position to report. Em dash, like every other absent value.
+  if (valueNs === null || originNs === null) return "—";
+  return relativeSeconds(valueNs, originNs);
+}
+
+function relativeSeconds(valueNs: number, originNs: number): string {
+  return ((valueNs - originNs) / 1e9).toFixed(3);
+}
+
+export function measurementDisplayValue(measurement: EpisodeMeasurement): string {
+  if (measurement.value_double !== null && measurement.value_double !== undefined) {
+    return formatNumber(measurement.value_double);
+  }
+  if (measurement.value_bool !== null && measurement.value_bool !== undefined) {
+    return measurement.value_bool ? "true" : "false";
+  }
+  if (measurement.value_text !== null && measurement.value_text !== undefined) {
+    return measurement.value_text;
+  }
+  return "—";
+}
+
+/** 0.518 -> "51.8%"; integral percentages drop the decimal. */
+export function formatFractionAsPercent(fraction: number): string {
+  const percent = fraction * 100;
+  const text = Number.isInteger(percent) ? String(percent) : percent.toFixed(1);
+  return `${text}%`;
+}
+
+/** Display text for one value out of a SUMMARIZE row (open, JSON-safe record). */
+export function summarizeValueText(value: unknown): string {
+  if (value === null || value === undefined) return "—";
+  if (typeof value === "number") return formatNumber(value);
+  if (typeof value === "boolean") return value ? "true" : "false";
+  if (typeof value === "string") {
+    return looksLikeIsoTimestamp(value) ? formatTimestamp(value) : value;
+  }
+  return JSON.stringify(value);
+}
+
+export function shortFingerprint(fingerprint: string | null): string {
+  if (fingerprint === null) return "—";
+  return fingerprint.length > 10 ? fingerprint.slice(0, 10) : fingerprint;
+}
+
+/** Wall-clock span between two ISO timestamps, for run timing readouts. */
+export function formatDurationBetween(startIso: string | null, endIso: string | null): string {
+  if (!startIso || !endIso) return "—";
+  const elapsedMs = Date.parse(endIso) - Date.parse(startIso);
+  if (!Number.isFinite(elapsedMs) || elapsedMs < 0) return "—";
+  const totalSeconds = elapsedMs / 1000;
+  if (totalSeconds < 60) return `${totalSeconds.toFixed(1)} s`;
+  const wholeMinutes = Math.floor(totalSeconds / 60);
+  const remainderSeconds = Math.round(totalSeconds % 60);
+  if (wholeMinutes < 60) {
+    return `${wholeMinutes}m ${String(remainderSeconds).padStart(2, "0")}s`;
+  }
+  const wholeHours = Math.floor(wholeMinutes / 60);
+  return `${wholeHours}h ${String(wholeMinutes % 60).padStart(2, "0")}m`;
+}
+
+/** Tight duration readout for graph badges: "0.4s", "3.2s", "2m 04s", "1h 12m". */
+export function formatDurationCompact(seconds: number | null): string {
+  if (seconds === null || !Number.isFinite(seconds) || seconds < 0) return "—";
+  if (seconds < 60) return `${seconds.toFixed(seconds < 10 ? 1 : 0)}s`;
+  const wholeMinutes = Math.floor(seconds / 60);
+  if (wholeMinutes < 60) {
+    return `${wholeMinutes}m ${String(Math.round(seconds % 60)).padStart(2, "0")}s`;
+  }
+  const wholeHours = Math.floor(wholeMinutes / 60);
+  return `${wholeHours}h ${String(wholeMinutes % 60).padStart(2, "0")}m`;
+}
+
+/**
+ * A clock offset for the run replay: the same vocabulary as
+ * formatDurationCompact, except that zero reads "0s" rather than "0.0s" (an
+ * axis whose first tick is the run's own start should not claim precision it
+ * is not measuring) and a negative offset keeps its sign.
+ */
+export function formatOffsetCompact(seconds: number): string {
+  if (!Number.isFinite(seconds)) return "—";
+  if (seconds === 0) return "0s";
+  return seconds < 0 ? `-${formatDurationCompact(-seconds)}` : formatDurationCompact(seconds);
+}
+
+/** Content-derived React key for a raw catalog row (no array indexes). */
+export function historyRowKey(row: EpisodeRow): string {
+  return ["recorded_at", "run_fingerprint", "pipeline_version", "uri"]
+    .map((field) => String(row[field] ?? ""))
+    .join("|");
+}
diff --git a/ui/src/main.tsx b/ui/src/main.tsx
new file mode 100644
index 00000000..08434643
--- /dev/null
+++ b/ui/src/main.tsx
@@ -0,0 +1,55 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { AppShell } from "./AppShell";
+import { EmptyPanel } from "./components/QueryStates";
+import { CuratePage } from "./pages/CuratePage";
+import { EpisodeDetailPage } from "./pages/EpisodeDetailPage";
+import { EpisodesPage } from "./pages/EpisodesPage";
+import { PipelinePage } from "./pages/PipelinePage";
+import { RunsPage } from "./pages/RunsPage";
+import "./styles.css";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      staleTime: 15_000,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <AppShell />,
+    children: [
+      { index: true, element: <EpisodesPage /> },
+      { path: "episodes/:episodeId", element: <EpisodeDetailPage /> },
+      { path: "runs", element: <RunsPage /> },
+      { path: "pipeline", element: <PipelinePage /> },
+      { path: "curate", element: <CuratePage /> },
+      {
+        path: "*",
+        element: (
+          <div className="episode-page">
+            <EmptyPanel title="Page not found." hint="Use Episodes in the nav rail." />
+          </div>
+        ),
+      },
+    ],
+  },
+]);
+
+const rootElement = document.getElementById("root");
+if (!rootElement) throw new Error("Root element #root is missing from index.html");
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
+  </StrictMode>,
+);
diff --git a/ui/src/pages/CuratePage.tsx b/ui/src/pages/CuratePage.tsx
new file mode 100644
index 00000000..4c0456a5
--- /dev/null
+++ b/ui/src/pages/CuratePage.tsx
@@ -0,0 +1,285 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { ChartColumn, FileText, Play } from "lucide-react";
+import { Tabs } from "radix-ui";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import {
+  fetchCatalogTables,
+  fetchSavedQueries,
+  fetchWorkspaceConfig,
+  runCurationPreview,
+  runCurationReport,
+  type SavedQuery,
+} from "../api";
+import { CatalogTree } from "../components/CatalogTree";
+import { ColumnStatsPanel } from "../components/ColumnStatsPanel";
+import { ManifestsPanel } from "../components/ManifestsPanel";
+import { PinManifestModal } from "../components/PinManifestModal";
+import { EmptyPanel, ErrorPanel, LoadingPanel } from "../components/QueryStates";
+import { ReportPanel } from "../components/ReportPanel";
+import { ResultGrid } from "../components/ResultGrid";
+import { SavedQueriesMenu } from "../components/SavedQueriesMenu";
+import { SqlEditor, type SqlEditorHandle, type SqlSchema } from "../components/SqlEditor";
+import { SqlFooter } from "../components/SqlFooter";
+
+type CurateTab = "studio" | "manifests";
+
+// The curation studio: catalog tree | SQL editor + results | column stats.
+// The SPA only renders what the server computed — the preview/report/pin
+// endpoints do all SQL work over a constrained DuckDB connection.
+
+function StudioPane({
+  readOnly,
+  onOpenManifests,
+}: {
+  readOnly: boolean;
+  onOpenManifests: () => void;
+}) {
+  const editorRef = useRef<SqlEditorHandle | null>(null);
+  const [hasText, setHasText] = useState(false);
+  const [hasSelection, setHasSelection] = useState(false);
+  const [isStatsOpen, setIsStatsOpen] = useState(true);
+  const [lastPreviewSql, setLastPreviewSql] = useState<string | null>(null);
+  const [loadedQuery, setLoadedQuery] = useState<SavedQuery | null>(null);
+
+  const catalogQuery = useQuery({ queryKey: ["catalog-tables"], queryFn: fetchCatalogTables });
+  const savedQueriesQuery = useQuery({ queryKey: ["saved-queries"], queryFn: fetchSavedQueries });
+
+  const editorSchema = useMemo<SqlSchema>(() => {
+    const schema: SqlSchema = {};
+    for (const table of catalogQuery.data ?? []) {
+      schema[table.name] = table.columns.map((column) => column.name);
+    }
+    return schema;
+  }, [catalogQuery.data]);
+
+  const previewMutation = useMutation({ mutationFn: runCurationPreview });
+  const reportMutation = useMutation({ mutationFn: runCurationReport });
+  const { mutate: mutatePreview } = previewMutation;
+  const { mutate: mutateReport } = reportMutation;
+
+  // Cmd/Ctrl+Enter and the Preview button: run the selection when one exists.
+  const runPreview = useCallback(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const sqlText = editor.currentSql(true);
+    if (!sqlText) return;
+    setLastPreviewSql(sqlText);
+    mutatePreview({ sql: sqlText, stats: isStatsOpen });
+  }, [mutatePreview, isStatsOpen]);
+
+  const toggleStats = () => {
+    const nextStatsOpen = !isStatsOpen;
+    setIsStatsOpen(nextStatsOpen);
+    // Opening the panel after a stats-less run: re-run the same SQL to fill it.
+    if (nextStatsOpen && lastPreviewSql && previewMutation.data?.column_stats === null) {
+      mutatePreview({ sql: lastPreviewSql, stats: true });
+    }
+  };
+
+  // Report and pin always take the full document — never a silent partial cut.
+  const runReport = () => {
+    const sqlText = editorRef.current?.currentSql(false) ?? "";
+    if (sqlText) mutateReport(sqlText);
+  };
+
+  const loadSavedQuery = (savedQuery: SavedQuery) => {
+    editorRef.current?.setDocument(savedQuery.sql);
+    setLoadedQuery(savedQuery);
+  };
+
+  const previewData = previewMutation.data;
+
+  return (
+    <>
+      <div className="toolbar studio-toolbar">
+        <SavedQueriesMenu
+          queries={savedQueriesQuery.data}
+          isPending={savedQueriesQuery.isPending}
+          error={savedQueriesQuery.isError ? savedQueriesQuery.error : null}
+          readOnly={readOnly}
+          loadedQuery={loadedQuery}
+          hasText={hasText}
+          onLoad={loadSavedQuery}
+          onLoadedQueryChange={setLoadedQuery}
+          currentSql={() => editorRef.current?.currentSql(false) ?? ""}
+        />
+        <div className="toolbar-spacer" />
+        <button
+          type="button"
+          className="btn btn-primary"
+          onClick={runPreview}
+          disabled={!hasText || previewMutation.isPending}
+          title="Cmd/Ctrl+Enter — runs only the selection when text is selected"
+        >
+          <Play />
+          <span>{hasSelection ? "Preview selection" : "Preview"}</span>
+        </button>
+        <button
+          type="button"
+          className="btn"
+          onClick={runReport}
+          disabled={!hasText || reportMutation.isPending}
+          title="Row count, episode total, and per-check coverage for this cut"
+        >
+          <FileText />
+          <span>Report</span>
+        </button>
+        {readOnly ? null : (
+          <PinManifestModal
+            disabled={!hasText}
+            currentSql={() => editorRef.current?.currentSql(false) ?? ""}
+            onOpenManifests={onOpenManifests}
+          />
+        )}
+        <button
+          type="button"
+          className={isStatsOpen ? "btn is-toggled" : "btn"}
+          onClick={toggleStats}
+          aria-pressed={isStatsOpen}
+          title="Toggle the column-stats panel"
+        >
+          <ChartColumn />
+          <span>Stats</span>
+        </button>
+      </div>
+
+      <div className={isStatsOpen ? "studio-body has-stats" : "studio-body"}>
+        <CatalogTree
+          tables={catalogQuery.data}
+          isPending={catalogQuery.isPending}
+          error={catalogQuery.isError ? catalogQuery.error : null}
+          onRetry={() => {
+            void catalogQuery.refetch();
+          }}
+          onInsertText={(text) => editorRef.current?.insertText(text)}
+        />
+
+        <div className="studio-center">
+          <div className="editor-shell">
+            <SqlEditor
+              ref={editorRef}
+              initialDoc=""
+              schema={editorSchema}
+              onDocChanged={(doc) => setHasText(doc.trim().length > 0)}
+              onSelectionChanged={setHasSelection}
+              onRunShortcut={runPreview}
+            />
+          </div>
+
+          <ReportPanel
+            report={reportMutation.data}
+            isPending={reportMutation.isPending}
+            error={reportMutation.isError ? reportMutation.error : null}
+            onRetry={runReport}
+          />
+
+          <div className="studio-results">
+            {previewMutation.isPending ? (
+              <LoadingPanel label="Running preview…" />
+            ) : previewMutation.isError ? (
+              <ErrorPanel error={previewMutation.error} onRetry={runPreview} />
+            ) : previewData ? (
+              <>
+                {previewData.truncated ? (
+                  <div className="truncation-banner" role="status">
+                    Preview truncated — showing the first {previewData.rows.length} of{" "}
+                    {previewData.row_count} rows.
+                  </div>
+                ) : (
+                  <div className="result-meta">
+                    {previewData.row_count} row{previewData.row_count === 1 ? "" : "s"}
+                  </div>
+                )}
+                <ResultGrid columns={previewData.columns} rows={previewData.rows} />
+              </>
+            ) : (
+              <EmptyPanel
+                title="No preview yet."
+                hint="Write a SELECT over the catalog views, then press Cmd/Ctrl+Enter or Preview. Select text to run only the selection."
+              />
+            )}
+          </div>
+
+          <SqlFooter
+            sql={previewData?.sql}
+            emptyMessage="the exact query the server ran appears here after a preview"
+          />
+        </div>
+
+        {isStatsOpen ? (
+          <ColumnStatsPanel stats={previewData ? previewData.column_stats : undefined} />
+        ) : null}
+      </div>
+    </>
+  );
+}
+
+export function CuratePage() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const activeTab: CurateTab = searchParams.get("tab") === "manifests" ? "manifests" : "studio";
+  const manifestsTabRef = useRef<HTMLButtonElement | null>(null);
+
+  const configQuery = useQuery({ queryKey: ["config"], queryFn: fetchWorkspaceConfig });
+  // Until the config arrives (or if it fails), keep write affordances hidden.
+  const readOnly = configQuery.data ? configQuery.data.read_only : true;
+
+  useEffect(() => {
+    document.title = "Curate · HFlow";
+    return () => {
+      document.title = "HFlow";
+    };
+  }, []);
+
+  const selectTab = useCallback(
+    (tab: string) => {
+      setSearchParams(
+        (previous) => {
+          const next = new URLSearchParams(previous);
+          if (tab === "manifests") next.set("tab", "manifests");
+          else next.delete("tab");
+          return next;
+        },
+        { replace: true },
+      );
+    },
+    [setSearchParams],
+  );
+
+  // Called from the pin dialog after it closes. Whatever opened that dialog
+  // lives in the studio panel we are about to hide, so focus has to land on
+  // the tab instead — a hidden element cannot take it.
+  const openManifestsTab = useCallback(() => {
+    selectTab("manifests");
+    manifestsTabRef.current?.focus();
+  }, [selectTab]);
+
+  return (
+    <Tabs.Root className="curate-page" value={activeTab} onValueChange={selectTab}>
+      <Tabs.List className="curate-tabs" aria-label="Curate sections">
+        <Tabs.Trigger value="studio" className="curate-tab">
+          Studio
+        </Tabs.Trigger>
+        <Tabs.Trigger value="manifests" className="curate-tab" ref={manifestsTabRef}>
+          Manifests
+        </Tabs.Trigger>
+      </Tabs.List>
+
+      {/* forceMount keeps the studio mounted while the Manifests tab shows, so
+          the editor document, preview, and report survive tab switches; the
+          `hidden` attribute is ours because forceMount also defeats the one
+          Radix would otherwise set. */}
+      <Tabs.Content
+        value="studio"
+        forceMount
+        hidden={activeTab !== "studio"}
+        className="curate-tab-body"
+      >
+        <StudioPane readOnly={readOnly} onOpenManifests={openManifestsTab} />
+      </Tabs.Content>
+      <Tabs.Content value="manifests" className="curate-tab-body">
+        <ManifestsPanel />
+      </Tabs.Content>
+    </Tabs.Root>
+  );
+}
diff --git a/ui/src/pages/EpisodeDetailPage.tsx b/ui/src/pages/EpisodeDetailPage.tsx
new file mode 100644
index 00000000..f26de77d
--- /dev/null
+++ b/ui/src/pages/EpisodeDetailPage.tsx
@@ -0,0 +1,505 @@
+import { useQuery } from "@tanstack/react-query";
+import { ArrowLeft, Download } from "lucide-react";
+import { Fragment, type ReactNode, useEffect, useMemo, useState } from "react";
+import { Link, useLocation, useParams } from "react-router-dom";
+import {
+  ApiError,
+  type EpisodeCheckRun,
+  type EpisodeDossier,
+  type EpisodeInterval,
+  type EpisodeMeasurement,
+  type EpisodeMediaItem,
+  type EpisodeRow,
+  type EpisodeTagRecord,
+  type EpisodeTimeline,
+  fetchEpisodeDossier,
+  fetchEpisodeTimeline,
+} from "../api";
+import { MeasurementBars, TimelineStrip } from "../components/EpisodeTimeline";
+import { EmptyPanel, ErrorPanel, LoadingPanel } from "../components/QueryStates";
+import { StatusChip } from "../components/StatusChip";
+import { ValueCell } from "../components/ValueCell";
+import {
+  formatDurationSeconds,
+  formatTimestamp,
+  historyRowKey,
+  measurementDisplayValue,
+  nanosecondsToRelativeSeconds,
+  shortFingerprint,
+} from "../format";
+
+const HEADER_FIELDS = [
+  "task",
+  "operator",
+  "embodiment",
+  "success",
+  "pipeline_version",
+  "hflow_version",
+  "recorded_at",
+];
+
+function SectionShell({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <section className="section">
+      <h2 className="section-title">{title}</h2>
+      {children}
+    </section>
+  );
+}
+
+function MediaSection({ media }: { media: EpisodeMediaItem[] }) {
+  if (media.length === 0) {
+    return (
+      <SectionShell title="Contact sheet">
+        <p className="empty-note">No media artifacts recorded for this episode.</p>
+      </SectionShell>
+    );
+  }
+  return (
+    <SectionShell title="Contact sheet">
+      <div className="media-row">
+        {media.map((item) =>
+          item.url ? (
+            <a
+              key={item.name}
+              className="media-item"
+              href={item.url}
+              target="_blank"
+              rel="noreferrer"
+              title={`Open ${item.name} full-size`}
+            >
+              <img src={item.url} alt={item.name} loading="lazy" />
+              <span className="media-name">{item.name}</span>
+            </a>
+          ) : (
+            <div key={item.name} className="media-item media-item-unservable">
+              <span className="media-name">{item.name}</span>
+              <span className="media-uri" title={item.uri}>
+                {item.uri}
+              </span>
+              <span className="empty-note">not servable from this server</span>
+            </div>
+          ),
+        )}
+      </div>
+    </SectionShell>
+  );
+}
+
+/** The visual half of the evidence: where things happened in the recording,
+ * and how big the numbers are. Both come from /episodes/{id}/timeline, which
+ * derives the span server-side. */
+function TimelineSections({ timeline }: { timeline: EpisodeTimeline }) {
+  return (
+    <>
+      <SectionShell title="Timeline">
+        <TimelineStrip timeline={timeline} />
+      </SectionShell>
+      <SectionShell title="Measurements at a glance">
+        <MeasurementBars measurements={timeline.measurements} />
+      </SectionShell>
+    </>
+  );
+}
+
+function VisualEvidence({ episodeId }: { episodeId: string }) {
+  const timelineQuery = useQuery({
+    queryKey: ["episode-timeline", episodeId],
+    queryFn: () => fetchEpisodeTimeline(episodeId),
+    // A 404 here means the server predates the timeline endpoint, not a bad
+    // episode id (the dossier above already resolved it) — retrying is pointless.
+    retry: (failureCount, error) =>
+      !(error instanceof ApiError && error.status === 404) && failureCount < 1,
+  });
+
+  if (timelineQuery.isPending) {
+    return (
+      <SectionShell title="Timeline">
+        <LoadingPanel label="Loading the episode timeline…" />
+      </SectionShell>
+    );
+  }
+  if (timelineQuery.isError) {
+    if (timelineQuery.error instanceof ApiError && timelineQuery.error.status === 404) {
+      return (
+        <SectionShell title="Timeline">
+          <p className="empty-note">
+            This server does not serve episode timelines yet — upgrade hflow-server to see interval
+            bands and measurement bars here.
+          </p>
+        </SectionShell>
+      );
+    }
+    return (
+      <SectionShell title="Timeline">
+        <ErrorPanel
+          error={timelineQuery.error}
+          onRetry={() => {
+            void timelineQuery.refetch();
+          }}
+        />
+      </SectionShell>
+    );
+  }
+  return <TimelineSections timeline={timelineQuery.data} />;
+}
+
+function CheckRunsSection({ checkRuns }: { checkRuns: EpisodeCheckRun[] }) {
+  const [expandedErrorKeys, setExpandedErrorKeys] = useState<ReadonlySet<string>>(new Set());
+  if (checkRuns.length === 0) {
+    return (
+      <SectionShell title="Check runs">
+        <p className="empty-note">No quality checks have run against this episode.</p>
+      </SectionShell>
+    );
+  }
+  const toggleError = (runKey: string) => {
+    setExpandedErrorKeys((previous) => {
+      const next = new Set(previous);
+      if (next.has(runKey)) next.delete(runKey);
+      else next.add(runKey);
+      return next;
+    });
+  };
+  return (
+    <SectionShell title="Check runs">
+      <div className="table-overflow">
+        <table className="evidence-table">
+          <thead>
+            <tr>
+              <th>check</th>
+              <th>version</th>
+              <th>critical</th>
+              <th>status</th>
+              <th>duration</th>
+              <th>recorded</th>
+              <th>fingerprint</th>
+              <th>error</th>
+            </tr>
+          </thead>
+          <tbody>
+            {checkRuns.map((run) => {
+              const runKey = `${run.check_name}@${run.check_version}:${run.run_fingerprint}`;
+              const isErrorExpanded = expandedErrorKeys.has(runKey);
+              return (
+                <Fragment key={runKey}>
+                  <tr>
+                    <td className="cell-mono">{run.check_name}</td>
+                    <td className="cell-mono">{run.check_version}</td>
+                    <td>
+                      {run.critical ? (
+                        <span className="chip chip-muted">critical</span>
+                      ) : (
+                        <span className="cell-null">—</span>
+                      )}
+                    </td>
+                    <td>
+                      <StatusChip status={run.status} />
+                    </td>
+                    <td className="cell-num">{formatDurationSeconds(run.duration_s)}</td>
+                    <td className="cell-mono" title={run.recorded_at ?? undefined}>
+                      {formatTimestamp(run.recorded_at)}
+                    </td>
+                    <td className="cell-mono" title={run.run_fingerprint ?? undefined}>
+                      {shortFingerprint(run.run_fingerprint)}
+                    </td>
+                    <td>
+                      {run.error ? (
+                        <button
+                          type="button"
+                          className="btn btn-ghost btn-tiny"
+                          onClick={() => toggleError(runKey)}
+                          aria-expanded={isErrorExpanded}
+                        >
+                          {isErrorExpanded ? "Hide error" : "Show error"}
+                        </button>
+                      ) : (
+                        <span className="cell-null">—</span>
+                      )}
+                    </td>
+                  </tr>
+                  {run.error && isErrorExpanded ? (
+                    <tr className="error-detail-row">
+                      <td colSpan={8}>
+                        <pre className="error-text">{run.error}</pre>
+                      </td>
+                    </tr>
+                  ) : null}
+                </Fragment>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </SectionShell>
+  );
+}
+
+function MeasurementsSection({ measurements }: { measurements: EpisodeMeasurement[] }) {
+  if (measurements.length === 0) {
+    return (
+      <SectionShell title="Measurements">
+        <p className="empty-note">No measurements recorded for this episode.</p>
+      </SectionShell>
+    );
+  }
+  return (
+    <SectionShell title="Measurements">
+      <div className="table-overflow">
+        <table className="evidence-table">
+          <thead>
+            <tr>
+              <th>key</th>
+              <th>value</th>
+              <th>producer</th>
+              <th>recorded</th>
+            </tr>
+          </thead>
+          <tbody>
+            {measurements.map((measurement) => (
+              <tr key={`${measurement.key}:${measurement.check_name}@${measurement.check_version}`}>
+                <td className="cell-mono">{measurement.key}</td>
+                <td className="cell-num">{measurementDisplayValue(measurement)}</td>
+                <td className="cell-mono cell-dim">
+                  {measurement.check_name}@{measurement.check_version}
+                </td>
+                <td className="cell-mono" title={measurement.recorded_at ?? undefined}>
+                  {formatTimestamp(measurement.recorded_at)}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </SectionShell>
+  );
+}
+
+function IntervalsSection({ intervals }: { intervals: EpisodeInterval[] }) {
+  if (intervals.length === 0) {
+    return (
+      <SectionShell title="Intervals">
+        <p className="empty-note">No intervals recorded for this episode.</p>
+      </SectionShell>
+    );
+  }
+  // Times display in seconds relative to the earliest interval start. Rows
+  // whose start the server could not supply contribute no origin (and render
+  // an em dash below) rather than dragging it to negative infinity.
+  const startTimes = intervals
+    .map((interval) => interval.start_ns)
+    .filter((startNs): startNs is number => startNs !== null);
+  const originNs = startTimes.length > 0 ? Math.min(...startTimes) : null;
+  return (
+    <SectionShell title="Intervals">
+      <div className="table-overflow">
+        <table className="evidence-table">
+          <thead>
+            <tr>
+              <th>label</th>
+              <th>start (s)</th>
+              <th>end (s)</th>
+              <th>length (s)</th>
+              <th>producer</th>
+            </tr>
+          </thead>
+          <tbody>
+            {intervals.map((interval) => (
+              <tr key={`${interval.label}:${interval.start_ns}:${interval.check_name}`}>
+                <td className="cell-mono">{interval.label}</td>
+                <td className="cell-num">
+                  {nanosecondsToRelativeSeconds(interval.start_ns, originNs)}
+                </td>
+                <td className="cell-num">
+                  {nanosecondsToRelativeSeconds(interval.end_ns, originNs)}
+                </td>
+                <td className="cell-num">
+                  {nanosecondsToRelativeSeconds(interval.end_ns, interval.start_ns)}
+                </td>
+                <td className="cell-mono cell-dim">
+                  {/* check_version comes from a LEFT JOIN and can be null. */}
+                  {interval.check_version
+                    ? `${interval.check_name}@${interval.check_version}`
+                    : interval.check_name}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </SectionShell>
+  );
+}
+
+function TagsSection({ tags }: { tags: EpisodeTagRecord[] }) {
+  if (tags.length === 0) {
+    return (
+      <SectionShell title="Tags">
+        <p className="empty-note">No tags recorded for this episode.</p>
+      </SectionShell>
+    );
+  }
+  return (
+    <SectionShell title="Tags">
+      <div className="tag-row">
+        {tags.map((tagRecord) => (
+          <span
+            key={`${tagRecord.tag}:${tagRecord.check_name}`}
+            className="chip chip-muted"
+            title={`by ${tagRecord.check_name} at ${tagRecord.recorded_at}`}
+          >
+            {tagRecord.tag}
+          </span>
+        ))}
+      </div>
+    </SectionShell>
+  );
+}
+
+function HistorySection({ history }: { history: EpisodeRow[] }) {
+  const columnNames = useMemo(() => {
+    const firstRow = history[0];
+    return firstRow ? Object.keys(firstRow) : [];
+  }, [history]);
+  // Content-derived keys, deduplicated in order, so rows never key off indexes.
+  const keyedHistoryRows = useMemo(() => {
+    const seenCounts = new Map<string, number>();
+    return history.map((row) => {
+      const baseKey = historyRowKey(row);
+      const seenCount = seenCounts.get(baseKey) ?? 0;
+      seenCounts.set(baseKey, seenCount + 1);
+      return { rowKey: seenCount === 0 ? baseKey : `${baseKey}#${seenCount}`, row };
+    });
+  }, [history]);
+  if (history.length === 0) {
+    return (
+      <SectionShell title="History">
+        <p className="empty-note">No raw catalog rows for this episode.</p>
+      </SectionShell>
+    );
+  }
+  return (
+    <SectionShell title={`History · ${history.length} raw row${history.length === 1 ? "" : "s"}`}>
+      <div className="table-overflow">
+        <table className="evidence-table">
+          <thead>
+            <tr>
+              {columnNames.map((name) => (
+                <th key={name}>{name}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {keyedHistoryRows.map(({ rowKey, row }) => (
+              <tr key={rowKey}>
+                {columnNames.map((name) => (
+                  <td key={name}>
+                    <ValueCell columnName={name} value={row[name]} />
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </SectionShell>
+  );
+}
+
+function DossierView({ dossier }: { dossier: EpisodeDossier }) {
+  const episodeIdText =
+    typeof dossier.episode.episode_id === "string" ? dossier.episode.episode_id : "episode";
+  return (
+    <>
+      <header className="episode-header">
+        <div className="episode-title-row">
+          <h1 className="episode-title">{episodeIdText}</h1>
+          <StatusChip status={dossier.episode.status} />
+          {dossier.episode.quarantine_tags.map((tag) => (
+            <span key={tag} className="chip chip-warn">
+              {tag}
+            </span>
+          ))}
+          <div className="toolbar-spacer" />
+          {dossier.canonical_url ? (
+            <a className="btn" href={dossier.canonical_url} download>
+              <Download />
+              <span>Download canonical</span>
+            </a>
+          ) : null}
+        </div>
+        <dl className="meta-grid">
+          {HEADER_FIELDS.map((field) => {
+            const value = dossier.episode[field];
+            if (value === null || value === undefined) return null;
+            return (
+              <div key={field} className="meta-item">
+                <dt className="meta-label">{field}</dt>
+                <dd className="meta-value">
+                  <ValueCell columnName={field} value={value} />
+                </dd>
+              </div>
+            );
+          })}
+        </dl>
+      </header>
+
+      <MediaSection media={dossier.media} />
+
+      <VisualEvidence episodeId={episodeIdText} />
+
+      <CheckRunsSection checkRuns={dossier.check_runs} />
+      <MeasurementsSection measurements={dossier.measurements} />
+      <IntervalsSection intervals={dossier.intervals} />
+      <TagsSection tags={dossier.tags} />
+      <HistorySection history={dossier.history} />
+
+      <details className="raw-json">
+        <summary>Raw JSON</summary>
+        <pre>{JSON.stringify(dossier, null, 2)}</pre>
+      </details>
+    </>
+  );
+}
+
+export function EpisodeDetailPage() {
+  const { episodeId } = useParams<{ episodeId: string }>();
+  // Row navigation carried the Episodes URL's search string onto this route,
+  // so the back link can restore the exact filters/sort/page.
+  const location = useLocation();
+  const dossierQuery = useQuery({
+    queryKey: ["episode", episodeId],
+    queryFn: () => fetchEpisodeDossier(episodeId ?? ""),
+    enabled: episodeId !== undefined,
+  });
+
+  useEffect(() => {
+    document.title = episodeId ? `${episodeId} · HFlow` : "HFlow";
+    return () => {
+      document.title = "HFlow";
+    };
+  }, [episodeId]);
+
+  return (
+    <div className="episode-page">
+      <Link to={{ pathname: "/", search: location.search }} className="back-link">
+        <ArrowLeft />
+        <span>Episodes</span>
+      </Link>
+      {episodeId === undefined ? (
+        <EmptyPanel title="No episode selected." hint="Pick an episode from the list." />
+      ) : dossierQuery.isPending ? (
+        <LoadingPanel label="Loading episode…" />
+      ) : dossierQuery.isError ? (
+        <ErrorPanel
+          error={dossierQuery.error}
+          onRetry={() => {
+            void dossierQuery.refetch();
+          }}
+        />
+      ) : (
+        <DossierView dossier={dossierQuery.data} />
+      )}
+    </div>
+  );
+}
diff --git a/ui/src/pages/EpisodesPage.tsx b/ui/src/pages/EpisodesPage.tsx
new file mode 100644
index 00000000..c7dbf85b
--- /dev/null
+++ b/ui/src/pages/EpisodesPage.tsx
@@ -0,0 +1,539 @@
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import {
+  type ColumnDef,
+  flexRender,
+  rowSortingFeature,
+  type SortingState,
+  tableFeatures,
+  type Updater,
+  useTable,
+} from "@tanstack/react-table";
+import { ChevronDown, Search } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import {
+  DEFAULT_ORDER_BY,
+  type EpisodeColumnStats,
+  type EpisodeRow,
+  type EpisodeStatus,
+  type EpisodesFilter,
+  fetchEpisodeFacets,
+  fetchEpisodeStats,
+  fetchEpisodesPage,
+  parseEpisodesQuery,
+} from "../api";
+import { FacetSidebar, type MultiValueFacetName } from "../components/FacetSidebar";
+import { HeaderDistribution } from "../components/HeaderDistribution";
+import { EmptyPanel, ErrorPanel, LoadingPanel } from "../components/QueryStates";
+import { SqlFooter } from "../components/SqlFooter";
+import { ValueCell } from "../components/ValueCell";
+
+const SEARCH_DEBOUNCE_MS = 300;
+const STATS_DEBOUNCE_MS = 250;
+const PAGE_SIZE_CHOICES = [25, 50, 100, 250, 500];
+
+// Header-popover clicks only map to columns with an existing structured filter
+// param; other columns render their stats without a click-to-filter affordance.
+const STATS_FILTERABLE_COLUMNS = new Set(["task", "operator", "embodiment", "status"]);
+
+// v9 registers table features explicitly so unregistered ones tree-shake
+// away. Sorting is the only one this table needs, and even that is
+// `manualSorting`: the header click sends order_by/order to the server, which
+// compiles and runs the ORDER BY (the thin-client rule). Filtering and
+// pagination are likewise the server's, so their features stay unregistered.
+const episodesTableFeatures = tableFeatures({ rowSortingFeature });
+
+export function EpisodesPage() {
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const query = useMemo(() => parseEpisodesQuery(searchParams), [searchParams]);
+
+  const episodesQuery = useQuery({
+    queryKey: ["episodes", query],
+    queryFn: () => fetchEpisodesPage(query),
+    placeholderData: keepPreviousData,
+  });
+  const facetsQuery = useQuery({ queryKey: ["episode-facets"], queryFn: fetchEpisodeFacets });
+
+  // Column mini-distributions, computed server-side under the ACTIVE filters.
+  // Debounced and independent of the table query — the table never waits on stats.
+  const statsFilter = useMemo<EpisodesFilter>(
+    () => ({
+      task: query.task,
+      operator: query.operator,
+      embodiment: query.embodiment,
+      status: query.status,
+      success: query.success,
+      search: query.search,
+    }),
+    [query],
+  );
+  const statsFilterKey = useMemo(() => JSON.stringify(statsFilter), [statsFilter]);
+  const [debouncedStats, setDebouncedStats] = useState<{ key: string; filter: EpisodesFilter }>({
+    key: statsFilterKey,
+    filter: statsFilter,
+  });
+  useEffect(() => {
+    if (statsFilterKey === debouncedStats.key) return;
+    const debounceHandle = window.setTimeout(
+      () => setDebouncedStats({ key: statsFilterKey, filter: statsFilter }),
+      STATS_DEBOUNCE_MS,
+    );
+    return () => window.clearTimeout(debounceHandle);
+  }, [statsFilterKey, statsFilter, debouncedStats.key]);
+  const statsQuery = useQuery({
+    queryKey: ["episode-stats", debouncedStats.key],
+    queryFn: () => fetchEpisodeStats(debouncedStats.filter),
+    placeholderData: keepPreviousData,
+  });
+  const statsByColumn = useMemo(() => {
+    const byColumn = new Map<string, EpisodeColumnStats>();
+    for (const columnStats of statsQuery.data?.columns ?? []) {
+      byColumn.set(columnStats.name, columnStats);
+    }
+    return byColumn;
+  }, [statsQuery.data]);
+
+  // Any filter or sort change restarts pagination at the first page.
+  const updateFilters = useCallback(
+    (mutate: (params: URLSearchParams) => void) => {
+      setSearchParams(
+        (previous) => {
+          const next = new URLSearchParams(previous);
+          mutate(next);
+          next.delete("offset");
+          return next;
+        },
+        { replace: true },
+      );
+    },
+    [setSearchParams],
+  );
+
+  // Debounced search box, kept in sync when the URL changes from elsewhere.
+  const [searchDraft, setSearchDraft] = useState(query.search);
+  useEffect(() => {
+    setSearchDraft(query.search);
+  }, [query.search]);
+  useEffect(() => {
+    if (searchDraft === query.search) return;
+    const debounceHandle = window.setTimeout(() => {
+      updateFilters((params) => {
+        if (searchDraft) params.set("search", searchDraft);
+        else params.delete("search");
+      });
+    }, SEARCH_DEBOUNCE_MS);
+    return () => window.clearTimeout(debounceHandle);
+  }, [searchDraft, query.search, updateFilters]);
+
+  const toggleFacetValue = useCallback(
+    (facet: MultiValueFacetName, value: string) => {
+      updateFilters((params) => {
+        const currentValues = params.getAll(facet);
+        params.delete(facet);
+        const nextValues = currentValues.includes(value)
+          ? currentValues.filter((existing) => existing !== value)
+          : [...currentValues, value];
+        for (const entry of nextValues) params.append(facet, entry);
+      });
+    },
+    [updateFilters],
+  );
+
+  const selectStatus = useCallback(
+    (status: EpisodeStatus | null) => {
+      updateFilters((params) => {
+        if (status) params.set("status", status);
+        else params.delete("status");
+      });
+    },
+    [updateFilters],
+  );
+
+  const selectSuccess = (value: string) => {
+    updateFilters((params) => {
+      if (value === "true" || value === "false") params.set("success", value);
+      else params.delete("success");
+    });
+  };
+
+  // A popover value click applies the same structured params the sidebar uses.
+  const applyStatsValueFilter = useCallback(
+    (columnName: string, value: string) => {
+      if (columnName === "status") {
+        if (value === "ok" || value === "quarantined") {
+          selectStatus(query.status === value ? null : value);
+        }
+        return;
+      }
+      if (columnName === "task" || columnName === "operator" || columnName === "embodiment") {
+        toggleFacetValue(columnName, value);
+      }
+    },
+    [query.status, selectStatus, toggleFacetValue],
+  );
+
+  const activeStatsValues = useCallback(
+    (columnName: string): readonly string[] => {
+      switch (columnName) {
+        case "task":
+          return query.task;
+        case "operator":
+          return query.operator;
+        case "embodiment":
+          return query.embodiment;
+        case "status":
+          return query.status ? [query.status] : [];
+        default:
+          return [];
+      }
+    },
+    [query],
+  );
+
+  // Sorting maps 1:1 onto the API's order_by/order params; the server default
+  // (recorded_at desc) is mirrored so the header indicator is honest.
+  const sorting: SortingState = useMemo(
+    () => [{ id: query.orderBy ?? DEFAULT_ORDER_BY, desc: query.order === "desc" }],
+    [query.orderBy, query.order],
+  );
+
+  const handleSortingChange = useCallback(
+    (updater: Updater<SortingState>) => {
+      const nextSorting = typeof updater === "function" ? updater(sorting) : updater;
+      const primarySort = nextSorting[0];
+      updateFilters((params) => {
+        if (primarySort) {
+          params.set("order_by", primarySort.id);
+          params.set("order", primarySort.desc ? "desc" : "asc");
+        } else {
+          params.delete("order_by");
+          params.delete("order");
+        }
+      });
+    },
+    [sorting, updateFilters],
+  );
+
+  const episodesData = episodesQuery.data;
+  const rows = useMemo(() => episodesData?.rows ?? [], [episodesData]);
+
+  // Detail-route navigation carries the list URL's search string, so the
+  // detail page's back link can restore the exact filters/sort/page.
+  const listSearch = useMemo(() => searchParams.toString(), [searchParams]);
+
+  // Columns come from the server's DESCRIBE of the wide view, so the table
+  // renders whatever the catalog holds without a hardcoded schema.
+  const tableColumns = useMemo<
+    ColumnDef<typeof episodesTableFeatures, EpisodeRow, unknown>[]
+  >(() => {
+    return (episodesData?.columns ?? []).map((column) => ({
+      id: column.name,
+      accessorFn: (row: EpisodeRow) => row[column.name],
+      header: () => (
+        <span className="th-label" title={`${column.name} · ${column.type}`}>
+          {column.name}
+        </span>
+      ),
+      cell: (cellContext) => {
+        const cellValue = cellContext.getValue();
+        // The id cell is a REAL link (middle-click, copy address, screen-reader
+        // announcement); the row's click/key handlers stay as conveniences.
+        if (column.name === "episode_id" && typeof cellValue === "string") {
+          return (
+            <Link
+              className="episode-id-link cell-mono"
+              to={{ pathname: `/episodes/${encodeURIComponent(cellValue)}`, search: listSearch }}
+              onClick={(event) => event.stopPropagation()}
+            >
+              {cellValue}
+            </Link>
+          );
+        }
+        return <ValueCell columnName={column.name} value={cellValue} />;
+      },
+    }));
+  }, [episodesData, listSearch]);
+
+  const table = useTable({
+    features: episodesTableFeatures,
+    data: rows,
+    columns: tableColumns,
+    manualSorting: true,
+    // No manualPagination: without rowPaginationFeature registered the table
+    // never slices rows itself, so the server's LIMIT/OFFSET is the only
+    // pagination there is.
+    enableMultiSort: false,
+    enableSortingRemoval: false,
+    state: { sorting },
+    onSortingChange: handleSortingChange,
+  });
+
+  const total = episodesData?.total ?? 0;
+  const pageStart = total === 0 ? 0 : query.offset + 1;
+  const pageEnd = query.offset + rows.length;
+  const canGoPrevious = query.offset > 0;
+  const canGoNext = query.offset + rows.length < total;
+
+  const goToOffset = (nextOffset: number) => {
+    setSearchParams((previous) => {
+      const next = new URLSearchParams(previous);
+      if (nextOffset > 0) next.set("offset", String(nextOffset));
+      else next.delete("offset");
+      return next;
+    });
+  };
+
+  const setPageSize = (nextLimit: number) => {
+    updateFilters((params) => {
+      params.set("limit", String(nextLimit));
+    });
+  };
+
+  const openEpisode = (row: EpisodeRow) => {
+    const episodeId = row.episode_id;
+    if (typeof episodeId !== "string") return;
+    navigate({ pathname: `/episodes/${encodeURIComponent(episodeId)}`, search: listSearch });
+  };
+
+  const hasActiveFilters =
+    query.task.length > 0 ||
+    query.operator.length > 0 ||
+    query.embodiment.length > 0 ||
+    query.status !== null ||
+    query.success !== null ||
+    query.search !== "";
+
+  const clearFilters = () => {
+    // Only the FILTER params — sort and rows-per-page are not filters, so a
+    // "Clear filters" click must leave them alone (offset resets via updateFilters).
+    updateFilters((params) => {
+      for (const filterKey of ["task", "operator", "embodiment", "status", "success", "search"]) {
+        params.delete(filterKey);
+      }
+    });
+  };
+
+  const pageSizeChoices = PAGE_SIZE_CHOICES.includes(query.limit)
+    ? PAGE_SIZE_CHOICES
+    : [...PAGE_SIZE_CHOICES, query.limit].sort((left, right) => left - right);
+
+  const isRefreshing = episodesQuery.isFetching && !episodesQuery.isPending;
+
+  return (
+    <div className="episodes-page">
+      <div className="toolbar">
+        <div className="search-box">
+          <Search className="search-icon" />
+          <input
+            type="search"
+            className="input search-input"
+            placeholder="Search id, task, operator…"
+            value={searchDraft}
+            onChange={(event) => setSearchDraft(event.target.value)}
+            aria-label="Search episodes by id, task, or operator"
+          />
+        </div>
+        <label className="toolbar-field">
+          <span className="toolbar-field-label">Status</span>
+          <select
+            className="input"
+            value={query.status ?? "any"}
+            onChange={(event) => {
+              const value = event.target.value;
+              selectStatus(value === "ok" || value === "quarantined" ? value : null);
+            }}
+          >
+            <option value="any">any</option>
+            <option value="ok">ok</option>
+            <option value="quarantined">quarantined</option>
+          </select>
+        </label>
+        <label className="toolbar-field">
+          <span className="toolbar-field-label">Success</span>
+          <select
+            className="input"
+            value={query.success ?? "any"}
+            onChange={(event) => selectSuccess(event.target.value)}
+          >
+            <option value="any">any</option>
+            <option value="true">success</option>
+            <option value="false">failure</option>
+          </select>
+        </label>
+        <div className="toolbar-spacer" />
+        {isRefreshing ? <span className="refresh-note">updating…</span> : null}
+        <span className="row-count">
+          {total} episode{total === 1 ? "" : "s"}
+        </span>
+      </div>
+
+      <div className="episodes-body">
+        <FacetSidebar
+          facets={facetsQuery.data}
+          isPending={facetsQuery.isPending}
+          error={facetsQuery.isError ? facetsQuery.error : null}
+          onRetry={() => {
+            void facetsQuery.refetch();
+          }}
+          selectedValues={{
+            task: query.task,
+            operator: query.operator,
+            embodiment: query.embodiment,
+          }}
+          selectedStatus={query.status}
+          onToggleValue={toggleFacetValue}
+          onSelectStatus={selectStatus}
+        />
+        <div className="table-pane">
+          {episodesQuery.isPending ? (
+            <LoadingPanel label="Loading episodes…" />
+          ) : episodesQuery.isError ? (
+            <ErrorPanel
+              error={episodesQuery.error}
+              onRetry={() => {
+                void episodesQuery.refetch();
+              }}
+            />
+          ) : rows.length === 0 ? (
+            hasActiveFilters ? (
+              <EmptyPanel title="No episodes match the current filters.">
+                <button type="button" className="btn" onClick={clearFilters}>
+                  Clear filters
+                </button>
+              </EmptyPanel>
+            ) : (
+              <EmptyPanel
+                title="No episodes in this catalog yet."
+                hint="Record one with app.test(record=True) or import recordings with hflow ingest."
+              />
+            )
+          ) : (
+            <div className={isRefreshing ? "table-scroll is-refreshing" : "table-scroll"}>
+              <table className="data-table">
+                <thead>
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <tr key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => {
+                        const sortDirection = header.column.getIsSorted();
+                        const columnStats = statsByColumn.get(header.column.id);
+                        const isStatsFilterable =
+                          columnStats?.kind === "categorical" &&
+                          STATS_FILTERABLE_COLUMNS.has(header.column.id);
+                        return (
+                          <th
+                            key={header.id}
+                            aria-sort={
+                              sortDirection === "asc"
+                                ? "ascending"
+                                : sortDirection === "desc"
+                                  ? "descending"
+                                  : undefined
+                            }
+                          >
+                            <div className="th-inner">
+                              <button
+                                type="button"
+                                className="th-sort"
+                                onClick={header.column.getToggleSortingHandler()}
+                              >
+                                {flexRender(header.column.columnDef.header, header.getContext())}
+                                {sortDirection ? (
+                                  <ChevronDown
+                                    className={
+                                      sortDirection === "asc" ? "sort-arrow is-asc" : "sort-arrow"
+                                    }
+                                  />
+                                ) : null}
+                              </button>
+                              {columnStats ? (
+                                <HeaderDistribution
+                                  stats={columnStats}
+                                  onSelectValue={
+                                    isStatsFilterable
+                                      ? (value) => applyStatsValueFilter(header.column.id, value)
+                                      : null
+                                  }
+                                  activeValues={activeStatsValues(header.column.id)}
+                                />
+                              ) : null}
+                            </div>
+                          </th>
+                        );
+                      })}
+                    </tr>
+                  ))}
+                </thead>
+                <tbody>
+                  {table.getRowModel().rows.map((tableRow) => (
+                    // biome-ignore lint/a11y/useSemanticElements: a table row cannot become an <a>; the id cell carries the real <Link>, and role="link" tells assistive tech the focusable row itself activates too.
+                    <tr
+                      key={tableRow.id}
+                      className="episode-row"
+                      tabIndex={0}
+                      role="link"
+                      aria-label={`Open episode ${String(tableRow.original.episode_id ?? "")}`}
+                      onClick={() => openEpisode(tableRow.original)}
+                      onKeyDown={(event) => {
+                        // The episode_id link handles its own keys when focused.
+                        if (event.target !== event.currentTarget) return;
+                        if (event.key !== "Enter" && event.key !== " ") return;
+                        event.preventDefault(); // Space activates; it must not scroll.
+                        openEpisode(tableRow.original);
+                      }}
+                    >
+                      {tableRow.getAllCells().map((cell) => (
+                        <td key={cell.id}>
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="pagination-bar">
+        <button
+          type="button"
+          className="btn"
+          disabled={!canGoPrevious}
+          onClick={() => goToOffset(Math.max(0, query.offset - query.limit))}
+        >
+          Previous
+        </button>
+        <button
+          type="button"
+          className="btn"
+          disabled={!canGoNext}
+          onClick={() => goToOffset(query.offset + query.limit)}
+        >
+          Next
+        </button>
+        <span className="page-range">
+          {pageStart}–{pageEnd} of {total}
+        </span>
+        <div className="toolbar-spacer" />
+        <label className="toolbar-field">
+          <span className="toolbar-field-label">Rows</span>
+          <select
+            className="input"
+            value={String(query.limit)}
+            onChange={(event) => setPageSize(Number.parseInt(event.target.value, 10))}
+          >
+            {pageSizeChoices.map((size) => (
+              <option key={size} value={String(size)}>
+                {size}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+
+      <SqlFooter sql={episodesData?.sql} />
+    </div>
+  );
+}
diff --git a/ui/src/pages/PipelinePage.tsx b/ui/src/pages/PipelinePage.tsx
new file mode 100644
index 00000000..6f4593e3
--- /dev/null
+++ b/ui/src/pages/PipelinePage.tsx
@@ -0,0 +1,761 @@
+import { useQuery } from "@tanstack/react-query";
+import { ChevronDown } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import {
+  ApiError,
+  type DagTopology,
+  fetchPipeline,
+  fetchPipelineGraph,
+  type PipelineGraphResponse,
+  type PipelineGraphStage,
+  type PipelineResponse,
+  type QuarantineGate,
+} from "../api";
+import {
+  contentKey,
+  DagGraph,
+  type DagGraphEdge,
+  type DagGraphNode,
+  type DagGraphNodeContent,
+} from "../components/DagGraph";
+import { DetailBlock, DetailRow, DetailsPanel } from "../components/DetailsPanel";
+import { EmptyPanel, ErrorPanel, LoadingPanel } from "../components/QueryStates";
+import { VersionChip } from "../components/VersionChip";
+import { formatTimestamp } from "../format";
+
+// Two nested layers meet on this page and the UI must not conflate them:
+//   1. ORCHESTRATION — a real DAG with real edges (the master chain, and each
+//      stage's plan -> process_batch -> budget gate sub-DAG).
+//   2. USER STEPS — registered checks/enrichments that run INSIDE one
+//      process_batch task with NO edges between them, ordered only by the
+//      engine's two-tier cheap-first policy. Drawing arrows between them would
+//      be a lie, so this page draws groups and says so in words.
+// The one real cross-step edge is the quarantine gate, and it IS drawn.
+
+type PipelineSelection =
+  | { kind: "master-task"; taskId: string }
+  | { kind: "stage-task"; stage: string; taskId: string }
+  | { kind: "user-step"; stage: string; name: string }
+  | { kind: "engine-step"; stage: string; name: string }
+  | { kind: "quarantine" };
+
+function topologyNodes(topology: DagTopology): DagGraphNode[] {
+  return topology.tasks.map((task) => ({
+    id: task.task_id,
+    label: task.task_id,
+    summary: task.summary,
+    mapped: task.mapped,
+    deferred: task.deferred,
+  }));
+}
+
+function topologyEdges(topology: DagTopology): DagGraphEdge[] {
+  return topology.edges.map(([from, to]) => ({ from, to }));
+}
+
+/** The one dynamically mapped task in a stage sub-DAG: the node whose insides
+ * are the steps. Taken from the served topology rather than named here. */
+function mappedTaskId(stage: PipelineGraphStage): string | null {
+  return stage.dag.tasks.find((task) => task.mapped)?.task_id ?? null;
+}
+
+/** The quarantine gate as connectors: from the stage that runs the critical
+ * checks into the gate task of every stage its verdict can skip. */
+function quarantineEdges(
+  graph: PipelineGraphResponse,
+  gate: QuarantineGate | null,
+): DagGraphEdge[] {
+  if (!gate) return [];
+  const sourceStage = graph.stages.find((stage) => stage.stage === gate.from_stage);
+  if (!sourceStage) return [];
+  return gate.to_stages.flatMap((stageName) => {
+    const target = graph.stages.find((stage) => stage.stage === stageName);
+    if (!target) return [];
+    return [
+      {
+        from: sourceStage.trigger_task_id,
+        to: target.gate_task_id,
+        kind: "gate" as const,
+        label: "quarantine gate",
+      },
+    ];
+  });
+}
+
+function stageOfMasterTask(
+  graph: PipelineGraphResponse,
+  taskId: string,
+): PipelineGraphStage | undefined {
+  return graph.stages.find(
+    (stage) => stage.gate_task_id === taskId || stage.trigger_task_id === taskId,
+  );
+}
+
+function StageLane({
+  stage,
+  graph,
+  isExpanded,
+  onToggle,
+  selection,
+  onSelect,
+  derivedChannels,
+}: {
+  stage: PipelineGraphStage;
+  graph: PipelineGraphResponse;
+  isExpanded: boolean;
+  onToggle: () => void;
+  selection: PipelineSelection | null;
+  onSelect: (selection: PipelineSelection) => void;
+  derivedChannels: { topic: string; version: string }[];
+}) {
+  const gate = graph.quarantine_gate;
+  const isQuarantineGated = gate ? gate.to_stages.includes(stage.stage) : false;
+  const isQuarantineSource = gate ? gate.from_stage === stage.stage : false;
+  const tierOneSteps = stage.user_steps.filter((step) => step.tier === 1);
+  const tierTwoSteps = stage.user_steps.filter((step) => step.tier === 2);
+  // What process_batch actually runs, drawn INSIDE it. Engine work first (the
+  // transform, the catalog append), then the user's steps in the engine's own
+  // cheap-first order -- the same order and the same source as the cards below.
+  const batchContents: DagGraphNodeContent[] = graph.steps_known
+    ? [
+        ...stage.engine_steps.map((step) => ({
+          id: `engine:${step.name}`,
+          label: step.name,
+          summary: step.summary,
+          kind: "engine" as const,
+          badge: "engine",
+        })),
+        ...stage.user_steps.map((step) => ({
+          id: `user:${step.name}`,
+          label: step.name,
+          summary: `${step.kind}${step.critical ? ", critical" : ""} — runs in tier ${step.tier}`,
+          kind: "user" as const,
+          badge: step.critical ? "critical" : `t${step.tier}`,
+        })),
+      ]
+    : [];
+  const subDagNodes = topologyNodes(stage.dag).map((node) =>
+    node.mapped
+      ? {
+          ...node,
+          badge: "×N",
+          summary: `${node.summary} — one mapped instance per planned batch`,
+          contents: batchContents,
+          contentsNote: batchContents.length > 1 ? "one process; no edges between them" : null,
+        }
+      : node,
+  );
+  const selectedContentKey =
+    selection?.kind === "user-step" && selection.stage === stage.stage
+      ? contentKey(mappedTaskId(stage) ?? "", `user:${selection.name}`)
+      : selection?.kind === "engine-step" && selection.stage === stage.stage
+        ? contentKey(mappedTaskId(stage) ?? "", `engine:${selection.name}`)
+        : null;
+
+  return (
+    <div className={isExpanded ? "stage-lane-card is-expanded" : "stage-lane-card"}>
+      <button
+        type="button"
+        className="stage-lane-head"
+        onClick={onToggle}
+        aria-expanded={isExpanded}
+      >
+        <ChevronDown className={isExpanded ? "chevron is-open" : "chevron"} />
+        <span className="lane-stage">{stage.stage}</span>
+        <span className="lane-title">{stage.title}</span>
+        <span className="lane-description">{stage.description}</span>
+        <span className="toolbar-spacer" />
+        {isQuarantineSource ? <span className="chip chip-warn">sets quarantine</span> : null}
+        {isQuarantineGated ? <span className="chip chip-warn">quarantine-gated</span> : null}
+        <span className="lane-step-count">
+          {graph.steps_known
+            ? `${stage.user_steps.length} step${stage.user_steps.length === 1 ? "" : "s"}`
+            : "steps unknown"}
+        </span>
+      </button>
+      {isExpanded ? (
+        <div className="stage-lane-body">
+          <div className="stage-lane-meta">
+            <span className="stage-meta-item">
+              <span className="meta-label">sub-dag</span>
+              <code className="cell-mono">{stage.dag.dag_id}</code>
+            </span>
+            <span className="stage-meta-item">
+              <span className="meta-label">enabled by profiles</span>
+              <span className="profile-chips">
+                {stage.enabling_profiles.length === 0 ? (
+                  <span className="empty-note">none</span>
+                ) : (
+                  stage.enabling_profiles.map((profile) => (
+                    <span key={profile} className="chip chip-muted">
+                      {profile}
+                    </span>
+                  ))
+                )}
+              </span>
+            </span>
+          </div>
+          <DagGraph
+            nodes={subDagNodes}
+            edges={topologyEdges(stage.dag)}
+            label={`${stage.stage} sub-DAG`}
+            selectedNodeId={
+              selection?.kind === "stage-task" && selection.stage === stage.stage
+                ? selection.taskId
+                : null
+            }
+            onSelectNode={(taskId) => onSelect({ kind: "stage-task", stage: stage.stage, taskId })}
+            selectedContentKey={selectedContentKey}
+            onSelectContent={(_taskId, contentId) => {
+              const [contentKind, ...rest] = contentId.split(":");
+              const name = rest.join(":");
+              onSelect(
+                contentKind === "engine"
+                  ? { kind: "engine-step", stage: stage.stage, name }
+                  : { kind: "user-step", stage: stage.stage, name },
+              );
+            }}
+          />
+          <div className="inside-panel">
+            <div className="inside-panel-head">
+              <span className="inside-panel-title">
+                inside <code>process_batch</code>
+              </span>
+              <span className="inside-panel-note">
+                one mapped task instance per batch runs those steps, per episode
+              </span>
+            </div>
+            {/* The steps themselves are drawn inside the node above -- that is
+                where containment belongs. What is left here is what a badge
+                cannot say: what the tiers mean, and the channels the transform
+                writes, which are outputs rather than steps. */}
+            {!graph.steps_known ? (
+              <p className="empty-note">
+                No <code>--pipeline</code> configured, so the registered steps in this stage are
+                unknown. The orchestration above is the same either way.
+              </p>
+            ) : stage.user_steps.length === 0 && stage.engine_steps.length === 0 ? (
+              <p className="empty-note">Nothing registered in this stage.</p>
+            ) : (
+              <>
+                <dl className="tier-legend">
+                  {stage.engine_steps.length > 0 ? (
+                    <div className="tier-legend-entry">
+                      <dt>
+                        <span className="tier-badge is-engine">engine</span>
+                      </dt>
+                      <dd>work the engine always does in this stage</dd>
+                    </div>
+                  ) : null}
+                  {tierOneSteps.length > 0 ? (
+                    <div className="tier-legend-entry">
+                      <dt>
+                        <span className="tier-badge">t1</span>
+                      </dt>
+                      <dd>no requires, no endpoint alias — the engine runs these first</dd>
+                    </div>
+                  ) : null}
+                  {tierTwoSteps.length > 0 ? (
+                    <div className="tier-legend-entry">
+                      <dt>
+                        <span className="tier-badge">t2</span>
+                      </dt>
+                      <dd>declares requires or an endpoint alias — runs after tier 1</dd>
+                    </div>
+                  ) : null}
+                </dl>
+                {stage.user_steps.length > 1 ? (
+                  <p className="tier-note">
+                    Only the tier boundary is a real ordering. Within a tier the steps have no
+                    ordering between them: they run in one process, in the order shown, and nothing
+                    passes a value to anything else.
+                  </p>
+                ) : null}
+                {derivedChannels.length > 0 ? (
+                  <div className="tier-group">
+                    <div className="tier-head">
+                      <span className="tier-badge is-engine">derived channels</span>
+                      <span className="tier-caption">written by the canonical transform</span>
+                    </div>
+                    <div className="step-card-row">
+                      {derivedChannels.map((channel) => (
+                        <span key={channel.topic} className="step-card step-card-engine">
+                          <span className="step-card-top">
+                            <span className="step-card-name" title={channel.topic}>
+                              {channel.topic}
+                            </span>
+                          </span>
+                          <span className="step-card-meta">
+                            <span className="step-card-kind">derived channel</span>
+                            <VersionChip version={channel.version} />
+                          </span>
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                ) : null}
+              </>
+            )}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function SelectionDetails({
+  graph,
+  selection,
+  onExpandStage,
+}: {
+  graph: PipelineGraphResponse;
+  selection: PipelineSelection | null;
+  onExpandStage: (stage: string) => void;
+}) {
+  if (selection === null) {
+    return (
+      <DetailsPanel title="How to read this graph" kicker="legend">
+        <ul className="legend-list">
+          <li>
+            <span className="legend-swatch is-plain" aria-hidden="true" />
+            <span>A task in the generated DAG. Solid connectors are real dependencies.</span>
+          </li>
+          <li>
+            <span className="legend-swatch is-mapped" aria-hidden="true" />
+            <span>
+              A stacked card is dynamically mapped: <strong>×N</strong> instances, one per planned
+              batch.
+            </span>
+          </li>
+          <li>
+            <span className="legend-chip">waits</span>
+            <span>
+              A deferred task. It released its worker slot and is waiting — not stalled, not
+              running.
+            </span>
+          </li>
+          <li>
+            <span className="legend-swatch is-gate" aria-hidden="true" />
+            <span>
+              A dashed connector is a conditional gate, not a task dependency: the quarantine
+              verdict.
+            </span>
+          </li>
+        </ul>
+        <p className="details-hint">
+          Select any node or step to see what it does. The steps inside <code>process_batch</code>{" "}
+          have no edges between them — that is the model, not a missing feature.
+        </p>
+      </DetailsPanel>
+    );
+  }
+
+  if (selection.kind === "quarantine") {
+    const gate = graph.quarantine_gate;
+    if (!gate) return <DetailsPanel title="Quarantine gate">{null}</DetailsPanel>;
+    return (
+      <DetailsPanel title="Quarantine gate" kicker="conditional edge">
+        <p className="details-prose">{gate.explanation}</p>
+        <DetailRow label="decided in">{gate.from_stage}</DetailRow>
+        <DetailRow label="skips">{gate.to_stages.join(", ")}</DetailRow>
+        <DetailBlock label="critical checks">
+          {gate.critical_step_names.length === 0 ? (
+            <p className="empty-note">No critical checks are registered, so nothing quarantines.</p>
+          ) : (
+            <ul className="detail-list">
+              {gate.critical_step_names.map((name) => (
+                <li key={name} className="cell-mono">
+                  {name}
+                </li>
+              ))}
+            </ul>
+          )}
+        </DetailBlock>
+      </DetailsPanel>
+    );
+  }
+
+  if (selection.kind === "master-task") {
+    const task = graph.master.tasks.find((entry) => entry.task_id === selection.taskId);
+    const stage = stageOfMasterTask(graph, selection.taskId);
+    return (
+      <DetailsPanel title={selection.taskId} kicker="master dag task">
+        <p className="details-prose">{task?.summary ?? "Unknown task."}</p>
+        <DetailRow label="dag">
+          <code className="cell-mono">{graph.master.dag_id}</code>
+        </DetailRow>
+        {task?.deferred ? (
+          <DetailRow label="waiting">
+            defers its worker slot while the sub-DAG runs (Airflow calls this deferred)
+          </DetailRow>
+        ) : null}
+        {stage ? (
+          <>
+            <DetailRow label="stage">{stage.stage}</DetailRow>
+            <DetailRow label="enabled by">
+              {stage.enabling_profiles.length > 0 ? stage.enabling_profiles.join(", ") : "—"}
+            </DetailRow>
+            <DetailBlock label="sub-dag">
+              <code className="cell-mono">{stage.dag.dag_id}</code>
+              <button
+                type="button"
+                className="btn btn-tiny"
+                onClick={() => onExpandStage(stage.stage)}
+              >
+                Expand {stage.stage}
+              </button>
+            </DetailBlock>
+          </>
+        ) : null}
+      </DetailsPanel>
+    );
+  }
+
+  if (selection.kind === "stage-task") {
+    const stage = graph.stages.find((entry) => entry.stage === selection.stage);
+    const task = stage?.dag.tasks.find((entry) => entry.task_id === selection.taskId);
+    return (
+      <DetailsPanel title={selection.taskId} kicker={`${selection.stage} sub-dag task`}>
+        <p className="details-prose">{task?.summary ?? "Unknown task."}</p>
+        <DetailRow label="dag">
+          <code className="cell-mono">{stage?.dag.dag_id ?? "—"}</code>
+        </DetailRow>
+        {task?.mapped ? (
+          <DetailRow label="fan-out">
+            dynamically mapped — one instance per planned batch, each running every step below
+          </DetailRow>
+        ) : null}
+        {stage ? (
+          <DetailRow label="triggered by">
+            <code className="cell-mono">{stage.trigger_task_id}</code>
+          </DetailRow>
+        ) : null}
+      </DetailsPanel>
+    );
+  }
+
+  if (selection.kind === "engine-step") {
+    const stage = graph.stages.find((entry) => entry.stage === selection.stage);
+    const step = stage?.engine_steps.find((entry) => entry.name === selection.name);
+    return (
+      <DetailsPanel title={selection.name} kicker="engine step">
+        <p className="details-prose">{step?.summary ?? "Engine-owned work."}</p>
+        <DetailRow label="stage">{selection.stage}</DetailRow>
+        <DetailRow label="registered">no — the engine always runs it</DetailRow>
+      </DetailsPanel>
+    );
+  }
+
+  const stage = graph.stages.find((entry) => entry.stage === selection.stage);
+  const step = stage?.user_steps.find((entry) => entry.name === selection.name);
+  if (!step) return <DetailsPanel title={selection.name}>{null}</DetailsPanel>;
+  return (
+    <DetailsPanel title={step.name} kicker={`${step.kind} · ${selection.stage}`}>
+      <DetailRow label="version">
+        <VersionChip version={step.version} />
+      </DetailRow>
+      <DetailRow label="critical">
+        {step.critical ? (
+          <span className="chip chip-err">yes — a failure quarantines the episode</span>
+        ) : (
+          "no"
+        )}
+      </DetailRow>
+      <DetailRow label="endpoint">{step.uses ?? "—"}</DetailRow>
+      <DetailBlock label="requires">
+        {step.requires.length === 0 ? (
+          <p className="empty-note">nothing — it reads the canonical episode only</p>
+        ) : (
+          <ul className="detail-list">
+            {step.requires.map((requirement) => (
+              <li key={requirement} className="cell-mono">
+                {requirement}
+              </li>
+            ))}
+          </ul>
+        )}
+      </DetailBlock>
+      <p className="details-hint">
+        Tier {step.tier}
+        {step.tier === 2
+          ? " — it declares requires or an endpoint alias, so the engine runs it after the cheap steps."
+          : " — no requires and no endpoint, so the engine runs it first."}{" "}
+        Within a tier there is no ordering.
+      </p>
+    </DetailsPanel>
+  );
+}
+
+function PipelineGraphView({
+  graph,
+  pipeline,
+}: {
+  graph: PipelineGraphResponse;
+  pipeline: PipelineResponse | undefined;
+}) {
+  const [selection, setSelection] = useState<PipelineSelection | null>(null);
+  const [expandedStagesOverride, setExpandedStagesOverride] = useState<ReadonlySet<string> | null>(
+    null,
+  );
+
+  // Open the first stage that actually has registered steps, so the nested
+  // layer is visible without hunting; the user's own toggles take over after.
+  const defaultExpandedStages = useMemo(() => {
+    const firstWithSteps = graph.stages.find((stage) => stage.user_steps.length > 0);
+    const chosen = firstWithSteps ?? graph.stages[0];
+    return new Set<string>(chosen ? [chosen.stage] : []);
+  }, [graph]);
+  const expandedStages = expandedStagesOverride ?? defaultExpandedStages;
+
+  const toggleStage = (stageName: string) => {
+    setExpandedStagesOverride(() => {
+      const next = new Set(expandedStages);
+      if (next.has(stageName)) next.delete(stageName);
+      else next.add(stageName);
+      return next;
+    });
+  };
+  const expandStage = (stageName: string) => {
+    setExpandedStagesOverride(() => new Set(expandedStages).add(stageName));
+  };
+
+  const masterNodes = topologyNodes(graph.master);
+  const masterEdges = [
+    ...topologyEdges(graph.master),
+    ...quarantineEdges(graph, graph.quarantine_gate),
+  ];
+  const expandedTriggerIds = graph.stages
+    .filter((stage) => expandedStages.has(stage.stage))
+    .map((stage) => stage.trigger_task_id);
+
+  const derivedChannelsByStage = (stageName: string) =>
+    stageName === "sync" ? (pipeline?.manifest.derived_channels ?? []) : [];
+
+  return (
+    <>
+      {!graph.dag_ids_known ? (
+        <div className="notice-banner" role="status">
+          <strong>No runtime addressed.</strong> The task graph below is what a bundle for this
+          pipeline renders; the DAG ids are display-only until <code>hflow up</code> (or an{" "}
+          <code>HFLOW_AIRFLOW_*</code> environment) gives the UI a real bundle.
+        </div>
+      ) : null}
+      {!graph.steps_known ? (
+        <div className="notice-banner" role="status">
+          <strong>No pipeline configured.</strong> Orchestration is exact, but the steps inside{" "}
+          <code>process_batch</code> are unknown. Restart with{" "}
+          <code>hflow serve --pipeline path/to/pipeline.py</code> to see them.
+        </div>
+      ) : null}
+
+      <div className="graph-layout">
+        <div className="graph-column">
+          <section className="section">
+            <h2 className="section-title">
+              Orchestration · <code className="cell-mono">{graph.master.dag_id}</code>
+            </h2>
+            <p className="section-note">
+              The master DAG validates the conf, then walks the stage chain: each stage is gated on
+              the run profile and triggered as its own sub-DAG, which the master waits for.
+            </p>
+            <DagGraph
+              nodes={masterNodes}
+              edges={masterEdges}
+              label="Master ingest DAG"
+              selectedNodeId={selection?.kind === "master-task" ? selection.taskId : null}
+              expandedNodeIds={expandedTriggerIds}
+              onSelectNode={(taskId) => {
+                setSelection({ kind: "master-task", taskId });
+                const stage = stageOfMasterTask(graph, taskId);
+                if (stage) expandStage(stage.stage);
+              }}
+            />
+            {graph.quarantine_gate ? (
+              <button
+                type="button"
+                className={
+                  selection?.kind === "quarantine" ? "gate-callout is-selected" : "gate-callout"
+                }
+                onClick={() => setSelection({ kind: "quarantine" })}
+              >
+                <span className="gate-callout-title">quarantine gate</span>
+                <span className="gate-callout-text">{graph.quarantine_gate.explanation}</span>
+              </button>
+            ) : null}
+          </section>
+
+          <section className="section">
+            <h2 className="section-title">Stages</h2>
+            <p className="section-note">
+              Expand a stage for its sub-DAG and the steps that run inside its{" "}
+              <code>process_batch</code>.
+            </p>
+            <div className="stage-lane-list">
+              {graph.stages.map((stage) => (
+                <StageLane
+                  key={stage.stage}
+                  stage={stage}
+                  graph={graph}
+                  isExpanded={expandedStages.has(stage.stage)}
+                  onToggle={() => toggleStage(stage.stage)}
+                  selection={selection}
+                  onSelect={setSelection}
+                  derivedChannels={derivedChannelsByStage(stage.stage)}
+                />
+              ))}
+            </div>
+          </section>
+        </div>
+        <div className="details-column">
+          <SelectionDetails graph={graph} selection={selection} onExpandStage={expandStage} />
+        </div>
+      </div>
+    </>
+  );
+}
+
+function ObservedVersionsSection({ pipeline }: { pipeline: PipelineResponse }) {
+  return (
+    <section className="section">
+      <h2 className="section-title">Observed versions</h2>
+      {pipeline.observed.length === 0 ? (
+        <p className="empty-note">
+          No check runs recorded in this catalog yet — observed step versions appear after an
+          ingest.
+        </p>
+      ) : (
+        <div className="table-overflow">
+          <table className="evidence-table">
+            <thead>
+              <tr>
+                <th>check</th>
+                <th>version</th>
+                <th>first seen</th>
+                <th>last seen</th>
+                <th>runs</th>
+              </tr>
+            </thead>
+            <tbody>
+              {pipeline.observed.map((entry) => (
+                <tr key={`${entry.check_name}@${entry.check_version}`}>
+                  <td className="cell-mono">{entry.check_name}</td>
+                  <td>
+                    <VersionChip version={entry.check_version} />
+                  </td>
+                  <td className="cell-mono">{formatTimestamp(entry.first_seen)}</td>
+                  <td className="cell-mono">{formatTimestamp(entry.last_seen)}</td>
+                  <td className="cell-num">{entry.run_count}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </section>
+  );
+}
+
+export function PipelinePage() {
+  useEffect(() => {
+    document.title = "Pipeline · HFlow";
+    return () => {
+      document.title = "HFlow";
+    };
+  }, []);
+
+  const graphQuery = useQuery({
+    queryKey: ["pipeline-graph"],
+    queryFn: fetchPipelineGraph,
+    retry: (failureCount, error) =>
+      !(error instanceof ApiError && (error.status === 404 || error.status === 409)) &&
+      failureCount < 1,
+  });
+  const pipelineQuery = useQuery({
+    queryKey: ["pipeline"],
+    queryFn: fetchPipeline,
+    // 409 means "no --pipeline configured" — a stable state, not a transient failure.
+    retry: (failureCount, error) =>
+      !(error instanceof ApiError && error.status === 409) && failureCount < 1,
+  });
+
+  const manifest = pipelineQuery.data?.manifest;
+  const stale = pipelineQuery.data?.stale;
+  const pipelineTitle = manifest?.pipeline_name ?? graphQuery.data?.master.dag_id ?? "Pipeline";
+
+  return (
+    <div className="pipeline-page">
+      <div className="page-title-row">
+        <h1 className="page-title">{pipelineTitle}</h1>
+        {manifest ? <VersionChip version={manifest.pipeline_version} /> : null}
+      </div>
+      {manifest ? (
+        <div className="meta-grid pipeline-meta">
+          <div className="meta-item">
+            <div className="meta-label">hflow version</div>
+            <p className="meta-value">{manifest.hflow_version}</p>
+          </div>
+          <div className="meta-item">
+            <div className="meta-label">schema version</div>
+            <p className="meta-value">{manifest.schema_version}</p>
+          </div>
+          <div className="meta-item">
+            <div className="meta-label">endpoint aliases</div>
+            <p className="meta-value">
+              {manifest.endpoint_aliases.length > 0 ? manifest.endpoint_aliases.join(", ") : "—"}
+            </p>
+          </div>
+        </div>
+      ) : null}
+
+      {stale && stale.count > 0 ? (
+        <div className="stale-banner" role="status">
+          <strong>
+            {stale.count} episode{stale.count === 1 ? " is" : "s are"} stale
+          </strong>{" "}
+          against pipeline version <code className="cell-mono">{stale.pipeline_version}</code> —
+          last processed by an older pipeline. The pipeline version is stamped by the canonical
+          transform, so refreshing them means a re-run that includes the <code>sync</code> stage:
+          the default <code>full</code> profile. (<code>metadata_backfill</code> and{" "}
+          <code>relabel</code> re-run later stages only, and leave this version untouched.)
+        </div>
+      ) : null}
+
+      {graphQuery.isPending ? (
+        <LoadingPanel label="Loading the pipeline graph…" />
+      ) : graphQuery.isError ? (
+        graphQuery.error instanceof ApiError && graphQuery.error.status === 404 ? (
+          <EmptyPanel
+            title="This server does not serve the pipeline graph."
+            hint="Upgrade hflow-server to see the ingest DAG and its stage sub-DAGs here."
+          />
+        ) : (
+          <ErrorPanel
+            error={graphQuery.error}
+            onRetry={() => {
+              void graphQuery.refetch();
+            }}
+          />
+        )
+      ) : (
+        <PipelineGraphView graph={graphQuery.data} pipeline={pipelineQuery.data} />
+      )}
+
+      {pipelineQuery.data ? <ObservedVersionsSection pipeline={pipelineQuery.data} /> : null}
+      {pipelineQuery.isError &&
+      pipelineQuery.error instanceof ApiError &&
+      pipelineQuery.error.status === 409 ? (
+        <section className="section">
+          <h2 className="section-title">Registered steps</h2>
+          <EmptyPanel title="No pipeline manifest." hint={pipelineQuery.error.detail}>
+            <p className="state-detail">
+              Start the server with <code>hflow serve --pipeline path/to/pipeline.py</code> (append{" "}
+              <code>:app</code> if the App object is not named <code>app</code>) to see registered
+              steps, versions and staleness here. The file is imported once at startup, in your own
+              environment.
+            </p>
+          </EmptyPanel>
+        </section>
+      ) : null}
+    </div>
+  );
+}
diff --git a/ui/src/pages/RunsPage.tsx b/ui/src/pages/RunsPage.tsx
new file mode 100644
index 00000000..6b9d09a0
--- /dev/null
+++ b/ui/src/pages/RunsPage.tsx
@@ -0,0 +1,1158 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { ChevronDown, ExternalLink, Play, RefreshCw } from "lucide-react";
+import { Fragment, useEffect, useMemo, useState } from "react";
+import {
+  ApiError,
+  type DagTopology,
+  describeApiError,
+  fetchPipelineGraph,
+  fetchRunGraph,
+  fetchRuntimeRuns,
+  fetchRuntimeStatus,
+  fetchWorkspaceConfig,
+  type MappedFanOutSummary,
+  type PipelineGraphResponse,
+  type RunGraphResponse,
+  type RunGraphStage,
+  type RunTaskInstance,
+  type RuntimeHealth,
+  type RuntimeRun,
+  type RuntimeStatus,
+  STAGE_ORDER,
+  type StageRecentRuns,
+  triggerIngest,
+  type WorkspaceConfig,
+} from "../api";
+import { DagGraph, type DagGraphNode } from "../components/DagGraph";
+import { DetailBlock, DetailRow, DetailsPanel } from "../components/DetailsPanel";
+import { EmptyPanel, ErrorPanel, LoadingPanel } from "../components/QueryStates";
+import { RunStateChip } from "../components/RunStateChip";
+import { RunTimeline } from "../components/RunTimeline";
+import {
+  formatDurationBetween,
+  formatDurationCompact,
+  formatOffsetCompact,
+  formatTimestamp,
+} from "../format";
+import { runStateTone } from "../runState";
+import {
+  buildRunReplay,
+  formatInstant,
+  formatOffsetLabel,
+  isRunUnfinished,
+  MASTER_SCOPE,
+  NOT_STARTED_STATE,
+  type RunNodeSelection,
+  replayedFanOutSummary,
+  replayedRunState,
+  replayTaskInstances,
+} from "../runTimeline";
+import { useNowTick } from "../useNowTick";
+import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
+
+const RUNS_PAGE_LIMIT = 25;
+const AUTO_REFRESH_INTERVAL_MS = 10_000;
+
+// How often the replay's "now" edge advances while a run is unfinished. The
+// axis only has to keep up with the reader's eye, and a reader who asked for
+// reduced motion gets the slow clock rather than a creeping edge.
+const LIVE_TICK_INTERVAL_MS = 1_000;
+const LIVE_TICK_INTERVAL_REDUCED_MOTION_MS = 5_000;
+
+// The runs monitor renders exactly what the server proxied from Airflow —
+// the browser never sees Airflow credentials, only these JSON summaries.
+
+type HealthTone = "ok" | "err" | "warn" | "muted";
+
+function healthTone(status: string | null): HealthTone {
+  if (status === null) return "muted";
+  if (status.toLowerCase() === "healthy") return "ok";
+  if (status.toLowerCase() === "unhealthy") return "err";
+  return "warn";
+}
+
+const HEALTH_COMPONENT_NAMES: readonly (keyof RuntimeHealth)[] = [
+  "metadatabase",
+  "scheduler",
+  "triggerer",
+  "dag_processor",
+];
+
+function StatusTiles({ status }: { status: RuntimeStatus }) {
+  return (
+    <div className="status-tiles">
+      <div className="status-tile">
+        <span className="status-tile-label">source</span>
+        <span className="status-tile-value">{status.source ?? "—"}</span>
+      </div>
+      <div className="status-tile">
+        <span className="status-tile-label">dag</span>
+        <span className="status-tile-value status-tile-mono" title={status.dag_id ?? undefined}>
+          {status.dag_id ?? "—"}
+        </span>
+        {status.registered === null ? null : (
+          <span className={status.registered ? "chip chip-ok" : "chip chip-warn"}>
+            {status.registered ? "registered" : "not registered"}
+          </span>
+        )}
+      </div>
+      {HEALTH_COMPONENT_NAMES.map((componentName) => {
+        const componentStatus = status.health ? status.health[componentName] : null;
+        const tone = healthTone(componentStatus);
+        return (
+          <div key={componentName} className={`status-tile health-tile is-${tone}`}>
+            <span className="status-tile-label">{componentName.replace("_", " ")}</span>
+            <span className="status-tile-value">
+              <span className={`health-dot is-${tone}`} aria-hidden="true" />
+              {componentStatus ?? "absent"}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function confSummaryText(conf: Record<string, unknown>): string {
+  const parts: string[] = [];
+  for (const [key, value] of Object.entries(conf)) {
+    if (parts.length === 4) {
+      parts.push("…");
+      break;
+    }
+    if (Array.isArray(value)) parts.push(`${key} ×${value.length}`);
+    else if (value !== null && typeof value === "object") parts.push(`${key}={…}`);
+    else parts.push(`${key}=${String(value)}`);
+  }
+  return parts.length > 0 ? parts.join(" · ") : "—";
+}
+
+/** Airflow 3 web route for one dag run, or null when the base/dag is unknown. */
+function airflowRunUrl(
+  webUrlBase: string | null,
+  dagId: string | null,
+  dagRunId: string | null,
+): string | null {
+  // No base, no dag, or no run id means there is nothing to deep-link to; the
+  // caller renders no link rather than a broken one.
+  if (!webUrlBase || !dagId || !dagRunId) return null;
+  const base = webUrlBase.replace(/\/$/, "");
+  return `${base}/dags/${encodeURIComponent(dagId)}/runs/${encodeURIComponent(dagRunId)}`;
+}
+
+function airflowTaskUrl(
+  webUrlBase: string | null,
+  dagId: string | null,
+  dagRunId: string | null,
+  taskId: string,
+): string | null {
+  if (!dagRunId) return null;
+  const runUrl = airflowRunUrl(webUrlBase, dagId, dagRunId);
+  return runUrl ? `${runUrl}/tasks/${encodeURIComponent(taskId)}` : null;
+}
+
+// ---- run graph ----------------------------------------------------------------
+
+/** One node's live picture: the instances Airflow reported for that task id. */
+interface TaskInstanceGroup {
+  instances: RunTaskInstance[];
+  /** The state to paint the node with; the badge carries the exact counts. */
+  state: string | null;
+  badge: string | null;
+}
+
+function summarizeInstances(
+  instances: RunTaskInstance[],
+  mappedSummary: MappedFanOutSummary | null,
+): TaskInstanceGroup {
+  if (instances.length === 0) return { instances, state: null, badge: null };
+  const isMapped = instances.some((instance) => instance.map_index >= 0);
+  if (!isMapped) {
+    const single = instances[0] as RunTaskInstance;
+    return {
+      instances,
+      state: single.state,
+      badge: single.duration_s === null ? null : formatDurationCompact(single.duration_s),
+    };
+  }
+  const byState = new Map<string, number>();
+  for (const instance of instances) {
+    const stateName = instance.state ?? "no state";
+    byState.set(stateName, (byState.get(stateName) ?? 0) + 1);
+  }
+  const total = mappedSummary?.total ?? instances.length;
+  const succeeded = mappedSummary?.by_state.success ?? byState.get("success") ?? 0;
+  // The painted state names the most urgent thing happening in the fan-out;
+  // the badge below it always shows the real split, so nothing is hidden.
+  const dominantState =
+    (byState.has("running") && "running") ||
+    (byState.has("failed") && "failed") ||
+    (byState.has("upstream_failed") && "upstream_failed") ||
+    (byState.has("deferred") && "deferred") ||
+    (succeeded === total && "success") ||
+    instances[0]?.state ||
+    null;
+  return { instances, state: dominantState, badge: `${succeeded}/${total} ok` };
+}
+
+function instanceGroupsByTaskId(
+  tasks: RunTaskInstance[],
+  mappedSummary: MappedFanOutSummary | null,
+): Map<string, TaskInstanceGroup> {
+  const byTaskId = new Map<string, RunTaskInstance[]>();
+  for (const instance of tasks) {
+    // task_id is nullable in the served payload; an instance without one
+    // belongs to no node on the graph, so it is left out of the grouping
+    // rather than bucketed under a fabricated key.
+    const taskId = instance.task_id;
+    if (taskId === null) continue;
+    const bucket = byTaskId.get(taskId);
+    if (bucket) bucket.push(instance);
+    else byTaskId.set(taskId, [instance]);
+  }
+  const groups = new Map<string, TaskInstanceGroup>();
+  for (const [taskId, instances] of byTaskId) {
+    groups.set(
+      taskId,
+      summarizeInstances(
+        instances,
+        mappedSummary && mappedSummary.task_id === taskId ? mappedSummary : null,
+      ),
+    );
+  }
+  return groups;
+}
+
+/**
+ * Nodes for one DAG. `unstartedState` is what a task with nothing to paint
+ * reads as: live that means Airflow has no instance for it at all, but at a
+ * replay instant it means the instance exists and had not started yet — two
+ * different truths that must not share one word.
+ */
+function liveNodes(
+  topology: DagTopology,
+  groups: Map<string, TaskInstanceGroup>,
+  unstartedState: string,
+): DagGraphNode[] {
+  return topology.tasks.map((task) => {
+    const group = groups.get(task.task_id);
+    return {
+      id: task.task_id,
+      label: task.task_id,
+      summary: task.summary,
+      mapped: task.mapped,
+      deferred: task.deferred,
+      state: group?.state ?? unstartedState,
+      badge: group?.badge ?? (task.mapped ? "×0" : null),
+    };
+  });
+}
+
+function TaskInstanceDetails({
+  selection,
+  group,
+  summary,
+  dagId,
+  dagRunId,
+  airflowWebUrl,
+  replayAtMs,
+  replayEndMs,
+  replayOffsetMinutes,
+  replayStartMs,
+}: {
+  selection: RunNodeSelection;
+  group: TaskInstanceGroup | undefined;
+  summary: string;
+  dagId: string;
+  dagRunId: string | null;
+  airflowWebUrl: string | null;
+  /** The replay instant the panel reports state at; null = the live payload. */
+  replayAtMs: number | null;
+  replayEndMs: number;
+  replayOffsetMinutes: number;
+  replayStartMs: number;
+}) {
+  const taskUrl = airflowTaskUrl(airflowWebUrl, dagId, dagRunId, selection.taskId);
+  const rawInstances = group?.instances ?? [];
+  // The panel keeps the facts (timestamps, tries, real durations) whatever the
+  // playhead says; only the STATE is restated at the replay instant.
+  const replayedGroup =
+    replayAtMs === null || group === undefined
+      ? undefined
+      : summarizeInstances(replayTaskInstances(rawInstances, replayAtMs, replayEndMs), null);
+  // A replayed null state means "had not started", which is a real answer —
+  // it must not fall through to the run's final state. The fallback word
+  // matches the graph node's for the same instant.
+  const unstartedState = replayAtMs === null ? "no instance" : NOT_STARTED_STATE;
+  const shownState =
+    replayedGroup !== undefined
+      ? (replayedGroup.state ?? unstartedState)
+      : (group?.state ?? unstartedState);
+  const mappedInstances = (
+    replayAtMs === null ? rawInstances : replayTaskInstances(rawInstances, replayAtMs, replayEndMs)
+  ).filter((instance) => instance.map_index >= 0);
+  const single = rawInstances.length === 1 ? rawInstances[0] : undefined;
+  return (
+    <DetailsPanel
+      title={selection.taskId}
+      kicker={selection.scope === MASTER_SCOPE ? "master task" : `${selection.scope} task`}
+    >
+      <p className="details-prose">{summary}</p>
+      <DetailRow label="state">
+        <RunStateChip state={shownState} />
+      </DetailRow>
+      {replayAtMs === null ? null : (
+        <DetailRow label="at">
+          <span className="detail-replay-at">
+            +{formatOffsetCompact((replayAtMs - replayStartMs) / 1000)} ·{" "}
+            {formatInstant(replayAtMs, replayOffsetMinutes)}
+          </span>
+        </DetailRow>
+      )}
+      {single ? (
+        <>
+          <DetailRow label="started">
+            {single.start_date ? formatTimestamp(single.start_date) : "—"}
+          </DetailRow>
+          <DetailRow label="ended">
+            {single.end_date ? formatTimestamp(single.end_date) : "—"}
+          </DetailRow>
+          <DetailRow label="duration">{formatDurationCompact(single.duration_s)}</DetailRow>
+          <DetailRow label="tries">{single.try_number ?? "—"}</DetailRow>
+        </>
+      ) : null}
+      {mappedInstances.length > 0 ? (
+        <DetailBlock
+          label={`mapped instances · ${mappedInstances.length}${
+            replayAtMs === null ? "" : " · at the playhead"
+          }`}
+        >
+          <ul className="instance-list">
+            {mappedInstances.map((instance) => (
+              <li key={instance.map_index} className="instance-row">
+                <span className="instance-index">[{instance.map_index}]</span>
+                <RunStateChip state={instance.state} />
+                <span className="instance-duration">
+                  {formatDurationCompact(instance.duration_s)}
+                </span>
+                {instance.try_number !== null && instance.try_number > 1 ? (
+                  <span
+                    className="chip chip-warn"
+                    title="Only this last attempt is in the payload; earlier ones are not."
+                  >
+                    try {instance.try_number}
+                  </span>
+                ) : null}
+              </li>
+            ))}
+          </ul>
+        </DetailBlock>
+      ) : null}
+      {replayAtMs === null ? null : (
+        <p className="details-hint">
+          States are reconstructed at the playhead; the timings above are the run's own.
+        </p>
+      )}
+      {taskUrl ? (
+        <a className="btn btn-tiny" href={taskUrl} target="_blank" rel="noreferrer">
+          <ExternalLink />
+          <span>Open in Airflow</span>
+        </a>
+      ) : null}
+    </DetailsPanel>
+  );
+}
+
+/** The batch fan-out at a glance: one proportional bar in the state palette,
+ * with the counts spelled out beside it so the split never rests on colour. */
+function FanOutSummary({ summary }: { summary: MappedFanOutSummary }) {
+  const succeeded = summary.by_state.success ?? 0;
+  const otherStates = Object.entries(summary.by_state)
+    .filter(([stateName]) => stateName !== "success")
+    .sort((left, right) => right[1] - left[1]);
+  return (
+    <span className="fanout">
+      <span className="fanout-bar" aria-hidden="true">
+        {Object.entries(summary.by_state).map(([stateName, count]) => (
+          <span
+            key={stateName}
+            className={`fanout-seg is-${runStateTone(stateName)}`}
+            style={{ flexGrow: count }}
+            title={`${count} ${stateName}`}
+          />
+        ))}
+      </span>
+      <span className="fanout-readout">
+        {succeeded} of {summary.total} batches succeeded
+        {otherStates.map(([stateName, count]) => ` · ${count} ${stateName}`).join("")}
+      </span>
+    </span>
+  );
+}
+
+function StageRunGraph({
+  stage,
+  topology,
+  selection,
+  onSelect,
+  airflowWebUrl,
+  replayAtMs,
+  replayEndMs,
+}: {
+  stage: RunGraphStage;
+  topology: DagTopology | undefined;
+  selection: RunNodeSelection | null;
+  onSelect: (selection: RunNodeSelection) => void;
+  airflowWebUrl: string | null;
+  /** Non-null while the playhead is parked: paint this instant, not the live state. */
+  replayAtMs: number | null;
+  replayEndMs: number;
+}) {
+  // Replaying re-states the instances at the playhead and recounts the
+  // fan-out from them; the server's summary is the run's final split, which
+  // would contradict the bars mid-scrub.
+  const tasks = useMemo(
+    () =>
+      replayAtMs === null ? stage.tasks : replayTaskInstances(stage.tasks, replayAtMs, replayEndMs),
+    [stage.tasks, replayAtMs, replayEndMs],
+  );
+  const mappedSummary = useMemo(
+    () =>
+      replayAtMs === null
+        ? stage.mapped_summary
+        : replayedFanOutSummary(stage.mapped_summary, tasks),
+    [stage.mapped_summary, tasks, replayAtMs],
+  );
+  const groups = useMemo(
+    () => instanceGroupsByTaskId(tasks, mappedSummary),
+    [tasks, mappedSummary],
+  );
+  const stageState =
+    replayAtMs === null
+      ? stage.state
+      : replayedRunState(stage.tasks, stage.state, replayAtMs, replayEndMs);
+  const runUrl = stage.dag_run_id
+    ? airflowRunUrl(airflowWebUrl, stage.dag_id, stage.dag_run_id)
+    : null;
+  return (
+    <div className="stage-lane-card is-expanded">
+      <div className="stage-run-head">
+        <span className="lane-stage">{stage.stage}</span>
+        <RunStateChip state={stageState ?? "not run"} />
+        <code className="cell-mono stage-run-dag" title={stage.dag_id}>
+          {stage.dag_id}
+        </code>
+        {mappedSummary ? <FanOutSummary summary={mappedSummary} /> : null}
+        <span className="toolbar-spacer" />
+        {stage.match === "heuristic" ? (
+          <span
+            className="chip chip-muted"
+            title="Matched to this master run by start time — Airflow stores no parent-run link for triggered sub-DAGs."
+          >
+            matched by time
+          </span>
+        ) : null}
+        {runUrl ? (
+          <a className="btn btn-ghost btn-tiny" href={runUrl} target="_blank" rel="noreferrer">
+            <ExternalLink />
+          </a>
+        ) : null}
+      </div>
+      {stage.dag_run_id === null ? (
+        <p className="empty-note stage-run-empty">
+          This stage did not run for this master run (the run profile skipped it, or the chain
+          stopped before it).
+        </p>
+      ) : !topology ? (
+        <p className="empty-note stage-run-empty">
+          No topology for this stage — the server does not describe it.
+        </p>
+      ) : (
+        <DagGraph
+          nodes={liveNodes(
+            topology,
+            groups,
+            replayAtMs === null ? "no instance" : NOT_STARTED_STATE,
+          )}
+          edges={topology.edges.map(([from, to]) => ({ from, to }))}
+          label={`${stage.stage} sub-DAG for this run`}
+          selectedNodeId={selection?.scope === stage.stage ? selection.taskId : null}
+          onSelectNode={(taskId) => onSelect({ scope: stage.stage, taskId })}
+        />
+      )}
+    </div>
+  );
+}
+
+function RunGraphSection({
+  runGraph,
+  graph,
+  airflowWebUrl,
+  isAutoRefreshOn,
+}: {
+  runGraph: RunGraphResponse;
+  graph: PipelineGraphResponse;
+  airflowWebUrl: string | null;
+  isAutoRefreshOn: boolean;
+}) {
+  const [selection, setSelection] = useState<RunNodeSelection | null>(null);
+  // null = pinned to the axis end, which for an unfinished run is live; any
+  // number is a parked playhead, and parking is what detaches from live.
+  const [playheadChoice, setPlayheadChoice] = useState<number | null>(null);
+
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const unfinished = isRunUnfinished(runGraph);
+  const nowMs = useNowTick(
+    unfinished
+      ? prefersReducedMotion
+        ? LIVE_TICK_INTERVAL_REDUCED_MOTION_MS
+        : LIVE_TICK_INTERVAL_MS
+      : null,
+  );
+  const replay = useMemo(() => buildRunReplay(runGraph, graph, nowMs), [runGraph, graph, nowMs]);
+  const playheadMs = playheadChoice ?? replay.endMs;
+  // Only a parked playhead repaints the graphs; pinned to the end, the page
+  // shows the payload exactly as the server sent it.
+  const replayAtMs = playheadChoice === null ? null : playheadMs;
+
+  const masterTasks = useMemo(
+    () =>
+      replayAtMs === null
+        ? runGraph.master.tasks
+        : replayTaskInstances(runGraph.master.tasks, replayAtMs, replay.endMs),
+    [runGraph.master.tasks, replayAtMs, replay.endMs],
+  );
+  const masterGroups = useMemo(() => instanceGroupsByTaskId(masterTasks, null), [masterTasks]);
+  // The details panel reads the RAW instances: its timestamps and tries are
+  // facts about the run, not about the instant being replayed.
+  const rawMasterGroups = useMemo(
+    () => instanceGroupsByTaskId(runGraph.master.tasks, null),
+    [runGraph.master.tasks],
+  );
+
+  const selectedStage =
+    selection && selection.scope !== MASTER_SCOPE
+      ? runGraph.stages.find((stage) => stage.stage === selection.scope)
+      : undefined;
+  const selectedGroup =
+    selection === null
+      ? undefined
+      : selection.scope === MASTER_SCOPE
+        ? rawMasterGroups.get(selection.taskId)
+        : selectedStage
+          ? instanceGroupsByTaskId(selectedStage.tasks, selectedStage.mapped_summary).get(
+              selection.taskId,
+            )
+          : undefined;
+  const selectedTopology =
+    selection === null
+      ? undefined
+      : selection.scope === MASTER_SCOPE
+        ? graph.master
+        : graph.stages.find((stage) => stage.stage === selection.scope)?.dag;
+  const selectedSummary =
+    selectedTopology?.tasks.find((task) => task.task_id === selection?.taskId)?.summary ??
+    "This task is not part of the topology this server describes.";
+
+  const masterState =
+    replayAtMs === null
+      ? runGraph.master.state
+      : replayedRunState(runGraph.master.tasks, runGraph.master.state, replayAtMs, replay.endMs);
+
+  return (
+    <section className="section">
+      <h2 className="section-title">Run graph</h2>
+      <div className="run-graph-head">
+        <RunStateChip state={masterState} />
+        <code className="cell-mono run-graph-id" title={runGraph.master.dag_run_id}>
+          {runGraph.master.dag_run_id}
+        </code>
+        {replayAtMs === null ? null : (
+          <span
+            className="chip chip-accent"
+            title={`The graphs are painted as of ${formatInstant(
+              replayAtMs,
+              replay.offsetMinutes,
+            )} ${formatOffsetLabel(replay.offsetMinutes)}, not at the live state.`}
+          >
+            replay +{formatOffsetCompact((replayAtMs - replay.startMs) / 1000)}
+          </span>
+        )}
+      </div>
+      <div className={replayAtMs === null ? "graph-layout" : "graph-layout is-replaying"}>
+        <div className="graph-column">
+          <DagGraph
+            nodes={liveNodes(
+              graph.master,
+              masterGroups,
+              replayAtMs === null ? "no instance" : NOT_STARTED_STATE,
+            )}
+            edges={graph.master.edges.map(([from, to]) => ({ from, to }))}
+            label="Master DAG for this run"
+            selectedNodeId={selection?.scope === MASTER_SCOPE ? selection.taskId : null}
+            onSelectNode={(taskId) => setSelection({ scope: MASTER_SCOPE, taskId })}
+          />
+          <RunTimeline
+            replay={replay}
+            playheadMs={playheadMs}
+            onPlayheadChange={setPlayheadChoice}
+            isPinnedToEnd={playheadChoice === null}
+            selection={selection}
+            onSelect={setSelection}
+            isAutoRefreshOn={isAutoRefreshOn}
+          />
+          <div className="stage-lane-list">
+            {runGraph.stages.map((stage) => (
+              <StageRunGraph
+                key={stage.stage}
+                stage={stage}
+                topology={graph.stages.find((entry) => entry.stage === stage.stage)?.dag}
+                selection={selection}
+                onSelect={setSelection}
+                airflowWebUrl={airflowWebUrl}
+                replayAtMs={replayAtMs}
+                replayEndMs={replay.endMs}
+              />
+            ))}
+          </div>
+        </div>
+        <div className="details-column">
+          {selection === null ? (
+            <DetailsPanel title="No task selected" kicker="details">
+              <p className="details-hint">
+                Select a node in the master DAG, a row in the replay, or a node in a stage sub-DAG
+                to see its state, timings and tries. Stacked nodes are mapped fan-outs: their badge
+                is the batch split, and the panel lists every instance.
+              </p>
+            </DetailsPanel>
+          ) : (
+            <TaskInstanceDetails
+              selection={selection}
+              group={selectedGroup}
+              summary={selectedSummary}
+              dagId={
+                selection.scope === MASTER_SCOPE
+                  ? graph.master.dag_id
+                  : (selectedStage?.dag_id ?? "")
+              }
+              dagRunId={
+                selection.scope === MASTER_SCOPE
+                  ? runGraph.master.dag_run_id
+                  : (selectedStage?.dag_run_id ?? null)
+              }
+              airflowWebUrl={airflowWebUrl}
+              replayAtMs={replayAtMs}
+              replayEndMs={replay.endMs}
+              replayStartMs={replay.startMs}
+              replayOffsetMinutes={replay.offsetMinutes}
+            />
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+// ---- tables -------------------------------------------------------------------
+
+/**
+ * A run the server could identify.
+ *
+ * `dag_run_id` is nullable in the served payload, and a run without one cannot
+ * be selected, deep-linked, or used as a React key. {@link identifiedRuns}
+ * separates those out once instead of every use site re-checking.
+ */
+type IdentifiedRun = Omit<RuntimeRun, "dag_run_id"> & { dag_run_id: string };
+
+function identifiedRuns(runs: readonly RuntimeRun[]): IdentifiedRun[] {
+  return runs.flatMap((run) => {
+    const dagRunId = run.dag_run_id;
+    return dagRunId === null ? [] : [{ ...run, dag_run_id: dagRunId }];
+  });
+}
+
+function MasterRunsTable({
+  runs,
+  airflowWebUrl,
+  dagId,
+  selectedRunId,
+  onSelectRun,
+}: {
+  runs: RuntimeRun[];
+  airflowWebUrl: string | null;
+  dagId: string | null;
+  selectedRunId: string | null;
+  onSelectRun: (dagRunId: string) => void;
+}) {
+  const [expandedRunIds, setExpandedRunIds] = useState<ReadonlySet<string>>(new Set());
+  const hasAirflowLinks = airflowWebUrl !== null && dagId !== null;
+
+  const toggleExpanded = (dagRunId: string) => {
+    setExpandedRunIds((previous) => {
+      const next = new Set(previous);
+      if (next.has(dagRunId)) next.delete(dagRunId);
+      else next.add(dagRunId);
+      return next;
+    });
+  };
+
+  if (runs.length === 0) {
+    return (
+      <p className="empty-note">
+        No runs yet. Trigger an ingest below, or with <code>hflow ingest</code>.
+      </p>
+    );
+  }
+
+  const columnCount = hasAirflowLinks ? 7 : 6;
+
+  return (
+    <div className="table-overflow">
+      <table className="evidence-table">
+        <thead>
+          <tr>
+            <th aria-label="Expand" />
+            <th>state</th>
+            <th>run id</th>
+            <th>started</th>
+            <th>duration</th>
+            <th>conf</th>
+            {hasAirflowLinks ? <th aria-label="Airflow link" /> : null}
+          </tr>
+        </thead>
+        <tbody>
+          {identifiedRuns(runs).map((run) => {
+            const isExpanded = expandedRunIds.has(run.dag_run_id);
+            const isSelected = run.dag_run_id === selectedRunId;
+            const runUrl = airflowRunUrl(airflowWebUrl, dagId, run.dag_run_id);
+            return (
+              <Fragment key={run.dag_run_id}>
+                <tr className={isSelected ? "is-selected-run" : undefined}>
+                  <td>
+                    <button
+                      type="button"
+                      className="btn btn-ghost btn-tiny"
+                      onClick={() => toggleExpanded(run.dag_run_id)}
+                      aria-expanded={isExpanded}
+                      title={isExpanded ? "Hide the full conf" : "Show the full conf"}
+                    >
+                      <ChevronDown className={isExpanded ? "chevron is-open" : "chevron"} />
+                    </button>
+                  </td>
+                  <td>
+                    <RunStateChip state={run.state} />
+                  </td>
+                  <td>
+                    <button
+                      type="button"
+                      className={isSelected ? "run-id-button is-selected" : "run-id-button"}
+                      onClick={() => onSelectRun(run.dag_run_id)}
+                      title={
+                        isSelected ? "Shown in the run graph above" : "Show this run in the graph"
+                      }
+                      aria-current={isSelected}
+                    >
+                      {run.dag_run_id}
+                    </button>
+                  </td>
+                  <td className="cell-mono">
+                    {run.start_date ? formatTimestamp(run.start_date) : "—"}
+                  </td>
+                  <td className="cell-num">
+                    {formatDurationBetween(run.start_date, run.end_date)}
+                  </td>
+                  <td className="conf-summary" title={confSummaryText(run.conf)}>
+                    {confSummaryText(run.conf)}
+                  </td>
+                  {hasAirflowLinks ? (
+                    <td>
+                      {runUrl ? (
+                        <a
+                          className="btn btn-ghost btn-tiny"
+                          href={runUrl}
+                          target="_blank"
+                          rel="noreferrer"
+                          title="Open this run in Airflow"
+                        >
+                          <ExternalLink />
+                        </a>
+                      ) : null}
+                    </td>
+                  ) : null}
+                </tr>
+                {isExpanded ? (
+                  <tr className="conf-detail-row">
+                    <td colSpan={columnCount}>
+                      <pre className="conf-json">{JSON.stringify(run.conf, null, 2)}</pre>
+                    </td>
+                  </tr>
+                ) : null}
+              </Fragment>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function StageRunsStrip({
+  stages,
+  airflowWebUrl,
+}: {
+  stages: StageRecentRuns[];
+  airflowWebUrl: string | null;
+}) {
+  // Render in the canonical stage order; unknown extras (forward compat) go
+  // last — indexOf answers -1 for them, which would sort them FIRST.
+  const stageRank = (stage: string): number => {
+    const knownIndex = STAGE_ORDER.indexOf(stage);
+    return knownIndex === -1 ? STAGE_ORDER.length : knownIndex;
+  };
+  const orderedStages = [...stages].sort(
+    (left, right) => stageRank(left.stage) - stageRank(right.stage),
+  );
+  return (
+    <section className="section">
+      <h2 className="section-title">Recent stage runs</h2>
+      <p className="stage-strip-note">
+        Latest runs per stage sub-DAG — recency only, not correlated with specific master runs
+        above.
+      </p>
+      <div className="stage-strip">
+        {orderedStages.map((stageEntry) => (
+          <div key={stageEntry.stage} className="stage-cell">
+            <div className="stage-cell-header">
+              <span className="stage-cell-name">{stageEntry.stage}</span>
+              <span className="stage-cell-dag" title={stageEntry.dag_id}>
+                {stageEntry.dag_id}
+              </span>
+            </div>
+            {stageEntry.recent.length === 0 ? (
+              <p className="empty-note">no runs</p>
+            ) : (
+              <ul className="stage-run-list">
+                {stageEntry.recent.map((stageRun) => {
+                  const runUrl = airflowRunUrl(
+                    airflowWebUrl,
+                    stageEntry.dag_id,
+                    stageRun.dag_run_id,
+                  );
+                  return (
+                    <li key={stageRun.dag_run_id} className="stage-run">
+                      <RunStateChip state={stageRun.state} />
+                      <span className="cell-mono stage-run-time">
+                        {stageRun.start_date ? formatTimestamp(stageRun.start_date) : "—"}
+                      </span>
+                      <span className="cell-num stage-run-duration">
+                        {formatDurationBetween(stageRun.start_date, stageRun.end_date)}
+                      </span>
+                      {runUrl ? (
+                        <a
+                          className="btn btn-ghost btn-tiny"
+                          href={runUrl}
+                          target="_blank"
+                          rel="noreferrer"
+                          title={`Open ${stageRun.dag_run_id} in Airflow`}
+                        >
+                          <ExternalLink />
+                        </a>
+                      ) : null}
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function TriggerIngestForm({ config }: { config: WorkspaceConfig | undefined }) {
+  const queryClient = useQueryClient();
+  const [urisText, setUrisText] = useState("");
+  const [profileChoice, setProfileChoice] = useState<string | null>(null);
+  const [modeChoice, setModeChoice] = useState<string | null>(null);
+  const [batchCountText, setBatchCountText] = useState("");
+
+  // The selects offer the LIVE vocabularies /api/v1/config serves, so
+  // hflow.steps stays the one owner of both. Empty only before config loads;
+  // until the user picks, the first option holds.
+  const profileNames = config?.run_profiles ?? [];
+  const ingestModes = config?.ingest_modes ?? [];
+  const profile = profileChoice ?? profileNames[0] ?? "full";
+  const mode = modeChoice ?? ingestModes[0] ?? "batch";
+
+  const ingestMutation = useMutation({
+    mutationFn: triggerIngest,
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["runtime-runs"] });
+    },
+  });
+
+  const uris = urisText
+    .split("\n")
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0);
+
+  const submitIngest = () => {
+    const batchCountParsed = Number.parseInt(batchCountText, 10);
+    ingestMutation.mutate({
+      uris,
+      profile,
+      mode,
+      ...(Number.isFinite(batchCountParsed) && batchCountParsed > 0
+        ? { batch_count: batchCountParsed }
+        : {}),
+    });
+  };
+
+  return (
+    <section className="section">
+      <h2 className="section-title">Trigger ingest</h2>
+      <div className="ingest-form">
+        <label className="ingest-field ingest-field-uris">
+          <span className="toolbar-field-label">URIs — one per line</span>
+          <textarea
+            className="input ingest-uris"
+            rows={3}
+            placeholder={"file:///data/incoming/run_0001.mcap\nfile:///data/incoming/run_0002.mcap"}
+            value={urisText}
+            onChange={(event) => setUrisText(event.target.value)}
+          />
+        </label>
+        <div className="ingest-controls">
+          <label className="toolbar-field">
+            <span className="toolbar-field-label">Profile</span>
+            <select
+              className="input"
+              value={profile}
+              onChange={(event) => setProfileChoice(event.target.value)}
+            >
+              {profileNames.map((profileName) => (
+                <option key={profileName} value={profileName}>
+                  {profileName}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label className="toolbar-field">
+            <span className="toolbar-field-label">Mode</span>
+            <select
+              className="input"
+              value={mode}
+              onChange={(event) => setModeChoice(event.target.value)}
+            >
+              {ingestModes.map((modeName) => (
+                <option key={modeName} value={modeName}>
+                  {modeName}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label className="toolbar-field">
+            <span className="toolbar-field-label">Batch count</span>
+            <input
+              className="input ingest-batch-count"
+              type="number"
+              min={1}
+              placeholder="auto"
+              value={batchCountText}
+              onChange={(event) => setBatchCountText(event.target.value)}
+            />
+          </label>
+          <button
+            type="button"
+            className="btn btn-primary"
+            disabled={uris.length === 0 || ingestMutation.isPending}
+            onClick={submitIngest}
+          >
+            <Play />
+            <span>{ingestMutation.isPending ? "Triggering…" : "Trigger run"}</span>
+          </button>
+        </div>
+        {ingestMutation.isError ? (
+          <p className="form-error">{describeApiError(ingestMutation.error)}</p>
+        ) : null}
+        {ingestMutation.data ? (
+          <p className="ingest-success" role="status">
+            Triggered <code className="cell-mono">{ingestMutation.data.dag_run_id}</code> —{" "}
+            <RunStateChip state={ingestMutation.data.state} />
+          </p>
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+export function RunsPage() {
+  const [isAutoRefreshOn, setIsAutoRefreshOn] = useState(false);
+  const [selectedRunIdChoice, setSelectedRunIdChoice] = useState<string | null>(null);
+
+  useEffect(() => {
+    document.title = "Runs · HFlow";
+    return () => {
+      document.title = "HFlow";
+    };
+  }, []);
+
+  const configQuery = useQuery({ queryKey: ["config"], queryFn: fetchWorkspaceConfig });
+  // Until the config arrives (or if it fails), keep write affordances hidden.
+  const readOnly = configQuery.data ? configQuery.data.read_only : true;
+
+  const statusQuery = useQuery({
+    queryKey: ["runtime-status"],
+    queryFn: fetchRuntimeStatus,
+    refetchInterval: isAutoRefreshOn ? AUTO_REFRESH_INTERVAL_MS : false,
+  });
+  const runtimeStatus = statusQuery.data;
+
+  const runsQuery = useQuery({
+    queryKey: ["runtime-runs", RUNS_PAGE_LIMIT],
+    queryFn: () => fetchRuntimeRuns(RUNS_PAGE_LIMIT),
+    enabled: runtimeStatus?.available === true,
+    refetchInterval: isAutoRefreshOn ? AUTO_REFRESH_INTERVAL_MS : false,
+  });
+
+  // Without an explicit pick, the graph follows the newest run.
+  const selectedRunId = selectedRunIdChoice ?? runsQuery.data?.runs[0]?.dag_run_id ?? null;
+
+  // The topology is the same payload the Pipeline page draws (shared cache);
+  // the run graph only adds live state over it.
+  const topologyQuery = useQuery({
+    queryKey: ["pipeline-graph"],
+    queryFn: fetchPipelineGraph,
+    enabled: runtimeStatus?.available === true,
+    retry: (failureCount, error) =>
+      !(error instanceof ApiError && (error.status === 404 || error.status === 409)) &&
+      failureCount < 1,
+  });
+
+  const runGraphQuery = useQuery({
+    queryKey: ["run-graph", selectedRunId],
+    queryFn: () => fetchRunGraph(selectedRunId ?? ""),
+    enabled: selectedRunId !== null && runtimeStatus?.available === true,
+    refetchInterval: isAutoRefreshOn ? AUTO_REFRESH_INTERVAL_MS : false,
+    retry: (failureCount, error) =>
+      !(error instanceof ApiError && (error.status === 404 || error.status === 409)) &&
+      failureCount < 1,
+  });
+
+  const refreshNow = () => {
+    void statusQuery.refetch();
+    if (runtimeStatus?.available) {
+      void runsQuery.refetch();
+      void runGraphQuery.refetch();
+    }
+  };
+
+  const isRefreshing =
+    (statusQuery.isFetching && !statusQuery.isPending) ||
+    (runsQuery.isFetching && !runsQuery.isPending) ||
+    (runGraphQuery.isFetching && !runGraphQuery.isPending);
+
+  return (
+    <div className="runs-page">
+      <div className="page-title-row">
+        <h1 className="page-title">Runs</h1>
+        {isRefreshing ? <span className="refresh-note">updating…</span> : null}
+        <div className="toolbar-spacer" />
+        <label className="toolbar-field auto-refresh-toggle">
+          <input
+            type="checkbox"
+            checked={isAutoRefreshOn}
+            onChange={(event) => setIsAutoRefreshOn(event.target.checked)}
+          />
+          <span className="toolbar-field-label">auto-refresh 10s</span>
+        </label>
+        <button type="button" className="btn" onClick={refreshNow} title="Refetch status and runs">
+          <RefreshCw />
+          <span>Refresh</span>
+        </button>
+        {runtimeStatus?.airflow_web_url ? (
+          <a
+            className="btn"
+            href={runtimeStatus.airflow_web_url}
+            target="_blank"
+            rel="noreferrer"
+            title="Open the Airflow web UI"
+          >
+            <ExternalLink />
+            <span>Open in Airflow</span>
+          </a>
+        ) : null}
+      </div>
+
+      {statusQuery.isPending ? (
+        <LoadingPanel label="Checking the runtime…" />
+      ) : statusQuery.isError ? (
+        <ErrorPanel error={statusQuery.error} onRetry={refreshNow} />
+      ) : !runtimeStatus?.available ? (
+        <EmptyPanel title="Runtime not available." hint={runtimeStatus?.detail ?? undefined}>
+          <p className="state-detail">
+            Start the local stack with <code>hflow up</code>, then refresh.
+          </p>
+        </EmptyPanel>
+      ) : (
+        <>
+          <StatusTiles status={runtimeStatus} />
+
+          {runGraphQuery.isPending && selectedRunId !== null ? (
+            <LoadingPanel label="Loading the run graph…" />
+          ) : runGraphQuery.data && topologyQuery.data ? (
+            <RunGraphSection
+              // Keyed by run: picking another run starts with a clean
+              // selection instead of pointing at the previous run's task.
+              key={runGraphQuery.data.master.dag_run_id}
+              runGraph={runGraphQuery.data}
+              graph={topologyQuery.data}
+              airflowWebUrl={runtimeStatus.airflow_web_url ?? null}
+              isAutoRefreshOn={isAutoRefreshOn}
+            />
+          ) : runGraphQuery.isError || topologyQuery.isError ? (
+            <section className="section">
+              <h2 className="section-title">Run graph</h2>
+              <p className="empty-note">
+                {describeApiError(runGraphQuery.error ?? topologyQuery.error)} — the runs table
+                below still works.
+              </p>
+            </section>
+          ) : null}
+
+          {readOnly ? null : <TriggerIngestForm config={configQuery.data} />}
+
+          <section className="section">
+            <h2 className="section-title">Master runs</h2>
+            {runsQuery.isPending ? (
+              <LoadingPanel label="Loading runs…" />
+            ) : runsQuery.isError ? (
+              <ErrorPanel
+                error={runsQuery.error}
+                onRetry={() => {
+                  void runsQuery.refetch();
+                }}
+              />
+            ) : (
+              <MasterRunsTable
+                runs={runsQuery.data.runs}
+                airflowWebUrl={runtimeStatus.airflow_web_url ?? null}
+                dagId={runtimeStatus.dag_id ?? null}
+                selectedRunId={selectedRunId}
+                onSelectRun={setSelectedRunIdChoice}
+              />
+            )}
+          </section>
+
+          {runsQuery.data?.stages && runsQuery.data.stages.length > 0 ? (
+            <StageRunsStrip
+              stages={runsQuery.data.stages}
+              airflowWebUrl={runtimeStatus.airflow_web_url ?? null}
+            />
+          ) : null}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/ui/src/railLayout.ts b/ui/src/railLayout.ts
new file mode 100644
index 00000000..5894a7f9
--- /dev/null
+++ b/ui/src/railLayout.ts
@@ -0,0 +1,131 @@
+import { useCallback, useEffect, useState } from "react";
+
+// Nav-rail width preference — the sibling of theme.ts, and deliberately built
+// the same way, because it has the same two hard requirements: it must survive
+// a reload, and it must be in force BEFORE the first paint or the rail visibly
+// jumps from 184px to 56px while the reader watches.
+//
+// Two states, not three. "Follow the system" is meaningful for a theme (the OS
+// has an opinion about light and dark); no platform has an opinion about how
+// wide this rail should be, so there is nothing for a third state to defer to.
+//
+// styles.css is authoritative for what each state LOOKS like — including the
+// fact that the collapse is suspended below 780px, where the rail is already a
+// horizontal bar and has no width to give back. This module only decides which
+// of the two states is in force and stamps it on <html>.
+
+export type RailLayout = "expanded" | "collapsed";
+
+/**
+ * The width at and below which styles.css turns the rail into a horizontal bar
+ * and suspends the collapse — a bar has no width to give back.
+ *
+ * DUPLICATED from the 780px breakpoint at the bottom of styles.css, on purpose
+ * and unavoidably: the stylesheet decides the layout, and this module only
+ * needs to know when the stylesheet has stopped honouring the preference so
+ * the markup does not contradict it (tooltips that repeat a label already on
+ * screen, a footer glyph standing in for a readout that is showing anyway).
+ * Change one, change the other.
+ */
+const RAIL_COLLAPSIBLE_QUERY = "(min-width: 781px)";
+
+/**
+ * localStorage key holding the RailLayout, as one of the two literal strings
+ * above.
+ *
+ * Read in two places that must agree: this module, and the inline pre-paint
+ * script at the top of index.html that applies the stored choice before React
+ * mounts. Change one, change the other.
+ */
+export const RAIL_STORAGE_KEY = "hflow-ui-rail";
+
+/**
+ * The attribute styles.css keys off. Absent means "expanded" — the default is
+ * spelled as the absence of the attribute so a reader who has never touched
+ * the control, and a reader whose localStorage is blocked, land in the same
+ * place with no JS having run.
+ */
+const RAIL_ATTRIBUTE = "data-rail";
+
+function isRailLayout(value: unknown): value is RailLayout {
+  return value === "expanded" || value === "collapsed";
+}
+
+/** localStorage throws in private modes and when site data is blocked. */
+function readStoredLayout(): RailLayout {
+  try {
+    const stored = window.localStorage.getItem(RAIL_STORAGE_KEY);
+    return isRailLayout(stored) ? stored : "expanded";
+  } catch {
+    return "expanded";
+  }
+}
+
+function storeLayout(layout: RailLayout): void {
+  try {
+    window.localStorage.setItem(RAIL_STORAGE_KEY, layout);
+  } catch {
+    // A reader who cannot persist still gets the width for this session.
+  }
+}
+
+function applyLayout(layout: RailLayout): void {
+  const root = document.documentElement;
+  if (layout === "expanded") root.removeAttribute(RAIL_ATTRIBUTE);
+  else root.setAttribute(RAIL_ATTRIBUTE, layout);
+}
+
+function readIsCollapsible(): boolean {
+  if (typeof window.matchMedia !== "function") return true;
+  return window.matchMedia(RAIL_COLLAPSIBLE_QUERY).matches;
+}
+
+/**
+ * Whether the rail is showing icons only RIGHT NOW, and a toggle that persists
+ * the choice.
+ *
+ * The attribute on <html> — not React state — is what the stylesheet reads, so
+ * the width is settled by the pre-paint script in index.html and this hook only
+ * has to keep the two in step afterwards. React state exists so the rail's own
+ * markup (labels, tooltips, the footer readout) can follow.
+ *
+ * `layout` is what the reader chose and what is stored; `isCollapsed` is
+ * whether that choice is in force, which it is not while the viewport is
+ * narrow enough for the bar layout. Keeping the two apart is what stops the
+ * preference from being quietly rewritten by a window resize.
+ */
+export function useRailLayout(): {
+  layout: RailLayout;
+  isCollapsed: boolean;
+  toggle: () => void;
+} {
+  const [layout, setLayout] = useState<RailLayout>(readStoredLayout);
+  const [isCollapsible, setIsCollapsible] = useState<boolean>(readIsCollapsible);
+
+  // The inline script in index.html already applied the stored layout, so the
+  // first run of this is a no-op — it exists to follow later changes.
+  useEffect(() => {
+    applyLayout(layout);
+  }, [layout]);
+
+  useEffect(() => {
+    if (typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia(RAIL_COLLAPSIBLE_QUERY);
+    const handleChange = () => setIsCollapsible(query.matches);
+    // Re-read on mount: the window may have been resized between module init
+    // and here.
+    handleChange();
+    query.addEventListener("change", handleChange);
+    return () => query.removeEventListener("change", handleChange);
+  }, []);
+
+  const toggle = useCallback(() => {
+    setLayout((current) => {
+      const next: RailLayout = current === "collapsed" ? "expanded" : "collapsed";
+      storeLayout(next);
+      return next;
+    });
+  }, []);
+
+  return { layout, isCollapsed: isCollapsible && layout === "collapsed", toggle };
+}
diff --git a/ui/src/runState.ts b/ui/src/runState.ts
new file mode 100644
index 00000000..338d131e
--- /dev/null
+++ b/ui/src/runState.ts
@@ -0,0 +1,42 @@
+// The one owner of Airflow's run/task-state vocabulary in the UI: every chip,
+// node fill and legend reads its tone from here so the graph and the tables can
+// never drift apart. Unknown states render muted rather than failing (Airflow
+// gains states across versions).
+
+/**
+ * Five tones, one per thing a run can be saying. "run" is work IN FLIGHT.
+ *
+ * It was called "accent" while the chrome accent happened to be a colour and
+ * could be borrowed; the chrome is neutral now, and a status tone that shares
+ * a name with the hover colour is a status tone somebody will restyle by
+ * accident. The tones name meanings, and styles.css decides what each one
+ * looks like (--ok / --err / --warn / --run / --ink-faint).
+ */
+export type RunStateTone = "ok" | "err" | "warn" | "run" | "muted";
+
+export function runStateTone(state: string | null | undefined): RunStateTone {
+  switch (state?.toLowerCase()) {
+    case "success":
+      return "ok";
+    case "failed":
+    case "error":
+      return "err";
+    case "running":
+      return "run";
+    // A deferred task released its worker slot and is WAITING on a trigger —
+    // it is healthy, so it reads like work in flight, never like a failure.
+    case "deferred":
+      return "run";
+    case "upstream_failed":
+    case "up_for_retry":
+    case "up_for_reschedule":
+    case "restarting":
+      return "warn";
+    default:
+      return "muted";
+  }
+}
+
+export function runStateChipClass(state: string | null | undefined): string {
+  return `chip chip-${runStateTone(state)}`;
+}
diff --git a/ui/src/runTimeline.ts b/ui/src/runTimeline.ts
new file mode 100644
index 00000000..406193d6
--- /dev/null
+++ b/ui/src/runTimeline.ts
@@ -0,0 +1,555 @@
+// The run replay: how one master run progressed, reconstructed CLIENT-SIDE
+// from the timestamps /runtime/runs/{id}/graph already serves. No new endpoint
+// and no event log — which is exactly why the honest limits below are stated
+// in the UI, not only here:
+//
+//   - the payload carries ONE row per task instance, so a retried task shows
+//     its LATEST attempt only; earlier attempts are not in this data at all;
+//   - a span is all-or-nothing: nothing here knows a task's internal progress;
+//   - a deferred task (every `trigger_*`) is one continuous span even though
+//     it spent most of it parked on a trigger rather than running;
+//   - an instance with no timestamps cannot be placed on the axis at all.
+//
+// Everything in this module is a pure function of the payload plus one "now",
+// so the same instant can be asked for the bars, the graph colours and the
+// details panel and they can never disagree.
+
+import type {
+  MappedFanOutSummary,
+  PipelineGraphResponse,
+  RunGraphResponse,
+  RunTaskInstance,
+} from "./api";
+
+/** The scope name the master DAG's rows and selections use. */
+export const MASTER_SCOPE = "master";
+
+/** One selected task: MASTER_SCOPE or a stage name, plus the task id. The
+ * graph, the timeline rows and the details panel all speak this one identity,
+ * so selecting in any of them lights up the others. */
+export interface RunNodeSelection {
+  scope: string;
+  taskId: string;
+}
+
+/** Fan-outs wider than this collapse to one summary row; the UI says so. */
+export const MAPPED_COLLAPSE_THRESHOLD = 8;
+
+/** Painted (and counted) for an instance that has not started at this instant. */
+export const NOT_STARTED_STATE = "not started";
+
+/** Minimum axis span, so a sub-second run still has a divisible width. */
+const MIN_SPAN_MS = 1000;
+
+/** Airflow states that mean the instance will not change again. */
+const TERMINAL_STATES: ReadonlySet<string> = new Set([
+  "success",
+  "failed",
+  "skipped",
+  "upstream_failed",
+  "removed",
+]);
+
+export function isTerminalRunState(state: string | null | undefined): boolean {
+  return state !== null && state !== undefined && TERMINAL_STATES.has(state.toLowerCase());
+}
+
+function parseInstantMs(value: string | null | undefined): number | null {
+  if (!value) return null;
+  const parsed = Date.parse(value);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+const UTC_OFFSET_PATTERN = /(Z|[+-]\d{2}:?\d{2})$/;
+
+/** The UTC offset an Airflow timestamp carries, in minutes, or null. */
+function parseOffsetMinutes(value: string | null | undefined): number | null {
+  if (!value) return null;
+  const match = UTC_OFFSET_PATTERN.exec(value);
+  if (!match) return null;
+  const token = match[1] as string;
+  if (token === "Z") return 0;
+  const digits = token.slice(1).replace(":", "");
+  const hours = Number.parseInt(digits.slice(0, 2), 10);
+  const minutes = Number.parseInt(digits.slice(2, 4), 10);
+  if (!Number.isFinite(hours) || !Number.isFinite(minutes)) return null;
+  return (token.startsWith("-") ? -1 : 1) * (hours * 60 + minutes);
+}
+
+/**
+ * One instant rendered in the offset the run's own timestamps carry, so an
+ * axis hover reads exactly like the run table's `started` column rather than
+ * silently switching the reader into UTC or into their browser's zone.
+ */
+export function formatInstant(instantMs: number, offsetMinutes: number): string {
+  const shifted = new Date(instantMs + offsetMinutes * 60_000);
+  if (!Number.isFinite(shifted.getTime())) return "—";
+  return shifted.toISOString().replace("T", " ").slice(0, 19);
+}
+
+/** "+00:00" / "-05:30" — the suffix that says which clock formatInstant used. */
+export function formatOffsetLabel(offsetMinutes: number): string {
+  const sign = offsetMinutes < 0 ? "-" : "+";
+  const magnitude = Math.abs(offsetMinutes);
+  const hours = String(Math.floor(magnitude / 60)).padStart(2, "0");
+  const minutes = String(magnitude % 60).padStart(2, "0");
+  return `${sign}${hours}:${minutes}`;
+}
+
+// ---- one instance on the axis ---------------------------------------------------
+
+export interface TimedInstance {
+  instance: RunTaskInstance;
+  queuedAtMs: number | null;
+  startedAtMs: number | null;
+  endedAtMs: number | null;
+  /** Started, no end recorded, and the reported state is still in flight. */
+  open: boolean;
+  /** Neither queued nor started: nothing places this instance on the axis. */
+  untimed: boolean;
+}
+
+export function timeInstance(instance: RunTaskInstance): TimedInstance {
+  const queuedAtMs = parseInstantMs(instance.queued_at);
+  const startedAtMs = parseInstantMs(instance.start_date);
+  const endedAtMs = parseInstantMs(instance.end_date);
+  return {
+    instance,
+    queuedAtMs,
+    startedAtMs,
+    endedAtMs,
+    open: startedAtMs !== null && endedAtMs === null && !isTerminalRunState(instance.state),
+    untimed: queuedAtMs === null && startedAtMs === null,
+  };
+}
+
+export type ReplaySpanKind = "queued" | "run";
+
+export interface ReplaySpan {
+  kind: ReplaySpanKind;
+  fromMs: number;
+  toMs: number;
+  /** No end recorded: the span runs to the axis edge and is drawn unclosed. */
+  open: boolean;
+}
+
+/**
+ * The bars one instance contributes: the queued wait (only when the payload
+ * carries `queued_at`) and the run itself.
+ *
+ * A terminal instance with no `end_date` gets a ZERO-LENGTH run span at its
+ * start rather than a bar stretching to the axis edge: "skipped" did not run
+ * for the rest of the window, and inventing that span would be the one lie
+ * this whole module exists to avoid.
+ */
+export function instanceSpans(timed: TimedInstance, windowEndMs: number): ReplaySpan[] {
+  const spans: ReplaySpan[] = [];
+  const { queuedAtMs, startedAtMs, endedAtMs, open } = timed;
+  if (queuedAtMs !== null) {
+    const queuedUntilMs = startedAtMs ?? windowEndMs;
+    if (queuedUntilMs > queuedAtMs) {
+      spans.push({
+        kind: "queued",
+        fromMs: queuedAtMs,
+        toMs: queuedUntilMs,
+        open: startedAtMs === null,
+      });
+    }
+  }
+  if (startedAtMs !== null) {
+    spans.push({
+      kind: "run",
+      fromMs: startedAtMs,
+      toMs: endedAtMs ?? (open ? windowEndMs : startedAtMs),
+      open: endedAtMs === null && open,
+    });
+  }
+  return spans;
+}
+
+export type ReplayPhase = "pending" | "queued" | "running" | "final";
+
+export interface ReplayedState {
+  phase: ReplayPhase;
+  /** State name to paint with; null before the instance exists on the axis. */
+  state: string | null;
+  /** Seconds elapsed inside the run span at this instant, while running. */
+  elapsedS: number | null;
+}
+
+/**
+ * What one instance was doing at `atMs`: not started before its start, running
+ * between start and end, its reported state after the end.
+ *
+ * An untimed instance (no queue, no start — a skip Airflow never scheduled)
+ * cannot be placed, so it stays "pending" for the whole replay and only takes
+ * its reported state at the axis edge, where the replay meets the live graph.
+ */
+export function replayStateAt(
+  timed: TimedInstance,
+  atMs: number,
+  windowEndMs: number,
+): ReplayedState {
+  const { instance, queuedAtMs, startedAtMs, endedAtMs, open, untimed } = timed;
+  if (untimed) {
+    return atMs >= windowEndMs
+      ? { phase: "final", state: instance.state, elapsedS: null }
+      : { phase: "pending", state: null, elapsedS: null };
+  }
+  const enteredMs = queuedAtMs ?? (startedAtMs as number);
+  if (atMs < enteredMs) return { phase: "pending", state: null, elapsedS: null };
+  if (startedAtMs === null || atMs < startedAtMs) {
+    return { phase: "queued", state: "queued", elapsedS: null };
+  }
+  // A terminal state with no end_date transitions at its start (see
+  // instanceSpans); an open one has not transitioned at all yet.
+  const finishedMs = endedAtMs ?? (open ? null : startedAtMs);
+  if (finishedMs !== null && atMs >= finishedMs) {
+    return { phase: "final", state: instance.state, elapsedS: null };
+  }
+  return {
+    // An open instance reports what it is doing (running, deferred, …); a
+    // closed one is simply "running" — its span carries no finer truth.
+    phase: "running",
+    state: open ? (instance.state ?? "running") : "running",
+    elapsedS: (atMs - startedAtMs) / 1000,
+  };
+}
+
+/**
+ * The same instances as the payload, restated at one instant: the state each
+ * was in, and the duration elapsed SO FAR rather than the final one. Feeding
+ * these to the existing graph code is what recolours the DAG.
+ */
+export function replayTaskInstances(
+  instances: readonly RunTaskInstance[],
+  atMs: number,
+  windowEndMs: number,
+): RunTaskInstance[] {
+  return instances.map((instance) => {
+    const replayed = replayStateAt(timeInstance(instance), atMs, windowEndMs);
+    return {
+      ...instance,
+      state: replayed.state,
+      duration_s:
+        replayed.phase === "running"
+          ? replayed.elapsedS
+          : replayed.phase === "final"
+            ? instance.duration_s
+            : null,
+    };
+  });
+}
+
+/** The fan-out split at one instant; the total stays the run's real total. */
+export function replayedFanOutSummary(
+  summary: MappedFanOutSummary | null,
+  replayedInstances: readonly RunTaskInstance[],
+): MappedFanOutSummary | null {
+  if (summary === null) return null;
+  const byState: Record<string, number> = {};
+  for (const instance of replayedInstances) {
+    if (instance.task_id !== summary.task_id || instance.map_index < 0) continue;
+    const key = instance.state ?? NOT_STARTED_STATE;
+    byState[key] = (byState[key] ?? 0) + 1;
+  }
+  return { task_id: summary.task_id, total: summary.total, by_state: byState };
+}
+
+/**
+ * A DAG run's own state at one instant. Only three answers are derivable
+ * without inventing a verdict: nothing started yet, everything reached its
+ * end (so the reported state stands), or the run is still in flight.
+ */
+export function replayedRunState(
+  instances: readonly RunTaskInstance[],
+  reportedState: string | null,
+  atMs: number,
+  windowEndMs: number,
+): string | null {
+  if (instances.length === 0) return reportedState;
+  let allPending = true;
+  let allFinal = true;
+  for (const instance of instances) {
+    const { phase } = replayStateAt(timeInstance(instance), atMs, windowEndMs);
+    if (phase !== "pending") allPending = false;
+    if (phase !== "final") allFinal = false;
+  }
+  if (allFinal) return reportedState;
+  if (allPending) return NOT_STARTED_STATE;
+  return "running";
+}
+
+// ---- rows ------------------------------------------------------------------------
+
+export interface ReplayBatchRow {
+  key: string;
+  mapIndex: number;
+  timed: TimedInstance;
+}
+
+export interface ReplayRow {
+  key: string;
+  /** MASTER_SCOPE, or the stage name — the same scope the selection speaks. */
+  scope: string;
+  taskId: string;
+  kind: "task" | "fanout";
+  /** The topology's description of the task, for the row's hover text. */
+  summary: string;
+  mapped: boolean;
+  deferred: boolean;
+  /** Every instance behind this row (one task instance, or every batch). */
+  timed: TimedInstance[];
+  /** Fan-out rows only: one entry per map_index, in map order. */
+  batches: ReplayBatchRow[];
+  /** Above 1 when the payload is showing a retried task's latest attempt. */
+  retriedTryNumber: number | null;
+}
+
+export interface ReplayGroup {
+  scope: string;
+  title: string;
+  dagId: string | null;
+  dagRunId: string | null;
+  /** The run state the server reported for this DAG run. */
+  state: string | null;
+  /** Every instance in the group, for the group's replayed state. */
+  instances: RunTaskInstance[];
+  rows: ReplayRow[];
+  /** Why this group has no rows, when it has none. */
+  note: string | null;
+}
+
+export interface RunReplay {
+  groups: ReplayGroup[];
+  /** Earliest queue/start across the whole run — the axis origin. */
+  startMs: number;
+  /** Latest end, or now while anything is still open. */
+  endMs: number;
+  spanMs: number;
+  /** False when no instance carries a timestamp: there is nothing to replay. */
+  hasTimedInstances: boolean;
+  /** Something is still open, or the master run itself has not finished. */
+  unfinished: boolean;
+  untimedInstanceCount: number;
+  retriedTaskCount: number;
+  deferredTaskCount: number;
+  /** UTC offset the run's timestamps carry, for absolute-time readouts. */
+  offsetMinutes: number;
+}
+
+function retriedTryNumberOf(instances: readonly RunTaskInstance[]): number | null {
+  let highest = 1;
+  for (const instance of instances) {
+    if (instance.try_number !== null && instance.try_number > highest)
+      highest = instance.try_number;
+  }
+  return highest > 1 ? highest : null;
+}
+
+function buildGroup(
+  scope: string,
+  title: string,
+  dagId: string | null,
+  dagRunId: string | null,
+  state: string | null,
+  topologyTasks: readonly {
+    task_id: string;
+    summary: string;
+    mapped: boolean;
+    deferred: boolean;
+  }[],
+  instances: readonly RunTaskInstance[],
+  note: string | null,
+): ReplayGroup {
+  const instancesByTaskId = new Map<string, RunTaskInstance[]>();
+  for (const instance of instances) {
+    // The server types task_id as nullable because Airflow may omit it; an
+    // instance with no id cannot be attributed to a node, so it is left out
+    // of the grouping rather than bucketed under a fabricated key.
+    const taskId = instance.task_id;
+    if (taskId === null) continue;
+    const bucket = instancesByTaskId.get(taskId);
+    if (bucket) bucket.push(instance);
+    else instancesByTaskId.set(taskId, [instance]);
+  }
+
+  // Topology order first (the payload is already sorted that way, but the
+  // topology is the one owner of the order AND of the mapped/deferred flags),
+  // then any task id the topology does not describe rather than dropping it.
+  const orderedTaskIds = topologyTasks.map((task) => task.task_id);
+  for (const taskId of instancesByTaskId.keys()) {
+    if (!orderedTaskIds.includes(taskId)) orderedTaskIds.push(taskId);
+  }
+
+  const rows: ReplayRow[] = [];
+  for (const taskId of orderedTaskIds) {
+    const taskInstances = instancesByTaskId.get(taskId) ?? [];
+    if (taskInstances.length === 0) continue;
+    const node = topologyTasks.find((task) => task.task_id === taskId);
+    const mappedInstances = taskInstances
+      .filter((instance) => instance.map_index >= 0)
+      .sort((left, right) => left.map_index - right.map_index);
+    const isFanOut = mappedInstances.length > 0;
+    const rowInstances = isFanOut ? mappedInstances : taskInstances;
+    rows.push({
+      key: `${scope}:${taskId}`,
+      scope,
+      taskId,
+      kind: isFanOut ? "fanout" : "task",
+      summary: node?.summary ?? "This task is not part of the topology this server describes.",
+      mapped: node?.mapped ?? isFanOut,
+      deferred: node?.deferred ?? false,
+      timed: rowInstances.map(timeInstance),
+      batches: isFanOut
+        ? mappedInstances.map((instance) => ({
+            key: `${scope}:${taskId}:${instance.map_index}`,
+            mapIndex: instance.map_index,
+            timed: timeInstance(instance),
+          }))
+        : [],
+      retriedTryNumber: retriedTryNumberOf(rowInstances),
+    });
+  }
+
+  return {
+    scope,
+    title,
+    dagId,
+    dagRunId,
+    state,
+    instances: [...instances],
+    rows,
+    note: rows.length === 0 ? note : null,
+  };
+}
+
+/**
+ * Every row of the replay plus the shared axis. `nowMs` only matters while the
+ * run is unfinished: it is the right-hand edge an open span runs to.
+ */
+export function buildRunReplay(
+  runGraph: RunGraphResponse,
+  graph: PipelineGraphResponse,
+  nowMs: number,
+): RunReplay {
+  const groups: ReplayGroup[] = [
+    buildGroup(
+      MASTER_SCOPE,
+      MASTER_SCOPE,
+      graph.master.dag_id,
+      runGraph.master.dag_run_id,
+      runGraph.master.state,
+      graph.master.tasks,
+      runGraph.master.tasks,
+      "No task of the master DAG has an instance yet.",
+    ),
+  ];
+  for (const stage of runGraph.stages) {
+    const topology = graph.stages.find((entry) => entry.stage === stage.stage)?.dag;
+    groups.push(
+      buildGroup(
+        stage.stage,
+        stage.stage,
+        stage.dag_id,
+        stage.dag_run_id,
+        stage.state,
+        topology?.tasks ?? [],
+        stage.tasks,
+        stage.dag_run_id === null
+          ? "This stage did not run for this master run."
+          : "This stage's run has no task instances.",
+      ),
+    );
+  }
+
+  let earliestMs = Number.POSITIVE_INFINITY;
+  let latestMs = Number.NEGATIVE_INFINITY;
+  let unfinished = !isTerminalRunState(runGraph.master.state);
+  let untimedInstanceCount = 0;
+  let retriedTaskCount = 0;
+  let deferredTaskCount = 0;
+  for (const group of groups) {
+    for (const row of group.rows) {
+      if (row.retriedTryNumber !== null) retriedTaskCount += 1;
+      if (row.deferred) deferredTaskCount += 1;
+      for (const timed of row.timed) {
+        if (timed.untimed) untimedInstanceCount += 1;
+        if (timed.open) unfinished = true;
+        for (const candidate of [timed.queuedAtMs, timed.startedAtMs]) {
+          if (candidate !== null && candidate < earliestMs) earliestMs = candidate;
+        }
+        for (const candidate of [timed.startedAtMs, timed.endedAtMs]) {
+          if (candidate !== null && candidate > latestMs) latestMs = candidate;
+        }
+      }
+    }
+  }
+
+  const hasTimedInstances = Number.isFinite(earliestMs);
+  const startMs = hasTimedInstances ? earliestMs : nowMs;
+  const observedEndMs = hasTimedInstances ? Math.max(latestMs, startMs) : nowMs;
+  const endMs = Math.max(
+    unfinished ? Math.max(observedEndMs, nowMs) : observedEndMs,
+    startMs + MIN_SPAN_MS,
+  );
+
+  return {
+    groups,
+    startMs,
+    endMs,
+    spanMs: endMs - startMs,
+    hasTimedInstances,
+    unfinished,
+    untimedInstanceCount,
+    retriedTaskCount,
+    deferredTaskCount,
+    offsetMinutes: runTimestampOffsetMinutes(runGraph),
+  };
+}
+
+function runTimestampOffsetMinutes(runGraph: RunGraphResponse): number {
+  const everyInstance = [runGraph.master.tasks, ...runGraph.stages.map((stage) => stage.tasks)];
+  for (const instances of everyInstance) {
+    for (const instance of instances) {
+      for (const value of [instance.start_date, instance.queued_at, instance.end_date]) {
+        const offsetMinutes = parseOffsetMinutes(value);
+        if (offsetMinutes !== null) return offsetMinutes;
+      }
+    }
+  }
+  return 0;
+}
+
+/** True while the run can still change — the only reason to keep a clock. */
+export function isRunUnfinished(runGraph: RunGraphResponse): boolean {
+  if (!isTerminalRunState(runGraph.master.state)) return true;
+  const everyInstance = [runGraph.master.tasks, ...runGraph.stages.map((stage) => stage.tasks)];
+  return everyInstance.some((instances) =>
+    instances.some((instance) => timeInstance(instance).open),
+  );
+}
+
+// ---- axis ------------------------------------------------------------------------
+
+/** Tick steps in seconds: seconds, then the minute/hour steps a clock uses. */
+const TICK_STEPS_SECONDS: readonly number[] = [
+  0.1, 0.25, 0.5, 1, 2, 5, 10, 15, 30, 60, 120, 300, 600, 900, 1800, 3600, 7200, 21600, 43200,
+  86400,
+];
+const MAX_TICKS = 40;
+
+/** Offsets (seconds from the run's start) for the axis ticks. */
+export function axisTickOffsetsSeconds(spanSeconds: number, targetCount = 6): number[] {
+  const roughStep = spanSeconds / Math.max(1, targetCount);
+  const step =
+    TICK_STEPS_SECONDS.find((candidate) => candidate >= roughStep) ??
+    Math.max(roughStep, TICK_STEPS_SECONDS[TICK_STEPS_SECONDS.length - 1] ?? 86400);
+  const offsets: number[] = [];
+  for (let index = 0; index < MAX_TICKS; index++) {
+    const offset = index * step;
+    if (offset > spanSeconds + 1e-6) break;
+    offsets.push(Number(offset.toFixed(3)));
+  }
+  return offsets;
+}
diff --git a/ui/src/styles.css b/ui/src/styles.css
new file mode 100644
index 00000000..9a37f4e0
--- /dev/null
+++ b/ui/src/styles.css
@@ -0,0 +1,4585 @@
+/* HFlow workspace UI — hand-rolled stylesheet.
+   Minimal, dense, calm. System fonts only; zero external assets.
+   Data speaks monospace; chrome speaks tiny uppercase sans. */
+
+/* ---- theme ---------------------------------------------------------------
+   Three states, resolved entirely here; src/theme.ts only stamps data-theme
+   on <html> ("system" leaves it off).
+
+     :root                                       every token, light values
+     :root[data-theme="light"]                   explicit light, wins over the OS
+     @media (prefers-color-scheme: dark)
+       :root:not([data-theme="light"])           OS dark, unless light was chosen
+     :root[data-theme="dark"]                    explicit dark, wins over the OS
+
+   The two dark blocks are the same palette twice, deliberately: one answers
+   the OS, one answers the reader, and neither can be expressed as the other.
+   Keep them in sync. Every token has a value in the base :root block, so no
+   colour depends on a media query having matched.
+
+   ONE RULE decides which tokens may carry a hue:
+
+     CHROME IS NEUTRAL.  Backgrounds, ink, borders, the accent, the focus ring
+     — greys, near-black, near-white. Nothing in the frame competes with the
+     data inside it, and the app stops looking like it has a favourite colour.
+
+     COLOUR MEANS SOMETHING.  --ok / --warn / --err carry run and check status,
+     and --viz-* identifies interval kinds. These are the only hues in the file
+     and each one is answering a question about the data.
+
+   The accent used to be an instrument teal (#0c6d77 light, #56c1cb dark). It
+   is now the far end of the neutral ramp — near-black on light, near-white on
+   dark — so it INVERTS between themes where every hue token merely re-tunes.
+   That inversion is why --accent-contrast exists: "the ink that sits on top of
+   a solid --accent fill" cannot be written as a literal at the call site. */
+
+:root,
+:root[data-theme="light"] {
+  color-scheme: light;
+
+  --bg: #f4f4f5;
+  --surface: #ffffff;
+  --surface-sunken: #efeff0;
+  --ink: #1b1c1e;
+  --ink-muted: #4d5054;
+  --ink-faint: #696c70;
+  --border: #e2e2e4;
+  --border-strong: #c6c8ca;
+
+  /* A boundary a reader has to be able to FIND — the outline of a field, a
+     button, a graph node, the connector that says two nodes are related.
+     Separator greys (--border, --border-strong) are decoration and can stay
+     faint; these carry information, so they are held at 3:1 against every
+     surface they are drawn on (WCAG 1.4.11). */
+  --boundary: #87898b;
+
+  --accent: #26282b;
+  --accent-ink: #101214;
+  --accent-soft: rgba(28, 30, 33, 0.07);
+  --accent-contrast: #ffffff;
+
+  --ok: #15702f;
+  --ok-soft: rgba(21, 112, 47, 0.13);
+  --warn: #7f5300;
+  --warn-soft: rgba(168, 110, 0, 0.16);
+  --err: #b52b25;
+  --err-soft: rgba(181, 43, 37, 0.12);
+
+  --focus-ring: #1b1c1e;
+
+  /* Categorical slots for interval kinds, in fixed order — never cycled, never
+     reused for status. Validated (OKLCH lightness band, chroma floor, CVD and
+     normal-vision separation, contrast vs this mode's surface); a fourth kind
+     folds into --viz-other rather than getting a generated hue, and the legend
+     always names every kind so identity never rests on colour alone.
+     --viz-ink is the label colour that stays legible on all four fills.
+
+     Three of the four stay hued under the neutral-chrome rule because they are
+     the answer to "which kind is this band?" — a categorical encoding needs
+     separable hues, and three greys would not be separable. They appear nowhere
+     in the chrome. --viz-other is the exception and is now a true grey: it is
+     the "everything else" slot, and reading as the absence of an identity is
+     exactly its job. */
+  --viz-1: #036bb9;
+  --viz-2: #a73189;
+  --viz-3: #856302;
+  --viz-other: #63666a;
+  --viz-ink: #ffffff;
+
+  --font-ui: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono:
+    ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
+}
+
+/* OS dark — skipped when the reader has explicitly asked for light. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+
+    --bg: #121213;
+    --surface: #1a1a1c;
+    --surface-sunken: #161617;
+    --ink: #e7e7e8;
+    --ink-muted: #a5a8ac;
+    --ink-faint: #83868a;
+    --border: #2b2c2e;
+    --border-strong: #3d3f42;
+
+    --boundary: #68696c;
+
+    --accent: #e7e7e8;
+    --accent-ink: #f5f5f6;
+    --accent-soft: rgba(231, 231, 232, 0.1);
+    --accent-contrast: #17181a;
+
+    --ok: #46b458;
+    --ok-soft: rgba(70, 180, 88, 0.16);
+    --warn: #d9a53a;
+    --warn-soft: rgba(217, 165, 58, 0.16);
+    --err: #e5726b;
+    --err-soft: rgba(229, 114, 107, 0.15);
+
+    --focus-ring: #e7e7e8;
+
+    /* Dark is selected, not flipped: its own steps, re-validated against the
+       dark surface, with a dark label ink because the fills are lighter here. */
+    --viz-1: #1795fa;
+    --viz-2: #d75eb4;
+    --viz-3: #b88a06;
+    --viz-other: #8f9194;
+    --viz-ink: #141416;
+  }
+}
+
+/* Explicit dark — wins on a light OS. Same palette as the block above. */
+:root[data-theme="dark"] {
+  color-scheme: dark;
+
+  --bg: #121213;
+  --surface: #1a1a1c;
+  --surface-sunken: #161617;
+  --ink: #e7e7e8;
+  --ink-muted: #a5a8ac;
+  --ink-faint: #83868a;
+  --border: #2b2c2e;
+  --border-strong: #3d3f42;
+
+  --boundary: #68696c;
+
+  --accent: #e7e7e8;
+  --accent-ink: #f5f5f6;
+  --accent-soft: rgba(231, 231, 232, 0.1);
+  --accent-contrast: #17181a;
+
+  --ok: #46b458;
+  --ok-soft: rgba(70, 180, 88, 0.16);
+  --warn: #d9a53a;
+  --warn-soft: rgba(217, 165, 58, 0.16);
+  --err: #e5726b;
+  --err-soft: rgba(229, 114, 107, 0.15);
+
+  --focus-ring: #e7e7e8;
+
+  --viz-1: #1795fa;
+  --viz-2: #d75eb4;
+  --viz-3: #b88a06;
+  --viz-other: #8f9194;
+  --viz-ink: #141416;
+}
+
+/* The RUN-IN-FLIGHT tone (src/runState.ts: running, deferred), aliased once and
+   theme-agnostically because var() in a custom property resolves at USE time —
+   so these follow whichever accent block above is in force.
+
+   "In flight" is a status like success and failure, and it used to borrow the
+   chrome accent because the chrome accent happened to be a colour. Now that the
+   chrome is neutral the two have to be named apart, or the next person to
+   restyle a hover state silently restyles what "running" looks like. The tone
+   resolves to the strongest neutral on purpose: against green, amber, red and
+   the faint grey of an unknown state, near-black-on-light (near-white-on-dark)
+   is the most separable remaining slot, and it stays separable under every form
+   of colour blindness because it differs in LIGHTNESS, not in hue. */
+:root {
+  --run: var(--accent);
+  --run-ink: var(--accent-ink);
+  --run-soft: var(--accent-soft);
+  --run-contrast: var(--accent-contrast);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-ui);
+  font-size: 13px;
+  line-height: 1.5;
+  background: var(--bg);
+  color: var(--ink);
+  -webkit-font-smoothing: antialiased;
+}
+
+:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+
+/* ---- icon scale ---------------------------------------------------------- */
+
+/* Glyphs come from lucide-react, which stamps every icon with `.lucide` and
+   renders on a 24px grid at stroke-width 2. Sizing lives HERE, in one place,
+   rather than as a `size` prop repeated at ~40 call sites — that is what
+   produced the old 11/12/13/14/15/18px drift.
+
+   The scale is two deliberate steps, and only two:
+     14px  inline glyphs — buttons, chips, menus, table headers, disclosures.
+           Set against the 13px body text so a glyph reads as a sibling of the
+           word beside it. Effective stroke 2 x 14/24 = 1.17px, which lands on
+           the old hand-drawn 1.4-at-16-viewBox weight.
+     16px  navigation — the rail's four destinations. One step up is enough to
+           make the rail read as chrome, not content.
+   Anything wanting a third size wants a different component instead. The one
+   glyph outside this scale is the brand mark, which is not square; see it
+   below. */
+.lucide {
+  width: 14px;
+  height: 14px;
+  flex: none;
+}
+
+.nav-item > .lucide {
+  width: 16px;
+  height: 16px;
+}
+
+/* ---- app shell ---------------------------------------------------------- */
+
+/* The rail has TWO widths and THREE things that can ask for one:
+     --rail-width          the expanded default
+     [data-rail=collapsed] the reader's stored choice (src/railLayout.ts, applied
+                           pre-paint by the inline script in index.html)
+     the 780px breakpoint  which turns the rail into a horizontal bar
+   The breakpoint wins, and says so explicitly at the bottom of this file: a
+   bar has no width to give back, so the manual collapse is SUSPENDED there
+   rather than fighting it, and the stored choice comes back untouched when the
+   window widens. Everything above that width is the reader's call. */
+.app-shell {
+  --rail-width: 184px;
+  display: grid;
+  grid-template-columns: var(--rail-width) minmax(0, 1fr);
+  height: 100%;
+  transition: grid-template-columns 140ms ease;
+}
+
+:root[data-rail="collapsed"] .app-shell {
+  /* 56px = 36px of content (a 26px control centred with room to breathe)
+     between the rail's two 10px gutters. */
+  --rail-width: 56px;
+}
+
+.nav-rail {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 14px 10px 12px;
+  border-right: 1px solid var(--border);
+  background: var(--surface);
+  min-width: 0;
+  overflow: hidden;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 8px 14px;
+  font-size: 14px;
+  font-weight: 650;
+  letter-spacing: 0.01em;
+}
+
+/* The real Hebbian Robotics mark (src/components/BrandMark.tsx, artwork from
+   docs/assets/hebbian-logo-on-black.svg) is upright — 106 x 138 in its own
+   units, so 0.77 : 1. Squeezing it into the square `.lucide` box would letterbox
+   it to about 12px of ink in a 16px slot, so it is sized by HEIGHT and the width
+   follows. `aspect-ratio` states the viewBox ratio outright rather than leaving
+   the width to intrinsic SVG sizing. 18px tall sits level with the 16px nav
+   glyphs beside it: a narrow mark carries less weight per pixel of height. */
+.brand-mark {
+  height: 18px;
+  width: auto;
+  aspect-ratio: 106.03 / 137.62;
+  color: var(--accent);
+  flex: none;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  color: var(--ink-muted);
+  font-weight: 500;
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    color 120ms ease,
+    background-color 120ms ease;
+}
+
+.nav-item:hover {
+  color: var(--ink);
+}
+
+/* The accent is a neutral now, so "active" cannot rest on a hue the way a teal
+   pill did. Three cues carry it instead, and they survive both themes and
+   greyscale: the fill, the step from muted ink to the strongest ink, and the
+   weight. */
+.nav-item.is-active {
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+  font-weight: 650;
+}
+
+.rail-foot {
+  margin-top: auto;
+  padding: 10px 8px 0;
+  border-top: 1px solid var(--border);
+  min-width: 0;
+}
+
+/* The rail's two chrome controls — collapse and theme — side by side while
+   there is width for them, stacked once there is not. */
+.rail-controls {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.rail-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+}
+
+/* ---- collapsed rail ------------------------------------------------------
+   Everything the 56px rail does differently. The labels are CLIPPED, never
+   `display: none`: a clipped label is still the link's accessible name, so a
+   collapsed destination can never end up as an unnamed icon no matter what
+   React and the stylesheet each believe about the current state. */
+
+:root[data-rail="collapsed"] .brand,
+:root[data-rail="collapsed"] .nav-item,
+:root[data-rail="collapsed"] .rail-controls {
+  justify-content: center;
+}
+
+:root[data-rail="collapsed"] .brand {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+:root[data-rail="collapsed"] .nav-item {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+:root[data-rail="collapsed"] .brand-word,
+:root[data-rail="collapsed"] .nav-item-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+:root[data-rail="collapsed"] .rail-controls {
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+:root[data-rail="collapsed"] .rail-foot {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/* The workspace readout has no collapsed form as prose (a filesystem path in
+   36px is an ellipsis); AppShell swaps it for .rail-glyph, which does. */
+:root[data-rail="collapsed"] .rail-glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 22px;
+  color: var(--ink-faint);
+}
+
+:root[data-rail="collapsed"] .rail-glyph-error {
+  color: var(--err);
+}
+
+/* ---- rail controls ------------------------------------------------------- */
+
+/* The collapse control and the theme toggle are the same kind of thing — a
+   quiet, borderless icon button that only lights up under the pointer or the
+   focus ring — so they share one look and differ only in what they do. */
+.rail-toggle,
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: none;
+  color: var(--ink-faint);
+  cursor: pointer;
+  transition:
+    color 120ms ease,
+    background-color 120ms ease,
+    border-color 120ms ease;
+}
+
+.rail-toggle:hover,
+.rail-toggle:focus-visible,
+.theme-toggle:hover,
+.theme-toggle:focus-visible {
+  border-color: var(--border);
+  background: var(--surface-sunken);
+  color: var(--ink);
+}
+
+/* ---- rail tooltip --------------------------------------------------------
+   Radix Tooltip, not a `title` attribute: `title` never appears on keyboard
+   focus, waits out a delay the app cannot tune, and cannot be made to look
+   like the rest of the chrome. Live only while the rail is collapsed — an
+   expanded rail already has the word on screen and a tooltip repeating it is
+   noise. */
+/* --boundary rather than the separator grey the larger overlays use: those are
+   panels carrying a 28px drop shadow, and this is a 20px-tall chip whose fill
+   sits about 1.05:1 from the page behind it. The outline is the only thing
+   saying where it ends. */
+.rail-tooltip {
+  z-index: 40;
+  padding: 3px 8px;
+  border: 1px solid var(--boundary);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--ink);
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: nowrap;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+}
+
+.rail-tooltip-arrow {
+  fill: var(--surface);
+  stroke: var(--boundary);
+  stroke-width: 1px;
+}
+
+/* ---- theme control ------------------------------------------------------- */
+
+/* One quiet icon button that cycles system -> light -> dark. Chrome for chrome:
+   faint and borderless at rest so it never competes with the four destinations
+   above it, and picking up a hairline and a fill only under the pointer or the
+   focus ring. A theme is set once and forgotten; it does not deserve a lit
+   three-way switch parked in the rail for the rest of the session.
+
+   The button's own look lives with .rail-toggle above — they are one control
+   type wearing two glyphs, and the rail is the only place either appears. */
+.theme-control {
+  display: flex;
+}
+
+/* Kept in the accessibility tree, kept out of the picture. Clipped rather than
+   display:none, which would drop it from the tree and silence the live region
+   inside it. */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.rail-note {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--ink-faint);
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rail-note-error {
+  color: var(--err);
+}
+
+.app-main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* ---- shared controls ----------------------------------------------------- */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border: 1px solid var(--boundary);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--ink);
+  font: inherit;
+  font-size: 12px;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    border-color 120ms ease,
+    color 120ms ease;
+}
+
+.btn:hover:not(:disabled):not([data-disabled]) {
+  border-color: var(--accent);
+  color: var(--accent-ink);
+}
+
+/* Radix menu items are divs, so they carry data-disabled / data-highlighted
+   where a <button> would carry :disabled / :hover. */
+.btn:disabled,
+.btn[data-disabled] {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.btn[data-highlighted]:not([data-disabled]) {
+  border-color: var(--accent);
+  color: var(--accent-ink);
+  outline: none;
+}
+
+.btn-ghost {
+  border-color: transparent;
+  background: transparent;
+  color: var(--ink-muted);
+}
+
+.btn-tiny {
+  padding: 1px 6px;
+  font-size: 11px;
+}
+
+.input {
+  padding: 4px 8px;
+  border: 1px solid var(--boundary);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--ink);
+  font: inherit;
+  font-size: 12.5px;
+}
+
+.input:focus-visible {
+  border-color: var(--focus-ring);
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 7px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.7;
+  white-space: nowrap;
+}
+
+.chip-ok {
+  color: var(--ok);
+  background: var(--ok-soft);
+}
+
+.chip-warn {
+  color: var(--warn);
+  background: var(--warn-soft);
+}
+
+.chip-err {
+  color: var(--err);
+  background: var(--err-soft);
+}
+
+.chip-muted {
+  color: var(--ink-muted);
+  background: var(--surface-sunken);
+}
+
+/* In flight. The one chip that is SOLID rather than tinted: the status hues
+   read as "this finished, here is how", and a run that is still going needs to
+   be louder than any of them without borrowing one of their meanings. Inverted
+   ink-on-accent is the loudest thing the neutral ramp can say. */
+.chip-run {
+  color: var(--run-contrast);
+  background: var(--run);
+}
+
+/* Notable, but not a run state — an endpoint alias, a replay offset. */
+.chip-accent {
+  color: var(--accent-ink);
+  background: var(--accent-soft);
+}
+
+/* ---- query states -------------------------------------------------------- */
+
+.state-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.facet-sidebar .state-panel {
+  padding: 20px 8px;
+}
+
+.state-title {
+  margin: 0;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.state-detail {
+  margin: 0;
+  max-width: 44em;
+  color: var(--ink-muted);
+}
+
+.state-panel-error .state-title {
+  color: var(--err);
+}
+
+.spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border-strong);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spinner-turn 700ms linear infinite;
+}
+
+@keyframes spinner-turn {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ---- episodes page ------------------------------------------------------- */
+
+.episodes-page {
+  flex: 1;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto auto;
+  min-height: 0;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+  flex-wrap: wrap;
+}
+
+.toolbar-spacer {
+  flex: 1;
+}
+
+.search-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-icon {
+  position: absolute;
+  left: 8px;
+  color: var(--ink-faint);
+  pointer-events: none;
+}
+
+.search-input {
+  padding-left: 26px;
+  width: 240px;
+}
+
+.toolbar-field {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.toolbar-field-label {
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+.refresh-note {
+  font-size: 11.5px;
+  color: var(--accent-ink);
+}
+
+.row-count {
+  font-size: 12px;
+  color: var(--ink-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.episodes-body {
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+  min-height: 0;
+}
+
+/* ---- facet sidebar ------------------------------------------------------- */
+
+.facet-sidebar {
+  overflow-y: auto;
+  padding: 12px;
+  border-right: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.facet-group {
+  margin-bottom: 18px;
+}
+
+.facet-label {
+  margin: 0 0 6px;
+  font-size: 10.5px;
+  font-weight: 650;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+.facet-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.facet-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 4px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.facet-row:hover {
+  background: var(--accent-soft);
+}
+
+.facet-row-static {
+  cursor: default;
+}
+
+.facet-row-static:hover {
+  background: none;
+}
+
+.facet-row input[type="checkbox"] {
+  margin: 0;
+  accent-color: var(--accent);
+}
+
+.facet-value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12.5px;
+}
+
+.facet-count {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+.facet-empty {
+  margin: 0;
+  font-size: 12px;
+  color: var(--ink-faint);
+}
+
+.facet-more {
+  margin-top: 3px;
+  padding: 1px 4px;
+  border: none;
+  background: none;
+  color: var(--accent-ink);
+  font: inherit;
+  font-size: 11.5px;
+  cursor: pointer;
+}
+
+.facet-more:hover {
+  text-decoration: underline;
+}
+
+/* ---- data table ---------------------------------------------------------- */
+
+.table-pane {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+
+.table-scroll {
+  overflow: auto;
+  min-height: 0;
+  flex: 1;
+}
+
+.table-scroll.is-refreshing {
+  opacity: 0.6;
+}
+
+.data-table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 12.5px;
+}
+
+.data-table th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 0;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border-strong);
+  text-align: left;
+  white-space: nowrap;
+}
+
+.th-sort {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  padding: 6px 10px;
+  border: none;
+  background: none;
+  color: var(--ink-muted);
+  font: inherit;
+  font-size: 10.5px;
+  font-weight: 650;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.th-sort:hover {
+  color: var(--ink);
+}
+
+.sort-arrow {
+  flex: none;
+  color: var(--accent);
+}
+
+.sort-arrow.is-asc {
+  transform: rotate(180deg);
+}
+
+.data-table td {
+  padding: 4px 10px;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+  max-width: 320px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.episode-row {
+  cursor: pointer;
+}
+
+.episode-row:hover {
+  background: var(--accent-soft);
+}
+
+.episode-row:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -2px;
+}
+
+/* The id cell is a real link (middle-click, copy address); it inherits the
+   mono cell look and only reveals link affordances on hover/focus. */
+.episode-id-link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.episode-id-link:hover,
+.episode-id-link:focus-visible {
+  color: var(--accent-ink);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.cell-null {
+  color: var(--ink-faint);
+}
+
+.cell-mono {
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+}
+
+.cell-num {
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+.cell-dim {
+  color: var(--ink-muted);
+}
+
+/* ---- pagination ---------------------------------------------------------- */
+
+.pagination-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 14px;
+  border-top: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.page-range {
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  color: var(--ink-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---- SQL readout (signature) --------------------------------------------- */
+
+.sql-footer {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 5px 10px;
+  border-top: 1px solid var(--border-strong);
+  background: var(--surface-sunken);
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+}
+
+.sql-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: var(--accent-ink);
+  font: inherit;
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  cursor: pointer;
+  line-height: 20px;
+}
+
+.sql-toggle:hover {
+  background: var(--accent-soft);
+}
+
+.chevron {
+  transition: transform 120ms ease;
+}
+
+.chevron.is-open {
+  transform: rotate(180deg);
+}
+
+.sql-preview {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-muted);
+  line-height: 24px;
+}
+
+.sql-empty {
+  color: var(--ink-faint);
+}
+
+.sql-full {
+  flex: 1;
+  min-width: 0;
+  margin: 2px 0;
+  max-height: 200px;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--ink);
+}
+
+.sql-copy {
+  flex: none;
+  font-size: 11px;
+}
+
+/* ---- episode detail ------------------------------------------------------ */
+
+.episode-page {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 22px 48px;
+}
+
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--ink-muted);
+  font-size: 12px;
+  text-decoration: none;
+}
+
+.back-link:hover {
+  color: var(--accent-ink);
+}
+
+.episode-header {
+  margin-top: 10px;
+}
+
+.episode-title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.episode-title {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 16px;
+  font-weight: 600;
+  word-break: break-all;
+}
+
+.meta-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+  gap: 10px 18px;
+  margin: 14px 0 0;
+}
+
+.meta-item {
+  min-width: 0;
+}
+
+.meta-label {
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+.meta-value {
+  margin: 1px 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.section {
+  margin-top: 26px;
+}
+
+.section-title {
+  margin: 0 0 8px;
+  padding-bottom: 5px;
+  border-bottom: 1px solid var(--border);
+  font-size: 11px;
+  font-weight: 650;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+
+.empty-note {
+  margin: 0;
+  font-size: 12.5px;
+  color: var(--ink-faint);
+}
+
+/* media */
+
+.media-row {
+  display: flex;
+  gap: 10px;
+  overflow-x: auto;
+  padding-bottom: 4px;
+}
+
+.media-item {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  flex: none;
+  max-width: 520px;
+  color: inherit;
+  text-decoration: none;
+}
+
+/* Contact sheets are evidence, not decoration: big enough to read at a glance,
+   still one click from the full-size image. */
+.media-item img {
+  display: block;
+  height: 220px;
+  max-width: 100%;
+  object-fit: contain;
+  border: 1px solid var(--border-strong);
+  border-radius: 4px;
+  background: var(--surface);
+}
+
+.media-item:hover img {
+  border-color: var(--accent);
+}
+
+.media-name {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--ink-muted);
+}
+
+.media-item-unservable {
+  justify-content: center;
+  padding: 10px;
+  border: 1px dashed var(--border-strong);
+  border-radius: 4px;
+}
+
+.media-uri {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--ink-faint);
+  max-width: 320px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* evidence tables */
+
+.table-overflow {
+  overflow-x: auto;
+}
+
+.evidence-table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 12.5px;
+}
+
+.evidence-table th {
+  padding: 4px 10px 4px 0;
+  border-bottom: 1px solid var(--border-strong);
+  text-align: left;
+  font-size: 10.5px;
+  font-weight: 650;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+  white-space: nowrap;
+}
+
+.evidence-table td {
+  padding: 4px 10px 4px 0;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+  max-width: 380px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+}
+
+.error-detail-row td {
+  white-space: normal;
+  max-width: none;
+}
+
+.error-text {
+  margin: 4px 0;
+  padding: 8px 10px;
+  border: 1px solid var(--err-soft);
+  border-radius: 4px;
+  background: var(--err-soft);
+  color: var(--err);
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.tag-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+/* raw JSON */
+
+.raw-json {
+  margin-top: 30px;
+  border-top: 1px solid var(--border);
+  padding-top: 10px;
+}
+
+.raw-json summary {
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 650;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+
+.raw-json pre {
+  margin: 10px 0 0;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  overflow-x: auto;
+}
+
+/* ---- curate: tabs + layout ------------------------------------------------ */
+
+.curate-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.curate-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 6px 14px 0;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.curate-tab {
+  padding: 5px 12px 7px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--ink-muted);
+  font: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.curate-tab:hover {
+  color: var(--ink);
+}
+
+.curate-tab[data-state="active"] {
+  color: var(--accent-ink);
+  border-bottom-color: var(--accent);
+}
+
+.curate-tab-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+/* Radix Tabs marks the inactive panel with `hidden`, and the studio panel
+   carries it while staying mounted. An author `display: flex` beats the UA
+   [hidden] rule, so say it here or the hidden panel keeps rendering. */
+.curate-tab-body[hidden] {
+  display: none;
+}
+
+.studio-body {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 250px minmax(0, 1fr);
+  min-height: 0;
+}
+
+.studio-body.has-stats {
+  grid-template-columns: 250px minmax(0, 1fr) 280px;
+}
+
+.studio-center {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.btn.is-toggled {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+}
+
+/* The one filled button. Its label takes --accent-contrast rather than
+   --surface: the accent now INVERTS between themes, so "the ink that reads on
+   an accent fill" is its own idea and not a coincidence of the surface colour.
+
+   The hover rule has to out-specify `.btn:hover:not(:disabled):not(
+   [data-disabled])` above, which is (0,4,0) and sets `color: var(--accent-ink)`
+   — on a filled button that is ink the same colour as the fill, and the label
+   vanishes. It was already vanishing while the accent was teal (accent-ink on
+   accent-ink, just less obviously); the extra `.btn` here settles it at (0,5,0)
+   instead of leaving it to source order. */
+.btn-primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-contrast);
+}
+
+.btn.btn-primary:hover:not(:disabled):not([data-disabled]) {
+  background: var(--accent-ink);
+  border-color: var(--accent-ink);
+  color: var(--accent-contrast);
+}
+
+/* ---- curate: SQL editor ---------------------------------------------------- */
+
+.editor-shell {
+  flex: none;
+  height: 172px;
+  min-height: 96px;
+  overflow: auto;
+  resize: vertical;
+  border-bottom: 1px solid var(--border-strong);
+  background: var(--surface);
+}
+
+.sql-editor {
+  height: 100%;
+}
+
+/* ---- curate: catalog tree -------------------------------------------------- */
+
+.catalog-pane {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  padding: 12px;
+  border-right: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.catalog-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.catalog-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.catalog-row {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+}
+
+.tree-toggle {
+  display: inline-flex;
+  flex: none;
+  border: none;
+  background: none;
+  padding: 2px;
+  color: var(--ink-faint);
+  cursor: pointer;
+}
+
+.tree-toggle .chevron {
+  transform: rotate(-90deg);
+}
+
+.tree-toggle .chevron.is-open {
+  transform: rotate(0deg);
+}
+
+.catalog-name {
+  flex: 1;
+  min-width: 0;
+  padding: 3px 4px;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: var(--ink);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.catalog-name:hover {
+  background: var(--accent-soft);
+}
+
+.catalog-name.is-selected {
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+  font-weight: 600;
+}
+
+.catalog-kind {
+  flex: none;
+  font-size: 9.5px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+.insert-btn {
+  flex: none;
+  padding: 1px 3px;
+  color: var(--ink-faint);
+}
+
+.catalog-row:hover .insert-btn {
+  color: var(--accent-ink);
+}
+
+.catalog-columns {
+  margin: 0 0 3px;
+  padding: 0 0 0 22px;
+  list-style: none;
+}
+
+.catalog-column {
+  display: flex;
+  justify-content: space-between;
+  gap: 6px;
+  width: 100%;
+  min-width: 0;
+  padding: 1px 4px;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--ink-muted);
+  cursor: pointer;
+}
+
+.catalog-column:hover {
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+}
+
+.catalog-column-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.catalog-column-type {
+  flex: none;
+  font-size: 9.5px;
+  color: var(--ink-faint);
+}
+
+.catalog-hint {
+  flex: none;
+  margin: 8px 0 0;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+  font-size: 11.5px;
+  color: var(--ink-faint);
+}
+
+.table-summary {
+  flex: none;
+  max-height: 45%;
+  overflow: auto;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+}
+
+.table-summary-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+}
+
+.table-summary-title {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.table-summary-rowcount {
+  margin: 2px 0 6px;
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+.summary-table td {
+  max-width: 90px;
+  font-size: 11px;
+}
+
+/* ---- curate: results ------------------------------------------------------- */
+
+.studio-results {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.data-table th.th-static {
+  padding: 6px 10px;
+  font-size: 10.5px;
+  font-weight: 650;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+
+.truncation-banner {
+  flex: none;
+  padding: 5px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--warn-soft);
+  color: var(--warn);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.result-meta {
+  flex: none;
+  padding: 4px 12px;
+  border-bottom: 1px solid var(--border);
+  font-size: 11.5px;
+  color: var(--ink-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---- curate: report + coverage --------------------------------------------- */
+
+.report-panel {
+  flex: none;
+  max-height: 260px;
+  overflow-y: auto;
+  padding: 10px 14px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.report-stats {
+  display: flex;
+  gap: 28px;
+  margin: 4px 0 10px;
+}
+
+.report-stat {
+  display: flex;
+  flex-direction: column;
+}
+
+.report-stat-value {
+  font-size: 18px;
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+}
+
+.coverage-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.coverage-bar {
+  position: relative;
+  width: 120px;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--surface-sunken);
+  overflow: hidden;
+}
+
+.coverage-bar-fill {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 3px;
+  background: var(--ok);
+}
+
+.coverage-bar-fill.is-partial {
+  background: var(--warn);
+}
+
+.coverage-percent {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+
+.coverage-percent.is-partial {
+  color: var(--warn);
+  font-weight: 650;
+}
+
+.report-note {
+  margin: 8px 0 0;
+  font-size: 11.5px;
+  color: var(--warn);
+}
+
+/* ---- curate: column stats --------------------------------------------------- */
+
+.curate-stats {
+  min-width: 0;
+  overflow-y: auto;
+  padding: 12px;
+  border-left: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.stat-card {
+  margin-bottom: 10px;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
+
+.stat-card-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 4px;
+  min-width: 0;
+}
+
+.stat-card-name {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stat-card-type {
+  flex: none;
+  font-size: 9.5px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+.stat-grid {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.stat-pair {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0;
+}
+
+.stat-key {
+  font-size: 11px;
+  color: var(--ink-faint);
+  white-space: nowrap;
+}
+
+.stat-value {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ---- curate: saved-queries menu --------------------------------------------- */
+
+.menu-toggle-label {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Radix positions and portals this; it only has to look like a panel. */
+.menu-panel {
+  z-index: 30;
+  width: 300px;
+  padding: 6px;
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  background: var(--surface);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
+}
+
+.menu-list {
+  max-height: 260px;
+  overflow-y: auto;
+}
+
+.menu-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.menu-item {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+  padding: 5px 8px;
+  border: none;
+  border-radius: 5px;
+  background: none;
+  color: var(--ink);
+  font: inherit;
+  font-size: 12.5px;
+  text-align: left;
+  cursor: pointer;
+}
+
+/* Radix marks the arrow-key-focused item with data-highlighted; it has to read
+   exactly like hover or keyboard users lose their place in the list. */
+.menu-item:hover,
+.menu-item[data-highlighted] {
+  background: var(--accent-soft);
+  outline: none;
+}
+
+.menu-item.is-active {
+  color: var(--accent-ink);
+  font-weight: 600;
+}
+
+.menu-item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.menu-item-time {
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--ink-faint);
+}
+
+.menu-actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 6px;
+  padding: 6px 4px 2px;
+  border-top: 1px solid var(--border);
+}
+
+.menu-saveas {
+  display: flex;
+  gap: 6px;
+  padding: 6px 4px 2px;
+}
+
+.menu-saveas .input {
+  flex: 1;
+  min-width: 0;
+}
+
+.menu-note {
+  margin: 0;
+  padding: 8px;
+  font-size: 12px;
+  color: var(--ink-faint);
+}
+
+.menu-error {
+  color: var(--err);
+}
+
+/* ---- curate: pin modal ------------------------------------------------------- */
+
+/* Radix renders the overlay and the dialog as siblings in a body portal, so
+   the scrim no longer centres the panel — the panel centres itself. */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: rgba(0, 0, 0, 0.35);
+}
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 51;
+  width: min(520px, calc(100vw - 32px));
+  max-height: calc(100vh - 48px);
+  overflow-y: auto;
+  padding: 14px 16px 16px;
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  background: var(--surface);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.modal-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.modal-hint {
+  margin: 0;
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+.modal-field {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.modal-textarea {
+  resize: vertical;
+  font-family: var(--font-ui);
+}
+
+.modal-sql summary {
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 650;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.modal-success {
+  margin: 0;
+  font-size: 13px;
+}
+
+.modal-path {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  color: var(--ink-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.modal-coverage-warning {
+  margin: 0;
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: var(--warn-soft);
+  color: var(--warn);
+  font-size: 12px;
+}
+
+.form-error {
+  margin: 0;
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: var(--err-soft);
+  color: var(--err);
+  font-size: 12px;
+  font-family: var(--font-mono);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ---- curate: manifests tab ----------------------------------------------------- */
+
+.manifests-pane {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 22px 48px;
+}
+
+.manifests-note {
+  margin: 0 0 12px;
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+.manifests-note code {
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+}
+
+.manifest-name {
+  font-weight: 600;
+}
+
+.sql-block {
+  margin: 4px 0;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface-sunken);
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ---- runs + pipeline pages -------------------------------------------------- */
+
+.runs-page,
+.pipeline-page {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 22px 48px;
+}
+
+.page-title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 650;
+}
+
+.auto-refresh-toggle {
+  cursor: pointer;
+}
+
+.auto-refresh-toggle input[type="checkbox"] {
+  margin: 0;
+  accent-color: var(--accent);
+}
+
+/* runs: status tiles */
+
+.status-tiles {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.status-tile {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 128px;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+}
+
+.status-tile-label {
+  font-size: 10.5px;
+  font-weight: 650;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+.status-tile-value {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+.status-tile-mono {
+  font-family: var(--font-mono);
+  font-weight: 500;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.health-tile.is-ok {
+  border-color: color-mix(in srgb, var(--ok) 35%, var(--border));
+}
+
+.health-tile.is-err {
+  border-color: color-mix(in srgb, var(--err) 45%, var(--border));
+  background: var(--err-soft);
+}
+
+.health-tile.is-warn {
+  border-color: color-mix(in srgb, var(--warn) 40%, var(--border));
+}
+
+.health-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: none;
+}
+
+.health-dot.is-ok {
+  background: var(--ok);
+}
+
+.health-dot.is-err {
+  background: var(--err);
+}
+
+.health-dot.is-warn {
+  background: var(--warn);
+}
+
+.health-dot.is-muted {
+  background: var(--ink-faint);
+}
+
+.health-tile.is-muted .status-tile-value {
+  color: var(--ink-faint);
+  font-weight: 500;
+}
+
+/* runs: trigger form */
+
+.ingest-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+}
+
+.ingest-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ingest-uris {
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  resize: vertical;
+  min-height: 54px;
+}
+
+.ingest-controls {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+.ingest-batch-count {
+  width: 84px;
+}
+
+.ingest-success {
+  margin: 0;
+  font-size: 12.5px;
+}
+
+/* runs: master runs table */
+
+.conf-summary {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--ink-muted);
+}
+
+.conf-detail-row td {
+  white-space: normal;
+  max-width: none;
+}
+
+.conf-json {
+  margin: 4px 0;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface-sunken);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  overflow-x: auto;
+}
+
+/* runs: recent stage runs strip */
+
+.stage-strip-note {
+  margin: 0 0 8px;
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+.stage-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(190px, 1fr));
+  gap: 10px;
+  overflow-x: auto;
+}
+
+.stage-cell {
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+}
+
+.stage-cell-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+  min-width: 0;
+}
+
+.stage-cell-name {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--accent-ink);
+}
+
+.stage-cell-dag {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--ink-faint);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stage-run-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.stage-run {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.stage-run-time {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stage-run-duration {
+  margin-left: auto;
+  color: var(--ink-muted);
+  flex: none;
+  white-space: nowrap;
+}
+
+/* pipeline: header + stale banner */
+
+.pipeline-meta {
+  margin-top: 10px;
+}
+
+.stale-banner {
+  margin-top: 14px;
+  padding: 9px 12px;
+  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--border));
+  border-radius: 8px;
+  background: var(--warn-soft);
+  color: var(--warn);
+  font-size: 12.5px;
+}
+
+.stale-banner code {
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+}
+
+/* pipeline: stage lanes */
+
+.pipeline-lanes {
+  display: flex;
+  align-items: stretch;
+  gap: 6px;
+  overflow-x: auto;
+  padding-bottom: 6px;
+}
+
+.pipeline-lane {
+  flex: 1;
+  min-width: 200px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+}
+
+.lane-arrow {
+  flex: none;
+  display: flex;
+  align-items: center;
+  color: var(--ink-faint);
+}
+
+.lane-arrow-icon {
+  transform: rotate(-90deg);
+}
+
+.lane-header {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.lane-stage {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--accent-ink);
+}
+
+.lane-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ink-muted);
+}
+
+.lane-description {
+  margin: 2px 0 10px;
+  font-size: 11.5px;
+  color: var(--ink-faint);
+}
+
+.lane-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* A pressable card, so its outline is a boundary and not a separator. */
+.step-card {
+  padding: 7px 9px;
+  border: 1px solid var(--boundary);
+  border-radius: 6px;
+  background: var(--bg);
+}
+
+.step-card-engine {
+  border-style: dashed;
+  border-color: var(--border);
+  background: transparent;
+}
+
+.step-card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.step-card-name {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.step-card-engine .step-card-name {
+  color: var(--ink-muted);
+  font-weight: 500;
+}
+
+.step-card-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-top: 4px;
+}
+
+.step-card-kind {
+  font-size: 10px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+/* version chip (truncated content hash + copy) */
+
+.version-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 6px;
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--ink-muted);
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  line-height: 1.8;
+  cursor: pointer;
+}
+
+.version-chip:hover {
+  border-color: var(--accent);
+  color: var(--accent-ink);
+}
+
+.version-chip-icon {
+  flex: none;
+}
+
+/* ---- episodes: header mini-distributions ------------------------------------- */
+
+.th-inner {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.th-inner .th-sort {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Just the trigger's slot in the header row now — the popover it opens lives
+   in a body portal, so this needs no positioning context. */
+.th-stats {
+  flex: none;
+  display: flex;
+  align-items: center;
+}
+
+.th-stats-trigger {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 6px 3px 2px;
+  border: none;
+  background: none;
+  color: var(--ink-faint);
+  cursor: pointer;
+}
+
+.th-stats:hover .th-stats-trigger,
+.th-stats-trigger:focus-visible,
+.th-stats-trigger[data-state="open"] {
+  color: var(--accent-ink);
+}
+
+/* Radix positions this (floating-ui) and portals it to the body, so it takes
+   no position of its own and inherits nothing from the table header — every
+   text property it used to reset is now stated outright. */
+.stats-popover {
+  z-index: 40;
+  width: 236px;
+  padding: 10px 12px;
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  background: var(--surface);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
+  color: var(--ink);
+  font-family: var(--font-ui);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.5;
+  white-space: normal;
+  text-transform: none;
+  letter-spacing: normal;
+  text-align: left;
+  cursor: default;
+}
+
+.stats-popover-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+  min-width: 0;
+}
+
+.stats-popover-name {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.stats-popover-kind {
+  flex: none;
+  font-size: 9.5px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+.stats-popover-note {
+  margin: 0;
+  font-size: 11.5px;
+  color: var(--ink-faint);
+}
+
+.histogram {
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  height: 52px;
+}
+
+.histogram-bar {
+  flex: 1;
+  min-width: 3px;
+  border-radius: 2px 2px 0 0;
+  background: var(--accent);
+  opacity: 0.75;
+}
+
+.histogram-bar:hover {
+  opacity: 1;
+}
+
+.histogram-range {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 4px;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--ink-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.stats-value-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.stats-value-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  padding: 2px 4px;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: var(--ink);
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.stats-value-row:hover {
+  background: var(--accent-soft);
+}
+
+.stats-value-row.is-active {
+  color: var(--accent-ink);
+  font-weight: 600;
+}
+
+.stats-value-row-static {
+  cursor: default;
+  color: var(--ink-muted);
+}
+
+.stats-value-row-static:hover {
+  background: none;
+}
+
+.stats-value-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stats-value-bar {
+  flex: none;
+  width: 56px;
+  height: 5px;
+  border-radius: 3px;
+  background: var(--surface-sunken);
+  overflow: hidden;
+}
+
+.stats-value-bar-fill {
+  display: block;
+  height: 100%;
+  border-radius: 3px;
+  background: var(--accent);
+  opacity: 0.75;
+}
+
+.stats-value-count {
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---- dag graph ------------------------------------------------------------ */
+
+/* Hand-rolled renderer: an SVG connector layer under real <button> nodes, so
+   nodes focus, Enter selects, and text keeps browser typography. */
+
+.dag-figure {
+  margin: 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+}
+
+/* Both axes: the chain overflows sideways in every realistic pane, and a pane
+   that also caps the height (a stage lane, a short window) gets the same drag
+   vertically. `scroll-behavior: auto` is pinned because the pan writes the
+   scroll offset directly — under a global smooth-scroll the view would ease
+   after the pointer instead of tracking it, which is exactly the animation
+   prefers-reduced-motion asks us not to invent. */
+.dag-scroll {
+  overflow: auto;
+  scroll-behavior: auto;
+  border-radius: 8px 8px 0 0;
+}
+
+/* The empty space between nodes is a drag handle — but only where the graph
+   actually overflows, so the cursor never promises a pan the pane cannot give.
+   Nodes keep `cursor: pointer` by being deeper in the tree; while a pan is
+   running, grabbing wins over everything under the pointer. */
+.dag-scroll.is-pannable {
+  cursor: grab;
+}
+
+.dag-scroll.is-panning,
+.dag-scroll.is-panning * {
+  cursor: grabbing;
+  /* A drag across labels must not paint a text selection behind it. */
+  user-select: none;
+}
+
+.dag-canvas {
+  position: relative;
+}
+
+.dag-edge-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+/* A connector IS the dependency — the only place the graph states that two
+   tasks are related — so it takes --boundary rather than the decorative
+   separator grey it used to share with hairlines between rows. */
+.dag-edge {
+  fill: none;
+  stroke: var(--boundary);
+  stroke-width: 1.5;
+  pointer-events: stroke;
+}
+
+.dag-edge.is-gate {
+  stroke: var(--warn);
+  stroke-dasharray: 5 4;
+}
+
+.dag-arrow {
+  fill: var(--boundary);
+}
+
+.dag-arrow.is-gate {
+  fill: var(--warn);
+}
+
+.dag-edge-label {
+  font-family: var(--font-ui);
+  font-size: 9.5px;
+  font-weight: 650;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  fill: var(--ink-faint);
+  /* Halo so a label stays readable where it crosses a connector. */
+  paint-order: stroke;
+  stroke: var(--surface);
+  stroke-width: 3px;
+  stroke-linejoin: round;
+}
+
+.dag-edge-label.is-gate {
+  fill: var(--warn);
+}
+
+.dag-node-slot {
+  position: absolute;
+}
+
+/* A mapped task is one instance per planned batch: the card is stacked. */
+.dag-node-stack {
+  position: absolute;
+  inset: 0;
+  border: 1px solid var(--border-strong);
+  border-radius: 7px;
+  background: var(--surface-sunken);
+}
+
+.dag-node-stack.is-back {
+  transform: translate(8px, 8px);
+  opacity: 0.5;
+}
+
+.dag-node-stack.is-mid {
+  transform: translate(4px, 4px);
+  opacity: 0.75;
+}
+
+.dag-node {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+  height: 100%;
+  padding: 6px 9px;
+  border: 1px solid var(--boundary);
+  border-radius: 7px;
+  background: var(--bg);
+  color: var(--ink);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.dag-node:hover {
+  border-color: var(--accent);
+}
+
+/* Selection has to stay readable NEXT TO a running node, which now also draws
+   an accent border — so the halo is what says "selected", and it is a real
+   ring rather than the barely-there tint it was while the accent was a hue. */
+.dag-node.is-selected {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
+}
+
+.dag-node.is-expanded {
+  border-left-width: 3px;
+  border-left-color: var(--accent);
+}
+
+.dag-node.is-ok {
+  border-color: color-mix(in srgb, var(--ok) 45%, var(--boundary));
+  background: color-mix(in srgb, var(--ok) 9%, var(--surface));
+}
+
+.dag-node.is-err {
+  border-color: color-mix(in srgb, var(--err) 50%, var(--boundary));
+  background: color-mix(in srgb, var(--err) 10%, var(--surface));
+}
+
+.dag-node.is-warn {
+  border-color: color-mix(in srgb, var(--warn) 45%, var(--boundary));
+  background: color-mix(in srgb, var(--warn) 10%, var(--surface));
+}
+
+.dag-node.is-run {
+  border-color: color-mix(in srgb, var(--run) 55%, var(--boundary));
+  background: color-mix(in srgb, var(--run) 9%, var(--surface));
+}
+
+/* Long task ids wrap to a second line instead of being truncated — the id is
+   the thing the API, the logs and the details panel all speak. */
+.dag-node-id {
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  font-weight: 600;
+  line-height: 1.25;
+  max-height: 29px;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+}
+
+.dag-node-meta {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+}
+
+.dag-node-state {
+  font-size: 9.5px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dag-node-state.is-ok {
+  color: var(--ok);
+}
+
+.dag-node-state.is-err {
+  color: var(--err);
+}
+
+.dag-node-state.is-warn {
+  color: var(--warn);
+}
+
+.dag-node-state.is-run {
+  color: var(--run-ink);
+}
+
+.dag-node-state.is-muted {
+  color: var(--ink-faint);
+}
+
+/* Deferred means "released its worker slot and is waiting" — never stalled. */
+.dag-node-waits {
+  flex: none;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--run-soft);
+  color: var(--run-ink);
+  font-size: 9.5px;
+  font-weight: 650;
+  line-height: 1.7;
+}
+
+.dag-node-badge {
+  margin-left: auto;
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--ink-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---- a node that contains the steps it runs --------------------------------
+   The steps inside a process_batch have no edges between them, so containment
+   is the only honest drawing: they are nested in the node rather than strung
+   out beside it. The row metrics here are mirrored by contentAwareNodeHeight
+   in DagGraph.tsx, which has to know the height before anything renders. */
+
+.dag-node.has-contents {
+  justify-content: flex-start;
+  gap: 0;
+  padding: 0;
+  cursor: default;
+  overflow: hidden;
+}
+
+.dag-node.has-contents:hover {
+  border-color: var(--boundary);
+}
+
+.dag-node-head {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+  flex: none;
+  height: 58px; /* NODE_HEIGHT: the head alone is a plain node */
+  padding: 6px 9px;
+  border: 0;
+  border-radius: 6px 6px 0 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.dag-node-head:hover {
+  background: var(--surface-sunken);
+}
+
+.dag-node.is-selected > .dag-node-head {
+  background: none;
+}
+
+.dag-node-contents {
+  display: flex;
+  flex-direction: column;
+  gap: 3px; /* CONTENT_ROW_GAP */
+  padding: 0 6px 8px; /* CONTENTS_PADDING at the foot */
+  border-top: 1px dashed var(--border);
+  padding-top: 8px;
+}
+
+.dag-node-content-row {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  height: 20px; /* CONTENT_ROW_HEIGHT */
+  flex: none;
+  padding: 0 5px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--surface);
+  color: var(--ink-muted);
+  font: inherit;
+  font-size: 10.5px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.dag-node-content-row.is-engine {
+  border-style: dashed;
+  color: var(--ink-faint);
+}
+
+.dag-node-content-row:hover {
+  border-color: var(--accent);
+  color: var(--ink);
+}
+
+.dag-node-content-row.is-selected {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--ink);
+}
+
+.dag-node-content-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dag-node-content-badge {
+  margin-left: auto;
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: 9.5px;
+  color: var(--ink-faint);
+}
+
+.dag-node-contents-note {
+  margin: 0;
+  height: 38px; /* CONTENTS_NOTE_HEIGHT */
+  padding: 4px 8px 10px;
+  font-size: 10px;
+  line-height: 1.2;
+  color: var(--ink-faint);
+}
+
+.dag-hint {
+  margin: 0;
+  padding: 5px 10px 6px;
+  border-top: 1px solid var(--border);
+  font-size: 11px;
+  color: var(--ink-faint);
+}
+
+/* ---- graph + details two-pane ---------------------------------------------- */
+
+.graph-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 292px;
+  gap: 14px;
+  align-items: start;
+  margin-top: 10px;
+}
+
+.graph-column {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.graph-column .section:first-child {
+  margin-top: 0;
+}
+
+.details-column {
+  position: sticky;
+  top: 10px;
+  min-width: 0;
+}
+
+.details-panel {
+  padding: 10px 12px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+}
+
+.details-panel-head {
+  margin-bottom: 8px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--border);
+}
+
+.details-kicker {
+  display: block;
+  font-size: 9.5px;
+  font-weight: 650;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+.details-title {
+  margin: 1px 0 0;
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  font-weight: 650;
+  word-break: break-all;
+}
+
+.details-panel-body {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  align-items: flex-start;
+}
+
+.details-prose {
+  margin: 0;
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+.details-hint {
+  margin: 2px 0 0;
+  font-size: 11.5px;
+  color: var(--ink-faint);
+}
+
+.details-hint code,
+.details-prose code {
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.detail-row {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  width: 100%;
+  min-width: 0;
+}
+
+.detail-label {
+  font-size: 9.5px;
+  font-weight: 650;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+/* Row labels share one gutter so the values line up; block labels run full
+   width above their content. */
+.detail-row .detail-label {
+  flex: none;
+  width: 78px;
+}
+
+.detail-value {
+  min-width: 0;
+  font-size: 12px;
+  word-break: break-word;
+}
+
+.detail-block {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  min-width: 0;
+}
+
+.detail-block-body {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.detail-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 11.5px;
+}
+
+.legend-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+  font-size: 11.5px;
+  color: var(--ink-muted);
+}
+
+.legend-list li {
+  display: flex;
+  gap: 9px;
+  align-items: flex-start;
+}
+
+.legend-swatch {
+  flex: none;
+  width: 24px;
+  height: 15px;
+  margin-top: 1px;
+  border: 1px solid var(--border-strong);
+  border-radius: 4px;
+  background: var(--bg);
+}
+
+.legend-swatch.is-mapped {
+  box-shadow:
+    3px 3px 0 -1px var(--surface-sunken),
+    3px 3px 0 0 var(--border-strong);
+}
+
+.legend-swatch.is-gate {
+  height: 0;
+  margin-top: 8px;
+  border: none;
+  border-top: 2px dashed var(--warn);
+  border-radius: 0;
+}
+
+/* Mirrors .dag-node-waits, so it takes the same run tone. */
+.legend-chip {
+  flex: none;
+  margin-top: 1px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--run-soft);
+  color: var(--run-ink);
+  font-size: 9.5px;
+  font-weight: 650;
+  line-height: 1.7;
+}
+
+.instance-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  width: 100%;
+  max-height: 230px;
+  overflow-y: auto;
+}
+
+.instance-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11.5px;
+}
+
+.instance-index {
+  flex: none;
+  width: 30px;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--ink-faint);
+}
+
+.instance-duration {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--ink-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---- pipeline: notices, stage lanes, nested steps --------------------------- */
+
+.notice-banner {
+  margin-top: 12px;
+  padding: 9px 12px;
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  background: var(--surface);
+  color: var(--ink-muted);
+  font-size: 12.5px;
+}
+
+.notice-banner strong {
+  color: var(--ink);
+}
+
+.notice-banner code,
+.section-note code {
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+}
+
+.section-note {
+  margin: 0 0 8px;
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+.section-title code {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.gate-callout {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: flex-start;
+  width: 100%;
+  margin-top: 8px;
+  padding: 8px 10px;
+  border: 1px dashed color-mix(in srgb, var(--warn) 45%, var(--border));
+  border-radius: 8px;
+  background: var(--warn-soft);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.gate-callout.is-selected {
+  border-style: solid;
+  box-shadow: 0 0 0 2px var(--warn-soft);
+}
+
+.gate-callout-title {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--warn);
+}
+
+.gate-callout-text {
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+.stage-lane-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.stage-lane-card {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+}
+
+.stage-lane-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  border-radius: 8px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.stage-lane-head:hover {
+  background: var(--accent-soft);
+}
+
+.stage-lane-card.is-expanded .stage-lane-head {
+  border-radius: 8px 8px 0 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.stage-lane-head .lane-description {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lane-step-count {
+  flex: none;
+  font-size: 11px;
+  color: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+.stage-lane-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px;
+}
+
+.stage-lane-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 22px;
+}
+
+.stage-meta-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.profile-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.inside-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 9px 11px;
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: 8px;
+  background: var(--surface-sunken);
+}
+
+.inside-panel-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.inside-panel-title {
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.inside-panel-title code,
+.inside-panel-note code,
+.tier-note code {
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.inside-panel-note {
+  font-size: 11.5px;
+  color: var(--ink-faint);
+}
+
+.tier-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.tier-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.tier-badge {
+  padding: 0 7px;
+  border-radius: 999px;
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+  font-size: 9.5px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  line-height: 1.8;
+}
+
+.tier-badge.is-engine {
+  border: 1px dashed var(--border-strong);
+  background: var(--surface);
+  color: var(--ink-muted);
+}
+
+.tier-caption {
+  font-size: 11.5px;
+  color: var(--ink-muted);
+}
+
+.tier-note {
+  margin: 0;
+  font-size: 11.5px;
+  color: var(--ink-faint);
+}
+
+/* What the badges inside the process_batch node mean. The steps themselves are
+   drawn in the node; this is the key to them, not a second copy. */
+.tier-legend {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin: 0;
+}
+
+.tier-legend-entry {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.tier-legend-entry dt {
+  flex: none;
+  min-width: 58px;
+}
+
+.tier-legend-entry dd {
+  margin: 0;
+  font-size: 11.5px;
+  color: var(--ink-muted);
+}
+
+.step-card-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.step-card-row .step-card {
+  width: 236px;
+  max-width: 100%;
+}
+
+.step-card-button {
+  display: flex;
+  flex-direction: column;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.step-card-button:hover {
+  border-color: var(--accent);
+}
+
+.step-card-button.is-selected {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-soft);
+}
+
+.step-card-version {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--ink-faint);
+}
+
+/* ---- runs: live graph ------------------------------------------------------- */
+
+.run-graph-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.run-graph-id {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stage-run-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  border-bottom: 1px solid var(--border);
+  min-width: 0;
+}
+
+.stage-run-dag {
+  color: var(--ink-faint);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fanout {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex: none;
+}
+
+/* Proportional split of the batch fan-out, in the status palette; the counts
+   beside it carry the same information without colour. */
+.fanout-bar {
+  display: flex;
+  gap: 2px;
+  width: 116px;
+  height: 8px;
+}
+
+.fanout-seg {
+  min-width: 3px;
+  border-radius: 2px;
+  background: var(--ink-faint);
+}
+
+.fanout-seg.is-ok {
+  background: var(--ok);
+}
+
+.fanout-seg.is-err {
+  background: var(--err);
+}
+
+.fanout-seg.is-warn {
+  background: var(--warn);
+}
+
+.fanout-seg.is-run {
+  background: var(--run);
+}
+
+.fanout-readout {
+  flex: none;
+  font-size: 11.5px;
+  color: var(--ink-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.stage-run-empty {
+  padding: 10px;
+}
+
+.stage-lane-card > .dag-figure {
+  margin: 10px;
+  width: calc(100% - 20px);
+}
+
+.run-id-button {
+  max-width: 340px;
+  padding: 1px 5px;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.run-id-button:hover {
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+}
+
+.run-id-button.is-selected {
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+  font-weight: 650;
+}
+
+tr.is-selected-run td {
+  background: var(--accent-soft);
+}
+
+/* ---- runs: replay timeline --------------------------------------------------- */
+
+/* A Gantt of every task instance on one shared axis, with a draggable playhead
+   that repaints the DAGs around it. Two columns everywhere — a label gutter and
+   a track — so the ruler, every row and the playhead overlay line up exactly
+   without a single hand-measured offset. */
+
+.replay {
+  --replay-gutter: 210px;
+  --replay-gap: 10px;
+  --replay-row-height: 22px;
+  --replay-batch-row-height: 19px;
+
+  margin: 10px 0 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+}
+
+.replay.is-scrubbing {
+  cursor: ew-resize;
+  user-select: none;
+}
+
+.replay-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  padding: 7px 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.replay-title {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+
+.replay-transport {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.btn.is-playing {
+  border-color: var(--accent);
+  color: var(--accent-ink);
+}
+
+.replay-speed {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: 4px;
+}
+
+.replay-speed-label {
+  font-size: 9.5px;
+  font-weight: 650;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+.replay-speed .input {
+  padding: 1px 4px;
+  font-size: 11.5px;
+}
+
+.replay-reduced-note {
+  margin-left: 2px;
+  font-size: 10.5px;
+  color: var(--ink-faint);
+  cursor: help;
+}
+
+.replay-readout {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 8px;
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.replay-readout-offset {
+  font-size: 12.5px;
+  font-weight: 650;
+  color: var(--accent-ink);
+}
+
+.replay-readout-absolute {
+  font-size: 11px;
+  color: var(--ink-faint);
+}
+
+/* Live is a state, so it reads as a state: pinned means the dot is lit. */
+.replay-live {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 1px 9px;
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--ink-muted);
+  font: inherit;
+  font-size: 11px;
+  font-weight: 650;
+  cursor: pointer;
+}
+
+.replay-live:hover {
+  border-color: var(--accent);
+  color: var(--accent-ink);
+}
+
+.replay-live.is-live {
+  border-color: color-mix(in srgb, var(--ok) 45%, var(--boundary));
+  background: var(--ok-soft);
+  color: var(--ok);
+  cursor: default;
+}
+
+.replay-live-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--ink-faint);
+}
+
+.replay-live.is-live .replay-live-dot {
+  background: var(--ok);
+  animation: replay-live-pulse 1800ms ease-in-out infinite;
+}
+
+@keyframes replay-live-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+
+.replay-note,
+.replay-empty {
+  margin: 0;
+  padding: 8px 12px;
+  font-size: 11.5px;
+  color: var(--ink-muted);
+}
+
+.replay-chart {
+  position: relative;
+}
+
+.replay-scroll {
+  max-height: 46vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 8px 12px 10px;
+}
+
+.replay-lanes {
+  position: relative;
+}
+
+.replay-ruler,
+.replay-row {
+  display: grid;
+  grid-template-columns: var(--replay-gutter) minmax(0, 1fr);
+  column-gap: var(--replay-gap);
+  align-items: center;
+}
+
+.replay-ruler {
+  height: 18px;
+  margin-bottom: 4px;
+}
+
+.replay-ruler-gutter {
+  font-size: 9.5px;
+  font-weight: 650;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+.replay-ruler-track {
+  position: relative;
+  height: 100%;
+  cursor: ew-resize;
+  touch-action: none;
+}
+
+.replay-tick {
+  position: absolute;
+  top: 2px;
+  transform: translateX(-50%);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.replay-tick:first-child {
+  transform: none;
+}
+
+.replay-group {
+  padding-top: 6px;
+}
+
+.replay-group-head {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  padding: 3px 0 3px;
+  border-top: 1px solid var(--border);
+}
+
+.replay-group-title {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+
+.replay-group-dag {
+  font-size: 10.5px;
+  color: var(--ink-faint);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.replay-group-note {
+  margin: 2px 0 4px;
+  font-size: 11px;
+  color: var(--ink-faint);
+}
+
+.replay-row {
+  height: var(--replay-row-height);
+}
+
+.replay-row.is-batch {
+  height: var(--replay-batch-row-height);
+}
+
+.replay-row-label {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  height: 100%;
+  padding-left: 2px;
+  border-radius: 4px;
+}
+
+.replay-row-name {
+  padding: 0 2px;
+  border: none;
+  border-radius: 3px;
+  background: none;
+  color: var(--ink);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.replay-row-name:hover {
+  color: var(--accent-ink);
+}
+
+.replay-row.is-selected .replay-row-name {
+  color: var(--accent-ink);
+  font-weight: 650;
+}
+
+.replay-row-name.is-batch {
+  margin-left: 12px;
+  color: var(--ink-muted);
+  font-size: 10.5px;
+}
+
+.replay-row-duration {
+  margin-left: auto;
+  flex: none;
+  padding-right: 2px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+/* The two caveats that belong ON the row rather than in the note below it. */
+.replay-tag {
+  flex: none;
+  padding: 0 5px;
+  border-radius: 999px;
+  font-size: 9px;
+  font-weight: 650;
+  line-height: 1.6;
+  cursor: help;
+}
+
+.replay-tag.is-waits {
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+}
+
+.replay-tag.is-retry {
+  background: var(--warn-soft);
+  color: var(--warn);
+}
+
+.replay-fanout-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+  flex: none;
+  padding: 0 3px;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: var(--ink-muted);
+  font: inherit;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  cursor: pointer;
+}
+
+.replay-fanout-toggle:hover {
+  color: var(--accent-ink);
+  background: var(--accent-soft);
+}
+
+.replay-fanout-toggle .chevron {
+  transform: rotate(-90deg);
+  transition: transform 120ms ease;
+}
+
+.replay-fanout-toggle .chevron.is-open {
+  transform: none;
+}
+
+.replay-row-track {
+  position: relative;
+  height: 100%;
+  cursor: ew-resize;
+  touch-action: none;
+}
+
+.replay-row.is-selected .replay-row-label,
+.replay-row.is-selected .replay-row-track {
+  background: var(--accent-soft);
+}
+
+.replay-bar {
+  position: absolute;
+  top: 50%;
+  height: 11px;
+  min-width: 3px;
+  margin-top: -5.5px;
+  border-radius: 3px;
+  background: var(--ink-faint);
+}
+
+.replay-row.is-batch .replay-bar {
+  height: 8px;
+  margin-top: -4px;
+}
+
+.replay-bar.is-ok {
+  background: var(--ok);
+}
+
+.replay-bar.is-err {
+  background: var(--err);
+}
+
+.replay-bar.is-warn {
+  background: var(--warn);
+}
+
+.replay-bar.is-run {
+  background: var(--run);
+}
+
+/* Queued is a WAIT, not work: thinner, hatched, and in the neutral ink so it
+   can never be mistaken for a state colour. */
+.replay-bar.is-queued {
+  height: 7px;
+  margin-top: -3.5px;
+  border-radius: 3px 0 0 3px;
+  background-color: var(--surface-sunken);
+  background-image: repeating-linear-gradient(
+    135deg,
+    var(--border-strong) 0 2px,
+    transparent 2px 5px
+  );
+}
+
+/* A fan-out summary packs every batch into one lane, so the queued waits move
+   to their own strip above the run band: overlaid, the last batch's long wait
+   would paint over the batches that were already running. */
+.replay-row-track.is-summary .replay-bar {
+  height: 9px;
+  margin-top: -3px;
+}
+
+.replay-row-track.is-summary .replay-bar.is-queued {
+  top: 2px;
+  height: 4px;
+  margin-top: 0;
+}
+
+/* No end recorded yet: the bar runs to the axis edge and fades out rather than
+   drawing a finish the payload never reported. */
+.replay-bar.is-open {
+  border-radius: 3px 0 0 3px;
+  -webkit-mask-image: linear-gradient(90deg, #000 86%, rgba(0, 0, 0, 0.3));
+  mask-image: linear-gradient(90deg, #000 86%, rgba(0, 0, 0, 0.3));
+}
+
+.replay-untimed {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  padding: 0 6px;
+  border: 1px dashed var(--border-strong);
+  border-radius: 3px;
+  font-size: 9.5px;
+  color: var(--ink-faint);
+  cursor: help;
+}
+
+.replay-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: calc(var(--replay-gutter) + var(--replay-gap));
+  pointer-events: none;
+}
+
+.replay-gridline {
+  position: absolute;
+  top: 16px;
+  bottom: 0;
+  width: 1px;
+  background: var(--border);
+  opacity: 0.7;
+}
+
+.replay-playhead {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0;
+  border-left: 2px solid var(--accent);
+  margin-left: -1px;
+}
+
+.replay-grip {
+  position: absolute;
+  top: 0;
+  left: -7px;
+  width: 13px;
+  height: 13px;
+  border-radius: 3px;
+  background: var(--accent);
+  cursor: ew-resize;
+  pointer-events: auto;
+  touch-action: none;
+}
+
+.replay-grip::after {
+  content: "";
+  position: absolute;
+  top: 12px;
+  left: 3.5px;
+  border-left: 3px solid transparent;
+  border-right: 3px solid transparent;
+  border-top: 4px solid var(--accent);
+}
+
+.replay-limits {
+  border-top: 1px solid var(--border);
+  font-size: 11px;
+  color: var(--ink-faint);
+}
+
+.replay-limits-summary {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px 6px;
+  cursor: pointer;
+  list-style: none;
+}
+
+.replay-limits-summary::-webkit-details-marker {
+  display: none;
+}
+
+.replay-limits-summary:hover {
+  color: var(--accent-ink);
+}
+
+.replay-limits-list {
+  margin: 0;
+  padding: 0 14px 10px 34px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  max-width: 74em;
+  color: var(--ink-muted);
+}
+
+.replay-limits-list strong {
+  color: var(--ink);
+  font-weight: 650;
+}
+
+.replay-limits-list code {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+}
+
+.replay-hint {
+  border-top: 1px solid var(--border);
+}
+
+/* While the playhead is parked, every graph on the page is a reconstruction —
+   the accent frame says so without recolouring anything. */
+.graph-layout.is-replaying .dag-figure {
+  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
+}
+
+.detail-replay-at {
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  color: var(--accent-ink);
+}
+
+/* ---- episode: timeline strip ------------------------------------------------ */
+
+.timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 14px 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+}
+
+.timeline-plot {
+  position: relative;
+}
+
+.timeline-gridline {
+  position: absolute;
+  top: -4px;
+  bottom: -6px;
+  width: 1px;
+  background: var(--border);
+}
+
+.timeline-band {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 4px;
+  overflow: hidden;
+  /* 2px surface ring so touching or stacked bands never merge visually. */
+  box-shadow: 0 0 0 2px var(--surface);
+  background: var(--viz-other);
+}
+
+.timeline-band.is-slot-1 {
+  background: var(--viz-1);
+}
+
+.timeline-band.is-slot-2 {
+  background: var(--viz-2);
+}
+
+.timeline-band.is-slot-3 {
+  background: var(--viz-3);
+}
+
+.timeline-band-label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--viz-ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.timeline-axis {
+  position: relative;
+  height: 14px;
+  margin-top: 2px;
+}
+
+.timeline-tick {
+  position: absolute;
+  transform: translateX(-50%);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.timeline-tick:first-child {
+  transform: none;
+}
+
+.timeline-tick:last-child {
+  transform: translateX(-100%);
+}
+
+.timeline-legend {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 14px;
+  padding-top: 6px;
+  border-top: 1px solid var(--border);
+}
+
+.timeline-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11.5px;
+  color: var(--ink-muted);
+}
+
+.timeline-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 3px;
+  background: var(--viz-other);
+}
+
+.timeline-swatch.is-slot-1 {
+  background: var(--viz-1);
+}
+
+.timeline-swatch.is-slot-2 {
+  background: var(--viz-2);
+}
+
+.timeline-swatch.is-slot-3 {
+  background: var(--viz-3);
+}
+
+.timeline-legend-name {
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.timeline-legend-count {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+.timeline-legend-note {
+  font-size: 11px;
+  color: var(--ink-faint);
+}
+
+/* ---- episode: measurement bars ---------------------------------------------- */
+
+.measure-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.measure-group-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 4px;
+  flex-wrap: wrap;
+}
+
+.measure-group-unit {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+
+.measure-group-note {
+  font-size: 11px;
+  color: var(--ink-faint);
+}
+
+.measure-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.measure-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.measure-key {
+  flex: none;
+  width: 210px;
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.measure-track {
+  flex: 1;
+  min-width: 60px;
+  max-width: 460px;
+  height: 9px;
+  border-radius: 0 3px 3px 0;
+  background: var(--surface-sunken);
+}
+
+.measure-fill {
+  display: block;
+  height: 100%;
+  border-radius: 0 3px 3px 0;
+  background: var(--accent);
+}
+
+/* A negative value is drawn as magnitude, outlined so the sign is not lost.
+   The hatch is mixed from --accent rather than taken from --accent-soft: soft
+   is a 7% wash tuned for text backgrounds, and at 9px tall behind an outline
+   it disappeared. */
+.measure-fill.is-negative {
+  background: repeating-linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--accent) 30%, transparent) 0 4px,
+    transparent 4px 8px
+  );
+  border: 1px solid var(--accent);
+}
+
+.measure-value {
+  flex: none;
+  width: 120px;
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+.measure-unit {
+  color: var(--ink-faint);
+}
+
+/* ---- responsive ---------------------------------------------------------- */
+
+/* The details pane is a column beside the graph until there is no room for
+   both; then it stacks above the graph, still always present. */
+@media (max-width: 1180px) {
+  .graph-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .details-column {
+    position: static;
+    order: -1;
+  }
+
+  .measure-key {
+    width: 150px;
+  }
+
+  .replay {
+    --replay-gutter: 168px;
+  }
+}
+
+@media (max-width: 960px) {
+  .episodes-body {
+    grid-template-columns: 190px minmax(0, 1fr);
+  }
+
+  .search-input {
+    width: 170px;
+  }
+
+  .studio-body {
+    grid-template-columns: 200px minmax(0, 1fr);
+  }
+
+  .studio-body.has-stats {
+    grid-template-columns: 200px minmax(0, 1fr) 220px;
+  }
+}
+
+/* The rail stops being a rail: it becomes the bar across the top, and the
+   manual collapse is SUSPENDED for as long as it is one. A bar has no width to
+   give back, and an icon-only bar whose expand control has nowhere sensible to
+   live would strand a reader who collapsed the rail on a wide screen and then
+   narrowed the window. The stored choice is untouched — widen past 780px and
+   the rail comes back exactly as it was left. Every rule here therefore has to
+   out-specify the :root[data-rail="collapsed"] block above; the ones that
+   restate a collapsed declaration say so. */
+@media (max-width: 780px) {
+  .app-shell {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
+  .nav-rail {
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .brand,
+  :root[data-rail="collapsed"] .brand {
+    padding: 0 4px 0 0;
+  }
+
+  /* Undo the collapse: labels back on screen, items back to their own padding. */
+  :root[data-rail="collapsed"] .brand-word,
+  :root[data-rail="collapsed"] .nav-item-label {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip-path: none;
+  }
+
+  :root[data-rail="collapsed"] .nav-item {
+    padding: 6px 8px;
+  }
+
+  .rail-foot,
+  :root[data-rail="collapsed"] .rail-foot {
+    margin-top: 0;
+    margin-left: auto;
+    padding: 0;
+    border-top: none;
+    overflow: hidden;
+  }
+
+  /* The rail is a row here, so the gap under the controls would only push them
+     off the bar's centre line, and stacking them would make the bar taller. */
+  .rail-controls,
+  :root[data-rail="collapsed"] .rail-controls {
+    flex-direction: row;
+    margin-bottom: 0;
+  }
+
+  /* Nothing to collapse, so nothing to press. Removed from the layout rather
+     than hidden, so it leaves the tab order with it. */
+  .rail-toggle {
+    display: none;
+  }
+
+  .rail-meta .rail-note {
+    display: none;
+  }
+
+  .episodes-body {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
+  .facet-sidebar {
+    max-height: 180px;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .replay {
+    --replay-gutter: 126px;
+  }
+
+  .replay-readout-absolute {
+    display: none;
+  }
+}
+
+/* ---- motion --------------------------------------------------------------
+
+   All of it, in one place and last in the file so it wins on order rather
+   than on !important: spinner rotation, the live dot, hover transitions, and
+   the theme cross-fade, and the nav rail's collapse. Replay playback asks
+   matchMedia the same question in JS and simply does not run (its Play control
+   says so), so nothing here animates a playhead across the screen. */
+
+/* src/theme.ts hangs data-theme-changing on <html> for the length of one
+   theme change and takes it straight off again, so this blanket transition
+   exists for ~160ms and cannot bleed into hover or focus. Its (0, 2, 0)
+   specificity is what puts it over .btn and .chevron for that moment. */
+:root[data-theme-changing] * {
+  transition:
+    background-color 140ms ease,
+    border-color 140ms ease,
+    color 140ms ease,
+    fill 140ms ease,
+    stroke 140ms ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation: none;
+  }
+
+  .replay-live.is-live .replay-live-dot {
+    animation: none;
+  }
+
+  .nav-item,
+  .btn,
+  .chevron,
+  .rail-toggle,
+  .theme-toggle {
+    transition: none;
+  }
+
+  /* The rail changes width in one frame instead of sliding. */
+  .app-shell {
+    transition: none;
+  }
+
+  /* No cross-fade: a theme change lands in one frame. */
+  :root[data-theme-changing] * {
+    transition: none;
+  }
+}
diff --git a/ui/src/theme.ts b/ui/src/theme.ts
new file mode 100644
index 00000000..cd246835
--- /dev/null
+++ b/ui/src/theme.ts
@@ -0,0 +1,124 @@
+import { useCallback, useEffect, useState } from "react";
+
+// Theme preference. Three states, because "follow the system" is a real
+// choice and not the absence of one — a two-state toggle cannot express it,
+// and a reader who has picked light on a dark laptop must keep light.
+//
+// styles.css is authoritative for what each state LOOKS like; this module only
+// decides which of the three is in force and stamps it on <html>.
+
+export type ThemePreference = "system" | "light" | "dark";
+
+/** What "system" currently resolves to, and the only two things it can be. */
+export type ResolvedTheme = "light" | "dark";
+
+export const THEME_PREFERENCES: readonly ThemePreference[] = ["system", "light", "dark"];
+
+/**
+ * localStorage key holding the ThemePreference, as one of the three literal
+ * strings above.
+ *
+ * Read in two places that must agree: this module, and the inline pre-paint
+ * script at the top of index.html that applies the stored choice before React
+ * mounts. Change one, change the other.
+ */
+export const THEME_STORAGE_KEY = "hflow-ui-theme";
+
+/**
+ * The attribute styles.css keys off. Absent means "system" — no attribute, so
+ * the stylesheet's prefers-color-scheme block decides and keeps deciding as
+ * the OS changes, with no JS in the loop.
+ */
+const THEME_ATTRIBUTE = "data-theme";
+
+/** Present only while a theme change is being cross-faded. */
+const THEME_CHANGING_ATTRIBUTE = "data-theme-changing";
+
+/** Must outlast the transition in styles.css. */
+const THEME_TRANSITION_MS = 160;
+
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+
+function isThemePreference(value: unknown): value is ThemePreference {
+  return value === "system" || value === "light" || value === "dark";
+}
+
+/** localStorage throws in private modes and when site data is blocked. */
+function readStoredPreference(): ThemePreference {
+  try {
+    const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
+    return isThemePreference(stored) ? stored : "system";
+  } catch {
+    return "system";
+  }
+}
+
+function storePreference(preference: ThemePreference): void {
+  try {
+    window.localStorage.setItem(THEME_STORAGE_KEY, preference);
+  } catch {
+    // A reader who cannot persist still gets the theme for this session.
+  }
+}
+
+function readSystemTheme(): ResolvedTheme {
+  if (typeof window.matchMedia !== "function") return "light";
+  return window.matchMedia(DARK_QUERY).matches ? "dark" : "light";
+}
+
+function applyPreference(preference: ThemePreference): void {
+  const root = document.documentElement;
+  if (preference === "system") root.removeAttribute(THEME_ATTRIBUTE);
+  else root.setAttribute(THEME_ATTRIBUTE, preference);
+}
+
+/**
+ * The reader's theme preference, the theme it currently resolves to, and a
+ * setter that persists the choice.
+ *
+ * "system" tracks the OS live in two independent ways, on purpose: the
+ * stylesheet's prefers-color-scheme block repaints without any JS, and the
+ * matchMedia listener here keeps `resolvedTheme` honest so the control can say
+ * which way "system" is currently leaning while the reader is watching.
+ */
+export function useThemePreference(): {
+  preference: ThemePreference;
+  resolvedTheme: ResolvedTheme;
+  setPreference: (preference: ThemePreference) => void;
+} {
+  const [preference, setPreferenceState] = useState<ThemePreference>(readStoredPreference);
+  const [systemTheme, setSystemTheme] = useState<ResolvedTheme>(readSystemTheme);
+
+  useEffect(() => {
+    if (typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia(DARK_QUERY);
+    const handleChange = () => setSystemTheme(query.matches ? "dark" : "light");
+    // Re-read on mount: the OS may have flipped between module init and here.
+    handleChange();
+    query.addEventListener("change", handleChange);
+    return () => query.removeEventListener("change", handleChange);
+  }, []);
+
+  // The inline script in index.html already applied the stored preference, so
+  // the first run of this is a no-op — it exists to follow later changes.
+  useEffect(() => {
+    applyPreference(preference);
+  }, [preference]);
+
+  const setPreference = useCallback((next: ThemePreference) => {
+    // Cross-fade the swap. The attribute is transient and the transition it
+    // enables is disabled outright under prefers-reduced-motion in styles.css,
+    // so there is one place to look for whether the UI animates.
+    const root = document.documentElement;
+    root.setAttribute(THEME_CHANGING_ATTRIBUTE, "");
+    window.setTimeout(() => root.removeAttribute(THEME_CHANGING_ATTRIBUTE), THEME_TRANSITION_MS);
+    setPreferenceState(next);
+    storePreference(next);
+  }, []);
+
+  return {
+    preference,
+    resolvedTheme: preference === "system" ? systemTheme : preference,
+    setPreference,
+  };
+}
diff --git a/ui/src/useCopyToClipboard.ts b/ui/src/useCopyToClipboard.ts
new file mode 100644
index 00000000..cd17ae24
--- /dev/null
+++ b/ui/src/useCopyToClipboard.ts
@@ -0,0 +1,40 @@
+import { useEffect, useRef, useState } from "react";
+
+/** Copy feedback: idle -> copied/failed -> (after the reset delay) idle. */
+export type CopyState = "idle" | "copied" | "failed";
+
+const COPY_RESET_DELAY_MS = 1600;
+
+/**
+ * Clipboard write with self-resetting feedback state — the one owner of the
+ * write/flip/reset-timer/unmount-cleanup dance, shared by every copy
+ * affordance (SQL footer, version chips) so their timing never drifts apart.
+ */
+export function useCopyToClipboard(): {
+  copyState: CopyState;
+  copyText: (text: string) => Promise<void>;
+} {
+  const [copyState, setCopyState] = useState<CopyState>("idle");
+  const resetTimerRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (resetTimerRef.current !== null) window.clearTimeout(resetTimerRef.current);
+    };
+  }, []);
+
+  async function copyText(text: string): Promise<void> {
+    let nextState: CopyState;
+    try {
+      await navigator.clipboard.writeText(text);
+      nextState = "copied";
+    } catch {
+      nextState = "failed";
+    }
+    setCopyState(nextState);
+    if (resetTimerRef.current !== null) window.clearTimeout(resetTimerRef.current);
+    resetTimerRef.current = window.setTimeout(() => setCopyState("idle"), COPY_RESET_DELAY_MS);
+  }
+
+  return { copyState, copyText };
+}
diff --git a/ui/src/useNowTick.ts b/ui/src/useNowTick.ts
new file mode 100644
index 00000000..407bc96c
--- /dev/null
+++ b/ui/src/useNowTick.ts
@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+/**
+ * Wall-clock milliseconds, refreshed on an interval. `null` stops the clock —
+ * a finished run needs no ticking, so nothing re-renders once the run's last
+ * task has ended.
+ */
+export function useNowTick(intervalMs: number | null): number {
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  useEffect(() => {
+    if (intervalMs === null) return;
+    setNowMs(Date.now());
+    const timer = window.setInterval(() => setNowMs(Date.now()), intervalMs);
+    return () => window.clearInterval(timer);
+  }, [intervalMs]);
+  return nowMs;
+}
diff --git a/ui/src/usePrefersReducedMotion.ts b/ui/src/usePrefersReducedMotion.ts
new file mode 100644
index 00000000..6b14a0d0
--- /dev/null
+++ b/ui/src/usePrefersReducedMotion.ts
@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+
+function matchesReducedMotion(): boolean {
+  return typeof window.matchMedia === "function" && window.matchMedia(REDUCED_MOTION_QUERY).matches;
+}
+
+/**
+ * Whether the reader has asked the system for reduced motion. The stylesheet
+ * already honours it for the spinner and hover transitions; anything that
+ * MOVES on its own (the replay playhead) has to ask in JS and simply not run.
+ */
+export function usePrefersReducedMotion(): boolean {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(matchesReducedMotion);
+  useEffect(() => {
+    if (typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia(REDUCED_MOTION_QUERY);
+    const handleChange = () => setPrefersReducedMotion(query.matches);
+    handleChange();
+    query.addEventListener("change", handleChange);
+    return () => query.removeEventListener("change", handleChange);
+  }, []);
+  return prefersReducedMotion;
+}
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
new file mode 100644
index 00000000..f0b40341
--- /dev/null
+++ b/ui/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src", "vite.config.ts"]
+}
diff --git a/ui/vite.config.ts b/ui/vite.config.ts
new file mode 100644
index 00000000..eaf6a9e1
--- /dev/null
+++ b/ui/vite.config.ts
@@ -0,0 +1,14 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+// Dev-only proxy: `hflow ui` binds the JSON API on 127.0.0.1:4356 by default.
+// `preview` gets the same one so the built bundle can be exercised against a
+// running API — the only way to see the pre-paint theme script do its job,
+// since dev injects the stylesheet from JS.
+const apiProxy = { "/api": "http://127.0.0.1:4356" };
+
+export default defineConfig({
+  plugins: [react()],
+  server: { proxy: apiProxy },
+  preview: { proxy: apiProxy },
+});