flint-agent 1.14.0

package/src/components/CarefulMenu.js

@@ -0,0 +1,145 @@
+// The first-run question, as a choice rather than a wall of text.
+//
+// The first version of this prompt was one line of three bracketed options
+// and an instruction to pick a letter:
+//
+//   How careful should Flint be?
+//   [s]afe  (asks before every change to files and every command)   [n]ormal ...
+//     — pick s, n or p
+//
+// On 2026-09-30 11:05 the owner read that as a wall of text and did not know
+// what was being asked. What was missing was not more words — it was the shape
+// of a decision: a heading that says what is being decided and that this is
+// asked once, then the options where the eye goes, one per line, with the
+// current answer visibly current.
+//
+// The options come from levelOptions(), the same list the old prompt and
+// parseLevelAnswer() already used, so the menu cannot offer a level that the
+// parser would not record. That was the class of bug the first version hit: the
+// prompt promised `n` was accepted and nothing accepted it.
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import { levelOptions, parseLevelAnswer, DEFAULT_ONBOARDING_LEVEL } from "../security/policies.js";
+
+const { createElement: h } = React;
+
+const DEFAULT_INDEX = Math.max(
+  0,
+  levelOptions().findIndex((o) => o.level === DEFAULT_ONBOARDING_LEVEL),
+);
+
+/**
+ * One keystroke, as a decision.
+ *
+ * Returned rather than handled inline so the mapping from key to answer is a
+ * value with no React in it — the arrows and the letters are two answers to
+ * the same question, and a function that returns "move down" or "safe" makes
+ * "Enter" the only place that has to know what either means.
+ *
+ * @returns {"up"|"down"|"select"|"cancel"|null}
+ */
+export function keyAction(ch, key, index, count) {
+  if (key.upArrow) return "up";
+  if (key.downArrow) return "down";
+  if (key.escape) return "cancel";
+  if (key.return) return "select";
+  if (key.tab) return "down";
+  if (!ch) return null;
+  const level = parseLevelAnswer(ch);
+  if (!level) return null;
+  // A letter jumps to and picks its option in one keystroke, which is what
+  // typing `n` did before. Kept because the prompt still advertises it.
+  return level;
+}
+
+/**
+ * @param {object} props
+ * @param {(level: string) => void} props.onSelect — the chosen level, already
+ *   validated against LEVELS by parseLevelAnswer.
+ * @param {() => void} [props.onCancel] — Esc. No level is chosen, so the
+ *   question comes back next start and the documented default applies: a
+ *   cancelled question is not an answer.
+ * @param {number} [props.initialIndex]
+ */
+export function CarefulMenu({ onSelect, onCancel, initialIndex = DEFAULT_INDEX }) {
+  const [index, setIndex] = React.useState(initialIndex);
+  const [done, setDone] = React.useState(false);
+  const options = levelOptions();
+
+  const choose = (i) => {
+    if (done) return;
+    // Latched before the callback: a key held down, or a key and an Enter in
+    // the same tick, must not record two postures.
+    setDone(true);
+    onSelect(options[i].level);
+  };
+
+  useInput((ch, key) => {
+    if (done) return;
+    const action = keyAction(ch, key, index, options.length);
+    if (action === "up") {
+      setIndex((i) => Math.max(0, i - 1));
+      return;
+    }
+    if (action === "down") {
+      setIndex((i) => Math.min(options.length - 1, i + 1));
+      return;
+    }
+    if (action === "cancel") {
+      setDone(true);
+      onCancel?.();
+      return;
+    }
+    if (action === "select") {
+      choose(index);
+      return;
+    }
+    // A level name or its letter came through.
+    const idx = options.findIndex((o) => o.level === action);
+    // findIndex returns -1 when the action is not one of the levels. It used
+    // to fall through to choose(-1) and crash the menu with "Cannot read
+    // properties of undefined (reading 'level')" — the one keystroke this
+    // component exists for, answered by pressing the wrong key, is exactly the
+    // keystroke that must never throw. A junk key is not an answer and is not
+    // a move either, so it is ignored, not rounded to an option.
+    if (idx === -1) return;
+    choose(idx);
+  });
+
+  return h(
+    Box,
+    { flexDirection: "column" },
+    h(Text, { bold: true, color: "cyan" }, "  How careful should Flint be?"),
+    h(
+      Text,
+      { dimColor: true },
+      "  This sets when Flint asks before it changes something. It is asked once,",
+    ),
+    h(Text, { dimColor: true }, "  and you can change it later with /careful."),
+    h(Text, { dimColor: true }, ""),
+    ...options.map((option, i) => {
+      const selected = i === index;
+      const isDefault = option.level === DEFAULT_ONBOARDING_LEVEL;
+      // The default is marked as text, not only as colour: colour is the part
+      // an operator with a monochrome terminal or a screen reader never sees.
+      const label = `${selected ? "❯" : " "} ${option.level}`;
+      const tag = isDefault ? "  (default)" : "";
+      const line = `${label}${tag}`;
+      return h(
+        Text,
+        {
+          key: option.level,
+          bold: selected,
+          color: selected ? "green" : isDefault ? "cyan" : "white",
+        },
+        `  ${line}  ${option.description}`,
+      );
+    }),
+    h(Text, { dimColor: true }, ""),
+    h(
+      Text,
+      { dimColor: true },
+      `  Up/Down to choose, Enter to confirm, or type ${options.map((o) => o.key).join(", ")} — Esc to skip.`,
+    ),
+  );
+}

