@vincemakes/kiso-tui 0.1.36 → 0.1.38

package/dist/components.js

@@ -16,7 +16,7 @@
  * tint, fold wording).
  */
 import { displayWidth } from "./editor.js";
-import { escapeTerminal, foldThinking, foldResult, colorInlineCode, renderTerminalGap, renderToolSummary, palette, } from "./render.js";
+import { bannerLines, escapeTerminal, foldThinking, foldResult, colorInlineCode, renderTerminalGap, renderToolSummary, toolTarget, kUnit, palette, } from "./render.js";
 /** The spinner glyphs, cycled by the compositor's on-demand tick. */
 export const SPINNER = ["▖", "▘", "▝", "▗"];
 /**
@@ -106,14 +106,39 @@ export function visibleWidth(line) {
     }
     return w;
 }
-/** The container — vertical concatenation of its children. */
+/** The W11 spacing formula — "a row gets one blank line above it when
+ *  the row is itself a block, or when the previous sibling was taller
+ *  than one row". One-row siblings pack tight; anything multi-row
+ *  breathes on both sides. The FIRST cell never gets the blank (it sits
+ *  at the body's top — the banner would otherwise start one row down).
+ *  `prev` is the previous sibling's OWN rows (raw — a cell's own blank
+ *  must never count toward its height). The blank is a JOIN artifact:
+ *  the cell's own render stays blank-free, so per-cell accounting
+ *  (heights, the fold cache) never sees a fake row. */
+export function bodySpacing(prev, rows) {
+    if (rows.length === 0 || prev === null || prev.length === 0)
+        return rows;
+    if (rows.length > 1 || prev.length > 1)
+        return ["", ...rows];
+    return rows;
+}
+/** The container — vertical concatenation with the W11 formula. No
+ *  component decides its own spacing: every blank in the body is the
+ *  container's. */
 export class Container {
     children;
     constructor(children) {
         this.children = children;
     }
     render(width, ctx) {
-        return this.children.flatMap((c) => c.render(width, ctx));
+        const out = [];
+        let prev = null;
+        for (const c of this.children) {
+            const rows = c.render(width, ctx);
+            out.push(...bodySpacing(prev, rows));
+            prev = rows;
+        }
+        return out;
     }
 }
 const TOOL_SUMMARY_MAX = 60; // the tool line's parameter summary, chars
