@vincemakes/kiso-tui 0.1.36 → 0.1.37

package/dist/components.d.ts

@@ -15,7 +15,7 @@
  * (untouched); render.ts supplies the original text (palette, escape,
  * tint, fold wording).
  */
-import { foldThinking, foldResult, renderToolSummary } from "./render.js";
+import { foldThinking, foldResult, renderToolSummary, type ResumeMeta } from "./render.js";
 /** The spinner glyphs, cycled by the compositor's on-demand tick. */
 export declare const SPINNER: string[];
 /** The frame context the compositor passes down — the pieces of time
@@ -24,6 +24,10 @@ export declare const SPINNER: string[];
 export interface FrameCtx {
     readonly spinnerI: number;
     readonly now: number;
+    /** The terminal height (rows) — the banner cell's tier input (W1:
+     *  the tier table reads H, so a resize RE-TIERS instead of
+     *  re-folding frozen rows). */
+    readonly height: number;
 }
 /** ONE screen line a component emits (raw, SGR included). */
 export type RenderLine = string;
@@ -43,7 +47,19 @@ export declare function visibleWidth(line: string): number;
 export interface Component {
     render(width: number, ctx: FrameCtx): string[];
 }
-/** 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 declare function bodySpacing(prev: readonly string[] | null, rows: readonly string[]): string[];
+/** The container — vertical concatenation with the W11 formula. No
+ *  component decides its own spacing: every blank in the body is the
+ *  container's. */
 export declare class Container implements Component {
     private readonly children;
     constructor(children: Component[]);
@@ -61,6 +77,7 @@ export type BodyCell = {
     kind: "tool";
     name: string;
     input: string;
+    childRoles: string[];
     state: "pending" | "approval" | "running" | "done";
     isError: boolean;
     resultText: string;
@@ -78,6 +95,12 @@ export type BodyCell = {
     kind: "notice";
     text: string;
     done: true;
+} | {
+    kind: "banner";
+    version: string;
+    extensionsText: string;
+    resume: ResumeMeta[];
+    done: true;
 } | {
     kind: "raw";
     lines: string[];
@@ -105,7 +128,7 @@ export declare function cellComponent(cell: BodyCell): Component;
  *  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 declare function statusLine(status: string, tail: string, question: boolean, W: number): string;
+export declare function statusLine(status: string, tail: string, question: boolean, W: number, hint?: string): string;
 /** The footer — the ONE dotted row (the old two-row chrome is gone;
  *  the wall cannot return by construction). */
 export declare function footerLine(W: number): string;

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, 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,11 +221,86 @@ 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
@@ -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,29 +325,36 @@ 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.state === "done") {
             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);
     }
 }
 // ---- the bounded-block flow contract (W7, W8, W10) ----
@@ -238,9 +366,10 @@ 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) {
@@ -252,12 +381,16 @@ function toolBlockBody(c, W) {
     const p = palette();
     const rows = c.state === "done"
         ? c.isError
-            ? errorBody(c.resultText, W)
-            : c.name.startsWith("shell")
-                ? shellTail(c.resultText, W)
-                : []
+            ? errorBody(c, W)
+            : c.name === "delegate"
+                ? delegateSettled(c, W)
+                : c.name.startsWith("shell")
+                    ? shellTail(c.resultText, W)
+                    : []
         : c.state === "running"
-            ? liveWindow(c.resultText, W)
+            ? c.name === "delegate"
+                ? delegateRunning(c, W)
+                : liveWindow(c.resultText, W)
             : c.state === "approval"
                 ? diffBody(c.diff, W)
                 : [];
@@ -297,9 +430,14 @@ 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.
+    const skipFirst = c.name === "shell" && /^exit \d+/.test(c.resultText) ? 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 +462,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). */
+ *  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) {
     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)
         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,17 +597,32 @@ 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. */
@@ -438,20 +647,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) {

package/dist/compositor.d.ts

@@ -41,6 +41,7 @@
  * line-mode bytes byte-for-byte (the e2e guards them).
  */
 import { type MenuItem } from "./editor.js";
+import { type ResumeMeta } from "./render.js";
 /** The cursor marker — an APC private sequence the focus component
  *  embeds at the edit position; the compositor strips it and moves
  *  relatively (it never reaches the terminal). */
@@ -86,6 +87,14 @@ export declare class Body {
         text: string;
         status: "pending" | "active" | "done";
     }[]): void;
+    /** The startup banner (W1): a LIVE cell — the tier re-derives per
+     *  frame (bannerLines with the CURRENT W and H), so a resize re-tiers
+     *  the art instead of re-folding frozen rows (a window below 40 cols
+     *  never paints the logo). W5: the resume metas ride the cell — the
+     *  list re-gates with the tier (BIG only) and re-times with the
+     *  frame. The inactive path keeps the historical bytes (no resume —
+     *  the pipe contract). */
+    banner(version: string, extensionsText: string, resume?: ResumeMeta[]): void;
     raw(lines: string[]): void;
     /** The last COMPLETE thinking block, for /think. */
     lastThinking(): string | null;
@@ -112,7 +121,10 @@ export declare class Body {
      *  top: external writes (the CLI's console.error CRLF) can shift the
      *  committed content down, and a formula-top ED0 would clear it. */
     onResize(): void;
-    setStatus(text: string): void;
+    /** W18: the status row's right-aligned hint is part of the status
+     *  state — the compacting row passes "esc to cancel" (the affordance
+     *  must survive repaints). */
+    setStatus(text: string, hint?: string | null): void;
     setTail(tail: string): void;
     showQuestion(question: string): void;
     clearQuestion(): void;
@@ -138,7 +150,9 @@ export declare class Body {
     /** Teardown — flush a pending frame, stop the timers. */
     close(): void;
     /** The live region's scalar — the unit tests assert the cap directly
-     *  (the e2e gate pins the screen consequence). */
+     *  (the e2e gate pins the screen consequence). W11: the formula's
+     *  blanks are join artifacts — the count includes them (they are real
+     *  screen rows), threaded against the previous sibling's OWN rows. */
     liveCount(): number;
     render(): void;
 }
@@ -152,7 +166,7 @@ export declare class Dock {
     enter(): void;
     exit(): void;
     onResize(): void;
-    setStatus(text: string): void;
+    setStatus(text: string, hint?: string | null): void;
     setTail(tail: string): void;
     showQuestion(question: string): void;
     clearQuestion(): void;