package/src/components/HistoryWriter.js

@@ -0,0 +1,86 @@
+// HistoryWriter: prints finished lines into the terminal's own scrollback.
+//
+// docs/console-spec.md. History used to go through Ink <Static> fed with the
+// store's `lines` array, which is capped at maxDisplayLines (1000). <Static>
+// prints items past the count it has already printed, so once the array hit
+// the cap its length stopped growing and nothing new was printed at all; and
+// every remount (tab switch, back from PgUp) printed all 1000 lines again.
+//
+// Here each line is written once, by id, through Ink's stdout writer, which
+// clears the live zone, writes above it and redraws it. Ids only grow, so the
+// cap on `lines` no longer matters to what is shown, and nothing is ever
+// reprinted. Scrolling and selection belong to the terminal.
+
+import React from "react";
+import { useStdout, renderToString } from "ink";
+import { Table } from "./Table.js";
+
+const { createElement: h, useEffect, useRef } = React;
+
+/** One history item as the text the terminal should show. */
+export function historyItemText(item, columns = process.stdout.columns || 80) {
+  if (item?.type === "table") {
+    return renderToString(
+      h(Table, { columns: item.columns, rows: item.rows, title: item.title, footer: item.footer }),
+      { columns },
+    );
+  }
+  return String(item?.text ?? "");
+}
+
+/**
+ * Items not yet written, given the last written id. A /clear resets ids to 1,
+ * which the caller signals by passing lastId 0.
+ */
+export function unwrittenItems(lines, lastId) {
+  return (lines || []).filter((l) => l && l.id > lastId);
+}
+
+export function HistoryWriter({ store }) {
+  const { write } = useStdout();
+  const lastId = useRef(0);
+  const lastClear = useRef(store.getState().clearCounter || 0);
+  const scheduled = useRef(false);
+
+  useEffect(() => {
+    let alive = true;
+    // New lines are collected the moment they are added, not at write time:
+    // `lines` keeps only the last maxDisplayLines, so a burst bigger than that
+    // within one tick evicted its first lines before they were ever written
+    // (acceptance check 1, 2026-10-02: lines 0 to 999 of 2,000 never shown).
+    const buffer = [];
+    const collect = () => {
+      const s = store.getState();
+      const clear = s.clearCounter || 0;
+      if (clear !== lastClear.current) {
+        lastClear.current = clear;
+        lastId.current = 0;
+        buffer.length = 0;
+      }
+      const fresh = unwrittenItems(s.lines, lastId.current);
+      if (!fresh.length) return false;
+      lastId.current = fresh[fresh.length - 1].id;
+      buffer.push(...fresh);
+      return true;
+    };
+    const flush = () => {
+      scheduled.current = false;
+      if (!alive || !buffer.length) return;
+      const items = buffer.splice(0, buffer.length);
+      write(items.map((item) => historyItemText(item)).join("\n") + "\n");
+    };
+    // One write per tick, not one per addLine: a streamed answer adds many
+    // lines in a burst, and each write clears and redraws the live zone.
+    const schedule = () => {
+      if (!collect() || scheduled.current) return;
+      scheduled.current = true;
+      queueMicrotask(flush);
+    };
+    collect();
+    flush();
+    const unsubscribe = store.subscribe(schedule);
+    return () => { alive = false; unsubscribe(); };
+  }, [store, write]);
+
+  return null;
+}