@@ -131,6 +156,8 @@ export function cellComponent(cell) {
             return new AssistantMessage(cell);
         case "notice":
             return new ErrorLine(cell);
+        case "banner":
+            return new Banner(cell);
         case "raw":
             return new RawBlock(cell);
         case "terminal":
@@ -141,10 +168,18 @@ export function cellComponent(cell) {
 }
 /**
  * The user message — the left rail (bright-white BOLD ▍ per row, the
- * v4.1 design). The text folds at W−2 (the rail + space) so every row
- * carries the rail and NO row exceeds the width (the v5 code split on
- * "\n" only — a long line soft-wrapped and its continuation row had no
- * rail).
+ * v4.1 design) + the W16 inset chip. The chip folds the text at W−6
+ * (the rail + the indent + the side pads), then pads EVERY row to the
+ * longest row's DISPLAY width + one space each side, indented two: the
+ * block is only as wide as what was said (never the full-width band —
+ * a short message like /think would paint a bar across the terminal).
+ * The padding is by cells (charWidth is the width authority), so a CJK
+ * row pads by width, never by chars, and the chip never overruns its
+ * fold. SGR 7 closed with SGR 27 — never SGR 0, the chip composes
+ * with a surrounding span — and NEVER dim: reverse video inverts the
+ * CURRENT colours, so dimmed text would invert into a dimmed block
+ * with no contrast. The ▍ rail stays: SGR is an emphasis on top, the
+ * rail is the structural fallback that survives a pipe.
  */
 class UserMessage {
     cell;
@@ -154,12 +189,15 @@ class UserMessage {
     render(W, _ctx) {
         const p = palette();
         const rail = `${p.bold}▍${p.reset} `;
-        const textW = Math.max(1, W - 2);
+        const chipW = Math.max(1, W - 6);
         const rows = [];
         for (const para of this.cell.text.split("\n")) {
-            const folded = foldLine(escapeTerminal(para), textW);
-            for (const row of folded)
-                rows.push(`${rail}${row}`);
+            const folded = foldLine(escapeTerminal(para), chipW);
+            const inner = Math.max(...folded.map((r) => displayWidth(r)));
+            for (const row of folded) {
+                const pad = inner - displayWidth(row);
+                rows.push(`${rail}  ${p.rv} ${row}${" ".repeat(pad)} ${p.rvEnd}`);
+            }
         }
         return rows.length > 0 ? rows : [rail.trimEnd()];
     }
@@ -168,7 +206,8 @@ class UserMessage {
  *  rides the fold's own row (the #17 fix's slice, componentized). The
  *  slice is DISPLAY-WIDTH-based (the char-based slice overflowed with
  *  CJK — 2 cells per char — and tripped invariant ① on a real
- *  Chinese session). */
+ *  Chinese session). W2: the leading ⋯ is the thinking gutter — the
+ *  midline mark (the state), never the text ellipsis (the truncation). */
 class ThinkingFold {
     cell;
     constructor(cell) {
@@ -182,12 +221,87 @@ class ThinkingFold {
         // UNFOLDED and tripped invariant ① (the crash class still live on
         // npm for short /think blocks after a resize).
         if (trimmed.length <= 100)
-            return [`${palette().dim}…${widthCut(trimmed, Math.max(1, W - 1))}${palette().reset}`];
+            return [`${palette().dim}⋯${widthCut(trimmed, Math.max(1, W - 1))}${palette().reset}`];
         const suffix = ` (${block.length} chars · /think)`;
         const slice = Math.max(1, W - 1 - suffix.length);
-        return [`${palette().dim}…${widthCut(trimmed, slice)}${suffix}${palette().reset}`];
+        return [`${palette().dim}⋯${widthCut(trimmed, slice)}${suffix}${palette().reset}`];
     }
 }
+/** Fold a line's CONTENT at W−2 and prefix EVERY row with the gutter
+ *  (W2: a wrapped tool row keeps its state mark — the left edge alone
+ *  distinguishes the states at --plain; the UserMessage rail precedent,
+ *  v5 #16f). The gutter carries its own SGR (e.g. the bold ✓). */
+function gutterFold(gutter, line, W) {
+    const textW = Math.max(1, W - 2);
+    return foldLine(line, textW).map((r) => `${gutter}${r}`);
+}
+/** Lines without the phantom empty line after a trailing newline. */
+function countLines(text) {
+    if (text === "")
+        return 0;
+    const parts = text.split("\n");
+    return parts[parts.length - 1] === "" ? parts.length - 1 : parts.length;
+}
+/** W4: the settled-row metadata — the human summary in parentheses. The
+ *  separation NEVER relies on dim: a pipe drops the SGR, and the shapes
+ *  below read at full strength with the palette off. read → the line
+ *  count ("912 lines"; "200 of 3412 lines" when the tool cut it — the
+ *  note names the remainder; ≥1000 k-formats, "2.4k lines"); write/edit
+ *  → the ± diff stats (the approval diff's counts — an auto-allowed
+ *  write never computed one, so the input's own counts fall back, then
+ *  the result's line count); shell → the exit code (parsed from the
+ *  failure text — the tool names it — 0 on success); a non-shell error
+ *  → the error text's first line; anything else → the result's line
+ *  count. */
+function settledMeta(c) {
+    if (c.isError) {
+        // a shell EXECUTION failure names its code first ("exit 1: …") —
+        // that IS the metadata, and the body shows the full text. A
+        // shell without the code (a denial, a precondition) is not an
+        // exit failure: the first line stays the metadata, exactly like
+        // any other error.
+        if (c.name === "shell" && /^exit \d+/.test(c.resultText))
+            return `exit ${/^exit (\d+)/.exec(c.resultText)[1]}`;
+        return c.resultText.split("\n")[0].slice(0, 60);
+    }
+    if (c.name === "read_file") {
+        const noteAt = c.resultText.lastIndexOf("\n… ");
+        const shown = countLines(noteAt >= 0 ? c.resultText.slice(0, noteAt) : c.resultText);
+        const more = noteAt >= 0 ? /(\d+) more lines?/.exec(c.resultText.slice(noteAt)) : null;
+        const k = (n) => (n >= 1000 ? `${(n / 1000).toFixed(1).replace(/\.0$/, "")}k` : String(n));
+        if (more !== null) {
+            const total = shown + Number(more[1]);
+            return `${shown} of ${total} line${total === 1 ? "" : "s"}`;
+        }
+        return `${k(shown)} line${shown === 1 ? "" : "s"}`;
+    }
+    if (c.name === "write_file" || c.name === "edit_file") {
+        if (c.added + c.removed > 0)
+            return `+${c.added} -${c.removed}`;
+        // no approval diff (an auto-allowed write): the input summary may
+        // be sliced at TOOL_SUMMARY_MAX — best-effort, then the last resort
+        let parsed = null;
+        try {
+            parsed = JSON.parse(c.input);
+        }
+        catch {
+            parsed = null;
+        }
+        if (c.name === "write_file" && parsed !== null && typeof parsed.content === "string") {
+            return `+${countLines(parsed.content)}`;
+        }
+        if (c.name === "edit_file" && parsed !== null && typeof parsed.search === "string" && typeof parsed.replace === "string") {
+            const added = countLines(parsed.replace);
+            const removed = countLines(parsed.search);
+            if (added + removed > 0)
+                return `+${added} -${removed}`;
+        }
+    }
+    if (c.name === "shell")
+        return "exit 0";
+    const n = countLines(c.resultText);
+    return `${n} line${n === 1 ? "" : "s"}`;
+}
 /** The tool execution line + the bounded block — every state is its
  *  own render; the lines fold (the summary gives way first). W7 (the
  *  flow contract): the block's BODY (the rows below the header) is
@@ -195,7 +309,14 @@ class ThinkingFold {
  *  renderer-cut row (`└ +N … · ctrl+r`) sits INSIDE the cap (a
  *  truncated block is cap−1 output rows + the cut row); the TOOL-cut
  *  row (`└ capped by …` — the tool's OWN truncation note, W10) is a
- *  DIFFERENT fact, never counted in the output cap. */
+ *  DIFFERENT fact, never counted in the output cap. W3: the verb is
+ *  stripped of its "_file" suffix and padded to 5 columns — the target
+ *  paths line up (the pipe path strips the same suffix, render.ts —
+ *  both paths print the same verb; a verb ≥ 5 columns is not padded).
+ *  The block's cut note keeps the RAW name (it names the tool the
+ *  model should call again). W4: the settled row's parentheses hold
+ *  the human metadata (settledMeta) — the input summary lived in the
+ *  running row; the OUTCOME is what the settled row says. */
 class ToolExecution {
     cell;
     constructor(cell) {
@@ -204,31 +325,115 @@ class ToolExecution {
     render(W, ctx) {
         const p = palette();
         const c = this.cell;
-        const name = escapeTerminal(c.name);
+        const verb = escapeTerminal(c.name.replace("_file", ""));
+        const verbCol = verb.length < 5 ? `${verb}${" ".repeat(5 - verb.length)}` : verb;
         const summary = escapeTerminal(c.input);
+        if (c.rolled !== null) {
+            // W13 — the rolled-up group's ONE row + the target children:
+            // the work order's claimed shape, verbatim — the verbCol's
+            // 5-char pad reproduces the "read  5 files" double space, the
+            // children are the first 3 basename targets, the overflow row
+            // carries the ctrl+r affordance (its "└ … ctrl+r" joins the
+            // W15 expand history — the head's commit captures it).
+            const r = c.rolled;
+            const noun = ROLLUP_NOUN[c.name] ?? "calls";
+            const out = gutterFold(`${p.bold}✓${p.reset} `, `${verbCol} ${r.count} ${noun} (${kUnit(r.lines)} lines, ${r.elapsed}s)`, W);
+            const shown = r.targets.slice(0, 3);
+            if (shown.length > 0)
+                out.push(`  ${p.dim}${CUT_ROW}${escapeTerminal(shown.join(" · "))}${p.reset}`);
+            if (r.targets.length > 3)
+                out.push(`  ${p.dim}${CUT_ROW}+${r.targets.length - 3} more — ctrl+r expands${p.reset}`);
+            return out;
+        }
         if (c.state === "done") {
+            // W19: the pinned deny — the claimed shape verbatim: the FULL
+            // call name (the denial names the call), the target, the reason
+            // in the W4 parentheses idiom, no timing (the call never ran).
+            // The same ✗ family as any failure; the [result ✗] body still
+            // rides below (never hide information).
+            if (c.reason !== null) {
+                let input = {};
+                try {
+                    input = JSON.parse(c.inputFull);
+                }
+                catch {
+                    // the full JSON is always parseable (stringified at
+                    // toolStart) — the empty fallback never fires
+                }
+                const target = toolTarget(c.name, input);
+                const out = gutterFold(`${p.red}✗${p.reset} `, `${p.red}${escapeTerminal(`${c.name} ${target}`)} (${escapeTerminal(c.reason)})${p.reset}`, W);
+                out.push(...toolBlockBody(c, W));
+                return out;
+            }
             const elapsed = c.startedAt !== null && c.doneAt !== null ? ((c.doneAt - c.startedAt) / 1000).toFixed(1) : "?";
-            const line = c.isError
-                ? `${p.red}✗ ${name} (${escapeTerminal(c.resultText.split("\n")[0].slice(0, 60))}, ${elapsed}s)${p.reset}`
-                : `${p.bold}✓ ${name}${p.reset} (${summary}${c.added + c.removed > 0 ? `, +${c.added} -${c.removed}` : ""}, ${elapsed}s)`;
-            const out = foldLine(line, W);
+            const meta = escapeTerminal(settledMeta(c));
+            const out = c.isError
+                ? gutterFold(`${p.red}✗${p.reset} `, `${p.red}${verbCol} (${meta}, ${elapsed}s)${p.reset}`, W)
+                : gutterFold(`${p.bold}✓${p.reset} `, `${verbCol} (${meta}, ${elapsed}s)`, W);
             out.push(...toolBlockBody(c, W));
             return out;
         }
         if (c.state === "approval") {
-            const out = foldLine(`→ ${name} ${summary} ${p.bold}⏸${p.reset}`, W);
+            // W2: the ⏸ is the GUTTER (the left edge), never the line's tail
+            const out = gutterFold(`${p.bold}⏸${p.reset} `, `${verbCol} ${summary}`, W);
             out.push(...toolBlockBody(c, W));
             return out;
         }
         if (c.state === "running") {
+            // W2: the spinner IS the gutter (the left edge); the elapsed
+            // rides the summary's tail
             const elapsed = c.startedAt !== null ? Math.max(1, Math.round((ctx.now - c.startedAt) / 1000)) : 1;
-            const out = foldLine(`→ ${name} ${summary} ${p.bold}${SPINNER[ctx.spinnerI % SPINNER.length]}${p.reset} ${elapsed}s`, W);
+            const out = gutterFold(`${p.bold}${SPINNER[ctx.spinnerI % SPINNER.length]}${p.reset} `, `${verbCol} ${summary} ${elapsed}s`, W);
             out.push(...toolBlockBody(c, W));
             return out;
         }
-        return foldLine(`→ ${name} ${summary}`, W);
+        // W2: ◦ replaces → for QUEUED — · is the separator inside every
+        // metadata group; a queued marker that is also the separator
+        // glyph reads as noise
+        return gutterFold(`${p.dim}◦${p.reset} `, `${verbCol} ${summary}`, W);
     }
 }
+/** W13 — the rollup opt-in table: which tools collapse, and the count
+ *  NOUN (read_file calls → "5 files", list_dir → "5 dirs", search_text
+ *  → "5 matches"). Only these tools opt in — a shell burst is never
+ *  rolled up (its rows carry meaning). The folded-turn line (W14) reuses
+ *  the plurals for its other-tool terms ("2 dirs", "1 match"). */
+export const ROLLUP_NOUN = {
+    read_file: "files",
+    list_dir: "dirs",
+    search_text: "matches",
+};
+/** The count term with the singular/plural forms — "no reads", "1 read",
+ *  "5 reads". The noun's singular drops the plural suffix ("dirs" → "dir",
+ *  "matches" → "match"). */
+function countTerm(n, singular, plural) {
+    if (n === 0)
+        return `no ${plural}`;
+    if (n === 1)
+        return `1 ${singular}`;
+    return `${n} ${plural}`;
+}
+/** W14 — the folded-turn line: a whole QUIET turn (no text), once it is
+ *  scrollback, becomes ONE line — the work order's claimed shape
+ *  (`▞ thought 19s · 5 reads · no edits`), the counts accumulated at
+ *  toolStart: read_file → "reads", edit_file → "edits", the other tools
+ *  as first-call-order terms (the ROLLUP_NOUN plurals when the tool opts
+ *  in, the verb + "s" otherwise). */
+export function turnFold(t) {
+    const p = palette();
+    const parts = [`thought ${t.thoughtSeconds}s`, countTerm(t.reads, "read", "reads"), countTerm(t.edits, "edit", "edits")];
+    for (const [name, n] of t.others) {
+        const noun = ROLLUP_NOUN[name];
+        if (noun !== undefined) {
+            parts.push(countTerm(n, noun.endsWith("es") ? noun.slice(0, -2) : noun.slice(0, -1), noun));
+        }
+        else {
+            const verb = name.replace("_file", "");
+            parts.push(countTerm(n, verb, `${verb}s`));
+        }
+    }
+    return [`${p.bold}▞${p.reset} ${parts.join(" · ")}`];
+}
 // ---- the bounded-block flow contract (W7, W8, W10) ----
 /** The caps — screen rows counted AFTER the fold, at the current width
  *  (the W7 table). The renderer-cut row is inside the cap. */
@@ -238,30 +443,47 @@ const CAP_DIFF = 12; // the approval diff: head + the named middle + tail
 const CAP_ERROR = 3; // the error text head
 /** The block body rows' prefixes (W2's gutter table): │ a bounded
  *  block's body, └ the block's last row — what was cut, where the rest
- *  is. Structural (constraint 1) — they survive a pipe. */
-const BODY_ROW = "  │ ";
-const CUT_ROW = "  └ ";
+ *  is — at the LEFT EDGE (the gutter column: the left edge alone
+ *  distinguishes the states at --plain). Structural (constraint 1). */
+const BODY_ROW = "│ ";
+const CUT_ROW = "└ ";
 const blockMemo = new WeakMap();
 /** The block's body rows below the header (memoized, W9). */
 function toolBlockBody(c, W) {
     const memo = blockMemo.get(c);
-    const state = `${c.state}:${c.isError}:${c.name}`;
+    const state = `${c.state}:${c.isError}:${c.name}:${c.expanded ? "x" : ""}`;
     const content = c.state === "approval" ? (c.diff ?? null) : c.resultText;
     if (memo !== undefined && memo.width === W && memo.state === state && memo.content === content)
         return memo.rows;
     const p = palette();
-    const rows = c.state === "done"
-        ? c.isError
-            ? errorBody(c.resultText, W)
-            : c.name.startsWith("shell")
-                ? shellTail(c.resultText, W)
-                : []
-        : c.state === "running"
-            ? liveWindow(c.resultText, W)
-            : c.state === "approval"
-                ? diffBody(c.diff, W)
-                : [];
-    const note = toolCutNote(c.name, c.resultText);
+    const rows = c.expanded
+        ? // W15: the toggle's full form — the WHOLE body, no cap, no
+            // cut note (nothing is cut; the width fold still holds — the
+            // height may change while live, the user asked for it). The
+            // delegate has no body — its rows are unchanged.
+            c.state === "approval"
+                ? diffBody(c.diff, W, true)
+                : c.name === "delegate"
+                    ? c.state === "running"
+                        ? delegateRunning(c, W)
+                        : delegateSettled(c, W)
+                    : blockRows(c.resultText, W)
+        : c.state === "done"
+            ? c.isError
+                ? errorBody(c, W)
+                : c.name === "delegate"
+                    ? delegateSettled(c, W)
+                    : c.name.startsWith("shell")
+                        ? shellTail(c.resultText, W)
+                        : []
+            : c.state === "running"
+                ? c.name === "delegate"
+                    ? delegateRunning(c, W)
+                    : liveWindow(c.resultText, W)
+                : c.state === "approval"
+                    ? diffBody(c.diff, W)
+                    : [];
+    const note = c.expanded ? null : toolCutNote(c.name, c.resultText);
     if (note !== null)
         rows.push(...foldLine(`${p.dim}${CUT_ROW}${note}${p.reset}`, W));
     blockMemo.set(c, { width: W, state, content, rows });
@@ -297,9 +519,18 @@ function shellTail(text, W) {
 /** The error text head: the FIRST rows, capped at 3 — the answer is at
  *  the start (opencode's collapseToolOutput direction). The header row
  *  already summarizes the first line, so the body starts at line 2. */
-function errorBody(text, W) {
+function errorBody(c, W) {
     const p = palette();
-    const rows = blockRows(text.split("\n").slice(1).join("\n"), W);
+    // W4: a shell EXECUTION failure's line 0 ("exit 1: …") no longer
+    // rides the header — the parsed code does — so the body keeps the
+    // FULL text. Any other error keeps the pre-W4 split: line 0 is the
+    // header's metadata, the body shows the rest.
+    // W19: a DENIED call's header meta is the PARSED reason (from the
+    // denied tag), decoupled from the result text — the body keeps the
+    // FULL content including the "[Permission denied] " prefix (never
+    // hide information — the folded body rides the pinned row).
+    const skipFirst = c.name === "shell" && /^exit \d+/.test(c.resultText) ? 0 : c.reason !== null && c.reason !== undefined ? 0 : 1;
+    const rows = blockRows(c.resultText.split("\n").slice(skipFirst).join("\n"), W);
     if (rows.length <= CAP_ERROR)
         return rows;
     const cut = foldLine(`${p.dim}${CUT_ROW}+${rows.length - (CAP_ERROR - 1)} more · ctrl+r${p.reset}`, W);
@@ -324,32 +555,88 @@ function liveWindow(text, W) {
     const cut = foldLine(`${p.dim}${CUT_ROW}+${rows.length - (CAP_LIVE_WINDOW - 1)} earlier rows · ctrl+r${p.reset}`, W);
     return [...rows.slice(rows.length - (CAP_LIVE_WINDOW - 1)), ...cut];
 }
+/** W12: the delegate's child sessions collapse to the tool row plus ONE
+ *  line — the height NEVER changes (running → settled replaces the row
+ *  in place). The running row derives from the INPUT: the parent has no
+ *  live channel to a running child (ToolContext carries only
+ *  signal/sessionId; execute returns ONE result), so the roles are the
+ *  honest current data — the spec's "<child's current tool>" has no
+ *  event source. The settled row parses the extension's summary marker
+ *  (the blob's first line) — its absence falls back to no body (an old
+ *  extension's output still renders). The one-line shape is shared with
+ *  W18's status row (the work order: "implement them with one helper"). */
+function delegateRunning(c, W) {
+    const p = palette();
+    const n = c.childRoles.length;
+    const text = n === 0 ? "children running…" : `${n === 1 ? "1 child" : `${n} children`} · ${c.childRoles.join(" · ")}`;
+    return [oneLineRow(p, text, W)];
+}
+function delegateSettled(c, W) {
+    const p = palette();
+    const m = /^summary: (.+)$/m.exec(c.resultText);
+    if (m === null)
+        return [];
+    return [oneLineRow(p, `${m[1]} · /last for the report`, W)];
+}
+/** ONE row at the left gutter, truncated to fit the width — never a
+ *  fold (a fold would wrap into TWO rows and break the one-line height
+ *  contract). */
+function oneLineRow(p, text, W) {
+    const esc = escapeTerminal(text);
+    if (visibleWidth(`${p.dim}${CUT_ROW}${esc}${p.reset}`) <= W)
+        return `${p.dim}${CUT_ROW}${esc}${p.reset}`;
+    const w = Math.max(1, W - visibleWidth(`${p.dim}${CUT_ROW}${p.reset}`));
+    return `${p.dim}${CUT_ROW}${esc.slice(0, w - 1)}…${p.reset}`;
+}
 /** The approval mini-diff (W7): capped at 12 folded rows — the head +
  *  the named middle (the renderer cut — what was cut, how to expand) +
  *  the tail. The rows are folded at the current width BEFORE the cap —
  *  the R1 measured bug: truncateDiff capped at 40 ENTRIES while the
  *  fold turned them into 73 SCREEN rows at W≤80 (a 44-row terminal's
  *  content cap is H−4 = 40 — the approval force-committed a third of
- *  the screen into scrollback inside one frame). */
-function diffBody(diff, W) {
+ *  the screen into scrollback inside one frame).
+ *  W17: the cap is a ROW budget at every width — the └ cut is ONE line
+ *  (a folded cut pushed the total past 12 at narrow widths), and below
+ *  a floor of 3 SOURCE lines visible the head/tail pair is noise (each
+ *  fragment a sliver of a long line): drop to the head only — the head
+ *  takes the whole budget — and the └ row carries the rest. */
+function diffBody(diff, W, expanded = false) {
     const p = palette();
     if (diff === null)
         return [];
     const rows = [];
+    // W17: each line's fold START row (the running total) — the pair
+    // floor reads it for the head/tail SOURCE-line counts below.
+    const starts = [0];
     for (const d of diff) {
         const body = d.kind === "-"
             ? `${p.red}- ${escapeTerminal(d.text)}${p.reset}`
             : d.kind === "+"
                 ? `${p.green}+ ${escapeTerminal(d.text)}${p.reset}`
                 : `${p.dim}  ${escapeTerminal(d.text)}${p.reset}`;
-        rows.push(...foldLine(`${p.bold}▎${p.reset}${body}`, W));
+        // W2: the diff body is a bounded block's body — the │ gutter
+        // (dim), never the old bold ▎ rail (the table lists no ▎); the
+        // +/- marks and their colors ride the content
+        rows.push(...gutterFold(`${p.dim}│${p.reset} `, body, W));
+        starts.push(rows.length);
     }
-    if (rows.length <= CAP_DIFF)
+    if (expanded || rows.length <= CAP_DIFF)
         return rows;
     const head = Math.floor((CAP_DIFF - 1) / 2);
     const tail = CAP_DIFF - 1 - head;
-    const cut = foldLine(`${p.dim}${CUT_ROW}+${rows.length - head - tail} rows · ctrl+r to expand · /last for the full diff${p.reset}`, W);
-    return [...rows.slice(0, head), ...cut, ...rows.slice(rows.length - tail)];
+    // W17: the └ cut is ONE row at every width — the count leads, the
+    // expand affordances are cuttable (the same one-line shape as W12's
+    // delegate row and W18's status row).
+    const cut = (n) => oneLineRow(p, `+${n} rows · ctrl+r to expand · /last for the full diff`, W);
+    // W17: the floor — the head window shows the lines whose fold starts
+    // before `head` rows; the tail window the lines whose fold ENDS after
+    // `rows.length - tail` (starts[i+1] is line i's end). When the pair
+    // shows fewer than 3 SOURCE lines together, it is noise at this width
+    // (each fragment a sliver of a long line): drop to the head only —
+    // the head takes the whole budget, the └ row carries the rest.
+    if (starts.filter((s) => s < head).length + starts.slice(1).filter((s) => s > rows.length - tail).length < 3)
+        return [...rows.slice(0, CAP_DIFF - 1), cut(rows.length - (CAP_DIFF - 1))];
+    return [...rows.slice(0, head), cut(rows.length - head - tail), ...rows.slice(rows.length - tail)];
 }
 /** The TOOL's OWN truncation note (W10) — a different fact from the
  *  renderer's cut: the tools truncate and append a continuation note
@@ -403,20 +690,92 @@ class RawBlock {
         return this.cell.lines.flatMap((l) => foldLine(l, W));
     }
 }
-/** The terminal label + the status line + the rhythm gap blank. */
+/** The terminal label + the status line. W11: the rhythm gap blank is
+ *  gone — the container's formula breathes below a multi-row cell (the
+ *  terminal is always multi-row when labelled), never the component. */
 class TerminalBlock {
     cell;
     constructor(cell) {
         this.cell = cell;
     }
     render(W, _ctx) {
-        const lines = [...foldLine(this.cell.label, W), ...foldLine(this.cell.line, W)];
-        if (this.cell.label !== "")
-            lines.push("");
-        return lines;
+        return [...foldLine(this.cell.label, W), ...foldLine(this.cell.line, W)];
+    }
+}
+/** The startup banner — a LIVE cell: every render re-derives the tier
+ *  from the CURRENT width AND height (bannerLines), so a resize re-tiers
+ *  the art instead of re-folding frozen rows (the W1 tier table: below
+ *  40 cols the logo never paints). W11: no trailing blank — the
+ *  container's formula breathes below the (always multi-row) banner. */
+class Banner {
+    cell;
+    constructor(cell) {
+        this.cell = cell;
+    }
+    render(W, ctx) {
+        const p = palette();
+        const rows = bannerLines(W, ctx.height, this.cell.version, this.cell.extensionsText, this.cell.resume, ctx.now);
+        return rows.map((r) => `${p.dim}${r}${p.reset}`);
     }
 }
-/** The durable checklist — the ▞ header + one brick-glyph row per item. */
+/** W20 — the todo block's fixed-window height: the whole live block
+ *  (header + rows) in POST-FOLD screen rows at EVERY width: the header,
+ *  the active row, up to 2 pending, the overflow-pending fold, the
+ *  done-collapse. Every live row CUTS at W (never folds) — the block's
+ *  height is its row count. */
+export const CAP_TODO_LIVE = 6;
+/** W20 — the live block's fixed-window row cut: an SGR-aware ONE-ROW
+ *  truncation (foldLine wraps; a wrapped row would break the height
+ *  cap — every live row is exactly one screen row at every width).
+ *  A line that fits (≤ W) passes through whole; an overflow cuts the
+ *  content at W−1 — the ellipsis's slot — and the ellipsis rides AFTER
+ *  the reset (post-reset — the PTY needles' convention). The cut row
+ *  never exceeds W (invariant ①). */
+function cutLine(line, W) {
+    if (visibleWidth(line) <= W)
+        return line;
+    let out = "";
+    let width = 0;
+    for (let i = 0; i < line.length;) {
+        if (line[i] === "\x1b") {
+            const m = /^\x1b\[[0-9;]*m/.exec(line.slice(i)) ?? line[i];
+            out += m;
+            i += m.length;
+            continue;
+        }
+        const cw = displayWidth(line[i]);
+        if (width + cw > W - 1)
+            break; // reserve the ellipsis's column
+        out += line[i];
+        width += cw;
+        i += 1;
+    }
+    return `${out}\x1b[0m…`;
+}
+/** W20 — the settled block's duration, the `2h 14m` form (the todo
+ *  narrative's long-horizon idiom): minutes+seconds under an hour,
+ *  hours+minutes past it. */
+export function formatDuration(totalSeconds) {
+    const s = Math.max(0, Math.round(totalSeconds));
+    if (s < 60)
+        return `${s}s`;
+    const m = Math.floor(s / 60);
+    return m < 60 ? `${m}m ${s % 60}s` : `${Math.floor(m / 60)}h ${m % 60}m`;
+}
+/**
+ * W20 — the todo checklist as STATE: ONE live block that redraws in
+ * place (the current turn's in-place updates), settling at the turn's
+ * end as ONE recap block. LIVE (done:false): the fixed "todo" prefix +
+ * the compositor-derived counts (the model tail rides AFTER — never
+ * model-controlled), the active item first with ▸ (the menu's "the
+ * current one"), pending next (≤2), the done items COLLAPSED behind the
+ * W10 cut family `└ +N done · ctrl+r`, overflow pending behind
+ * `└ +N more · ctrl+r` — every row cut at W so the cap holds at every
+ * width. ctrl+r (W15) toggles the full list in place (expanded). SETTLED
+ * (done:true): the recap idiom `todo done · N items · <duration>` + the
+ * FULL final item list in the checklist's existing shape (▖/□/▣ —
+ * indented two, the glyph leads, no │ gutter).
+ */
 class Checklist {
     cell;
     constructor(cell) {
@@ -424,12 +783,47 @@ class Checklist {
     }
     render(W, _ctx) {
         const p = palette();
-        const glyphOf = (status) => (status === "pending" ? "□" : status === "active" ? "▖" : "▣");
-        const rows = foldLine(`${p.bold}▞${p.reset} ${escapeTerminal(this.cell.header)}`, W);
-        for (const item of this.cell.items) {
-            rows.push(...foldLine(`  ${glyphOf(item.status)} ${escapeTerminal(item.text)}`, W));
+        const { items, done, expanded, durationSeconds } = this.cell;
+        const active = items.filter((i) => i.status === "active");
+        const pending = items.filter((i) => i.status === "pending");
+        const doneCount = items.length - active.length - pending.length;
+        const plural = (n, word) => `${n} ${word}${n === 1 ? "" : "s"}`;
+        const tail = this.cell.header === "" ? "" : ` · ${this.cell.header}`;
+        const fixed = done
+            ? `todo done · ${plural(items.length, "item")} · ${formatDuration(durationSeconds)}`
+            : `todo · ${plural(items.length, "item")} · ${active.length} active · ${doneCount} done`;
+        const header = `${p.bold}▞${p.reset} ${escapeTerminal(fixed + tail)}`;
+        // the FULL-list forms: SETTLED — the durable record (the fold is
+        // fine — committed content wraps naturally) — and the LIVE ctrl+r
+        // toggle (the header CUTS — the block stays one window high; the
+        // expanded rows show the ▣ the collapse hid). The live flag picks
+        // the glyphs: the settled list keeps the durable ▖, the expanded
+        // live list the ▸.
+        const glyph = (status, live) => {
+            const g = status === "pending" ? "□" : status === "active" ? (live ? "▸" : "▖") : "▣";
+            return g === "▸" ? `${p.bold}▸${p.reset}` : g;
+        };
+        if (done || expanded) {
+            const rows = done ? foldLine(header, W) : [cutLine(header, W)];
+            for (const item of items)
+                rows.push(...foldLine(`  ${glyph(item.status, !done)} ${escapeTerminal(item.text)}`, W));
+            return rows;
         }
-        return rows;
+        // LIVE — the fixed window: the header + the item rows CUT at W
+        // (one screen row each — the block's height is its row count,
+        // CAP_TODO_LIVE, at every width). The cut is the momentary view;
+        // the settle (and the ctrl+r toggle) show everything.
+        const itemRows = [];
+        if (active.length > 0)
+            itemRows.push(`  ${p.bold}▸${p.reset} ${escapeTerminal(active[0].text)}`);
+        for (const item of pending.slice(0, 2))
+            itemRows.push(`  □ ${escapeTerminal(item.text)}`);
+        const more = pending.length - 2;
+        if (more > 0)
+            itemRows.push(`  ${p.dim}└ +${more} more · ctrl+r${p.reset}`);
+        if (doneCount > 0)
+            itemRows.push(`  ${p.dim}└ +${doneCount} done · ctrl+r${p.reset}`);
+        return [cutLine(header, W), ...itemRows.map((r) => cutLine(r, W))];
     }
 }
 // ---- the chrome components (the status container, the slot, the footer) ----
@@ -438,20 +832,24 @@ class Checklist {
  *  the hint CUT FIRST when the width is short (the #16g rule); when
  *  the STATUS ITSELF cannot fit, it cuts with a "…" — the last resort,
  *  enforced by invariant ① (the old code let the status soft-wrap). */
-export function statusLine(status, tail, question, W) {
+export function statusLine(status, tail, question, W, hint) {
     const p = palette();
     const text = `${status}${tail === "" ? "" : ` · ${tail}`}`;
     if (question)
         return `${p.dim}${widthCut(text, W)}${p.reset}`;
-    const hint = " / commands · ↑ history";
+    // W18: the hint is a parameter — the compacting row right-aligns its
+    // "esc to cancel" (the same one-line-bounded shape as W12's delegate
+    // row; the #16g rule still cuts the HINT first, then the status with
+    // a "…" — never a fold).
+    const hintText = hint ?? " / commands · ↑ history";
     const statusW = visibleWidth(text);
     if (statusW > W) {
         return `${p.dim}${widthCut(text, W - 1)}…${p.reset}`;
     }
-    const hintW = visibleWidth(hint);
+    const hintW = visibleWidth(hintText);
     if (statusW + hintW > W)
         return `${p.dim}${text}${p.reset}`;
-    return `${p.dim}${text}${" ".repeat(Math.max(0, W - statusW - hintW))}${hint}${p.reset}`;
+    return `${p.dim}${text}${" ".repeat(Math.max(0, W - statusW - hintW))}${hintText}${p.reset}`;
 }
 /** The display-width prefix of a plain (SGR-free) text. */
 function widthCut(text, max) {
@@ -465,10 +863,17 @@ function widthCut(text, max) {
     }
     return text.slice(0, i);
 }
-/** The footer — the ONE dotted row (the old two-row chrome is gone;
- *  the wall cannot return by construction). */
-export function footerLine(W) {
-    return `\x1b[2m${"╌".repeat(W)}\x1b[0m`;
+/** W6 — the box: the chrome's top rail. The two ╌ dotted rows become
+ *  a rounded box (the box already says "input lives here"); the rails
+ *  stay dim, the width is still the full W (the box is a rail with
+ *  corners — the menu/gap rows above and the status below are
+ *  untouched). */
+export function boxTop(W) {
+    return `\x1b[2m╭${"─".repeat(Math.max(0, W - 2))}╮\x1b[0m`;
+}
+/** W6 — the box: the chrome's bottom rail. */
+export function boxBottom(W) {
+    return `\x1b[2m╰${"─".repeat(Math.max(0, W - 2))}╯\x1b[0m`;
 }
 /** The terminal label + rhythm gap (the pipe path's v2c bytes — the
  *  exact render the passthrough needs). */