tickmarkr 1.80.0 → 1.83.0

package/dist/tui/cockpit/run-cockpit.js

@@ -1,12 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box } from "ink";
-import { cloneElement, } from "react";
+import { Box, useApp, useStdout } from "ink";
+import { cloneElement, useInsertionEffect, useMemo, useRef, } from "react";
 import { GLYPHS, PLAIN_COMPACT_LOCKUP, } from "../../brand.js";
-import { allocateBandColumns, BandLines, BodyText, CockpitGrid, composeBandLine, JournalRowPanel, KEYBAR_KEYS, Keybar, Panel, PANEL_CHROME_ROWS, ProgressMeter, StatTile, StatusStrip, } from "./components.js";
-import { resolveCockpitLayout, } from "./layout.js";
+import { allocateBandColumns, BandLines, BodyText, CockpitGrid, composeBandLine, JournalRowPanel, keyRosterLines, Panel, PANEL_CHROME_ROWS, ProgressMeter, Sparkline, StatTile, StatusStrip, } from "./components.js";
+import { fieldReading } from "./derive.js";
+import { initialRunInteractionState, projectRunKeyEntries, reconcileRunInteraction, RUN_SIDE_RAIL_COLUMN_FLOOR, runPanelFocusOrder, runSideRailVisible, selectableRunViewRowIds, } from "./keys.js";
+import { DECISIONS_TAB_TITLE, RUN_VIEWS, runViewById, setupSectionAt, SETUP_SECTIONS, } from "./views.js";
+import { FRAME_HEADER_GAP, FULL_JOURNAL_ROWS, planFrame, SIDEBAR_COLUMN_FLOOR, } from "./layout.js";
+import { cellWidth, fitCells, wrapCells } from "./width.js";
 export { deriveRunCockpitData } from "./derive.js";
 export { PANEL_CHROME_ROWS } from "./components.js";