package/src/components/LineInput.js

@@ -0,0 +1,69 @@
+// LineInput: the console's input line with a real cursor (owner, 2026-10-01).
+//
+// Replaces ink-text-input, whose cursor was either drawn as an inverse block
+// that showed up in odd places, or, with showCursor off, did not move at all.
+// This one draws no caret of its own: the App puts the terminal's thin bar
+// cursor where `cursor` is (ui/line-edit.js cursorCell). Paste/image tokens
+// move and delete as one character.
+//
+// Keys: Left/Right, Ctrl+Left/Right (also Alt+B/F) by word, Home/End and
+// Ctrl+A/E, Backspace, Delete, Ctrl+W (word back), Ctrl+U (clear), Enter.
+// Up/Down, Esc, Tab and the App's own Ctrl shortcuts are left to the App.
+
+import React from "react";
+import { Text, useInput } from "ink";
+import {
+  moveLeft, moveRight, wordLeft, wordRight, insertAt, backspace,
+  deleteForward, deleteWordBack, wrapRows,
+} from "../ui/line-edit.js";
+
+const { createElement: h } = React;
+
+const same = (a, b) => a.value === b.value && a.cursor === b.cursor;
+
+export function LineInput({ value, cursor, onChange, onSubmit, onInsert, mask, focus = true, width = 80, rowStart = 0, maxRows = Infinity }) {
+  // Keys can arrive faster than renders (a paste in chunks, dictation). The
+  // line is kept here and updated on every key, so a second key never sees the
+  // state from before the first. `pending` holds what was sent up and not yet
+  // seen back as props: props that match one of those are this component's
+  // own echo; anything else is the App replacing the line (history recall,
+  // clearing on submit), which wins.
+  const stateRef = React.useRef({ value, cursor });
+  const pendingRef = React.useRef([]);
+  const fromProps = { value, cursor };
+  const echo = pendingRef.current.findIndex((p) => same(p, fromProps));
+  if (echo >= 0) pendingRef.current = pendingRef.current.slice(echo + 1);
+  else if (!same(stateRef.current, fromProps)) { stateRef.current = fromProps; pendingRef.current = []; }
+
+  useInput((input, key) => {
+    const state = stateRef.current;
+    ({ value, cursor } = state);
+    if (key.return) { onSubmit?.(value); return; }
+    if (key.upArrow || key.downArrow || key.escape || key.tab || key.pageUp || key.pageDown) return;
+
+    let next = null;
+    if (key.leftArrow) next = key.ctrl || key.meta ? wordLeft(state) : moveLeft(state);
+    else if (key.rightArrow) next = key.ctrl || key.meta ? wordRight(state) : moveRight(state);
+    else if (key.home || (key.ctrl && input === "a")) next = { value, cursor: 0 };
+    else if (key.end || (key.ctrl && input === "e")) next = { value, cursor: value.length };
+    else if (key.meta && input === "b") next = wordLeft(state);
+    else if (key.meta && input === "f") next = wordRight(state);
+    else if (key.backspace) next = backspace(state);
+    else if (key.delete) next = deleteForward(state);
+    else if (key.ctrl && input === "w") next = deleteWordBack(state);
+    else if (key.ctrl && input === "u") next = { value: "", cursor: 0 };
+    else if (key.ctrl || key.meta) return; // the App's shortcuts (Ctrl+C, Ctrl+V, ...)
+    else if (input) next = onInsert ? onInsert(input, state) : insertAt(state, input);
+
+    if (next && !same(next, state)) {
+      stateRef.current = next;
+      pendingRef.current.push(next);
+      onChange?.(next);
+    }
+  }, { isActive: focus });
+
+  const drawn = mask ? mask.repeat(value.length) : value;
+  // A long line shows only the rows around the cursor (the App picks
+  // rowStart), so the input cannot push the live output to the window height.
+  return h(Text, null, wrapRows(drawn, width).slice(rowStart, rowStart + maxRows).join("\n"));
+}

