diff --git a/docs/superpowers/plans/2026-09-09-perch-hub.md b/docs/superpowers/plans/2026-09-09-perch-hub.md
new file mode 100644
index 00000000..4c85dc46
--- /dev/null
+++ b/docs/superpowers/plans/2026-09-09-perch-hub.md
@@ -0,0 +1,2072 @@
+# Perch Hub Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Bring back Perch Hub as a core, gateway-served page that lists every live bot session and owns the conversation, then delete the bot board's session drawer so there is one chat surface.
+
+**Architecture:** A full HTML document served from inside the dashboard router (so it inherits `dashboardAuth`, CSRF, Serve and the front door) rather than a dashboard panel (whose shell is what makes the current surface cramped on a phone). It adds **no API**: `GET /dashboard/perch-api/roost` already aggregates every bot and session in one pass, and the `/dashboard/perch-api/interactive/*` routes already carry a whole conversation. Ships in two phases so a working chat surface exists at every commit.
+
+**Tech Stack:** Node 22 ESM, Express, server-rendered template strings with an emitted client script (the pattern `dashboard/panels/bot-board/` uses), `node:test`, Chrome DevTools Protocol for render assertions.
+
+**Spec:** `docs/superpowers/specs/2026-09-09-perch-hub-design.md`
+
+## Global Constraints
+
+- **Never `innerHTML`. `textContent` and `createElement` only.** Every render path here puts bot names, model output and ask-card text into the DOM. `crow_csrf` is deliberately **not** HttpOnly (`shared/csrf.js:11`) so a script injection on this page is a CSRF-token exfil on a fully authenticated surface. `tests/perch-hub-client.test.js` asserts the emitted script contains no `innerHTML`.
+
+- **Node 22.** Run tests with the v22 binary: `/home/kh0pp/.nvm/versions/node/v22.23.1/bin/node`. Node 20 on `PATH` cannot load `better-sqlite3` (ABI mismatch).
+- **In a worktree, symlink deps first:** `ln -sfn ~/crow/node_modules node_modules`. Remove the symlink before `git add -A`.
+- **Every client script lives inside a template literal.** A bare backtick or `${` in a comment or string inside `perchHubJs()` breaks the module at import. Verify with a parse test in every task that touches it.
+- **No Claude attribution** on any commit or PR.
+- **i18n:** every user-visible string goes through `t(key, lang)` server-side or `tJs(key, lang)` inside the client script, with **both `en` and `es`** in `servers/gateway/dashboard/shared/i18n.js`. `tests/i18n-global-parity.test.js` fails if `es` is missing.
+- **The SSE stream is live-only and carries no backlog.** Attach before posting anything. The engine replays session state onto every new subscriber; that replay is the only proof the subscription is live.
+- **`state.turnInFlight` is false both in the pre-post replay and at the end of a turn.** It only counts as an ending once it has been seen true.
+- **`plan_state.state` is an object**, never a string. Format it; never append it raw.
+- **Mobile rules, non-negotiable:** `100dvh` after a `100vh` fallback, never bare `100vh`; the composer is `position:sticky; bottom:0` with its own background; no unlabelled control; full-bleed width on a phone.
+- **Never run `git checkout <branch>` in `~/crow`.** It is the live gateway checkout and parking it off `main` silently disables fleet auto-update. Use the worktree.
+
+---
+
+## File Structure
+
+**Created**
+
+| File | Responsibility |
+|---|---|
+| `servers/gateway/dashboard/perch-hub/css.js` | The Perch stylesheet, ported from the deleted bundle. Palette + layout only. |
+| `servers/gateway/dashboard/perch-hub/html.js` | The full HTML document: head, list view shell, chat view shell. Static; hydrated client-side. |
+| `servers/gateway/dashboard/perch-hub/client.js` | Emitted client script: hash router, list render, chat render, SSE, composer, controls. |
+| `servers/gateway/routes/perch-hub.js` | Express router. `GET /perch` (the page) mounted under `/dashboard`. |
+| `tests/perch-hub-page.test.js` | Route + document + markup tests. |
+| `tests/perch-hub-client.test.js` | Client-script behaviour: hash routing, event handling, formatters. |
+| `tests/perch-hub-render.test.js` | CDP render assertions at phone and desktop widths. |
+
+**Modified**
+
+| File | Change |
+|---|---|
+| `servers/gateway/dashboard/index.js` | Mount the hub router; add the top-level `/perch` redirect (Task 1). |
+| `servers/gateway/dashboard/shared/i18n.js` | New `perch.*` and `nav.perch` keys, `en` + `es` (Tasks 1, 3, 4, 5, 7). |
+| `tests/i18n-global-parity.test.js` | `perch.title` and `nav.perch` into `IDENTICAL_OK` — product names, identical in both languages (Tasks 1, 7). |
+| `servers/gateway/dashboard/shared/layout.js` | Hard-coded nav link, `class="nav-item" data-turbo="false"` (Task 7). **Not** a nav-registry entry — see Task 7's reasoning. |
+| `servers/gateway/dashboard/panels/bot-board/client.js` | All six hand-off call sites navigate to the hub (Task 7); drop the `birdDrawerJs` import and splice (Task 8). |
+| `tests/roost-strip-ui.test.js` | Rewrite lines 198, 263 and 265, which pin pre-hub behaviour (Task 7). |
+| `servers/gateway/dashboard/panels/bot-board/css.js` | Drop the `birdDrawerCss` import (line 8) and its interpolation (line 65) (Task 8). |
+| `servers/gateway/dashboard/panels/bot-board/html.js` | Remove `birdDrawerMarkup` (288) and **both** call sites, 606 and 769 (Task 8). |
+| `tests/board-i18n-literals.test.js` | Drop the drawer import, bindings, `DRAWER_JS_KEYS`, `DRAWER_SSR_KEYS` and the two groups that consume them (Task 8). |
+
+**Deleted (Task 8)**
+
+| File | Why |
+|---|---|
+| `servers/gateway/dashboard/panels/bot-board/drawer.js` | The hub is the chat surface. |
+| `tests/bird-drawer-controls.test.js` | Tests a deleted module. |
+| `tests/bird-drawer-core.test.js` | Tests a deleted module. |
+
+### Deliberate divergence from the spec
+
+The spec says the ported CSS should share crow's `--crow-*` tokens. **It does not.** The original `PERCH_CSS` carries its own palette (`--sky`, `--card`, `--ink`, `--teal`, `--wire`, `--alive`, `--attn`, `--line`) with its own `prefers-color-scheme` block, and that palette **is** the look the operator asked to get back. Mapping it onto `--crow-*` would change the thing being restored. The page therefore defines its own variables and honours the OS dark preference. Recorded here so a reviewer does not treat it as an oversight.
+
+**Unattached bots are filtered OUT of the list, not listed-and-disabled.** The spec's error table says list them with a link to Bot Builder. Decided against on 2026-09-09: the hub is a session surface, and a bot that cannot hold a session is noise there. Attaching one is Bot Builder's job. `listRows` drops them and Task 2 tests that it does.
+
+---
+
+## Task 1: The route, the document, and the Perch stylesheet
+
+**Files:**
+- Create: `servers/gateway/dashboard/perch-hub/css.js`
+- Create: `servers/gateway/dashboard/perch-hub/html.js`
+- Create: `servers/gateway/routes/perch-hub.js`
+- Modify: `servers/gateway/dashboard/index.js`
+- Modify: `servers/gateway/dashboard/shared/i18n.js`
+- Test: `tests/perch-hub-page.test.js`
+
+**Interfaces:**
+- Produces: `perchHubCss(): string` (bare CSS, no `<style>` tag); `perchHubDocument(lang: string): string` (a complete `<!DOCTYPE html>` document); `default function perchHubRouter(dashboardAuth): Router`.
+- Consumes: `t(key, lang)` from `../shared/i18n.js`.
+
+**The browser preserves the fragment across a 302**, so `/perch#<sid>` lands on `/dashboard/perch#<sid>` with no server-side handling. The short link works for deep links for free.
+
+**`/perch` is tailnet-only.** `rejectFunneledMiddleware` (`servers/gateway/funnel.js:22`) 403s it over Funnel like every other non-public path. That is correct and worth knowing before someone reports the short link "broken" from outside the tailnet.
+
+**Why the URL is `/dashboard/perch` and not `/perch`.** `dashboardAuth` is applied as `router.use("/dashboard", dashboardAuth)` in `dashboard/index.js:614`. A bare top-level `/perch` inherits none of that chain — not the auth, not CSRF, not the Funnel rejection. The page ships at `/dashboard/perch`; `/perch` is a 302 to it so the short link still works. `renderLogin()` in `shared/layout.js:607` is the precedent for a full document served from this tree.
+
+- [ ] **Step 1: Write the failing test**
+
+Create `tests/perch-hub-page.test.js`:
+
+```js
+// The hub is a full document, not a dashboard panel: the panel shell is a
+// large part of what made the drawer cramped on a phone. It still lives under
+// /dashboard so it inherits dashboardAuth, CSRF and the Funnel rejection —
+// dashboard/index.js applies those with router.use("/dashboard", ...), so a
+// bare top-level /perch would inherit none of them.
+import { test } from "node:test";
+import assert from "node:assert/strict";
+
+test("the hub renders a complete HTML document with a mobile viewport", async () => {
+  const { perchHubDocument } = await import("../servers/gateway/dashboard/perch-hub/html.js");
+  const html = perchHubDocument("en");
+  assert.ok(html.startsWith("<!DOCTYPE html>"), "a document, not a fragment");
+  assert.ok(html.includes('name="viewport"'), "without this a phone renders it at desktop width");
+  assert.ok(html.includes("width=device-width"));
+  assert.ok(/<html lang="en"/.test(html));
+});
+
+test("the document carries both view shells and the hub stylesheet", async () => {
+  const { perchHubDocument } = await import("../servers/gateway/dashboard/perch-hub/html.js");
+  const html = perchHubDocument("en");
+  assert.ok(html.includes('id="perch-list"'), "the session list view");
+  assert.ok(html.includes('id="perch-chat"'), "the chat view");
+  assert.ok(html.includes("<style>"), "styles are inlined — no extra request on a phone");
+});
+
+test("the stylesheet keeps Perch's own palette and honours OS dark mode", async () => {
+  const { perchHubCss } = await import("../servers/gateway/dashboard/perch-hub/css.js");
+  const css = perchHubCss();
+  for (const v of ["--sky", "--card", "--ink", "--dim", "--teal", "--line", "--alive", "--attn"]) {
+    assert.ok(css.includes(v + ":"), `${v} is part of the look being restored`);
+  }
+  assert.ok(css.includes("@media (prefers-color-scheme:dark)"));
+  assert.ok(!css.includes("<style>"), "perchHubCss returns bare CSS; html.js wraps it");
+});
+
+test("GET /perch redirects to the authed page rather than serving it unauthed", async () => {
+  const { default: perchHubRouter } = await import("../servers/gateway/routes/perch-hub.js");
+  const { default: express } = await import("express");
+  const app = express();
+  // Mounted the way dashboard/index.js mounts it, with auth as a pass-through
+  // so this test exercises routing rather than the auth module.
+  app.use("/dashboard", perchHubRouter((req, res, next) => next()));
+  // The redirect is asserted against the REAL dashboard router in the
+  // integration case below, not re-declared here — a test that defines the
+  // route it then asserts would pass even if index.js never gained it.
+  app.get("/perch", (req, res) => res.redirect(302, "/dashboard/perch"));
+  const srv = await new Promise((r) => { const s = app.listen(0, "127.0.0.1", () => r(s)); });
+  try {
+    const base = "http://127.0.0.1:" + srv.address().port;
+    const red = await fetch(base + "/perch", { redirect: "manual" });
+    assert.equal(red.status, 302);
+    assert.equal(red.headers.get("location"), "/dashboard/perch");
+    const page = await fetch(base + "/dashboard/perch");
+    assert.equal(page.status, 200);
+    assert.ok((await page.text()).startsWith("<!DOCTYPE html>"));
+  } finally { srv.close(); }
+});
+```
+
+- [ ] **Step 2: Run it to verify it fails**
+
+Run: `/home/kh0pp/.nvm/versions/node/v22.23.1/bin/node --test tests/perch-hub-page.test.js`
+Expected: FAIL, `Cannot find module .../perch-hub/html.js`.
+
+- [ ] **Step 3: Port the stylesheet**
+
+Create `servers/gateway/dashboard/perch-hub/css.js` exporting `perchHubCss()`.
+
+The ported block is 44 lines of CSS (221-264; **line 265 is the template literal's closing `` `; ``** and including it produces a file that will not parse) that must not be retyped — transcription errors in a palette are invisible until someone notices the wrong teal. Generate the file mechanically:
+
+```bash
+mkdir -p servers/gateway/dashboard/perch-hub
+{
+  printf '%s\n' '/**'
+  printf '%s\n' ' * The Perch stylesheet, ported from the deleted perch-hub bundle'
+  printf '%s\n' ' * (42f39160^:bundles/perch-hub/payload/hub/server.mjs, PERCH_CSS).'
+  printf '%s\n' ' *'
+  printf '%s\n' ' * It keeps Perch OWN palette rather than crow --crow-* tokens. That'
+  printf '%s\n' ' * palette is the look this page exists to restore; mapping it onto the'
+  printf '%s\n' ' * dashboard tokens would change the thing being brought back.'
+  printf '%s\n' ' */'
+  printf '%s\n' 'export function perchHubCss() {'
+  printf '%s\n' '  return `'
+  git show 42f39160^:bundles/perch-hub/payload/hub/server.mjs | sed -n '221,264p'
+  printf '%s\n' '`;'
+  printf '%s\n' '}'
+} > servers/gateway/dashboard/perch-hub/css.js
+```
+
+Then verify the port before adding anything:
+
+```bash
+/home/kh0pp/.nvm/versions/node/v22.23.1/bin/node -e "
+import('./servers/gateway/dashboard/perch-hub/css.js').then(m => {
+  const css = m.perchHubCss();
+  const want = ['--sky','--card','--ink','--dim','--teal','--teal-soft','--wire','--alive','--attn','--line'];
+  const missing = want.filter(v => !css.includes(v + ':'));
+  console.log(missing.length ? 'MISSING ' + missing.join(',') : 'palette complete');
+  console.log('dark block:', css.includes('@media (prefers-color-scheme:dark)'));
+});" --input-type=module
+```
+
+Expected: `palette complete` and `dark block: true`. Only then append the hub layout below to the template literal, immediately before the closing backtick.
+
+The hub layout to append:
+
+```js
+/* --- hub layout ------------------------------------------------------- */
+/* Two views, one at a time on a phone, side by side on a wide screen. */
+#perch-list,#perch-chat{display:none}
+body[data-view="list"] #perch-list{display:block}
+body[data-view="chat"] #perch-chat{display:flex;flex-direction:column}
+/* 100vh is the LARGE viewport on mobile: it excludes the URL bar and the
+   bottom nav, so anything in the last strip sits behind the browser chrome
+   where scrolling cannot reach it. dvh tracks what is actually visible. */
+#perch-chat{height:100vh;height:100dvh}
+#perch-transcript{flex:1;overflow:auto;min-height:0;display:grid;gap:9px;padding:12px 0}
+/* Send must be reachable at ANY scroll position, not only at the bottom of a
+   long transcript. That was the drawer's defining mobile failure. */
+#perch-composer{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--line);padding:10px 0;display:grid;gap:8px}
+#perch-composer .send-row{display:flex;gap:8px}
+#perch-composer textarea{min-height:72px}
+#perch-back{align-self:flex-start}
+@media (min-width:900px){
+  body{max-width:1100px}
+  body[data-view="chat"] #perch-list{display:block}
+  .hub-split{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}
+  #perch-back{display:none}
+}
+```
+
+- [ ] **Step 4: Read engine state when the page is served**
+
+`GET /roost` cannot report whether the pi engine is installed — only `POST /bots/<id>/interactive` 409s with `engine_required` (`perch-interactive-api.js:280`). Without a check the list looks normal and the first tap fails with a raw error.
+
+Read it once, server-side, and render the banner up front. `engineStatus()` is a leaf module of cheap synchronous fs stats (`servers/gateway/bot-engine-status.js:84`), so this costs nothing. **The document and router in the next step already carry this** — `perchHubDocument(lang, engine = { state: "ready" })` takes the second parameter with a safe default, so every other call site in this plan stays one-argument and none of them throws on `engine.state`. Write the test now:
+
+```js
+test("an absent bot engine is stated up front, not discovered on the first tap", async () => {
+  const { perchHubDocument } = await import("../servers/gateway/dashboard/perch-hub/html.js");
+  const absent = perchHubDocument("en", { state: "absent" });
+  assert.ok(absent.includes("/dashboard/extensions"), "with a way to fix it");
+  const ready = perchHubDocument("en", { state: "ready" });
+  assert.ok(!ready.includes("perch-engine-banner"), "no banner when the engine is fine");
+  // engineStatus has FOUR states. Only "absent" means "go install it" —
+  // sending a mid-install or breaker-open operator to Extensions is a dead end.
+  for (const state of ["installing", "unhealthy"]) {
+    const html = perchHubDocument("en", { state });
+    assert.ok(html.includes("perch-engine-banner"), state + " still warrants a banner");
+    assert.ok(!html.includes("/dashboard/extensions"), state + " must not say 'install it'");
+  }
+});
+```
+
+```js
+  "perch.engineAbsent": { en: "The bot engine is not installed.", es: "El motor de bots no está instalado." },
+  "perch.engineInstall": { en: "Install it", es: "Instalarlo" },
+  "perch.engineInstalling": { en: "The bot engine is still installing.", es: "El motor de bots aún se está instalando." },
+  "perch.engineUnhealthy": { en: "The bot engine is not responding.", es: "El motor de bots no responde." },
+```
+
+- [ ] **Step 5: Write the document and the router**
+
+Create `servers/gateway/dashboard/perch-hub/html.js`:
+
+```js
+import { t } from "../shared/i18n.js";
+import { escapeHtml } from "../shared/components.js";
+import { perchHubCss } from "./css.js";
+import { perchHubJs } from "./client.js";
+
+/** engineStatus() returns installing | absent | unhealthy | ready
+ *  (bot-engine-status.js:84-101). Only "absent" means "not installed" — telling
+ *  an operator whose engine is mid-install, or whose breaker is open, to go
+ *  install it sends them somewhere that cannot help. */
+function engineBanner(engine, lang) {
+  const state = (engine && engine.state) || "ready";
+  if (state === "ready") return "";
+  if (state === "absent") {
+    return `<div class="empty" id="perch-engine-banner">${escapeHtml(t("perch.engineAbsent", lang))} ` +
+      `<a href="/dashboard/extensions">${escapeHtml(t("perch.engineInstall", lang))}</a></div>`;
+  }
+  const key = state === "installing" ? "perch.engineInstalling" : "perch.engineUnhealthy";
+  return `<div class="empty" id="perch-engine-banner">${escapeHtml(t(key, lang))}</div>`;
+}
+
+/** The whole page. Static shell only — every list row and transcript line is
+ *  rendered client-side, the same split birdDrawerMarkup() uses. */
+export function perchHubDocument(lang = "en", engine = { state: "ready" }) {
+  return `<!DOCTYPE html>
+<html lang="${escapeHtml(lang)}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>${escapeHtml(t("perch.title", lang))}</title>
+<style>${perchHubCss()}</style>
+</head>
+<body data-view="list">
+${engineBanner(engine, lang)}
+<header><div class="brand">Perch<small>${escapeHtml(t("perch.subtitle", lang))}</small></div>
+<nav class="machines"><a href="/dashboard/bot-board">${escapeHtml(t("perch.navBoard", lang))}</a></nav></header>
+<div class="hub-split">
+  <div id="perch-list">
+    <h2>${escapeHtml(t("perch.sessionsHeading", lang))}</h2>
+    <div id="perch-list-body"><div class="empty">${escapeHtml(t("perch.loading", lang))}</div></div>
+  </div>
+  <div id="perch-chat">
+    <button type="button" id="perch-back" class="quiet">${escapeHtml(t("perch.back", lang))}</button>
+    <div class="perch-head"><div><div class="title" id="perch-bot-name"></div>
+      <div class="meta" id="perch-session-meta"></div></div>
+      <div class="state" id="perch-state"></div></div>
+    <div id="perch-transcript"></div>
+    <div id="perch-ask"></div>
+    <div id="perch-composer">
+      <textarea id="perch-input" placeholder="${escapeHtml(t("perch.composerPlaceholder", lang))}"></textarea>
+      <div class="send-row">
+        <button type="button" class="primary" id="perch-send">${escapeHtml(t("perch.send", lang))}</button>
+        <button type="button" id="perch-abort" style="display:none">${escapeHtml(t("perch.abort", lang))}</button>
+      </div>
+    </div>
+  </div>
+</div>
+<script>${perchHubJs(lang)}</script>
+</body></html>`;
+}
+```
+
+Create `servers/gateway/routes/perch-hub.js`:
+
+```js
+import { Router } from "express";
+import { perchHubDocument } from "../dashboard/perch-hub/html.js";
+import { SUPPORTED_LANGS } from "../dashboard/shared/i18n.js";
+import { parseCookies } from "../dashboard/auth.js";
+import { engineStatus } from "../bot-engine-status.js";
+
+/** Mounted at "/dashboard" by dashboard/index.js, so this serves
+ *  /dashboard/perch and inherits that mount's auth + CSRF chain. */
+export default function perchHubRouter(dashboardAuth) {
+  const router = Router();
+  // Belt and braces, deliberately. dashboard/index.js:614 already applies
+  // dashboardAuth to the whole /dashboard mount BEFORE this router is added at
+  // ~713, so this is redundant TODAY. It is kept because perchApiRouter does
+  // the same (routes/perch-interactive-api.js:628-633: "installs dashboardAuth
+  // on its own prefix so it is closed wherever it is mounted") — the router
+  // stays safe if it is ever re-mounted somewhere else. dashboardAuth is
+  // idempotent, so running twice costs a session lookup and nothing else.
+  router.use("/perch", dashboardAuth);
+  router.get("/perch", (req, res) => {
+    const cookies = parseCookies(req);
+    const lang = SUPPORTED_LANGS.includes(cookies.crow_lang) ? cookies.crow_lang : "en";
+    // engineStatus() is a LEAF module of synchronous fs stats
+    // (bot-engine-status.js:84) — safe and cheap from a route. /roost cannot
+    // report engine state, so without this the list looks normal and the first
+    // tap fails with a raw error.
+    res.type("html").send(perchHubDocument(lang, engineStatus()));
+  });
+  return router;
+}
+```
+
+In `servers/gateway/dashboard/index.js`, beside the `router.use("/dashboard", bundlesRouter);` line (~713), add:
+
+```js
+  router.use("/dashboard", perchHubRouter(dashboardAuth));
+  // Short link. Outside the /dashboard mount, so it carries no auth — it is a
+  // redirect with no content, and the destination is fully gated.
+  router.get("/perch", (req, res) => res.redirect(302, "/dashboard/perch"));
+```
+
+with `import perchHubRouter from "../routes/perch-hub.js";` at the top.
+
+Add to `servers/gateway/dashboard/shared/i18n.js` (both languages):
+
+```js
+  "perch.title": { en: "Perch", es: "Perch" },
+  "perch.subtitle": { en: "your bot sessions", es: "tus sesiones de bots" },
+  "perch.navBoard": { en: "Board", es: "Tablero" },
+  "perch.sessionsHeading": { en: "Sessions", es: "Sesiones" },
+  "perch.loading": { en: "Loading sessions…", es: "Cargando sesiones…" },
+  "perch.noSessions": { en: "No live sessions.", es: "No hay sesiones activas." },
+  "perch.waitingOnYou": { en: "waiting on you", es: "esperándote" },
+  "perch.open": { en: "Open", es: "Abrir" },
+  "perch.talk": { en: "Talk", es: "Hablar" },
+  "perch.startFailed": { en: "Could not start a session.", es: "No se pudo iniciar una sesión." },
+  "perch.notAttached": { en: "That bot has no Perch channel attached.", es: "Ese bot no tiene canal Perch." },
+  "perch.engineRequired": { en: "The bot engine is not installed.", es: "El motor de bots no está instalado." },
+  "perch.sendFailed": { en: "The message did not send.", es: "El mensaje no se envió." },
+  "perch.back": { en: "← Sessions", es: "← Sesiones" },
+  "perch.composerPlaceholder": { en: "Message your bot…", es: "Escribe a tu bot…" },
+  "perch.send": { en: "Send", es: "Enviar" },
+  "perch.abort": { en: "Stop", es: "Detener" },
+```
+
+Create a minimal `servers/gateway/dashboard/perch-hub/client.js` so the import resolves; Task 2 fills it in:
+
+```js
+import { tJs } from "../shared/i18n.js";
+
+/** The hub's client script. Emitted INSIDE a template literal — a bare
+ *  backtick or ${ anywhere in here breaks the module at import time.
+ *  tJs escapes \, ', ` and ${, so translations interpolate safely into
+ *  single-quoted client strings. */
+export function perchHubJs(lang = "en") {
+  return `(function(){
+  "use strict";
+  var body=document.body;
+  function setView(v){ body.setAttribute('data-view',v); }
+  setView('list');
+})();`;
+}
+```
+
+- [ ] **Step 6: Run the tests to verify they pass**
+
+Run: `/home/kh0pp/.nvm/versions/node/v22.23.1/bin/node --test tests/perch-hub-page.test.js`
+Expected: PASS, 5 tests (Step 1 wrote four, Step 4 added the engine-banner case). The `100vh`/`100dvh` rule is asserted properly in Task 6 Step 4; the tautological version that short-circuited true has been removed.
+
+- [ ] **Step 7: Verify the client script parses**
+
+Add to `tests/perch-hub-page.test.js`:
+
+```js
+test("the emitted client script is valid JavaScript", async () => {
+  const { perchHubJs } = await import("../servers/gateway/dashboard/perch-hub/client.js");
+  // new Function throws a SyntaxError on malformed source without running it.
+  assert.doesNotThrow(() => new Function(perchHubJs("en")));
+});
+```
+
+Run the file again. Expected: PASS, 6 tests.
+
+- [ ] **Step 8: Check i18n parity**
+
+`tests/i18n-global-parity.test.js:104` fails any key where **`es === en`**, not merely a missing `es`:
+
+```js
+(k) => translations[k].es === translations[k].en && !IDENTICAL_OK.has(k),
+```
+
+`"perch.title": { en: "Perch", es: "Perch" }` trips it — the product name is the same in both languages. Add it to the `IDENTICAL_OK` set at `tests/i18n-global-parity.test.js:30`, with a reason comment matching the existing entries' style:
+
+```js
+  "perch.title", // a product name, identical in both languages
+```
+
+Run: `/home/kh0pp/.nvm/versions/node/v22.23.1/bin/node --test tests/i18n-global-parity.test.js`
+Expected: PASS. A failure here names the offending keys directly.
+
+- [ ] **Step 9: Commit**
+
+```bash
+rm -f node_modules
+git add servers/gateway/dashboard/perch-hub servers/gateway/routes/perch-hub.js \
+        servers/gateway/dashboard/index.js servers/gateway/dashboard/shared/i18n.js \
+        tests/perch-hub-page.test.js
+git commit -m "Perch Hub: the page, the route, and the ported stylesheet
+
+A full HTML document at /dashboard/perch rather than a dashboard panel —
+the panel shell is a large part of what makes the current session surface
+cramped on a phone. It lives under /dashboard so it inherits that mount's
+dashboardAuth, CSRF and Funnel rejection; a bare top-level /perch would
+inherit none of them, so /perch is a 302 to it.
+
+The stylesheet is ported verbatim from the deleted bundle and keeps
+Perch's own palette rather than crow's --crow-* tokens. That palette is
+the look this page exists to restore."
+```
+
+---
+
+## Task 2: The session list
+
+**Files:**
+- Modify: `servers/gateway/dashboard/perch-hub/client.js`
+- Test: `tests/perch-hub-client.test.js`
+
+**Interfaces:**
+- Consumes: `perchHubJs(lang)` from Task 1.
+- Produces: client functions `perchApi(method, path, body)`, `renderList(roost)`, `loadList()`. `renderList` takes the `GET /roost` payload verbatim.
+
+**The feed already exists.** `GET /dashboard/perch-api/roost` returns, in one pass over every bot def plus one `engine.list()`:
+
+```json
+{
+  "birds": [
+    { "id": "r4-assistant", "name": "R4 Assistant", "perch_attached": true,
+      "state": "idle|working|waiting|hibernating|observing",
+      "sessions": [ { "sessionId": "perchlive-ab12", "state": "awake",
+                      "cardId": 49, "pendingUi": false, "control": "run" } ] }
+  ],
+  "occupiedCardIds": [12, 49]
+}
+```
+
+**Casing trap:** `/roost` returns **`cardId`** (camelCase) on each session, while `POST /interactive/<sid>/attach-card` reads **`card_id`** (snake_case, `perch-interactive-api.js:175`). Both are correct as written. Do not "normalise" one into the other.
+
+`occupiedCardIds` is real but **the hub does not use it** — it is the board dispatch picker's concern, not this list's. It is shown here only so the shape is complete; `listRows` ignores it.
+
+- [ ] **Step 1: Write the failing test**
+
+Create `tests/perch-hub-client.test.js`:
+
+```js
+// The client script is a string. These tests extract named functions from it
+// with new Function(...) and exercise them against the real /roost payload
+// shape, so the list logic is covered without a browser.
+import { test } from "node:test";
+import assert from "node:assert/strict";
+
+/** Pull one named function out of the emitted script and make it callable. */
+async function extract(name, extra = "") {
+  const { perchHubJs } = await import("../servers/gateway/dashboard/perch-hub/client.js");
+  const src = perchHubJs("en");
+  const start = src.indexOf("function " + name);
+  assert.ok(start > -1, name + " is not in the emitted script");
+  let depth = 0, end = -1;
+  for (let i = src.indexOf("{", start); i < src.length; i++) {
+    if (src[i] === "{") depth++;
+    else if (src[i] === "}") { depth--; if (!depth) { end = i; break; } }
+  }
+  return new Function(extra + src.slice(start, end + 1) + "; return " + name + ";")();
+}
+
+const ROOST = {
+  birds: [
+    { id: "r4-assistant", name: "R4 Assistant", perch_attached: true, state: "working",
+      sessions: [{ sessionId: "perchlive-aa", state: "awake", cardId: 49, pendingUi: false, control: "run" }] },
+    { id: "asker", name: "Asker", perch_attached: true, state: "waiting",
+      sessions: [{ sessionId: "perchlive-bb", state: "awake", cardId: null, pendingUi: true, control: "run" }] },
+    { id: "idle-bot", name: "Idle Bot", perch_attached: true, state: "idle", sessions: [] },
+    { id: "quiet", name: "Quiet", perch_attached: false, state: "observing", sessions: [] },
+  ],
+  occupiedCardIds: [49],
+};
+
+test("every live session becomes a row, whichever bot it belongs to", async () => {
+  const rowsFor = await extract("listRows");
+  const rows = rowsFor(ROOST);
+  const live = rows.filter((r) => r.sessionId);
+  assert.equal(live.length, 2);
+  assert.deepEqual(live.map((r) => r.sessionId).sort(), ["perchlive-aa", "perchlive-bb"]);
+});
+
+test("a bot with no session still gets a row, so you can start one", async () => {
+  const rowsFor = await extract("listRows");
+  const idle = rowsFor(ROOST).find((r) => r.botId === "idle-bot");
+  assert.ok(idle, "an attached bot with no session must be startable from here");
+  assert.equal(idle.sessionId, null);
+});
+
+test("a bot without perch attached is not offered — the spawn would 403", async () => {
+  const rowsFor = await extract("listRows");
+  assert.ok(!rowsFor(ROOST).some((r) => r.botId === "quiet"));
+});
+
+test("a session waiting on you sorts above a working one", async () => {
+  const rowsFor = await extract("listRows");
+  const rows = rowsFor(ROOST).filter((r) => r.sessionId);
+  assert.equal(rows[0].sessionId, "perchlive-bb", "pendingUi first — it is blocked on you");
+});
+
+test("a stopped session is not a tappable row that dead-ends", async () => {
+  const rowsFor = await extract("listRows");
+  const rows = rowsFor({ birds: [{ id: "b", name: "B", perch_attached: true, state: "idle",
+    sessions: [{ sessionId: "perchlive-dead0000", state: "stopped", cardId: null, pendingUi: false }] }] });
+  assert.equal(rows.length, 1);
+  assert.equal(rows[0].sessionId, null, "the bot stays startable; the dead session does not show");
+});
+
+test("an empty roost is an empty list, not a crash", async () => {
+  const rowsFor = await extract("listRows");
+  assert.deepEqual(rowsFor({ birds: [], occupiedCardIds: [] }), []);
+  assert.deepEqual(rowsFor({}), []);
+  assert.deepEqual(rowsFor(null), []);
+});
+```
+
+- [ ] **Step 2: Run it to verify it fails**
+
+Run: `/home/kh0pp/.nvm/versions/node/v22.23.1/bin/node --test tests/perch-hub-client.test.js`
+Expected: FAIL, "listRows is not in the emitted script".
+
+- [ ] **Step 3: Implement `listRows`, `perchApi` and `loadList`**
+
+In `client.js`, inside the IIFE:
+
+```js
+  /* Tiny DOM helpers used throughout. Defined HERE, in the first task that
+     emits a script, so no later task references something undefined. */
+  function el(id){ return document.getElementById(id); }
+  function clearEl(node){ while(node&&node.firstChild) node.removeChild(node.firstChild); }
+  /* textContent only, never innerHTML — see Global Constraints. */
+  function line(cls,text){ var d=document.createElement('div');
+    if(cls) d.className=cls; d.textContent=text==null?'':String(text); return d; }
+
+  /* The two transcript writers. Defined HERE because the error and
+     empty-transcript paths call them, and those are the FIRST paths a user
+     hits when something goes wrong — a ReferenceError there is invisible to a
+     parse test (new Function binds at call time) and fatal at runtime. */
+  function appendNote(text){
+    var tr=el('perch-transcript'); if(!tr) return;
+    tr.appendChild(line('entry note',text));
+    tr.scrollTop=tr.scrollHeight;
+  }
+  function appendMessage(cls,who,text){
+    var tr=el('perch-transcript'); if(!tr) return;
+    var row=document.createElement('div'); row.className='entry '+cls;
+    row.appendChild(line('who',who));
+    row.appendChild(line('what',text));      /* textContent, never innerHTML */
+    tr.appendChild(row);
+    tr.scrollTop=tr.scrollHeight;
+  }
+
+  var API='/dashboard/perch-api';
+  /* The hub is a STANDALONE document, so it does NOT get shared/layout.js's
+     global fetch/XHR patch (layout.js:401-465) that attaches X-Crow-Csrf for
+     every dashboard page. That is why the board's own perchApi sends no header
+     and this one must. Do not "simplify" by copying the board's version: every
+     POST would 403. */
+  function csrf(){ var m=document.cookie.match(/(?:^|; )crow_csrf=([^;]*)/); return m?decodeURIComponent(m[1]):''; }
+  function perchApi(method,path,body){
+    var opts={method:method,headers:{'X-Crow-Csrf':csrf()}};
+    if(body!==undefined){ opts.headers['Content-Type']='application/json'; opts.body=JSON.stringify(body); }
+    return fetch(API+path,opts).then(function(r){
+      return r.json().catch(function(){return null;}).then(function(j){ return {ok:r.ok,status:r.status,j:j}; });
+    });
+  }
+
+  /* One row per live session, plus one per attached bot with none. A bot with
+     no perch gateway record is omitted: POST /bots/<id>/interactive 403s. */
+  function listRows(roost){
+    var birds=(roost&&roost.birds)||[];
+    var out=[];
+    birds.forEach(function(b){
+      if(!b||!b.perch_attached) return;
+      var ss=b.sessions||[];
+      if(!ss.length){ out.push({botId:b.id,botName:b.name,sessionId:null,state:'idle',cardId:null,pendingUi:false}); return; }
+      var live=ss.filter(function(x){ return x&&x.state!=='stopped'; });
+      if(!live.length){ out.push({botId:b.id,botName:b.name,sessionId:null,state:'idle',cardId:null,pendingUi:false}); return; }
+      live.forEach(function(s){
+        out.push({botId:b.id,botName:b.name,sessionId:s.sessionId,state:s.state,
+                  cardId:s.cardId==null?null:s.cardId,pendingUi:!!s.pendingUi});
+      });
+    });
+    /* Blocked-on-you first: those are the only rows that need you right now. */
+    out.sort(function(a,b){
+      if(!!b.pendingUi!==!!a.pendingUi) return b.pendingUi?1:-1;
+      if(!!b.sessionId!==!!a.sessionId) return b.sessionId?1:-1;
+      return String(a.botName).localeCompare(String(b.botName));
+    });
+    return out;
+  }
+```
+
+**These constants and the two note helpers live HERE, not in Task 3.** The pre-flight scan caught it: `renderList` and `startSession` below reference all nine, and defining them in a later task would ship a `ReferenceError` on first render — invisible to this task's tests, which only extract the pure `listRows`.
+
+```js
+  /* tJs escapes \, ', ` and ${, so these interpolate safely. */
+  var NO_SESSIONS='${tJs("perch.noSessions", lang)}';
+  var WAITING_ON_YOU='${tJs("perch.waitingOnYou", lang)}';
+  var OPEN_LABEL='${tJs("perch.open", lang)}';
+  var TALK_LABEL='${tJs("perch.talk", lang)}';
+  var START_FAILED='${tJs("perch.startFailed", lang)}';
+  var NOT_ATTACHED='${tJs("perch.notAttached", lang)}';
+  var ENGINE_REQUIRED='${tJs("perch.engineRequired", lang)}';
+
+  var pendingNote=null;                 /* survives the loadList that follows a note */
+  function showListNote(text){
+    var body=el('perch-list-body'); clearEl(body); body.appendChild(line('empty',text));
+  }
+  /* renderList() ends with this, so a parked note survives the re-render that
+     would otherwise erase it. */
+  function flushPendingNote(){
+    if(!pendingNote) return;
+    el('perch-list-body').insertBefore(line('empty',pendingNote), el('perch-list-body').firstChild);
+    pendingNote=null;
+  }
+```
+
+`renderList` owns three contracts and every one of them is load-bearing, so it is written out rather than described:
+
+```js
+  var rowIndex={};                    /* sessionId -> row, for a warm openSession */
+
+  function renderList(rows){
+    var body=el('perch-list-body'); if(!body) return;
+    clearEl(body); rowIndex={};
+    if(!rows.length){ body.appendChild(line('empty',NO_SESSIONS)); flushPendingNote(); return; }
+    rows.forEach(function(r){
+      var row=document.createElement('div'); row.className='roost-row';
+      row.appendChild(line('roost-dot',''));
+      var main=document.createElement('div'); main.className='roost-main';
+      main.appendChild(line('roost-cwd',r.botName));
+      main.appendChild(line('roost-when',r.pendingUi?WAITING_ON_YOU:r.state));
+      row.appendChild(main);
+      var b=document.createElement('button');
+      b.type='button'; b.textContent=r.sessionId?OPEN_LABEL:TALK_LABEL;
+      b.onclick=r.sessionId
+        ? function(){ rowIndex[r.sessionId]=r; location.hash=r.sessionId; }
+        : function(){ startSession(r.botId,r.botName); };
+      row.appendChild(b);
+      if(r.sessionId) rowIndex[r.sessionId]=r;
+      body.appendChild(row);
+    });
+    flushPendingNote();               /* a parked note must survive this render */
+  }
+
+  /* A bot with no session: spawn, then let the hash router open it, so history
+     stays correct and the cold-deep-link path is the same code. */
+  function startSession(botId,botName){
+    perchApi('POST','/bots/'+encodeURIComponent(botId)+'/interactive').then(function(r){
+      if(r.status===409){ showListNote(ENGINE_REQUIRED); return; }
+      if(r.status===403){ showListNote(NOT_ATTACHED); return; }
+      if(!r.ok||!r.j||!r.j.sessionId){ showListNote(START_FAILED); return; }
+      rowIndex[r.j.sessionId]={botId:botId,botName:botName,sessionId:r.j.sessionId};
+      location.hash=r.j.sessionId;
+    });
+  }
+```
+
+`showListNote` is called from `startSession`'s three failure paths — round 4 flagged it as defined-but-unused, and these are its callers.
+
+And:
+
+```js
+  var listTimer=null;
+  function loadList(){
+    return perchApi('GET','/roost').then(function(r){
+      if(r.ok&&r.j) renderList(listRows(r.j));
+      else renderList([]);
+    });
+  }
+  /* Poll only while the list is showing. In the chat view the SSE stream is
+     already the live signal, so polling there is pure waste. */
+  function startListPolling(){ stopListPolling(); listTimer=setInterval(loadList,10000); }
+  function stopListPolling(){ if(listTimer){ clearInterval(listTimer); listTimer=null; } }
+  window.addEventListener('focus',function(){ if(body.getAttribute('data-view')==='list') loadList(); });
+```
+
+Add the nine list-facing keys to `shared/i18n.js` in this task (both languages) — `perch.noSessions`, `perch.waitingOnYou`, `perch.open`, `perch.talk`, `perch.startFailed`, `perch.notAttached`, `perch.engineRequired`, `perch.sendFailed`, and keep `perch.sessionGone` for Task 3.
+
+- [ ] **Step 4: Run the tests to verify they pass**
+
+Run: `/home/kh0pp/.nvm/versions/node/v22.23.1/bin/node --test tests/perch-hub-client.test.js tests/perch-hub-page.test.js tests/i18n-global-parity.test.js`
+Expected: PASS, all tests including the parse test.
+
+- [ ] **Step 5: Commit**
+
+```bash
+rm -f node_modules
+git add servers/gateway/dashboard/perch-hub/client.js servers/gateway/dashboard/shared/i18n.js tests/perch-hub-client.test.js
+git commit -m "Perch Hub: the session list
+
+GET /roost already aggregates every bot def, one engine.list() and the
+bot_sessions rows in a single pass — it was built for the roost strip and
+is exactly this list's feed, so the hub adds no API.
+
+One row per live session plus one per attached bot with none, so a
+session can be started from here. Bots without a perch gateway record are
+omitted rather than shown and then 403'd. Rows blocked on you sort first.
+Polling runs only while the list is showing; in the chat view the SSE
+stream is already the live signal."
+```
+
+---
+
+## Task 3: The chat view — routing, stream, transcript, composer
+
+**Files:**
+- Modify: `servers/gateway/dashboard/perch-hub/client.js`
+- Modify: `servers/gateway/dashboard/shared/i18n.js`
+- Test: `tests/perch-hub-client.test.js`
+
+**Interfaces:**
+- Consumes: `setView`, `perchApi`, `listRows`, `loadList`, `startListPolling`, `stopListPolling` (Tasks 1-2).
+- Produces: `parseHash(hash)` → `{sessionId}` or `null`; `openSession(sid)`; `closeSession()`; `messageText(message)`; `planStateText(state)`; `openStream(sid)`; `closeStream()`; `loadHistory(botId, sid)`; `sendable(text)`; `sendPath(sid, inFlight)`; `send()`; `setTurnInFlight(flag)`.
+
+**Why routing, stream and composer are ONE task.** Round-1 review: a commit that ships `openSession` while `openStream`, `loadHistory` and `setTurnInFlight` do not yet exist still *parses* — `new Function` binds references at call time — so a parse test passes while every session open throws `ReferenceError`. That contradicts "a working chat surface exists at every commit". These three only become independently reviewable together.
+
+**Order: stream FIRST, history second.** The stream is live-only with no backlog, so anything emitted between a history fetch and the subscription is lost forever.
+
+**`sessionId` and `threadId` are the same value** for a perch-live session — `perch-interactive.js:74` states the identity, `:337` sets `sessionId: threadId`, `:483` returns both. So `GET /bots/<botId>/sessions/<sid>/transcript` is correct; there is no second id to resolve.
+
+- [ ] **Step 1: Write the failing tests**
+
+Append to `tests/perch-hub-client.test.js`:
+
+```js
+test("only a real engine-minted session id opens a chat", async () => {
+  const parseHash = await extract("parseHash");
+  // The engine mints "perchlive-" + 8 hex (perch-interactive.js:1473). A loose
+  // pattern would let ".." through, and openStream builds a URL from this.
+  assert.deepEqual(parseHash("#perchlive-ab12cd34"), { sessionId: "perchlive-ab12cd34" });
+  assert.deepEqual(parseHash("perchlive-ab12cd34"), { sessionId: "perchlive-ab12cd34" });
+  for (const bad of ["", "#", undefined, "#..", "#../../etc/passwd", "#<script>",
+                     "#perchlive-XYZ", "#perchlive-ab12", "#not a session"]) {
+    assert.equal(parseHash(bad), null, JSON.stringify(bad) + " must not open a chat");
+  }
+});
+
+test("plan_state carries an OBJECT and must never be printed raw", async () => {
+  const planStateText = await extract("planStateText");
+  // The exact frame the engine replays onto EVERY new subscriber.
+  assert.equal(planStateText({ enabled: false, executing: false, todosDone: 0, todosTotal: 0, todos: [] }), "");
+  assert.equal(planStateText({ enabled: true, executing: false, todosDone: 0, todosTotal: 0 }), "plan mode on");
+  assert.equal(planStateText({ enabled: true, executing: false, todosDone: 2, todosTotal: 5 }), "plan mode on (2/5)");
+  assert.equal(planStateText({ enabled: true, executing: true, todosDone: 3, todosTotal: 7 }), "executing the plan (3/7)");
+  assert.equal(planStateText(undefined), "");
+  assert.equal(planStateText("legacy string"), "legacy string");
+});
+
+test("a transcript message's content array is walked, not stringified", async () => {
+  const messageText = await extract("messageText");
+  assert.equal(messageText({ content: "plain" }), "plain");
+  assert.equal(messageText({ content: [{ text: "a" }, { text: "b" }] }), "a\nb");
+  assert.equal(messageText({ content: [{ type: "toolCall", name: "board_get_item" }] }), "[tool: board_get_item]");
+  assert.equal(messageText({ text: "fallback" }), "fallback");
+  assert.equal(messageText({}), "");
+  assert.equal(messageText(null), "");
+});
+
+test("turnInFlight mirrors the engine, and a stopped session is never in flight", async () => {
+  // Round-1 review: an earlier draft gated the false on having first seen true.
+  // That is NOT what the drawer does (drawer.js:829), and it wedges: a turn
+  // that dies before any turnInFlight:true frame leaves the composer stuck on
+  // Steer forever, and every later send 409s with no_turn.
+  const flagFor = await extract("turnFlagFor");
+  assert.equal(flagFor({ state: "awake", turnInFlight: true }), true);
+  assert.equal(flagFor({ state: "awake", turnInFlight: false }), false);
+  assert.equal(flagFor({ state: "stopped", turnInFlight: true }), false);
+  assert.equal(flagFor({}), false);
+});
+
+test("the composer posts a message when idle and steers a running turn", async () => {
+  const sendPath = await extract("sendPath");
+  assert.equal(sendPath("perchlive-aa11bb22", false), "/interactive/perchlive-aa11bb22/message");
+  assert.equal(sendPath("perchlive-aa11bb22", true), "/interactive/perchlive-aa11bb22/steer");
+});
+
+test("an empty or whitespace-only message is not sent", async () => {
+  const sendable = await extract("sendable");
+  assert.equal(sendable(""), false);
+  assert.equal(sendable("   \n "), false);
+  assert.equal(sendable("hello"), true);
+});
+
+test("a dead session stops the retry loop instead of burning five reconnects", async () => {
+  // 404 no_such_session / 410 stopped are terminal. Retrying them five times
+  // then saying "reconnect failed" hides the real answer from the operator.
+  const terminal = await extract("isTerminalStreamStatus");
+  assert.equal(terminal(404), true);
+  assert.equal(terminal(410), true);
+  assert.equal(terminal(401), true);   // logged out — retrying cannot help
+  assert.equal(terminal(500), false);  // a real blip; retry is right
+  assert.equal(terminal(0), false);
+});
+
+test("something actually runs at load — a deep link must not land on an empty list", async () => {
+  const { perchHubJs } = await import("../servers/gateway/dashboard/perch-hub/client.js");
+  const js = perchHubJs("en");
+  // Task 7 navigates with location.href, a FULL load, which fires no
+  // hashchange. A listener alone leaves every hand-off on a stuck list.
+  assert.ok(/if\(parseHash\(location\.hash\)\)\s*applyHash\(\);/.test(js),
+    "a deep-linked session must open on first paint");
+  assert.ok(/else\s*\{\s*startListPolling\(\);\s*loadList\(\);/.test(js),
+    "and a bare /dashboard/perch must load the list rather than sit on the placeholder");
+});
+
+test("every string constant the script references is bound", async () => {
+  const { perchHubJs } = await import("../servers/gateway/dashboard/perch-hub/client.js");
+  const js = perchHubJs("en");
+  // new Function binds references at CALL time, so a parse test cannot catch a
+  // missing constant — it surfaces as a ReferenceError on the error path, which
+  // is the path nobody exercises by hand.
+  for (const name of ["SESSION_GONE", "NO_TRANSCRIPT", "RECONNECTING",
+                      "RECONNECT_FAILED", "ASK_STALE", "STEER_LABEL", "SEND_LABEL"]) {
+    if (!js.includes(name)) continue;               // not every task binds all of them
+    assert.ok(new RegExp("var\\s+" + name + "\\s*=").test(js), name + " is used but never bound");
+  }
+});
+
+test("async continuations are guarded — a fast back button must not cross sessions", async () => {
+  const { perchHubJs } = await import("../servers/gateway/dashboard/perch-hub/client.js");
+  const js = perchHubJs("en");
+  // The guards are load-bearing and were previously pinned only by a commit
+  // message. openSession's /roost fetch, loadHistory, onStreamError's options
+  // fetch, the reconnect timer, answerAsk, and every SSE listener.
+  const guards = (js.match(/current\.sid\s*!==/g) || []).length;
+  assert.ok(guards >= 6, "expected at least 6 identity guards, found " + guards);
+});
+
+test("the emitted script never writes innerHTML", async () => {
+  const { perchHubJs } = await import("../servers/gateway/dashboard/perch-hub/client.js");
+  // crow_csrf is deliberately not HttpOnly, so an injection here exfiltrates it.
+  assert.ok(!perchHubJs("en").includes("innerHTML"));
+});
+```
+
+- [ ] **Step 2: Run them to verify they fail**
+
+Run: `/home/kh0pp/.nvm/versions/node/v22.23.1/bin/node --test tests/perch-hub-client.test.js`
+Expected: FAIL — `parseHash is not in the emitted script`.
+
+- [ ] **Step 3: Implement routing, with a stale-open guard**
+
+```js
+  /* Engine-minted ids only: "perchlive-" + 8 hex (perch-interactive.js:1473).
+     A loose pattern would admit ".." and this value is concatenated into an
+     API path. Encoded at every use site as well, belt and braces. */
+  function parseHash(h){
+    var raw=String(h==null?'':h).replace(/^#/,'');
+    return /^perchlive-[0-9a-f]{8}$/.test(raw)?{sessionId:raw}:null;
+  }
+
+  var current={sid:null};
+
+  function openSession(sid){
+    if(current.sid===sid) return;          /* a re-entered hash is a no-op */
+    closeStream();
+    current.sid=sid;
+    var mySid=sid;                          /* identity guard for every await below */
+    setView('chat');
+    stopListPolling();                      /* SSE is the live signal here */
+    clearEl(el('perch-transcript')); clearEl(el('perch-ask'));
+    var known=rowIndex[sid];
+    if(known){ showHeader(known.botId,known.botName); afterHeader(mySid,known.botId); return; }
+    /* A cold deep link does not know the bot; ask /roost rather than guess. */
+    perchApi('GET','/roost').then(function(r){
+      if(current.sid!==mySid) return;       /* the hash moved on while we waited */
+      var hit=r.ok&&r.j?listRows(r.j).filter(function(x){return x.sessionId===mySid;})[0]:null;
+      if(!hit){ noteAndReturnToList(SESSION_GONE); return; }
+      showHeader(hit.botId,hit.botName); afterHeader(mySid,hit.botId);
+    });
+  }
+
+  /* Stream FIRST, history second: the stream carries no backlog. */
+  function afterHeader(sid,botId){ openStream(sid); loadHistory(botId,sid); }
+
+  function closeSession(){
+    closeStream(); current.sid=null;
+    setView('list'); startListPolling(); loadList();
+  }
+
+  /* A note set before loadList() resolves is wiped by renderList. Park it and
+     let renderList re-append it — otherwise "That session is gone." is never
+     seen, on exactly the dead-deep-link path it exists for. */
+  function noteAndReturnToList(text){ pendingNote=text; location.hash=''; }   /* pendingNote: Task 2 */
+
+  function applyHash(){
+    var hit=parseHash(location.hash);
+    if(hit) openSession(hit.sessionId); else closeSession();
+  }
+  window.addEventListener('hashchange',applyHash);
+
+  /* BOOTSTRAP — the plan shipped without this once and everything looked fine.
+     Task 7 navigates with location.href='/dashboard/perch#<sid>', a FULL page
+     load, and a full load fires no hashchange. Without this line every board
+     hand-off (talk, dispatch, open, answer, the bird glyph, the #bird= deep
+     link) lands on a session list stuck on "Loading sessions…" forever,
+     because nothing kicks the first loadList() either. parseHash being
+     exhaustively unit-tested does not help: it is a pure function and it was
+     green throughout. */
+  if(parseHash(location.hash)) applyHash();
+  else { startListPolling(); loadList(); }
+```
+
+A list row sets `location.hash=row.sessionId`; it never calls `openSession` directly, so history stays correct. `#perch-back` sets `location.hash=''`. `rowIndex` is a `{sessionId: row}` map `renderList` populates.
+
+- [ ] **Step 4: Implement the formatters, the stream and the composer**
+
+```js
+  function planStateText(st){
+    if(!st||typeof st!=='object') return typeof st==='string'?st:'';
+    if(!st.enabled&&!st.executing) return '';
+    var total=Number(st.todosTotal||0), done=Number(st.todosDone||0);
+    /* Interpolated at emit time, NOT bound to a script-level constant: the
+       test extracts this function in isolation, and a free variable would
+       throw ReferenceError before reaching any assertion. tJs escapes quotes,
+       backticks and ${, so this is safe inside a single-quoted literal. */
+    var head=st.executing?'${tJs("perch.planExecuting", lang)}':'${tJs("perch.planOn", lang)}';
+    return total>0?head+' ('+done+'/'+total+')':head;
+  }
+
+  /* NOTE the '\\n' below: this whole script lives inside a template literal,
+     so a single-backslash escape would become a REAL newline and split the string
+     literal across lines. drawer.js:650 writes it the same way. */
+  function messageText(message){
+    var content=message&&message.content;
+    if(typeof content==='string') return content;
+    if(Array.isArray(content)){
+      return content.map(function(b){
+        if(!b) return '';
+        if(typeof b.text==='string') return b.text;
+        if(b.type==='toolCall') return '[tool: '+(b.name||'?')+']';
+        return b.type?'['+b.type+']':'';
+      }).filter(Boolean).join('\\n');
+    }
+    if(typeof (message&&message.text)==='string') return message.text;
+    return '';
+  }
+
+  /* drawer.js:829, verbatim in effect: mirror the engine, and a stopped
+     session is never in flight whatever the frame says. */
+  function turnFlagFor(st){ return (st&&st.state==='stopped')?false:!!(st&&st.turnInFlight); }
+
+  function isTerminalStreamStatus(code){ return code===404||code===410||code===401; }
+```
+
+```js
+  var stream=null;
+
+  function closeStream(){
+    cancelReconnect();                 /* timer only — NOT the retry counter */
+    var es=stream; stream=null;        /* null FIRST: idempotent under a double call
+                                          from openSession + hashchange */
+    if(es){ try{ es.close(); }catch(e){} }
+  }
+
+  function openStream(sid){
+    closeStream();
+    var es=new EventSource(API+'/interactive/'+encodeURIComponent(sid)+'/events');
+    stream=es;
+    es.onopen=function(){ resetBackoff(); };
+
+    var on=function(type,fn){
+      es.addEventListener(type,function(ev){
+        if(current.sid!==sid) return;                 /* identity guard, every listener */
+        var d={}; try{ d=JSON.parse(ev.data); }catch(e){ d={}; }
+        fn(d);
+      });
+    };
+    on('state',function(d){ setTurnInFlight(turnFlagFor(d)); el('perch-state').textContent=d.state||''; });
+    on('text',function(d){ appendMessage('bot','bot',d.text||''); });
+    on('tool',function(d){ if(d.phase==='start') appendNote('['+(d.name||'?')+']'); });
+    on('log',function(d){ if(d.text) appendNote(d.text); });
+    on('reply',function(d){ appendMessage('bot','bot',d.text||''); setTurnInFlight(false); });
+    on('ask_user',function(d){ renderAsk(d); });
+    on('error',function(d){ appendNote(d.text||'error'); });
+    on('plan_state',function(d){ var t=planStateText(d.state); if(t) appendNote(t); });
+    /* No 'attention' listener — see above; it is not a stream event. */
+```
+
+then, inside the same function, the two conditions below, and finally `es.onerror=onStreamError;`.
+
+**Not `attention`, despite the spec listing it.** `attention` is not a stream event: `perch-interactive.js:1243` and `:1360` push it through `pushAttention` into the notification pipeline, and `perch-interactive-api.js:349-351` enumerates the stream as `state | text | tool | ask_user | log | reply | error` plus `plan_state`. An `attention` listener would never fire. The spec is wrong on this point; recorded here rather than silently obeyed. Every listener starts with `if(current.sid!==sid) return;`.
+
+Two stream conditions the drawer's reconnect does not distinguish, and must. **Both live inside `openStream(sid)`** — they reference `es` and `sid` from its scope:
+
+```js
+  /* openAuthedStream emits a NAMED session-expired event before closing when
+     the dashboard session is invalidated (streams/authed-stream.js:50-53).
+     Retrying that five times is five requests from a logged-out browser. */
+  es.addEventListener('session-expired',function(){
+    closeStream();
+    location.href='/dashboard/login';
+  });
+
+  /* A session that was stopped or reaped while we watched answers 404/410 on
+     reconnect. Terminal: say so and go back to the list. */
+  function onStreamError(){
+    closeStream();
+    if(current.sid!==sid) return;
+    perchApi('GET','/interactive/'+encodeURIComponent(sid)+'/options').then(function(r){
+      if(current.sid!==sid) return;
+      if(isTerminalStreamStatus(r.status)){ noteAndReturnToList(SESSION_GONE); return; }
+      scheduleReconnect();                  /* bounded 2s backoff, cap 5 */
+    });
+  }
+```
+
+`closeStream()` must be idempotent: null the handle before closing so a double call from `openSession` + `hashchange` cannot throw.
+
+The three remaining helpers this task uses, written out so nothing is referenced-but-undefined:
+
+```js
+  function showHeader(botId,botName){
+    el('perch-bot-name').textContent=botName||botId;
+    el('perch-session-meta').textContent=current.sid||'';
+  }
+  /* Bounded backoff. TWO separate operations, and conflating them is what made
+     an earlier draft of this dead code: cancelling the TIMER must not reset the
+     COUNTER, because onStreamError calls closeStream() (which cancels) before
+     every scheduleReconnect(), so a combined reset meant retries could never
+     reach 5 and the cap was unreachable. The counter resets only when a stream
+     actually opens. */
+  var retries=0, retryTimer=null;
+  function cancelReconnect(){ if(retryTimer){ clearTimeout(retryTimer); retryTimer=null; } }
+  function resetBackoff(){ retries=0; }            /* called from onopen ONLY */
+  function scheduleReconnect(){
+    if(retries>=5){ appendNote(RECONNECT_FAILED); return; }
+    retries++;
+    appendNote(RECONNECTING);
+    var mySid=current.sid;                          /* no parameter to get wrong */
+    retryTimer=setTimeout(function(){
+      if(current.sid!==mySid) return;               /* navigated away mid-backoff */
+      openStream(mySid);
+    },2000);
+  }
+```
+
+`closeStream()` calls `cancelReconnect()` and **not** `resetBackoff()`. `openStream`'s `onopen` calls `resetBackoff()`. `scheduleReconnect()` takes no argument, so the arity mismatch that made an earlier draft compare a live sid against `undefined` cannot recur.
+
+Pin the cap, since nothing else does:
+
+```js
+/** A function's OWN source, brace-matched. Never a fixed-size window: every
+ *  magic-number slice in earlier drafts of this plan was wrong, and this one
+ *  would straddle the very next function (resetBackoff, whose whole body is
+ *  `retries=0`) and fail against correct code. */
+async function fnSrc(name) {
+  const { perchHubJs } = await import("../servers/gateway/dashboard/perch-hub/client.js");
+  const src = perchHubJs("en");
+  const start = src.indexOf("function " + name);
+  assert.ok(start > -1, name + " is not in the emitted script");
+  let depth = 0, end = -1;
+  for (let i = src.indexOf("{", start); i < src.length; i++) {
+    if (src[i] === "{") depth++;
+    else if (src[i] === "}") { depth--; if (!depth) { end = i; break; } }
+  }
+  return src.slice(start, end + 1);
+}
+
+test("the reconnect cap is actually reachable", async () => {
+  const js = (await import("../servers/gateway/dashboard/perch-hub/client.js")).perchHubJs("en");
+  assert.ok(!(await fnSrc("cancelReconnect")).includes("retries=0"),
+    "cancelling the timer must not reset the counter — closeStream() runs before every schedule");
+  assert.ok(js.includes("function resetBackoff"), "the counter resets on a stream that opened, not on cancel");
+  assert.ok(/scheduleReconnect\(\)/.test(js), "no argument — the arity mismatch that made this dead code");
+});
+```
+
+**The string constants, written out rather than described.** Every round of review has found a defect in a place this plan used prose where code was needed, so here is the block verbatim. It goes near the top of the IIFE, beside the DOM helpers, the way `BD_STATE_TEXT` sits in `drawer.js:126`:
+
+```js
+  /* Interpolated at emit time. tJs escapes quotes, backticks and ${, so these
+     are safe inside single-quoted literals. */
+  var SESSION_GONE='${tJs("perch.sessionGone", lang)}';
+  var SEND_FAILED='${tJs("perch.sendFailed", lang)}';
+  var FILE_QUEUED='${tJs("perch.fileQueued", lang)}';
+  var FILE_FAILED='${tJs("perch.fileFailed", lang)}';
+  var ATTACH_FAILED='${tJs("perch.attachFailed", lang)}';
+  var NO_TRANSCRIPT='${tJs("perch.noTranscript", lang)}';
+  var RECONNECTING='${tJs("perch.reconnecting", lang)}';
+  var RECONNECT_FAILED='${tJs("perch.reconnectFailed", lang)}';
+  var ASK_STALE='${tJs("perch.askStale", lang)}';
+  var STEER_LABEL='${tJs("perch.steer", lang)}';
+  var SEND_LABEL='${tJs("perch.send", lang)}';
+```
+
+`planStateText` is the deliberate exception: its two strings are interpolated inside the function body, because the test extracts that function in isolation and a free variable would throw before the first assertion.
+
+`loadHistory(botId, sid)` — written out because Task 8 deletes the only other record of this mapping:
+
+```js
+  function loadHistory(botId,sid){
+    var mySid=sid;
+    perchApi('GET','/bots/'+encodeURIComponent(botId)+'/sessions/'+encodeURIComponent(sid)+'/transcript')
+      .then(function(r){
+        if(current.sid!==mySid) return;            /* identity guard, as everywhere */
+        var events=(r.ok&&r.j&&r.j.events)||[];
+        if(!events.length){ appendNote(NO_TRANSCRIPT); return; }
+        events.filter(function(e){ return e&&e.type==='message'; }).forEach(function(e){
+          var m=e.message||{};
+          appendMessage(String(m.role||'?')==='user'?'user':'bot', String(m.role||'?'), messageText(m));
+        });
+      });
+  }
+```
+
+The endpoint returns `{events, truncated, omitted}` (`routes/perch.js:334-347`), **not** a message list — the `type === 'message'` filter is required. Add `perch.noTranscript` to i18n.
+
+```js
+  function sendable(text){ return String(text==null?'':text).trim().length>0; }
+  function sendPath(sid,inFlight){
+    return '/interactive/'+encodeURIComponent(sid)+(inFlight?'/steer':'/message');
+  }
+
+  var turnInFlight=false;
+  function setTurnInFlight(flag){
+    turnInFlight=!!flag;
+    el('perch-send').textContent=turnInFlight?STEER_LABEL:SEND_LABEL;
+    el('perch-abort').style.display=turnInFlight?'':'none';
+  }
+
+  function send(){
+    var input=el('perch-input'); if(!input) return;
+    var text=input.value;
+    if(!sendable(text)||!current.sid) return;
+    var mySid=current.sid;
+    appendMessage('user','you',text);      /* echo before the round trip */
+    input.value='';
+    perchApi('POST',sendPath(mySid,turnInFlight),{message:text}).then(function(r){
+      if(current.sid!==mySid) return;
+      if(r.status===409){ setTurnInFlight(true); return; }   /* raced a turn start */
+      if(!r.ok) appendNote((r.j&&r.j.error)||SEND_FAILED);
+    });
+  }
+```
+
+Add to `shared/i18n.js`, and mirror the drawer's existing wording so the two agree while both exist (`i18n.js:1452`):
+
+```js
+  "perch.planOn": { en: "plan mode on", es: "modo de plan activado" },
+  "perch.planExecuting": { en: "executing the plan", es: "ejecutando el plan" },
+  "perch.sessionGone": { en: "That session is gone.", es: "Esa sesión ya no existe." },
+  "perch.steer": { en: "Steer", es: "Guiar" },
+  "perch.noTranscript": { en: "No transcript yet.", es: "Aún no hay transcripción." },
+  "perch.reconnecting": { en: "Reconnecting…", es: "Reconectando…" },
+  "perch.reconnectFailed": { en: "Lost the connection to this session.", es: "Se perdió la conexión con esta sesión." },
+```
+
+`SESSION_GONE` is bound as a script-level constant near the top, the way `BD_STATE_TEXT` is bound in `drawer.js:126`. `perch.planOn` and `perch.planExecuting` are **interpolated directly into `planStateText`**, not bound — see the comment in its body.
+
+- [ ] **Step 5: Run the tests to verify they pass**
+
+Run: `/home/kh0pp/.nvm/versions/node/v22.23.1/bin/node --test tests/perch-hub-client.test.js tests/perch-hub-page.test.js tests/i18n-global-parity.test.js`
+Expected: PASS, every file `# fail 0`.
+
+- [ ] **Step 6: Commit**
+
+```bash
+rm -f node_modules
+git add servers/gateway/dashboard/perch-hub/client.js servers/gateway/dashboard/shared/i18n.js tests/perch-hub-client.test.js
+git commit -m "Perch Hub: the chat view — routing, stream, transcript, composer
+
+Routing, stream and composer ship together because they are not
+independently reviewable: a commit with openSession but no openStream
+still parses, so a parse test passes while every session open throws.
+
+The stream is attached BEFORE history: it is live-only with no backlog,
+so anything emitted in between is lost. Every async continuation carries
+a session-identity guard, or a fast back button leaves a second live
+EventSource on an abandoned session.
+
+turnInFlight mirrors the engine exactly, including the stopped clause —
+gating the false on having seen true wedges the composer on Steer forever
+when a turn dies before its first in-flight frame.
+
+session-expired sends you to the login page instead of five silent
+retries from a logged-out browser, and 404/410 end the retry loop and
+return to the list rather than reporting a reconnect failure."
+```
+
+---
+
+## Task 4: Session controls
+
+**Files:**
+- Modify: `servers/gateway/dashboard/perch-hub/html.js`, `client.js`
+- Test: `tests/perch-hub-client.test.js`, `tests/perch-hub-page.test.js`
+
+**Interfaces:**
+- Produces: `modelOptionText(model)`, `optionsUsable(payload)`.
+
+`GET /interactive/<sid>/options` returns `{models, thinkingLevels}` where every model carries `availability` (`up` | `on_demand` | `unavailable`) and a human `name`.
+
+**Both arrays are `null` for a hibernating session** (`perch-interactive.js:1877` — the engine will not wake a child merely to list). The drawer disables its pickers on that. Turning `null` into an empty list would read as "no models exist".
+
+- [ ] **Step 1: Write the failing test**
+
+```js
+test("a model option shows its human name and says when it is not serving", async () => {
+  const modelOptionText = await extract("modelOptionText");
+  assert.equal(modelOptionText({ provider: "crow-local", id: "qwen3.6-35b-a3b",
+    name: "Qwen3.6 35B A3B", availability: "up" }), "Qwen3.6 35B A3B");
+  assert.equal(modelOptionText({ provider: "p", id: "m", name: "Big Model",
+    availability: "on_demand" }), "Big Model — starts on demand");
+  assert.equal(modelOptionText({ provider: "crow-dsv4", id: "deepseek-v4-flash",
+    name: "DeepSeek-V4-Flash", availability: "unavailable" }), "DeepSeek-V4-Flash — not running");
+  // No name on the entry falls back to provider/id, never to "undefined".
+  assert.equal(modelOptionText({ provider: "p", id: "m", availability: "up" }), "p/m");
+});
+
+test("a hibernating session disables the pickers rather than emptying them", async () => {
+  const optionsUsable = await extract("optionsUsable");
+  assert.equal(optionsUsable({ models: null, thinkingLevels: null }), false);
+  assert.equal(optionsUsable({ models: [], thinkingLevels: [] }), false);
+  assert.equal(optionsUsable({ models: [{ id: "m", provider: "p" }], thinkingLevels: ["off"] }), true);
+  assert.equal(optionsUsable(null), false);
+});
+
+test("every control in the chat header carries a visible label", async () => {
+  const { perchHubDocument } = await import("../servers/gateway/dashboard/perch-hub/html.js");
+  const html = perchHubDocument("en");
+  for (const id of ["perch-model", "perch-thinking", "perch-permission"]) {
+    assert.ok(html.includes(`id="${id}-label"`), `${id} needs a visible label`);
+    assert.ok(new RegExp(`id="${id}"[^>]*aria-labelledby="${id}-label"`).test(html));
+  }
+});
+```
+
+- [ ] **Step 2: Run it to verify it fails**
+
+Run: `/home/kh0pp/.nvm/versions/node/v22.23.1/bin/node --test tests/perch-hub-client.test.js tests/perch-hub-page.test.js`
+Expected: FAIL.
+
+- [ ] **Step 3: Implement**
+
+```js
+  /* "up" is deliberately undecorated: a working choice should read as the
+     plain default. The name is on the payload; the drawer read m.label, which
+     no provider row sets, and every model listed as provider/id for months. */
+  function modelOptionText(m){
+    var text=(m&&m.name)||((m&&m.provider)+'/'+(m&&m.id));
+    if(m&&m.availability==='on_demand') text+=' \\u2014 ${tJs("perch.modelOnDemand", lang)}';
+    else if(m&&m.availability==='unavailable') text+=' \\u2014 ${tJs("perch.modelUnavailable", lang)}';
+    return text;
+  }
+```
+
+```js
+  function optionsUsable(o){
+    return !!(o&&Array.isArray(o.models)&&o.models.length
+              &&Array.isArray(o.thinkingLevels)&&o.thinkingLevels.length);
+  }
+```
+
+When `optionsUsable` is false, clear both selects and set `disabled=true`. Never render an empty enabled dropdown — that is what made the drawer look broken on a hibernating session.
+
+**Add `.field-label` to `css.js`.** It is not in the ported stylesheet, so the labels would otherwise ship unstyled:
+
+```css
+.field-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:10px 0}
+.field{display:flex;flex-direction:column;gap:3px;flex:1 1 150px;min-width:0}
+.field-label{font:11px/1 "JetBrains Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
+```
+
+Add the three labelled selects plus a plan-mode checkbox to the chat header in `html.js`, each with a visible `<span class="field-label" id="...-label">` and `aria-labelledby`.
+
+**The `/control` body shape is exact, and getting it wrong fails silently.** `routes/perch-interactive-api.js:531-540` reads `body.model.{provider,id}`, `body.thinking`, `body.permission_mode` and `body.plan_mode`. **Unknown keys are dropped with no error** — `eng.control(sid, {})` returns 200 and does nothing. Send `{permissionMode:"bypass"}` instead of `{permission_mode:"bypass"}` and the operator gets a success response and an unchanged permission mode, permanently and invisibly. On a security control that is the worst possible failure shape.
+
+```js
+  function controlBody(kind,value){
+    if(kind==='model'){ var i=value.indexOf('/');
+      return {model:{provider:value.slice(0,i),id:value.slice(i+1)}}; }
+    if(kind==='thinking') return {thinking:value};
+    if(kind==='permission') return {permission_mode:value};   /* snake_case */
+    return {plan_mode:!!value};                                /* snake_case */
+  }
+```
+
+```js
+test("control bodies use the exact keys the route reads, not camelCase", async () => {
+  const controlBody = await extract("controlBody");
+  assert.deepEqual(controlBody("model", "crow-local/qwen3.6-35b-a3b"),
+    { model: { provider: "crow-local", id: "qwen3.6-35b-a3b" } });
+  assert.deepEqual(controlBody("thinking", "off"), { thinking: "off" });
+  // The silent-failure guards: the route drops unknown keys and still 200s.
+  assert.deepEqual(controlBody("permission", "bypass"), { permission_mode: "bypass" });
+  assert.deepEqual(controlBody("plan", true), { plan_mode: true });
+});
+```
+
+Wire `change` handlers to `POST /interactive/<sid>/control` with `controlBody(...)`.
+
+**Add `perch.*` keys; do not reuse the `botboard.bd*` ones.** Task 8 deletes the drawer and its key lists, so borrowing them would leave the hub depending on strings scheduled for removal. Add to `shared/i18n.js`:
+
+```js
+  "perch.modelLabel": { en: "Model", es: "Modelo" },
+  "perch.thinkingLabel": { en: "Thinking", es: "Razonamiento" },
+  "perch.permissionLabel": { en: "Permissions", es: "Permisos" },
+  "perch.planModeLabel": { en: "Plan mode", es: "Modo de plan" },
+  "perch.permGuarded": { en: "Guarded", es: "Vigilado" },
+  "perch.permAsk": { en: "Ask", es: "Preguntar" },
+  "perch.permBypass": { en: "Bypass", es: "Omitir" },
+  "perch.modelOnDemand": { en: "starts on demand", es: "se inicia bajo demanda" },
+  "perch.modelUnavailable": { en: "not running", es: "no está en ejecución" },
+```
+
+- [ ] **Step 4: Run the tests to verify they pass**
+
+Run: `/home/kh0pp/.nvm/versions/node/v22.23.1/bin/node --test tests/perch-hub-client.test.js tests/perch-hub-page.test.js tests/i18n-global-parity.test.js`
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+rm -f node_modules
+git add servers/gateway/dashboard/perch-hub tests/perch-hub-client.test.js tests/perch-hub-page.test.js servers/gateway/dashboard/shared/i18n.js
+git commit -m "Perch Hub: model, thinking, permission and plan-mode controls
+
+Every control carries a visible label. Model options show the human name
+the payload has always carried and say when a model is on demand or not
+running; a working model is undecorated."
+```
+
+---
+
+## Task 5: ask_user cards, file attach, and attach-to-card
+
+**Files:**
+- Modify: `servers/gateway/dashboard/perch-hub/html.js`, `client.js`
+- Test: `tests/perch-hub-client.test.js`
+
+**Interfaces:**
+- Produces: `askOptions(card)` → `string[]`; `answerPayloadFor(card, choice)` → the body for `POST /answer`; `renderAsk(card)`; `attachFile(file)`.
+
+**THE REAL CARD SHAPE — round 1 found the first draft had invented one.** `cardFrom()` at `perch-interactive.js:222`:
+
+```js
+{ requestId, method, title, options?: string[], placeholder?, message?, prefill? }
+```
+
+- The discriminator is **`method`**, not `kind`. Values: `select | input | confirm | editor` (`ASK_METHODS`, `perch-interactive.js:195`).
+- **`options` is an array of plain strings**, not `{value,label}` objects. The drawer proves it: `b.textContent=opt; ... bdAnswerAsk({value:opt},opt)` (`drawer.js:762-767`). Treating them as objects yields `{value: undefined}` — every button reads "undefined" and answers with an empty string.
+- **The answer payload is a tri-state**, `perch-interactive.js:1904-1913`:
+
+```js
+if (value && value.cancelled)        payload.cancelled = true;
+else if (card.method === "confirm")  payload.confirmed = !!(value && value.confirmed);
+else                                 payload.value = String(value && value.value != null ? value.value : "");
+```
+
+**`confirm` is the dangerous one.** Permission prompts are `confirm` cards. Posting `{value:"yes"}` for one sets `confirmed: false` — **the hub would silently deny every permission request while looking like it approved it.**
+
+- [ ] **Step 1: Write the failing tests**
+
+```js
+test("ask options are plain strings, exactly as the engine sends them", async () => {
+  const askOptions = await extract("askOptions");
+  // cardFrom() does options.slice() on whatever pi sent — strings.
+  assert.deepEqual(askOptions({ requestId: "r1", method: "select", options: ["yes", "no"] }), ["yes", "no"]);
+  assert.deepEqual(askOptions({ requestId: "r2", method: "input", placeholder: "name" }), []);
+  assert.deepEqual(askOptions({ requestId: "r3", method: "confirm" }), []);
+  assert.deepEqual(askOptions({ method: "select", options: ["a"] }), [], "no requestId is unanswerable");
+  assert.deepEqual(askOptions(null), []);
+});
+
+test("a confirm card answers with confirmed, never value — this one denies permissions if wrong", async () => {
+  const payloadFor = await extract("answerPayloadFor");
+  const card = { requestId: "r9", method: "confirm", title: "Run bash?" };
+  assert.deepEqual(payloadFor(card, { confirm: true }), { requestId: "r9", confirmed: true });
+  assert.deepEqual(payloadFor(card, { confirm: false }), { requestId: "r9", confirmed: false });
+  // The bug being guarded: {value:"yes"} on a confirm card reads as DENY.
+  const wrong = payloadFor(card, { confirm: true });
+  assert.ok(!("value" in wrong), "a confirm card must not carry value");
+});
+
+test("select, input and editor answer with value", async () => {
+  const payloadFor = await extract("answerPayloadFor");
+  assert.deepEqual(payloadFor({ requestId: "r1", method: "select" }, { value: "yes" }),
+    { requestId: "r1", value: "yes" });
+  assert.deepEqual(payloadFor({ requestId: "r2", method: "input" }, { value: "Kevin" }),
+    { requestId: "r2", value: "Kevin" });
+  assert.deepEqual(payloadFor({ requestId: "r3", method: "editor" }, { value: "line\nline" }),
+    { requestId: "r3", value: "line\nline" });
+});
+
+test("cancel is a real answer and outranks the method", async () => {
+  const payloadFor = await extract("answerPayloadFor");
+  // engine.answer checks cancelled FIRST, before the confirm branch.
+  assert.deepEqual(payloadFor({ requestId: "r4", method: "confirm" }, { cancelled: true }),
+    { requestId: "r4", cancelled: true });
+  assert.deepEqual(payloadFor({ requestId: "r5", method: "select" }, { cancelled: true }),
+    { requestId: "r5", cancelled: true });
+});
+
+test("an editor card offers its prefill and an input its placeholder", async () => {
+  const askFields = await extract("askFields");
+  assert.deepEqual(askFields({ requestId: "r1", method: "editor", prefill: "draft" }),
+    { needsText: true, initial: "draft", placeholder: "" });
+  assert.deepEqual(askFields({ requestId: "r2", method: "input", placeholder: "your name" }),
+    { needsText: true, initial: "", placeholder: "your name" });
+  assert.deepEqual(askFields({ requestId: "r3", method: "select", options: ["a"] }),
+    { needsText: false, initial: "", placeholder: "" });
+});
+```
+
+- [ ] **Step 2: Run them to verify they fail**
+
+Run: `/home/kh0pp/.nvm/versions/node/v22.23.1/bin/node --test tests/perch-hub-client.test.js`
+Expected: FAIL — `askOptions is not in the emitted script`.
+
+- [ ] **Step 3: Implement against the real contract**
+
+```js
+  function askOptions(card){
+    if(!card||!card.requestId) return [];
+    return Array.isArray(card.options)?card.options.slice():[];
+  }
+
+  function askFields(card){
+    var m=card&&card.method;
+    return {
+      needsText: m==='input'||m==='editor',
+      initial: (card&&card.prefill!=null)?String(card.prefill):'',
+      placeholder: (card&&card.placeholder!=null)?String(card.placeholder):''
+    };
+  }
+
+  /* Mirrors engine.answer's tri-state (perch-interactive.js:1904). cancelled
+     is checked first there, so it is checked first here. A confirm card MUST
+     answer with confirmed: sending value on one reads as a denial. */
+  function answerPayloadFor(card,choice){
+    var out={requestId:card.requestId};
+    if(choice&&choice.cancelled){ out.cancelled=true; return out; }
+    if(card.method==='confirm'){ out.confirmed=!!(choice&&choice.confirm); return out; }
+    out.value=String(choice&&choice.value!=null?choice.value:'');
+    return out;
+  }
+```
+
+`renderAsk(card)` writes into `#perch-ask`, which sits **above** the sticky composer — an `ask_user` frame blocks the turn until answered, so it must not be scrollable-past inside the transcript. Build with `createElement` + `textContent` only.
+
+- A `confirm` card gets two buttons from `perch.askConfirm` / `perch.askDeny`, posting `{confirm:true}` / `{confirm:false}`.
+- A `select` card gets one button per `askOptions(card)` entry, `textContent` the option string, posting `{value: opt}`.
+- `input` and `editor` get a text control seeded with `askFields().initial` and `placeholder`, plus a submit posting `{value: field.value}` (a `<textarea>` for `editor`, an `<input>` for `input`).
+- Every card gets a Cancel posting `{cancelled:true}`. Without it a card whose options do not fit the situation blocks the turn with no way out.
+
+Answering posts `answerPayloadFor(...)` to `/interactive/<sid>/answer` and clears `#perch-ask`. **Every continuation here carries the same `mySid` guard as the rest of the file** — an answer or an upload that resolves after the operator has moved on must not write into the new session's pane:
+
+```js
+  function answerAsk(card,choice){
+    var mySid=current.sid;
+    return perchApi('POST','/interactive/'+encodeURIComponent(mySid)+'/answer',
+                    answerPayloadFor(card,choice)).then(function(r){
+      if(current.sid!==mySid) return;
+      clearEl(el('perch-ask'));
+      if(r.status===409) appendNote(ASK_STALE);
+    });
+  }
+``` A `409 no_such_request` means the card was already answered or the child died — clear the pane and note it rather than leaving a dead card on screen.
+
+```js
+  function attachFile(file){
+    var mySid=current.sid;
+    var reader=new FileReader();
+    reader.onload=function(){
+      /* result is "data:<mime>;base64,<payload>" — the route wants the payload. */
+      var b64=String(reader.result||'').split(',')[1]||'';
+      perchApi('POST','/interactive/'+encodeURIComponent(mySid)+'/files',
+               {name:file.name,data_b64:b64}).then(function(r){
+        if(current.sid!==mySid) return;
+        appendNote(r.ok?FILE_QUEUED:((r.j&&r.j.error)||FILE_FAILED));
+      });
+    };
+    reader.readAsDataURL(file);        /* 5 MB post-decode cap, route-side */
+  }
+
+  function attachToCard(cardId){
+    var mySid=current.sid;
+    /* snake_case: parseCardId reads body.card_id and 400s on anything else. */
+    return perchApi('POST','/interactive/'+encodeURIComponent(mySid)+'/attach-card',
+                    {card_id:Number(cardId)}).then(function(r){
+      if(current.sid!==mySid) return;
+      if(!r.ok) appendNote((r.j&&r.j.error)||ATTACH_FAILED);
+    });
+  }
+```
+
+File attach posts `{name, data_b64}` to `/interactive/<sid>/files` (5 MB post-decode cap; that route has its own 10mb parser). Attach-to-card posts **`{card_id}`** to `/interactive/<sid>/attach-card`. `parseCardId` (`routes/perch-interactive-api.js:175-179`) reads `body.card_id` and returns `null` for anything else, so `{cardId}` is a flat `400 bad_request`. Assert it:
+
+```js
+test("attach-to-card sends card_id, the key the route actually reads", async () => {
+  const { perchHubJs } = await import("../servers/gateway/dashboard/perch-hub/client.js");
+  const js = perchHubJs("en");
+  const fn = await fnSrc("attachToCard");   // brace-matched, never a magic number
+  assert.ok(fn.includes("card_id"), "parseCardId reads body.card_id; cardId is a 400");
+  assert.ok(!/\bcardId\s*:/.test(fn), "no camelCase key — the route drops it silently");
+});
+```
+
+Add to `shared/i18n.js`:
+
+```js
+  "perch.askConfirm": { en: "Confirm", es: "Confirmar" },
+  "perch.askDeny": { en: "Deny", es: "Denegar" },
+  "perch.askCancel": { en: "Cancel", es: "Cancelar" },
+  "perch.askSubmit": { en: "Answer", es: "Responder" },
+  "perch.askStale": { en: "That question is no longer open.", es: "Esa pregunta ya no está abierta." },
+  "perch.attachFile": { en: "Attach image", es: "Adjuntar imagen" },
+  "perch.fileQueued": { en: "Image attached to the next message.", es: "Imagen adjunta al siguiente mensaje." },
+  "perch.fileFailed": { en: "The image did not upload.", es: "La imagen no se subió." },
+  "perch.attachFailed": { en: "Could not attach to that card.", es: "No se pudo vincular a esa tarjeta." },
+```
+
+- [ ] **Step 4: Run the tests to verify they pass**
+
+Run: `/home/kh0pp/.nvm/versions/node/v22.23.1/bin/node --test tests/perch-hub-client.test.js tests/perch-hub-page.test.js tests/i18n-global-parity.test.js`
+Expected: PASS. **`perch-hub-page.test.js` is in that list deliberately** — it holds the parse test, and this task adds the largest DOM-building block in the plan (four card variants, buttons, textareas, base64), which is where a stray backtick is most likely.
+
+- [ ] **Step 5: MANUAL GATE — verify against a real card, not only the fixtures**
+
+**An executing agent must STOP here and hand back.** This step drives a live bot on the R4 instance; it is a human checkpoint, not an automated command.
+
+The fixtures are only as good as the shape they encode, and round 1 proved that is exactly where this went wrong. Drive a real one:
+
+```bash
+cd ~/r4-tehcy
+python3 scripts/bot_orchestrator.py ask r4-assistant \
+  "Use your ask_user tool to ask me to confirm something trivial." --new --json
+```
+
+The `pendingQuestion` in the result is the live card. Confirm its keys are `requestId`/`method`/`title` and that `options`, if present, is an array of strings. If it disagrees with the tests, the tests are wrong.
+
+- [ ] **Step 6: Commit**
+
+```bash
+rm -f node_modules
+git add servers/gateway/dashboard/perch-hub servers/gateway/dashboard/shared/i18n.js tests/perch-hub-client.test.js
+git commit -m "Perch Hub: ask_user cards, file attach, attach-to-card
+
+Built against the engine's real card shape: the discriminator is method
+(select|input|confirm|editor), options are plain strings, and the answer
+is a tri-state — cancelled, or confirmed for a confirm card, or value.
+
+A confirm card that answers with value reads at the engine as confirmed:
+false, so getting this wrong would have silently DENIED every permission
+prompt while appearing to approve it. Every card also gets a cancel, or
+one whose options do not fit blocks the turn with no way out.
+
+The card renders above the sticky composer rather than in the scrolling
+transcript: an ask_user frame blocks the turn, so it must not be
+scrollable past."
+```
+
+---
+
+## Task 6: Render assertions at phone and desktop width
+
+**Files:**
+- Create: `tests/perch-hub-render.test.js`
+
+**Interfaces:**
+- Consumes: `perchHubDocument(lang)`.
+
+The measurement that caught the drawer's unreachable Send button was reading `getBoundingClientRect()` **with the transcript scrolled to the top**. A screenshot did not catch it. That assertion is the point of this task.
+
+This test needs a Chrome with an open CDP port. Skip cleanly when there is none, so CI without a browser stays green.
+
+- [ ] **Step 1: Write the test**
+
+```js
+// The drawer's defining mobile failure was Send sitting below the viewport at
+// every scroll position except the very bottom. Assert reachability with the
+// transcript scrolled to the TOP, which is where a reader starts. A screenshot
+// did not catch this; getBoundingClientRect did.
+import { test, before, after } from "node:test";
+import assert from "node:assert/strict";
+import http from "node:http";
+
+// The repo's convention is CROW_BROWSER_CDP_PORT (tests/pibot-crow-server-catalog.test.js:38).
+const CDP = process.env.CROW_CDP_URL ||
+  ("http://127.0.0.1:" + (process.env.CROW_BROWSER_CDP_PORT || "9223"));
+// The CDP browser runs in Docker: it cannot reach 127.0.0.1 on the host, and
+// file:// is unreachable entirely. Bind 0.0.0.0 and navigate to the bridge.
+const HOST_FROM_CONTAINER = process.env.CROW_CDP_HOST_IP || "172.17.0.1";
+
+let available = false, server = null, port = 0;
+
+before(async () => {
+  try {
+    const r = await fetch(CDP + "/json/version", { signal: AbortSignal.timeout(2000) });
+    available = r.ok;
+  } catch { available = false; }
+  if (!available) return;
+  const { perchHubDocument } = await import("../servers/gateway/dashboard/perch-hub/html.js");
+  const doc = perchHubDocument("en");
+  server = http.createServer((req, res) => { res.writeHead(200, { "content-type": "text/html" }); res.end(doc); });
+  await new Promise((r) => server.listen(0, "0.0.0.0", r));
+  port = server.address().port;
+});
+
+after(() => { if (server) server.close(); });
+
+/** Open a tab, run one expression, return its value, close the tab. */
+async function evaluate(width, height, expression) {
+  const tab = await (await fetch(CDP + "/json/new?about:blank", { method: "PUT" })).json();
+  const { default: WebSocket } = await import("ws");
+  const ws = new WebSocket(tab.webSocketDebuggerUrl);
+  await new Promise((r, j) => { ws.once("open", r); ws.once("error", j); });
+  let id = 0;
+  const send = (method, params = {}) => new Promise((resolve, reject) => {
+    const mine = ++id;
+    const onMsg = (raw) => {
+      const m = JSON.parse(raw);
+      if (m.id !== mine) return;
+      ws.off("message", onMsg);
+      m.error ? reject(new Error(JSON.stringify(m.error))) : resolve(m.result || {});
+    };
+    ws.on("message", onMsg);
+    ws.send(JSON.stringify({ id: mine, method, params }));
+  });
+  try {
+    await send("Emulation.setDeviceMetricsOverride",
+      { width, height, deviceScaleFactor: 2, mobile: width < 900 });
+    await send("Page.enable");
+    await send("Page.navigate", { url: `http://${HOST_FROM_CONTAINER}:${port}/` });
+    await new Promise((r) => setTimeout(r, 1500));
+    const out = await send("Runtime.evaluate", { expression, returnByValue: true });
+    // Without this, an expression that threw returns undefined and the caller's
+    // JSON.parse fails with "undefined is not valid JSON" — a confusing error
+    // instead of the real one.
+    if (out.exceptionDetails) throw new Error("page threw: " + JSON.stringify(out.exceptionDetails));
+    if (out.result.value === undefined) throw new Error("expression produced no value");
+    return out.result.value;
+  } finally {
+    ws.close();
+    await fetch(CDP + "/json/close/" + tab.id).catch(() => {});
+  }
+}
+
+const SEED_AND_MEASURE = `
+(function(){
+  document.body.setAttribute('data-view','chat');
+  var tr=document.getElementById('perch-transcript');
+  for(var i=0;i<16;i++){ var d=document.createElement('div');
+    d.textContent='bot: a transcript line long enough to take a row or two, number '+i;
+    tr.appendChild(d); }
+  tr.scrollTop=0;                                  // where a reader starts
+  var b=document.getElementById('perch-send').getBoundingClientRect();
+  return JSON.stringify({viewport:innerHeight,top:Math.round(b.top),
+    bottom:Math.round(b.bottom),reachable:b.bottom<=innerHeight&&b.top>=0});
+})()`;
+
+test("Send is reachable at 412x730 with the transcript scrolled to the top", async (t) => {
+  if (!available) return t.skip("no CDP endpoint at " + CDP);
+  const measured = JSON.parse(await evaluate(412, 730, SEED_AND_MEASURE));
+  assert.equal(measured.reachable, true,
+    `Send at ${measured.top}-${measured.bottom} in a ${measured.viewport}px viewport`);
+});
+
+test("both views are visible side by side at desktop width", async (t) => {
+  if (!available) return t.skip("no CDP endpoint at " + CDP);
+  const visible = JSON.parse(await evaluate(1280, 900, `
+    (function(){
+      document.body.setAttribute('data-view','chat');
+      var vis=function(id){ var e=document.getElementById(id);
+        return getComputedStyle(e).display !== 'none'; };
+      return JSON.stringify({list:vis('perch-list'),chat:vis('perch-chat')});
+    })()`));
+  assert.equal(visible.list, true, "the min-width:900px split keeps the list up");
+  assert.equal(visible.chat, true);
+});
+```
+
+- [ ] **Step 2: Confirm `ws` is available**
+
+Run: `/home/kh0pp/.nvm/versions/node/v22.23.1/bin/node -e "import('ws').then(()=>console.log('ws ok'))" --input-type=module`
+
+Expected: `ws ok`. It is already a transitive dependency of the repo. If it is missing, ask before installing anything — do not add a dependency to satisfy a test.
+
+- [ ] **Step 3: Run the test**
+
+Run: `/home/kh0pp/.nvm/versions/node/v22.23.1/bin/node --test tests/perch-hub-render.test.js`
+
+Expected: PASS with a CDP endpoint, or two clean skips without one. If the phone case FAILS, the composer is not sticky or the transcript is not `flex:1; min-height:0` — fix the CSS, not the test.
+
+- [ ] **Step 4: Assert the rules the renderer cannot prove**
+
+Headless Chrome under `setDeviceMetricsOverride` has **no URL bar**, so `100dvh === 100vh` there and the dvh rule is untestable by rendering. The reachability measurement is also weaker than it looks: the composer is structurally last in a viewport-height flex column, so `bottom <= innerHeight` is close to unfailable. Assert the rules directly, in `tests/perch-hub-page.test.js`:
+
+```js
+test("the chat column carries the rules the renderer cannot prove", async () => {
+  const { perchHubCss } = await import("../servers/gateway/dashboard/perch-hub/css.js");
+  const css = perchHubCss().replace(/\s+/g, "");
+  assert.ok(css.includes("height:100vh;height:100dvh"),
+    "dvh must FOLLOW vh — vh alone hides the last strip behind the browser chrome");
+  assert.ok(/#perch-composer\{[^}]*position:sticky/.test(css));
+  assert.ok(/#perch-composer\{[^}]*bottom:0/.test(css));
+  assert.ok(/#perch-composer\{[^}]*background:/.test(css), "or the transcript shows through it");
+  assert.ok(/#perch-transcript\{[^}]*min-height:0/.test(css),
+    "a flex child without min-height:0 refuses to shrink and pushes the composer off-screen");
+});
+```
+
+- [ ] **Step 5: Handle the on-screen keyboard**
+
+**A real gap, handled rather than claimed away.** On iOS Safari the virtual keyboard does not shrink the layout viewport, so `100dvh` stays full-height and a `bottom:0` sticky composer sits *behind* the keyboard. `visualViewport` is the only API that reports the genuinely visible area:
+
+```js
+  /* iOS does not shrink the layout viewport for the keyboard, so dvh alone
+     leaves the composer behind it. Offset the chat column by the hidden part. */
+  if(window.visualViewport){
+    var vv=window.visualViewport;
+    var applyVV=function(){
+      var hidden=Math.max(0,window.innerHeight-vv.height-vv.offsetTop);
+      el('perch-chat').style.paddingBottom=hidden?hidden+'px':'';
+    };
+    vv.addEventListener('resize',applyVV);
+    vv.addEventListener('scroll',applyVV);
+  }
+```
+
+No headless harness raises a keyboard, so assert the wiring:
+
+```js
+test("the on-screen keyboard is accounted for", async () => {
+  const { perchHubJs } = await import("../servers/gateway/dashboard/perch-hub/client.js");
+  assert.ok(perchHubJs("en").includes("visualViewport"),
+    "iOS keeps 100dvh full-height under the keyboard; only visualViewport sees the real area");
+});
+```
+
+- [ ] **Step 6: Commit**
+
+```bash
+rm -f node_modules
+git add tests/perch-hub-render.test.js tests/perch-hub-page.test.js servers/gateway/dashboard/perch-hub/client.js servers/gateway/dashboard/perch-hub/css.js
+git commit -m "Perch Hub: render assertions at phone and desktop width
+
+Send must be reachable with the transcript scrolled to the TOP, which is
+the measurement that caught the drawer's unreachable send button when a
+screenshot did not. Skips cleanly with no CDP endpoint."
+```
+
+---
+
+## Task 7: The board hands off to the hub
+
+**Files:**
+- Modify: `servers/gateway/dashboard/panels/bot-board/client.js`
+- Modify: `servers/gateway/dashboard/shared/layout.js`
+- Modify: `servers/gateway/dashboard/shared/i18n.js`
+- Test: `tests/roost-strip-ui.test.js`
+
+**Phase 2 begins here. This is the second PR** — cut it after Task 8, so phase 1 merges with both surfaces live and nothing is removed until the hub has been used.
+
+**SIX call sites, not four.** Round-1 review found the first draft rewired `talk`, `open`, `answer` and dispatch only. The complete list from `grep -n "openBirdDrawer" servers/gateway/dashboard/panels/bot-board/client.js`:
+
+| Line | Trigger |
+|---|---|
+| 449 | clicking a live bird glyph on a card face |
+| 884-885 | `_bbForeignHash.bird` — a `#bird=<sid>` deep link into the board |
+| 1300 | `action==='open'` and `action==='answer'` |
+| 1301 | `action==='sessions'` |
+| 1304 | `action==='talk'` success branch |
+
+Every one becomes a navigation. Miss one and it throws `ReferenceError` after Task 8.
+
+**The nav entry is a hard-coded link in `shared/layout.js`, NOT a nav-registry entry.** `resolveNavGroups` (`nav-registry.js:157-166`) only emits an entry when `panelMap.has(panelId)`, and `panelMap` is built from the registered **panels**. The hub is a bare route with its own document, so a `nav-registry` assignment would be silently dropped. `DEFAULT_NAV_PANEL_ASSIGNMENTS` is also not exported, and on any existing install the `nav_panel_assignments` row already exists so new defaults never apply (`nav-registry.js:106-127`). A link in the layout works on fresh and existing installs with no migration.
+
+- [ ] **Step 1: Write the failing tests**
+
+Replace the two assertions in `tests/roost-strip-ui.test.js` that pin the old behaviour — **they are written to fail once the drawer goes and must be rewritten, not deleted silently**:
+
+- line 198: `assert.ok(js.includes("openBirdDrawer"), "the Task-13 stub hook is emitted")` — **leave this one alone in this task.** `birdDrawerJs` is still spliced into `clientJs` here, so it still passes. Task 8 rewrites it once the splice is gone.
+- line **263**: `assert.ok(okBranch.includes("setTimeout(reload,600)"), "success branch defers to reload() with a perceivable delay")` — Step 3 removes exactly this, so leaving it red is not optional
+- line 265: `assert.ok(!okBranch.includes("openBirdDrawer("), "the stub can't show anything real yet — reload is the honest fallback")`
+
+```js
+test("every roost action navigates to the hub instead of opening a drawer", async () => {
+  const { clientJs } = await import("../servers/gateway/dashboard/panels/bot-board/client.js");
+  const js = clientJs("scout", "kanban", null, null, null, "en", false);
+  // NOT the strong `!js.includes("openBirdDrawer(")` form: client.js:1141 still
+  // splices ${birdDrawerJs(lang)} in at THIS commit, and drawer.js contains its
+  // own definition plus one internal call — 8 occurrences, of which this task
+  // owns 5. The strong form belongs in Task 8, once the splice is dropped.
+  // Deleting the assertion instead would silently lose the six-call-site guard.
+  for (const dead of ["openBirdDrawer(birdGlyph",
+                      "openBirdDrawer(window._bbForeignHash.bird)",
+                      "openBirdDrawer(sid,botId,botName)",
+                      "openBirdDrawer(sid||null,botId,botName)",
+                      "openBirdDrawer(r.j&&r.j.sessionId,botId,botName)"]) {
+    assert.ok(!js.includes(dead), dead + " still opens the drawer");
+  }
+  assert.ok(js.includes("/dashboard/perch#"), "the hub is the destination");
+});
+
+test("dispatch navigates to the new session rather than reloading the board", async () => {
+  // Supersedes the pre-hub assertion that dispatch must NOT navigate, which
+  // was correct only while the drawer stub could show nothing real.
+  const { clientJs } = await import("../servers/gateway/dashboard/panels/bot-board/client.js");
+  const js = clientJs("scout", "kanban", null, null, null, "en", false);
+  // tJs is evaluated at EMIT time, so the emitted script contains the English
+  // string, never the literal "roostDispatchSent". Anchor on real emitted
+  // source, exactly as the existing test at :258 does.
+  const { t } = await import("../servers/gateway/dashboard/shared/i18n.js");
+  // A fixed-size window does NOT reach the success branch: measured, the
+  // handler's attach-card mode occupies ~1900 chars first. tests/roost-strip-ui
+  // .test.js:249-262 already solves this with matchBrace; reuse it rather than
+  // inventing a slice.
+  const start = js.indexOf("$('bb-rd-send').onclick=function(){");
+  assert.ok(start > -1, "the dispatch handler is emitted");
+  const handler = js.slice(start, matchBrace(js, js.indexOf("{", start)) + 1);
+  const okAt = handler.indexOf("if(r.ok){");
+  assert.ok(okAt > -1, "the success branch is present");
+  const okBranch = handler.slice(okAt, matchBrace(handler, handler.indexOf("{", okAt)) + 1);
+  assert.ok(okBranch.includes(t("botboard.roostDispatchSent", "en")), "still confirms the send");
+  // The key's EN text is "Sent — reloading…" (i18n.js:1400) and this step
+  // removes the reload. Retranslate it in this task, or the confirmation lies.
+  assert.ok(okBranch.includes("/dashboard/perch#"), "a dispatched session opens where you can watch it");
+  assert.ok(!okBranch.includes("setTimeout(reload,600)"), "no reload — we are leaving the page");
+});
+
+test("the hub is reachable from the nav on every install", async () => {
+  const { renderLayout } = await import("../servers/gateway/dashboard/shared/layout.js");
+  const html = renderLayout({ title: "t", content: "", panels: [], lang: "en" });
+  assert.ok(html.includes('href="/dashboard/perch"'),
+    "a hard-coded link: nav-registry only routes to registered panels, and the hub is not one");
+});
+```
+
+- [ ] **Step 2: Run them to verify they fail**
+
+Run: `/home/kh0pp/.nvm/versions/node/v22.23.1/bin/node --test tests/roost-strip-ui.test.js`
+Expected: FAIL on all three.
+
+- [ ] **Step 3: Rewire all six call sites**
+
+```js
+  function toHub(sid){ location.href='/dashboard/perch#'+encodeURIComponent(sid); }
+```
+
+- 449: `toHub(birdGlyph.getAttribute('data-bird-sid'))`
+- 884-885: `toHub(window._bbForeignHash.bird)`
+- 1300 (`open`/`answer`): `if(sid){ toHub(sid); } return;`
+- 1301 (`sessions`): navigate to `/dashboard/perch` with no fragment — the list IS the session view now
+- 1304 (`talk`): `if(r.ok&&r.j&&r.j.sessionId){ toHub(r.j.sessionId); } else { crowToast(...); }`
+- dispatch success: `toHub(r.j.sessionId)` in place of `setTimeout(reload,600)`
+
+Retranslate `botboard.roostDispatchSent` — its EN text is `"Sent — reloading…"` and this task removes the reload:
+
+```js
+  "botboard.roostDispatchSent": { en: "Sent — opening…", es: "Enviado — abriendo…" },
+```
+
+Add the nav link in `shared/layout.js` beside the existing nav items:
+
+```js
+  <a class="nav-item" data-turbo="false" href="/dashboard/perch">${escapeHtml(t("nav.perch", lang))}</a>
+```
+
+**`data-turbo="false"` is load-bearing.** Turbo Drive ships unless `CROW_ENABLE_TURBO === "0"` (`layout.js:30-35`). Under Turbo a click fetches the hub, **merges its `<head>` into the current document** and swaps the body — so the ported `*{box-sizing:border-box;margin:0}`, `body{background:var(--sky);max-width:640px}` and `button{…}` rules would be appended to the dashboard's head and stay for the rest of the session, and the hub's `EventSource` and intervals would survive navigating away. The logout link at `layout.js:255` carries the same attribute for the same reason. `class="nav-item"` is required too, or the link loses `.sidebar-nav a.nav-item:focus-visible`, which `tests/a11y-baseline.test.js:24` asserts.
+
+Extend the nav test accordingly:
+
+```js
+  assert.ok(/data-turbo="false"[^>]*href="\/dashboard\/perch"|href="\/dashboard\/perch"[^>]*data-turbo="false"/.test(html),
+    "Turbo would splice the hub's global CSS into the dashboard head permanently");
+  assert.ok(/class="nav-item"[^>]*href="\/dashboard\/perch"|href="\/dashboard\/perch"[^>]*class="nav-item"/.test(html),
+    "a11y-baseline.test.js:24 pins .sidebar-nav a.nav-item:focus-visible");
+```
+
+and `"nav.perch": { en: "Perch", es: "Perch" }` to `i18n.js` — plus `"nav.perch"` in `IDENTICAL_OK` (`tests/i18n-global-parity.test.js:30`), same reason as `perch.title`: a product name.
+
+- [ ] **Step 4: Run the board suites**
+
+Run: `/home/kh0pp/.nvm/versions/node/v22.23.1/bin/node --test tests/roost-strip-ui.test.js tests/roost-strip-data.test.js tests/i18n-global-parity.test.js`
+Expected: PASS. `tests/bird-drawer-*.test.js` still pass at this commit — the drawer is untouched until Task 8.
+
+- [ ] **Step 5: Commit**
+
+```bash
+rm -f node_modules
+git add servers/gateway/dashboard/panels/bot-board/client.js servers/gateway/dashboard/shared/layout.js servers/gateway/dashboard/shared/i18n.js tests/roost-strip-ui.test.js tests/i18n-global-parity.test.js
+git commit -m "Bot board hands sessions off to Perch Hub
+
+All six openBirdDrawer call sites become navigations: the bird glyph, the
+#bird= deep link, open, answer, sessions and talk. Dispatch navigates to
+the new session instead of reloading, which supersedes the assertion that
+it must not navigate — that was true only while the drawer stub could
+show nothing real.
+
+The nav entry is a hard-coded link in layout.js. nav-registry only emits
+entries for registered panels, and the hub is a bare route with its own
+document, so an assignment there would be silently dropped."
+```
+
+---
+
+## Task 8: Delete the drawer
+
+**Files:**
+- Delete: `servers/gateway/dashboard/panels/bot-board/drawer.js`
+- Delete: `tests/bird-drawer-controls.test.js`, `tests/bird-drawer-core.test.js`
+- Modify: `servers/gateway/dashboard/panels/bot-board/css.js` (**round-1 catch: imports `birdDrawerCss` at line 8, uses it at 65 — absent from the first draft's file table**)
+- Modify: `servers/gateway/dashboard/panels/bot-board/client.js` (drops the `birdDrawerJs` import at line 9 and the splice at 1141)
+- Modify: `servers/gateway/dashboard/panels/bot-board/html.js` (removes `birdDrawerMarkup` at 288 and **both** call sites, 606 and 769)
+- Modify: `tests/board-i18n-literals.test.js` (imports `birdDrawerJs` at 83 and `birdDrawerMarkup` at 105-107; Groups covering both; `DRAWER_JS_KEYS` and `DRAWER_SSR_KEYS`)
+
+- [ ] **Step 1: Enumerate every reference before touching anything**
+
+```bash
+grep -rn "drawer\.js\|birdDrawerMarkup\|birdDrawerCss\|birdDrawerJs\|openBirdDrawer" \
+  --include=*.js servers/ tests/ | grep -v node_modules
+```
+
+Every hit is deleted or rewritten in this task. A survivor is a broken build, not a warning.
+
+- [ ] **Step 2: Delete and rewire**
+
+```bash
+git rm servers/gateway/dashboard/panels/bot-board/drawer.js \
+       tests/bird-drawer-controls.test.js tests/bird-drawer-core.test.js
+```
+
+- `css.js`: drop the import (line 8) and the `${birdDrawerCss()}` interpolation (line 65).
+- `client.js`: drop the import (line 9), the `${birdDrawerJs(lang)}` splice (1141), and the two stale comments at 1138 and 1239.
+- `html.js`: delete `birdDrawerMarkup` (288) and remove it from **both** compositions (606, 769).
+- `tests/board-i18n-literals.test.js`: drop the `birdDrawerJs` import (83), the `birdDrawerMarkup` binding (105-107), `DRAWER_JS_KEYS`, `DRAWER_SSR_KEYS`, and the Group E / Part 1 blocks that use them (215-217, 380-382).
+- `i18n.js`: delete every `botboard.bd*` key that no surviving file references. Confirm with `grep -rn "botboard.bd" --include=*.js servers/ tests/ | grep -v node_modules` — parity should not guard dead strings. **No `botboard.bd*` key is in `IDENTICAL_OK`** (checked: 75 entries, none matching), so the anti-rot assertion at `tests/i18n-global-parity.test.js:116-121` needs no matching edit.
+
+- [ ] **Step 3: Verify nothing references it**
+
+Re-run Step 1's grep **narrowed to import and call sites**, because comments legitimately survive:
+
+```bash
+grep -rn "from \"\./drawer\.js\"\|birdDrawerMarkup(\|birdDrawerCss(\|birdDrawerJs(\|openBirdDrawer(" \
+  --include=*.js servers/ tests/ | grep -v node_modules
+```
+
+Expected: **no output.** The unnarrowed grep will still match comments that are *correct to leave alone* — notably `servers/gateway/perch-interactive.js:430`, which documents the drawer's behaviour and is load-bearing prose, plus header comments in `tests/board-i18n-literals.test.js` (lines 3, 13, 47-50, 153, 172, 221, 242, 339) and `html.js:285`. Tidy the ones inside files you are already editing; **do not touch `perch-interactive.js`.**
+
+- [ ] **Step 4: Now assert the strong form**
+
+Task 7 could only assert its own five call sites, because `client.js:1141` still spliced `${birdDrawerJs(lang)}` in and `drawer.js` carries its own definition plus an internal call. With the splice gone, the absolute assertion finally holds — add it to `tests/roost-strip-ui.test.js`, and rewrite line 198 (which asserted the stub *was* emitted):
+
+```js
+test("no path anywhere opens a drawer that no longer exists", async () => {
+  const { clientJs } = await import("../servers/gateway/dashboard/panels/bot-board/client.js");
+  const js = clientJs("scout", "kanban", null, null, null, "en", false);
+  assert.ok(!js.includes("openBirdDrawer("), "every call site is a navigation now");
+  assert.ok(js.includes("toHub("), "and they all go through one helper");
+});
+```
+
+- [ ] **Step 5: Run every affected suite**
+
+```bash
+N22=/home/kh0pp/.nvm/versions/node/v22.23.1/bin/node
+for f in roost-strip-ui roost-strip-data board-i18n-literals i18n-global-parity \
+         session-bird-state perch-interactive-routes perch-interactive \
+         perch-hub-page perch-hub-client; do
+  printf "%-28s " $f; $N22 --test tests/$f.test.js 2>&1 | grep -E "^# (pass|fail)" | tr '\n' ' '; echo
+done
+```
+
+Expected: every file `# fail 0`.
+
+- [ ] **Step 5: Run the whole suite once**
+
+Run: `npm test`
+Expected: green. This is the only task that removes exports other files import, so it is the one where a full run earns its time.
+
+- [ ] **Step 6: Commit**
+
+```bash
+rm -f node_modules
+git add -A
+git commit -m "Delete the bot board's session drawer
+
+Perch Hub is the chat surface. Two complete chat surfaces meant every
+change landed twice — the four defects fixed on 2026-09-09 were all in
+this one. The roost strip keeps its states and its Talk control; only the
+drawer goes.
+
+css.js imported birdDrawerCss and html.js called birdDrawerMarkup from
+TWO compositions, both easy to miss and both a broken build."
+```
+
+---
+
+## The two PRs
+
+**PR 1 — Tasks 1-6.** The hub exists at `/dashboard/perch` and works. The board is untouched and the drawer is still live: a deliberate, temporary duplication so the hub can be used before anything is removed. Merge and deploy this on its own, use it on a phone for a day, and only then start phase 2.
+
+**PR 2 — Tasks 7-8.** The board hands off, the drawer is deleted. Nothing here is safe to land before PR 1 has been exercised against a real session.
+
+---
+
+## Verification before the phase-2 PR
+
+The hub must be exercised against the running R4 instance, not only in tests, because every defect that mattered today survived a green suite:
+
+```bash
+cd ~/r4-tehcy
+python3 scripts/bot_orchestrator.py ask r4-assistant "say ready" --new
+```
+
+Then open `https://crow.dachshund-chromatic.ts.net:8449/dashboard/perch` on a phone and confirm: the session appears in the list, tapping it opens the chat, the transcript loads, Send is reachable without scrolling, a message gets a reply, and no `[object Object]` appears anywhere.
+
+Deploy is `git pull` into `~/crow` plus `systemctl restart crow-r4-gateway` — these are gateway-core files, not bundle files, so no `~/.crow-r4/bundles/` copy is needed.
diff --git a/docs/superpowers/specs/2026-09-09-perch-hub-design.md b/docs/superpowers/specs/2026-09-09-perch-hub-design.md
new file mode 100644
index 00000000..99192931
--- /dev/null
+++ b/docs/superpowers/specs/2026-09-09-perch-hub-design.md
@@ -0,0 +1,198 @@
+# Perch Hub: the default chat surface for crow bots
+
+**Status:** design, approved 2026-09-09
+**Scope:** sub-project A of three (see [Scope boundaries](#scope-boundaries))
+
+## Why
+
+Perch Hub was deleted on 2026-08-16 (`42f39160`, `e36f26d8`) and replaced by the
+bot board's roost strip plus a session drawer. The drawer is a 480px desktop
+slide-over squeezed to 92vw, and on a phone it has been failing in ways that took
+four separate fixes in one evening (#346, #347, #348) without becoming good:
+unlabelled controls, a plan-mode label losing a specificity fight, models listed
+as `provider/id`, a stringified object printed into every transcript, and a Send
+button that could not be reached at all.
+
+The operator's judgement, verbatim: *"perch hub worked a lot better and looked a
+lot better. it was more mobile friendly too."* That is correct, and it is
+structural rather than cosmetic. Perch Hub was a full page in normal document
+flow with a viewport meta, a transcript capped at 340px scrolling inside itself,
+and a composer directly beneath it. The drawer is a fixed-height container whose
+last element is the thing you need most.
+
+## The product model
+
+Three surfaces, each with one job:
+
+- **Perch Hub** shows every active session and is where you talk to a bot.
+- **Bot Board** is the project-management board. You can optionally launch a bot
+  from a card; the conversation happens in the hub.
+- **Bot Builder** defines bots. Unchanged by this work.
+
+## Decisions
+
+| Question | Decision |
+|---|---|
+| Whose sessions does the hub list? | Bot sessions only, from the interactive engine. Not the old hub's on-disk pi sessions or its tmux spawner. |
+| How does it ship? | Core, gateway-served. Not an installable bundle, no daemon, no second auth path. |
+| What happens to the board's drawer? | Deleted. One chat surface. |
+| Where does it live? | `/perch`, its own top-level page, deep-linkable as `/perch#<sessionId>`. |
+| Layout | List and chat as two views. |
+
+### Why not restore the bundle
+
+The old hub was its own daemon on port 4210 with a `perch-token` auth file, a
+gateway-supervised child process, and a reverse proxy to per-session web servers.
+It was the only bundle with a supervised child, and deleting it let crow remove
+that mechanism entirely. Restoring it would re-introduce port allocation, a token
+file, an install step, and a second auth path that has to keep working on a phone
+behind Tailscale Serve and the public front door. A gateway-served page inherits
+the dashboard session, 2FA, CSRF, Serve and the front door at no cost.
+
+### Why not keep the drawer as well
+
+Two complete chat surfaces means every future change lands twice. The four
+defects fixed on 2026-09-09 were all in one surface; duplicating it doubles that
+rate permanently.
+
+## Architecture
+
+`/perch` is a route on the gateway, mounted behind `dashboardAuth` like every
+other dashboard route. It renders its **own document** rather than the dashboard
+shell. That is the point: the shell's chrome is a large part of what makes the
+current surface cramped on a phone.
+
+**The hub adds no API.** Every route it needs exists and is already covered by
+`tests/perch-interactive-routes.test.js` (77 cases):
+
+| Need | Existing route |
+|---|---|
+| List every live session across every bot | `GET /dashboard/perch-api/roost` |
+| Start a card-less session | `POST /dashboard/perch-api/bots/<id>/interactive` |
+| Drive a turn | `POST /interactive/<sid>/message` |
+| Nudge a running turn | `POST /interactive/<sid>/steer` |
+| Live events | `GET /interactive/<sid>/events` (SSE) |
+| Answer an ask_user card | `POST /interactive/<sid>/answer` |
+| Model / thinking menus | `GET /interactive/<sid>/options` |
+| Abort, stop, cycle, control | `POST /interactive/<sid>/{abort,stop,cycle,control}` |
+| Attach to a card | `POST /interactive/<sid>/attach-card` |
+| Upload an image | `POST /interactive/<sid>/files` |
+| Past transcript | `GET /bots/<id>/sessions/<threadId>/transcript` |
+
+`GET /roost` already does the cross-bot aggregation in one pass: one query for
+every bot def, one `engine.list()`, one `bot_sessions` query for `card_id` and
+`control`. It was built for the roost strip and is exactly the hub's list feed.
+
+### Components
+
+Under `servers/gateway/dashboard/perch-hub/`, mirroring the `bot-board/` split so
+it reads like its neighbours:
+
+- **`html.js`** — the page document, the list view, the chat view. Static shell
+  only; hydrated client-side, the same split `birdDrawerMarkup()` uses.
+- **`css.js`** — Perch Hub's visual language, ported from the deleted
+  `PERCH_CSS` + `BOTS_CSS`: mono uppercase labels, pill badges, teal accents, the
+  bird glyph, `max-height:340px` transcripts. Scoped to the page, sharing crow's
+  `--crow-*` tokens so themes keep working.
+- **`client.js`** — hash router, list rendering, chat rendering, SSE handling.
+- **`routes/perch-hub.js`** — mounts `/perch`.
+
+## Data flow
+
+**List view.** Fetch `/roost`, render one row per live session grouped by bot,
+plus every perch-attached bot with no session (so you can start one). Poll every
+10s while the list view is showing, and refresh immediately on window focus.
+Stop polling while the chat view is up, where the SSE stream is already the live
+signal.
+
+**Selecting a session** sets `location.hash = <sessionId>`. The hash router is
+the only view state, so deep links, back and forward all work for free.
+
+**Chat view.** On entry:
+
+1. `GET /bots/<id>/sessions/<threadId>/transcript` for history.
+2. Attach the SSE stream.
+3. Only then accept input.
+
+Step 2 before any post is not optional: **the stream is live-only and carries no
+backlog**, so a message posted before the subscription is live loses its reply.
+The engine replays the session's current state onto every new subscriber, and
+that replay is the only available proof the subscription is live.
+
+**Event handling.** `state`, `text`, `tool`, `log`, `reply`, `ask_user`, `error`,
+`plan_state`, `attention`. Two carry known traps: `plan_state.state` is an
+**object** and must be formatted, never appended raw (the `[object Object]` bug),
+and `state.turnInFlight` is false in the pre-post replay as well as at the end of
+a turn, so it only counts as an ending once it has been seen true.
+
+## Mobile
+
+The list is the home screen. Tapping a session pushes a full-screen chat with a
+back button and the composer pinned to the bottom. Above 900px the two views sit
+side by side.
+
+Rules learned the hard way on 2026-09-09 and non-negotiable here:
+
+- `100dvh`, never bare `100vh` — `100vh` is the large viewport and hides whatever
+  sits in the last strip behind the browser chrome.
+- The composer is `position:sticky; bottom:0` with its own background, so Send is
+  reachable at any scroll position rather than only at the bottom of a long
+  transcript.
+- No control is unlabelled. A row of bare dropdowns reads fine wide and becomes
+  meaningless the moment it wraps.
+- Full-bleed width on a phone. `min(480px, 92vw)` leaves a dead gutter.
+
+## Error handling
+
+| Condition | Behaviour |
+|---|---|
+| SSE drops | Reconnect with bounded backoff, capped at 5 attempts; the subscribe replay restores state, so nothing is rebuilt by hand. Port the drawer's logic, which is already correct. |
+| `409 engine_required` | The page renders "the bot engine is not installed" with a link to Extensions, not a dead screen. |
+| `403 perch_not_attached` | The bot is listed but not startable, with a link to Bot Builder. |
+| Session 404s | Return to the list with a note. Never a blank chat. |
+| `409 turn_in_progress` | The composer relabels to Steer, matching the drawer's existing behaviour. |
+| Transcript fetch fails | Chat still opens; the pane says history could not be loaded. |
+
+## Testing
+
+- **Route tests** — none new; the API is unchanged and already covered.
+- **Client-script parse test** — crow convention; the emitted script is a
+  template literal, and an unescaped backtick in a comment breaks the module.
+- **i18n EN/ES parity** plus the SSR/client key lists, both enforced by existing
+  tests that fail loudly when a key is added to one and not the other.
+- **Render checks over CDP** at 412px and at desktop width, asserting that the
+  composer is reachable with the transcript scrolled to the **top**. That exact
+  measurement is what caught the unreachable Send button; a screenshot alone did
+  not.
+- **`plan_state` formatting** — the live payload
+  `{enabled:false,executing:false,todosDone:0,todosTotal:0,todos:[]}` must render
+  as nothing at all.
+
+## Phasing
+
+Two PRs, each leaving a working surface.
+
+**Phase 1 — the hub exists.** `/perch` ships and works. The board is untouched:
+Talk still opens the drawer. Both surfaces are live, which is a deliberate,
+temporary duplication so the hub can be used before anything is removed.
+
+**Phase 2 — the drawer goes.** Talk and dispatch navigate to `/perch#<sid>`.
+`birdDrawerMarkup`, `birdDrawerCss`, `birdDrawerJs` and their tests are deleted;
+the roost strip keeps its states and its Talk control. `nav-registry.js` gains a
+`perch-hub` entry in the `agents` group, beside `bot-board` and `bot-builder`.
+
+## Scope boundaries
+
+This spec covers the hub only. Two sibling projects were identified in the same
+conversation and are deliberately **not** in it:
+
+- **B. `bundles/bot-engine` becomes core**, so pi ships in the base install
+  rather than being installed from Extensions. It changes install size, the
+  vendoring and licensing story, and what every crow user downloads. The hub does
+  not depend on it: it renders the `engine_required` state instead.
+- **C. Onboarding provisions models by default** — local download from Hugging
+  Face and cloud provider setup as part of first run. The machinery is already
+  core; this is flow and defaults.
+
+Also out of scope: the old hub's on-disk pi session list and its tmux
+`/api/hub/spawn`. Those are a second session system and were not asked for.
diff --git a/servers/gateway/dashboard/index.js b/servers/gateway/dashboard/index.js
index 6e08768d..872d3062 100644
--- a/servers/gateway/dashboard/index.js
+++ b/servers/gateway/dashboard/index.js
@@ -7,6 +7,7 @@ import express from "express";
 import { renderLayout, renderLogin, render2faVerify, render2faRecovery, render2faSetup, renderResetRequest, renderResetForm } from "./shared/layout.js";
 import { playerBarHtml, playerBarJs } from "./shared/player.js";
 import { headerIconsHtml, headerIconsJs, tamagotchiHtml, tamagotchiJs } from "./shared/notifications.js";
+import perchHubRouter from "../routes/perch-hub.js";
 import {
   dashboardAuth,
   isPasswordSet,
@@ -712,6 +713,11 @@ export default function dashboardRouter(mcpAuthMiddleware) {
   // Normal mount (session-cookie-authenticated path)
   router.use("/dashboard", bundlesRouter);
 
+  router.use("/dashboard", perchHubRouter(dashboardAuth));
+  // Short link. Outside the /dashboard mount, so it carries no auth — it is a
+  // redirect with no content, and the destination is fully gated.
+  router.get("/perch", (req, res) => res.redirect(302, "/dashboard/perch"));
+
   // SSO launch — authenticated on THIS instance (after dashboardAuth). Mints a
   // signed ticket for a paired+trusted target and 302s the browser to the
   // target's /dashboard/sso/accept. Falls back to a direct link (which will
diff --git a/servers/gateway/dashboard/perch-hub/client.js b/servers/gateway/dashboard/perch-hub/client.js
new file mode 100644
index 00000000..36a54917
--- /dev/null
+++ b/servers/gateway/dashboard/perch-hub/client.js
@@ -0,0 +1,665 @@
+import { tJs } from "../shared/i18n.js";
+
+/** The hub's client script. Emitted INSIDE a template literal — a bare
+ *  backtick or ${ anywhere in here breaks the module at import time.
+ *  tJs escapes \, ', ` and ${, so translations interpolate safely into
+ *  single-quoted client strings. */
+export function perchHubJs(lang = "en") {
+  return `(function(){
+  "use strict";
+  var body=document.body;
+  function setView(v){ body.setAttribute('data-view',v); }
+
+  /* Tiny DOM helpers used throughout. Defined HERE, in the first task that
+     emits a script, so no later task references something undefined. */
+  function el(id){ return document.getElementById(id); }
+  function clearEl(node){ while(node&&node.firstChild) node.removeChild(node.firstChild); }
+  /* Builds with textContent/createElement; never assigns innerHTML. */
+  function line(cls,text){ var d=document.createElement('div');
+    if(cls) d.className=cls; d.textContent=text==null?'':String(text); return d; }
+
+  /* The two transcript writers. Defined HERE because the error and
+     empty-transcript paths call them, and those are the FIRST paths a user
+     hits when something goes wrong — a ReferenceError there is invisible to a
+     parse test (new Function binds at call time) and fatal at runtime. */
+  function appendNote(text){
+    var tr=el('perch-transcript'); if(!tr) return;
+    tr.appendChild(line('entry note',text));
+    tr.scrollTop=tr.scrollHeight;
+  }
+  function appendMessage(cls,who,text){
+    var tr=el('perch-transcript'); if(!tr) return;
+    var row=document.createElement('div'); row.className='entry '+cls;
+    row.appendChild(line('who',who));
+    row.appendChild(line('what',text));      /* textContent, never innerHTML */
+    tr.appendChild(row);
+    tr.scrollTop=tr.scrollHeight;
+  }
+
+  var API='/dashboard/perch-api';
+  /* The hub is a STANDALONE document, so it does NOT get shared/layout.js's
+     global fetch/XHR patch (layout.js:401-465) that attaches X-Crow-Csrf for
+     every dashboard page. That is why the board's own perchApi sends no header
+     and this one must. Do not "simplify" by copying the board's version: every
+     POST would 403. */
+  function csrf(){ var m=document.cookie.match(/(?:^|; )crow_csrf=([^;]*)/); return m?decodeURIComponent(m[1]):''; }
+  function perchApi(method,path,body){
+    var opts={method:method,headers:{'X-Crow-Csrf':csrf()}};
+    if(body!==undefined){ opts.headers['Content-Type']='application/json'; opts.body=JSON.stringify(body); }
+    return fetch(API+path,opts).then(function(r){
+      return r.json().catch(function(){return null;}).then(function(j){ return {ok:r.ok,status:r.status,j:j}; });
+    },function(){
+      /* fetch() itself rejected — a destroyed socket, a dropped tunnel, a
+         gateway restart. Resolving a well-formed failure object here, rather
+         than leaving the promise rejected, means every existing .then at
+         every call site (onStreamError's reconnect probe, send()'s
+         SEND_FAILED note) runs on this path exactly as it does for an HTTP
+         error, with no .catch needed at each call site. */
+      return {ok:false,status:0,j:null};
+    });
+  }
+
+  /* One row per live session, plus one per attached bot with none. A bot with
+     no perch gateway record is omitted: POST /bots/<id>/interactive 403s. */
+  function listRows(roost){
+    var birds=(roost&&roost.birds)||[];
+    var out=[];
+    birds.forEach(function(b){
+      if(!b||!b.perch_attached) return;
+      var ss=b.sessions||[];
+      if(!ss.length){ out.push({botId:b.id,botName:b.name,sessionId:null,state:'idle',cardId:null,pendingUi:false}); return; }
+      var live=ss.filter(function(x){ return x&&x.state!=='stopped'; });
+      if(!live.length){ out.push({botId:b.id,botName:b.name,sessionId:null,state:'idle',cardId:null,pendingUi:false}); return; }
+      live.forEach(function(s){
+        out.push({botId:b.id,botName:b.name,sessionId:s.sessionId,state:s.state,
+                  cardId:s.cardId==null?null:s.cardId,pendingUi:!!s.pendingUi});
+      });
+    });
+    /* Blocked-on-you first: those are the only rows that need you right now. */
+    out.sort(function(a,b){
+      if(!!b.pendingUi!==!!a.pendingUi) return b.pendingUi?1:-1;
+      if(!!b.sessionId!==!!a.sessionId) return b.sessionId?1:-1;
+      return String(a.botName).localeCompare(String(b.botName));
+    });
+    return out;
+  }
+
+  /* tJs escapes \\, ', \` and \${, so these interpolate safely. */
+  var NO_SESSIONS='${tJs("perch.noSessions", lang)}';
+  var WAITING_ON_YOU='${tJs("perch.waitingOnYou", lang)}';
+  var OPEN_LABEL='${tJs("perch.open", lang)}';
+  var TALK_LABEL='${tJs("perch.talk", lang)}';
+  var START_FAILED='${tJs("perch.startFailed", lang)}';
+  var NOT_ATTACHED='${tJs("perch.notAttached", lang)}';
+  var ENGINE_REQUIRED='${tJs("perch.engineRequired", lang)}';
+
+  /* Interpolated at emit time. tJs escapes quotes, backticks and \${, so these
+     are safe inside single-quoted literals. */
+  var SESSION_GONE='${tJs("perch.sessionGone", lang)}';
+  var SEND_FAILED='${tJs("perch.sendFailed", lang)}';
+  var FILE_QUEUED='${tJs("perch.fileQueued", lang)}';
+  var FILE_FAILED='${tJs("perch.fileFailed", lang)}';
+  var NO_TRANSCRIPT='${tJs("perch.noTranscript", lang)}';
+  var RECONNECTING='${tJs("perch.reconnecting", lang)}';
+  var RECONNECT_FAILED='${tJs("perch.reconnectFailed", lang)}';
+  var ASK_STALE='${tJs("perch.askStale", lang)}';
+  var STEER_LABEL='${tJs("perch.steer", lang)}';
+  var SEND_LABEL='${tJs("perch.send", lang)}';
+  var ASK_CONFIRM='${tJs("perch.askConfirm", lang)}';
+  var ASK_DENY='${tJs("perch.askDeny", lang)}';
+  var ASK_CANCEL='${tJs("perch.askCancel", lang)}';
+  var ASK_SUBMIT='${tJs("perch.askSubmit", lang)}';
+
+  var pendingNote=null;                 /* survives the loadList that follows a note */
+  function showListNote(text){
+    var body=el('perch-list-body'); clearEl(body); body.appendChild(line('empty',text));
+  }
+  /* renderList() ends with this, so a parked note survives the re-render that
+     would otherwise erase it. */
+  function flushPendingNote(){
+    if(!pendingNote) return;
+    el('perch-list-body').insertBefore(line('empty',pendingNote), el('perch-list-body').firstChild);
+    pendingNote=null;
+  }
+
+  var rowIndex={};                    /* sessionId -> row, for a warm openSession */
+
+  function renderList(rows){
+    var body=el('perch-list-body'); if(!body) return;
+    clearEl(body); rowIndex={};
+    if(!rows.length){ body.appendChild(line('empty',NO_SESSIONS)); flushPendingNote(); return; }
+    rows.forEach(function(r){
+      var row=document.createElement('div'); row.className='roost-row';
+      row.appendChild(line('roost-dot',''));
+      var main=document.createElement('div'); main.className='roost-main';
+      main.appendChild(line('roost-cwd',r.botName));
+      main.appendChild(line('roost-when',r.pendingUi?WAITING_ON_YOU:r.state));
+      row.appendChild(main);
+      var b=document.createElement('button');
+      b.type='button'; b.textContent=r.sessionId?OPEN_LABEL:TALK_LABEL;
+      b.onclick=r.sessionId
+        ? function(){ rowIndex[r.sessionId]=r; location.hash=r.sessionId; }
+        : function(){ startSession(r.botId,r.botName); };
+      row.appendChild(b);
+      if(r.sessionId) rowIndex[r.sessionId]=r;
+      body.appendChild(row);
+    });
+    flushPendingNote();               /* a parked note must survive this render */
+  }
+
+  /* A bot with no session: spawn, then let the hash router open it, so history
+     stays correct and the cold-deep-link path is the same code. */
+  function startSession(botId,botName){
+    var mySid=current.sid;                  /* identity guard: a spawn resolving after the
+                                                operator has opened another session must not
+                                                yank them out of it */
+    perchApi('POST','/bots/'+encodeURIComponent(botId)+'/interactive').then(function(r){
+      if(current.sid!==mySid) return;
+      if(r.status===409){ showListNote(ENGINE_REQUIRED); return; }
+      if(r.status===403){ showListNote(NOT_ATTACHED); return; }
+      if(!r.ok||!r.j||!r.j.sessionId){ showListNote(START_FAILED); return; }
+      rowIndex[r.j.sessionId]={botId:botId,botName:botName,sessionId:r.j.sessionId};
+      location.hash=r.j.sessionId;
+    });
+  }
+
+  var listTimer=null;
+  function loadList(){
+    return perchApi('GET','/roost').then(function(r){
+      if(r.ok&&r.j) renderList(listRows(r.j));
+      else renderList([]);
+    });
+  }
+  /* Poll only while the list is showing. In the chat view the SSE stream is
+     already the live signal, so polling there is pure waste. */
+  function startListPolling(){ stopListPolling(); listTimer=setInterval(loadList,10000); }
+  function stopListPolling(){ if(listTimer){ clearInterval(listTimer); listTimer=null; } }
+  window.addEventListener('focus',function(){ if(body.getAttribute('data-view')==='list') loadList(); });
+
+  /* Engine-minted ids only: "perchlive-" + 8 hex (perch-interactive.js:1473).
+     A loose pattern would admit ".." and this value is concatenated into an
+     API path. Encoded at every use site as well, belt and braces. */
+  function parseHash(h){
+    var raw=String(h==null?'':h).replace(/^#/,'');
+    return /^perchlive-[0-9a-f]{8}$/.test(raw)?{sessionId:raw}:null;
+  }
+
+  var current={sid:null};
+  /* Images attached via attachFile(), queued for the NEXT send() only —
+     drawer.js:406/916 does the same two-part attach: upload now (POST
+     .../files), attach the wire-shape {mime,data_b64} array on the send that
+     follows, then clear regardless of outcome. resetControls() also clears
+     this so a new session never inherits a stale queue. */
+  var pendingImages=[];
+
+  function openSession(sid){
+    if(current.sid===sid) return;          /* a re-entered hash is a no-op */
+    closeStream();
+    current.sid=sid;
+    var mySid=sid;                          /* identity guard for every await below */
+    setView('chat');
+    stopListPolling();                      /* SSE is the live signal here */
+    clearEl(el('perch-transcript')); clearEl(el('perch-ask'));
+    resetControls();                        /* the PREVIOUS session's picker must not bleed in */
+    var known=rowIndex[sid];
+    if(known){ showHeader(known.botId,known.botName); afterHeader(mySid,known.botId); return; }
+    /* A cold deep link does not know the bot; ask /roost rather than guess. */
+    perchApi('GET','/roost').then(function(r){
+      if(current.sid!==mySid) return;       /* the hash moved on while we waited */
+      var hit=r.ok&&r.j?listRows(r.j).filter(function(x){return x.sessionId===mySid;})[0]:null;
+      if(!hit){ noteAndReturnToList(SESSION_GONE); return; }
+      showHeader(hit.botId,hit.botName); afterHeader(mySid,hit.botId);
+    });
+  }
+
+  /* Stream FIRST, history second: the stream carries no backlog. */
+  function afterHeader(sid,botId){ openStream(sid); loadHistory(botId,sid); loadOptions(sid); }
+
+  function closeSession(){
+    closeStream(); current.sid=null;
+    setTurnInFlight(false);      /* the list has no Steer/Stop to show */
+    setView('list'); startListPolling(); loadList();
+  }
+
+  /* A note set before loadList() resolves is wiped by renderList. Park it and
+     let renderList re-append it — otherwise "That session is gone." is never
+     seen, on exactly the dead-deep-link path it exists for. */
+  function noteAndReturnToList(text){ pendingNote=text; location.hash=''; }   /* pendingNote: Task 2 */
+
+  function applyHash(){
+    var hit=parseHash(location.hash);
+    if(hit) openSession(hit.sessionId); else closeSession();
+  }
+  window.addEventListener('hashchange',applyHash);
+
+  function planStateText(st){
+    if(!st||typeof st!=='object') return typeof st==='string'?st:'';
+    if(!st.enabled&&!st.executing) return '';
+    var total=Number(st.todosTotal||0), done=Number(st.todosDone||0);
+    /* Interpolated at emit time, NOT bound to a script-level constant: the
+       test extracts this function in isolation, and a free variable would
+       throw ReferenceError before reaching any assertion. tJs escapes quotes,
+       backticks and dollar-brace interpolation markers, so this is safe
+       inside a single-quoted literal. */
+    var head=st.executing?'${tJs("perch.planExecuting", lang)}':'${tJs("perch.planOn", lang)}';
+    return total>0?head+' ('+done+'/'+total+')':head;
+  }
+
+  /* NOTE the '\\n' below: this whole script lives inside a template literal,
+     so a single-backslash escape would become a REAL newline and split the string
+     literal across lines. drawer.js:650 writes it the same way. */
+  function messageText(message){
+    var content=message&&message.content;
+    if(typeof content==='string') return content;
+    if(Array.isArray(content)){
+      return content.map(function(b){
+        if(!b) return '';
+        if(typeof b.text==='string') return b.text;
+        if(b.type==='toolCall') return '[tool: '+(b.name||'?')+']';
+        return b.type?'['+b.type+']':'';
+      }).filter(Boolean).join('\\n');
+    }
+    if(typeof (message&&message.text)==='string') return message.text;
+    return '';
+  }
+
+  /* drawer.js:829, verbatim in effect: mirror the engine, and a stopped
+     session is never in flight whatever the frame says. */
+  function turnFlagFor(st){ return (st&&st.state==='stopped')?false:!!(st&&st.turnInFlight); }
+
+  function isTerminalStreamStatus(code){ return code===404||code===410||code===401; }
+
+  var stream=null;
+
+  function closeStream(){
+    cancelReconnect();                 /* timer only — NOT the retry counter */
+    var es=stream; stream=null;        /* null FIRST: idempotent under a double call
+                                          from openSession + hashchange */
+    if(es){ try{ es.close(); }catch(e){} }
+  }
+
+  function openStream(sid){
+    closeStream();
+    var es=new EventSource(API+'/interactive/'+encodeURIComponent(sid)+'/events');
+    stream=es;
+    es.onopen=function(){ resetBackoff(); };
+
+    var on=function(type,fn){
+      es.addEventListener(type,function(ev){
+        if(current.sid!==sid) return;                 /* identity guard, every listener */
+        /* A native EventSource connection failure delivers a type "error"
+           Event to every listener registered for "error" via addEventListener
+           — not only es.onerror — and unlike a real engine error FRAME it
+           carries no .data. Without this check, every dropped connection
+           printed a bare "error" note here before onStreamError (bound
+           through the single-slot es.onerror property) ever got to reconnect. */
+        if(typeof ev.data!=='string') return;
+        var d={}; try{ d=JSON.parse(ev.data); }catch(e){ d={}; }
+        fn(d);
+      });
+    };
+    on('state',function(d){
+      setTurnInFlight(turnFlagFor(d));
+      el('perch-state').textContent=d.state||'';
+      /* Reflects the engine's own record (snapshot()/stateEvent() in
+         perch-interactive.js), never the picker back at it — setting
+         .value/.checked does not fire change, so this cannot loop. */
+      if(d.permissionMode){ var permSel=el('perch-permission'); if(permSel) permSel.value=d.permissionMode; }
+      var planCb=el('perch-plan-mode'); if(planCb) planCb.checked=!!d.planMode;
+    });
+    on('text',function(d){ appendMessage('bot','bot',d.text||''); });
+    on('tool',function(d){ if(d.phase==='start') appendNote('['+(d.name||'?')+']'); });
+    on('log',function(d){ if(d.text) appendNote(d.text); });
+    on('reply',function(d){ appendMessage('bot','bot',d.text||''); setTurnInFlight(false); });
+    on('ask_user',function(d){ renderAsk(d); });
+    on('error',function(d){ appendNote(d.text||'error'); });
+    on('plan_state',function(d){ var t=planStateText(d.state); if(t) appendNote(t); });
+    /* No 'attention' listener: attention is not a stream event —
+       perch-interactive.js:1243/:1360 push it through pushAttention into the
+       notification pipeline, and perch-interactive-api.js:349-351 enumerates
+       the stream as state | text | tool | ask_user | log | reply | error plus
+       plan_state. A listener for it would never fire. */
+
+    /* openAuthedStream emits a NAMED session-expired event before closing when
+       the dashboard session is invalidated (streams/authed-stream.js:50-53).
+       Retrying that five times is five requests from a logged-out browser. */
+    es.addEventListener('session-expired',function(){
+      closeStream();
+      location.href='/dashboard/login';
+    });
+
+    /* A session that was stopped or reaped while we watched answers 404/410 on
+       reconnect. Terminal: say so and go back to the list. */
+    function onStreamError(){
+      closeStream();
+      if(current.sid!==sid) return;
+      perchApi('GET','/interactive/'+encodeURIComponent(sid)+'/options').then(function(r){
+        if(current.sid!==sid) return;
+        if(isTerminalStreamStatus(r.status)){ noteAndReturnToList(SESSION_GONE); return; }
+        scheduleReconnect();                  /* bounded 2s backoff, cap 5 */
+      });
+    }
+    es.onerror=onStreamError;
+  }
+
+  function showHeader(botId,botName){
+    el('perch-bot-name').textContent=botName||botId;
+    el('perch-session-meta').textContent=current.sid||'';
+  }
+  /* Bounded backoff. TWO separate operations, and conflating them is what made
+     an earlier draft of this dead code: cancelling the TIMER must not reset the
+     COUNTER, because onStreamError calls closeStream() (which cancels) before
+     every scheduleReconnect(), so a combined reset meant retries could never
+     reach 5 and the cap was unreachable. The counter resets only when a stream
+     actually opens. */
+  var retries=0, retryTimer=null;
+  function cancelReconnect(){ if(retryTimer){ clearTimeout(retryTimer); retryTimer=null; } }
+  function resetBackoff(){ retries=0; }            /* called from onopen ONLY */
+  function scheduleReconnect(){
+    if(retries>=5){ appendNote(RECONNECT_FAILED); return; }
+    retries++;
+    appendNote(RECONNECTING);
+    var mySid=current.sid;                          /* no parameter to get wrong */
+    retryTimer=setTimeout(function(){
+      if(current.sid!==mySid) return;               /* navigated away mid-backoff */
+      openStream(mySid);
+    },2000);
+  }
+
+  function loadHistory(botId,sid){
+    var mySid=sid;
+    perchApi('GET','/bots/'+encodeURIComponent(botId)+'/sessions/'+encodeURIComponent(sid)+'/transcript')
+      .then(function(r){
+        if(current.sid!==mySid) return;            /* identity guard, as everywhere */
+        var events=(r.ok&&r.j&&r.j.events)||[];
+        if(!events.length){ appendNote(NO_TRANSCRIPT); return; }
+        events.filter(function(e){ return e&&e.type==='message'; }).forEach(function(e){
+          var m=e.message||{};
+          appendMessage(String(m.role||'?')==='user'?'user':'bot', String(m.role||'?'), messageText(m));
+        });
+      });
+  }
+
+  /* Track 3 Task 4: session controls — model, thinking level, permission
+     mode, plan mode. Both models and thinkingLevels are null while the
+     session hibernates (perch-interactive.js:1877): the engine will not
+     wake a child merely to list, so optionsUsable() gates a DISABLED pair
+     of selects rather than an empty-but-enabled one. */
+  /* "up" is deliberately undecorated: a working choice should read as the
+     plain default. The name is on the payload; the drawer read m.label, which
+     no provider row sets, and every model listed as provider/id for months. */
+  function modelOptionText(m){
+    var text=(m&&m.name)||((m&&m.provider)+'/'+(m&&m.id));
+    if(m&&m.availability==='on_demand') text+=' \\u2014 ${tJs("perch.modelOnDemand", lang)}';
+    else if(m&&m.availability==='unavailable') text+=' \\u2014 ${tJs("perch.modelUnavailable", lang)}';
+    return text;
+  }
+
+  function optionsUsable(o){
+    return !!(o&&Array.isArray(o.models)&&o.models.length
+              &&Array.isArray(o.thinkingLevels)&&o.thinkingLevels.length);
+  }
+
+  /* Populates #perch-model / #perch-thinking from GET .../options, or
+     disables both rather than leaving an empty-but-enabled dropdown — that
+     is what made a hibernating session look broken. */
+  function renderOptions(o){
+    var modelSel=el('perch-model'), thinkSel=el('perch-thinking');
+    if(!modelSel||!thinkSel) return;
+    clearEl(modelSel); clearEl(thinkSel);
+    if(!optionsUsable(o)){ modelSel.disabled=true; thinkSel.disabled=true; return; }
+    o.models.forEach(function(m){
+      var opt=document.createElement('option');
+      opt.value=(m&&m.provider)+'/'+(m&&m.id);
+      opt.textContent=modelOptionText(m);
+      modelSel.appendChild(opt);
+    });
+    o.thinkingLevels.forEach(function(lv){
+      var opt=document.createElement('option');
+      opt.value=lv; opt.textContent=lv;
+      thinkSel.appendChild(opt);
+    });
+    modelSel.disabled=false; thinkSel.disabled=false;
+  }
+
+  function loadOptions(sid){
+    var mySid=sid;
+    perchApi('GET','/interactive/'+encodeURIComponent(sid)+'/options').then(function(r){
+      if(current.sid!==mySid) return;               /* identity guard, as everywhere */
+      renderOptions(r.ok?r.j:null);
+    });
+  }
+
+  /* A newly opened session starts with no known options and the default
+     permission/plan state, cleared here so the PREVIOUS session's picker
+     contents never bleed into this one while loadOptions() is in flight. */
+  function resetControls(){
+    var modelSel=el('perch-model'), thinkSel=el('perch-thinking');
+    if(modelSel){ clearEl(modelSel); modelSel.disabled=true; }
+    if(thinkSel){ clearEl(thinkSel); thinkSel.disabled=true; }
+    var permSel=el('perch-permission'); if(permSel) permSel.value='guarded';
+    var planCb=el('perch-plan-mode'); if(planCb) planCb.checked=false;
+    setTurnInFlight(false);      /* the PREVIOUS session's Steer/Stop state must not bleed in */
+    pendingImages=[];            /* nor its queued-but-unsent image */
+  }
+
+  /* routes/perch-interactive-api.js:531-540 reads permission_mode and
+     plan_mode in snake_case and SILENTLY DROPS any other key — an operator
+     flipping the permission mode gets a 200 and nothing changes. Every other
+     body in this file is camelCase JS; these two stay snake_case on purpose. */
+  function controlBody(kind,value){
+    if(kind==='model'){ var i=value.indexOf('/');
+      return {model:{provider:value.slice(0,i),id:value.slice(i+1)}}; }
+    if(kind==='thinking') return {thinking:value};
+    if(kind==='permission') return {permission_mode:value};   /* snake_case */
+    return {plan_mode:!!value};                                /* snake_case */
+  }
+
+  function sendControl(kind,value){
+    if(!current.sid) return;
+    perchApi('POST','/interactive/'+encodeURIComponent(current.sid)+'/control',controlBody(kind,value));
+  }
+  el('perch-model').onchange=function(){ sendControl('model',this.value); };
+  el('perch-thinking').onchange=function(){ sendControl('thinking',this.value); };
+  el('perch-permission').onchange=function(){ sendControl('permission',this.value); };
+  el('perch-plan-mode').onchange=function(){ sendControl('plan',this.checked); };
+
+  function sendable(text){ return String(text==null?'':text).trim().length>0; }
+  function sendPath(sid,inFlight){
+    return '/interactive/'+encodeURIComponent(sid)+(inFlight?'/steer':'/message');
+  }
+
+  var turnInFlight=false;
+  function setTurnInFlight(flag){
+    turnInFlight=!!flag;
+    el('perch-send').textContent=turnInFlight?STEER_LABEL:SEND_LABEL;
+    el('perch-abort').style.display=turnInFlight?'':'none';
+  }
+
+  function send(){
+    var input=el('perch-input'); if(!input) return;
+    var text=input.value;
+    if(!sendable(text)||!current.sid) return;
+    var mySid=current.sid;
+    appendMessage('user','you',text);      /* echo before the round trip */
+    input.value='';
+    var body={message:text};
+    /* routes/perch-interactive-api.js's normalizeMessageImages reads
+       body.images on /message only — /steer never looks at it, so attaching
+       here regardless of path is harmless on a steer. Cleared immediately,
+       matching the textarea's own discipline: a failed send still consumes
+       the queue, and re-attaching is one tap away. */
+    if(pendingImages.length) body.images=pendingImages;
+    pendingImages=[];
+    perchApi('POST',sendPath(mySid,turnInFlight),body).then(function(r){
+      if(current.sid!==mySid) return;
+      if(r.status===409){ setTurnInFlight(true); return; }   /* raced a turn start */
+      if(!r.ok) appendNote((r.j&&r.j.error)||SEND_FAILED);
+    });
+  }
+
+  /* ask_user cards. The real card shape (perch-interactive.js:222) uses \`method\` as the
+     discriminator (select|input|confirm|editor, never \`kind\`), \`options\`
+     as plain strings (never {value,label}), and answer() is a tri-state —
+     cancelled first, then confirmed for a confirm card, else value. A
+     confirm card answered with value reads at the engine as confirmed:false,
+     which would silently DENY a permission prompt while looking approved. */
+  function askOptions(card){
+    if(!card||!card.requestId) return [];
+    return Array.isArray(card.options)?card.options.slice():[];
+  }
+
+  /* renderAsk already branches on card.method (confirm/select handled above
+     the call site, everything else falls to the input/editor branch below),
+     so this carries only the two fields that branch actually reads. */
+  function askFields(card){
+    return {
+      initial: (card&&card.prefill!=null)?String(card.prefill):'',
+      placeholder: (card&&card.placeholder!=null)?String(card.placeholder):''
+    };
+  }
+
+  /* Mirrors engine.answer's tri-state (perch-interactive.js:1904). cancelled
+     is checked first there, so it is checked first here. A confirm card MUST
+     answer with confirmed: sending value on one reads as a denial. */
+  function answerPayloadFor(card,choice){
+    var out={requestId:card.requestId};
+    if(choice&&choice.cancelled){ out.cancelled=true; return out; }
+    if(card.method==='confirm'){ out.confirmed=!!(choice&&choice.confirm); return out; }
+    out.value=String(choice&&choice.value!=null?choice.value:'');
+    return out;
+  }
+
+  /* Every continuation here carries the same mySid guard as the rest of the
+     file: an answer that resolves after the operator has moved on must not
+     write into the new session's pane. A 409 no_such_request means the card
+     was already answered or the child died — clear the pane and say so
+     rather than leaving a dead card on screen. */
+  function answerAsk(card,choice){
+    var mySid=current.sid;
+    return perchApi('POST','/interactive/'+encodeURIComponent(mySid)+'/answer',
+                    answerPayloadFor(card,choice)).then(function(r){
+      if(current.sid!==mySid) return;
+      clearEl(el('perch-ask'));
+      if(r.status===409) appendNote(ASK_STALE);
+    });
+  }
+
+  /* Writes into #perch-ask, which sits ABOVE the sticky composer: an
+     ask_user frame blocks the turn until answered, so it must not be
+     scrollable past inside the transcript. Built with createElement/
+     textContent only — never innerHTML. */
+  function renderAsk(card){
+    var pane=el('perch-ask'); if(!pane) return;
+    clearEl(pane);
+    if(!card||!card.requestId) return;
+    var frame=document.createElement('div'); frame.className='ask-card';
+    if(card.title) frame.appendChild(line('ask-title',card.title));
+    if(card.message) frame.appendChild(line('ask-message',card.message));
+
+    var controls=document.createElement('div'); controls.className='ask-controls';
+
+    if(card.method==='confirm'){
+      var yes=document.createElement('button'); yes.type='button'; yes.textContent=ASK_CONFIRM;
+      yes.onclick=function(){ answerAsk(card,{confirm:true}); };
+      var no=document.createElement('button'); no.type='button'; no.textContent=ASK_DENY;
+      no.onclick=function(){ answerAsk(card,{confirm:false}); };
+      controls.appendChild(yes); controls.appendChild(no);
+    } else if(card.method==='select'){
+      /* options is an array of plain strings (cardFrom() does options.slice()
+         on whatever pi sent) — never {value,label}. */
+      askOptions(card).forEach(function(opt){
+        var b=document.createElement('button'); b.type='button'; b.textContent=opt;
+        b.onclick=function(){ answerAsk(card,{value:opt}); };
+        controls.appendChild(b);
+      });
+    } else {
+      var fields=askFields(card);
+      var field=card.method==='editor'?document.createElement('textarea'):document.createElement('input');
+      if(card.method!=='editor') field.type='text';
+      field.value=fields.initial;
+      field.placeholder=fields.placeholder;
+      var submit=document.createElement('button'); submit.type='button'; submit.textContent=ASK_SUBMIT;
+      submit.onclick=function(){ answerAsk(card,{value:field.value}); };
+      controls.appendChild(field); controls.appendChild(submit);
+    }
+
+    /* Every card gets a cancel: without it, a card whose options do not fit
+       the situation blocks the turn with no way out. */
+    var cancel=document.createElement('button'); cancel.type='button'; cancel.textContent=ASK_CANCEL;
+    cancel.onclick=function(){ answerAsk(card,{cancelled:true}); };
+    controls.appendChild(cancel);
+
+    frame.appendChild(controls);
+    pane.appendChild(frame);
+  }
+
+  function attachFile(file){
+    var mySid=current.sid;
+    var isImage=/^image\\//.test(file.type);
+    var reader=new FileReader();
+    reader.onload=function(){
+      /* result is "data:<mime>;base64,<payload>" — the route wants the payload. */
+      var b64=String(reader.result||'').split(',')[1]||'';
+      perchApi('POST','/interactive/'+encodeURIComponent(mySid)+'/files',
+               {name:file.name,data_b64:b64}).then(function(r){
+        if(current.sid!==mySid) return;
+        if(r.ok){
+          /* Queued onto send()'s pendingImages, in pi's wire shape
+             {mime,data_b64} — an upload that isn't an image has nothing to
+             queue: the model reads images, not arbitrary files. */
+          if(isImage) pendingImages.push({mime:file.type,data_b64:b64});
+          appendNote(FILE_QUEUED);
+        } else {
+          appendNote((r.j&&r.j.error)||FILE_FAILED);
+        }
+      });
+    };
+    reader.readAsDataURL(file);        /* 5 MB post-decode cap, route-side */
+  }
+
+  var attachBtn=el('perch-attach'), fileInput=el('perch-file-input');
+  if(attachBtn&&fileInput){
+    attachBtn.onclick=function(){ fileInput.click(); };
+    fileInput.onchange=function(){
+      if(fileInput.files&&fileInput.files[0]) attachFile(fileInput.files[0]);
+      fileInput.value='';
+    };
+  }
+
+  /* Carried-over fix: send(), closeSession() and the abort path were all
+     written by an earlier task but never connected to the DOM — the chat
+     view rendered and Send did nothing. #perch-back sets location.hash=''
+     rather than calling closeSession() directly, so applyHash -> hashchange
+     -> closeSession runs and browser history stays correct. */
+  el('perch-send').onclick=send;
+  el('perch-back').onclick=function(){ location.hash=''; };
+  function abortTurn(){
+    if(!current.sid) return;
+    perchApi('POST','/interactive/'+encodeURIComponent(current.sid)+'/abort');
+  }
+  el('perch-abort').onclick=abortTurn;
+
+  /* iOS does not shrink the layout viewport for the keyboard, so dvh alone
+     leaves the composer behind it. Offset the chat column by the hidden part. */
+  if(window.visualViewport){
+    var vv=window.visualViewport;
+    var applyVV=function(){
+      var hidden=Math.max(0,window.innerHeight-vv.height-vv.offsetTop);
+      el('perch-chat').style.paddingBottom=hidden?hidden+'px':'';
+    };
+    vv.addEventListener('resize',applyVV);
+    vv.addEventListener('scroll',applyVV);
+  }
+
+  /* BOOTSTRAP — a hashchange event fires only on a LATER change to the hash;
+     it never fires for the page's own initial load. Without this line, every
+     direct load of this page — the /perch short link, a bookmarked #<sid>
+     URL, a plain refresh — sits on the static "Loading sessions…" shell
+     forever, because nothing else calls applyHash() or loadList() on first
+     paint. parseHash being exhaustively unit-tested does not help: it is a
+     pure function and it was green throughout. */
+  if(parseHash(location.hash)) applyHash();
+  else { startListPolling(); loadList(); }
+})();`;
+}
diff --git a/servers/gateway/dashboard/perch-hub/css.js b/servers/gateway/dashboard/perch-hub/css.js
new file mode 100644
index 00000000..49fea098
--- /dev/null
+++ b/servers/gateway/dashboard/perch-hub/css.js
@@ -0,0 +1,82 @@
+/**
+ * The Perch stylesheet, ported from the deleted perch-hub bundle
+ * (42f39160^:bundles/perch-hub/payload/hub/server.mjs, PERCH_CSS).
+ *
+ * It keeps Perch OWN palette rather than crow --crow-* tokens. That
+ * palette is the look this page exists to restore; mapping it onto the
+ * dashboard tokens would change the thing being brought back.
+ */
+export function perchHubCss() {
+  return `
+:root{--sky:#eef1f3;--card:#fff;--ink:#22303a;--dim:#6b7c88;--teal:#0e6b62;--teal-soft:#dcecea;
+--wire:#94a4ae;--alive:#2fa36b;--attn:#d1633e;--line:#dde4e8}
+@media (prefers-color-scheme:dark){:root{--sky:#131a1f;--card:#1b242b;--ink:#e4ebef;--dim:#8fa0ab;
+--teal:#4fbdb0;--teal-soft:#16322f;--wire:#46565f;--line:#2a353d}}
+*{box-sizing:border-box;margin:0}
+body{background:var(--sky);color:var(--ink);font:15px/1.5 Inter,"Public Sans",system-ui,sans-serif;max-width:640px;margin:0 auto;padding:0 16px 56px}
+header{padding:30px 0 20px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
+.brand{font-size:26px;font-weight:600;letter-spacing:-.03em}
+.brand small{color:var(--dim);font-weight:400;font-size:15px;margin-left:6px}
+.machines{display:flex;gap:6px;font-size:13px}
+.machines a{text-decoration:none;color:var(--dim);padding:5px 12px;border-radius:999px;border:1px solid var(--line)}
+a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
+h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);font-weight:600;margin:30px 0 12px}
+.perch-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
+.title{font-weight:600;font-size:17px}
+.meta{color:var(--dim);font-size:13px;margin-top:2px;word-break:break-all}
+.state{font-size:13px;color:var(--alive);font-weight:500;white-space:nowrap}
+button{font:500 14px/1 Inter,system-ui,sans-serif;cursor:pointer;border-radius:10px;padding:10px 16px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
+button.primary{background:var(--teal);border-color:var(--teal);color:#fff}
+button.quiet{color:var(--dim)}
+input,textarea{font:14px Inter,system-ui,sans-serif;width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--sky);color:var(--ink)}
+input::placeholder,textarea::placeholder{color:var(--dim)}
+.roost-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
+.roost-row:last-child{border-bottom:none}
+.roost-dot{width:8px;height:8px;border-radius:50% 50% 50% 2px;background:var(--wire);flex-shrink:0;transform:rotate(-8deg)}
+.roost-main{flex:1;min-width:180px}
+.roost-cwd{font-weight:500;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.roost-when{color:var(--dim);font-size:12.5px;font-family:"JetBrains Mono",ui-monospace,monospace}
+.roost-row button{padding:8px 12px;font-size:13px}
+.empty{color:var(--dim);padding:16px;font-size:14px}
+/* --- chat transcript + ask cards, ported from the deleted bundle's own
+   equivalents (42f39160^:bundles/perch-hub/payload/hub/bots-page.mjs
+   .entry/.entry .who/.entry .what/.ask-card/.ask-card .title/
+   .ask-card .ask-message) and renamed onto the classes THIS script emits
+   (entry/who/what/ask-card/ask-title/ask-message/ask-controls — the bundle's
+   own ask card nested a bare .title and used .ask-opts for the button row). */
+.entry{display:flex;gap:10px;font-size:14px}
+.who{flex:0 0 64px;font:11px/1.6 "JetBrains Mono",ui-monospace,monospace;text-transform:uppercase;color:var(--dim)}
+.entry.user .who{color:var(--teal)}
+.what{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word}
+.note{color:var(--dim);font-size:12.5px;font-style:italic}
+.ask-card{border:1px solid var(--line);border-radius:10px;padding:11px 12px;display:grid;gap:8px;background:var(--sky)}
+.ask-title{font-weight:600}
+.ask-message{white-space:pre-wrap}
+.ask-controls{display:flex;flex-wrap:wrap;gap:6px}
+/* --- hub layout ------------------------------------------------------- */
+/* Two views, one at a time on a phone, side by side on a wide screen. */
+#perch-list,#perch-chat{display:none}
+body[data-view="list"] #perch-list{display:block}
+body[data-view="chat"] #perch-chat{display:flex;flex-direction:column}
+/* 100vh is the LARGE viewport on mobile: it excludes the URL bar and the
+   bottom nav, so anything in the last strip sits behind the browser chrome
+   where scrolling cannot reach it. dvh tracks what is actually visible. */
+#perch-chat{height:100vh;height:100dvh}
+#perch-transcript{flex:1;overflow:auto;min-height:0;display:grid;gap:9px;padding:12px 0}
+/* Send must be reachable at ANY scroll position, not only at the bottom of a
+   long transcript. That was the drawer's defining mobile failure. */
+#perch-composer{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--line);padding:10px 0;display:grid;gap:8px}
+#perch-composer .send-row{display:flex;gap:8px}
+#perch-composer textarea{min-height:72px}
+#perch-back{align-self:flex-start}
+.field-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:10px 0}
+.field{display:flex;flex-direction:column;gap:3px;flex:1 1 150px;min-width:0}
+.field-label{font:11px/1 "JetBrains Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
+@media (min-width:900px){
+  body{max-width:1100px}
+  body[data-view="chat"] #perch-list{display:block}
+  .hub-split{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}
+  #perch-back{display:none}
+}
+`;
+}
diff --git a/servers/gateway/dashboard/perch-hub/html.js b/servers/gateway/dashboard/perch-hub/html.js
new file mode 100644
index 00000000..90501751
--- /dev/null
+++ b/servers/gateway/dashboard/perch-hub/html.js
@@ -0,0 +1,75 @@
+import { t } from "../shared/i18n.js";
+import { escapeHtml } from "../shared/components.js";
+import { perchHubCss } from "./css.js";
+import { perchHubJs } from "./client.js";
+
+/** engineStatus() returns installing | absent | unhealthy | ready
+ *  (bot-engine-status.js:84-101). Only "absent" means "not installed" — telling
+ *  an operator whose engine is mid-install, or whose breaker is open, to go
+ *  install it sends them somewhere that cannot help. */
+function engineBanner(engine, lang) {
+  const state = (engine && engine.state) || "ready";
+  if (state === "ready") return "";
+  if (state === "absent") {
+    return `<div class="empty" id="perch-engine-banner">${escapeHtml(t("perch.engineAbsent", lang))} ` +
+      `<a href="/dashboard/extensions">${escapeHtml(t("perch.engineInstall", lang))}</a></div>`;
+  }
+  const key = state === "installing" ? "perch.engineInstalling" : "perch.engineUnhealthy";
+  return `<div class="empty" id="perch-engine-banner">${escapeHtml(t(key, lang))}</div>`;
+}
+
+/** The whole page. Static shell only — every list row and transcript line is
+ *  rendered client-side, the same split birdDrawerMarkup() uses. */
+export function perchHubDocument(lang = "en", engine = { state: "ready" }) {
+  return `<!DOCTYPE html>
+<html lang="${escapeHtml(lang)}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>${escapeHtml(t("perch.title", lang))}</title>
+<style>${perchHubCss()}</style>
+</head>
+<body data-view="list">
+${engineBanner(engine, lang)}
+<header><div class="brand">Perch<small>${escapeHtml(t("perch.subtitle", lang))}</small></div>
+<nav class="machines"><a href="/dashboard/bot-board">${escapeHtml(t("perch.navBoard", lang))}</a></nav></header>
+<div class="hub-split">
+  <div id="perch-list">
+    <h2>${escapeHtml(t("perch.sessionsHeading", lang))}</h2>
+    <div id="perch-list-body"><div class="empty">${escapeHtml(t("perch.loading", lang))}</div></div>
+  </div>
+  <div id="perch-chat">
+    <button type="button" id="perch-back" class="quiet">${escapeHtml(t("perch.back", lang))}</button>
+    <div class="perch-head"><div><div class="title" id="perch-bot-name"></div>
+      <div class="meta" id="perch-session-meta"></div></div>
+      <div class="state" id="perch-state"></div></div>
+    <div class="field-row">
+      <div class="field"><span class="field-label" id="perch-model-label">${escapeHtml(t("perch.modelLabel", lang))}</span>
+        <select id="perch-model" aria-labelledby="perch-model-label" disabled></select></div>
+      <div class="field"><span class="field-label" id="perch-thinking-label">${escapeHtml(t("perch.thinkingLabel", lang))}</span>
+        <select id="perch-thinking" aria-labelledby="perch-thinking-label" disabled></select></div>
+      <div class="field"><span class="field-label" id="perch-permission-label">${escapeHtml(t("perch.permissionLabel", lang))}</span>
+        <select id="perch-permission" aria-labelledby="perch-permission-label">
+          <option value="guarded">${escapeHtml(t("perch.permGuarded", lang))}</option>
+          <option value="ask">${escapeHtml(t("perch.permAsk", lang))}</option>
+          <option value="bypass">${escapeHtml(t("perch.permBypass", lang))}</option>
+        </select></div>
+      <div class="field"><span class="field-label" id="perch-plan-mode-label">${escapeHtml(t("perch.planModeLabel", lang))}</span>
+        <input type="checkbox" id="perch-plan-mode" aria-labelledby="perch-plan-mode-label"></div>
+    </div>
+    <div id="perch-transcript"></div>
+    <div id="perch-ask"></div>
+    <div id="perch-composer">
+      <textarea id="perch-input" placeholder="${escapeHtml(t("perch.composerPlaceholder", lang))}"></textarea>
+      <div class="send-row">
+        <button type="button" id="perch-attach" class="quiet">${escapeHtml(t("perch.attachFile", lang))}</button>
+        <input type="file" id="perch-file-input" style="display:none" accept="image/*">
+        <button type="button" class="primary" id="perch-send">${escapeHtml(t("perch.send", lang))}</button>
+        <button type="button" id="perch-abort" style="display:none">${escapeHtml(t("perch.abort", lang))}</button>
+      </div>
+    </div>
+  </div>
+</div>
+<script>${perchHubJs(lang)}</script>
+</body></html>`;
+}
diff --git a/servers/gateway/dashboard/shared/i18n.js b/servers/gateway/dashboard/shared/i18n.js
index 837754fe..745dcf77 100644
--- a/servers/gateway/dashboard/shared/i18n.js
+++ b/servers/gateway/dashboard/shared/i18n.js
@@ -2220,6 +2220,52 @@ export const translations = {
     en: "No starter memories left to clear.",
     es: "No quedan memorias iniciales por borrar.",
   },
+  // ─── Perch Hub (2026-09-09 restore) ───
+  "perch.title": { en: "Perch", es: "Perch" },
+  "perch.subtitle": { en: "your bot sessions", es: "tus sesiones de bots" },
+  "perch.navBoard": { en: "Board", es: "Tablero" },
+  "perch.sessionsHeading": { en: "Sessions", es: "Sesiones" },
+  "perch.loading": { en: "Loading sessions…", es: "Cargando sesiones…" },
+  "perch.noSessions": { en: "No live sessions.", es: "No hay sesiones activas." },
+  "perch.waitingOnYou": { en: "waiting on you", es: "esperándote" },
+  "perch.open": { en: "Open", es: "Abrir" },
+  "perch.talk": { en: "Talk", es: "Hablar" },
+  "perch.startFailed": { en: "Could not start a session.", es: "No se pudo iniciar una sesión." },
+  "perch.notAttached": { en: "That bot has no Perch channel attached.", es: "Ese bot no tiene canal Perch." },
+  "perch.engineRequired": { en: "The bot engine is not installed.", es: "El motor de bots no está instalado." },
+  "perch.sendFailed": { en: "The message did not send.", es: "El mensaje no se envió." },
+  "perch.back": { en: "← Sessions", es: "← Sesiones" },
+  "perch.composerPlaceholder": { en: "Message your bot…", es: "Escribe a tu bot…" },
+  "perch.send": { en: "Send", es: "Enviar" },
+  "perch.abort": { en: "Stop", es: "Detener" },
+  "perch.engineAbsent": { en: "The bot engine is not installed.", es: "El motor de bots no está instalado." },
+  "perch.engineInstall": { en: "Install it", es: "Instalarlo" },
+  "perch.engineInstalling": { en: "The bot engine is still installing.", es: "El motor de bots aún se está instalando." },
+  "perch.engineUnhealthy": { en: "The bot engine is not responding.", es: "El motor de bots no responde." },
+  "perch.planOn": { en: "plan mode on", es: "modo de plan activado" },
+  "perch.planExecuting": { en: "executing the plan", es: "ejecutando el plan" },
+  "perch.sessionGone": { en: "That session is gone.", es: "Esa sesión ya no existe." },
+  "perch.steer": { en: "Steer", es: "Guiar" },
+  "perch.noTranscript": { en: "No transcript yet.", es: "Aún no hay transcripción." },
+  "perch.reconnecting": { en: "Reconnecting…", es: "Reconectando…" },
+  "perch.reconnectFailed": { en: "Lost the connection to this session.", es: "Se perdió la conexión con esta sesión." },
+  "perch.modelLabel": { en: "Model", es: "Modelo" },
+  "perch.thinkingLabel": { en: "Thinking", es: "Razonamiento" },
+  "perch.permissionLabel": { en: "Permissions", es: "Permisos" },
+  "perch.planModeLabel": { en: "Plan mode", es: "Modo de plan" },
+  "perch.permGuarded": { en: "Guarded", es: "Vigilado" },
+  "perch.permAsk": { en: "Ask", es: "Preguntar" },
+  "perch.permBypass": { en: "Bypass", es: "Omitir" },
+  "perch.modelOnDemand": { en: "starts on demand", es: "se inicia bajo demanda" },
+  "perch.modelUnavailable": { en: "not running", es: "no está en ejecución" },
+  "perch.askConfirm": { en: "Confirm", es: "Confirmar" },
+  "perch.askDeny": { en: "Deny", es: "Denegar" },
+  "perch.askCancel": { en: "Cancel", es: "Cancelar" },
+  "perch.askSubmit": { en: "Answer", es: "Responder" },
+  "perch.askStale": { en: "That question is no longer open.", es: "Esa pregunta ya no está abierta." },
+  "perch.attachFile": { en: "Attach image", es: "Adjuntar imagen" },
+  "perch.fileQueued": { en: "Image attached to the next message.", es: "Imagen adjunta al siguiente mensaje." },
+  "perch.fileFailed": { en: "The image did not upload.", es: "La imagen no se subió." },
 };
 
 export const SUPPORTED_LANGS = ["en", "es"];
diff --git a/servers/gateway/routes/perch-hub.js b/servers/gateway/routes/perch-hub.js
new file mode 100644
index 00000000..7d37e7b3
--- /dev/null
+++ b/servers/gateway/routes/perch-hub.js
@@ -0,0 +1,29 @@
+import { Router } from "express";
+import { perchHubDocument } from "../dashboard/perch-hub/html.js";
+import { SUPPORTED_LANGS } from "../dashboard/shared/i18n.js";
+import { parseCookies } from "../dashboard/auth.js";
+import { engineStatus } from "../bot-engine-status.js";
+
+/** Mounted at "/dashboard" by dashboard/index.js, so this serves
+ *  /dashboard/perch and inherits that mount's auth + CSRF chain. */
+export default function perchHubRouter(dashboardAuth) {
+  const router = Router();
+  // Belt and braces, deliberately. dashboard/index.js:614 already applies
+  // dashboardAuth to the whole /dashboard mount BEFORE this router is added at
+  // ~713, so this is redundant TODAY. It is kept because perchApiRouter does
+  // the same (routes/perch-interactive-api.js:628-633: "installs dashboardAuth
+  // on its own prefix so it is closed wherever it is mounted") — the router
+  // stays safe if it is ever re-mounted somewhere else. dashboardAuth is
+  // idempotent, so running twice costs a session lookup and nothing else.
+  router.use("/perch", dashboardAuth);
+  router.get("/perch", (req, res) => {
+    const cookies = parseCookies(req);
+    const lang = SUPPORTED_LANGS.includes(cookies.crow_lang) ? cookies.crow_lang : "en";
+    // engineStatus() is a LEAF module of synchronous fs stats
+    // (bot-engine-status.js:84) — safe and cheap from a route. /roost cannot
+    // report engine state, so without this the list looks normal and the first
+    // tap fails with a raw error.
+    res.type("html").send(perchHubDocument(lang, engineStatus()));
+  });
+  return router;
+}
diff --git a/tests/i18n-global-parity.test.js b/tests/i18n-global-parity.test.js
index 616ea6eb..afdfbef3 100644
--- a/tests/i18n-global-parity.test.js
+++ b/tests/i18n-global-parity.test.js
@@ -85,6 +85,7 @@ const IDENTICAL_OK = new Set([
   "onboarding.ai.sizeGb", // "{gb} GB" — the unit abbreviation is unchanged in Spanish
   // Bot-engine uninstall blast-radius (C4 Task 10)
   "extensions.engineBlastItem", // "{name} ({types})" — pure template shape, no words to translate
+  "perch.title", // a product name, identical in both languages
 ]);
 
 const keys = Object.keys(translations);
diff --git a/tests/perch-hub-client.test.js b/tests/perch-hub-client.test.js
new file mode 100644
index 00000000..073792a3
--- /dev/null
+++ b/tests/perch-hub-client.test.js
@@ -0,0 +1,727 @@
+// The client script is a string. These tests extract named functions from it
+// with new Function(...) and exercise them against the real /roost payload
+// shape, so the list logic is covered without a browser.
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import vm from "node:vm";
+
+/** Replace the interior of every block and line comment with spaces (keeping
+ *  length and newlines), so a `{` or `}` inside a comment can't unbalance the
+ *  depth counter below. Same length as the input, so indices found against
+ *  the masked copy still address the original source. Does not account for
+ *  braces inside string/template literals — none of this codebase's
+ *  extracted functions put one there. */
+function maskComments(src) {
+  return src.replace(/\/\*[\s\S]*?\*\/|\/\/[^\n]*/g, (m) => m.replace(/[^\n]/g, " "));
+}
+
+/** Brace-matched end index of the function body starting at `start` (the
+ *  index of "function <name>"), depth-counted against a comment-masked copy
+ *  of `src` so a stray brace inside a comment can't extend the match past
+ *  the real end. */
+function braceMatchEnd(src, start) {
+  const masked = maskComments(src);
+  let depth = 0, end = -1;
+  for (let i = masked.indexOf("{", start); i < masked.length; i++) {
+    if (masked[i] === "{") depth++;
+    else if (masked[i] === "}") { depth--; if (!depth) { end = i; break; } }
+  }
+  return end;
+}
+
+/** Pull one named function out of the emitted script and make it callable. */
+async function extract(name, extra = "") {
+  const { perchHubJs } = await import("../servers/gateway/dashboard/perch-hub/client.js");
+  const src = perchHubJs("en");
+  const start = src.indexOf("function " + name);
+  assert.ok(start > -1, name + " is not in the emitted script");
+  const end = braceMatchEnd(src, start);
+  return new Function(extra + src.slice(start, end + 1) + "; return " + name + ";")();
+}
+
+const ROOST = {
+  birds: [
+    { id: "r4-assistant", name: "R4 Assistant", perch_attached: true, state: "working",
+      sessions: [{ sessionId: "perchlive-aa", state: "awake", cardId: 49, pendingUi: false, control: "run" }] },
+    { id: "asker", name: "Asker", perch_attached: true, state: "waiting",
+      sessions: [{ sessionId: "perchlive-bb", state: "awake", cardId: null, pendingUi: true, control: "run" }] },
+    { id: "idle-bot", name: "Idle Bot", perch_attached: true, state: "idle", sessions: [] },
+    { id: "quiet", name: "Quiet", perch_attached: false, state: "observing", sessions: [] },
+  ],
+  occupiedCardIds: [49],
+};
+
+test("every live session becomes a row, whichever bot it belongs to", async () => {
+  const rowsFor = await extract("listRows");
+  const rows = rowsFor(ROOST);
+  const live = rows.filter((r) => r.sessionId);
+  assert.equal(live.length, 2);
+  assert.deepEqual(live.map((r) => r.sessionId).sort(), ["perchlive-aa", "perchlive-bb"]);
+});
+
+test("a bot with no session still gets a row, so you can start one", async () => {
+  const rowsFor = await extract("listRows");
+  const idle = rowsFor(ROOST).find((r) => r.botId === "idle-bot");
+  assert.ok(idle, "an attached bot with no session must be startable from here");
+  assert.equal(idle.sessionId, null);
+});
+
+test("a bot without perch attached is not offered — the spawn would 403", async () => {
+  const rowsFor = await extract("listRows");
+  assert.ok(!rowsFor(ROOST).some((r) => r.botId === "quiet"));
+});
+
+test("a session waiting on you sorts above a working one", async () => {
+  const rowsFor = await extract("listRows");
+  const rows = rowsFor(ROOST).filter((r) => r.sessionId);
+  assert.equal(rows[0].sessionId, "perchlive-bb", "pendingUi first — it is blocked on you");
+});
+
+test("a stopped session is not a tappable row that dead-ends", async () => {
+  const rowsFor = await extract("listRows");
+  const rows = rowsFor({ birds: [{ id: "b", name: "B", perch_attached: true, state: "idle",
+    sessions: [{ sessionId: "perchlive-dead0000", state: "stopped", cardId: null, pendingUi: false }] }] });
+  assert.equal(rows.length, 1);
+  assert.equal(rows[0].sessionId, null, "the bot stays startable; the dead session does not show");
+});
+
+test("an empty roost is an empty list, not a crash", async () => {
+  const rowsFor = await extract("listRows");
+  assert.deepEqual(rowsFor({ birds: [], occupiedCardIds: [] }), []);
+  assert.deepEqual(rowsFor({}), []);
+  assert.deepEqual(rowsFor(null), []);
+});
+
+test("only a real engine-minted session id opens a chat", async () => {
+  const parseHash = await extract("parseHash");
+  // The engine mints "perchlive-" + 8 hex (perch-interactive.js:1473). A loose
+  // pattern would let ".." through, and openStream builds a URL from this.
+  assert.deepEqual(parseHash("#perchlive-ab12cd34"), { sessionId: "perchlive-ab12cd34" });
+  assert.deepEqual(parseHash("perchlive-ab12cd34"), { sessionId: "perchlive-ab12cd34" });
+  for (const bad of ["", "#", undefined, "#..", "#../../etc/passwd", "#<script>",
+                     "#perchlive-XYZ", "#perchlive-ab12", "#not a session"]) {
+    assert.equal(parseHash(bad), null, JSON.stringify(bad) + " must not open a chat");
+  }
+});
+
+test("plan_state carries an OBJECT and must never be printed raw", async () => {
+  const planStateText = await extract("planStateText");
+  // The exact frame the engine replays onto EVERY new subscriber.
+  assert.equal(planStateText({ enabled: false, executing: false, todosDone: 0, todosTotal: 0, todos: [] }), "");
+  assert.equal(planStateText({ enabled: true, executing: false, todosDone: 0, todosTotal: 0 }), "plan mode on");
+  assert.equal(planStateText({ enabled: true, executing: false, todosDone: 2, todosTotal: 5 }), "plan mode on (2/5)");
+  assert.equal(planStateText({ enabled: true, executing: true, todosDone: 3, todosTotal: 7 }), "executing the plan (3/7)");
+  assert.equal(planStateText(undefined), "");
+  assert.equal(planStateText("legacy string"), "legacy string");
+});
+
+test("a transcript message's content array is walked, not stringified", async () => {
+  const messageText = await extract("messageText");
+  assert.equal(messageText({ content: "plain" }), "plain");
+  assert.equal(messageText({ content: [{ text: "a" }, { text: "b" }] }), "a\nb");
+  assert.equal(messageText({ content: [{ type: "toolCall", name: "board_get_item" }] }), "[tool: board_get_item]");
+  assert.equal(messageText({ text: "fallback" }), "fallback");
+  assert.equal(messageText({}), "");
+  assert.equal(messageText(null), "");
+});
+
+test("turnInFlight mirrors the engine, and a stopped session is never in flight", async () => {
+  // Round-1 review: an earlier draft gated the false on having first seen true.
+  // That is NOT what the drawer does (drawer.js:829), and it wedges: a turn
+  // that dies before any turnInFlight:true frame leaves the composer stuck on
+  // Steer forever, and every later send 409s with no_turn.
+  const flagFor = await extract("turnFlagFor");
+  assert.equal(flagFor({ state: "awake", turnInFlight: true }), true);
+  assert.equal(flagFor({ state: "awake", turnInFlight: false }), false);
+  assert.equal(flagFor({ state: "stopped", turnInFlight: true }), false);
+  assert.equal(flagFor({}), false);
+});
+
+test("the composer posts a message when idle and steers a running turn", async () => {
+  const sendPath = await extract("sendPath");
+  assert.equal(sendPath("perchlive-aa11bb22", false), "/interactive/perchlive-aa11bb22/message");
+  assert.equal(sendPath("perchlive-aa11bb22", true), "/interactive/perchlive-aa11bb22/steer");
+});
+
+test("an empty or whitespace-only message is not sent", async () => {
+  const sendable = await extract("sendable");
+  assert.equal(sendable(""), false);
+  assert.equal(sendable("   \n "), false);
+  assert.equal(sendable("hello"), true);
+});
+
+test("a dead session stops the retry loop instead of burning five reconnects", async () => {
+  // 404 no_such_session / 410 stopped are terminal. Retrying them five times
+  // then saying "reconnect failed" hides the real answer from the operator.
+  const terminal = await extract("isTerminalStreamStatus");
+  assert.equal(terminal(404), true);
+  assert.equal(terminal(410), true);
+  assert.equal(terminal(401), true);   // logged out — retrying cannot help
+  assert.equal(terminal(500), false);  // a real blip; retry is right
+  assert.equal(terminal(0), false);
+});
+
+test("something actually runs at load — a deep link must not land on an empty list", async () => {
+  const { perchHubJs } = await import("../servers/gateway/dashboard/perch-hub/client.js");
+  const js = perchHubJs("en");
+  // Task 7 navigates with location.href, a FULL load, which fires no
+  // hashchange. A listener alone leaves every hand-off on a stuck list.
+  assert.ok(/if\(parseHash\(location\.hash\)\)\s*applyHash\(\);/.test(js),
+    "a deep-linked session must open on first paint");
+  assert.ok(/else\s*\{\s*startListPolling\(\);\s*loadList\(\);/.test(js),
+    "and a bare /dashboard/perch must load the list rather than sit on the placeholder");
+});
+
+test("every string constant the script references is bound", async () => {
+  const { perchHubJs } = await import("../servers/gateway/dashboard/perch-hub/client.js");
+  const js = perchHubJs("en");
+  // new Function binds references at CALL time, so a parse test cannot catch a
+  // missing constant — it surfaces as a ReferenceError on the error path, which
+  // is the path nobody exercises by hand.
+  for (const name of ["SESSION_GONE", "NO_TRANSCRIPT", "RECONNECTING",
+                      "RECONNECT_FAILED", "ASK_STALE", "STEER_LABEL", "SEND_LABEL"]) {
+    if (!js.includes(name)) continue;               // not every task binds all of them
+    assert.ok(new RegExp("var\\s+" + name + "\\s*=").test(js), name + " is used but never bound");
+  }
+});
+
+test("async continuations are guarded — a fast back button must not cross sessions", async () => {
+  const { perchHubJs } = await import("../servers/gateway/dashboard/perch-hub/client.js");
+  const js = perchHubJs("en");
+  // The guards are load-bearing and were previously pinned only by a commit
+  // message. openSession's /roost fetch, loadHistory, onStreamError's options
+  // fetch, the reconnect timer, answerAsk, and every SSE listener.
+  // 11 as of this fix wave: openSession's /roost fetch, startSession's spawn
+  // continuation, every SSE listener (shared through on()), onStreamError's
+  // options probe, the reconnect timer, loadHistory, loadOptions, send(),
+  // answerAsk, and attachFile's upload continuation. A regression that drops
+  // one — the count that shipped with only 6 asserted — is invisible until
+  // an operator hits the exact race the dropped guard covered.
+  const guards = (js.match(/current\.sid\s*!==/g) || []).length;
+  assert.equal(guards, 11, "expected exactly 11 identity guards, found " + guards);
+});
+
+test("the emitted script never assigns to an innerHTML-class sink", async () => {
+  const { perchHubJs } = await import("../servers/gateway/dashboard/perch-hub/client.js");
+  const js = perchHubJs("en");
+  // crow_csrf is deliberately not HttpOnly, so an injection into any of
+  // these sinks exfiltrates it. A bare `.includes("innerHTML")` substring
+  // check also fails on a comment that WARNS against innerHTML, which is
+  // backwards — assert on the assignment/call shape instead.
+  // Matches both plain (=) and compound (+=) assignment — a compound
+  // assignment against these sinks parses and executes the same injection
+  // and a narrower regex let it through undetected.
+  assert.ok(!/\.innerHTML\s*\+?=/.test(js), "no .innerHTML assignment");
+  assert.ok(!/\.outerHTML\s*\+?=/.test(js), "no .outerHTML assignment");
+  assert.ok(!/\.insertAdjacentHTML\s*\(/.test(js), "no insertAdjacentHTML call");
+  assert.ok(!/document\.write\s*\(/.test(js), "no document.write call");
+});
+
+/** A function's OWN source, brace-matched. Never a fixed-size window: every
+ *  magic-number slice in earlier drafts of this plan was wrong, and this one
+ *  would straddle the very next function (resetBackoff, whose whole body is
+ *  `retries=0`) and fail against correct code. */
+async function fnSrc(name) {
+  const { perchHubJs } = await import("../servers/gateway/dashboard/perch-hub/client.js");
+  const src = perchHubJs("en");
+  const start = src.indexOf("function " + name);
+  assert.ok(start > -1, name + " is not in the emitted script");
+  const end = braceMatchEnd(src, start);
+  return src.slice(start, end + 1);
+}
+
+test("the reconnect cap is actually reachable", async () => {
+  const js = (await import("../servers/gateway/dashboard/perch-hub/client.js")).perchHubJs("en");
+  assert.ok(!(await fnSrc("cancelReconnect")).includes("retries=0"),
+    "cancelling the timer must not reset the counter — closeStream() runs before every schedule");
+  assert.ok(js.includes("function resetBackoff"), "the counter resets on a stream that opened, not on cancel");
+  assert.ok(/scheduleReconnect\(\)/.test(js), "no argument — the arity mismatch that made this dead code");
+});
+
+test("a model option shows its human name and says when it is not serving", async () => {
+  const modelOptionText = await extract("modelOptionText");
+  assert.equal(modelOptionText({ provider: "crow-local", id: "qwen3.6-35b-a3b",
+    name: "Qwen3.6 35B A3B", availability: "up" }), "Qwen3.6 35B A3B");
+  assert.equal(modelOptionText({ provider: "p", id: "m", name: "Big Model",
+    availability: "on_demand" }), "Big Model — starts on demand");
+  assert.equal(modelOptionText({ provider: "crow-dsv4", id: "deepseek-v4-flash",
+    name: "DeepSeek-V4-Flash", availability: "unavailable" }), "DeepSeek-V4-Flash — not running");
+  // No name on the entry falls back to provider/id, never to "undefined".
+  assert.equal(modelOptionText({ provider: "p", id: "m", availability: "up" }), "p/m");
+});
+
+test("a hibernating session disables the pickers rather than emptying them", async () => {
+  const optionsUsable = await extract("optionsUsable");
+  assert.equal(optionsUsable({ models: null, thinkingLevels: null }), false);
+  assert.equal(optionsUsable({ models: [], thinkingLevels: [] }), false);
+  assert.equal(optionsUsable({ models: [{ id: "m", provider: "p" }], thinkingLevels: ["off"] }), true);
+  assert.equal(optionsUsable(null), false);
+});
+
+test("control bodies use the exact keys the route reads, not camelCase", async () => {
+  const controlBody = await extract("controlBody");
+  assert.deepEqual(controlBody("model", "crow-local/qwen3.6-35b-a3b"),
+    { model: { provider: "crow-local", id: "qwen3.6-35b-a3b" } });
+  assert.deepEqual(controlBody("thinking", "off"), { thinking: "off" });
+  // The silent-failure guards: the route drops unknown keys and still 200s.
+  assert.deepEqual(controlBody("permission", "bypass"), { permission_mode: "bypass" });
+  assert.deepEqual(controlBody("plan", true), { plan_mode: true });
+});
+
+// Carried-over fix (found during Task 4): send(), closeSession() and the
+// abort path were all written but never connected to a DOM control, so the
+// chat view rendered and Send did nothing. Every review round missed it
+// because every test here extracts a pure function and asserts behaviour,
+// never reachability. This test pins reachability with structural regexes
+// against the assignment expression itself — a bare substring scan on
+// "send" false-negatives here, because that word also appears inside the
+// string 'The message did not send.' (SEND_FAILED's translation).
+test("perch-send, perch-back and perch-abort are actually wired to handlers", async () => {
+  const { perchHubJs } = await import("../servers/gateway/dashboard/perch-hub/client.js");
+  const js = perchHubJs("en");
+  // Masked against comments (same helper the extractor uses): a comment
+  // that merely NAMES the binding expression — e.g. one documenting this
+  // very fix — must not satisfy the assertion. Caught live while writing
+  // this test: replacing the real binding line with a comment that quoted
+  // it verbatim kept this test green until the mask was added.
+  const code = maskComments(js);
+  assert.ok(/el\(\s*['"]perch-send['"]\s*\)\.onclick\s*=\s*send\s*;/.test(code),
+    "#perch-send has no click handler bound to send()");
+  assert.ok(/el\(\s*['"]perch-back['"]\s*\)\.onclick\s*=\s*function\s*\(\)\s*\{\s*location\.hash\s*=\s*'';/.test(code),
+    "#perch-back must set location.hash='' so applyHash -> closeSession runs and history stays correct");
+  assert.ok(/el\(\s*['"]perch-abort['"]\s*\)\.onclick\s*=/.test(code),
+    "#perch-abort has no click handler bound");
+  assert.ok(/interactive\/'\+encodeURIComponent\(current\.sid\)\+'\/abort/.test(code),
+    "the abort handler must POST /interactive/<sid>/abort");
+});
+
+test("ask options are plain strings, exactly as the engine sends them", async () => {
+  const askOptions = await extract("askOptions");
+  // cardFrom() does options.slice() on whatever pi sent — strings.
+  assert.deepEqual(askOptions({ requestId: "r1", method: "select", options: ["yes", "no"] }), ["yes", "no"]);
+  assert.deepEqual(askOptions({ requestId: "r2", method: "input", placeholder: "name" }), []);
+  assert.deepEqual(askOptions({ requestId: "r3", method: "confirm" }), []);
+  assert.deepEqual(askOptions({ method: "select", options: ["a"] }), [], "no requestId is unanswerable");
+  assert.deepEqual(askOptions(null), []);
+});
+
+test("a confirm card answers with confirmed, never value — this one denies permissions if wrong", async () => {
+  const payloadFor = await extract("answerPayloadFor");
+  const card = { requestId: "r9", method: "confirm", title: "Run bash?" };
+  assert.deepEqual(payloadFor(card, { confirm: true }), { requestId: "r9", confirmed: true });
+  assert.deepEqual(payloadFor(card, { confirm: false }), { requestId: "r9", confirmed: false });
+  // The bug being guarded: {value:"yes"} on a confirm card reads as DENY.
+  const wrong = payloadFor(card, { confirm: true });
+  assert.ok(!("value" in wrong), "a confirm card must not carry value");
+});
+
+test("select, input and editor answer with value", async () => {
+  const payloadFor = await extract("answerPayloadFor");
+  assert.deepEqual(payloadFor({ requestId: "r1", method: "select" }, { value: "yes" }),
+    { requestId: "r1", value: "yes" });
+  assert.deepEqual(payloadFor({ requestId: "r2", method: "input" }, { value: "Kevin" }),
+    { requestId: "r2", value: "Kevin" });
+  assert.deepEqual(payloadFor({ requestId: "r3", method: "editor" }, { value: "line\nline" }),
+    { requestId: "r3", value: "line\nline" });
+});
+
+test("cancel is a real answer and outranks the method", async () => {
+  const payloadFor = await extract("answerPayloadFor");
+  // engine.answer checks cancelled FIRST, before the confirm branch.
+  assert.deepEqual(payloadFor({ requestId: "r4", method: "confirm" }, { cancelled: true }),
+    { requestId: "r4", cancelled: true });
+  assert.deepEqual(payloadFor({ requestId: "r5", method: "select" }, { cancelled: true }),
+    { requestId: "r5", cancelled: true });
+});
+
+test("an editor card offers its prefill and an input its placeholder", async () => {
+  const askFields = await extract("askFields");
+  assert.deepEqual(askFields({ requestId: "r1", method: "editor", prefill: "draft" }),
+    { initial: "draft", placeholder: "" });
+  assert.deepEqual(askFields({ requestId: "r2", method: "input", placeholder: "your name" }),
+    { initial: "", placeholder: "your name" });
+  assert.deepEqual(askFields({ requestId: "r3", method: "select", options: ["a"] }),
+    { initial: "", placeholder: "" });
+});
+
+// attachToCard (and its ATTACH_FAILED string) was zero-reference dead code —
+// no UI ever called it. Removed; it returns in a later PR with a real
+// trigger, at which point it gets its own test again.
+test("attachToCard is gone — dead code with no UI trigger, not a live route binding", async () => {
+  const js = (await import("../servers/gateway/dashboard/perch-hub/client.js")).perchHubJs("en");
+  assert.ok(!js.includes("attachToCard"));
+  assert.ok(!js.includes("ATTACH_FAILED"));
+});
+
+// ---------------------------------------------------------------------------
+// Full-script harness — runs the WHOLE emitted IIFE (not one extracted
+// function) against a fake DOM/fetch/EventSource in a fresh vm context.
+// Needed for anything the pure-function extractor above cannot see: real
+// bootstrap-time bindings (el('x').onchange=...), the effect of a rejected
+// fetch() on the promise chain, and event-listener collisions on the same
+// EventSource instance. vm.createContext gives ECMAScript builtins (Array,
+// JSON, Math, Promise, encodeURIComponent, ...) for free; document, window,
+// location, EventSource, fetch and the timer functions are supplied here.
+// ---------------------------------------------------------------------------
+
+function makeEventTarget() {
+  const listeners = {};
+  return {
+    addEventListener(type, fn) { (listeners[type] = listeners[type] || []).push(fn); },
+    removeEventListener(type, fn) {
+      const a = listeners[type]; if (!a) return;
+      const i = a.indexOf(fn); if (i >= 0) a.splice(i, 1);
+    },
+    _dispatch(type, ev) { (listeners[type] || []).slice().forEach((fn) => fn(ev)); },
+    _listenerCount(type) { return (listeners[type] || []).length; },
+  };
+}
+
+function makeFakeElement(tag) {
+  const target = makeEventTarget();
+  const attrs = {};
+  return Object.assign(target, {
+    tagName: String(tag || "div").toUpperCase(),
+    children: [],
+    style: {},
+    className: "",
+    textContent: "",
+    value: "",
+    checked: false,
+    disabled: false,
+    placeholder: "",
+    type: "",
+    files: null,
+    appendChild(child) { this.children.push(child); return child; },
+    removeChild(child) { const i = this.children.indexOf(child); if (i >= 0) this.children.splice(i, 1); return child; },
+    get firstChild() { return this.children[0] || null; },
+    insertBefore(node, ref) {
+      const i = ref ? this.children.indexOf(ref) : -1;
+      if (i < 0) this.children.unshift(node); else this.children.splice(i, 0, node);
+      return node;
+    },
+    setAttribute(name, val) { attrs[name] = String(val); },
+    getAttribute(name) { return Object.prototype.hasOwnProperty.call(attrs, name) ? attrs[name] : null; },
+    click() { if (this.onclick) this.onclick(); },
+  });
+}
+
+/** A fake EventSource that keeps addEventListener('error', ...) listeners
+ *  SEPARATE from the onerror property — exactly like a real one, where a
+ *  native connection failure reaches every "error" listener (not just
+ *  onerror) with an event that carries no .data, and a named server frame
+ *  reaches only addEventListener('error', ...) with a real .data string. */
+class FakeEventSource {
+  constructor(url) {
+    this.url = url;
+    this._t = makeEventTarget();
+    this.onopen = null;
+    this.onerror = null;
+    this.closed = false;
+    FakeEventSource.instances.push(this);
+  }
+  addEventListener(type, fn) { this._t.addEventListener(type, fn); }
+  removeEventListener(type, fn) { this._t.removeEventListener(type, fn); }
+  close() { this.closed = true; }
+  _open() { if (this.onopen) this.onopen(); }
+  /** A real named SSE frame: `event: <type>\ndata: <json>`. */
+  _serverFrame(type, dataObj) { this._t._dispatch(type, { data: JSON.stringify(dataObj) }); }
+  /** A native connection failure: type "error", no .data, delivered to every
+   *  "error" listener AND the onerror property — the collision I3 fixes. */
+  _nativeError() {
+    const ev = {};
+    this._t._dispatch("error", ev);
+    if (this.onerror) this.onerror(ev);
+  }
+}
+FakeEventSource.instances = [];
+
+function makeResponse(status, body) {
+  return { ok: status >= 200 && status < 300, status, json: async () => body };
+}
+
+/** Mounts the real emitted script in a fresh vm context. `fetchImpl(method,
+ *  path, opts)` decides how every perchApi call resolves; the default 200s
+ *  everything with `{}`. Returns the fake DOM pieces and every fetch call
+ *  made, in order, so a test can assert on both wiring and traffic. */
+async function mountHub({ fetchImpl } = {}) {
+  const { perchHubJs } = await import("../servers/gateway/dashboard/perch-hub/client.js");
+  const js = perchHubJs("en");
+
+  const IDS = ["perch-list-body", "perch-transcript", "perch-ask", "perch-bot-name",
+    "perch-session-meta", "perch-state", "perch-model", "perch-thinking", "perch-permission",
+    "perch-plan-mode", "perch-input", "perch-send", "perch-back", "perch-abort",
+    "perch-attach", "perch-file-input", "perch-chat"];
+  const els = {};
+  for (const id of IDS) els[id] = makeFakeElement(id === "perch-plan-mode" ? "input" : "div");
+
+  const bodyEl = makeFakeElement("body");
+  const fetchCalls = [];
+  const fetchFn = fetchImpl || (() => Promise.resolve(makeResponse(200, {})));
+
+  const doc = {
+    cookie: "crow_csrf=test-csrf-token",
+    body: bodyEl,
+    getElementById(id) { return els[id] || null; },
+    createElement(tag) { return makeFakeElement(tag); },
+  };
+
+  const winTarget = makeEventTarget();
+  const vvTarget = makeEventTarget();
+  const visualViewport = Object.assign(vvTarget, { height: 700, offsetTop: 0 });
+  const win = Object.assign(winTarget, { visualViewport, innerHeight: 800 });
+
+  const locState = { hash: "" };
+  const location = {
+    get hash() { return locState.hash; },
+    set hash(v) { locState.hash = v; winTarget._dispatch("hashchange", {}); },
+    href: "",
+  };
+
+  // Timers are recorded, never actually fired by the real clock — nothing
+  // under test needs a real 2s/10s wait, and a live setInterval would leak a
+  // handle past the end of every test that mounts this harness.
+  let timerSeq = 1;
+  const timers = new Map();
+  const sandbox = {
+    document: doc,
+    window: win,
+    location,
+    EventSource: FakeEventSource,
+    fetch(url, opts) {
+      const method = (opts && opts.method) || "GET";
+      const path = String(url).replace(/^.*perch-api/, "");
+      fetchCalls.push({ method, path, opts });
+      return Promise.resolve(fetchFn(method, path, opts));
+    },
+    setTimeout(fn) { const id = timerSeq++; timers.set(id, fn); return id; },
+    clearTimeout(id) { timers.delete(id); },
+    setInterval(fn) { const id = timerSeq++; timers.set(id, fn); return id; },
+    clearInterval(id) { timers.delete(id); },
+    FileReader: class {
+      constructor() { this.onload = null; this.result = null; }
+      readAsDataURL(file) {
+        this.result = "data:" + (file.type || "") + ";base64," + (file.b64 || "AAAA");
+        if (this.onload) this.onload();
+      }
+    },
+  };
+  vm.createContext(sandbox);
+  FakeEventSource.instances.length = 0;
+  vm.runInContext(js, sandbox);
+
+  // Drain one microtask hop so the bootstrap's own loadList() promise chain
+  // (perchApi -> .then -> renderList) has actually run before a test reads
+  // fetchCalls or the DOM it produced.
+  await new Promise((r) => setTimeout(r, 0));
+
+  return { els, doc, win, location, fetchCalls, sandbox, timers };
+}
+
+/** Opens a chat session the same way a real click does: seed a /roost
+ *  response with one live session, let the bootstrap's loadList() render it,
+ *  then click its row button — this drives openSession()/afterHeader() as
+ *  real user input would, rather than reaching into the closure. */
+async function openChatSession(hub, sid = "perchlive-aaaaaaaa") {
+  hub.location.hash = sid;
+  await new Promise((r) => setTimeout(r, 0));
+}
+
+const ROOST_ONE_LIVE = {
+  birds: [{ id: "r4", name: "R4 Assistant", perch_attached: true, state: "working",
+    sessions: [{ sessionId: "perchlive-aaaaaaaa", state: "awake", cardId: null, pendingUi: false }] }],
+};
+
+/** A fetchImpl covering the calls afterHeader() fires on a cold deep link
+ *  (GET /roost to resolve the bot, then options + transcript + the SSE
+ *  connect isn't fetch-based). Individual tests override specific paths via
+ *  `overrides`. */
+function stdFetch(overrides = {}) {
+  return (method, path) => {
+    for (const [matcher, fn] of Object.entries(overrides)) {
+      if (path.includes(matcher)) return fn(method, path);
+    }
+    if (path === "/roost") return makeResponse(200, ROOST_ONE_LIVE);
+    if (path.endsWith("/options")) return makeResponse(200, { models: [], thinkingLevels: [] });
+    if (path.endsWith("/transcript")) return makeResponse(200, { events: [] });
+    return makeResponse(200, {});
+  };
+}
+
+// ---- C1: the queued image actually rides the next message, then clears ----
+
+test("C1: an attached image rides the NEXT /message body and the queue empties", async () => {
+  const hub = await mountHub({ fetchImpl: stdFetch() });
+  await openChatSession(hub);
+
+  // attachFile() is reached only through the real onchange binding — set a
+  // file on the fake input and fire it, exactly as a browser would.
+  hub.els["perch-file-input"].files = [{ name: "shot.png", type: "image/png", b64: "Zm9v" }];
+  hub.els["perch-file-input"].onchange();
+  await new Promise((r) => setTimeout(r, 0));
+
+  hub.els["perch-input"].value = "look at this";
+  hub.els["perch-send"].onclick();
+  await new Promise((r) => setTimeout(r, 0));
+
+  const sent = hub.fetchCalls.filter((c) => c.path.endsWith("/message"));
+  assert.equal(sent.length, 1, "one message went out");
+  const body = JSON.parse(sent[0].opts.body);
+  assert.deepEqual(body.images, [{ mime: "image/png", data_b64: "Zm9v" }],
+    "the image the drawer's own wire shape uses — {mime,data_b64}");
+
+  // A second send with nothing newly attached must not resend the same image.
+  hub.els["perch-input"].value = "and again";
+  hub.els["perch-send"].onclick();
+  await new Promise((r) => setTimeout(r, 0));
+  const secondBody = JSON.parse(hub.fetchCalls.filter((c) => c.path.endsWith("/message")).at(-1).opts.body);
+  assert.equal("images" in secondBody, false, "the queue must be empty on the next send");
+});
+
+test("C1: a non-image upload is never queued onto a send", async () => {
+  const hub = await mountHub({ fetchImpl: stdFetch() });
+  await openChatSession(hub);
+  hub.els["perch-file-input"].files = [{ name: "notes.txt", type: "text/plain", b64: "aGk=" }];
+  hub.els["perch-file-input"].onchange();
+  await new Promise((r) => setTimeout(r, 0));
+  hub.els["perch-input"].value = "hello";
+  hub.els["perch-send"].onclick();
+  await new Promise((r) => setTimeout(r, 0));
+  const sent = hub.fetchCalls.filter((c) => c.path.endsWith("/message"));
+  const body = JSON.parse(sent.at(-1).opts.body);
+  assert.equal("images" in body, false);
+});
+
+// ---- C2: perchApi resolves (never rejects) on a network-level failure ----
+
+test("C2: a destroyed socket reaches onStreamError and schedules a reconnect", async () => {
+  // The options probe onStreamError fires rejects at the transport level —
+  // exactly what a dropped tunnel/gateway restart looks like from fetch().
+  const hub = await mountHub({
+    fetchImpl: stdFetch({ "/options": () => Promise.reject(new Error("network down")) }),
+  });
+  await openChatSession(hub);
+  assert.equal(FakeEventSource.instances.length, 1);
+  const es = FakeEventSource.instances[0];
+  es._nativeError();                          // the onerror property fires this
+  await new Promise((r) => setTimeout(r, 0));
+  await new Promise((r) => setTimeout(r, 0));  // one more hop: options probe -> scheduleReconnect
+
+  const notes = hub.els["perch-transcript"].children
+    .filter((c) => c.className.includes("note")).map((c) => c.textContent);
+  assert.ok(notes.includes("Reconnecting…"),
+    "scheduleReconnect() must run — before this fix the options probe's promise " +
+    "never settled and this .then() body never ran at all");
+});
+
+test("C2: a failed send appends a visible note instead of vanishing silently", async () => {
+  const hub = await mountHub({
+    fetchImpl: stdFetch({ "/message": () => Promise.reject(new Error("network down")) }),
+  });
+  await openChatSession(hub);
+  hub.els["perch-input"].value = "hello";
+  hub.els["perch-send"].onclick();
+  await new Promise((r) => setTimeout(r, 0));
+  const notes = hub.els["perch-transcript"].children
+    .filter((c) => c.className.includes("note")).map((c) => c.textContent);
+  assert.ok(notes.includes("The message did not send."),
+    "send()'s .then must actually run on a rejected fetch for this note to appear");
+});
+
+// ---- I3: a native connection error must not masquerade as an engine frame ----
+
+test("I3: a native EventSource error prints nothing; a real error FRAME prints its text", async () => {
+  const hub = await mountHub({ fetchImpl: stdFetch() });
+  await openChatSession(hub);
+  const es = FakeEventSource.instances[0];
+
+  const notesBefore = hub.els["perch-transcript"].children.length;
+  es._t._dispatch("error", {});               // native: no .data, addEventListener path only
+  await new Promise((r) => setTimeout(r, 0));
+  const notesAfterNative = hub.els["perch-transcript"].children
+    .filter((c) => c.className.includes("note")).map((c) => c.textContent);
+  assert.ok(!notesAfterNative.includes("error"),
+    "a native connection failure must not print a bare 'error' note");
+
+  es._serverFrame("error", { text: "pi crashed" });
+  await new Promise((r) => setTimeout(r, 0));
+  const notesAfterFrame = hub.els["perch-transcript"].children
+    .filter((c) => c.className.includes("note")).map((c) => c.textContent);
+  assert.ok(notesAfterFrame.includes("pi crashed"),
+    "a real engine error FRAME must still render its text");
+  assert.ok(notesBefore <= notesAfterFrame.length - 1);
+});
+
+// ---- I2: bindings a green suite could previously delete undetected ----
+
+test("I2: perchApi sends X-Crow-Csrf carrying the actual cookie value", async () => {
+  const hub = await mountHub({ fetchImpl: stdFetch() });
+  assert.ok(hub.fetchCalls.length >= 1, "the bootstrap's own loadList() must have fired");
+  const headers = hub.fetchCalls[0].opts.headers;
+  assert.equal(headers["X-Crow-Csrf"], "test-csrf-token",
+    "must carry the value parsed out of document.cookie, not a hardcoded or absent header");
+});
+
+test("I2: the model/thinking/permission/plan-mode pickers are wired to POST /control", async () => {
+  const hub = await mountHub({ fetchImpl: stdFetch() });
+  await openChatSession(hub);
+  hub.fetchCalls.length = 0;
+
+  hub.els["perch-model"].value = "crow-local/qwen3.6-35b-a3b";
+  hub.els["perch-model"].onchange();
+  hub.els["perch-thinking"].value = "high";
+  hub.els["perch-thinking"].onchange();
+  hub.els["perch-permission"].value = "bypass";
+  hub.els["perch-permission"].onchange();
+  hub.els["perch-plan-mode"].checked = true;
+  hub.els["perch-plan-mode"].onchange();
+  await new Promise((r) => setTimeout(r, 0));
+
+  const controlCalls = hub.fetchCalls.filter((c) => c.path.endsWith("/control"));
+  assert.equal(controlCalls.length, 4, "all four pickers must post a control change");
+  const bodies = controlCalls.map((c) => JSON.parse(c.opts.body));
+  assert.deepEqual(bodies[0], { model: { provider: "crow-local", id: "qwen3.6-35b-a3b" } });
+  assert.deepEqual(bodies[1], { thinking: "high" });
+  assert.deepEqual(bodies[2], { permission_mode: "bypass" });
+  assert.deepEqual(bodies[3], { plan_mode: true });
+});
+
+test("I2: an ask_user frame actually renders the card — the listener is live", async () => {
+  const hub = await mountHub({ fetchImpl: stdFetch() });
+  await openChatSession(hub);
+  const es = FakeEventSource.instances[0];
+  es._serverFrame("ask_user", { requestId: "r1", method: "confirm", title: "Run bash?" });
+  await new Promise((r) => setTimeout(r, 0));
+  assert.equal(hub.els["perch-ask"].children.length, 1, "renderAsk must have written a card");
+  assert.equal(hub.els["perch-ask"].children[0].className, "ask-card");
+});
+
+test("I2: the attach button opens the file picker", async () => {
+  const hub = await mountHub({ fetchImpl: stdFetch() });
+  await openChatSession(hub);
+  let clicked = false;
+  hub.els["perch-file-input"].click = () => { clicked = true; };
+  hub.els["perch-attach"].onclick();
+  assert.ok(clicked, "#perch-attach must delegate to the hidden file input");
+});
+
+test("I2: applyVV is bound to BOTH visualViewport events, not two different handlers", async () => {
+  const hub = await mountHub({ fetchImpl: stdFetch() });
+  await openChatSession(hub);
+  const vv = hub.win.visualViewport;
+  assert.equal(vv._listenerCount("resize"), 1);
+  assert.equal(vv._listenerCount("scroll"), 1);
+  // Firing either must run the SAME real computation, not a no-op stand-in —
+  // rebinding both calls to `function(){}` still satisfies "one listener
+  // each", so the proof has to be behavioral: it must actually move the
+  // padding, from the visualViewport numbers this harness set.
+  hub.win.innerHeight = 800;
+  vv.height = 650; vv.offsetTop = 0;           // 150px of keyboard behind the layout viewport
+  vv._dispatch("resize", {});
+  assert.equal(hub.els["perch-chat"].style.paddingBottom, "150px");
+  hub.els["perch-chat"].style.paddingBottom = "";
+  vv.height = 800;                             // keyboard gone
+  vv._dispatch("scroll", {});
+  assert.equal(hub.els["perch-chat"].style.paddingBottom, "",
+    "scroll must run the identical calculation, not a stub bound separately");
+});
diff --git a/tests/perch-hub-page.test.js b/tests/perch-hub-page.test.js
new file mode 100644
index 00000000..1f39fa29
--- /dev/null
+++ b/tests/perch-hub-page.test.js
@@ -0,0 +1,173 @@
+// The hub is a full document, not a dashboard panel: the panel shell is a
+// large part of what made the drawer cramped on a phone. It still lives under
+// /dashboard so it inherits dashboardAuth, CSRF and the Funnel rejection —
+// dashboard/index.js applies those with router.use("/dashboard", ...), so a
+// bare top-level /perch would inherit none of them.
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+
+const REPO = new URL("..", import.meta.url).pathname;
+
+test("the hub renders a complete HTML document with a mobile viewport", async () => {
+  const { perchHubDocument } = await import("../servers/gateway/dashboard/perch-hub/html.js");
+  const html = perchHubDocument("en");
+  assert.ok(html.startsWith("<!DOCTYPE html>"), "a document, not a fragment");
+  assert.ok(html.includes('name="viewport"'), "without this a phone renders it at desktop width");
+  assert.ok(html.includes("width=device-width"));
+  assert.ok(/<html lang="en"/.test(html));
+});
+
+test("the document carries both view shells and the hub stylesheet", async () => {
+  const { perchHubDocument } = await import("../servers/gateway/dashboard/perch-hub/html.js");
+  const html = perchHubDocument("en");
+  assert.ok(html.includes('id="perch-list"'), "the session list view");
+  assert.ok(html.includes('id="perch-chat"'), "the chat view");
+  assert.ok(html.includes("<style>"), "styles are inlined — no extra request on a phone");
+});
+
+test("the stylesheet keeps Perch's own palette and honours OS dark mode", async () => {
+  const { perchHubCss } = await import("../servers/gateway/dashboard/perch-hub/css.js");
+  const css = perchHubCss();
+  for (const v of ["--sky", "--card", "--ink", "--dim", "--teal", "--line", "--alive", "--attn"]) {
+    assert.ok(css.includes(v + ":"), `${v} is part of the look being restored`);
+  }
+  assert.ok(css.includes("@media (prefers-color-scheme:dark)"));
+  assert.ok(!css.includes("<style>"), "perchHubCss returns bare CSS; html.js wraps it");
+});
+
+test("perchHubRouter serves /dashboard/perch when auth passes (the /perch redirect below is this test's own stand-in route, not perchHubRouter's)", async () => {
+  const { default: perchHubRouter } = await import("../servers/gateway/routes/perch-hub.js");
+  const { default: express } = await import("express");
+  const app = express();
+  // Auth is a pass-through stub here deliberately — this test exercises only
+  // perchHubRouter's own routing: it registers a relative "/perch" handler
+  // that SERVES the page (mounted under "/dashboard" below, so the effective
+  // path is /dashboard/perch). It does NOT redirect a bare top-level /perch —
+  // that redirect is a separate route dashboard/index.js registers directly
+  // on the app, outside this router. The app.get("/perch", ...) line right
+  // below is this test's OWN stand-in for that separate route, added only so
+  // this fetch block can exercise the same short-link flow a real request
+  // would follow. The real wiring — that dashboard/index.js actually mounts
+  // perchHubRouter AND actually registers that redirect — is pinned
+  // separately by the source-level guard below, "dashboard/index.js source
+  // mounts perchHubRouter and registers the /perch redirect" — see that
+  // test's own comment for why it reads source instead of firing requests.
+  app.use("/dashboard", perchHubRouter((req, res, next) => next()));
+  app.get("/perch", (req, res) => res.redirect(302, "/dashboard/perch"));
+  const srv = await new Promise((r) => { const s = app.listen(0, "127.0.0.1", () => r(s)); });
+  try {
+    const base = "http://127.0.0.1:" + srv.address().port;
+    const red = await fetch(base + "/perch", { redirect: "manual" });
+    assert.equal(red.status, 302);
+    assert.equal(red.headers.get("location"), "/dashboard/perch");
+    const page = await fetch(base + "/dashboard/perch");
+    assert.equal(page.status, 200);
+    assert.ok((await page.text()).startsWith("<!DOCTYPE html>"));
+  } finally { srv.close(); }
+});
+
+test("dashboard/index.js source mounts perchHubRouter and registers the /perch redirect", () => {
+  // SOURCE-LEVEL guard, not a request-level one — and it has to be, not by
+  // choice. dashboardAuth is a static import near the top of dashboard/index.js,
+  // not the mcpAuthMiddleware parameter dashboardRouter() actually takes, so
+  // there is no way to inject a pass-through auth and reach a handler at
+  // runtime to prove presence/absence of either wiring. Worse: dashboardAuth
+  // is applied to the WHOLE "/dashboard" prefix (router.use("/dashboard",
+  // dashboardAuth), further down in the same file) and its isAllowedNetwork() check 403s an
+  // unauthenticated off-network request BEFORE any route matching happens —
+  // identically whether or not perchHubRouter is mounted underneath it. A
+  // request-level test therefore cannot distinguish "mounted" from "not
+  // mounted"; it was tried and proved not to (round 2 of this task's review
+  // deleted only the mount line, left the /perch redirect, and the prior
+  // version of this test stayed green). Reading the source and asserting on
+  // it is the only thing that actually pins these two lines.
+  const src = readFileSync(join(REPO, "servers/gateway/dashboard/index.js"), "utf8");
+  assert.match(
+    src,
+    /router\.use\(\s*"\/dashboard",\s*perchHubRouter\(dashboardAuth\)\s*\)/,
+    "perchHubRouter must be mounted onto the /dashboard prefix"
+  );
+  assert.match(
+    src,
+    /router\.get\(\s*"\/perch",[\s\S]{0,120}?\/dashboard\/perch/,
+    "the top-level /perch short link must redirect to /dashboard/perch"
+  );
+});
+
+test("an absent bot engine is stated up front, not discovered on the first tap", async () => {
+  const { perchHubDocument } = await import("../servers/gateway/dashboard/perch-hub/html.js");
+  const absent = perchHubDocument("en", { state: "absent" });
+  assert.ok(absent.includes("/dashboard/extensions"), "with a way to fix it");
+  const ready = perchHubDocument("en", { state: "ready" });
+  assert.ok(!ready.includes("perch-engine-banner"), "no banner when the engine is fine");
+  // engineStatus has FOUR states. Only "absent" means "go install it" —
+  // sending a mid-install or breaker-open operator to Extensions is a dead end.
+  for (const state of ["installing", "unhealthy"]) {
+    const html = perchHubDocument("en", { state });
+    assert.ok(html.includes("perch-engine-banner"), state + " still warrants a banner");
+    assert.ok(!html.includes("/dashboard/extensions"), state + " must not say 'install it'");
+  }
+});
+
+test("the emitted client script is valid JavaScript", async () => {
+  const { perchHubJs } = await import("../servers/gateway/dashboard/perch-hub/client.js");
+  // new Function throws a SyntaxError on malformed source without running it.
+  assert.doesNotThrow(() => new Function(perchHubJs("en")));
+});
+
+test("the chat column carries the rules the renderer cannot prove", async () => {
+  // Headless Chrome under setDeviceMetricsOverride has no URL bar, so
+  // 100dvh === 100vh there and this rule can't be proven by rendering it —
+  // it is pinned here instead. The other three are pinned directly against
+  // the stylesheet text for different reasons, checked by mutation against
+  // the phone reachability render test in perch-hub-render.test.js:
+  // dropping #perch-composer's position:sticky OR its bottom:0, each alone,
+  // does turn that render test red (it is not "close to unfailable" on that
+  // pair, as an earlier version of this comment claimed) — pinned here
+  // anyway so the CSS rule is documented and the failure is legible without
+  // a browser. Dropping the composer's own background, or the transcript's
+  // min-height:0, leaves the render test green (background is a paint
+  // property invisible to getBoundingClientRect; the seeded transcript
+  // in this repo's render test isn't long enough to force the shrink
+  // min-height:0 guards against) — for those two, this is the only test
+  // that catches a regression.
+  const { perchHubCss } = await import("../servers/gateway/dashboard/perch-hub/css.js");
+  const css = perchHubCss().replace(/\s+/g, "");
+  assert.ok(css.includes("height:100vh;height:100dvh"),
+    "dvh must FOLLOW vh — vh alone hides the last strip behind the browser chrome");
+  assert.ok(/#perch-composer\{[^}]*position:sticky/.test(css));
+  assert.ok(/#perch-composer\{[^}]*bottom:0/.test(css));
+  assert.ok(/#perch-composer\{[^}]*background:/.test(css), "or the transcript shows through it");
+  assert.ok(/#perch-transcript\{[^}]*min-height:0/.test(css),
+    "a flex child without min-height:0 refuses to shrink and pushes the composer off-screen");
+});
+
+test("the on-screen keyboard is accounted for", async () => {
+  // Asserts that BOTH listeners are actually bound, not just that the word
+  // "visualViewport" appears somewhere in the source — a bare .includes()
+  // still passes against `if(window.visualViewport){ var vv=window.visualViewport; }`
+  // with both addEventListener calls stripped out, a dead stub. No headless
+  // harness raises a keyboard, so this proves the wiring only, never the
+  // on-screen behaviour: iOS Safari does not shrink the layout viewport for
+  // the keyboard, so 100dvh alone stays full-height and a bottom:0 sticky
+  // composer sits behind it; visualViewport is the only API that reports the
+  // genuinely visible area, and resize/scroll are the events it fires when
+  // that area changes.
+  const { perchHubJs } = await import("../servers/gateway/dashboard/perch-hub/client.js");
+  const js = perchHubJs("en");
+  assert.match(js, /vv\.addEventListener\(\s*['"]resize['"]/,
+    "the resize listener must be bound, not just the visualViewport token present");
+  assert.match(js, /vv\.addEventListener\(\s*['"]scroll['"]/,
+    "the scroll listener must be bound, not just the visualViewport token present");
+});
+
+test("every control in the chat header carries a visible label", async () => {
+  const { perchHubDocument } = await import("../servers/gateway/dashboard/perch-hub/html.js");
+  const html = perchHubDocument("en");
+  for (const id of ["perch-model", "perch-thinking", "perch-permission"]) {
+    assert.ok(html.includes(`id="${id}-label"`), `${id} needs a visible label`);
+    assert.ok(new RegExp(`id="${id}"[^>]*aria-labelledby="${id}-label"`).test(html));
+  }
+});
diff --git a/tests/perch-hub-render.test.js b/tests/perch-hub-render.test.js
new file mode 100644
index 00000000..043f7258
--- /dev/null
+++ b/tests/perch-hub-render.test.js
@@ -0,0 +1,101 @@
+// The drawer's defining mobile failure was Send sitting below the viewport at
+// every scroll position except the very bottom. Assert reachability with the
+// transcript scrolled to the TOP, which is where a reader starts. A screenshot
+// did not catch this; getBoundingClientRect did.
+import { test, before, after } from "node:test";
+import assert from "node:assert/strict";
+import http from "node:http";
+
+// The repo's convention is CROW_BROWSER_CDP_PORT (tests/pibot-crow-server-catalog.test.js:38).
+const CDP = process.env.CROW_CDP_URL ||
+  ("http://127.0.0.1:" + (process.env.CROW_BROWSER_CDP_PORT || "9223"));
+// The CDP browser runs in Docker: it cannot reach 127.0.0.1 on the host, and
+// file:// is unreachable entirely. Bind 0.0.0.0 and navigate to the bridge.
+const HOST_FROM_CONTAINER = process.env.CROW_CDP_HOST_IP || "172.17.0.1";
+
+let available = false, server = null, port = 0;
+
+before(async () => {
+  try {
+    const r = await fetch(CDP + "/json/version", { signal: AbortSignal.timeout(2000) });
+    available = r.ok;
+  } catch { available = false; }
+  if (!available) return;
+  const { perchHubDocument } = await import("../servers/gateway/dashboard/perch-hub/html.js");
+  const doc = perchHubDocument("en");
+  server = http.createServer((req, res) => { res.writeHead(200, { "content-type": "text/html" }); res.end(doc); });
+  await new Promise((r) => server.listen(0, "0.0.0.0", r));
+  port = server.address().port;
+});
+
+after(() => { if (server) server.close(); });
+
+/** Open a tab, run one expression, return its value, close the tab. */
+async function evaluate(width, height, expression) {
+  const tab = await (await fetch(CDP + "/json/new?about:blank", { method: "PUT" })).json();
+  const { default: WebSocket } = await import("ws");
+  const ws = new WebSocket(tab.webSocketDebuggerUrl);
+  await new Promise((r, j) => { ws.once("open", r); ws.once("error", j); });
+  let id = 0;
+  const send = (method, params = {}) => new Promise((resolve, reject) => {
+    const mine = ++id;
+    const onMsg = (raw) => {
+      const m = JSON.parse(raw);
+      if (m.id !== mine) return;
+      ws.off("message", onMsg);
+      m.error ? reject(new Error(JSON.stringify(m.error))) : resolve(m.result || {});
+    };
+    ws.on("message", onMsg);
+    ws.send(JSON.stringify({ id: mine, method, params }));
+  });
+  try {
+    await send("Emulation.setDeviceMetricsOverride",
+      { width, height, deviceScaleFactor: 2, mobile: width < 900 });
+    await send("Page.enable");
+    await send("Page.navigate", { url: `http://${HOST_FROM_CONTAINER}:${port}/` });
+    await new Promise((r) => setTimeout(r, 1500));
+    const out = await send("Runtime.evaluate", { expression, returnByValue: true });
+    // Without this, an expression that threw returns undefined and the caller's
+    // JSON.parse fails with "undefined is not valid JSON" — a confusing error
+    // instead of the real one.
+    if (out.exceptionDetails) throw new Error("page threw: " + JSON.stringify(out.exceptionDetails));
+    if (out.result.value === undefined) throw new Error("expression produced no value");
+    return out.result.value;
+  } finally {
+    ws.close();
+    await fetch(CDP + "/json/close/" + tab.id).catch(() => {});
+  }
+}
+
+const SEED_AND_MEASURE = `
+(function(){
+  document.body.setAttribute('data-view','chat');
+  var tr=document.getElementById('perch-transcript');
+  for(var i=0;i<16;i++){ var d=document.createElement('div');
+    d.textContent='bot: a transcript line long enough to take a row or two, number '+i;
+    tr.appendChild(d); }
+  tr.scrollTop=0;                                  // where a reader starts
+  var b=document.getElementById('perch-send').getBoundingClientRect();
+  return JSON.stringify({viewport:innerHeight,top:Math.round(b.top),
+    bottom:Math.round(b.bottom),reachable:b.bottom<=innerHeight&&b.top>=0});
+})()`;
+
+test("Send is reachable at 412x730 with the transcript scrolled to the top", async (t) => {
+  if (!available) return t.skip("no CDP endpoint at " + CDP);
+  const measured = JSON.parse(await evaluate(412, 730, SEED_AND_MEASURE));
+  assert.equal(measured.reachable, true,
+    `Send at ${measured.top}-${measured.bottom} in a ${measured.viewport}px viewport`);
+});
+
+test("both views are visible side by side at desktop width", async (t) => {
+  if (!available) return t.skip("no CDP endpoint at " + CDP);
+  const visible = JSON.parse(await evaluate(1280, 900, `
+    (function(){
+      document.body.setAttribute('data-view','chat');
+      var vis=function(id){ var e=document.getElementById(id);
+        return getComputedStyle(e).display !== 'none'; };
+      return JSON.stringify({list:vis('perch-list'),chat:vis('perch-chat')});
+    })()`));
+  assert.equal(visible.list, true, "the min-width:900px split keeps the list up");
+  assert.equal(visible.chat, true);
+});