@ashley-shrok/viewmodel-shell 0.5.0 → 0.7.0

package/dist/tui.js

@@ -1,1165 +1,286 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { render as inkRender, Box, Text, useInput, useStdin, useStdout, } from "ink";
-import TextInput from "ink-text-input";
-import SelectInput from "ink-select-input";
-import { spawn } from "node:child_process";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@opentui/react/jsx-runtime";
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import { homedir } from "node:os";
 import { join } from "node:path";
-const NO_CTX = {
-    focusedKey: null,
-    copiedKey: null,
-    focusKey: () => undefined,
-    interactive: false,
-    fill: false,
-    draft: () => undefined,
-};
-/** OSC 52 clipboard write — the terminal-native analog of the clipboard API.
- *  Works over SSH (no local clipboard dependency). Exported for a direct,
- *  deterministic unit test of the byte format. */
-export function osc52(text) {
-    return `\x1b]52;c;${Buffer.from(String(text), "utf8").toString("base64")}\x07`;
-}
-/** Hand a URL to a real browser — the terminal analog of a redirect. Zero-dep
- *  (node:child_process). Opener order: $BROWSER → platform default. Detached +
- *  unref so a launched browser can never hold or block the Node event loop
- *  (teardown discipline). Returns false only if spawn threw *synchronously*
- *  (no opener attempted); an async spawn failure (e.g. ENOENT — no xdg-open)
- *  invokes `onSpawnError`. Callers map BOTH false and onSpawnError to the loud
- *  interstitial, so a redirect is never silently lost. Exported so a unit test
- *  can drive it with a stubbed node:child_process. */
-export function openExternal(url, onSpawnError) {
-    const br = process.env.BROWSER;
-    const [cmd, args] = br && br.trim()
-        ? [br, [url]]
-        : process.platform === "darwin"
-            ? ["open", [url]]
-            : process.platform === "win32"
-                ? ["cmd", ["/c", "start", "", url]]
-                : ["xdg-open", [url]];
-    try {
-        const child = spawn(cmd, args, { stdio: "ignore", detached: true });
-        child.once("error", () => onSpawnError?.());
-        child.unref();
-        return true;
-    }
-    catch {
-        return false;
-    }
-}
-export function classify(url, fromEndpoint) {
-    const u = (url ?? "").trim();
-    if (!u)
-        return { kind: "invalid", url };
-    let abs;
-    try {
-        abs = new URL(u); // absolute?
+import { spawn } from "node:child_process";
+export class TuiAdapter {
+    renderer = null;
+    root = null;
+    pending = null;
+    initPromise = null;
+    disposed = false;
+    viewport;
+    sidebarFraction;
+    sessionStore = new Map();
+    // Focus model owned by the adapter (not by React hooks) so the static
+    // conformance walker can invoke components without a reconciler.
+    focusedPaneIndex = 0;
+    lastPaneCount = 0;
+    // B3 — field state owned by the adapter. fieldValues is the live edit
+    // state (mutated by <input> onInput callbacks); fieldWireValues tracks
+    // the last-seen wire value per field so we can detect server intent
+    // changes (the AGENTS.md draft-preservation contract: user edits survive
+    // re-renders UNLESS the server explicitly sets a new value).
+    fieldValues = new Map();
+    fieldWireValues = new Map();
+    // B4 — copy-button feedback state. `copiedKey` is set to the node.text
+    // string of the most recently activated copy-button; reverts to null
+    // after 1500ms. CopyButtonView checks ctx.copiedKey === node.text to
+    // decide whether to render the copiedLabel. Two buttons with the same
+    // copy text share this state (both flash "Copied!" together) — that's
+    // fine UX-wise and avoids needing per-button unique keys.
+    copiedKey = null;
+    copiedTimer = null;
+    constructor(opts) {
+        this.viewport = opts?.viewport ?? "fill";
+        const f = opts?.sidebarFraction ?? 1 / 3;
+        this.sidebarFraction = Math.min(0.6, Math.max(0.15, f));
     }
-    catch {
+    // ── Field state plumbing (B3) ─────────────────────────────────────────────
+    // These are exposed on RCtx via the App's prop wiring so renderers can
+    // read/write field state without holding a reference to the adapter.
+    // setFieldValue is invoked from <input>/<textarea>/<select> change callbacks
+    // — it MUST NOT trigger a re-render (each keystroke would flicker). The map
+    // is only read on submit and on the next external re-render (server push).
+    setFieldValue = (name, value) => {
+        this.fieldValues.set(name, value);
+    };
+    /** Resolve a field's display value at render time. The draft-preservation
+     *  contract (AGENTS.md) is "user edits survive re-renders UNLESS the server
+     *  explicitly sets a new value for that field." Three states:
+     *    1. First time we see this field name — initialize the wire baseline
+     *       WITHOUT clobbering any pre-existing edit value (matters when a test
+     *       primes fieldValues via setFieldValue before the first render).
+     *    2. Wire value unchanged since last render — preserve the edit value.
+     *    3. Wire value differs from the prior wire baseline — server intent
+     *       change → reset the edit value to match. */
+    // ── Copy-button state plumbing (B4) ───────────────────────────────────────
+    // copy() writes the text to the system clipboard via OSC-52 (escape
+    // sequence the terminal forwards to the OS), sets copiedKey, re-renders
+    // so the button label swaps to copiedLabel, and schedules a 1500ms timer
+    // that clears copiedKey + re-renders again. The clipboard write happens
+    // even in conformance/test paths where the renderer isn't initialized
+    // (Bun-free environments) — the write goes to process.stdout, which is
+    // always available, and the re-render flush is a no-op if the renderer
+    // isn't up.
+    //
+    // OSC-52 byte form is the SAME as the 0.4.8 link OSC-8 fix used:
+    // ESC ] 52 ; c ; <base64> BEL. ESC = \x1b, BEL = \x07. Terminals without
+    // OSC-52 support ignore the escape (no clipboard write, but the visual
+    // "Copied!" feedback still fires, which is honest behavior).
+    copy = (text) => {
+        const b64 = Buffer.from(text, "utf8").toString("base64");
+        const seq = `\x1b]52;c;${b64}\x07`;
         try {
-            // relative → resolve against the current endpoint ⇒ same-origin.
-            return { kind: "same-origin", endpoint: new URL(u, fromEndpoint).toString() };
-        }
-        catch {
-            return { kind: "invalid", url };
+            process.stdout.write(seq);
         }
-    }
-    try {
-        return abs.origin === new URL(fromEndpoint).origin
-            ? { kind: "same-origin", endpoint: abs.toString() }
-            : { kind: "different-origin", url: abs.toString() };
-    }
-    catch {
-        return { kind: "invalid", url };
-    }
-}
-const isTruthyFormValue = (v) => !!v && v !== "false" && v !== "0";
-/** A per-column-filter identity. A `TableColumn` object is reused for the
- *  sortable header's focus mapping, so its filter input needs a DISTINCT,
- *  stable-within-a-render identity for `map`/`rctx.focusKey`. WeakMap keyed by
- *  the column object → the same sentinel in collectFocusables and the renderer
- *  of one render pass; a fresh column object each server re-render makes a new
- *  sentinel (focus continuity is by key string + reconcile(), never object
- *  identity — same as every other focusable). */
-const _filterIdent = new WeakMap();
-function filterIdent(col) {
-    let o = _filterIdent.get(col);
-    if (!o) {
-        o = {};
-        _filterIdent.set(col, o);
-    }
-    return o;
-}
-/** Terminal display width, Unicode-aware enough for table column alignment.
- *  Strips CSI/OSC escapes (incl. OSC 8) so a measured cell never includes
- *  hyperlink bytes — the Phase-1 string-width over-count, here avoided by not
- *  depending on string-width at all (zero new deps). Cells are width-bounded
- *  Boxes, so a misestimate of an exotic glyph is at worst cosmetic, never the
- *  Phase-1/5a layout corruption. */
-function dispWidth(s) {
-    const clean = s
-        // eslint-disable-next-line no-control-regex
-        .replace(/\x1b\][^\x07]*(?:\x07|\x1b\\)/g, "")
-        // eslint-disable-next-line no-control-regex
-        .replace(/\x1b\[[0-9;]*m/g, "");
-    let w = 0;
-    for (const ch of clean) {
-        const cp = ch.codePointAt(0);
-        if (cp === 0)
-            continue;
-        if ((cp >= 0x300 && cp <= 0x36f) ||
-            cp === 0x200d ||
-            (cp >= 0xfe00 && cp <= 0xfe0f))
-            continue; // combining / ZWJ / variation selectors → width 0
-        if ((cp >= 0x1100 && cp <= 0x115f) ||
-            (cp >= 0x2e80 && cp <= 0xa4cf) ||
-            (cp >= 0xac00 && cp <= 0xd7a3) ||
-            (cp >= 0xf900 && cp <= 0xfaff) ||
-            (cp >= 0xfe30 && cp <= 0xfe4f) ||
-            (cp >= 0xff00 && cp <= 0xff60) ||
-            (cp >= 0xffe0 && cp <= 0xffe6) ||
-            (cp >= 0x1f300 && cp <= 0x1faff) ||
-            (cp >= 0x20000 && cp <= 0x3fffd))
-            w += 2; // wide (CJK / fullwidth / emoji)
-        else
-            w += 1;
-    }
-    return w;
-}
-/** Pure pre-pass: every focusable in tree order + an object→key map used by
- *  the renderer to highlight the focused node. Same identity heuristic the
- *  roadmap locks (id / name / action.name, else positional), made unique
- *  deterministically so the ring is unambiguous and stable across renders. */
-function collectFocusables(vm) {
-    const list = [];
-    const map = new Map();
-    const counts = new Map();
-    const uniq = (base) => {
-        const n = counts.get(base) ?? 0;
-        counts.set(base, n + 1);
-        return n === 0 ? base : `${base}#${n}`;
+        catch { /* stdout closed — nothing to do */ }
+        this.copiedKey = text;
+        if (this.copiedTimer != null)
+            clearTimeout(this.copiedTimer);
+        this.copiedTimer = setTimeout(() => {
+            this.copiedKey = null;
+            this.copiedTimer = null;
+            this.flushPending();
+        }, 1500);
+        this.flushPending();
     };
-    const visit = (node, form) => {
-        switch (node.type) {
-            case "button": {
-                const k = uniq(node.action?.name ?? node.label ?? "button");
-                map.set(node, k);
-                list.push({ key: k, kind: "button", node, form });
-                return;
-            }
-            case "checkbox": {
-                if (!node.action)
-                    return; // not actionable → not in the ring
-                const k = uniq(node.name ?? node.action.name ?? "checkbox");
-                map.set(node, k);
-                list.push({ key: k, kind: "checkbox", node, form });
-                return;
-            }
-            case "tabs": {
-                for (const t of node.tabs ?? []) {
-                    const k = uniq(`${node.action?.name ?? "tabs"}:${t.value}`);
-                    map.set(t, k);
-                    list.push({ key: k, kind: "tabs-tab", node, form, tab: t });
-                }
-                return;
-            }
-            case "copy-button": {
-                const k = uniq(node.label ?? "copy");
-                map.set(node, k);
-                list.push({ key: k, kind: "copy", node, form });
-                return;
-            }
-            case "link": {
-                if (!(node.href ?? "").trim())
-                    return; // blank href → plain text (P1)
-                const k = uniq(node.href ?? node.label ?? "link");
-                map.set(node, k);
-                list.push({ key: k, kind: "link", node, form });
-                return;
-            }
-            case "field": {
-                const it = node.inputType;
-                if (it === "hidden" || it === "file")
-                    return;
-                // invisible (hidden) / deferred (file) → not focusable. textarea/code
-                // focusable since Phase 5a (multi-line editor); select/select-multiple
-                // focusable since Phase 5b (pickers).
-                const k = uniq(node.name ?? "field");
-                map.set(node, k);
-                list.push({ key: k, kind: "field", node, form });
-                return;
-            }
-            case "form": {
-                for (const c of node.children ?? [])
-                    visit(c, node);
-                const k = uniq(node.submitAction?.name ?? "submit");
-                map.set(node, k); // the form node carries its synthetic submit's key
-                list.push({ key: k, kind: "form-submit", node, form: node });
-                return;
+    resolveFieldValue = (name, wireValue) => {
+        if (!this.fieldWireValues.has(name)) {
+            this.fieldWireValues.set(name, wireValue);
+            if (!this.fieldValues.has(name)) {
+                this.fieldValues.set(name, wireValue);
             }
-            case "modal":
-                // Walk body + footer so a modal-rooted call (the focus trap) yields
-                // the modal's own focusables. Harmless on a whole-tree walk with no
-                // modal present (there are none); the App roots this at the modal
-                // when one is open so base focusables are excluded.
-                for (const c of node.children ?? [])
-                    visit(c, form);
-                for (const c of node.footer ?? [])
-                    visit(c, form);
-                return;
-            case "table": {
-                // Phase 5d. Visual/tab order mirrors the browser DOM: sortable
-                // headers L→R, then filterable filter inputs L→R, then action rows
-                // T→B. Header maps off the `col` object; the filter input maps off a
-                // DISTINCT per-column sentinel (filterIdent) so a sortable+filterable
-                // column has two unambiguous focus targets. Keys via uniq() keep
-                // global uniqueness across multiple tables (the established pattern).
-                const t = node;
-                const cols = t.columns ?? [];
-                if (t.sortAction)
-                    for (const col of cols)
-                        if (col.sortable) {
-                            const k = uniq(`tbl-sort:${col.key}`);
-                            map.set(col, k);
-                            list.push({ key: k, kind: "table-sort", node: t, col, form });
-                        }
-                if (t.filterAction)
-                    for (const col of cols)
-                        if (col.filterable) {
-                            const k = uniq(`tbl-filter:${col.key}`);
-                            map.set(filterIdent(col), k);
-                            list.push({ key: k, kind: "table-filter", node: t, col, form });
-                        }
-                (t.rows ?? []).forEach((row, ri) => {
-                    if (row.action) {
-                        const k = uniq(`tbl-row:${row.id ?? ri}`);
-                        map.set(row, k);
-                        list.push({ key: k, kind: "table-row", node: t, row, form });
-                    }
-                });
-                return;
-            }
-            case "page":
-            case "section":
-            case "list":
-            case "list-item":
-                for (const c of node.children ?? [])
-                    visit(c, form);
-                return;
-            default: // text, stat-bar, progress → not focusable
-                return;
+            return this.fieldValues.get(name) ?? wireValue;
         }
-    };
-    visit(vm);
-    return { list, map };
-}
-/** Depth-first first `modal` in the tree. Single-modal is the framework's
- *  implied contract; nested/multiple → first wins (documented). Render-only:
- *  no wire change. */
-function findModal(node) {
-    if (node.type === "modal")
-        return node;
-    const kids = node.children;
-    if (kids)
-        for (const c of kids) {
-            const m = findModal(c);
-            if (m)
-                return m;
+        const lastWire = this.fieldWireValues.get(name);
+        if (lastWire !== wireValue) {
+            this.fieldValues.set(name, wireValue);
+            this.fieldWireValues.set(name, wireValue);
         }
-    const footer = node.footer;
-    if (footer)
-        for (const c of footer) {
-            const m = findModal(c);
-            if (m)
-                return m;
-        }
-    return undefined;
-}
-const serverValue = (f) => f.value ?? "";
-/** Collect a form's field values for submission. Mirrors BrowserAdapter:
- *  deferred input types skipped, form-checkbox → "true"/"false", hidden
- *  included. Values come from `resolve` (draft-aware on the interactive
- *  path; server value otherwise — so untyped == Phase 2). */
-function collectForm(form, resolve = serverValue) {
-    const out = {};
-    const walk = (node) => {
-        if (node.type === "field") {
-            const f = node;
-            const it = f.inputType;
-            if (it === "file") {
-                return; // deferred input type — not collected
-            }
-            // select → chosen value; select-multiple → comma-joined values
-            // (AGENTS.md "Multi-select submits comma-joined"); both round-trip the
-            // draft-aware `resolve` (Phase 5b), exactly like the text family.
-            if (it === "checkbox")
-                out[f.name] = isTruthyFormValue(resolve(f)) ? "true" : "false";
-            else
-                out[f.name] = resolve(f);
-            return;
-        }
-        const kids = node.children;
-        if (kids)
-            for (const c of kids)
-                walk(c);
+        return this.fieldValues.get(name) ?? wireValue;
     };
-    for (const c of form.children ?? [])
-        walk(c);
-    return out;
-}
-function submitOf(form, resolve = serverValue) {
-    return {
-        name: form.submitAction.name,
-        context: { ...(form.submitAction.context ?? {}), ...collectForm(form, resolve) },
-    };
-}
-/** The single-line `field` input types that become an editable `<TextInput>`
- *  when focused on a TTY. NOT: hidden (invisible), checkbox (toggle),
- *  textarea/code (multi-line — handled by isEditableMultiLine + the
- *  MultilineEditor), or the still-deferred tier (select/select-multiple/file).
- *  Unknown types fall through to text — same fail-soft as the renderer. */
-function isEditableSingleLine(it) {
-    return (it !== "hidden" &&
-        it !== "checkbox" &&
-        it !== "textarea" &&
-        it !== "code" &&
-        it !== "select" &&
-        it !== "select-multiple" &&
-        it !== "file");
-}
-/** Phase 5a: the multi-line `field` input types that become an editable
- *  `<MultilineEditor>` when focused on a TTY. `code` is rendered identically
- *  to `textarea` plus a dim language-hint label; literal-tab insertion is
- *  intentionally deferred (Tab always traverses the focus ring — the locked
- *  input-arbitration invariant). */
-function isEditableMultiLine(it) {
-    return it === "textarea" || it === "code";
-}
-/** Phase 5b: the `field` input types that become an interactive picker when
- *  focused on a TTY — `select` (single, via `ink-select-input`) and
- *  `select-multiple` (multi, via the contained `MultiSelectInput`). Not a text
- *  editor (so deliberately NOT in isEditableSingleLine); it joins the editing
- *  gate so the focused picker owns Up/Down/Enter/Space while App keeps Tab/
- *  Shift-Tab (ring) + Ctrl-C (teardown). */
-function isSelect(it) {
-    return it === "select" || it === "select-multiple";
-}
-/** Reconcile the focused key against a (possibly new) focusable list — the
- *  roadmap's continuity rule: keep it if still present; else clamp to the
- *  prior index position; else first; else none. */
-function reconcile(keys, focusedKey, prev) {
-    if (keys.length === 0)
-        return null;
-    if (focusedKey && keys.includes(focusedKey))
-        return focusedKey;
-    if (prev && prev.key) {
-        const pi = prev.keys.indexOf(prev.key);
-        if (pi >= 0)
-            return keys[Math.min(pi, keys.length - 1)] ?? keys[0];
-    }
-    return keys[0];
-}
-/** Full-screen loud notice (failed/external/invalid redirect, storage I/O
- *  failure). Pure render — NO useInput of its own: it is shown by swapping
- *  App's rendered subtree, App's existing sole useInput stays mounted, so the
- *  unconditional Ctrl-C → requestExit branch still quits and the Phase 0–3
- *  teardown topology is unchanged (no new input hook). */
-function Interstitial({ msg }) {
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", paddingX: 2, paddingY: 1, children: [_jsx(Text, { bold: true, color: "yellow", children: "\u26A0  Action required" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { children: msg }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press Ctrl-C to quit." }) })] }));
-}
-/**
- * Phase 5a contained multi-line editor for `textarea`/`code`. Built ONLY on
- * Ink's already-vetted primitives (useInput key-decode, Box, Text) — there is
- * no mature Ink-5/React-18-compatible multi-line lib (every option is pre-1.0
- * and either abandoned or forces a forbidden Ink 6/7 + React 19 bump), so a
- * contained editor is the only path respecting the locked toolkit + the
- * zero-blast-radius invariant. Zero new dependencies.
- *
- * Controlled (value/onChange — the App draft map is the single source of
- * truth, exactly like the single-line `<TextInput>`). Internal {row,col}
- * caret in useState, held in the stable component instance (key="input" under
- * the stable App root) so it survives the shell's instance.rerender() — the
- * Phase-3 caret-continuity mechanism, one level down.
- *
- * Input contract MIRRORS ink-text-input so the two-handler arbitration with
- * App's root useInput stays collision-free: this editor EARLY-RETURNS Ctrl-C
- * (App owns teardown → requestExit(130)) and Tab/Shift-Tab (App owns ring
- * traversal — the locked invariant; `code` is therefore NOT literal-tab
- * aware, by design), and owns char insert / Enter→newline / Backspace+Delete
- * / Left/Right (wrapping across lines) / Up/Down (clamped). A multi-char paste
- * burst is inserted verbatim; embedded CR/LF split lines (Phase-3 paste rule).
- * Form submission stays the focus ring's submit button (the user Tabs out) —
- * Enter never submits a multi-line field; field `action`/Enter-dispatch is
- * N/A for multi-line.
- */
-function MultilineEditor(props) {
-    const split = (s) => (s.length === 0 ? [""] : s.split("\n"));
-    // Caret starts at the END of the initial value (focusing a pre-filled field
-    // puts the caret after the text — mirrors ink-text-input's UX). Lazy
-    // initializer runs ONCE at mount, never on the shell's rerenders, so caret
-    // continuity holds (the Phase-3 mechanism, one level down).
-    const [cursor, setCursor] = useState(() => {
-        const ls = split(props.value);
-        return { row: ls.length - 1, col: (ls[ls.length - 1] ?? "").length };
-    });
-    const lines = split(props.value);
-    // Clamp for render (value may have shrunk via server-wins before the effect
-    // below re-syncs the stored cursor).
-    // Re-clamp the stored caret when the controlled value shrinks (mirrors
-    // ink-text-input's clamp effect). Guarded → no extra render when unchanged.
-    useEffect(() => {
-        const ls = split(props.value);
-        setCursor((c) => {
-            const r = Math.min(c.row, ls.length - 1);
-            const col = Math.min(c.col, (ls[r] ?? "").length);
-            return r === c.row && col === c.col ? c : { row: r, col };
-        });
-    }, [props.value]);
-    useInput((input, key) => {
-        // App owns these — never consume them (Ink calls every useInput; no
-        // bubbling, so a plain return cedes the key).
-        if (key.ctrl && input === "c")
-            return; // → App requestExit(130)
-        if (key.tab)
-            return; // Tab / Shift-Tab → App ring traversal (locked)
-        const cur = split(props.value);
-        const r = Math.min(cursor.row, cur.length - 1);
-        const c = Math.min(cursor.col, (cur[r] ?? "").length);
-        const commit = (next, nr, nc) => {
-            props.onChange(next.join("\n"));
-            setCursor({ row: nr, col: nc });
-        };
-        if (key.return) {
-            const line = cur[r] ?? "";
-            const next = [
-                ...cur.slice(0, r),
-                line.slice(0, c),
-                line.slice(c),
-                ...cur.slice(r + 1),
-            ];
-            commit(next, r + 1, 0);
-            return;
-        }
-        if (key.leftArrow) {
-            if (c > 0)
-                setCursor({ row: r, col: c - 1 });
-            else if (r > 0)
-                setCursor({ row: r - 1, col: (cur[r - 1] ?? "").length });
-            return;
-        }
-        if (key.rightArrow) {
-            if (c < (cur[r] ?? "").length)
-                setCursor({ row: r, col: c + 1 });
-            else if (r < cur.length - 1)
-                setCursor({ row: r + 1, col: 0 });
-            return;
-        }
-        if (key.upArrow) {
-            if (r > 0)
-                setCursor({
-                    row: r - 1,
-                    col: Math.min(c, (cur[r - 1] ?? "").length),
-                });
-            return;
-        }
-        if (key.downArrow) {
-            if (r < cur.length - 1)
-                setCursor({
-                    row: r + 1,
-                    col: Math.min(c, (cur[r + 1] ?? "").length),
-                });
+    // ── Adapter.render ────────────────────────────────────────────────────────
+    // The shell calls this synchronously and does NOT await. OpenTUI's
+    // createCliRenderer is async, so we init lazily: the first render() kicks
+    // off initialization; subsequent renders are sync. Late renders that
+    // arrive before init resolves are coalesced into `pending` (last-write-wins).
+    render(vm, onAction) {
+        if (this.disposed)
             return;
-        }
-        if (key.backspace || key.delete) {
-            // Backspace semantics (delete the char BEFORE the caret) for both —
-            // matches ink-text-input, so single- and multi-line editing feel
-            // identical. Forward-delete is intentionally deferred.
-            if (c > 0) {
-                const line = cur[r] ?? "";
-                const next = [...cur];
-                next[r] = line.slice(0, c - 1) + line.slice(c);
-                commit(next, r, c - 1);
-            }
-            else if (r > 0) {
-                const prev = cur[r - 1] ?? "";
-                const next = [
-                    ...cur.slice(0, r - 1),
-                    prev + (cur[r] ?? ""),
-                    ...cur.slice(r + 1),
-                ];
-                commit(next, r - 1, prev.length);
-            }
+        this.pending = { vm, onAction };
+        if (this.renderer == null) {
+            if (this.initPromise == null)
+                this.initPromise = this.init();
             return;
         }
-        if (input && !key.ctrl && !key.meta) {
-            // Printable / paste burst. Normalize CR(LF) so a pasted multi-line
-            // block splits cleanly.
-            const text = input.replace(/\r\n?/g, "\n");
-            const line = cur[r] ?? "";
-            const parts = (line.slice(0, c) + text + line.slice(c)).split("\n");
-            const next = [...cur.slice(0, r), ...parts, ...cur.slice(r + 1)];
-            const last = parts[parts.length - 1];
-            commit(next, r + parts.length - 1, parts.length === 1 ? c + text.length : last.length);
-        }
-    }, { isActive: props.focus });
-    const empty = props.value.length === 0;
-    if (empty && !props.focus) {
-        return (_jsx(Text, { dimColor: true, children: props.placeholder ? props.placeholder : " " }));
+        this.flushPending();
     }
-    return (_jsx(Box, { flexDirection: "column", children: lines.map((ln, i) => (
-        // One flat <Text> per line. A nested in-text caret element corrupts
-        // Ink/Yoga width measurement inside the live focusWrap + bordered-box
-        // tree (the Phase-1 mixed-<Text> width lesson — verified: split caret
-        // wraps "hello" into per-char lines; one flat <Text> renders clean).
-        // Focus is signalled by focusWrap's leading ▸; the caret is tracked
-        // internally for edit logic. Rendering a caret glyph is a documented
-        // deferred polish (would also fragment the value-substring tests).
-        _jsx(Text, { children: ln === "" ? " " : ln }, i))) }));
-}
-/**
- * Phase 5b contained multi-select picker for `select-multiple`. Built ONLY on
- * Ink's already-vetted primitives — `ink-select-input` (the locked, mature
- * Ink-5/React-18 lib used for single `select`) is single-select only, and no
- * mature Ink-5/React-18 multi-select lib documents the Tab/Shift-Tab/Ctrl-C
- * pass-through this codebase's input-arbitration depends on (`ink-multi-select`
- * is dead — ink^3/react^16; `@inkjs/ui` MultiSelect's key handling is
- * undocumented). Same precedent + rationale as Phase-5a's `MultilineEditor`:
- * contained component, zero new deps, exact known keyboard contract.
- *
- * CONTROLLED by `value` (comma-joined, the wire shape — AGENTS.md "Multi-select
- * submits comma-joined"; Showcase emits `value:"a,c"`). The selected SET is
- * derived from `value` every render, so it is server-authoritative by
- * construction: when App drops the select draft on a server re-render (selects
- * are excluded from draft preservation — AGENTS.md), `value` becomes the server
- * value and the rendered selection follows. Only the highlight index is
- * internal (a cursor, not a value — fine to persist across re-renders, like
- * MultilineEditor's caret).
- *
- * Input contract MIRRORS MultilineEditor/ink-text-input: EARLY-RETURNS Ctrl-C
- * (App owns teardown → requestExit(130)) and Tab/Shift-Tab (App owns ring
- * traversal — locked); owns Up/Down (move highlight) and Space (toggle the
- * highlighted option). Enter is inert here (App's editing branch also returns
- * on Enter) — submission stays the ring's submit button (the user Tabs out),
- * exactly like a browser multi-select element.
- */
-function MultiSelectInput(props) {
-    const parse = (s) => s
-        .split(",")
-        .map((x) => x.trim())
-        .filter((x) => x.length > 0);
-    const opts = props.options;
-    const [hi, setHi] = useState(0);
-    const selected = new Set(parse(props.value));
-    useInput((input, key) => {
-        // App owns these — never consume them (Ink calls every useInput; no
-        // bubbling, so a plain return cedes the key).
-        if (key.ctrl && input === "c")
-            return; // → App requestExit(130)
-        if (key.tab)
-            return; // Tab / Shift-Tab → App ring traversal (locked)
-        if (key.upArrow) {
-            setHi((h) => (opts.length ? (h - 1 + opts.length) % opts.length : 0));
-            return;
-        }
-        if (key.downArrow) {
-            setHi((h) => (opts.length ? (h + 1) % opts.length : 0));
-            return;
-        }
-        if (input === " ") {
-            const o = opts[hi];
-            if (!o)
-                return;
-            const next = new Set(parse(props.value));
-            if (next.has(o.value))
-                next.delete(o.value);
-            else
-                next.add(o.value);
-            // Preserve option order in the comma-joined wire value.
-            const joined = opts
-                .filter((x) => next.has(x.value))
-                .map((x) => x.value)
-                .join(",");
-            props.onChange(joined);
-            return;
-        }
-        // Enter / anything else: inert (App's editing branch also returns).
-    }, { isActive: props.focus });
-    if (opts.length === 0)
-        return _jsx(Text, { dimColor: true, children: " " });
-    return (_jsx(Box, { flexDirection: "column", children: opts.map((o, i) => {
-            const on = selected.has(o.value);
-            const cur = i === hi;
-            // ONE flat <Text> per row — a nested styled span mid-string corrupts
-            // Ink/Yoga width measurement inside the live focusWrap+border tree
-            // (the Phase-1/5a mixed-<Text> width lesson).
-            return (_jsx(Text, { color: cur ? "cyan" : undefined, children: (cur ? "▸ " : "  ") + (on ? "[x] " : "[ ] ") + o.label }, o.value));
-        }) }));
-}
-/**
- * Phase 5d — table per-column filter editor. A thin wrapper over
- * `ink-text-input` (already a dependency since Phase 3 — ZERO new deps),
- * mounted ONLY when its filter cell is focused on a TTY (the select/multiline
- * precedent). ink-text-input@6 early-returns Tab/Shift-Tab/Up/Down/Ctrl-C, so
- * App keeps ring traversal + teardown; it owns char/Backspace/Left/Right and
- * fires `onSubmit` on Enter → the filterAction dispatch (browser.ts parity).
- * A focused table-filter also joins App's `editing` gate (kind
- * "table-filter") so ring-mode arrow handling can't collide with the editor's
- * cursor — the two input handlers never fight.
- */
-function TableFilterInput(props) {
-    return (_jsx(TextInput, { focus: props.focus, value: props.value, placeholder: "filter\u2026", onChange: props.onChange, onSubmit: props.onSubmit }));
-}
-/** The stateful root. Mounted ONCE; the shell's poll/dispatch re-renders
- *  reconcile the SAME component instance (React preserves its focus state) —
- *  this is why a stable root component, not a bare tree. */
-function App(props) {
-    const { vm, renderWith } = props;
-    const { isRawModeSupported } = useStdin();
-    const { write, stdout } = useStdout();
-    // `=== true` is LOAD-BEARING, not defensive. Ink's App.isRawModeSupported()
-    // returns `this.props.stdin.isTTY`, which is `true` on a TTY but `undefined`
-    // (never `false`) on a non-TTY stdin (pipe / </dev/null / agent / CI). Ink's
-    // useInput skips raw mode ONLY when `options.isActive === false` (strict).
-    // So passing the raw `undefined` as isActive does NOT skip → Ink calls
-    // setRawMode → throws "Raw mode is not supported" and dumps a react error
-    // frame on the non-TTY path. Coercing to a real boolean makes the gate
-    // `{ isActive: false }`, which Ink honors → clean static render. (A TTY
-    // gives `true`; ink-testing-library gives `true` → tests unchanged.)
-    const interactive = isRawModeSupported === true;
-    // Viewport fill (0.4.5). On a real interactive terminal, occupy the whole
-    // window so layout presets — especially `sidebar`'s flexGrow main pane —
-    // can expand: the terminal analog of BrowserAdapter filling the viewport
-    // via CSS. Gated on the REAL process TTYs, NOT Ink's isRawModeSupported
-    // (which ink-testing-library forces `true`): under vitest
-    // `process.stdout.isTTY` is false ⇒ no wrap ⇒ every existing App and
-    // conformance frame stays byte-identical by construction (and the pure
-    // `renderTree` path never reaches here). Opt out with
-    // `new TuiAdapter({ viewport: "content" })`.
-    const realTTY = process.stdout.isTTY === true && process.stdin.isTTY === true;
-    const fillViewport = realTTY && props.viewport !== "content";
-    const [vp, setVp] = useState(() => ({
-        cols: stdout?.columns,
-        rows: stdout?.rows,
-    }));
-    useEffect(() => {
-        if (!fillViewport || !stdout)
-            return;
-        const onResize = () => setVp({ cols: stdout.columns, rows: stdout.rows });
-        onResize(); // sync to the live size on (re)mount
-        stdout.on("resize", onResize);
-        return () => {
-            stdout.off("resize", onResize);
-        };
-    }, [fillViewport, stdout]);
-    const [focusedKey, setFocusedKey] = useState(null);
-    const [copiedKey, setCopiedKey] = useState(null);
-    // User-typed field drafts, keyed by focus key. Mirrors BrowserAdapter's
-    // draft-preservation: a draft survives the shell's poll/dispatch
-    // re-renders unless the field disappears or the SERVER changes that
-    // field's authoritative value (then the server wins).
-    const [draft, setDraft] = useState({});
-    // Phase 5c: a modal traps focus. Detect it (interactive only — non-TTY/unit
-    // renders the whole tree inline, preserving the Phase-1 non-TTY contract +
-    // deterministic static tests) and root the focus ring at the modal subtree
-    // so base focusables are excluded while it is open.
-    const modal = interactive ? findModal(vm) : undefined;
-    const { list, map } = collectFocusables(modal ?? vm);
-    const keys = list.map((d) => d.key);
-    const prevRef = useRef(undefined);
-    const effective = interactive
-        ? reconcile(keys, focusedKey, prevRef.current)
-        : null;
-    // Latest-value refs so the (single, stable) input handler never goes stale.
-    const onActionRef = useRef(props.onAction);
-    onActionRef.current = props.onAction;
-    const requestExitRef = useRef(props.requestExit);
-    requestExitRef.current = props.requestExit;
-    // Same single useInput — NOT a new hook. While an interstitial is shown the
-    // ring is inert (only Ctrl-C acts) so a stray key can't dispatch into the
-    // shell behind a terminal notice. Mirrors the existing editingRef guard.
-    const interstitialActiveRef = useRef(props.interstitial != null);
-    interstitialActiveRef.current = props.interstitial != null;
-    // Phase 5c — same single useInput (NOT a new hook): a ref-gated Esc branch,
-    // exactly mirroring interstitialActiveRef. tui-cli.ts stays unchanged ⇒
-    // teardown topology identical to Phase 4 (safe by construction; PTY-verified).
-    const modalActiveRef = useRef(modal != null);
-    modalActiveRef.current = modal != null;
-    const dismissActionRef = useRef(modal?.dismissAction ?? null);
-    dismissActionRef.current = modal?.dismissAction ?? null;
-    const listRef = useRef(list);
-    listRef.current = list;
-    const effectiveRef = useRef(effective);
-    effectiveRef.current = effective;
-    const writeRef = useRef(write);
-    writeRef.current = write;
-    const copyTimer = useRef(undefined);
-    // Per-render snapshot of every DRAFTABLE focusable's server value, vs the
-    // previous render's snapshot — the change detector for "server wins".
-    // Draftable = `field` (Phase 3/5a/5b) + Phase-5d `table-filter` inputs
-    // (server value = the column's `filterValue`). The field path is
-    // byte-identical to Phase 5b — table-filter rows are purely ADDITIVE, so
-    // every existing field/draft test is unaffected.
-    const draftableDescs = list.filter((d) => d.kind === "field" || d.kind === "table-filter");
-    const serverValOf = (d) => d.kind === "table-filter"
-        ? (d.col.filterValue ?? "")
-        : (d.node.value ?? "");
-    const fieldKeysNow = new Set(draftableDescs.map((d) => d.key));
-    const fieldServerNow = {};
-    for (const d of draftableDescs)
-        fieldServerNow[d.key] = serverValOf(d);
-    const prevServerRef = useRef({});
-    // Phase 5b: focus keys of select/select-multiple fields. Selects are
-    // EXCLUDED from draft preservation (AGENTS.md: can't distinguish
-    // "server set this" from "user changed it") — so a select draft is
-    // server-authoritative the moment a SERVER re-render arrives, even if that
-    // field's value is unchanged (the inverse of the text draft-survival rule).
-    const selectKeysNow = new Set(draftableDescs
-        .filter((d) => d.kind === "field" && isSelect(d.node.inputType))
-        .map((d) => d.key));
-    // A server re-render is observable as a new `vm` object identity (the shell
-    // passes a freshly-parsed vm each render(); a local setState re-render keeps
-    // the SAME vm prop). First render: undefined → not a "server" render.
-    const prevVmRef = useRef(undefined);
-    const isServerRender = prevVmRef.current !== undefined && prevVmRef.current !== vm;
-    /** Effective draft for a focus key: the typed value when it should still
-     *  win — i.e. there IS a draft, the field still exists, and the server
-     *  hasn't changed that field's value since we last saw it. Otherwise
-     *  undefined → caller falls back to the server value. */
-    const draftFor = (k) => {
-        if (!(k in draft))
-            return undefined;
-        if (!fieldKeysNow.has(k))
-            return undefined; // field / table-filter gone
-        if (prevServerRef.current[k] !== fieldServerNow[k])
-            return undefined; // server changed → authoritative
-        if (selectKeysNow.has(k) && isServerRender)
-            return undefined; // selects: server-authoritative across ANY server re-render (AGENTS.md — excluded from draft preservation)
-        return draft[k];
-    };
-    const resolve = (f) => {
-        const k = map.get(f);
-        const dv = k != null ? draftFor(k) : undefined;
-        return dv ?? f.value ?? "";
-    };
-    const focusedDesc = list.find((d) => d.key === effective);
-    const editing = interactive &&
-        ((focusedDesc?.kind === "field" &&
-            (isEditableSingleLine(focusedDesc.node.inputType) ||
-                isEditableMultiLine(focusedDesc.node.inputType) ||
-                isSelect(focusedDesc.node.inputType))) ||
-            // Phase 5d: a focused table FILTER input is an editable <TextInput>; it
-            // joins the editing gate so App cedes char/Left/Right/Enter to it and
-            // keeps ONLY Tab/Shift-Tab (ring) + Ctrl-C (teardown). Without this,
-            // ring-mode arrow handling would collide with the editor's cursor and
-            // Down/Right would jump focus mid-type. The `field` disjunct above is
-            // byte-identical → zero field/form behavior change. table-sort /
-            // table-row stay ring-mode (Enter/Space → activate).
-            focusedDesc?.kind === "table-filter");
-    const editingRef = useRef(editing);
-    editingRef.current = editing;
-    useEffect(() => {
-        if (effective !== focusedKey)
-            setFocusedKey(effective);
-        prevRef.current = { keys, key: effective };
-    });
-    // Prune stale drafts (field gone, or server changed its value) and record
-    // this render's server snapshot for the next render's change detection.
-    // Guarded so an unchanged draft map keeps its identity → no extra render.
-    useEffect(() => {
-        setDraft((prev) => {
-            let changed = false;
-            const next = {};
-            for (const k of Object.keys(prev)) {
-                const stale = !fieldKeysNow.has(k) ||
-                    prevServerRef.current[k] !== fieldServerNow[k] ||
-                    (selectKeysNow.has(k) && isServerRender); // selects never survive a server re-render
-                if (stale) {
-                    changed = true;
-                    continue;
-                }
-                next[k] = prev[k];
-            }
-            return changed ? next : prev;
-        });
-        prevServerRef.current = fieldServerNow;
-        prevVmRef.current = vm;
-    });
-    useEffect(() => () => {
-        if (copyTimer.current)
-            clearTimeout(copyTimer.current);
-    }, []);
-    const doCopy = (key, text) => {
+    async init() {
         try {
-            writeRef.current(osc52(text));
-        }
-        catch {
-            /* OSC 52 unsupported terminals: silent, like the browser clipboard */
-        }
-        setCopiedKey(key);
-        if (copyTimer.current)
-            clearTimeout(copyTimer.current);
-        copyTimer.current = setTimeout(() => setCopiedKey(null), 1500);
-    };
-    /** Field Enter (its own action → dispatch {[name]: current}; else submit
-     *  the enclosing form). `current` is the draft-aware resolved value. */
-    const submitField = (d) => {
-        const dispatch = onActionRef.current;
-        const node = d.node;
-        if (node.action) {
-            const cur = draftFor(d.key) ?? node.value ?? "";
-            dispatch({
-                name: node.action.name,
-                context: { ...(node.action.context ?? {}), [node.name]: cur },
-            });
-        }
-        else if (d.form) {
-            dispatch(submitOf(d.form, resolve));
-        }
-    };
-    /** Space on a form-`checkbox` field → flip its draft boolean. */
-    const toggleCheckboxDraft = (d) => {
-        const node = d.node;
-        const cur = draftFor(d.key) ?? node.value ?? "";
-        const nextVal = isTruthyFormValue(cur) ? "false" : "true";
-        setDraft((s) => ({ ...s, [d.key]: nextVal }));
-    };
-    const onFieldSubmit = (field) => {
-        const k = map.get(field);
-        const d = list.find((x) => x.key === k);
-        if (d)
-            submitField(d);
-    };
-    /** Phase 5d — a table per-column filter's Enter. Mirrors BrowserAdapter
-     *  (browser.ts): dispatch `filterAction` merged with { column, value,
-     *  filters }, where `filters` is EVERY filterable column's current text
-     *  (draft else server `filterValue`) and `value` is this column's. */
-    const tableFilter = (table, col) => {
-        const fa = table.filterAction;
-        if (!fa)
-            return;
-        const textOf = (c) => {
-            const fk = map.get(filterIdent(c));
-            const dv = fk != null ? draftFor(fk) : undefined;
-            return dv ?? c.filterValue ?? "";
-        };
-        const filters = {};
-        for (const c of table.columns ?? [])
-            if (c.filterable)
-                filters[c.key] = textOf(c);
-        onActionRef.current({
-            name: fa.name,
-            context: {
-                ...(fa.context ?? {}),
-                column: col.key,
-                value: textOf(col),
-                filters,
-            },
-        });
-    };
-    const activate = (d, trigger) => {
-        const dispatch = onActionRef.current;
-        switch (d.kind) {
-            case "button":
-                dispatch({
-                    name: d.node.action.name,
-                    context: { ...(d.node.action.context ?? {}) },
-                });
-                break;
-            case "checkbox":
-                if (d.node.action)
-                    dispatch({
-                        name: d.node.action.name,
-                        context: { ...(d.node.action.context ?? {}), checked: !d.node.checked },
-                    });
-                break;
-            case "tabs-tab":
-                dispatch({
-                    name: d.node.action.name,
-                    context: { ...(d.node.action.context ?? {}), value: d.tab.value },
-                });
-                break;
-            case "field": {
-                const node = d.node;
-                if (node.inputType === "checkbox") {
-                    if (trigger === "space")
-                        toggleCheckboxDraft(d);
-                    else
-                        submitField(d); // Enter on a form-checkbox → submit / its action
+            // Dynamic value imports — keeping these out of the module-level
+            // import graph means this file is loadable under Node (vitest, type
+            // checking, conformance walks), while the actual render path still
+            // requires Bun. See the top-of-file comment for the rationale.
+            const { createCliRenderer } = await import("@opentui/core");
+            const { createRoot } = await import("@opentui/react");
+            this.renderer = await createCliRenderer();
+            this.root = createRoot(this.renderer);
+            // Subscribe to keyboard events on the renderer for Tab focus cycling.
+            // OpenTUI's CliRenderer emits "key" events; we intercept Tab/Shift-Tab
+            // here (the focused pane's ScrollBox still receives every other key
+            // for its own scroll handling — arrows, PageUp/Down, Home/End).
+            const r = this.renderer;
+            r.on("key", (e) => {
+                if (this.disposed)
+                    return;
+                if (e.name === "tab") {
+                    this.cycleFocus(!e.shift);
                 }
-                else {
-                    // Editable single-line fields are driven by ink-text-input's
-                    // onSubmit in editing mode and never reach here; this is a safety
-                    // net (e.g. a field somehow activated in ring mode) — treat as submit.
-                    submitField(d);
+                else if (e.name === "return" || e.name === "enter") {
+                    // B5 — Enter activates the focused pane's primary actionable
+                    // (first button/link/copy-button). Skipped when the focused pane
+                    // has any FieldNode — input widgets own Enter for form submit
+                    // (FieldView's `<input onSubmit>` already handles that).
+                    this.activatePane("enter");
                 }
-                break;
-            }
-            case "form-submit":
-                dispatch(submitOf(d.node, resolve));
-                break;
-            case "copy":
-                doCopy(d.key, d.node.text);
-                break;
-            case "link":
-                doCopy(d.key, d.node.href);
-                break;
-            case "table-sort": {
-                // browser.ts parity: toggle asc↔desc only when this column is the
-                // current sortColumn AND was asc; otherwise default to asc.
-                const t = d.node;
-                const col = d.col;
-                const sa = t.sortAction;
-                if (!col || !sa)
-                    break;
-                const isSorted = t.sortColumn === col.key;
-                const nextDir = isSorted && t.sortDirection === "asc" ? "desc" : "asc";
-                dispatch({
-                    name: sa.name,
-                    context: {
-                        ...(sa.context ?? {}),
-                        column: col.key,
-                        direction: nextDir,
-                    },
-                });
-                break;
-            }
-            case "table-row":
-                // Verbatim, no merge — mirrors BrowserAdapter `on(rowAction)`.
-                if (d.row?.action)
-                    dispatch(d.row.action);
-                break;
-            case "table-filter":
-                // Editable: the focused <TextInput>'s onSubmit (→ rctx.onTableFilter)
-                // owns the dispatch. Unreachable while editing (App returns before the
-                // ring-activate line); a defensive no-op for any edge path.
-                break;
+                else if (e.name === "space") {
+                    // B5 — Space toggles the focused pane's first checkbox (the one
+                    // with an action). Skipped when the pane has inputs (Space is a
+                    // legitimate text character there).
+                    this.activatePane("space");
+                }
+            });
+            this.flushPending();
         }
-    };
-    useInput((input, key) => {
-        if (key.ctrl && input === "c") {
-            requestExitRef.current(130);
-            return;
+        catch (err) {
+            // No safe no-op here — surface to stderr so the user sees what broke
+            // (e.g. non-TTY environment, missing native binary, or Node-only
+            // invocation that slipped past the CLI's Bun guard).
+            const msg = err instanceof Error ? err.message : String(err);
+            try {
+                process.stderr.write(`vms-tui: renderer init failed: ${msg}\n`);
+            }
+            catch { /* nothing */ }
         }
-        if (interstitialActiveRef.current)
-            return; // notice up: only Ctrl-C acts
-        if (modalActiveRef.current && key.escape) {
-            // Esc dismisses a modal IFF it carries a dismissAction (AGENTS.md:
-            // no dismissAction & no footer ⇒ non-dismissible — never synthesize a
-            // close). Placed before the ring-empty + editing branches so a
-            // text-only dismissible modal still closes, and Esc cancels even from
-            // within a body field (ink-text-input/MultilineEditor don't consume
-            // Esc). Non-Esc keys fall through to the trapped ring below.
-            if (dismissActionRef.current)
-                onActionRef.current(dismissActionRef.current);
+    }
+    flushPending() {
+        if (!this.pending || !this.root || this.disposed)
             return;
+        const { vm, onAction } = this.pending;
+        // Count panes on the current VM so Tab knows the cycle modulus + so we
+        // can clamp focusedPaneIndex if the tree shrank.
+        const paneCount = countPanes(vm);
+        if (paneCount === 0) {
+            this.focusedPaneIndex = 0;
         }
-        const ring = listRef.current;
-        if (ring.length === 0)
-            return;
-        let idx = ring.findIndex((d) => d.key === effectiveRef.current);
-        if (idx < 0)
-            idx = 0;
-        const goNext = () => setFocusedKey(ring[(idx + 1) % ring.length].key);
-        const goPrev = () => setFocusedKey(ring[(idx - 1 + ring.length) % ring.length].key);
-        if (editingRef.current) {
-            // Editing a field: ink-text-input owns char insert / Backspace /
-            // Delete / Left / Right and fires onSubmit on Enter. App keeps ONLY
-            // ring traversal (Tab/Shift-Tab) + Ctrl-C (handled above). Everything
-            // else is intentionally inert so the two input handlers don't collide.
-            // (ink-text-input itself early-returns Tab/Shift-Tab/Up/Down/Ctrl-C,
-            // so those reach this handler cleanly.)
-            if (key.tab && !key.shift)
-                goNext();
-            else if (key.tab && key.shift)
-                goPrev();
-            return;
+        else if (this.focusedPaneIndex >= paneCount) {
+            this.focusedPaneIndex = 0;
         }
-        // Ring mode — exactly Phase-2 behavior.
-        if ((key.tab && !key.shift) || key.downArrow || key.rightArrow)
-            goNext();
-        else if ((key.tab && key.shift) || key.upArrow || key.leftArrow)
-            goPrev();
-        else if (key.return || input === " ")
-            activate(ring[idx], key.return ? "enter" : "space");
-    }, { isActive: interactive });
-    const rctx = {
-        focusedKey: effective,
-        copiedKey,
-        focusKey: (o) => map.get(o),
-        interactive,
-        fill: fillViewport,
-        fillCols: fillViewport ? vp.cols : undefined,
-        railFraction: props.railFraction,
-        draft: (k) => draftFor(k),
-        onFieldChange: (k, v) => setDraft((s) => ({ ...s, [k]: v })),
-        onFieldSubmit,
-        onTableFilter: tableFilter,
-    };
-    const content = props.interstitial != null ? (_jsx(Interstitial, { msg: props.interstitial })) : modal ? (
-    // Screen-ownership: render ONLY the modal, horizontally centered (the
-    // honest terminal "z-layer" — Ink has no z-index; base tree suppressed).
-    // Vertical centering deferred (no reliable terminal-height center in Ink;
-    // cosmetic, not load-bearing).
-    _jsx(Box, { flexDirection: "column", alignItems: "center", children: renderWith(modal, rctx) })) : (renderWith(vm, rctx));
-    // Fill the terminal so flexGrow children (the sidebar main pane) have a
-    // terminal-sized parent to expand into. `width` is the load-bearing dim
-    // (horizontal sidebar fill); `height` makes it a true full-screen surface
-    // (paired with the adapter's alternate-screen). `cols` is always present on
-    // a real TTY; if a host omits `rows`, height falls back to auto without
-    // breaking width. When !fillViewport (every test; non-TTY; opt-out) this
-    // returns `content` unchanged ⇒ byte-identical to pre-0.4.5.
-    if (fillViewport && typeof vp.cols === "number" && vp.cols > 0) {
-        return (_jsx(Box, { width: vp.cols, height: vp.rows, flexDirection: "column", children: content }));
+        this.lastPaneCount = paneCount;
+        this.root.render(_jsx(App, { vm: vm, onAction: onAction, focusedPaneIndex: this.focusedPaneIndex, sidebarFraction: this.sidebarFraction, setFieldValue: this.setFieldValue, resolveFieldValue: this.resolveFieldValue, copiedKey: this.copiedKey, copy: this.copy, navigate: this.navigateForLinks }));
     }
-    return content;
-}
-/**
- * Phase 5b terminal adapter — single-line + multi-line editors + selects.
- *
- * Every node renders byte-identically to Phase 1/2 when UNFOCUSED and on the
- * pure `renderTree`/non-TTY path (NO_CTX → interactive:false → no editor). On
- * a TTY the shell's view is interactive: a self-managed focus ring
- * (Tab/Shift-Tab/arrows), Enter/Space dispatch, focus continuity; button /
- * checkbox (`{checked}`) / tabs (`{value}`) / link / copy-button (OSC 52) /
- * form-submit. The focused single-line `field` is an editable
- * `ink-text-input`; the focused `textarea`/`code` field is the contained
- * `MultilineEditor` (Enter→newline; submit via the ring's submit button;
- * `code` adds a dim language label, no literal-tab). The focused `select` is
- * an `ink-select-input` list; the focused `select-multiple` is the contained
- * `MultiSelectInput` (Space toggles; comma-joined wire value; submit via the
- * ring's submit button). Typed drafts survive poll/dispatch re-renders unless
- * the field disappears or the server changes its value — mirroring
- * BrowserAdapter; selects are additionally server-authoritative on ANY server
- * re-render (excluded from draft preservation); password is masked;
- * form-`checkbox` toggles on Space. The still-deferred tier (`file`/`modal`/
- * `table`) arrives in later phases and still renders a visible fail-loud
- * placeholder — never blank, never silent.
- *
- * LEAF MODULE: never imported by src/index.ts / src/browser.ts /
- * src/server.ts, so `ink`/`react` never enter the web or server dependency
- * graph (a unit test asserts this).
- */
-export class TuiAdapter {
-    instance;
-    disposed = false;
-    /** "fill" (default) = occupy the terminal + alternate-screen on a real
-     *  interactive TTY; "content" = legacy intrinsic-content size, no
-     *  alt-screen (the opt-out escape hatch — pre-0.4.5 behavior). */
-    viewport;
-    /** `sidebar` rail width as a fraction of the terminal (fill path only).
-     *  Default 1/3; clamped to a sane [0.15, 0.6] so a bad value can't break
-     *  the layout. Adapter-level styling knob (NOT wire — appearance, not
-     *  arrangement). */
-    sidebarFraction;
-    /** Set once ESC[?1049h was written, so dispose() emits the paired
-     *  ESC[?1049l exactly once (idempotent restore — same discipline as the
-     *  cursor restore Ink does on unmount). */
-    altEntered = false;
-    constructor(opts) {
-        this.viewport = opts?.viewport ?? "fill";
-        const f = opts?.sidebarFraction ?? 1 / 3;
-        this.sidebarFraction = Math.min(0.6, Math.max(0.15, f));
+    // B5 — bound reference to navigate(), used as the App prop. We bind once
+    // (in the property initializer below) so React sees a stable function
+    // identity across renders (avoids spurious child re-renders on click).
+    navigateForLinks = (url) => this.navigate(url);
+    /** Test-only: read the current edit value for a named field (for asserting
+     *  draft preservation across server re-renders). */
+    _peekFieldValue(name) {
+        return this.fieldValues.get(name);
     }
-    /** Injected by tui-cli.ts: lets a keyboard Ctrl-C (which, under Ink's raw
-     *  mode, is delivered as input 0x03 and never raises SIGINT) reach the
-     *  CLI's single idempotent shutdown. A TUI-internal seam between our two
-     *  leaf files — NOT part of the core Adapter interface. */
-    requestExit = () => { };
-    /** session storage — in-memory, process lifetime (browser sessionStorage
-     *  analog for a single-process CLI). Write-only per the wire contract. */
-    sessionStore = new Map();
-    /** When non-null, App renders the loud Interstitial instead of the vm. */
-    interstitial = null;
-    /** Last rendered vm/onAction — so showInterstitial can rerender through the
-     *  SAME single Ink instance (never a 2nd inkRender). */
-    lastVm;
-    lastOnAction = () => { };
-    setRequestExit(fn) {
-        this.requestExit = fn;
+    /** Test-only: read the current "copied" key for asserting that activation
+     *  set the feedback state. Returns null when no button is currently flashing. */
+    _peekCopiedKey() {
+        return this.copiedKey;
     }
-    render(vm, onAction) {
-        this.lastVm = vm;
-        this.lastOnAction = onAction;
-        this.interstitial = null; // a fresh view supersedes any prior notice
-        const app = this.createApp(vm, onAction);
-        if (!this.instance) {
-            // Enter the alternate-screen buffer BEFORE the first mount so every
-            // frame draws there and the user's prior scrollback is untouched
-            // (restored verbatim by dispose()'s paired ESC[?1049l). Gated on the
-            // REAL process TTYs — the exact complement of the CLI's `nonInteractive`
-            // — so the 0.4.4 non-TTY static one-shot (pipe/CI/agent) emits NO
-            // escape, and unit tests (process.stdout.isTTY false under vitest)
-            // never enter it. "content" opts out entirely.
-            if (this.viewport !== "content" &&
-                process.stdout.isTTY === true &&
-                process.stdin.isTTY === true &&
-                !this.altEntered) {
-                try {
-                    process.stdout.write("\x1b[?1049h");
-                    this.altEntered = true;
-                }
-                catch {
-                    /* if the enter write fails, dispose() must not emit the leave */
-                }
+    cycleFocus(forward) {
+        if (this.lastPaneCount === 0)
+            return;
+        this.focusedPaneIndex = forward
+            ? (this.focusedPaneIndex + 1) % this.lastPaneCount
+            : (this.focusedPaneIndex + this.lastPaneCount - 1) % this.lastPaneCount;
+        this.flushPending();
+    }
+    /** B5 — keyboard activation of the focused pane's primary actionable.
+     *
+     *  Mode mapping:
+     *    "enter" → dispatch the first button.action / link → navigate /
+     *              copy-button → copy(). No-op if the pane has inputs
+     *              (FieldView's <input onSubmit> handles Enter for forms).
+     *    "space" → toggle the first checkbox (dispatch action with
+     *              {checked: !node.checked}). No-op if the pane has inputs
+     *              (Space is a printable character in text fields).
+     *
+     *  Always reads pane state from the CURRENT vm (this.pending), so a key
+     *  pressed mid-render still acts on the structure the user can see.
+     */
+    activatePane(mode) {
+        if (!this.pending)
+            return;
+        const summary = focusedPaneSummary(this.pending.vm, this.focusedPaneIndex);
+        if (summary == null || summary.hasInputs)
+            return;
+        if (mode === "enter") {
+            const a = summary.primaryActionable;
+            if (a == null)
+                return;
+            if (a.type === "button") {
+                this.pending.onAction(a.action);
+            }
+            else if (a.type === "link") {
+                this.navigate(a.href);
+            }
+            else if (a.type === "copy-button") {
+                this.copy(a.text);
             }
-            // exitOnCtrlC:false — the CLI is the single owner of teardown; Ink must
-            // not race it. Ctrl-C is handled in App and routed via requestExit.
-            this.instance = inkRender(app, { exitOnCtrlC: false });
         }
         else {
-            // The shell re-invokes render() on every poll/dispatch; rerender keeps
-            // one Ink instance (and one App instance → focus state survives).
-            this.instance.rerender(app);
+            const c = summary.primaryCheckbox;
+            if (c == null || c.action == null)
+                return;
+            this.pending.onAction({
+                name: c.action.name,
+                context: { ...(c.action.context ?? {}), checked: !c.checked },
+            });
         }
     }
-    /** The interactive element used by render() and by interaction unit tests. */
-    createApp(vm, onAction, opts) {
-        return (_jsx(App, { vm: vm, onAction: onAction, requestExit: opts?.requestExit ?? this.requestExit, interstitial: this.interstitial, viewport: this.viewport, railFraction: this.sidebarFraction, renderWith: (v, rctx) => this.renderNode(v, 0, "comfortable", undefined, rctx) }));
-    }
-    /** Render a full-screen loud notice through the SINGLE existing Ink instance
-     *  (never a 2nd inkRender, never a raw stdout write that would corrupt Ink's
-     *  diff / the ESC[?25h restore). No-op once disposed — closes the
-     *  redirect-during-teardown rerender-after-unmount race. Process stays
-     *  alive; the CLI owns exit (Ctrl-C via App's existing useInput → shutdown).
-     *  Mounts the instance if a notice somehow precedes the first render (that
-     *  is still the FIRST inkRender, not a second). */
-    showInterstitial(msg) {
+    /** Teardown — restore terminal cleanly. Idempotent. */
+    dispose() {
         if (this.disposed)
             return;
-        this.interstitial = msg;
-        const vm = this.lastVm ?? { type: "text", value: "" };
-        const app = this.createApp(vm, this.lastOnAction);
-        if (this.instance)
-            this.instance.rerender(app);
-        else
-            this.instance = inkRender(app, { exitOnCtrlC: false });
+        this.disposed = true;
+        try {
+            this.root?.unmount();
+        }
+        catch { /* nothing */ }
+        try {
+            this.renderer?.destroy?.();
+        }
+        catch { /* nothing */ }
+        this.root = null;
+        this.renderer = null;
     }
-    /** Standalone redirect fallback. Only reached when a consumer wires
-     *  TuiAdapter WITHOUT ShellOptions.onRedirect — core precedence means the
-     *  vms-tui CLI's onRedirect suppresses this (proven by adapter-seam C/F).
-     *  Origin-blind (the adapter has no shell/endpoint ref): hand off to a
-     *  browser, else the loud interstitial. Never silent, never throws into
-     *  core. No-op once disposed. */
+    // ── Capability verbs (navigate / storage / saveFile) ──────────────────────
+    // These are side-channel; no library-specific concerns. Implementations
+    // carried forward from the Ink adapter unchanged in behavior.
     navigate(url) {
         if (this.disposed)
             return;
-        const fallback = () => this.showInterstitial(`Open this URL to continue:\n\n  ${url}\n\n(no browser could be launched — open it manually)`);
-        if (!openExternal(url, fallback))
-            fallback();
+        if (!openExternal(url)) {
+            try {
+                process.stderr.write(`vms-tui: could not open URL automatically. Visit:\n  ${url}\n`);
+            }
+            catch { /* nothing */ }
+        }
     }
-    /** Write-only client storage. `session` → in-memory (process lifetime).
-     *  `local` → a SYNCHRONOUS XDG state-file write — synchronous is mandatory:
-     *  the core applies side-effects before the redirect branch (adapter-seam
-     *  Case E), so the token must land before navigation. Fail-loud, never
-     *  swallow, never re-throw into core (push() has no try/catch): an I/O error
-     *  or an unparseable EXISTING store surfaces the loud interstitial + a
-     *  stderr line and does NOT clobber a possibly-unrelated user file. */
     storage(scope, key, value) {
         if (scope === "session") {
             this.sessionStore.set(key, value);
             return;
         }
+        // local → XDG state file (synchronous; the shell applies storage effects
+        // BEFORE the redirect branch, so the write must land before navigation).
         const xdg = process.env.XDG_STATE_HOME;
         const base = xdg && xdg.trim() ? xdg : join(homedir(), ".local", "state");
         const dir = join(base, "vms-tui");
@@ -1171,10 +292,10 @@ export class TuiAdapter {
                 existing = readFileSync(file, "utf8");
             }
             catch {
-                existing = undefined; // ENOENT → fresh store (not a failure)
+                existing = undefined;
             }
             const obj = existing !== undefined
-                ? JSON.parse(existing) // throw → caught: no clobber
+                ? JSON.parse(existing)
                 : {};
             obj[key] = value;
             writeFileSync(file, JSON.stringify(obj));
@@ -1184,31 +305,20 @@ export class TuiAdapter {
             try {
                 process.stderr.write(`vms-tui: storage write failed (local "${key}"): ${m}\n`);
             }
-            catch {
-                /* stderr unavailable — the interstitial below is still loud */
-            }
-            this.showInterstitial(`Storage write FAILED — your data was NOT saved.\n\n  key:   ${key}\n  error: ${m}`);
+            catch { /* nothing */ }
         }
     }
-    /** Save an authenticated-download blob to the terminal user's filesystem.
-     *  Directory precedence: $XDG_DOWNLOAD_DIR → ~/Downloads (if it exists) →
-     *  process.cwd(). The chosen path is printed to stderr so the operator
-     *  can find it. The filename is sanitized (no path components / no `..`)
-     *  so a hostile/buggy server can't escape the download dir; this is the
-     *  TUI counterpart to the browser's built-in download-name sanitization. */
     async saveFile(data, filename, _contentType) {
+        // XDG_DOWNLOAD_DIR → ~/Downloads → CWD; filename sanitized against traversal.
         const xdg = process.env.XDG_DOWNLOAD_DIR;
         const home = homedir();
         const dir = xdg && xdg.trim()
             ? xdg
             : existsSync(join(home, "Downloads")) ? join(home, "Downloads") : process.cwd();
         mkdirSync(dir, { recursive: true });
-        // Strip path separators (POSIX + Windows) and any leading dots so a
-        // server-supplied "../etc/passwd" or "foo/bar" becomes a flat basename.
-        // Empty/dot-only results fall back to literal "download".
         const sanitized = filename
-            .split(/[/\\]/).pop() // drop everything before the last separator
-            .replace(/^\.+/, "") // strip leading dots (no hidden files via traversal)
+            .split(/[/\\]/).pop()
+            .replace(/^\.+/, "")
             .trim();
         const safeName = sanitized.length > 0 ? sanitized : "download";
         const out = join(dir, safeName);
@@ -1217,436 +327,824 @@ export class TuiAdapter {
         try {
             process.stderr.write(`vms-tui: saved ${out}\n`);
         }
-        catch {
-            /* stderr unavailable — the file landed regardless */
-        }
+        catch { /* nothing */ }
     }
-    /** Test-only: read back a session value. The wire contract has no storage
-     *  read; this exists solely so a unit test can prove the write landed
-     *  (same rationale as exporting osc52 for a deterministic test). */
+    /** Test-only: read back a session value. The wire contract has no
+     *  storage read; this exists solely so unit tests can prove the write
+     *  landed (parity with the Ink adapter's _peekSession). */
     _peekSession(key) {
         return this.sessionStore.get(key);
     }
-    /** Pure ViewNode → Ink element, UNFOCUSED (NO_CTX). Used by static unit
-     *  tests; byte-identical to Phase 1 output. */
-    renderTree(vm) {
-        return this.renderNode(vm, 0, "comfortable", undefined, NO_CTX);
+}
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+/** Best-effort: hand a URL to the platform's browser. Returns true if a
+ *  child process was spawned, false if no opener was available. */
+function openExternal(url) {
+    const opener = process.platform === "darwin" ? "open" :
+        process.platform === "win32" ? "start" :
+            "xdg-open";
+    try {
+        const child = spawn(opener, [url], { detached: true, stdio: "ignore" });
+        child.unref();
+        return true;
     }
-    // ── helpers ──────────────────────────────────────────────────────────────
-    /** Spacing rhythm. compact collapses gaps/padding (mirrors .vms--compact). */
-    spacing(d) {
-        return d === "compact" ? { gap: 0, pad: 0 } : { gap: 1, pad: 1 };
+    catch {
+        return false;
     }
-    /**
-     * React key: the roadmap's identity heuristic — explicit id/name where
-     * present, else positional index. Render-only; never a wire field.
-     */
-    keyOf(node, i) {
-        const n = node;
-        return n.id ?? n.name ?? `${node.type}-${i}`;
+}
+// ─── Pane counting ──────────────────────────────────────────────────────────
+// A "pane" is a Tab-cyclable focus region with its own scroll. The rules:
+//   - `section` is a pane (whether or not variant:"card");
+//   - top-level `list` (page.children) is a pane;
+//   - top-level `table` is a pane (tables benefit from independent scroll);
+//   - non-section nodes inside a section share that section's scroll.
+// We count panes in the same depth-first order the renderer visits them,
+// which makes the index assigned by the renderer's counter match the index
+// `cycleFocus` is mutating. Pure walker — no rendering side effects.
+function isPaneNode(node, isTopLevel) {
+    if (node.type === "section")
+        return true;
+    if (isTopLevel && (node.type === "list" || node.type === "table"))
+        return true;
+    return false;
+}
+/** B4 — find the first ModalNode anywhere in the tree (depth-first, child
+ *  order). Returns null when there is no modal active.
+ *
+ *  Used by App to (a) decide whether to render the modal overlay portal at
+ *  app-root z-level, and (b) tell countPanes to restrict the focus cycle to
+ *  the modal's interior. The wire allows at most one visible modal at a time
+ *  in practice — if a future use-case wires two, the first wins; the second
+ *  is rendered inline (returning null today) and so just isn't visible. We
+ *  can promote this to a stack if the need arises.
+ */
+function findModal(node) {
+    if (node.type === "modal")
+        return node;
+    const children = node.children;
+    if (children)
+        for (const c of children) {
+            const m = findModal(c);
+            if (m)
+                return m;
+        }
+    const footer = node.footer;
+    if (footer)
+        for (const c of footer) {
+            const m = findModal(c);
+            if (m)
+                return m;
+        }
+    return null;
+}
+function countPanes(vm) {
+    let count = 0;
+    const visit = (node, isTopLevel) => {
+        if (isPaneNode(node, isTopLevel))
+            count++;
+        // Recurse only through known container shapes — we don't introspect
+        // arbitrary ViewNode payloads (like table rows / form values) because
+        // they don't contain pane-eligible children today.
+        if (node.type === "page") {
+            for (const c of node.children)
+                visit(c, true);
+        }
+        else if (node.type === "section") {
+            // Inside a section, children DON'T become independent panes (the
+            // section is the pane); recurse with isTopLevel=false.
+            for (const c of node.children)
+                visit(c, false);
+        }
+        else if (node.type === "list") {
+            for (const c of node.children)
+                visit(c, false);
+        }
+        else if (node.type === "list-item") {
+            for (const c of node.children)
+                visit(c, false);
+        }
+        else if (node.type === "modal") {
+            for (const c of node.children)
+                visit(c, false);
+            if (node.footer)
+                for (const c of node.footer)
+                    visit(c, false);
+        }
+        else if (node.type === "form") {
+            for (const c of node.children)
+                visit(c, false);
+        }
+    };
+    // B4 focus trap: when a modal is in the tree, only count panes within the
+    // modal's subtree. Outer panes still RENDER, but they're not part of the
+    // Tab cycle and have no focus border — the user is operationally locked
+    // to the modal until it's dismissed.
+    const modal = findModal(vm);
+    if (modal != null) {
+        for (const c of modal.children)
+            visit(c, false);
+        if (modal.footer)
+            for (const c of modal.footer)
+                visit(c, false);
+        return count;
     }
-    /** Fail-loud placeholder — single source of the phase string. */
-    unsupported(label, key) {
-        return (_jsxs(Text, { color: "yellow", children: ["[unsupported: ", label, " \u2014 phase 5]"] }, key));
+    visit(vm, true);
+    return count;
+}
+function focusedPaneSummary(vm, index) {
+    // Step 1: find the pane node at `index`, mirroring countPanes' traversal.
+    let cursor = -1;
+    let target = null;
+    const visit = (node, isTopLevel) => {
+        // Returns true when target found (early-exit propagation).
+        if (isPaneNode(node, isTopLevel)) {
+            cursor++;
+            if (cursor === index) {
+                target = node;
+                return true;
+            }
+        }
+        if (node.type === "page") {
+            for (const c of node.children)
+                if (visit(c, true))
+                    return true;
+        }
+        else if (node.type === "section") {
+            for (const c of node.children)
+                if (visit(c, false))
+                    return true;
+        }
+        else if (node.type === "list") {
+            for (const c of node.children)
+                if (visit(c, false))
+                    return true;
+        }
+        else if (node.type === "list-item") {
+            for (const c of node.children)
+                if (visit(c, false))
+                    return true;
+        }
+        else if (node.type === "modal") {
+            for (const c of node.children)
+                if (visit(c, false))
+                    return true;
+            if (node.footer)
+                for (const c of node.footer)
+                    if (visit(c, false))
+                        return true;
+        }
+        else if (node.type === "form") {
+            for (const c of node.children)
+                if (visit(c, false))
+                    return true;
+        }
+        return false;
+    };
+    const modal = findModal(vm);
+    if (modal != null) {
+        for (const c of modal.children)
+            if (visit(c, false))
+                break;
+        if (target == null && modal.footer)
+            for (const c of modal.footer)
+                if (visit(c, false))
+                    break;
     }
-    /** Focused-node affordance. Unfocused → returns the element unchanged, so
-     *  the static path stays byte-identical to Phase 1. Focused → a leading
-     *  cyan caret (deterministic + information-honest; ▸ U+25B8 is distinct
-     *  from the list-item markers › / ·). */
-    focusWrap(el, focused, key) {
-        if (!focused)
-            return el;
-        // Children get fixed structural keys ("caret"/"el") that are unique within
-        // THIS 2-element array and cannot collide with any node-derived key (the
-        // wrapped element is the sole child of its own Box, so its own key is
-        // irrelevant here). The wrapper carries `key` for its parent sibling list.
-        return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: "cyan", bold: true, children: "▸ " }, "caret"), _jsx(Box, { children: el }, "el")] }, key));
+    else {
+        visit(vm, true);
     }
-    /** Shipped list-item variant → marker + child tint (fail-soft: unknown ok). */
-    listItemStyle(variant) {
-        switch (variant) {
-            case "active":
-                return { marker: "›", mc: "cyan", mb: true, child: { bold: true } };
-            case "done":
-                return { marker: "✓", mc: "green", md: true, child: { dim: true } };
-            case "critical":
-                return { marker: "●", mc: "red", mb: true, child: { color: "red" } };
-            case "high":
-                return { marker: "●", mc: "red", child: { color: "red" } };
-            case "warning":
-                return { marker: "▲", mc: "yellow", child: { color: "yellow" } };
-            case "success":
-                return { marker: "●", mc: "green", child: { color: "green" } };
-            case "info":
-                return { marker: "●", mc: "blue", child: { color: "blue" } };
-            default:
-                return { marker: "·", md: true };
+    if (target == null)
+        return null;
+    // Step 2: scan the target pane's subtree for interactives.
+    // TypeScript narrows let-mutated-through-a-closure conservatively (the
+    // `target = node` assignment is invisible to flow analysis here), so the
+    // post-check narrowing collapses `ViewNode | null` to `never`. The cast
+    // restores the type without changing runtime behavior.
+    const pane = target;
+    const heading = pane.type === "section" ? (pane.heading ?? null) : null;
+    let hasInputs = false;
+    let primaryActionable = null;
+    let primaryCheckbox = null;
+    const scan = (node) => {
+        if (node.type === "field")
+            hasInputs = true;
+        if (primaryActionable == null) {
+            if (node.type === "button")
+                primaryActionable = node;
+            else if (node.type === "link" && node.href.trim().length > 0)
+                primaryActionable = node;
+            else if (node.type === "copy-button")
+                primaryActionable = node;
         }
-    }
-    /** page & section share the 4 layout presets. Information-honest, not pixel. */
-    layoutContainer(layout, children, density, rctx, topLevel = false) {
-        const sp = this.spacing(density);
-        const kids = (children ?? []).map((c, i) => this.renderNode(c, this.keyOf(c, i), density, undefined, rctx));
-        // 0.4.7 — numeric width ONLY at the page's TOP layout container (it IS
-        // the full terminal width). Everything below fills via Yoga align-stretch
-        // from this numeric anchor (proven on the real-adapter oracle). NESTED
-        // layoutContainer calls (a section's own children) pass topLevel=false ⇒
-        // no width ⇒ they get the correct PANE-relative width via stretch (a
-        // global numeric cols here would overflow a narrower pane). `cards` never
-        // gets it (uniform small-tile grid by design). Not top-level / not
-        // filling ⇒ {} ⇒ byte-identical.
-        const fillW = topLevel && rctx.fillCols ? { width: rctx.fillCols } : {};
-        switch (layout) {
-            case "split":
-                return (_jsx(Box, { flexDirection: "row", gap: sp.gap || 1, ...fillW, children: kids.map((el, i) => (_jsx(Box, { flexGrow: 1, flexShrink: 1, flexBasis: 0, children: el }, i))) }));
-            case "cards":
-                return (_jsx(Box, { flexDirection: "row", flexWrap: "wrap", gap: sp.gap || 1, children: kids.map((el, i) => (_jsx(Box, { flexGrow: 0, flexShrink: 1, flexBasis: 28, minWidth: 20, children: el }, i))) }));
-            case "sidebar": {
-                if (kids.length === 0)
-                    return _jsx(Box, {});
-                const [rail, ...rest] = kids;
-                // Deterministic NUMERIC split when filling. `flexGrow` does NOT
-                // distribute reliably past a flexShrink:0 fixed-basis rail (real-
-                // adapter oracle: sidebar stayed 34 at cols 80 AND 160, while `split`
-                // — symmetric flexGrow — scaled). So when filling: fixed numeric rail
-                // + the exact remaining width on the main pane (it then carries the
-                // terminal width to its section via align-stretch). Not filling ⇒ the
-                // ORIGINAL flex props, byte-identical.
-                const cols = topLevel && rctx.fillCols ? rctx.fillCols : 0;
-                const filling = cols > 0;
-                // 0.4.9 — PROPORTIONAL rail (default 1/3, clamped [24,56]) instead of
-                // a hardcoded 24 (unusable on wide terminals: 24/146 ≈ 16%). Never
-                // below the old 24 on small terminals; capped so ultra-wide keeps the
-                // detail pane dominant. Tunable via `new TuiAdapter({ sidebarFraction })`.
-                // Only the filling branches use RAIL; the non-fill path keeps the
-                // literal flexBasis:24/minWidth:18 (byte-identical).
-                const RAIL = filling
-                    ? Math.min(56, Math.max(24, Math.round(cols * (rctx.railFraction ?? 1 / 3))))
-                    : 24;
-                const g = sp.gap || 1;
-                const mw = Math.max(1, cols - RAIL - g);
-                if (rest.length === 0) {
-                    return filling ? (
-                    // flexDirection:column ⇒ the lone section align-stretches to the
-                    // numeric width (a default-row box would not width-stretch it).
-                    _jsx(Box, { flexDirection: "column", flexShrink: 0, ...fillW, children: rail })) : (_jsx(Box, { flexShrink: 0, flexBasis: 24, minWidth: 18, children: rail }));
-                }
-                return (_jsxs(Box, { flexDirection: "row", gap: g, ...fillW, children: [filling ? (
-                        // flexDirection:column ⇒ the rail's section align-stretches to
-                        // the numeric RAIL width (a default-row box sizes it to content
-                        // — same lesson as the single-child branch).
-                        _jsx(Box, { flexDirection: "column", flexShrink: 0, width: RAIL, children: rail })) : (_jsx(Box, { flexShrink: 0, flexBasis: 24, minWidth: 18, children: rail })), filling ? (
-                        // Single numeric-width column directly holding the detail
-                        // sections — exactly the `stack` shape the oracle proves scales
-                        // (a card section align-stretches to a numeric-width parent).
-                        // The extra auto-width wrapper that used to sit here broke that
-                        // align-stretch chain (oracle: card detail stuck at 38).
-                        _jsx(Box, { flexDirection: "column", gap: sp.gap, flexShrink: 1, width: mw, children: rest })) : (_jsx(Box, { flexGrow: 1, flexShrink: 1, flexBasis: 0, children: _jsx(Box, { flexDirection: "column", gap: sp.gap, children: rest }) }))] }));
-            }
-            default: // "stack" / undefined
-                return (_jsx(Box, { flexDirection: "column", gap: sp.gap, ...fillW, children: kids }));
+        if (primaryCheckbox == null && node.type === "checkbox" && node.action != null) {
+            primaryCheckbox = node;
         }
+        const children = node.children;
+        if (children)
+            for (const c of children)
+                scan(c);
+    };
+    // Scan only the pane's children — not the pane itself (which is the
+    // section/list/table wrapper). For a top-level list/table pane, the
+    // node IS the container and its children are rows / list-items.
+    const paneChildren = pane.children;
+    if (paneChildren)
+        for (const c of paneChildren)
+            scan(c);
+    return { heading, hasInputs, primaryActionable, primaryCheckbox };
+}
+function App({ vm, onAction, focusedPaneIndex = 0, sidebarFraction = 1 / 3, setFieldValue, resolveFieldValue, copiedKey = null, copy, navigate, }) {
+    // B4 — detect modal at the top of every render so the focus-trap + overlay
+    // wiring is consistent end-to-end. When a modal exists in the tree, the
+    // inline ModalView returns null (so it doesn't render in-place); we render
+    // the modal at app-root via ModalOverlay so its z-order is above all
+    // outer content and its position context is the viewport, not whatever
+    // section the modal happened to be nested under.
+    const modal = findModal(vm);
+    const ctx = {
+        onAction,
+        focusedPaneIndex,
+        paneCounter: { current: 0 },
+        sidebarFraction,
+        isTopLevel: true,
+        inFocusedPane: false,
+        paneInputCounter: { current: 0 },
+        submitForm: null,
+        setFieldValue: setFieldValue ?? (() => { }),
+        // Default resolver: just return the wire value — no preservation outside
+        // the mounted adapter path (the conformance walker doesn't persist state).
+        resolveFieldValue: resolveFieldValue ?? ((_name, wireValue) => wireValue),
+        copiedKey,
+        copy: copy ?? (() => { }),
+        // B5: link click target. Default no-op for the conformance walker (which
+        // doesn't have an adapter to call). Real renders thread TuiAdapter.navigate.
+        navigate: navigate ?? (() => { }),
+        modalActive: modal != null,
+        insideModal: false,
+    };
+    // B5 — pane summary for the StatusBar's hotkey hints. Computed at render
+    // time from the same focusedPaneIndex used by everyone else; consistent
+    // with what the user sees as the focused pane.
+    const paneSummary = focusedPaneSummary(vm, focusedPaneIndex);
+    // App shell: content fills, status bar pinned at the bottom. height="100%"
+    // means it consumes the renderer's viewport (alt-screen size). The
+    // inner content box is position="relative" so the modal overlay's
+    // absolute positioning resolves to the content area (not the status bar).
+    return (_jsxs("box", { flexDirection: "column", height: "100%", children: [_jsxs("box", { flexGrow: 1, flexShrink: 1, flexDirection: "column", position: "relative", children: [renderNode(vm, ctx), modal != null ? (_jsx(ModalOverlay, { node: modal, ctx: { ...ctx, isTopLevel: true, insideModal: true, paneCounter: ctx.paneCounter } })) : null] }), _jsx(StatusBar, { summary: paneSummary })] }));
+}
+/** B5 — pane-aware keybind hints.
+ *
+ *  Tab/Shift-Tab and Ctrl-C are universal; ↑↓ PgUp/PgDn is universal because
+ *  scrolling happens inside OpenTUI's <scrollbox> regardless of pane type.
+ *  The variable slot in the middle is determined by `summary`:
+ *    - pane has fields → "Enter submit" (FieldView's <input onSubmit>)
+ *    - pane has primary actionable → "Enter <label>" (truncated to ~16ch)
+ *    - pane has checkbox with action → "Space toggle"
+ *    - none of the above → no extra hint
+ *
+ *  Heading (when present) shows on the right side so the user sees which
+ *  pane they're focused in — important when multiple sections look similar.
+ */
+function StatusBar({ summary }) {
+    const hint = paneActivationHint(summary);
+    const heading = summary?.heading ?? null;
+    return (_jsxs("box", { flexDirection: "row", gap: 2, paddingLeft: 1, paddingRight: 1, children: [_jsx("text", { fg: "#888888", children: "Tab" }), _jsx("text", { fg: "#aaaaaa", children: "next pane" }), _jsx("text", { fg: "#888888", children: "Shift-Tab" }), _jsx("text", { fg: "#aaaaaa", children: "prev" }), _jsx("text", { fg: "#888888", children: "\u2191\u2193 PgUp/PgDn" }), _jsx("text", { fg: "#aaaaaa", children: "scroll" }), hint != null ? (_jsxs(_Fragment, { children: [_jsx("text", { fg: "#88aaff", children: hint.key }), _jsx("text", { fg: "#aaaaaa", children: hint.label })] })) : null, _jsx("text", { fg: "#888888", children: "Ctrl-C" }), _jsx("text", { fg: "#aaaaaa", children: "quit" }), heading != null ? (_jsx("box", { flexGrow: 1, flexShrink: 1, justifyContent: "flex-end", flexDirection: "row", children: _jsx("text", { fg: "#88aaff", children: heading }) })) : null] }));
+}
+function paneActivationHint(summary) {
+    if (summary == null)
+        return null;
+    if (summary.hasInputs)
+        return { key: "Enter", label: "submit" };
+    const a = summary.primaryActionable;
+    if (a != null) {
+        let label;
+        if (a.type === "button")
+            label = a.label;
+        else if (a.type === "link")
+            label = a.label;
+        else
+            label = a.label ?? "copy"; // copy-button
+        // Truncate long labels so the status bar fits a single line cleanly.
+        const truncated = label.length > 16 ? label.slice(0, 13) + "..." : label;
+        return { key: "Enter", label: truncated };
     }
-    // ── the node switch ──────────────────────────────────────────────────────
-    renderNode(node, key, density = "comfortable", inherited, rctx = NO_CTX) {
-        switch (node.type) {
-            case "page": {
-                const d = node.density === "compact" ? "compact" : "comfortable";
-                const sp = this.spacing(d);
-                return (_jsxs(Box, { flexDirection: "column", gap: sp.gap, ...(rctx.fillCols ? { width: rctx.fillCols, flexGrow: 1 } : {}), children: [node.title ? (_jsx(Box, { children: _jsx(Text, { bold: true, underline: true, children: node.title }) })) : null, this.layoutContainer(node.layout, node.children ?? [], d, rctx, true)] }, key));
-            }
-            case "section": {
-                const sp = this.spacing(density);
-                const card = node.variant === "card";
-                return (_jsxs(Box, { flexDirection: "column", gap: sp.gap, borderStyle: card ? "round" : undefined, paddingX: card ? Math.max(1, sp.pad) : undefined, paddingY: card ? (sp.gap ? 1 : 0) : undefined, children: [node.heading ? (_jsx(Box, { children: _jsx(Text, { bold: true, children: node.heading }) })) : null, this.layoutContainer(node.layout, node.children ?? [], density, rctx)] }, key));
-            }
-            case "list":
-                return (_jsx(Box, { flexDirection: "column", children: (node.children ?? []).map((c, i) => this.renderNode(c, this.keyOf(c, i), density, inherited, rctx)) }, key));
-            case "list-item": {
-                const st = this.listItemStyle(node.variant);
-                const childInherited = st.child ?? inherited;
-                return (_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: st.mc, bold: st.mb, dimColor: st.md, children: st.marker }), _jsx(Box, { flexDirection: "row", gap: 1, children: (node.children ?? []).map((c, i) => this.renderNode(c, this.keyOf(c, i), density, childInherited, rctx)) })] }, key));
-            }
-            case "text": {
-                const s = node.style;
-                return (_jsx(Text, { bold: s === "heading" || s === "subheading" || inherited?.bold === true, italic: s === "subheading", dimColor: s === "muted" || inherited?.dim === true, color: s === "error" ? "red" : inherited?.color, strikethrough: s === "strikethrough", children: node.value }, key));
-            }
-            case "link": {
-                const fk = rctx.focusKey(node);
-                const focused = fk != null && fk === rctx.focusedKey;
-                const copied = fk != null && fk === rctx.copiedKey;
-                const href = (node.href ?? "").trim();
-                if (!href) {
-                    return (_jsx(Box, { children: _jsx(Text, { underline: true, color: inherited?.color, dimColor: inherited?.dim, children: node.label }) }, key));
-                }
-                // OSC 8 hyperlink: ESC ]8;; <uri> BEL <label> ESC ]8;; BEL. The
-                // ESC introducer + BEL terminator are LOAD-BEARING — without them
-                // (a long-latent bug fixed in 0.4.8) this is plain `]8;;…` garbage
-                // text in every terminal. `\x1b`/`\x07` escapes match osc52()'s
-                // proven style. As the SOLE child of its own Box with no wrap, the
-                // string-width over-count (string-width does not strip OSC 8) stays
-                // contained to this line and cannot corrupt sibling layout.
-                const osc = `\x1b]8;;${node.href}\x07${node.label}\x1b]8;;\x07${copied ? " ✓ copied" : ""}`;
-                return this.focusWrap(_jsx(Box, { children: _jsx(Text, { wrap: "truncate-end", underline: true, color: inherited?.color, dimColor: inherited?.dim, children: osc }) }, key), focused, key);
-            }
-            case "stat-bar":
-                return (_jsx(Box, { flexDirection: "row", gap: 2, children: (node.stats ?? []).map((st, i) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: String(st.value) }), _jsx(Text, { dimColor: true, children: st.label })] }, `${st.label}-${i}`))) }, key));
-            case "progress": {
-                const raw = Number(node.value);
-                const v = Number.isFinite(raw) ? Math.max(0, Math.min(100, raw)) : 0;
-                const width = 20;
-                const filled = Math.round((v / 100) * width);
-                const bar = "█".repeat(filled) + "░".repeat(width - filled);
-                return (_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { children: bar }), _jsxs(Text, { dimColor: true, children: [Math.round(v), "%"] })] }, key));
-            }
-            case "button": {
-                const fk = rctx.focusKey(node);
-                const focused = fk != null && fk === rctx.focusedKey;
-                const variant = node.variant;
-                const color = variant === "primary"
-                    ? "cyan"
-                    : variant === "danger"
-                        ? "red"
-                        : inherited?.color;
-                const bold = variant === "primary" || variant === "danger" || inherited?.bold === true;
-                return this.focusWrap(_jsx(Box, { borderStyle: "round", paddingX: 1, children: _jsx(Text, { bold: bold, color: color, dimColor: inherited?.dim, children: node.label }) }, key), focused, key);
-            }
-            case "checkbox": {
-                const fk = rctx.focusKey(node);
-                const focused = fk != null && fk === rctx.focusedKey;
-                return this.focusWrap(_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { children: node.checked ? "[x]" : "[ ]" }), node.label ? (_jsx(Text, { bold: inherited?.bold === true, color: inherited?.color, dimColor: inherited?.dim, children: node.label })) : null] }, key), focused, key);
-            }
-            case "tabs":
-                return (_jsx(Box, { flexDirection: "row", gap: 1, children: (node.tabs ?? []).map((t, i) => {
-                        const on = t.value === node.selected;
-                        const fk = rctx.focusKey(t);
-                        const focused = fk != null && fk === rctx.focusedKey;
-                        const el = on ? (_jsx(Box, { borderStyle: "round", paddingX: 1, children: _jsx(Text, { bold: true, color: "cyan", children: t.label }) }, t.value ?? i)) : (_jsx(Box, { paddingX: 1, children: _jsx(Text, { dimColor: true, children: t.label }) }, t.value ?? i));
-                        return this.focusWrap(el, focused, t.value ?? i);
-                    }) }, key));
-            case "copy-button": {
-                const fk = rctx.focusKey(node);
-                const focused = fk != null && fk === rctx.focusedKey;
-                const copied = fk != null && fk === rctx.copiedKey;
-                const label = copied
-                    ? (node.copiedLabel ?? "Copied!")
-                    : (node.label ?? "Copy");
-                return this.focusWrap(_jsx(Box, { borderStyle: "round", paddingX: 1, children: _jsx(Text, { children: label }) }, key), focused, key);
-            }
-            case "form": {
-                const inline = node.layout === "inline";
-                const fk = rctx.focusKey(node);
-                const focused = fk != null && fk === rctx.focusedKey;
-                return (_jsxs(Box, { flexDirection: inline ? "row" : "column", gap: 1, alignItems: inline ? "flex-start" : undefined, children: [(node.children ?? []).map((c, i) => this.renderNode(c, this.keyOf(c, i), density, undefined, rctx)), this.focusWrap(_jsx(Box, { borderStyle: "round", paddingX: 1, children: _jsx(Text, { bold: true, color: "cyan", children: node.submitLabel ?? "Submit" }) }), focused, "submit")] }, key));
-            }
-            case "field": {
-                const it = node.inputType;
-                if (it === "hidden")
-                    return _jsx(Box, {}, key);
-                const fk = rctx.focusKey(node);
-                const focused = fk != null && fk === rctx.focusedKey;
-                const dval = fk != null ? rctx.draft(fk) : undefined;
-                if (it === "checkbox") {
-                    const cur = dval ?? node.value;
-                    const truthy = !!cur && cur !== "false" && cur !== "0";
-                    return this.focusWrap(_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { children: truthy ? "[x]" : "[ ]" }), node.label ? _jsx(Text, { children: node.label }) : null] }, key), focused, key);
-                }
-                if (it === "textarea" || it === "code") {
-                    // Phase 5a — multi-line editor. `code` == textarea + a dim language
-                    // hint label (no syntax coloring: the framework only ships the
-                    // editable monospaced surface; a terminal is already monospace).
-                    const current = dval ?? node.value ?? "";
-                    const labelText = (node.label ?? "") +
-                        (it === "code" && node.language ? ` [${node.language}]` : "");
-                    if (rctx.interactive && focused && fk != null) {
-                        return this.focusWrap(_jsxs(Box, { flexDirection: "column", children: [labelText ? _jsx(Text, { dimColor: true, children: labelText }) : null, _jsx(Box, { borderStyle: "single", paddingX: 1, minWidth: 20, children: _jsx(MultilineEditor, { focus: true, value: current, placeholder: node.placeholder ?? "", onChange: (v) => rctx.onFieldChange?.(fk, v) }, "input") })] }, key), focused, key);
-                    }
-                    const hasValue = current !== "";
-                    const display = hasValue ? current : (node.placeholder ?? "");
-                    return this.focusWrap(_jsxs(Box, { flexDirection: "column", children: [labelText ? _jsx(Text, { dimColor: true, children: labelText }) : null, _jsx(Box, { borderStyle: "single", paddingX: 1, minWidth: 20, children: _jsx(Text, { dimColor: !hasValue, children: display === "" ? " " : display }) })] }, key), focused, key);
-                }
-                if (it === "file") {
-                    return this.unsupported(`field(${it})`, key);
-                }
-                if (it === "select" || it === "select-multiple") {
-                    // Phase 5b — interactive picker. `select` → ink-select-input (its
-                    // useInput owns Up/Down/Enter/digits and does NOT consume Tab/
-                    // Shift-Tab/Ctrl-C — verified — so App keeps ring + teardown).
-                    // `select-multiple` → the contained MultiSelectInput (same keyboard
-                    // contract). Editor mounts ONLY when focused on a TTY; otherwise
-                    // (and on the pure NO_CTX/non-TTY path) a static label box,
-                    // byte-identical when no draft exists.
-                    const opts = node.options ?? [];
-                    const multi = it === "select-multiple";
-                    const current = dval ?? node.value ?? "";
-                    const labelText = node.label ?? "";
-                    if (rctx.interactive && focused && fk != null) {
-                        if (multi) {
-                            return this.focusWrap(_jsxs(Box, { flexDirection: "column", children: [labelText ? _jsx(Text, { dimColor: true, children: labelText }) : null, _jsx(Box, { borderStyle: "single", paddingX: 1, minWidth: 20, children: _jsx(MultiSelectInput, { focus: true, options: opts, value: current, onChange: (v) => rctx.onFieldChange?.(fk, v) }, "input") })] }, key), focused, key);
-                        }
-                        const items = opts.map((o) => ({ label: o.label, value: o.value }));
-                        const idx = items.findIndex((i) => i.value === current);
-                        return this.focusWrap(_jsxs(Box, { flexDirection: "column", children: [labelText ? _jsx(Text, { dimColor: true, children: labelText }) : null, _jsx(Box, { borderStyle: "single", paddingX: 1, minWidth: 20, children: _jsx(SelectInput, { isFocused: true, items: items, initialIndex: idx < 0 ? 0 : idx, onSelect: (i) => rctx.onFieldChange?.(fk, String(i.value)) }, `sel:${current}`) })] }, key), focused, key);
-                    }
-                    // Static: selected label(s). ONE flat <Text> for the value line
-                    // (Phase-1/5a nested-<Text> width pitfall).
-                    const labelOf = (val) => opts.find((o) => o.value === val)?.label ?? val;
-                    const display = multi
-                        ? current
-                            .split(",")
-                            .map((s) => s.trim())
-                            .filter((s) => s.length > 0)
-                            .map(labelOf)
-                            .join(", ")
-                        : current
-                            ? labelOf(current)
-                            : "";
-                    const hasValue = display !== "";
-                    return this.focusWrap(_jsxs(Box, { flexDirection: "column", children: [labelText ? _jsx(Text, { dimColor: true, children: labelText }) : null, _jsx(Box, { borderStyle: "single", paddingX: 1, minWidth: 20, children: _jsx(Text, { dimColor: !hasValue, children: hasValue ? display : (node.placeholder ?? " ") }) })] }, key), focused, key);
-                }
-                // Single-line text family: text|email|password|number|date|time|
-                // datetime-local (+ any unknown → text). Editable `<TextInput>` ONLY
-                // when focused on a TTY; otherwise (and on the pure NO_CTX/non-TTY
-                // path) the Phase-2 static box, byte-identical when no draft exists.
-                const current = dval ?? node.value ?? "";
-                if (rctx.interactive && focused && fk != null) {
-                    return this.focusWrap(_jsxs(Box, { flexDirection: "column", children: [node.label ? _jsx(Text, { dimColor: true, children: node.label }) : null, _jsx(Box, { borderStyle: "single", paddingX: 1, minWidth: 20, children: _jsx(TextInput, { focus: true, value: current, placeholder: node.placeholder ?? "", mask: it === "password" ? "•" : undefined, onChange: (v) => rctx.onFieldChange?.(fk, v), onSubmit: () => rctx.onFieldSubmit?.(node) }, "input") })] }, key), focused, key);
-                }
-                const hasValue = current !== "";
-                const display = it === "password"
-                    ? hasValue
-                        ? "•".repeat(current.length)
-                        : (node.placeholder ?? "")
-                    : hasValue
-                        ? current
-                        : (node.placeholder ?? "");
-                return this.focusWrap(_jsxs(Box, { flexDirection: "column", children: [node.label ? _jsx(Text, { dimColor: true, children: node.label }) : null, _jsx(Box, { borderStyle: "single", paddingX: 1, minWidth: 20, children: _jsx(Text, { dimColor: !hasValue, children: display }) })] }, key), focused, key);
+    if (summary.primaryCheckbox != null)
+        return { key: "Space", label: "toggle" };
+    return null;
+}
+function renderNode(node, ctx, key) {
+    switch (node.type) {
+        case "page": return _jsx(PageView, { node: node, ctx: ctx }, key);
+        case "section": return _jsx(SectionView, { node: node, ctx: ctx }, key);
+        case "text": return _jsx(TextView, { node: node }, key);
+        case "link": return _jsx(LinkView, { node: node, ctx: ctx }, key);
+        case "list": return _jsx(ListView, { node: node, ctx: ctx }, key);
+        case "list-item": return _jsx(ListItemView, { node: node, ctx: ctx }, key);
+        case "table": return _jsx(TableView, { node: node, ctx: ctx }, key);
+        case "button": return _jsx(ButtonView, { node: node, ctx: ctx }, key);
+        case "checkbox": return _jsx(CheckboxView, { node: node, ctx: ctx }, key);
+        case "tabs": return _jsx(TabsView, { node: node, ctx: ctx }, key);
+        case "progress": return _jsx(ProgressView, { node: node }, key);
+        case "stat-bar": return _jsx(StatBarView, { node: node }, key);
+        case "modal": return _jsx(ModalView, { node: node, ctx: ctx }, key);
+        case "copy-button": return _jsx(CopyButtonView, { node: node, ctx: ctx }, key);
+        case "form": return _jsx(FormView, { node: node, ctx: ctx }, key);
+        case "field": return _jsx(FieldView, { node: node, ctx: ctx }, key);
+        default:
+            return _jsx(UnsupportedView, { type: node.type }, key);
+    }
+}
+// ── page ──────────────────────────────────────────────────────────────────
+// Title rendered as an unbordered header when present; children flow per
+// the layout preset. `density: "compact"` tightens the gap.
+function PageView({ node, ctx }) {
+    const gap = node.density === "compact" ? 0 : 1;
+    // Layout dispatch — see layoutProps() for the Yoga mapping.
+    const layout = layoutProps(node.layout, ctx.sidebarFraction);
+    const childCtx = { ...ctx, isTopLevel: true };
+    return (_jsxs("box", { flexDirection: "column", gap: gap, children: [node.title ? _jsx("text", { attributes: 1 /* TextAttributes.BOLD */, children: node.title }) : null, _jsx("box", { ...layout, flexShrink: 1, children: node.children.map((child, i) => renderChildWithLayout(child, childCtx, i, node.layout, ctx.sidebarFraction)) })] }));
+}
+// Sized container around a layout child. For "sidebar" the FIRST child gets
+// sidebarFraction width; the rest split evenly. For "cards", each child is
+// flex-basis ~33%. For "split" each child is flex 1.
+function renderChildWithLayout(child, ctx, i, layout, sidebarFraction) {
+    switch (layout) {
+        case "split":
+            return (_jsx("box", { flexGrow: 1, flexShrink: 1, flexBasis: 0, flexDirection: "column", children: renderNode(child, ctx, "c") }, i));
+        case "cards":
+            return (_jsx("box", { width: `${Math.round(100 / 3)}%`, flexShrink: 1, flexDirection: "column", children: renderNode(child, ctx, "c") }, i));
+        case "sidebar":
+            if (i === 0) {
+                return (_jsx("box", { width: `${Math.round(sidebarFraction * 100)}%`, flexShrink: 0, flexDirection: "column", children: renderNode(child, ctx, "c") }, i));
             }
-            case "modal": {
-                const sp = this.spacing(density);
-                // size → box width (cosmetic; fullscreen = full available width).
-                const boxWidth = node.size === "narrow"
-                    ? 40
-                    : node.size === "wide"
-                        ? 90
-                        : node.size === "fullscreen"
-                            ? "100%"
-                            : 60; // medium (default)
-                return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", paddingX: Math.max(1, sp.pad), paddingY: sp.gap ? 1 : 0, gap: sp.gap, width: boxWidth, children: [node.title ? (_jsx(Box, { children: _jsx(Text, { bold: true, children: node.title }) })) : null, node.dismissAction ? (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: "✕  (Esc to close)" }) })) : null, _jsx(Box, { flexDirection: "column", gap: sp.gap, children: (node.children ?? []).map((c, i) => this.renderNode(c, this.keyOf(c, i), density, inherited, rctx)) }), node.footer && node.footer.length > 0 ? (_jsx(Box, { flexDirection: "row", gap: 1, children: node.footer.map((c, i) => this.renderNode(c, this.keyOf(c, i), density, inherited, rctx)) })) : null] }, key));
+            return (_jsx("box", { flexGrow: 1, flexShrink: 1, flexBasis: 0, flexDirection: "column", children: renderNode(child, ctx, "c") }, i));
+        case "stack":
+        case undefined:
+        default:
+            return renderNode(child, ctx, i);
+    }
+}
+// Map layout preset → Yoga props applied to the children container.
+// Note: OpenTUI's flexWrap accepts "no-wrap" | "wrap" | "wrap-reverse"
+// (kebab-case), distinct from CSS's "nowrap". Return type let TS infer to
+// stay aligned with whatever OpenTUI's BoxOptions says.
+function layoutProps(layout, _sidebarFraction) {
+    switch (layout) {
+        case "split":
+            return { flexDirection: "row", gap: 1, flexGrow: 1, flexShrink: 1 };
+        case "cards":
+            return { flexDirection: "row", flexWrap: "wrap", gap: 1 };
+        case "sidebar":
+            return { flexDirection: "row", gap: 1, flexGrow: 1, flexShrink: 1 };
+        case "stack":
+        case undefined:
+        default:
+            return { flexDirection: "column", gap: 1 };
+    }
+}
+// ── section ───────────────────────────────────────────────────────────────
+// Every section is a focus pane (Tab-cyclable, scrollable). variant:"card"
+// gets a border + heading title. Plain sections get the heading rendered
+// as an inline bold line above an unbordered scrollbox so overflow is still
+// recoverable.
+//
+// Layout presets on a section apply to its children the same way page-level
+// layouts do.
+function SectionView({ node, ctx }) {
+    // B4 focus-trap gate: when a modal is active and this section is OUTSIDE
+    // the modal subtree, the section is not part of the Tab cycle. It still
+    // renders its content (so the user sees the dimmed background), but
+    // without a focus border and without claiming a paneCounter slot.
+    const isPaneFocusable = !ctx.modalActive || ctx.insideModal;
+    const paneIndex = isPaneFocusable ? ctx.paneCounter.current++ : -1;
+    const focused = isPaneFocusable && paneIndex === ctx.focusedPaneIndex;
+    const border = node.variant === "card";
+    const childCtx = {
+        ...ctx,
+        isTopLevel: false,
+        // Becoming a focused pane: descendant FieldViews use this to decide
+        // whether to grant focused=true to the first input encountered. The
+        // counter is per-pane so nested forms don't double up.
+        inFocusedPane: focused || ctx.inFocusedPane,
+        paneInputCounter: focused ? { current: 0 } : ctx.paneInputCounter,
+    };
+    const layout = layoutProps(node.layout, ctx.sidebarFraction);
+    return (_jsxs("box", { flexDirection: "column", gap: 1, flexGrow: 1, flexShrink: 1, children: [!border && node.heading ? (_jsx("text", { attributes: 1 /* BOLD */, children: node.heading })) : null, _jsx("scrollbox", { focused: focused, focusable: isPaneFocusable, border: border, title: border ? node.heading : undefined, padding: border ? 1 : 0, borderColor: focused ? "#88aaff" : "#555555", focusedBorderColor: "#88aaff", flexGrow: 1, flexShrink: 1, children: _jsx("box", { ...layout, children: node.children.map((child, i) => renderChildWithLayout(child, childCtx, i, node.layout, ctx.sidebarFraction)) }) })] }));
+}
+// ── text ──────────────────────────────────────────────────────────────────
+// Maps the wire `style` field to OpenTUI text attributes + foreground color.
+// pre uses no wrapping; other styles wrap naturally.
+const STYLE_ATTRS = {
+    heading: { attributes: 1 /* BOLD */ },
+    subheading: { attributes: 1 /* BOLD */, fg: "#888888" },
+    body: {},
+    muted: { fg: "#888888" },
+    strikethrough: { attributes: 16 /* STRIKETHROUGH */, fg: "#888888" },
+    error: { fg: "#ff5555" },
+    pre: { fg: "#cccccc" },
+};
+function TextView({ node }) {
+    const style = node.style ?? "body";
+    const attrs = STYLE_ATTRS[style];
+    return (_jsx("text", { ...(attrs.attributes != null ? { attributes: attrs.attributes } : {}), ...(attrs.fg != null ? { fg: attrs.fg } : {}), children: node.value }));
+}
+// ── link ──────────────────────────────────────────────────────────────────
+// External links emit a real OSC 8 hyperlink (\x1b]8;;url\x07label\x1b]8;;\x07);
+// terminals that understand it make it clickable, terminals that don't
+// degrade to the label. Empty href degrades to plain underlined text.
+// Click activation (mouse + Enter) is wired in B5's interaction polish.
+function LinkView({ node, ctx }) {
+    const ESC = String.fromCharCode(27);
+    const BEL = String.fromCharCode(7);
+    const href = node.href.trim();
+    const inner = href.length > 0 && node.external
+        ? `${ESC}]8;;${href}${BEL}${node.label}${ESC}]8;;${BEL}`
+        : node.label;
+    // B5 — mouse click hands the URL to the navigate capability (which opens
+    // it externally on the TUI). External links ALSO render as a real OSC-8
+    // hyperlink so modern terminals make Cmd/Ctrl-click work natively; the
+    // onMouseDown handler is the fallback for terminals without OSC-8 + the
+    // primary path for internal (external:false) links. Empty href → no-op.
+    const onMouseDown = href.length > 0
+        ? () => ctx.navigate(href)
+        : undefined;
+    return (_jsx("text", { attributes: 4 /* UNDERLINE */, fg: "#6688cc", ...(onMouseDown ? { onMouseDown } : {}), children: inner }));
+}
+// ── list / list-item ──────────────────────────────────────────────────────
+// A top-level `list` (direct child of page) is a pane on its own; nested
+// lists scroll as part of their containing section. list-item variants
+// ("done", "active", …) are mapped to text colors.
+const LIST_ITEM_FG = {
+    done: "#88cc88",
+    active: "#88aaff",
+    error: "#ff5555",
+    muted: "#888888",
+};
+function ListView({ node, ctx }) {
+    const isPane = ctx.isTopLevel;
+    if (!isPane) {
+        // Inline list: stays inside whatever pane wraps it; inherits inFocusedPane.
+        const childCtx = { ...ctx, isTopLevel: false };
+        return (_jsx("box", { flexDirection: "column", gap: 0, children: node.children.map((child, i) => renderNode(child, childCtx, i)) }));
+    }
+    // Top-level list → its own focus pane (subject to the B4 modal focus-trap).
+    const isPaneFocusable = !ctx.modalActive || ctx.insideModal;
+    const paneIndex = isPaneFocusable ? ctx.paneCounter.current++ : -1;
+    const focused = isPaneFocusable && paneIndex === ctx.focusedPaneIndex;
+    const childCtx = {
+        ...ctx,
+        isTopLevel: false,
+        inFocusedPane: focused || ctx.inFocusedPane,
+        paneInputCounter: focused ? { current: 0 } : ctx.paneInputCounter,
+    };
+    return (_jsx("scrollbox", { focused: focused, focusable: isPaneFocusable, borderColor: focused ? "#88aaff" : "#555555", focusedBorderColor: "#88aaff", flexGrow: 1, flexShrink: 1, children: _jsx("box", { flexDirection: "column", gap: 0, children: node.children.map((child, i) => renderNode(child, childCtx, i)) }) }));
+}
+function ListItemView({ node, ctx }) {
+    const fg = node.variant ? LIST_ITEM_FG[node.variant] : undefined;
+    const childCtx = { ...ctx, isTopLevel: false };
+    // The variant tint applies to text children inside this item via inherited
+    // color (OpenTUI <text fg> wins per-element, so this only affects items
+    // whose children don't override). For B2 we just thread the children
+    // through unchanged; full per-variant styling lands in B3 (with the focus +
+    // selection model).
+    if (!fg) {
+        return (_jsx("box", { flexDirection: "column", gap: 0, children: node.children.map((child, i) => renderNode(child, childCtx, i)) }));
+    }
+    return (_jsx("box", { flexDirection: "column", gap: 0, children: node.children.map((child, i) => {
+            // If the child is a plain text node, recolor it; otherwise pass through.
+            if (typeof child === "object" && child !== null && child.type === "text") {
+                const t = child;
+                return (_jsx("text", { fg: fg, children: t.value }, i));
             }
-            case "table": {
-                // Phase 5d. Serves BOTH the static (renderTree/non-TTY/unit) and
-                // interactive paths — interactive only adds the focus tint + mounts
-                // the focused filter <TextInput>. DISCIPLINE: a flex-row of
-                // independent fixed-width <Box> cells (the standard Ink table) is
-                // SAFE — distinct from the Phase-5a bug (a styled <Text> nested INSIDE
-                // one <Text>). Every cell is ONE flat <Text>; a link cell is OSC 8 as
-                // the SOLE child of its own width-bounded Box (the Phase-1
-                // string-width over-count, contained to that cell). Focus is a
-                // whole-cell colour (cyan) — NOT focusWrap (its external "▸ " caret
-                // would break fixed-column alignment); same approach as
-                // MultiSelectInput's highlight.
-                const t = node;
-                const cols = t.columns ?? [];
-                const rows = t.rows ?? [];
-                const canSort = !!t.sortAction;
-                const canFilter = !!t.filterAction;
-                const anyFilter = canFilter && cols.some((c) => c.filterable);
-                const MINW = 3, MAXW = 40, MINFILTER = 8, IND = 2;
-                const cellText = (c, r) => {
-                    const v = r.cells?.[c.key] ?? "";
-                    // Measure the LABEL, never the OSC/href (Phase-1 over-count).
-                    return c.linkLabel && v ? c.linkLabel : v;
-                };
-                const widths = new Map();
-                for (const c of cols) {
-                    let w = dispWidth(c.label) +
-                        ((canSort && c.sortable) || t.sortColumn === c.key ? IND : 0);
-                    for (const r of rows)
-                        w = Math.max(w, dispWidth(cellText(c, r)));
-                    if (canFilter && c.filterable)
-                        w = Math.max(w, MINFILTER);
-                    widths.set(c.key, Math.max(MINW, Math.min(MAXW, w)));
-                }
-                const w = (c) => widths.get(c.key) ?? MINW;
-                return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { flexDirection: "row", gap: 1, children: cols.map((c, ci) => {
-                                const sortable = canSort && !!c.sortable;
-                                const ind = t.sortColumn === c.key
-                                    ? t.sortDirection === "desc"
-                                        ? " ▼"
-                                        : " ▲"
-                                    : "";
-                                const hk = sortable ? rctx.focusKey(c) : undefined;
-                                const hfoc = hk != null && hk === rctx.focusedKey;
-                                return (_jsx(Box, { width: w(c), children: _jsx(Text, { bold: true, color: hfoc ? "cyan" : undefined, wrap: "truncate-end", children: c.label + ind }) }, c.key ?? ci));
-                            }) }), anyFilter ? (_jsx(Box, { flexDirection: "row", gap: 1, children: cols.map((c, ci) => {
-                                if (!c.filterable)
-                                    return (_jsx(Box, { width: w(c), children: _jsx(Text, { children: " " }) }, c.key ?? ci));
-                                const fk = rctx.focusKey(filterIdent(c));
-                                const ffoc = fk != null && fk === rctx.focusedKey;
-                                const cur = (fk != null ? rctx.draft(fk) : undefined) ??
-                                    c.filterValue ??
-                                    "";
-                                return (_jsx(Box, { width: w(c), borderStyle: "single", children: rctx.interactive && ffoc && fk != null ? (_jsx(TableFilterInput, { focus: true, value: cur, onChange: (v) => rctx.onFieldChange?.(fk, v), onSubmit: () => rctx.onTableFilter?.(t, c) }, "input")) : (_jsx(Text, { dimColor: cur === "", children: cur === "" ? "filter…" : cur })) }, c.key ?? ci));
-                            }) })) : null, rows.map((r, ri) => {
-                            const tint = this.listItemStyle(r.variant).child;
-                            const rk = r.action ? rctx.focusKey(r) : undefined;
-                            const rfoc = rk != null && rk === rctx.focusedKey;
-                            return (_jsx(Box, { flexDirection: "row", gap: 1, children: cols.map((c, ci) => {
-                                    const v = r.cells?.[c.key] ?? "";
-                                    if (c.linkLabel && v) {
-                                        // Link cell. A standalone `link` node emits OSC 8, but a
-                                        // table cell is WIDTH-BOUNDED for column alignment, and
-                                        // OSC 8 here would be truncate-mangled — string-width
-                                        // over-counts the escape, so `wrap:"truncate-end"` at a
-                                        // fixed column width corrupts it (the Phase-1/5a width
-                                        // landmine is fundamentally incompatible with a fixed
-                                        // column width). So show the linkLabel as underlined
-                                        // text — information-honest and aligned; standalone
-                                        // `link` nodes keep full OSC 8. (TUI-NOTES Phase 5d.)
-                                        return (_jsx(Box, { width: w(c), children: _jsx(Text, { wrap: "truncate-end", underline: true, color: rfoc ? "cyan" : tint?.color, children: c.linkLabel }) }, c.key ?? ci));
-                                    }
-                                    return (_jsx(Box, { width: w(c), children: _jsx(Text, { wrap: "truncate-end", color: rfoc ? "cyan" : tint?.color, bold: tint?.bold, dimColor: tint?.dim, children: v === "" ? " " : v }) }, c.key ?? ci));
-                                }) }, r.id ?? ri));
-                        }), rows.length === 0 ? _jsx(Text, { dimColor: true, children: "(no rows)" }) : null] }, key));
+            return renderNode(child, childCtx, i);
+        }) }));
+}
+// ── table ─────────────────────────────────────────────────────────────────
+// Always a focus pane. Header row + body rows in a scrollbox. Sortable
+// headers render a small caret indicator on the currently-sorted column.
+// Filter inputs are rendered as static text rows for B2 — real input wiring
+// lands in B3. Clickable rows render a subtle "·" prefix; click activation
+// lands in B5.
+function TableView({ node, ctx }) {
+    const isPaneFocusable = !ctx.modalActive || ctx.insideModal;
+    const paneIndex = isPaneFocusable ? ctx.paneCounter.current++ : -1;
+    const focused = isPaneFocusable && paneIndex === ctx.focusedPaneIndex;
+    // B5 — header click toggles sort. Direction policy: clicking the
+    // currently-sorted column flips asc↔desc; clicking any other column
+    // starts at asc. Matches BrowserAdapter table semantics.
+    const onHeaderClick = (columnKey) => {
+        if (!node.sortAction)
+            return;
+        const direction = node.sortColumn === columnKey && node.sortDirection === "asc" ? "desc" : "asc";
+        ctx.onAction({
+            name: node.sortAction.name,
+            context: { ...(node.sortAction.context ?? {}), column: columnKey, direction },
+        });
+    };
+    return (_jsx("scrollbox", { focused: focused, focusable: isPaneFocusable, borderColor: focused ? "#88aaff" : "#555555", focusedBorderColor: "#88aaff", flexGrow: 1, flexShrink: 1, children: _jsxs("box", { flexDirection: "column", children: [_jsx("box", { flexDirection: "row", gap: 2, children: node.columns.map((c) => {
+                        const isSorted = node.sortColumn === c.key;
+                        const caret = isSorted ? (node.sortDirection === "desc" ? " ↓" : " ↑") : "";
+                        // B5 — only sortable headers respond to clicks (matches BrowserAdapter).
+                        const clickable = c.sortable && node.sortAction != null;
+                        const onMouseDown = clickable ? () => onHeaderClick(c.key) : undefined;
+                        return (_jsxs("text", { attributes: 1 /* BOLD */, ...(onMouseDown ? { onMouseDown } : {}), children: [c.label, caret] }, c.key));
+                    }) }), node.columns.some((c) => c.filterable) ? (_jsx("box", { flexDirection: "row", gap: 2, children: node.columns.map((c) => (_jsx("text", { fg: "#888888", children: c.filterable ? (c.filterValue ? `[${c.filterValue}]` : "[filter]") : "" }, c.key))) })) : null, node.rows.map((row, ri) => {
+                    // B5 — row click dispatches row.action when present.
+                    const onRowClick = row.action
+                        ? () => ctx.onAction(row.action)
+                        : undefined;
+                    return (_jsx("box", { flexDirection: "row", gap: 2, ...(onRowClick ? { onMouseDown: onRowClick } : {}), children: node.columns.map((c) => {
+                            const cell = row.cells[c.key] ?? "";
+                            if (c.linkLabel != null && cell.length > 0) {
+                                // Cell is a link — emit OSC-8 for external links, plain
+                                // underlined text otherwise. External links are clickable
+                                // natively via the terminal's OSC-8 support; internal cell
+                                // links route through navigate (B5).
+                                const ESC = String.fromCharCode(27);
+                                const BEL = String.fromCharCode(7);
+                                const inner = c.linkExternal
+                                    ? `${ESC}]8;;${cell}${BEL}${c.linkLabel}${ESC}]8;;${BEL}`
+                                    : c.linkLabel;
+                                const cellClick = !c.linkExternal && cell.length > 0
+                                    ? () => ctx.navigate(cell)
+                                    : undefined;
+                                return (_jsx("text", { attributes: 4 /* UNDERLINE */, fg: "#6688cc", ...(cellClick ? { onMouseDown: cellClick } : {}), children: inner }, c.key));
+                            }
+                            return _jsx("text", { children: cell }, c.key);
+                        }) }, row.id ?? ri));
+                })] }) }));
+}
+// ── minimum-viable text surface for the rest of the node set ───────────────
+// Same as B1 — text only, no interactivity. Full widgets land in B3/B4.
+function ButtonView({ node, ctx }) {
+    const fg = node.variant === "danger" ? "#ff5555"
+        : node.variant === "primary" ? "#88aaff"
+            : undefined;
+    // B5 — mouse click dispatches the button's action. Keyboard activation
+    // (Enter on the focused pane's primary actionable) is wired at the
+    // renderer key handler, not here.
+    const onMouseDown = () => ctx.onAction(node.action);
+    return (_jsxs("text", { ...(fg != null ? { fg } : {}), onMouseDown: onMouseDown, children: ["[ ", node.label, " ]"] }));
+}
+function CheckboxView({ node, ctx }) {
+    const glyph = node.checked ? "[x]" : "[ ]";
+    // B5 — mouse click toggles. When node.action is defined, dispatch it with
+    // the NEW checked value merged into context (matches BrowserAdapter's
+    // checkbox onChange wire: `{checked: !node.checked}`). When no action,
+    // the click has no semantic effect — the visual state is server-owned
+    // and only changes on the next server response that flips node.checked.
+    const onMouseDown = () => {
+        if (!node.action)
+            return;
+        ctx.onAction({
+            name: node.action.name,
+            context: { ...(node.action.context ?? {}), checked: !node.checked },
+        });
+    };
+    return _jsxs("text", { onMouseDown: onMouseDown, children: [glyph, " ", node.label ?? ""] });
+}
+// ── tabs ──────────────────────────────────────────────────────────────────
+// Click a tab → dispatch `node.action` with `{ ...node.action.context,
+// value: tab.value }` merged. Selected tab renders bold; unselected tabs
+// render dim. Keyboard activation (Tab on focused tab-bar → cycle) is B5.
+function TabsView({ node, ctx }) {
+    return (_jsx("box", { flexDirection: "row", gap: 1, children: node.tabs.map((t) => {
+            const selected = t.value === node.selected;
+            const onMouseDown = () => {
+                ctx.onAction({
+                    name: node.action.name,
+                    context: { ...(node.action.context ?? {}), value: t.value },
+                });
+            };
+            return (_jsx("text", { onMouseDown: onMouseDown, attributes: selected ? 1 /* BOLD */ : 0, ...(selected ? {} : { fg: "#888888" }), children: t.label }, t.value));
+        }) }));
+}
+// ── progress ──────────────────────────────────────────────────────────────
+// Visual bar: [████░░░░░░] N% using FULL BLOCK (U+2588) / LIGHT SHADE
+// (U+2591). 20-cell bar width is a fixed convention — wide enough to be
+// readable, narrow enough to fit inside list rows / cards. The trailing
+// "N%" string is what keeps conformance happy (token "%" surfaces).
+const PROGRESS_BAR_WIDTH = 20;
+function ProgressView({ node }) {
+    const pct = Math.max(0, Math.min(100, Math.round(node.value)));
+    const filled = Math.round((pct / 100) * PROGRESS_BAR_WIDTH);
+    const bar = "█".repeat(filled) + "░".repeat(PROGRESS_BAR_WIDTH - filled);
+    return _jsxs("text", { children: [bar, " ", pct, "%"] });
+}
+// ── stat-bar ──────────────────────────────────────────────────────────────
+// Row of label+value pairs separated by │ (U+2502) for visual grouping.
+// Labels render dim; values render normal — same scan pattern used in
+// most status-bar UIs.
+function StatBarView({ node }) {
+    return (_jsx("box", { flexDirection: "row", gap: 1, children: node.stats.map((s, i) => (_jsxs("box", { flexDirection: "row", gap: 1, children: [i > 0 ? _jsx("text", { fg: "#555555", children: "\u2502" }) : null, _jsx("text", { fg: "#888888", children: s.label }), _jsx("text", { children: String(s.value) })] }, i))) }));
+}
+// ── modal ─────────────────────────────────────────────────────────────────
+// Modals are PORTALED to app-root by App (see findModal + ModalOverlay).
+// The inline ModalView (invoked when renderNode hits a "modal" in the tree)
+// returns null so the modal doesn't render twice — once in-tree, once at
+// app-root. App's ModalOverlay handles the actual rendering with absolute
+// positioning + focus-trap context.
+function ModalView(_props) {
+    return null;
+}
+const MODAL_SIZE = {
+    narrow: { width: 36, height: 14 },
+    medium: { width: 60, height: 18 },
+    wide: { width: 88, height: 24 },
+    fullscreen: { width: "90%", height: "90%" },
+};
+function ModalOverlay({ node, ctx }) {
+    const size = MODAL_SIZE[node.size ?? "medium"];
+    const childCtx = {
+        ...ctx,
+        isTopLevel: false,
+        insideModal: true,
+        paneInputCounter: { current: 0 },
+    };
+    return (_jsx("box", { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", justifyContent: "center", alignItems: "center", backgroundColor: "#000000", zIndex: 100, children: _jsxs("box", { flexDirection: "column", border: true, padding: 1, title: node.title, backgroundColor: "#1a1a1a", borderColor: "#88aaff", width: size.width, ...(size.height != null ? { height: size.height } : {}), children: [_jsx("box", { flexDirection: "column", flexGrow: 1, flexShrink: 1, children: node.children.map((child, i) => renderNode(child, childCtx, i)) }), (node.footer && node.footer.length > 0) || node.dismissAction ? (_jsxs("box", { flexDirection: "row", gap: 2, justifyContent: "flex-end", children: [node.footer ? node.footer.map((child, i) => renderNode(child, childCtx, `f${i}`)) : null, node.dismissAction ? (_jsx("text", { onMouseDown: () => ctx.onAction(node.dismissAction), children: "[ Close ]" })) : null] })) : null] }) }));
+}
+// ── copy-button ───────────────────────────────────────────────────────────
+// Click → OSC-52 write to the clipboard + ephemeral "Copied!" label.
+// Adapter holds the `copiedKey` state; the view checks ctx.copiedKey
+// against node.text to decide which label to render. The static
+// conformance walker sees only the label text (which token sequence
+// remains stable: just `node.label ?? "Copy"`).
+function CopyButtonView({ node, ctx }) {
+    const isCopied = ctx.copiedKey === node.text;
+    const label = isCopied
+        ? (node.copiedLabel ?? "Copied!")
+        : (node.label ?? "Copy");
+    return (_jsxs("text", { onMouseDown: () => ctx.copy(node.text), children: ["[ ", label, " ]"] }));
+}
+// ── form ──────────────────────────────────────────────────────────────────
+// Renders children + the submit button (decorative for B3 — Enter on any
+// child input triggers form submit via FieldView's onSubmit handler).
+// On submit: walks this form's children recursively to collect field names,
+// reads each from the adapter's fieldValues map (falling back to wire), and
+// dispatches submitAction with `{ [name]: value, ... }` merged into context.
+function FormView({ node, ctx }) {
+    // Snapshot the form for the closure — same-instance fine since the closure
+    // is recreated on every render (which is every server response).
+    const submitThisForm = () => {
+        const merged = {
+            ...(node.submitAction.context ?? {}),
+        };
+        const collect = (n) => {
+            if (n.type === "field") {
+                const wireValue = n.value ?? "";
+                // The map may not have an entry for fields the user hasn't touched
+                // (or for hidden fields we register on render). Fall back to the
+                // wire value in that case — the resolveFieldValue plumbing keeps the
+                // two in sync for fields that DID render.
+                const v = ctx.resolveFieldValue(n.name, wireValue);
+                // Checkbox-typed fields submit as boolean, not string.
+                merged[n.name] = n.inputType === "checkbox" ? v === "true" : v;
             }
-            default:
-                // field(file) is handled in the field case; any unknown node type
-                // (or a still-deferred one) → fail-loud, never blank.
-                return this.unsupported(node.type, key);
-        }
-    }
-    /** Resolves when the Ink app unmounts; immediate if nothing was rendered. */
-    async waitUntilExit() {
-        if (!this.instance)
+            const children = n.children;
+            if (children)
+                for (const c of children)
+                    collect(c);
+        };
+        for (const child of node.children)
+            collect(child);
+        ctx.onAction({ name: node.submitAction.name, context: merged });
+    };
+    const childCtx = {
+        ...ctx,
+        isTopLevel: false,
+        submitForm: submitThisForm,
+    };
+    // Layout preset on form: "stack" (default — fields stacked) or "inline"
+    // (field row + submit on one line, the add-bar/search-bar pattern).
+    const isInline = node.layout === "inline";
+    return (_jsxs("box", { flexDirection: isInline ? "row" : "column", gap: 1, children: [node.children.map((child, i) => renderNode(child, childCtx, i)), _jsxs("text", { attributes: 1 /* BOLD */, children: ["[ ", node.submitLabel ?? "Submit", " ]"] })] }));
+}
+// ── field ─────────────────────────────────────────────────────────────────
+// Real OpenTUI input/textarea/select wired to the adapter's field state.
+// Layout per inputType:
+//   hidden                    → null (still REGISTERS the wire value so form
+//                                submit picks it up).
+//   text/email/password/      → <text label> + <input value=wire ...>.
+//     number/date/time/        Single-line; onInput tracks edits;
+//     datetime-local           onSubmit→form submit or field action.
+//   textarea / code           → <text label> + <textarea initialValue=wire>.
+//                                Multiline; B3 doesn't ship syntax highlighting
+//                                (code-as-textarea is a deliberate B3 simplification —
+//                                OpenTUI <code> is read-only render, not editor).
+//   select / select-multiple  → <text label> + <select options=[...] >.
+//                                B3 ships single-select; select-multiple semantics
+//                                are deferred (no native OpenTUI multi-select
+//                                widget; would need a custom focusable list — B5).
+//   checkbox                  → <text "[x] label" or "[ ] label"> — decorative
+//                                for B3 (toggle interactivity in B5).
+//   file                      → <text "{label}: [file: …]"> placeholder —
+//                                upload via OpenTUI input is impractical without
+//                                native file-picker UX; targeted at B4 misc.
+//
+// Draft preservation:
+//   resolveFieldValue() is the source of truth. It checks "did the server
+//   change the wire value since last render" — if so, snap the user's edit
+//   back to the new server value. Otherwise, the user's edit survives. This
+//   matches the BrowserAdapter contract in AGENTS.md.
+//
+// Conformance:
+//   The label is always rendered as a sibling <text>, so the static walker
+//   sees it. The wire value is surfaced via <input value=…> / <textarea
+//   initialValue=…> — the conformance walker is extended in this phase to
+//   read those props as user-visible information.
+function FieldView({ node, ctx }) {
+    const wireValue = node.value ?? "";
+    // Resolve through the adapter so draft preservation runs as a side effect
+    // even for hidden fields (the form needs their wire value at submit time).
+    const currentValue = ctx.resolveFieldValue(node.name, wireValue);
+    if (node.inputType === "hidden")
+        return null;
+    const label = node.label ?? node.name;
+    // First focusable input inside the focused pane wins auto-focus. Sub-pane
+    // traversal (Tab between multiple inputs) is B5 — for B3 the user gets
+    // exactly one focused field per pane, which is enough to type into a form.
+    const inputIndex = ctx.paneInputCounter.current++;
+    const focused = ctx.inFocusedPane && inputIndex === 0;
+    // Submit handler — common to text/textarea/select. Wired to the parent
+    // form (if any), else dispatches the field's own action (immediate-dispatch).
+    const handleSubmit = (latestValue) => {
+        if (latestValue !== undefined)
+            ctx.setFieldValue(node.name, latestValue);
+        if (ctx.submitForm) {
+            ctx.submitForm();
             return;
-        try {
-            await this.instance.waitUntilExit();
         }
-        catch {
-            // Ink rejects waitUntilExit on some exit paths; treat as exited.
+        if (node.action) {
+            ctx.onAction({
+                name: node.action.name,
+                context: {
+                    ...(node.action.context ?? {}),
+                    [node.name]: latestValue ?? ctx.resolveFieldValue(node.name, wireValue),
+                },
+            });
         }
+    };
+    // ── textarea / code: multi-line editor ─────────────────────────────────
+    if (node.inputType === "textarea" || node.inputType === "code") {
+        return (_jsxs("box", { flexDirection: "column", gap: 0, children: [_jsx("text", { fg: "#888888", children: label }), _jsx("textarea", { initialValue: currentValue, placeholder: node.placeholder ?? null, focused: focused, onSubmit: () => handleSubmit() }, `${node.name}::wire::${wireValue}`)] }));
     }
-    /** Idempotent terminal restore — unmount restores cursor/raw mode. */
-    dispose() {
-        if (this.disposed)
-            return;
-        this.disposed = true;
-        this.instance?.unmount(); // Ink restores cursor/raw mode on the alt screen
-        if (this.altEntered) {
-            // THEN leave the alternate-screen buffer → the user's prior terminal
-            // (scrollback, cursor) is restored verbatim. Reached on EVERY exit
-            // path: the CLI funnels shutdown / SIGINT / SIGTERM / uncaught /
-            // unhandledRejection / process 'exit' all through dispose(), so a
-            // crash or kill cannot strand the user on the alt screen. Idempotent
-            // (disposed guard + altEntered cleared).
-            this.altEntered = false;
-            try {
-                process.stdout.write("\x1b[?1049l");
-            }
-            catch {
-                /* stdout gone during teardown — nothing more we can do */
-            }
-        }
+    // ── select / select-multiple: dropdown picker ──────────────────────────
+    if (node.inputType === "select" || node.inputType === "select-multiple") {
+        const options = (node.options ?? []).map((o) => ({
+            name: o.label,
+            description: "",
+            value: o.value,
+        }));
+        let selectedIndex = options.findIndex((o) => String(o.value) === currentValue);
+        if (selectedIndex < 0)
+            selectedIndex = 0;
+        return (_jsxs("box", { flexDirection: "column", gap: 0, children: [_jsx("text", { fg: "#888888", children: label }), _jsx("select", { options: options, selectedIndex: selectedIndex, focused: focused, onChange: (_idx, opt) => {
+                        if (opt)
+                            ctx.setFieldValue(node.name, String(opt.value ?? opt.name));
+                    }, onSelect: (_idx, opt) => {
+                        const next = opt ? String(opt.value ?? opt.name) : currentValue;
+                        handleSubmit(next);
+                    } }, `${node.name}::wire::${wireValue}`)] }));
+    }
+    // ── checkbox: decorative glyph for B3 (toggle wiring is B5) ───────────
+    if (node.inputType === "checkbox") {
+        // Wire contract: checkbox-typed field's value is "true" | "false".
+        const checked = currentValue === "true";
+        const glyph = checked ? "[x]" : "[ ]";
+        return (_jsxs("text", { fg: focused ? "#88aaff" : undefined, children: [glyph, " ", label] }));
+    }
+    // ── file: B4 placeholder (no native file picker in terminal) ───────────
+    if (node.inputType === "file") {
+        return (_jsxs("box", { flexDirection: "column", gap: 0, children: [_jsx("text", { fg: "#888888", children: label }), _jsx("text", { fg: "#888888", children: "[file upload \u2014 coming in B4 misc]" })] }));
     }
+    // ── Default: single-line input (text/email/password/number/date/time/datetime-local) ──
+    // OpenTUI's <input> doesn't model these subtypes; they all map to a
+    // single-line text editor. Password masking would require either a custom
+    // renderer or post-processing — deferred to B5 polish (the framework wire
+    // exposes inputType so the server knows it's a password; the visual
+    // affordance can come later). For date/time/datetime-local: the wire is
+    // already a string, and a freeform text field is the lowest-common-denominator
+    // terminal UX (a graphical date picker doesn't fit the medium anyway).
+    return (_jsxs("box", { flexDirection: "column", gap: 0, children: [_jsx("text", { fg: "#888888", children: label }), _jsx("input", { value: currentValue, placeholder: node.placeholder ?? "", focused: focused, onInput: (v) => ctx.setFieldValue(node.name, v), 
+                // OpenTUI types onSubmit as an intersection of (value:string)=>void
+                // and (event:SubmitEvent)=>void, so the param at use-site is the
+                // union — narrow it before dispatch. The wire layer's SubmitEvent
+                // is an empty interface (no payload), so the string form is the only
+                // one carrying the user's edit; ignore the event form.
+                onSubmit: (v) => {
+                    handleSubmit(typeof v === "string" ? v : undefined);
+                } }, `${node.name}::wire::${wireValue}`)] }));
+}
+function UnsupportedView({ type }) {
+    return _jsxs("text", { fg: "#ff5555", children: ["[unknown node type: ", type, "]"] });
+}
+// ─── Conformance support ─────────────────────────────────────────────────────
+// renderTree returns a React element for the static / non-mounting path
+// used by the cross-adapter conformance suite. It does NOT mount a renderer;
+// the test layer (a manual function-component walker; see
+// test/conformance.tui.test.ts) invokes the components directly. Note that
+// the App component is hooks-free — focus state is passed via props with a
+// safe default — so the walker works without a React reconciler.
+export function renderTree(vm) {
+    return _jsx(App, { vm: vm, onAction: () => { } });
 }