package/src/components/LiveZone.js

@@ -0,0 +1,294 @@
+// The live zone: the only part of the console that is redrawn.
+//
+// docs/console-spec.md. Ink clears the whole terminal and reprints history on
+// every render once its live output is as tall as the window
+// (node_modules/ink/build/ink.js:322). Everything here is one row per item and
+// bounded, so the zone stays a few rows high at any terminal size.
+//
+//   activity  what Flint is doing, or the line of the answer being written
+//   confirm   a pending approval or pairing (only when there is one)
+//   dock      running background processes, at most DOCK_ROWS
+//   --------
+//   input     (App)
+//   status    one row
+
+import React from "react";
+import { Box, Text } from "ink";
+import { formatStatusLevel } from "../ui/status-level.js";
+import { toolCategory, ledgerWidth, fitMiddle } from "../ui/tool-ledger.js";
+import wrapAnsi from "wrap-ansi";
+
+const { createElement: h } = React;
+
+export const DOCK_ROWS = 3;
+
+/**
+ * Seconds as m:ss. A bare 468 is not obviously nine minutes, and 468 was what
+ * the status line showed for a hung call on 2026-09-29.
+ */
+export function formatElapsed(ms) {
+  const total = Math.max(0, Math.floor(ms / 1000));
+  const m = Math.floor(total / 60);
+  const s = total % 60;
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+
+
+// The footer's activity block (owner, 2026-10-01): fixed width, so the footer
+// never shifts, and nothing in it but a spinner, a verb, the clock and the
+// token count. What is being run goes in the window above (liveToolText).
+//
+//   · ready                          idle
+//   ⠚ thinking  00:03                waiting for the model
+//   ⠓ writing   00:07   ↓ 312 tok    the model is answering
+//   ⠋ running   01:23                a tool is running
+// A 2x2 square of dots in one character, a gap running round it clockwise
+// (the owner's pick, 2026-10-01). Idle: a dot and "ready". The full square
+// and "waiting" it had first read as a spinner stuck on a busy agent, twice
+// (owner, 2026-10-02): idle must not look like any frame of the spinner.
+const SQUARE_FRAMES = ["⠚", "⠓", "⠋", "⠙"];
+export const SPINNER_FRAME_MS = 150;
+export const IDLE_MARK = "·";
+// Kept for the App's redraw interval.
+export const DOTS_FRAME_MS = SPINNER_FRAME_MS;
+
+/** The rotating square of dots at a moment in time. */
+export function spinnerFrame(now = Date.now()) {
+  return SQUARE_FRAMES[Math.floor(now / SPINNER_FRAME_MS) % SQUARE_FRAMES.length];
+}
+
+// eslint-disable-next-line no-control-regex
+const ANSI = /\x1b\[[0-9;]*m/g;
+
+const VERB_WIDTH = 9;
+const TOKENS_WIDTH = 10;
+export const ACTIVITY_BLOCK_WIDTH = 2 + VERB_WIDTH + 1 + 5 + 1 + TOKENS_WIDTH;
+
+/** One word for what Flint is doing. */
+export function activityVerb(state) {
+  if (!state.agentStatus || state.agentStatus === "idle") return "ready";
+  switch (state.activity?.kind) {
+    case "start": return "starting";
+    case "call": return "thinking";
+    case "answering": return "writing";
+    case "tool": return "running";
+    case "stall": return "stalled";
+    case "wait": return "retrying";
+    default: return state.agentStatus === "calling-tool" ? "running" : "thinking";
+  }
+}
+
+function clock(ms) {
+  const total = Math.max(0, Math.floor(ms / 1000));
+  return `${String(Math.floor(total / 60)).padStart(2, "0")}:${String(total % 60).padStart(2, "0")}`;
+}
+
+/** The fixed-width block that leads the footer, idle or busy. */
+export function activityText(state, now = Date.now()) {
+  const busy = state.agentStatus && state.agentStatus !== "idle";
+  const mark = busy ? spinnerFrame(now) : IDLE_MARK;
+  const verb = activityVerb(state).padEnd(VERB_WIDTH);
+  if (!busy) return `${mark} ${verb}`.padEnd(ACTIVITY_BLOCK_WIDTH);
+  const since = state.activity ? state.activityStartedAt : state.startedAt;
+  const time = since ? clock(now - since) : "     ";
+  const tokens = state.activityTokens || 0;
+  const tok = tokens > 0 ? `↓ ${tokens >= 1000 ? `${(tokens / 1000).toFixed(1)}k` : tokens} tok` : "";
+  return `${mark} ${verb} ${time} ${tok.padStart(TOKENS_WIDTH)}`.padEnd(ACTIVITY_BLOCK_WIDTH);
+}
+
+/**
+ * The running tool, in the window above the input, in the ledger's style:
+ * category, verb, argument, and the latest output line. "" when no tool runs.
+ * When the tool finishes, its ledger line replaces this in the history.
+ */
+export function liveToolText(state, columns = process.stdout.columns || 80) {
+  const a = state.activity;
+  if (!a || a.kind !== "tool" || !state.agentStatus || state.agentStatus === "idle") return "";
+  const [cat, verb] = toolCategory(a.tool || state.currentTool || "");
+  const width = ledgerWidth(columns);
+  const head = `      ${cat.padEnd(6)}${verb.padEnd(8)}`;
+  const detail = state.activityDetail ? String(state.activityDetail).replace(ANSI, "") : "";
+  // The command wins the room; the output line takes what is left and the
+  // row's own truncation cuts it at the edge.
+  const argRoom = Math.max(10, width - head.length - 12);
+  const arg = fitMiddle(a.arg || "", Math.min(argRoom, [...(a.arg || "")].length || 1)).trimEnd();
+  return detail ? `${head}${arg}  | ${detail}` : `${head}${arg}`;
+}
+
+/** The confirm row, or "" when nothing waits for the operator. */
+// An approval shows the whole command, never a cut one: a dangerous part may
+// sit exactly where it would be cut (owner, 2026-10-01). Up to this many
+// wrapped rows go in the live zone; a longer command is printed in full into
+// the history when the question is asked (bootstrap.js) and pointed to here.
+export const APPROVAL_MAX_ROWS = 6;
+
+/**
+ * Whether an approval's wrapped command is shown in the live zone (true) or
+ * printed in full into the history with a pointer here (false). One rule for
+ * both places, so a command is never neither. While a question waits the input
+ * is one row, so this always fits the live zone's budget.
+ */
+export function approvalFitsLive(lineCount, rows = process.stdout.rows || 24) {
+  return lineCount <= Math.min(APPROVAL_MAX_ROWS, Math.max(1, rows - 12));
+}
+
+/** The arguments of an approval, wrapped to the window, indented, nothing cut. */
+export function approvalArgLines(argsText, columns = process.stdout.columns || 80) {
+  const text = String(argsText || "");
+  if (!text) return [];
+  const width = Math.max(20, columns - 1 - 4);
+  return wrapAnsi(text, width, { hard: true, trim: false }).split("\n").map((l) => `    ${l}`);
+}
+
+/** The approval or pairing rows of the live zone; [] when nothing waits. */
+export function confirmRows(state, now = Date.now(), columns = process.stdout.columns || 80) {
+  if (state.pendingPairing) {
+    const p = state.pendingPairing;
+    const left = Math.max(0, Math.ceil((p.expiresAt - now) / 1000));
+    const who = p.agentName ? `${p.agentName}@${p.fromAddress}` : p.fromAddress;
+    return [`  [!] Pairing from ${who}: PIN ${p.pin} (${left}s). Type "C" to cancel.`];
+  }
+  if (state.pendingConfirmation) {
+    const head = `  ? ${state.pendingConfirmation}    [y] yes  [n] no  [a] always`;
+    const lines = approvalArgLines(state.pendingConfirmationArgs, columns);
+    if (approvalFitsLive(lines.length)) return [head, ...lines];
+    return [head, `    full command printed above ↑ (${lines.length} lines)`];
+  }
+  return [];
+}
+
+/** The first approval row, for callers that want one line. */
+export function confirmText(state, now = Date.now(), columns) {
+  return confirmRows(state, now, columns)[0] || "";
+}
+
+/** Running background processes, newest first, at most `limit` rows. */
+export function dockRows(processes, limit = DOCK_ROWS) {
+  const running = (processes || []).filter((p) => p.status === "running").sort((a, b) => b.id - a.id);
+  const rows = running.slice(0, limit).map((p) => {
+    // The "(x2)" repeat counter is for /logs; at the bottom of the screen it
+    // only flickers (owner, 2026-10-01).
+    const last = String((p.output || [])[p.output.length - 1] || "").replace(/\s*\(x\d+\)$/, "");
+    return `  [bg ${p.id}] ${p.command || p.cmd}${last ? `  | ${String(last).replace(/\s+/g, " ")}` : ""}`;
+  });
+  if (running.length > limit) {
+    rows[rows.length - 1] = `  ... ${running.length - limit + 1} more running, /ps to list`;
+  }
+  return rows;
+}
+
+/** 950, 22k, 1M, 1.5M: a token count as short as it can be read. */
+export function compactCount(n) {
+  if (n < 1000) return String(n);
+  if (n < 1e6) return `${Math.round(n / 1000)}k`;
+  return `${(n / 1e6).toFixed(1).replace(/.0$/, "")}M`;
+}
+
+// Unread messages shown above the input, newest last, at most this many.
+export const QUEUE_ROWS = 3;
+
+/** Rows for the messages typed while the agent works and not yet read. */
+export function queueRows(queued, limit = QUEUE_ROWS) {
+  const list = queued || [];
+  if (!list.length) return [];
+  const first = (t) => String(t || "").split("\n").map((l) => l.trim()).find(Boolean) || "";
+  const shown = list.slice(-limit).map((q) => `  queued  ${first(q.display)}`);
+  if (list.length > limit) shown.unshift(`  queued  … ${list.length - limit} earlier, not read yet`);
+  // Esc takes the newest one back into the input (App.js).
+  shown[shown.length - 1] += "   · Esc to edit";
+  return shown;
+}
+
+/** The single status row. */
+export function statusText(state) {
+  const parts = [];
+  if (state.model) parts.push(state.model);
+  if (state.sessionCost != null) parts.push(`${state.sessionCostEstimated ? "~" : ""}$${state.sessionCost.toFixed(4)}`);
+  if (state.contextTokens && state.contextLimit) {
+    // Size, not a percentage: "ctx 1%" of a 1M window hid 10k of context
+    // (owner, 2026-10-01).
+    // "~" while it is an estimate (a session just loaded, no reply yet).
+    parts.push(`ctx ${state.contextEstimated ? "~" : ""}${compactCount(state.contextTokens)}/${compactCount(state.contextLimit)}`);
+  }
+  // What changes during work first; the care level and /help last, where the
+  // footer's right edge may cut them on a narrow window.
+  const bg = (state.processes || []).filter((p) => p.status === "running").length;
+  if (bg) parts.push(`${bg} bg`);
+  if (state.queued > 0) parts.push(`${state.queued} queued`);
+  if (state.autoMode) {
+    const a = state.autoMode;
+    parts.push(`AUTO ${a.tasksDone}/${a.tasksTotal}`);
+  }
+  parts.push(formatStatusLevel());
+  if (state.spendLevel) parts.push(`spend: ${state.spendLevel}`);
+  if (state.freeQuota) parts.push(`free ${state.freeQuota.used}/${state.freeQuota.limit}`);
+  parts.push("/help");
+  return ` ${parts.join("  |  ")}`;
+}
+
+/**
+ * The live zone's rows, fitted to a budget (owner, 2026-10-01: every part was
+ * bounded, but all of them together could still reach the window's height,
+ * and then Ink clears and reprints the whole session on every render).
+ *
+ * Parts in order of importance: an approval or pairing, the running tool,
+ * unread messages, background processes, the paste preview. Each gets what
+ * is left of the budget; one that does not fit whole is folded into a
+ * one-line count (or dropped, for the paste preview). The approval is never
+ * folded: confirmRows already points to the history when its command does
+ * not fit.
+ *
+ * @returns {Array<{key: string, text: string, props: object}>}
+ */
+export function layoutLiveZone(state, { pasteRows = [], budget = Infinity, now = Date.now(), columns } = {}) {
+  const out = [];
+  let left = Math.max(0, budget);
+  const take = (key, rows, props, fold) => {
+    if (!rows.length || left <= 0) return;
+    if (rows.length <= left) {
+      rows.forEach((text, i) => out.push({ key: `${key}-${i}`, text, props: typeof props === "function" ? props(i) : props }));
+      left -= rows.length;
+      return;
+    }
+    if (fold) {
+      out.push({ key: `${key}-fold`, text: fold(rows), props: typeof props === "function" ? props(0) : props });
+      left -= 1;
+    }
+  };
+  take("confirm", confirmRows(state, now, columns), (i) => ({ color: i === 0 ? "yellowBright" : "white" }));
+  const tool = liveToolText(state);
+  take("tool", tool ? [tool] : [], { dimColor: true });
+  const queued = state.queuedInputs || [];
+  take("queue", queueRows(queued), { color: "gray" },
+    () => `  queued  ${queued.length} message${queued.length === 1 ? "" : "s"}, not read yet   · Esc to edit`);
+  const running = (state.processes || []).filter((p) => p.status === "running").length;
+  take("dock", dockRows(state.processes), { dimColor: true },
+    () => `  ${running} background process${running === 1 ? "" : "es"} running, /ps to list`);
+  take("paste", pasteRows.map((r) => `  ${r}`), { dimColor: true });
+  return out;
+}
+
+/** Rows the zone above the separator takes, for the layout cap and its test. */
+export function liveZoneRows(state, now = Date.now(), opts = {}) {
+  return layoutLiveZone(state, { ...opts, now }).length;
+}
+
+const row = (text, props = {}) => h(Box, null, h(Text, { wrap: "truncate-end", ...props }, text));
+
+export function LiveZoneTop({ state, pasteRows = [], budget = Infinity }) {
+  const rows = layoutLiveZone(state, { pasteRows, budget });
+  return h(Box, { flexDirection: "column" },
+    ...rows.map((r) => h(Box, { key: r.key }, h(Text, { wrap: "truncate-end", ...r.props }, r.text))),
+  );
+}
+
+/**
+ * The footer: the fixed-width activity block, then the session facts. The
+ * block is the same width idle or busy, so nothing after it moves.
+ */
+export function StatusLine({ state }) {
+  return h(Box, null, h(Text, { wrap: "truncate-end" },
+    h(Text, { color: state.agentStatus && state.agentStatus !== "idle" ? "white" : "gray" }, ` ${activityText(state)}`),
+    h(Text, { dimColor: true }, `│${statusText(state)}`),
+  ));
+}