-const APPROVED_SIDE_RAIL_COLUMN_FLOOR = 80;
+/** The width focus and key routing resolve at. */
+export function runKeyColumns(columns) {
+    return columns >= SIDEBAR_COLUMN_FLOOR
+        ? Math.max(columns, RUN_SIDE_RAIL_COLUMN_FLOOR)
+        : columns;
+}
 const NARROW_HEADER_ALLOCATION = {
     chromeColumns: 0,
     minimumReadableColumns: 1,
@@ -18,52 +27,15 @@ const NARROW_HEADER_ALLOCATION = {
  * rows it will really occupy instead of a hand-tuned constant.
  */
 export function wrappedRows(text, columns) {
-    if (columns < 1)
-        return 1;
-    let rows = 1;
-    let used = 0;
-    for (const [index, word] of text.split(" ").entries()) {
-        // ponytail: code points, not display columns — every glyph the cockpit
-        // draws is one column wide. Reach for a width table only if it stops being.
-        const length = [...word].length;
-        if (index !== 0) {
-            if (used >= columns) {
-                rows += 1;
-                used = 0;
-            }
-            used += 1;
-        }
-        if (length > columns) {
-            const startsThisLine = 1 + Math.floor((length - (columns - used) - 1) / columns);
-            if (Math.floor((length - 1) / columns) < startsThisLine) {
-                rows += 1;
-                used = 0;
-            }
-            for (let taken = 0; taken < length; taken += 1) {
-                if (used < columns)
-                    used += 1;
-                else {
-                    rows += 1;
-                    used = 1;
-                }
-            }
-            continue;
-        }
-        if (used > 0 && used + length > columns) {
-            rows += 1;
-            used = 0;
-        }
-        used += length;
-    }
-    return rows;
+    return wrapCells(text, columns).length;
 }
 /** The rows a bordered panel occupies when its body wraps into `columns`. */
 export function panelRows(lines, columns) {
-    return lines.reduce((rows, line) => rows + composeBandLine(line, columns).length, PANEL_CHROME_ROWS);
+    return lines.reduce((rows, line) => rows + wrapCells(line, columns, { continuationPrefix: "↳ " }).length, PANEL_CHROME_ROWS);
 }
 function IdentityHeader({ data, columns, secondary = true, }) {
     const lockup = PLAIN_COMPACT_LOCKUP.split("\n");
-    if (columns < APPROVED_SIDE_RAIL_COLUMN_FLOOR) {
+    if (!runSideRailVisible(columns)) {
         const primary = [
             { title: "", lines: [lockup[0] ?? "tickmarkr"] },
             {
@@ -88,107 +60,712 @@ function NarrowHeaderBand({ columns, content, rightStrong = false, }) {
     const widths = allocateBandColumns(columns, content, NARROW_HEADER_ALLOCATION);
     return (_jsxs(CockpitGrid, { columns: columns, columnContents: content, allocation: NARROW_HEADER_ALLOCATION, children: [_jsx(BandLines, { columns: Math.max(1, widths[0]), lines: content[0].lines, emphasis: "strong" }), _jsx(Box, { alignItems: "flex-end", flexDirection: "column", children: _jsx(BandLines, { columns: Math.max(1, widths[1]), lines: content[1].lines, emphasis: rightStrong ? "strong" : "normal" }) })] }));
 }
-function NavigationPanel() {
-    return (_jsxs(Panel, { title: "VIEWS", width: 16, children: [_jsxs(BodyText, { emphasis: "strong", children: [GLYPHS.pointer, " Run"] }), _jsx(BodyText, { children: "  Tasks" }), _jsx(BodyText, { children: "  Gates" }), _jsx(BodyText, { children: "  Journal" }), _jsx(BodyText, { children: "  Fleet" })] }));
+const RUN_SIDE_RAIL_WIDTH = 16;
+/** Border plus horizontal padding charged by Panel around its body. */
+const RUN_PANEL_HORIZONTAL_CHROME = 4;
+/** The header caption: the run's identity line, planned as the header's refinable sub-region. */
+function frameCaption(data) {
+    return `${data.runId} · ${data.branch} · ${data.status} · ${data.elapsed}`;
 }
-function KeysPanel() {
-    return (_jsx(Panel, { title: "KEYS", width: 16, children: KEYBAR_KEYS.run.map((item) => (_jsxs(Box, { children: [_jsx(BodyText, { emphasis: "strong", children: item.key }), _jsxs(BodyText, { children: [" ", item.label] })] }, item.key))) }));
+/** The header's fixed left part: brand, version and the two tab labels. */
+function headerLead(data, plan) {
+    const tabs = plan.tab === "watch"
+        ? `[ WATCH ]${FRAME_HEADER_GAP}${DECISIONS_TAB_TITLE}`
+        : `WATCH${FRAME_HEADER_GAP}[ ${DECISIONS_TAB_TITLE} ]`;
+    return `tickmarkr ${data.binaryVersion}${FRAME_HEADER_GAP}${tabs}`;
 }
-function SizedJournalPanel({ rows, bodyRows, }) {
-    const visible = rows.slice(0, bodyRows);
-    const emptyRows = Math.max(0, bodyRows - visible.length);
-    const journal = JournalRowPanel({ rows: visible });
+/** The one plain header line: brand, version and the two tab labels, the active one marked. */
+function PlannedHeader({ data, plan, columns, }) {
+    return (_jsx(BodyText, { emphasis: "strong", children: fitCells(headerLead(data, plan), Math.max(1, columns)) }));
+}
+/** The header's caption sub-region: the run identity, right-aligned in it. */
+function PlannedCaption({ data, columns, }) {
+    const caption = frameCaption(data);
+    const pad = Math.max(0, columns - cellWidth(caption));
+    return (_jsx(BodyText, { children: fitCells(`${" ".repeat(pad)}${caption}`, Math.max(1, columns)) }));
+}
+function runViewBodyColumns(columns, navigationRail, keysRail) {
+    const railColumns = (navigationRail ? RUN_SIDE_RAIL_WIDTH + 1 : 0)
+        + (keysRail ? RUN_SIDE_RAIL_WIDTH + 1 : 0);
+    return Math.max(1, columns - railColumns - RUN_PANEL_HORIZONTAL_CHROME);
+}
+/**
+ * One row of a side rail. A rail row is exactly one row: where the layout
+ * squeezes the rail narrower than a label, the label is clipped rather than
+ * wrapped onto a second row nothing charges to the height budget — the rail's
+ * height is then a constant, and a rail can never be what overruns the terminal.
+ */
+function RailRow({ label, selected, }) {
+    return (_jsx(Box, { height: 1, overflow: "hidden", children: _jsxs(BodyText, { emphasis: selected ? "strong" : "normal", children: [selected ? GLYPHS.pointer : " ", " ", label] }) }));
+}
+function NavigationPanel({ focused = false, selection = 0, }) {
+    return (_jsx(Panel, { title: "VIEWS", width: RUN_SIDE_RAIL_WIDTH, focused: focused, children: RUN_VIEWS.map((view, index) => (_jsx(RailRow, { label: view.label, selected: index === selection }, view.id))) }));
+}
+/**
+ * The setup tab's rail. It draws in the same column as VIEWS and holds fewer
+ * rows than it, so the rail can never be what decides the frame's height — the
+ * body's budget stays the one budget, and the labels fit their column unwrapped.
+ */
+/** The lines the selected setup section states about itself. */
+function setupSectionLines(section, data) {
+    if (section.readOnly) {
+        return [`${section.title} is read-only on this surface`];
+    }
+    const parked = data.taskRows.filter((row) => row.state === "human");
+    if (parked.length === 0)
+        return ["No parked decisions in this engagement"];
+    return parked.map((row) => `${row.taskId} · parked · attempt ${row.attempts ?? 0}`);
+}
+/**
+ * The setup tab's body, drawn inside the same row budget the watch tab's views
+ * are drawn inside — the tab an operator switches to can never be taller than
+ * the one they switched away from.
+ */
+function SetupTabPanel({ data, selection, focused, keyEntries, help, bodyRows, bodyColumns, }) {
+    const section = setupSectionAt(selection);
+    return (_jsx(SizedLinesPanel, { title: help ? "HELP" : section.title, lines: help ? helpLines(keyEntries) : setupSectionLines(section, data), bodyRows: bodyRows, wrapColumns: bodyColumns, focused: focused, flexGrow: 1 }));
+}
+/**
+ * The one keybar, drawn once. While the help overlay is up it is not drawn at
+ * all: the overlay is this same projected roster, one entry per line, so
+ * drawing both states every key twice — and costs the frame the very rows the
+ * shortest supported terminal has none of.
+ */
+function RunKeybar({ entries, width, help, }) {
+    if (help)
+        return _jsx(_Fragment, {});
+    // The plan grants this band one row: the first lossless roster slice is drawn explicitly.
+    return (_jsx(Box, { height: 1, flexShrink: 0, overflow: "hidden", children: _jsx(BodyText, { emphasis: "dim", children: keyRosterLines(entries, width)[0] ?? "" }) }));
+}
+/**
+ * The selectable rows owned by one view. The overview's journal is a passive
+ * tail, not its item collection; tasks, gates and fleet remain honestly empty
+ * until their dedicated derivations land. Journal rows keep the source-record
+ * identities assigned by the production journal derivation.
+ */
+export function deriveRunViewRows(data, viewId, filterQuery = "") {
+    const query = filterQuery.trim().toLowerCase();
+    const rows = promotedViewRows(data, viewId);
+    return query === ""
+        ? rows
+        : rows.filter((row) => row.text.toLowerCase().includes(query));
+}
+/**
+ * The rows a view owns, in the identities `runViewRowIdentities` assigns them —
+ * the two must agree, or the surface's keys would stand on rows the frame never
+ * drew. The overview owns no list of its own, and the journal is a tail.
+ */
+function promotedViewRows(data, viewId) {
+    if (viewId === "journal")
+        return data.journalRows;
+    if (viewId === "tasks") {
+        return data.taskRows.map((row) => ({
+            id: row.id,
+            time: fieldReading(row.lastEventTime),
+            state: taskRowState(row.state),
+            text: `${row.taskId} · ${fieldReading(row.state)} · attempt ${fieldReading(row.attempts)} · ${fieldReading(row.actor)}${row.title === undefined ? "" : ` · ${row.title}`}`,
+        }));
+    }
+    if (viewId === "gates") {
+        return data.gateRows.map((row) => ({
+            id: row.id,
+            time: row.time,
+            state: row.state,
+            text: `${fieldReading(row.taskId)} · ${fieldReading(row.gate)} · ${row.pass === undefined ? fieldReading(undefined) : row.pass ? "pass" : "fail"}${row.details === undefined ? "" : ` · ${row.details}`}`,
+        }));
+    }
+    if (viewId === "fleet") {
+        return data.fleetRows.map((row) => ({
+            id: row.id,
+            time: fieldReading(row.lastEventTime),
+            state: "neutral",
+            text: `${row.adapter} · ${row.model} · dispatches ${fieldReading(row.dispatches)}`,
+        }));
+    }
+    return [];
+}
+/** A task's recorded state read as the component vocabulary the rows draw in. */
+function taskRowState(state) {
+    if (state === "done")
+        return "pass";
+    if (state === "failed")
+        return "fail";
+    if (state === "running" || state === "human")
+        return "active";
+    return "neutral";
+}
+function windowedRows(rows, bodyRows, selection) {
+    const limit = Math.max(0, Math.floor(bodyRows));
+    const selectedIndex = selection === null
+        ? -1
+        : rows.findIndex((row) => row.id === selection);
+    const offset = selectedIndex < limit
+        ? 0
+        : selectedIndex - limit + 1;
+    return {
+        rows: rows.slice(offset, offset + limit),
+        ...(selectedIndex < 0 ? {} : { selection: selectedIndex - offset }),
+    };
+}
+function SizedJournalPanel({ rows, bodyRows, title, selection, focused, }) {
+    const window = windowedRows(rows, bodyRows, selection);
+    const emptyRows = Math.max(0, bodyRows - window.rows.length);
+    const journal = JournalRowPanel({
+        rows: window.rows,
+        title,
+        selection: window.selection,
+        focused,
+    });
     const journalProps = journal.props;
     return cloneElement(journal, {}, journalProps.children, emptyRows > 0 ? _jsx(Box, { height: emptyRows }, "journal-space") : null);
 }
+/** A body panel (help overlay, opened event) padded to the journal's rows. */
+function SizedLinesPanel({ title, lines, bodyRows, wrapColumns, focused, flexGrow, }) {
+    const drawnLines = wrapColumns === undefined
+        ? lines
+        : lines.flatMap((line) => composeBandLine(line, wrapColumns));
+    const visible = drawnLines.slice(0, bodyRows);
+    const emptyRows = Math.max(0, bodyRows - visible.length);
+    return (_jsxs(Panel, { title: title, focused: focused, flexGrow: flexGrow, children: [visible.map((line, index) => (_jsx(Box, { height: 1, overflow: "hidden", children: _jsx(BodyText, { children: line }) }, `${index}:${line}`))), emptyRows > 0 && _jsx(Box, { height: emptyRows })] }));
+}
+/** The lines the help overlay draws: every advertised key and its promise. */
+function helpLines(entries) {
+    return entries.map(({ key, label }) => `${key} ${label}`);
+}
+/** The lines the opened-event view draws for one journal row. */
+function eventLines(row) {
+    return [`${row.time} · ${row.state}`, row.text];
+}
+/**
+ * A view drawn from the rows its own derivation produces: its detail while the
+ * opened row stands, its genuinely empty state when the derivation yields
+ * nothing, otherwise a window over the rows marked at the selection. The state
+ * arrives already repaired by the frame, which owns both it and the data.
+ */
+function RunViewPanel({ data, viewId, interaction, focused, keyEntries, bodyRows, bodyColumns, }) {
+    const view = runViewById(viewId);
+    const rows = deriveRunViewRows(data, viewId, interaction.filterQuery);
+    if (interaction.help) {
+        return (_jsx(Panel, { title: "HELP", focused: focused, flexGrow: 1, children: helpLines(keyEntries).map((line) => _jsx(BodyText, { children: line }, line)) }));
+    }
+    const opened = interaction.opened === null
+        ? undefined
+        : rows.find((row) => row.id === interaction.opened);
+    if (opened !== undefined) {
+        return (_jsx(SizedLinesPanel, { title: view.detailTitle, lines: eventLines(opened), bodyRows: bodyRows, wrapColumns: bodyColumns, focused: focused, flexGrow: 1 }));
+    }
+    if (rows.length === 0) {
+        return (_jsx(Panel, { title: view.title, focused: focused, flexGrow: 1, children: _jsxs(BodyText, { emphasis: "dim", children: ["No ", view.id, " in this engagement"] }) }));
+    }
+    return (_jsx(SizedJournalPanel, { rows: rows, bodyRows: bodyRows, title: interaction.filterPrompt
+            ? `${view.title} /${interaction.filterQuery}`
+            : view.title, selection: interaction.selection, focused: focused }));
+}
+/**
+ * What the journal's slot of the RUN panel draws under an interaction state:
+ * the help overlay while ? is up, otherwise the passive overview tail. Row
+ * selection, filtering and detail live only on the Journal view above.
+ */
+function JournalBody({ data, interaction, bodyRows, keyEntries, }) {
+    const rows = deriveRunViewRows(data, "journal");
+    if (interaction?.help === true) {
+        return (_jsx(SizedLinesPanel, { title: "HELP", lines: helpLines(keyEntries), bodyRows: bodyRows }));
+    }
+    return (_jsx(SizedJournalPanel, { rows: rows, bodyRows: bodyRows, selection: null }));
+}
 function RunStats({ data, mode, }) {
+    if (mode === "none")
+        return _jsx(_Fragment, {});
     if (mode === "summary") {
         return (_jsx(BodyText, { children: `tasks ${data.tasks.done}/${data.tasks.total} · gates ${data.gates.passed}/${data.gates.total} · pass ${data.passRate.value}%` }));
     }
     return (_jsxs(CockpitGrid, { children: [_jsx(StatTile, { label: "TASKS", value: `${data.tasks.done}/${data.tasks.total}`, samples: data.tasks.samples }), _jsx(StatTile, { label: "GATES", value: `${data.gates.passed}/${data.gates.total}`, samples: data.gates.samples }), _jsx(StatTile, { label: "PASS RATE", value: `${data.passRate.value}%`, samples: data.passRate.samples })] }));
 }
+/** The sparkline's block ramp, one glyph per trailing sample, newest last. */
+const COMPACT_SPARK_BLOCKS = "▁▂▃▄▅▆▇█";
+function compactSparkline(samples, cells) {
+    const buckets = samples.slice(-Math.max(0, cells));
+    const populated = buckets.filter((sample) => typeof sample === "number" && Number.isFinite(sample));
+    const minimum = populated.length > 0 ? Math.min(...populated) : 0;
+    const maximum = populated.length > 0 ? Math.max(...populated) : 0;
+    let glyphs = "";
+    for (const sample of buckets) {
+        if (sample === null) {
+            glyphs += " ";
+            continue;
+        }
+        const level = maximum === minimum
+            ? COMPACT_SPARK_BLOCKS.length - 1
+            : Math.round(((sample - minimum) / (maximum - minimum))
+                * (COMPACT_SPARK_BLOCKS.length - 1));
+        glyphs += COMPACT_SPARK_BLOCKS[level];
+    }
+    return glyphs;
+}
+/**
+ * One vitals element of the sidebar's block, drawn whole: the plan has already
+ * decided which elements draw and in which mode, so nothing here measures or
+ * surrenders. The full form is a count row over a sparkline row (the meter: its
+ * label over its bar); the compact form is one inline row per element.
+ */
+function RailVitals({ data, columns, mode, elements, }) {
+    const figures = {
+        tasks: {
+            value: `${data.tasks.done}/${data.tasks.total}`,
+            samples: data.tasks.samples,
+        },
+        gates: {
+            value: `${data.gates.passed}/${data.gates.total}`,
+            samples: data.gates.samples,
+        },
+    };
+    const figure = (element) => {
+        const reading = figures[element];
+        if (mode === "compact") {
+            const lead = `${element} ${reading.value} `;
+            return (_jsx(Box, { height: 1, flexShrink: 0, overflow: "hidden", children: _jsx(BodyText, { emphasis: "strong", children: fitCells(`${lead}${compactSparkline(reading.samples, columns - cellWidth(lead))}`, columns) }) }, element));
+        }
+        return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsx(Box, { height: 1, flexShrink: 0, overflow: "hidden", children: _jsx(BodyText, { emphasis: "strong", children: fitCells(`${element} ${reading.value}`, columns) }) }), _jsx(Sparkline, { samples: reading.samples })] }, element));
+    };
+    const meter = mode === "compact"
+        ? (_jsxs(Box, { height: 1, flexDirection: "row", flexWrap: "nowrap", flexShrink: 0, overflow: "hidden", children: [_jsx(BodyText, { emphasis: "strong", children: "pass " }), _jsx(ProgressMeter, { value: data.passRate.value, width: Math.max(1, columns - 9) })] }, "meter"))
+        : (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsx(Box, { height: 1, flexShrink: 0, overflow: "hidden", children: _jsx(BodyText, { emphasis: "strong", children: fitCells("pass", columns) }) }), _jsx(Box, { height: 1, flexShrink: 0, overflow: "hidden", children: _jsx(ProgressMeter, { value: data.passRate.value, width: Math.max(1, columns - 6) }) })] }, "meter"));
+    return (_jsx(Box, { flexDirection: "column", width: columns, flexShrink: 0, overflow: "hidden", children: elements.map((element) => (element === "meter" ? meter : figure(element))) }));
+}
+/**
+ * The navigation rail, unboxed, drawn at the composition the plan computed:
+ * the menu at the top, the vitals anchored to the bottom, and the planned gap
+ * of blank rows between them — the gap is planFrame's, never a spacing hack
+ * applied here.
+ */
+function RailBand({ data, focused, selection, columns, rows, sidebar, }) {
+    return (_jsxs(Box, { flexDirection: "column", width: columns, height: rows, overflow: "hidden", children: [sidebar.menuRows > RUN_VIEWS.length && (_jsx(Box, { height: 1, flexShrink: 0, overflow: "hidden", children: _jsx(BodyText, { emphasis: "strong", children: fitCells(focused ? `${GLYPHS.pointer} VIEWS` : "VIEWS", columns) }) })), RUN_VIEWS.map((view, index) => (_jsx(Box, { height: 1, flexShrink: 0, overflow: "hidden", children: _jsx(BodyText, { emphasis: index === selection ? "strong" : "normal", children: fitCells(`${index === selection ? GLYPHS.pointer : " "} ${view.label}`, columns) }) }, view.id))), sidebar.gapRows > 0 && _jsx(Box, { height: sidebar.gapRows, flexShrink: 0 }), _jsx(RailVitals, { data: data, columns: columns, mode: sidebar.vitalsMode, elements: sidebar.vitals })] }));
+}
+/** The setup tab's rail, drawn unboxed in the same planned columns. */
+function SectionsBand({ focused, selection, columns, }) {
+    return (_jsxs(Box, { flexDirection: "column", width: columns, overflow: "hidden", children: [_jsx(Box, { height: 1, overflow: "hidden", children: _jsx(BodyText, { emphasis: "strong", children: fitCells(focused ? `${GLYPHS.pointer} SECTIONS` : "SECTIONS", columns) }) }), SETUP_SECTIONS.map((section, index) => (_jsx(Box, { height: 1, overflow: "hidden", children: _jsx(BodyText, { emphasis: index === selection ? "strong" : "normal", children: fitCells(`${index === selection ? GLYPHS.pointer : " "} ${section.label}`, columns) }) }, section.id)))] }));
+}
+/** A planned rule band: one row of the region edge glyph, exactly `columns` wide. */
+function RuleBand({ columns }) {
+    return (_jsx(Box, { height: 1, overflow: "hidden", children: _jsx(BodyText, { emphasis: "dim", children: "─".repeat(Math.max(0, columns)) }) }));
+}
+/** The strip the plan draws instead of a rail between 40 and 63 columns: the five views on one row. */
+function ViewStrip({ selection, columns, }) {
+    return (_jsx(Box, { width: columns, height: 1, flexDirection: "row", flexWrap: "nowrap", overflow: "hidden", children: RUN_VIEWS.map((view, index) => (_jsx(Box, { flexShrink: 0, children: _jsxs(BodyText, { children: [index === selection ? `${GLYPHS.pointer}${view.label}` : ` ${view.label}`, index === RUN_VIEWS.length - 1 ? "" : " "] }) }, view.id))) }));
+}
+/** The journal tail band: it draws exactly the rows the plan left it, surrendered whole by tier. */
+function TailBand({ data, rows, columns, pendingWrites, }) {
+    const lines = pendingWrites
+        ? ["PENDING WRITES · none"]
+        : deriveRunViewRows(data, "journal")
+            .slice(-rows)
+            .map((row) => `${row.time} ${row.text}`);
+    // A styled blank cell differs with colour on and off; these rows carry no dim style.
+    return (_jsx(Box, { flexDirection: "column", height: rows, overflow: "hidden", children: Array.from({ length: rows }, (_, index) => (_jsx(Box, { height: 1, overflow: "hidden", children: _jsx(BodyText, { children: fitCells(lines[index] ?? "", columns) }) }, index))) }));
+}
 function ApprovedProgress({ data, caption, }) {
     return (_jsxs(Panel, { title: "PROGRESS", children: [_jsx(ProgressMeter, { value: data.progress, width: 28 }), caption && _jsx(BodyText, { emphasis: "dim", children: data.progressCaption })] }));
 }
 function CompactProgress({ data, caption, meterWidth = 28, }) {
     return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", flexWrap: "nowrap", children: [_jsx(BodyText, { emphasis: "strong", children: "PROGRESS " }), _jsx(ProgressMeter, { value: data.progress, width: meterWidth })] }), caption && _jsx(BodyText, { emphasis: "dim", children: data.progressCaption })] }));
 }
-function pairedTextRows(left, right, columns) {
-    const leftWidth = [...left].length;
-    const rightWidth = [...right].length;
-    const required = leftWidth + rightWidth;
-    if (required <= columns)
-        return 1;
-    const leftColumns = Math.max(1, Math.floor((Math.max(1, columns) * leftWidth) / required));
-    const rightColumns = Math.max(1, Math.max(1, columns) - leftColumns);
-    return Math.max(wrappedRows(left, leftColumns), wrappedRows(right, rightColumns));
-}
-function narrowHeaderRows(left, right, columns) {
-    const content = [
-        { title: "", lines: [left] },
-        { title: "", lines: [right] },
+/** The RUN view's interior, allocated out of the planned body span, each element granted whole or not at all. */
+function resolveRunViewContent(bodySpan, bodyColumns, data) {
+    const interior = Math.max(0, bodySpan - PANEL_CHROME_ROWS);
+    let available = interior;
+    const progressBar = available >= 1;
+    if (progressBar)
+        available -= 1;
+    // Every element is granted whole or not at all, and the summary reports the fit decision it computed.
+    let journal = 0;
+    if (available >= PANEL_CHROME_ROWS + 1) {
+        journal = 1;
+        available -= PANEL_CHROME_ROWS + 1;
+    }
+    const summary = available >= 1;
+    if (summary)
+        available -= 1;
+    const tail = journal > 0
+        ? Math.min(available, Math.max(0, FULL_JOURNAL_ROWS - journal))
+        : 0;
+    journal += tail;
+    available -= tail;
+    const captionRows = progressBar
+        ? wrapCells(data.progressCaption, Math.max(1, bodyColumns)).length
+        : 0;
+    const progressCaption = captionRows > 0 && available >= captionRows;
+    if (progressCaption)
+        available -= captionRows;
+    // The tiles are retired into the rail's unboxed vitals; the summary line is the only stats form drawn.
+    if (journal > 0)
+        journal += available;
+    // Restored only once every element is full and the journal can pay the chrome rows.
+    const approvedProgress = progressBar && progressCaption
+        && journal > PANEL_CHROME_ROWS;
+    if (approvedProgress)
+        journal -= PANEL_CHROME_ROWS;
+    return {
+        journal,
+        stats: summary ? "summary" : "none",
+        progressBar,
+        progressCaption,
+        approvedProgress,
+    };
+}
+/** What fills the regions this paint draws, resolved from the plan's own spans. */
+function resolveRegionContent(plan, data, interaction) {
+    const bodyRegion = requiredRegion(plan, "body");
+    const bodySpan = bodyRegion.rows;
+    const sideRails = plan.band === "sidebar";
+    const body = Math.max(1, bodySpan - PANEL_CHROME_ROWS);
+    const bodyColumns = Math.max(1, bodyRegion.columns - RUN_PANEL_HORIZONTAL_CHROME);
+    const common = { body, bodyColumns, sideRails };
+    if (interaction.tab !== "setup" && interaction.activeView === "run") {
+        return {
+            ...common,
+            // The help overlay stands in for the journal tail, drawing into its whole interior.
+            ...(interaction.help
+                ? {
+                    journal: Math.max(1, bodySpan - PANEL_CHROME_ROWS * 2),
+                    stats: "summary",
+                    progressBar: false,
+                    progressCaption: false,
+                    approvedProgress: false,
+                }
+                : resolveRunViewContent(bodySpan, bodyColumns, data)),
+        };
+    }
+    return {
+        ...common,
+        journal: 0,
+        stats: "summary",
+        progressBar: false,
+        progressCaption: false,
+        approvedProgress: false,
+    };
+}
+/** The RUN view drawn at its planned spans: every row budget arrives resolved. */
+function LadderRunPanel({ data, content, compactMeterWidth, interaction, keyEntries, focused = true, }) {
+    if (interaction?.help === true) {
+        return (_jsx(SizedLinesPanel, { title: "HELP", lines: helpLines(keyEntries), bodyRows: content.body, wrapColumns: content.bodyColumns, focused: focused, flexGrow: 1 }));
+    }
+    return (_jsxs(Panel, { title: "RUN", focused: focused, flexGrow: 1, children: [_jsx(RunStats, { data: data, mode: content.stats }), content.progressBar && (content.approvedProgress
+                ? _jsx(ApprovedProgress, { data: data, caption: content.progressCaption })
+                : (_jsx(CompactProgress, { data: data, caption: content.progressCaption, meterWidth: compactMeterWidth }))), content.journal > 0 && (_jsx(JournalBody, { data: data, interaction: interaction, bodyRows: content.journal, keyEntries: keyEntries }))] }));
+}
+function LegacyRunPanel({ data, interaction, keyEntries, focused = true, }) {
+    const rows = deriveRunViewRows(data, "journal");
+    return (_jsxs(Panel, { title: "RUN", focused: focused, flexGrow: 1, children: [_jsx(RunStats, { data: data, mode: "tiles" }), _jsxs(Panel, { title: "PROGRESS", children: [_jsx(ProgressMeter, { value: data.progress, width: 28 }), _jsx(BodyText, { emphasis: "dim", children: data.progressCaption })] }), _jsx(JournalBody, { data: data, interaction: interaction, bodyRows: rows.length, keyEntries: keyEntries })] }));
+}
+/**
+ * One planned band, drawn at exactly the span the plan gives it. Unsized (the
+ * legacy surface) it is whatever it contains.
+ */
+function FrameBand({ rows, row = false, gap, regionRef, children, }) {
+    return (_jsx(Box, { ref: regionRef, flexDirection: row ? "row" : "column", ...(gap === undefined ? {} : { gap }), ...(rows === undefined ? {} : { height: rows, flexShrink: 0 }), overflow: "hidden", children: children }));
+}
+/** A sized sub-floor plan draws the plain fallback, clipped to the measured size. */
+function PlainFallbackPaint({ data, size, }) {
+    const columns = Math.max(1, size.columns);
+    const lines = [
+        `tickmarkr ${data.binaryVersion}`,
+        `${data.runId} ${data.status} ${data.elapsed}`,
+        ...data.statusItems.map((item) => item.text),
     ];
-    const widths = allocateBandColumns(columns, content, NARROW_HEADER_ALLOCATION);
-    return Math.max(...content.map((column, index) => composeBandLine(column.lines[0], Math.max(1, widths[index])).length));
+    return (_jsx(Box, { flexDirection: "column", width: size.columns, height: Math.max(0, size.rows), overflow: "hidden", children: lines.map((line, index) => (_jsx(Box, { height: 1, flexShrink: 0, overflow: "hidden", children: _jsx(BodyText, { children: fitCells(line, columns) }) }, `${index}:${line}`))) }));
 }
-function headerRowsFor(layout, data, columns) {
-    const lockup = PLAIN_COMPACT_LOCKUP.split("\n");
-    const measure = columns < APPROVED_SIDE_RAIL_COLUMN_FLOOR
-        ? narrowHeaderRows
-        : pairedTextRows;
-    const primaryRows = measure(lockup[0] ?? "tickmarkr", `v${data.binaryVersion} · binary ${GLYPHS.pass}`, columns);
-    if (!layout.elements.secondaryHeader)
-        return primaryRows;
-    return primaryRows + measure(lockup[1] ?? "tickmarkr", `${data.runId} · ${data.branch}  ${data.status} · ${data.elapsed}`, columns);
-}
-function compactJournalRows(rows, layout, data, columns) {
-    const statRows = layout.stats.mode === "tiles" ? 5 : 1;
-    const progressRows = layout.elements.progressBar
-        ? 1 + (layout.elements.progressCaption ? 1 : 0)
-        : 0;
-    const fixedRows = headerRowsFor(layout, data, columns)
-        + 2 // permanent status strip and keybar
-        + 3 // outer RUN panel border and title
-        + statRows
-        + progressRows
-        + 3; // journal border and title
-    return Math.max(1, Math.min(layout.journalRows, Math.floor(rows) - fixedRows));
-}
-function LadderRunPanel({ data, layout, columns, rows, compactMeterWidth, }) {
-    const compactBodyRows = compactJournalRows(rows, layout, data, columns);
-    // The approved bordered progress panel has the same meter/caption as the
-    // compact form plus its border, title row and closing border. It is restored
-    // only after the resolved ladder has retained every full-arrangement element
-    // and the journal can pay those three chrome rows without disappearing.
-    const approvedProgressChromeRows = 3;
-    const approvedArrangement = layout.elements.secondaryHeader
-        && layout.elements.progressBar
-        && layout.elements.progressCaption
-        && layout.stats.mode === "tiles"
-        && compactBodyRows > approvedProgressChromeRows;
-    const journalBodyRows = approvedArrangement
-        ? compactBodyRows - approvedProgressChromeRows
-        : compactBodyRows;
-    return (_jsxs(Panel, { title: "RUN", focused: true, flexGrow: 1, children: [_jsx(RunStats, { data: data, mode: layout.stats.mode }), layout.elements.progressBar && (approvedArrangement
-                ? (_jsx(ApprovedProgress, { data: data, caption: layout.elements.progressCaption }))
-                : (_jsx(CompactProgress, { data: data, caption: layout.elements.progressCaption, meterWidth: compactMeterWidth }))), _jsx(SizedJournalPanel, { rows: data.journalRows, bodyRows: journalBodyRows })] }));
-}
-function LegacyRunPanel({ data }) {
-    return (_jsxs(Panel, { title: "RUN", focused: true, flexGrow: 1, children: [_jsx(RunStats, { data: data, mode: "tiles" }), _jsxs(Panel, { title: "PROGRESS", children: [_jsx(ProgressMeter, { value: data.progress, width: 28 }), _jsx(BodyText, { emphasis: "dim", children: data.progressCaption })] }), _jsx(JournalRowPanel, { rows: data.journalRows })] }));
-}
-export function RunCockpitFrame({ data, columns, rows, }) {
-    if (rows === undefined) {
-        return (_jsxs(Box, { flexDirection: "column", width: columns, children: [_jsx(IdentityHeader, { data: data, columns: columns }), _jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(NavigationPanel, {}), _jsx(LegacyRunPanel, { data: data }), _jsx(KeysPanel, {})] }), _jsx(StatusStrip, { items: data.statusItems, width: columns }), _jsx(Keybar, { surface: "run", width: columns })] }));
-    }
-    const layout = resolveCockpitLayout(columns, rows);
-    if (layout.renderer === "plain")
-        return _jsx(_Fragment, {});
-    const showSideRails = columns >= APPROVED_SIDE_RAIL_COLUMN_FLOOR;
-    const contentLayout = showSideRails
-        ? layout
-        : {
-            ...layout,
-            stats: { ...layout.stats, mode: "summary", rows: 1 },
+/** The paint: every span is read off the plan's regions and every row budget off the resolved content. */
+function RunCockpitPaint({ data, columns, plan, content, interaction, keyProjection = projectRunKeyEntries, onRegion, }) {
+    const suppliedInteraction = interaction ?? initialRunInteractionState();
+    const suppliedRows = deriveRunViewRows(data, suppliedInteraction.activeView, suppliedInteraction.filterQuery);
+    const currentInteraction = reconcileRunInteraction(suppliedInteraction, suppliedRows.map((row) => row.id));
+    const focusOrder = runPanelFocusOrder(runKeyColumns(columns));
+    const focus = currentInteraction.panel % focusOrder.length;
+    const focusedPanel = focusOrder[focus] ?? "CONTENT";
+    const contentFocused = focusedPanel === "CONTENT";
+    const activeView = currentInteraction.activeView;
+    const railSelection = currentInteraction.railSelection;
+    const keyEntries = keyProjection({
+        interaction: currentInteraction,
+        columns: runKeyColumns(columns),
+        // What the keybar promises is what a key can actually stand on: the journal
+        // tail owns no selectable row, so it advertises no row key.
+        rowIds: selectableRunViewRowIds(currentInteraction.activeView, suppliedRows.map((row) => row.id)),
+    });
+    // Follow mode reports its on state as a status-strip item carrying the
+    // brand's reserved active-toggle glyph; off it draws nothing, so the pinned
+    // frame is untouched.
+    const interactionStatusItems = [
+        ...(currentInteraction.quit
+            ? [{ state: "active", text: "Quit requested" }]
+            : []),
+        ...(currentInteraction.follow
+            ? [{ state: "active", text: "Follow" }]
+            : []),
+    ];
+    const reportedStatusItems = [...interactionStatusItems, ...data.statusItems];
+    const regionRef = (id) => onRegion?.(id);
+    const railFocused = focusedPanel === "VIEWS";
+    if (plan === undefined || content === undefined) {
+        return (_jsxs(Box, { flexDirection: "column", width: columns, overflow: "hidden", children: [_jsx(IdentityHeader, { data: data, columns: columns }), _jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(NavigationPanel, { focused: railFocused, selection: railSelection }), activeView === "run"
+                            ? (_jsx(LegacyRunPanel, { data: data, interaction: currentInteraction, keyEntries: keyEntries, focused: contentFocused }))
+                            : (_jsx(RunViewPanel, { data: data, viewId: activeView, interaction: currentInteraction, focused: contentFocused, keyEntries: keyEntries, bodyRows: Math.max(1, currentInteraction.help
+                                    ? keyEntries.length
+                                    : suppliedRows.length), bodyColumns: runViewBodyColumns(columns, true, false) }))] }), _jsx(StatusStrip, { items: reportedStatusItems, width: columns }), _jsx(RunKeybar, { entries: keyEntries, width: columns, help: currentInteraction.help })] }));
+    }
+    // Every region the plan places, drawn at the plan's own offset and span.
+    const region = (id) => plan.regions.find((candidate) => candidate.id === id);
+    const header = requiredRegion(plan, "header");
+    const body = requiredRegion(plan, "body");
+    const caption = region("caption");
+    const strip = region("strip");
+    const rail = region("rail");
+    const tail = region("tail");
+    const setup = currentInteraction.tab === "setup";
+    return (_jsxs(Box, { flexDirection: "column", width: plan.size.columns, height: plan.size.rows, overflow: "hidden", children: [_jsxs(FrameBand, { rows: header.rows, row: true, regionRef: regionRef("header"), children: [_jsx(Box, { flexGrow: 1, flexShrink: 1, height: header.rows, overflow: "hidden", children: _jsx(PlannedHeader, { data: data, plan: plan, columns: plan.size.columns - (caption?.columns ?? 0) }) }), caption !== undefined && (_jsx(Box, { ref: regionRef("caption"), width: caption.columns, height: caption.rows, flexShrink: 0, overflow: "hidden", children: _jsx(PlannedCaption, { data: data, columns: caption.columns }) }))] }), _jsx(FrameBand, { rows: requiredRegion(plan, "rule").rows, regionRef: regionRef("rule"), children: _jsx(RuleBand, { columns: plan.size.columns }) }), strip !== undefined && (_jsx(FrameBand, { rows: strip.rows, regionRef: regionRef("strip"), children: _jsx(ViewStrip, { selection: railSelection, columns: strip.columns }) })), _jsxs(FrameBand, { rows: body.rows, row: true, children: [rail !== undefined && (_jsx(Box, { ref: regionRef("rail"), width: rail.columns, height: rail.rows, flexShrink: 0, overflow: "hidden", children: setup
+                            ? (_jsx(SectionsBand, { focused: railFocused, selection: railSelection, columns: rail.columns }))
+                            : (_jsx(RailBand, { data: data, focused: railFocused, selection: railSelection, columns: rail.columns, rows: rail.rows, sidebar: plan.sidebar })) })), _jsx(Box, { ref: regionRef("body"), width: body.columns, height: body.rows, flexShrink: 0, flexDirection: "column", overflow: "hidden", children: setup
+                            ? (_jsx(SetupTabPanel, { data: data, selection: railSelection, focused: contentFocused, keyEntries: keyEntries, help: currentInteraction.help, bodyRows: content.body, bodyColumns: content.bodyColumns }))
+                            : activeView === "run"
+                                ? (_jsx(LadderRunPanel, { data: data, content: content, compactMeterWidth: content.sideRails ? undefined : 24, interaction: currentInteraction, keyEntries: keyEntries, focused: contentFocused }))
+                                : (_jsx(RunViewPanel, { data: data, viewId: activeView, interaction: currentInteraction, focused: contentFocused, keyEntries: keyEntries, bodyRows: content.body, bodyColumns: content.bodyColumns })) })] }), _jsx(FrameBand, { rows: requiredRegion(plan, "rule2").rows, regionRef: regionRef("rule2"), children: _jsx(RuleBand, { columns: plan.size.columns }) }), tail !== undefined && (_jsx(FrameBand, { rows: tail.rows, regionRef: regionRef("tail"), children: _jsx(TailBand, { data: data, rows: tail.rows, columns: tail.columns, pendingWrites: plan.content.tail === "pending-writes" }) })), _jsx(FrameBand, { rows: requiredRegion(plan, "status").rows, regionRef: regionRef("status"), children: _jsx(StatusStrip, { items: reportedStatusItems, width: plan.size.columns }) }), _jsx(FrameBand, { rows: requiredRegion(plan, "keybar").rows, regionRef: regionRef("keybar"), children: _jsx(RunKeybar, { entries: keyEntries, width: plan.size.columns, help: currentInteraction.help }) })] }));
+}
+/** Resolve every draw-time input; the plan is planFrame's own return, consumed unmodified. */
+export function planRunCockpitFrame({ data, columns, rows, interaction, keyProjection = projectRunKeyEntries, }) {
+    const suppliedInteraction = interaction ?? initialRunInteractionState();
+    const suppliedRows = deriveRunViewRows(data, suppliedInteraction.activeView, suppliedInteraction.filterQuery);
+    const rowIds = suppliedRows.map((row) => row.id);
+    const repaired = reconcileRunInteraction(suppliedInteraction, rowIds);
+    const keyEntries = keyProjection({
+        interaction: repaired,
+        columns: runKeyColumns(columns),
+        rowIds: selectableRunViewRowIds(repaired.activeView, rowIds),
+    });
+    const size = { columns, rows: rows ?? 1 };
+    const view = repaired.activeView;
+    const state = {
+        tab: repaired.tab,
+        detail: repaired.opened !== null,
+        captionCells: cellWidth(frameCaption(data)),
+    };
+    const plan = planFrame(size, view, state);
+    const content = rows === undefined || plan.kind !== "frame"
+        ? undefined
+        : resolveRegionContent(plan, data, repaired);
+    return {
+        plan,
+        columns,
+        rows,
+        content,
+        planning: rows === undefined || plan.kind !== "frame"
+            ? undefined
+            : { size, view, state },
+        interaction: repaired,
+        keyEntries,
+    };
+}
+/** The public surface always enters paint through one measured plan. */
+export function RunCockpitFrame({ data, columns, rows, interaction, keyProjection = projectRunKeyEntries, }) {
+    const plannedFrame = useMemo(() => planRunCockpitFrame({
+        data,
+        columns,
+        rows,
+        interaction,
+        keyProjection,
+    }), [data, columns, rows, interaction, keyProjection]);
+    return (_jsx(RunCockpitFrameFromPlan, { data: data, plannedFrame: plannedFrame }));
+}
+function requiredRegion(plan, id) {
+    const region = plan.regions.find((candidate) => candidate.id === id);
+    if (region === undefined)
+        throw new Error(`planned region ${id} is missing`);
+    return region;
+}
+function optionalRegion(plan, id) {
+    return plan.regions.find((candidate) => candidate.id === id);
+}
+function assertPlanSpans(plan) {
+    let nextRow = 0;
+    for (const [id, span] of Object.entries(plan.rowSpans)) {
+        const region = requiredRegion(plan, id);
+        const fullWidth = id !== "body";
+        if (region.row !== nextRow ||
+            region.rows !== span ||
+            (fullWidth && (region.column !== 0 || region.columns !== plan.size.columns))) {
+            throw new Error(`planned row region ${id} has offset/span ${region.row}/${region.rows}, expected ${nextRow}/${span}`);
+        }
+        nextRow += span;
+    }
+    if (nextRow !== plan.size.rows) {
+        throw new Error(`planned row spans total ${nextRow}, expected ${plan.size.rows}`);
+    }
+    let nextColumn = 0;
+    for (const [id, span] of Object.entries(plan.columnSpans)) {
+        const region = requiredRegion(plan, id);
+        if (region.column !== nextColumn || region.columns !== span) {
+            throw new Error(`planned column region ${id} has offset/span ${region.column}/${region.columns}, expected ${nextColumn}/${span}`);
+        }
+        nextColumn += span;
+    }
+    if (nextColumn !== plan.size.columns) {
+        throw new Error(`planned column spans total ${nextColumn}, expected ${plan.size.columns}`);
+    }
+    const body = requiredRegion(plan, "body");
+    const rail = optionalRegion(plan, "rail");
+    if (rail !== undefined && (rail.row !== body.row || rail.rows !== body.rows)) {
+        throw new Error("planned rail region does not share the body row span");
+    }
+    const caption = optionalRegion(plan, "caption");
+    if (caption !== undefined) {
+        const header = requiredRegion(plan, "header");
+        if (caption.row !== header.row ||
+            caption.rows !== header.rows ||
+            caption.column + caption.columns !== header.column + header.columns) {
+            throw new Error("planned caption region does not refine the header span");
+        }
+    }
+}
+const ANSI = /\x1b\[[0-9;?]*[ -/]*[@-~]/gu;
+/** The rows the renderer drew, Ink's transport framing removed: the shipped path appends a newline of its own. */
+function drawnRows(drawnFrame, plannedRows) {
+    const rows = drawnFrame.replace(ANSI, "").split("\n");
+    return rows.length === plannedRows + 1 && rows.at(-1) === ""
+        ? rows.slice(0, -1)
+        : rows;
+}
+/**
+ * Assert the plan's tiled extents, the bytes production paints, and — given
+ * the offsets read off the painted nodes — that every planned region was
+ * drawn where the plan puts it.
+ */
+export function assertFrameConformance(plan, drawnFrame, drawnRegions) {
+    assertPlanSpans(plan);
+    const lines = drawnRows(drawnFrame, plan.size.rows);
+    if (lines.length !== plan.size.rows) {
+        throw new Error(`drawn frame has ${lines.length} rows, planned ${plan.size.rows} for ${plan.tab}/${plan.view} at ${plan.size.columns} columns`);
+    }
+    for (const [index, line] of lines.entries()) {
+        if (cellWidth(line) > plan.size.columns) {
+            throw new Error(`drawn frame row ${index} has ${cellWidth(line)} cells, exceeding planned span ${plan.size.columns} for ${plan.tab}/${plan.view}: ${JSON.stringify(line)}`);
+        }
+    }
+    if (drawnRegions === undefined)
+        return;
+    // Every planned region is located in the drawn frame, so a redistribution
+    // that keeps the plan tiled at unchanged height still fails here.
+    for (const region of plan.regions) {
+        const drawn = drawnRegions.find((candidate) => candidate.id === region.id);
+        if (drawn === undefined) {
+            throw new Error(`drawn frame has no region ${region.id}; planned row ${region.row} span ${region.rows} column ${region.column} span ${region.columns} for ${plan.tab}/${plan.view}`);
+        }
+        if (drawn.row !== region.row ||
+            drawn.rows !== region.rows ||
+            drawn.column !== region.column ||
+            drawn.columns !== region.columns) {
+            throw new Error(`drawn region ${region.id} is at row ${drawn.row} span ${drawn.rows} column ${drawn.column} span ${drawn.columns}, planned row ${region.row} span ${region.rows} column ${region.column} span ${region.columns} for ${plan.tab}/${plan.view} at ${plan.size.columns} columns`);
+        }
+    }
+}
+/** The offsets and spans the renderer actually drew, read off the painted nodes' computed layout. */
+function measuredDrawnRegions(nodes) {
+    return [...nodes.entries()].map(([id, node]) => {
+        let row = 0;
+        let column = 0;
+        for (let current = node; current?.parentNode !== undefined; current = current.parentNode) {
+            row += current.yogaNode?.getComputedTop() ?? 0;
+            column += current.yogaNode?.getComputedLeft() ?? 0;
+        }
+        return {
+            id,
+            row: Math.round(row),
+            rows: Math.round(node.yogaNode?.getComputedHeight() ?? 0),
+            column: Math.round(column),
+            columns: Math.round(node.yogaNode?.getComputedWidth() ?? 0),
+        };
+    });
+}
+/** The plan's regions measured off the painted nodes; a planned region with no painted node is a refusal. */
+function drawnPlannedRegions(plan, nodes) {
+    const missing = plan.regions
+        .filter((region) => !nodes.has(region.id))
+        .map((region) => region.id);
+    if (missing.length > 0) {
+        throw new Error(`drawn frame registered no node for planned region(s) ${String(missing)} for ${plan.tab}/${plan.view} at ${plan.size.columns} columns`);
+    }
+    return measuredDrawnRegions(nodes);
+}
+/** planFrame's own regions for the inputs the plan was planned from, so a moved span is a refusal. */
+function authoritativeRegions(planning) {
+    const authoritative = planFrame(planning.size, planning.view, planning.state);
+    return authoritative.kind === "frame" ? authoritative.regions : undefined;
+}
+/** Production paint consumes only resolved plan inputs and fails closed with
+ * the same conformance assertion the acceptance suite runs. */
+export function RunCockpitFrameFromPlan({ data, plannedFrame, }) {
+    if (plannedFrame.plan.kind === "frame") {
+        assertPlanSpans(plannedFrame.plan);
+    }
+    const { stdout } = useStdout();
+    const { exit } = useApp();
+    const regionNodes = useRef(new Map());
+    const regionRefCallbacks = useRef(new Map());
+    useInsertionEffect(() => {
+        const plan = plannedFrame.plan;
+        if (plan.kind !== "frame" || plannedFrame.content === undefined)
+            return;
+        const originalWrite = stdout.write;
+        const writeFrame = ((chunk, ...args) => {
+            const bytes = typeof chunk === "string"
+                ? chunk
+                : Buffer.from(chunk).toString("utf8");
+            if (bytes.replace(ANSI, "").trim().length === 0) {
+                return Reflect.apply(originalWrite, stdout, [chunk, ...args]);
+            }
+            // Byte spans refuse before the frame leaves; the region check measures the nodes its commit painted.
+            try {
+                assertFrameConformance(plan, bytes);
+            }
+            catch (error) {
+                queueMicrotask(() => exit(error));
+                return true;
+            }
+            const planning = plannedFrame.planning;
+            queueMicrotask(() => {
+                try {
+                    if (planning !== undefined) {
+                        const planned = authoritativeRegions(planning);
+                        if (planned !== undefined) {
+                            assertFrameConformance(plan, bytes, planned);
+                        }
+                    }
+                    assertFrameConformance(plan, bytes, drawnPlannedRegions(plan, regionNodes.current));
+                }
+                catch (error) {
+                    exit(error);
+                }
+            });
+            return Reflect.apply(originalWrite, stdout, [chunk, ...args]);
+        });
+        stdout.write = writeFrame;
+        return () => {
+            if (stdout.write === writeFrame)
+                stdout.write = originalWrite;
         };
-    return (_jsxs(Box, { flexDirection: "column", width: columns, children: [_jsx(IdentityHeader, { data: data, columns: columns, secondary: layout.elements.secondaryHeader }), _jsxs(Box, { flexDirection: "row", gap: showSideRails ? 1 : 0, children: [showSideRails && _jsx(NavigationPanel, {}), _jsx(LadderRunPanel, { data: data, layout: contentLayout, columns: columns, rows: rows, compactMeterWidth: showSideRails ? undefined : 24 }), showSideRails && _jsx(KeysPanel, {})] }), _jsx(StatusStrip, { items: data.statusItems, width: columns }), _jsx(Keybar, { surface: "run", width: columns })] }));
+    }, [plannedFrame, stdout, exit]);
+    if (plannedFrame.plan.kind === "plain" && plannedFrame.rows !== undefined) {
+        return _jsx(PlainFallbackPaint, { data: data, size: plannedFrame.plan.size });
+    }
+    return (_jsx(RunCockpitPaint, { data: data, columns: plannedFrame.columns, plan: plannedFrame.plan.kind === "frame" ? plannedFrame.plan : undefined, content: plannedFrame.content, interaction: plannedFrame.interaction, keyProjection: () => plannedFrame.keyEntries, onRegion: (id) => {
+            let callback = regionRefCallbacks.current.get(id);
+            if (callback === undefined) {
+                callback = (node) => {
+                    if (node === null)
+                        regionNodes.current.delete(id);
+                    else
+                        regionNodes.current.set(id, node);
+                };
+                regionRefCallbacks.current.set(id, callback);
+            }
+            return callback;
+        } }));
 }