@vincemakes/kiso-tui-cells 0.16.3 → 0.16.5

package/dist/approval-panel.d.ts

@@ -262,7 +262,7 @@ export interface PanelView {
     /** The fix hint per speaker (the v8 design §3.5 table). */
     readonly hint?: string;
     /** The options-phase status-left text — the CLI knows the context
-     *  ("▸ run paused", the trust gate's line). */
+     *  ("⏸ run paused", the trust gate's line). */
     readonly statusText: string;
     /** The ALWAYS-verbose args — the full command/content/diff. */
     readonly args: PanelArgs;
@@ -385,12 +385,13 @@ export declare function panelBlockLayout(view: PanelView, phase: PanelPhase, cur
  */
 export declare function panelLead(view: PanelView, phase: PanelPhase, cursor: number): string;
 /** The lead's plain text — the editor's reflow width (the line must
- *  fit the lead + the box's walls). */
+ *  fit the lead + the drawn cursor's own cell — R2 retired the box and
+ *  its walls with it). */
 export declare function panelLeadPlain(view: PanelView, phase: PanelPhase, cursor: number): string;
 export declare function panelLeadWidth(view: PanelView, phase: PanelPhase, cursor: number): number;
 /** The status row's left text while the panel is up — the phase, not
  *  the CLI's painting status (the compositor derives it from the panel
- *  state; the "▸ run paused" etc. ride the options phase). */
+ *  state; the "⏸ run paused" etc. ride the options phase). */
 export declare function panelStatus(view: PanelView, phase: PanelPhase, cursor: number): string;
 /**
  * The status row's right-aligned hint — the v4 frame's line, verbatim.

package/dist/approval-panel.js

@@ -205,21 +205,52 @@ function panelRuleText(view) {
  * trade to make: each option owns a row, a narrow window cuts LABELS,
  * and every choice stays reachable at every width the product survives.
  *
- * The unselected row carries the block's gutter and a two-space indent;
- * the selected row is the shared selectionBar, which spends its own two
- * cells of frame. Both build their span against W−2, so the digit column
- * does not shift as the bar walks — a column that moves per row reads as
- * damage, which is the R2 picker's finding, inherited.
+ * The unselected row is a two-space indent; the selected row is the
+ * shared selectionBar, which spends its own two cells of frame. Both
+ * build their span against W−2, so the digit column does not shift as
+ * the bar walks — a column that moves per row reads as damage, which is
+ * the R2 picker's finding, inherited.
+ *
+ * R2 — two changes. The unselected row carried the block's │ gutter: a
+ * gutter SCOPES a verbatim block (the args keep theirs), and an option
+ * list is not verbatim, so it draws a boundary the block already has a
+ * rule for. And the cursor now carries `→` as well as the bar (design
+ * §7.5) — the bar is the loud signal, the arrow is the one that
+ * survives a strip, which is law 1.3's test applied to a selection.
  */
-function panelOptionRow(option, n, selected, W) {
+function panelOptionRow(option, n, selected, W, note, stop = 0) {
     const p = palette();
     const room = Math.max(1, W - 2);
-    const plain = ` ${n} ${option.label}`;
-    const text = cutLine(`${selected ? p.bold : ""}${escapeTerminal(plain)}${p.reset}`, room);
+    const plain = optionLead(option, n, selected);
+    const tail = note === undefined || note === ""
+        ? ""
+        : stop > 0
+            ? `${" ".repeat(Math.max(1, stop - visibleWidth(plain)))}${p.dim}${widthCut(escapeTerminal(note), Math.max(0, room - stop))}${p.reset}`
+            : `${p.dim}  — ${escapeTerminal(note)}${p.reset}`;
+    const text = cutLine(`${selected ? p.bold : ""}${escapeTerminal(plain)}${p.reset}${tail}`, room);
     if (!selected)
-        return `${p.dim}│${p.reset} ${text}`;
+        return ` ${text}`;
     return selectionBar(text, visibleWidth(text), W);
 }
+/** The row's left span, PLAIN — written once so the column arithmetic
+ *  and the row cannot disagree about how wide it is. */
+function optionLead(option, n, selected) {
+    return `${selected ? "→" : " "} ${n} ${option.label}`;
+}
+/** R2 — the safer list's `why` column. Same rule as the ask panel's
+ *  descriptions: computed over the WHOLE list so the column belongs to
+ *  the list, and 0 (the em-dash fallback) when there is no room for it. */
+function saferStop(options, W) {
+    // an empty list has no column to compute — `Math.max()` of nothing is
+    // -Infinity, which would sail through both guards below and return a
+    // negative stop
+    if (options.length === 0)
+        return 0;
+    const room = Math.max(1, W - 2);
+    const widest = Math.max(...options.map((o, i) => visibleWidth(optionLead({ kind: "allow", label: o.command }, i + 1, false))));
+    const stop = widest + 2;
+    return stop > Math.floor(room / 2) || room - stop < 18 ? 0 : stop;
+}
 /** The block's rows — EXACTLY the preview's frame shape, the gutter at
  *  the left edge (the preview's two-space mock indent is its own
  *  styling; the real rows sit at column 1, like every tool cell).
@@ -229,15 +260,27 @@ export function panelBlockRows(view, phase, cursor, W, maxRows, note, safer) {
 }
 export function panelBlockLayout(view, phase, cursor, W, maxRows, note, safer) {
     const p = palette();
-    const gutter = `${p.dim}│${p.reset} `;
+    // R2: the block's own PROSE rows (the risk line, the safer-options
+    // note, the affordance) take the two-space indent every other row in
+    // the block takes. The │ gutter stays where it means something — on
+    // the args, which are verbatim, and which is the whole distinction:
+    // a gutter SCOPES a quotation, it is not a left edge for a panel.
+    const gutter = "  ";
     const rows = [];
-    rows.push(`${gutter}${cutLine(panelRuleText(view), Math.max(1, W - 2))}`);
-    rows.push(`${gutter}${cutLine(`${p.bold}${escapeTerminal(view.title)}${p.reset}`, Math.max(1, W - 2))}`);
+    // R2 — the block opens and closes with the SAME dashed rule the
+    // composer uses. It used to open with the │ gutter, divide with a
+    // ─ run and close with a └ rule: three edge vocabularies inside one
+    // block, and none of them the composer's. A rule SEPARATES, a gutter
+    // SCOPES — the args keep their gutter because they are a verbatim
+    // block; everything that was drawing a boundary is one rule now.
+    rows.push(`${p.dim}${"\u2500".repeat(Math.max(0, W))}${p.reset}`);
+    rows.push(`  ${cutLine(panelRuleText(view), Math.max(1, W - 2))}`);
+    rows.push(`  ${cutLine(`${p.bold}${escapeTerminal(view.title)}${p.reset}`, Math.max(1, W - 2))}`);
     // TUI2-R1.5 ⑤ (VD-11): the divider is a LABEL, not a design note. "the
     // full args — never truncated" is a sentence about the implementation,
     // addressed to whoever was building the panel; the human reading it
     // during an approval wants to know what the block below is.
-    rows.push(`${cutLine(`${p.dim}─ args (full) ─${p.reset}`, Math.max(1, W - 2))}`);
+    rows.push("");
     // the args — the bounded block's body: fold, then cap. The └ cut is
     // ONE row (the W20 discipline): when the args exceed the budget, one
     // notice row carries the count and where the rest is (the event log).
@@ -252,7 +295,12 @@ export function panelBlockLayout(view, phase, cursor, W, maxRows, note, safer) {
     // they can also read in the event log is worth less than the row that
     // carries the choice. The args keep a floor of one row so the block
     // never claims to show what it is asking about and then shows nothing.
-    const chrome = 5 +
+    const chrome = 
+    // R2: SIX rows of frame, not five — the block opens with a rule now
+    // as well as closing with one, and the divider row became a blank.
+    // The count is the same shape it always was: every row the block
+    // spends on itself before the args and the list share what is left.
+    6 +
         (phase === "options" && note !== undefined ? 1 : 0) +
         (view.riskHint !== undefined && view.riskHint !== "" ? 1 : 0) +
         (phase === "asking" ? 1 : 0) +
@@ -297,9 +345,13 @@ export function panelBlockLayout(view, phase, cursor, W, maxRows, note, safer) {
     // out of would be a trap.
     if (phase === "safer" && safer !== undefined) {
         offset = rows.length;
+        // R2: the `why` takes a COLUMN rather than running on after an em
+        // dash — the commands are what is being chosen between, and they
+        // only scan when they all start and end at the same columns.
+        const stop = saferStop(safer.options, W);
         for (let i = 0; i < safer.options.length; i += 1) {
             const o = safer.options[i];
-            rows.push(panelOptionRow({ kind: "allow", label: `${o.command}  — ${o.why}` }, i + 1, i === safer.cursor, W));
+            rows.push(panelOptionRow({ kind: "allow", label: o.command }, i + 1, i === safer.cursor, W, o.why, stop));
         }
         rows.push(panelOptionRow({ kind: "deny", label: SAFER_BACK }, safer.options.length + 1, safer.cursor === safer.options.length, W));
     }
@@ -336,7 +388,7 @@ export function panelBlockLayout(view, phase, cursor, W, maxRows, note, safer) {
     // else in the product, so a CAPPED panel emitted two elbow rows in a
     // row meaning entirely different things. The rule reads as an edge,
     // and the cut notice above it reads as a notice.
-    rows.push(`${p.dim}\u2514${"\u2500".repeat(Math.max(0, W - 1))}${p.reset}`);
+    rows.push(`${p.dim}${"\u2500".repeat(Math.max(0, W))}${p.reset}`);
     return { rows, ...layout };
 }
 /**
@@ -354,13 +406,24 @@ export function panelLead(view, phase, cursor) {
     const p = palette();
     if (phase === "amend")
         return `${p.dim}amend› ${p.reset}`;
-    return `${p.dim}${PANEL_IDLE_LEAD}${p.reset}`;
+    // R2: an EMPTY lead emits no bytes at all — `dim + reset` around
+    // nothing is eight bytes on the composer row of every frame a panel
+    // is up, and the row it wraps has no content to style.
+    return PANEL_IDLE_LEAD === "" ? "" : `${p.dim}${PANEL_IDLE_LEAD}${p.reset}`;
 }
-/** The composer's lead while a selection list owns the keys — the quiet
- *  chevron, not a prompt for input that is not being asked for. */
-const PANEL_IDLE_LEAD = "› ";
+/** The composer's lead while a selection list owns the keys.
+ *
+ *  R2: EMPTY. It was a quiet chevron, on the argument that it is "not a
+ *  prompt for input that is not being asked for" — but the composer
+ *  dropped its own chevron this round (the cursor sits at column one),
+ *  so the panel would have been the one surface reintroducing the glyph
+ *  the rest of the product just removed. The NAMED leads stay: `amend›`
+ *  and the pick panel's `1-4>` say where the keystrokes go, which is
+ *  information rather than decoration. */
+const PANEL_IDLE_LEAD = "";
 /** The lead's plain text — the editor's reflow width (the line must
- *  fit the lead + the box's walls). */
+ *  fit the lead + the drawn cursor's own cell — R2 retired the box and
+ *  its walls with it). */
 export function panelLeadPlain(view, phase, cursor) {
     return phase === "amend" ? "amend› " : PANEL_IDLE_LEAD;
 }
@@ -369,20 +432,25 @@ export function panelLeadWidth(view, phase, cursor) {
 }
 /** The status row's left text while the panel is up — the phase, not
  *  the CLI's painting status (the compositor derives it from the panel
- *  state; the "▸ run paused" etc. ride the options phase). */
+ *  state; the "⏸ run paused" etc. ride the options phase). */
+// R2 (design §4, the ⏸ ruling): a panel that is WAITING ON A HUMAN says
+// so with the one mark that means it. `▸` is the checklist's "the
+// current one" — a mark meaning two things is worse than two marks
+// (law 4.2), and the thing this row has to convey is not "here" but
+// "nothing moves until you answer".
 export function panelStatus(view, phase, cursor) {
     // TUI2-R3v2 ③: the frames' own words — what the panel is doing, and
     // (in the safer list) what it did.
     if (phase === "asking")
-        return "\u25b8 asked the model for safer options";
+        return "\u23f8 asked the model for safer options";
     if (phase === "safer")
-        return "\u25b8 asked the model for safer options";
+        return "\u23f8 asked the model for safer options";
     // TUI2-R3v2 ①: the typed phase says where the words GO. "the words ride
     // the verdict" described the plumbing to whoever wrote it; the human
     // typing needs to know the model will read this and answer with a new
     // call — which is what the v4 frame says, in those words.
     if (phase === "amend")
-        return "▸ your note goes to the model — it will propose a new call";
+        return "⏸ your note goes to the model — it will propose a new call";
     return view.statusText;
 }
 /**
@@ -425,32 +493,60 @@ export function panelAffordance(view, phase, cursor, safer) {
 export function pickBlockRows(view, state, W, maxRows) {
     const p = palette();
     const spec = view.pick;
-    const gutter = `${p.dim}\u2502${p.reset} `;
-    const rows = [];
+    const rows = [`${p.dim}${"\u2500".repeat(Math.max(0, W))}${p.reset}`]; // R2: the same rule the composer and the other panels use
     const room = Math.max(1, W - 2);
-    rows.push(`${gutter}${cutLine(`${p.bold}${escapeTerminal(spec.header.split(" \u2014 ")[0] ?? spec.header)}${p.reset}${p.dim}${escapeTerminal(spec.header.slice((spec.header.split(" \u2014 ")[0] ?? "").length))}${p.reset}`, room)}`);
+    rows.push(`  ${cutLine(`${p.bold}${escapeTerminal(spec.header.split(" \u2014 ")[0] ?? spec.header)}${p.reset}${p.dim}${escapeTerminal(spec.header.slice((spec.header.split(" \u2014 ")[0] ?? "").length))}${p.reset}`, room)}`);
     if (spec.options.length === 0) {
         // the honest empty state \u2014 the caller's own copy, verbatim
-        rows.push(`${gutter}${cutLine(`${p.dim} ${escapeTerminal(spec.emptyNote ?? "no options")}${p.reset}`, room)}`);
+        rows.push(`  ${cutLine(`${p.dim} ${escapeTerminal(spec.emptyNote ?? "no options")}${p.reset}`, room)}`);
     }
     else {
-        // the budget: the header, the t row, the affordance and the rule
-        const budget = Math.max(1, maxRows - 4);
+        // the budget: the OPENING rule, the header, the t row, the
+        // affordance and the CLOSING rule — five, not four. R2 added the
+        // opening rule to this block and bumped the ask panel (5→6) and the
+        // approval panel (5→6) to pay for it, and missed this one: the
+        // block ran two rows over its budget, and two rows of committed
+        // content were scrolled irreversibly into the scrollback every time
+        // `/model` opened on a tight screen. The `+N more` row is a sixth
+        // when it appears, so it is paid for too.
+        const chrome = 5 + (spec.options.length > Math.min(Math.max(1, maxRows - 5), PICK_MAX) ? 1 : 0);
+        const budget = Math.max(1, maxRows - chrome);
         const shown = spec.options.slice(0, Math.min(budget, PICK_MAX));
+        // R2: the note takes a COLUMN, not three spaces after a label of
+        // whatever length this row happened to have, and the cursor row
+        // wears the bar and the arrow like every other list in the
+        // product. This panel was the last one still saying "selected"
+        // with bold alone.
+        const lead = (o, i, cursor) => `${cursor ? "\u2192" : " "} ${i + 1} ${escapeTerminal(o.label)}`;
+        const widest = Math.max(...shown.map((o, i) => visibleWidth(lead(o, i, false))));
+        const stop = shown.some((o) => o.note !== undefined) && widest + 2 <= Math.floor(room / 2) && room - widest - 2 >= 18 ? widest + 2 : 0;
         for (let i = 0; i < shown.length; i += 1) {
             const o = shown[i];
             const mark = i === state.cursor && state.phase === "options";
-            const head = `${mark ? p.bold : ""} ${i + 1} ${escapeTerminal(o.label)}${mark ? p.reset : ""}`;
-            const note = o.note === undefined ? "" : `${p.dim}   ${escapeTerminal(o.note)}${p.reset}`;
-            rows.push(`${gutter}${cutLine(`${head}${note}`, room)}`);
+            const plain = lead(o, i, mark);
+            const head = `${mark ? p.bold : ""}${plain}${mark ? p.reset : ""}`;
+            const note = o.note === undefined
+                ? ""
+                : stop > 0
+                    ? `${" ".repeat(Math.max(1, stop - visibleWidth(plain)))}${p.dim}${widthCut(escapeTerminal(o.note), Math.max(0, room - stop))}${p.reset}`
+                    : `${p.dim}   ${escapeTerminal(o.note)}${p.reset}`;
+            const text = cutLine(`${head}${note}`, room);
+            // ONE space, like the approval and ask panels: the bar spends a
+            // leading cell of its own, so a two-space unselected prefix
+            // moves the digit column by one as the cursor walks — the exact
+            // "a column that moves per row reads as damage" this file
+            // quotes twice as its standard.
+            rows.push(mark ? selectionBar(text, visibleWidth(text), W) : ` ${text}`);
         }
         if (spec.options.length > shown.length) {
-            rows.push(`${gutter}${cutLine(`${p.dim} \u2514 +${spec.options.length - shown.length} more \u2014 /model <name> takes any of them${p.reset}`, room)}`);
+            rows.push(`  ${cutLine(`${p.dim} \u2514 +${spec.options.length - shown.length} more \u2014 /model <name> takes any of them${p.reset}`, room)}`);
         }
     }
-    rows.push(`${gutter}${cutLine(`${state.phase === "custom" ? p.bold : ""} t ${p.reset}${p.dim}${escapeTerminal(spec.typeHint)}${p.reset}`, room)}`);
-    rows.push(`${gutter}${p.dim}${cutLine(pickAffordance(state), room)}${p.reset}`);
-    rows.push(`${p.dim}\u2514${"\u2500".repeat(Math.max(0, W - 1))}${p.reset}`);
+    const typing = state.phase === "custom";
+    const tText = cutLine(`${typing ? p.bold : ""}${typing ? "\u2192" : " "} t ${p.reset}${p.dim}${escapeTerminal(spec.typeHint)}${p.reset}`, room);
+    rows.push(typing ? selectionBar(tText, visibleWidth(tText), W) : ` ${tText}`);
+    rows.push(`  ${p.dim}${cutLine(pickAffordance(state), room)}${p.reset}`);
+    rows.push(`${p.dim}${"\u2500".repeat(Math.max(0, W))}${p.reset}`);
     return rows;
 }
 /** The digits are the keys, so the list the panel offers is bounded by

package/dist/components.d.ts

@@ -378,20 +378,27 @@ export declare function selectionBar(styled: string, visible: number, W: number)
 /**
  * R2 — the composer's rails, and the ONE edge vocabulary.
  *
- * W6 turned two ╌ dotted rows into a rounded box, reasoning that "the
- * box already says input lives here". That is reversed here, and the
- * reason is not taste: a rule is a DELIMITER and a box is a CONTAINER,
- * and the screen was carrying six edge vocabularies at once (this box,
- * the panel's │ gutter and └── tail, the diff gutter, the quote's ▏, the
- * table's ├─┼─┤ rails, the markdown rule's ─). One dashed rule replaces
- * the ones that separate; the │ gutter survives where it SCOPES.
+ * R3 (owner, 2026-08-27): the rule is a SOLID hairline (`\u2500`), not
+ * the dashed `\u254c` R2 shipped, and it is solid EVERYWHERE — the
+ * composer, every panel's open and close, the band headers and the
+ * markdown rule. One line, one weight, no exceptions to remember.
+ *
+ * W6 turned two \u254c dotted rows into a rounded box, reasoning that
+ * "the box already says input lives here". That is reversed here, and
+ * the reason is not taste: a rule is a DELIMITER and a box is a
+ * CONTAINER, and the screen was carrying six edge vocabularies at once
+ * (this box, the panel's \u2502 gutter and \u2514\u2500\u2500 tail, the
+ * diff gutter, the quote's \u258f, the table's rails, the markdown
+ * rule). ONE rule replaces the ones that SEPARATE; the \u2502 gutter
+ * survives where it SCOPES.
  *
  * Row-neutral by construction: CHROME_ROWS is still 4, so every gate
- * keyed on H − 4 is untouched, and the input row gains the two columns
- * the walls were taking.
+ * keyed on H \u2212 4 is untouched, and the input row gains the two
+ * columns the walls were taking.
  */
 export declare function boxTop(W: number): string;
-/** W6 — the box: the chrome's bottom rail. */
+/** R2 — the same rule below. Named for its POSITION, not its shape, so
+ *  the compositor's two call sites did not have to move. */
 export declare function boxBottom(W: number): string;
 /** The terminal label + rhythm gap (the pipe path's v2c bytes — the
  *  exact render the passthrough needs). */

package/dist/components.js

@@ -22,7 +22,7 @@ import { displayWidth, visibleWidth } from "./width.js";
 // KEY_BINDINGS). strings.js imports only render/width here, so this edge
 // adds no cycle.
 import { displayVerb } from "./strings.js";
-import { bannerLines, escapeTerminal, foldThinking, foldResult, renderTerminalGap, renderToolSummary, toolTarget, kUnit, palette, } from "./render.js";
+import { bannerLines, breathFrame, escapeTerminal, foldThinking, foldResult, renderTerminalGap, renderToolSummary, toolTarget, kUnit, palette, } from "./render.js";
 // TUI2-MD: the markdown renderer's surface reaches the tui through this
 // module (the tui's components shim re-exports it) — one import edge,
 // and it points one way: md.ts measures with the width authority, never
@@ -171,12 +171,17 @@ export function cellComponent(cell) {
  * the ▍ rail and the indent are retired — the rail's stated pipe
  * fallback was theoretical redundancy: the CLI's pipe path is the
  * line-mode "you>" form and never renders UserMessage). The chip folds
- * the text at W−2 (the side pads), then pads EVERY row to the longest
- * row's DISPLAY width + one space each side, flush left: 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.
+ * the text at W−2 (the side pads) and pads every row to the FULL width.
+ *
+ * R2 — law 1.6's recorded reversal. This used to size the block to its
+ * longest row, on the argument that "a short message like /think would
+ * paint a bar across the terminal". That optimises the degenerate case
+ * at the cost of every real message, which is a paragraph and reads as
+ * a block only when the block has an edge. The `/think` case is the
+ * accepted price, and it is recorded as such in design.md §1.6.
+ *
+ * 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.
  * 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
@@ -226,11 +231,18 @@ class UserMessage {
                 content.push(row);
             }
         }
+        // R2 (law 1.6's recorded reversal): the band is FULL WIDTH. It was
+        // sized to its longest row, on the argument that a one-word turn
+        // like `/think` would otherwise paint a bar across the terminal —
+        // which optimises the degenerate case at the cost of every real
+        // message. The human's words are the one surface that gets the
+        // whole row.
+        //
         // displayWidth stays the padding authority (never `length`): a CJK
         // row is two cells per character and pads by cells.
-        const inner = content.length === 0 ? 0 : Math.max(...content.map((r) => displayWidth(r)));
+        const inner = chipW;
         for (const row of content) {
-            rows.push(`${p.rv} ${row}${" ".repeat(inner - displayWidth(row))} ${p.rvEnd}`);
+            rows.push(`${p.rv} ${row}${" ".repeat(Math.max(0, inner - displayWidth(row)))} ${p.rvEnd}`);
         }
         if (!truncated)
             return rows;
@@ -275,19 +287,57 @@ class ThinkingFold {
         this.cell = cell;
     }
     render(W, _ctx) {
+        const p = palette();
         const block = this.cell.text;
         const trimmed = escapeTerminal(block.trim());
-        // the SHORT branch is width-aware TOO: the ≤100 short-circuit was
-        // W-blind — a short block at a narrow width returned the line
-        // 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}`];
-        const suffix = ` (${block.length} chars · /think)`;
-        const slice = Math.max(1, W - 1 - suffix.length);
-        return [`${palette().dim}⋯${widthCut(trimmed, slice)}${suffix}${palette().reset}`];
+        // R2 (owner, 2026-08-27) — three changes, each independent.
+        //
+        // ITALIC marks the row as not-the-answer without spending a colour,
+        // on the same argument that admitted italic to the alphabet.
+        //
+        // The cut lands on a WORD. It used to cut on a byte, so the fold
+        // read as `…the user's h` and the reader's eye had to reassemble a
+        // word it already knew.
+        //
+        // The affordance moves to the RIGHT EDGE, so the left edge of every
+        // row on screen is content. The char count goes with the move: it
+        // told the reader nothing they could act on, and the row it was
+        // crowding is the one thing this cell says.
+        //
+        // The ≤100 short-circuit stays width-aware: a short block at a
+        // narrow width returned the line UNFOLDED and tripped invariant ①.
+        // DC-15: the affordance is DROPPED, not squeezed. `room` floored at
+        // 1 while `pad` floored at 1 independently, so a narrow terminal
+        // produced 2 + cut + pad + 6 = 11 cells no matter what W was — and
+        // invariant ① does not truncate, it THROWS. Measured 11 cells at
+        // every W ≤ 10. Below the width where the tail and one word of
+        // content can both stand, the row is the CONTENT: a cell that
+        // cannot hold the key's name has nothing to say about the key.
+        const tail = "/think";
+        const room = W - 2 - tail.length - 1;
+        // the belt: cutLine is SGR-aware and single-row, so the invariant
+        // holds by CONSTRUCTION at every width rather than by arithmetic
+        // that has to be re-proved every time a span moves.
+        if (room < 2)
+            return [cutLine(`${p.dim}⋯ ${p.italic}${wordCut(trimmed, Math.max(1, W - 2))}${p.italicEnd}${p.reset}`, W)];
+        const cut = wordCut(trimmed, room);
+        const body = `⋯ ${p.italic}${cut}${p.italicEnd}`;
+        const pad = Math.max(1, W - 2 - visibleWidth(cut) - tail.length);
+        return [cutLine(`${p.dim}${body}${" ".repeat(pad)}${tail}${p.reset}`, W)];
     }
 }
+/** R2 — cut at a word boundary, with the honest ellipsis. widthCut cuts
+ *  at a cell, which is right for verbatim output and wrong for prose:
+ *  the reader has to reassemble "h" into "home". Falls back to the cell
+ *  cut when the first word alone overruns, because a row that cannot
+ *  hold one word has no boundary to find. */
+function wordCut(text, room) {
+    if (visibleWidth(text) <= room)
+        return text;
+    const hard = widthCut(text, Math.max(1, room - 1));
+    const at = hard.lastIndexOf(" ");
+    return `${at > room / 3 ? hard.slice(0, at) : hard}\u2026`;
+}
 /** 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,
@@ -508,7 +558,7 @@ class ToolExecution {
             // list of calls, not a body of output.
             const r = c.rolled;
             const counts = exploreCounts(parts);
-            const head = `${p.bold}✓${p.reset} explored ${p.bold}${counts}${p.reset}`;
+            const head = `  explored ${p.bold}${counts}${p.reset}`; // R2: no tick
             const tail = ` (${r.elapsed}s)`;
             const room = W - visibleWidth(head) - tail.length;
             const affordance = " · ctrl+r lists them";
@@ -523,7 +573,7 @@ class ToolExecution {
             // W15 expand history — the head's commit captures it).
             const r = c.rolled;
             const noun = ROLLUP_NOUN[c.name] ?? "calls";
-            const out = gutterCut(`${p.bold}✓${p.reset} `, `${verbCol} ${r.count} ${noun} (${kUnit(r.lines)} lines, ${r.elapsed}s)`, W);
+            const out = gutterCut("  ", `${verbCol} ${r.count} ${noun} (${kUnit(r.lines)} lines, ${r.elapsed}s)`, W); // R2: no tick
             const shown = r.targets.slice(0, 3);
             if (shown.length > 0)
                 out.push(`  ${p.dim}${CUT_ROW}${escapeTerminal(shown.join(" · "))}${p.reset}`);
@@ -541,7 +591,7 @@ class ToolExecution {
             // names the decider; a human denial (no decidedBy) has no tail.
             if (c.reason !== null) {
                 const by = attribution(c);
-                const out = gutterCut(`${p.red}✗${p.reset} `, `${p.red}${escapeTerminal(`${c.name} ${toolTargetOf(c)}`)} (${escapeTerminal(c.reason)}${by})${p.reset}`, W);
+                const out = gutterCut("  ", `${p.red}${escapeTerminal(`${c.name} ${toolTargetOf(c)}`)} (${escapeTerminal(c.reason)}${by})${p.reset}`, W);
                 out.push(...toolBlockBody(c, W));
                 return out;
             }
@@ -578,7 +628,14 @@ class ToolExecution {
             // the semantics. TUI2-R1.5 pin 4: and the parts give way in a
             // PINNED ORDER, rather than whichever happened to be last.
             const text = settledHeadText(verbCol, escapeTerminal(toolTargetOf(c)), meta, approvedBy, elapsed, W - 2 - (hidden === null ? 0 : SUFFIX_MIN));
-            const out = c.isError ? [`${p.red}✗${p.reset} ${p.red}${text}${p.reset}`] : [`${p.bold}✓${p.reset} ${text}`];
+            // R2 (owner, 2026-08-27): no tick, no cross. A symbol earns its
+            // cell by carrying a fact the words do not, and a row that
+            // already says `exit 0` does not need one more thing saying it
+            // went fine. The gutter is two spaces; the OUTCOME lives in the
+            // metadata, in words, which is also the only form that survives
+            // a pipe with the colour stripped. A failure keeps its colour
+            // AND its words — see settledMeta.
+            const out = c.isError ? [`  ${p.red}${text}${p.reset}`] : [`  ${text}`];
             out[0] = appendSuffix(out[0], expandSuffix(hidden, W - visibleWidth(out[0])));
             out.push(...toolBlockBody(c, W));
             return out;
@@ -600,7 +657,14 @@ class ToolExecution {
             // leaves; the duration then rides the row, always legible.
             const elapsed = c.startedAt !== null ? Math.max(1, Math.round((ctx.now - c.startedAt) / 1000)) : 1;
             const dur = ` · ${elapsed}s`;
-            const out = gutterCut(`${p.bold}${SPINNER[ctx.spinnerI % SPINNER.length]}${p.reset} `, `${verbCol} ${liveTarget(c)}`, Math.max(4, W - dur.length));
+            // R3 (design §5.2): a running command BREATHES — one glyph, seven
+            // greys, bottoming out on the ground's dim token (§2.2 applies
+            // mid-animation, not just at rest). The quadrant spinner it
+            // replaces ROTATED, which §5.3 forbids for a call whose duration
+            // cannot be predicted: a turning mark implies progress the
+            // product does not have. With no ground the breath freezes to a
+            // static `●` and says the same thing more quietly.
+            const out = gutterCut(`${breathFrame(ctx.spinnerI)} `, `${verbCol} ${liveTarget(c)}`, Math.max(4, W - dur.length));
             out[0] = `${out[0]}${p.dim}${dur}${p.reset}`;
             out.push(...toolBlockBody(c, W));
             return out;
@@ -912,26 +976,26 @@ export function turnFold(t, W) {
     const meta = parts.join(" · ");
     const words = escapeTerminal(t.words);
     if (words === "") {
-        const row = `${p.bold}▞${p.reset} ${meta}`;
-        return visibleWidth(row) <= W ? [row] : [`${p.bold}▞${p.reset} ${widthCut(meta, Math.max(1, W - 3))}…`]; // a wordless turn folds to the W14 shape
+        const row = `${p.bold}✦${p.reset} ${meta}`;
+        return visibleWidth(row) <= W ? [row] : [`${p.bold}✦${p.reset} ${widthCut(meta, Math.max(1, W - 3))}…`]; // a wordless turn folds to the W14 shape
     }
     // A9 (ruling R2, mock A): the user chip rides the fold — the human's
     // words LEAD the one line, the same SGR-7 bracket as the live user
     // row (#16f, side pads included). The words take the fold's width
-    // budget: W − the gutter ("▞ " = 2) − the join (" · " = 3) − the
+    // budget: W − the gutter ("✦ " = 2) − the join (" · " = 3) − the
     // chip's side pads (2) − the cut-tail reserve (1, the "…") − the
     // metadata's own width — the metadata survives, the words width-cut
     // at the end with the honest "…" (the "…" alone is the honest floor:
     // the words were there, cut).
-    const budget = Math.max(0, W - visibleWidth(`▞ ${meta}`) - 6);
+    const budget = Math.max(0, W - visibleWidth(`✦ ${meta}`) - 6);
     const cut = visibleWidth(words) > budget ? `${widthCut(words, budget)}…` : words;
-    const row = `${p.bold}▞${p.reset} ${p.rv} ${cut} ${p.rvEnd} · ${meta}`;
+    const row = `${p.bold}✦${p.reset} ${p.rv} ${cut} ${p.rvEnd} · ${meta}`;
     if (visibleWidth(row) <= W)
         return [row];
     // the last resort: the METADATA gives way — the words hold their
     // budget, the meta cuts with the honest "…"; invariant ① never trips
     // at ANY width (a degenerate W's fold is a cut, never a crash).
-    return [`${p.bold}▞${p.reset} ${p.rv} ${cut} ${p.rvEnd} · ${widthCut(meta, Math.max(1, W - 8 - visibleWidth(cut)))}…`];
+    return [`${p.bold}✦${p.reset} ${p.rv} ${cut} ${p.rvEnd} · ${widthCut(meta, Math.max(1, W - 8 - visibleWidth(cut)))}…`];
 }
 // ---- the bounded-block flow contract (W7, W8, W10) ----
 /** The caps — screen rows counted AFTER the fold, at the current width
@@ -1288,8 +1352,11 @@ class Banner {
     }
     render(W, ctx) {
         const p = palette();
-        const rows = bannerLines(W, ctx.height, this.cell.version, this.cell.extensionsText, this.cell.resume, ctx.now, this.cell.meta);
-        return rows.map((r) => `${p.dim}${r}${p.reset}`);
+        // R2: NO blanket dim. bannerLines styles itself — the labels are
+        // dim, the values are ink — and wrapping the whole thing in dim
+        // made the answers as faint as the questions.
+        void p;
+        return bannerLines(W, ctx.height, this.cell.version, this.cell.extensionsText, this.cell.resume, ctx.now, this.cell.meta);
     }
 }
 /** W20 — the task block's fixed-window height: the whole live block
@@ -1373,7 +1440,7 @@ class Checklist {
         const fixed = done
             ? `task done · ${plural(items.length, "item")} · ${formatDuration(durationSeconds)}`
             : `task · ${plural(items.length, "item")} · ${active.length} active · ${doneCount} done`;
-        const header = `${p.bold}▞${p.reset} ${escapeTerminal(fixed + tail)}`;
+        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
@@ -1475,30 +1542,48 @@ export function widthCut(text, max) {
  */
 export function selectionBar(styled, visible, W) {
     const p = palette();
-    const inner = styled.replaceAll(p.reset, `${p.reset}${p.rv}`);
+    // R2 (design §2.1 — nothing dim ever sits on the wash): the bar IS a
+    // wash. A dim span inside it renders grey-on-grey — 3.91:1 on the
+    // light ground, under the 4.5 floor — and the dim spans are exactly
+    // the descriptions and the metadata, i.e. the half of the row the
+    // selection was supposed to help you read. Dim is dropped INSIDE the
+    // bar and nowhere else; the same row unselected keeps it.
+    const inner = (p.dim === "" ? styled : styled.replaceAll(p.dim, "")).replaceAll(p.reset, `${p.reset}${p.rv}`);
     return `${p.rv} ${inner}${" ".repeat(Math.max(0, W - visible - 2))} ${p.rvEnd}`;
 }
 /**
  * R2 — the composer's rails, and the ONE edge vocabulary.
  *
- * W6 turned two ╌ dotted rows into a rounded box, reasoning that "the
- * box already says input lives here". That is reversed here, and the
- * reason is not taste: a rule is a DELIMITER and a box is a CONTAINER,
- * and the screen was carrying six edge vocabularies at once (this box,
- * the panel's │ gutter and └── tail, the diff gutter, the quote's ▏, the
- * table's ├─┼─┤ rails, the markdown rule's ─). One dashed rule replaces
- * the ones that separate; the │ gutter survives where it SCOPES.
+ * R3 (owner, 2026-08-27): the rule is a SOLID hairline (`\u2500`), not
+ * the dashed `\u254c` R2 shipped, and it is solid EVERYWHERE — the
+ * composer, every panel's open and close, the band headers and the
+ * markdown rule. One line, one weight, no exceptions to remember.
+ *
+ * W6 turned two \u254c dotted rows into a rounded box, reasoning that
+ * "the box already says input lives here". That is reversed here, and
+ * the reason is not taste: a rule is a DELIMITER and a box is a
+ * CONTAINER, and the screen was carrying six edge vocabularies at once
+ * (this box, the panel's \u2502 gutter and \u2514\u2500\u2500 tail, the
+ * diff gutter, the quote's \u258f, the table's rails, the markdown
+ * rule). ONE rule replaces the ones that SEPARATE; the \u2502 gutter
+ * survives where it SCOPES.
  *
  * Row-neutral by construction: CHROME_ROWS is still 4, so every gate
- * keyed on H − 4 is untouched, and the input row gains the two columns
- * the walls were taking.
+ * keyed on H \u2212 4 is untouched, and the input row gains the two
+ * columns the walls were taking.
  */
 export function boxTop(W) {
-    return `\x1b[2m\u256d${"\u2500".repeat(Math.max(0, W - 2))}\u256e\x1b[0m`;
+    // R3: the palette's dim, not a hardcoded SGR 2 — `dim` is an absolute
+    // grey once the ground is known, and a rail that hardcodes the
+    // attribute would be the one chrome row not obeying the table.
+    const p = palette();
+    return `${p.dim}${"\u2500".repeat(Math.max(0, W))}${p.reset}`;
 }
-/** W6 — the box: the chrome's bottom rail. */
+/** R2 — the same rule below. Named for its POSITION, not its shape, so
+ *  the compositor's two call sites did not have to move. */
 export function boxBottom(W) {
-    return `\x1b[2m\u2570${"\u2500".repeat(Math.max(0, W - 2))}\u256f\x1b[0m`;
+    const p = palette();
+    return `${p.dim}${"\u2500".repeat(Math.max(0, W))}${p.reset}`;
 }
 /** The terminal label + rhythm gap (the pipe path's v2c bytes — the
  *  exact render the passthrough needs). */

package/dist/index.d.ts

@@ -14,7 +14,7 @@ export { panelAffordance, panelBlockRows, panelLead, panelLeadPlain, panelLeadWi
 export { interactivePrompt, projectTrustRows, projectTrustView, projectUntrustedNote, uncertainView, type TrustArtifact, } from "./strings.js";
 export { extensionsBannerText, helpRows, unansweredAskView, type BannerExtension } from "./strings.js";
 export { displayVerb } from "./strings.js";
-export { bannerLines, COLOR_OFF, COLOR_DARK, COLOR_LIGHT, COLOR_NEUTRAL, COLOR_ON, currentGround, setGround, escapeTerminal, foldResult, foldThinking, kUnit, palette, relativeTime, renderResumeList, renderTerminalGap, renderToolSummary, TAGLINE, toolTarget, truncateRow, type Palette, type ResumeMeta, } from "./render.js";
+export { bannerLines, COLOR_OFF, COLOR_DARK, COLOR_LIGHT, COLOR_NEUTRAL, COLOR_ON, currentGround, setGround, escapeTerminal, foldResult, foldThinking, kUnit, palette, relativeTime, renderResumeList, MOTION_FRAMES, TWINKLE, breathFrame, twinkleFrame, renderTerminalGap, renderToolSummary, TAGLINE, toolTarget, truncateRow, type Palette, type ResumeMeta, } from "./render.js";
 /** DC-3 — the ground: is the terminal light or dark. Pure; see the
  *  module comment for why `unknown` is a result and not a failure. */
 export { groundFrom, parseOscColor, relativeLuminance, resolveGround, type Ground, type GroundInputs, type Rgb } from "./ground.js";

package/dist/index.js

@@ -28,7 +28,7 @@ export { extensionsBannerText, helpRows, unansweredAskView } from "./strings.js"
 // TUI2-R2pre ④: the ONE display-verb table — the screen names the act,
 // the tool table names the call.
 export { displayVerb } from "./strings.js";
-export { bannerLines, COLOR_OFF, COLOR_DARK, COLOR_LIGHT, COLOR_NEUTRAL, COLOR_ON, currentGround, setGround, escapeTerminal, foldResult, foldThinking, kUnit, palette, relativeTime, renderResumeList, renderTerminalGap, renderToolSummary, TAGLINE, toolTarget, truncateRow, } from "./render.js";
+export { bannerLines, COLOR_OFF, COLOR_DARK, COLOR_LIGHT, COLOR_NEUTRAL, COLOR_ON, currentGround, setGround, escapeTerminal, foldResult, foldThinking, kUnit, palette, relativeTime, renderResumeList, MOTION_FRAMES, TWINKLE, breathFrame, twinkleFrame, renderTerminalGap, renderToolSummary, TAGLINE, toolTarget, truncateRow, } from "./render.js";
 /** DC-3 — the ground: is the terminal light or dark. Pure; see the
  *  module comment for why `unknown` is a result and not a failure. */
 export { groundFrom, parseOscColor, relativeLuminance, resolveGround } from "./ground.js";

package/dist/md.js

@@ -258,7 +258,7 @@ function blockBody(b, W) {
             // R2: the dashed rule, at the block's own width. The 28 was a
             // guess that read as a short line rather than a divider, and ─
             // belonged to the box vocabulary this round is collapsing.
-            return [`${p.dim}${"\u254c".repeat(Math.max(1, W))}${p.reset}`];
+            return [`${p.dim}${"\u2500".repeat(Math.max(1, W))}${p.reset}`];
         case "fence-open":
             // E2: the RAIL, not a gutter. A block drawn with ``` is still a
             // fenced block when a human selects it and pastes it somewhere
@@ -282,8 +282,10 @@ function blockBody(b, W) {
             // DC-3: a fenced BODY carries no colour token. It used to take
             // `code` — 1.54:1 on a white terminal, applied to whole blocks,
             // which made the code the model just wrote the least readable
-            // thing on screen. The `│` gutter already says "this block is
-            // verbatim"; saying it twice cost legibility and bought nothing.
+            // thing on screen. The block's own ``` RAILS already say "this
+            // is verbatim" (E2 replaced the `│` gutter this comment used to
+            // name with them); saying it twice cost legibility and bought
+            // nothing.
             return foldLineWidth(src.slice(indent.length), W - visibleWidth(gutter), indent).map((r) => `${gutter}${r}`);
         }
         case "quote": {

package/dist/render.d.ts

@@ -82,11 +82,22 @@ export interface Palette {
 /**
  * DC-3 — one table per ground.
  *
- * `dim` is the same in all three ON tables and that is the point: SGR 2
- * is an ATTRIBUTE, it dims whatever the terminal's own foreground is, so
- * it adapts to the ground instead of asserting one. Only the background
- * genuinely needs to know, which is why `wash` is the only member that
- * varies.
+ * R3 (owner, 2026-08-27) — `dim` is ABSOLUTE once the ground is known,
+ * and design.md §2's table always said so: light `243` `#767676` at
+ * 4.54:1, dark `246` `#949494` at 5.50:1 (both re-measured here).
+ *
+ * DC-3 shipped SGR 2 instead, on the argument that an attribute adapts
+ * to the ground while an absolute grey asserts one. That argument is
+ * right about what SGR 2 IS and wrong about what it MEASURES: a
+ * terminal renders it as a fraction of its own foreground, and on Apple
+ * Terminal's light profile that lands well under the 4.5:1 floor — the
+ * labels, the keys row and the status row were all reported unreadable
+ * in real use. An attribute that adapts to an unknown ratio is not a
+ * contrast guarantee; the table's measured value is.
+ *
+ * The UNKNOWN ground keeps SGR 2, because §3.1 forbids an absolute
+ * foreground in a palette that has not established a background — the
+ * attribute is exactly the "correct on any ground" degradation there.
  */
 export declare const COLOR_NEUTRAL: Palette;
 export declare const COLOR_LIGHT: Palette;
@@ -151,6 +162,32 @@ export declare function renderTerminalGap(statusLine: string | null): string;
  * 40 columns skips the logo + the blank entirely — only the info rows.
  * Pure.
  */
+/**
+ * design.md §5.2 — THE TWO CYCLES, built. Seven frames each, walked at
+ * the existing 200ms spinner cadence, so a waiting screen's byte volume
+ * and frame rate are exactly what they were.
+ *
+ * §5.3 is why neither rotates: "a breath says alive; a turn says
+ * counting". A call whose duration cannot be predicted must not wear a
+ * mark that implies progress it does not have.
+ */
+/** The THINKING twinkle — glyphs only, no colour at all, so it survives
+ *  NO_COLOR and any ground intact. §4.1: it settles onto `✦`, which is
+ *  the same mark the collapsed segment keeps, so nothing new appears at
+ *  the transition. Every glyph is in Menlo and absent from Apple Color
+ *  Emoji (§6.1's test, run). */
+export declare const TWINKLE: readonly ["✧", "✦", "✶", "✸", "✺", "✸", "✦"];
+/** The breath's frame: `●` at the step's grey, for the CURRENT ground.
+ *  With no ground — or under NO_COLOR — it freezes to a static `●`,
+ *  because a brightness ramp needs a background to be a ramp against and
+ *  §3.1 forbids guessing one. The glyph never changes, so the freeze
+ *  degrades the motion and never the meaning. */
+export declare function breathFrame(step: number): string;
+/** The twinkle's frame — pure glyph, no palette involved. */
+export declare function twinkleFrame(step: number): string;
+/** Both cycles are seven frames, so ONE counter walks them and the two
+ *  marks stay in step on a screen showing both. */
+export declare const MOTION_FRAMES = 7;
 export declare const TAGLINE = "the coding agent that survives kill -9";
 /** R2 — what the opening knows about the session. Optional because the
  *  off-TTY caller prints a banner before a model is bound. */

package/dist/render.js

@@ -7,19 +7,51 @@
  */
 import { charWidth, displayWidth } from "./width.js";
 const BASE = { bold: "\x1b[1m", dim: "\x1b[2m", red: "\x1b[31m", green: "\x1b[32m", warn: "\x1b[33m", italic: "\x1b[3m", italicEnd: "\x1b[23m", underline: "\x1b[4m", underlineEnd: "\x1b[24m", rv: "\x1b[7m", rvEnd: "\x1b[27m", reset: "\x1b[0m" };
-const withWash = (wash, washEnd) => ({ ...BASE, wash, washEnd, code: wash });
+/**
+ * DC-9 (design §2.3) — the failure colour is theme-resolved.
+ *
+ * ANSI 31 is 5.89:1 on a white ground and 2.83:1 on a dark one: the one
+ * token in the alphabet whose whole job is "this went wrong" was the
+ * least readable thing on the screen exactly where a dark-terminal user
+ * reads it. A failure is CONTENT (law 1.2 admits colour there), so it
+ * cannot degrade to an attribute the way `dim` does — it needs a value
+ * per ground, and the ground is what §3's ladder is for.
+ *
+ * 256-cube indices, never truecolor (§2). Measured against the grounds
+ * §2 measures against — white, and #1E1E1E:
+ *
+ *   light  124 `#af0000`  7.44:1
+ *   dark   173 `#d7875f`  5.97:1
+ *
+ * With NO ground established the token stays ANSI 31 — the TERMINAL's
+ * own red, which its theme picked for its own background. That is rung
+ * 4's principle exactly: when the ground is unknown, use the thing that
+ * is correct on any ground rather than guessing one.
+ */
+const withWash = (wash, washEnd, red = BASE.red, dim = BASE.dim) => ({ ...BASE, red, dim, wash, washEnd, code: wash });
 /**
  * DC-3 — one table per ground.
  *
- * `dim` is the same in all three ON tables and that is the point: SGR 2
- * is an ATTRIBUTE, it dims whatever the terminal's own foreground is, so
- * it adapts to the ground instead of asserting one. Only the background
- * genuinely needs to know, which is why `wash` is the only member that
- * varies.
+ * R3 (owner, 2026-08-27) — `dim` is ABSOLUTE once the ground is known,
+ * and design.md §2's table always said so: light `243` `#767676` at
+ * 4.54:1, dark `246` `#949494` at 5.50:1 (both re-measured here).
+ *
+ * DC-3 shipped SGR 2 instead, on the argument that an attribute adapts
+ * to the ground while an absolute grey asserts one. That argument is
+ * right about what SGR 2 IS and wrong about what it MEASURES: a
+ * terminal renders it as a fraction of its own foreground, and on Apple
+ * Terminal's light profile that lands well under the 4.5:1 floor — the
+ * labels, the keys row and the status row were all reported unreadable
+ * in real use. An attribute that adapts to an unknown ratio is not a
+ * contrast guarantee; the table's measured value is.
+ *
+ * The UNKNOWN ground keeps SGR 2, because §3.1 forbids an absolute
+ * foreground in a palette that has not established a background — the
+ * attribute is exactly the "correct on any ground" degradation there.
  */
 export const COLOR_NEUTRAL = withWash("\x1b[7m", "\x1b[27m");
-export const COLOR_LIGHT = withWash("\x1b[48;5;255m", "\x1b[49m");
-export const COLOR_DARK = withWash("\x1b[48;5;236m", "\x1b[49m");
+export const COLOR_LIGHT = withWash("\x1b[48;5;255m", "\x1b[49m", "\x1b[38;5;124m", "\x1b[38;5;243m");
+export const COLOR_DARK = withWash("\x1b[48;5;236m", "\x1b[49m", "\x1b[38;5;173m", "\x1b[38;5;246m");
 /** The historical name — the palette for a colour TTY whose ground has
  *  not been established. Unchanged in every byte except `code`, which
  *  was the defect. */
@@ -190,6 +222,60 @@ export function renderTerminalGap(statusLine) {
  * 40 columns skips the logo + the blank entirely — only the info rows.
  * Pure.
  */
+/**
+ * design.md §5.2 — THE TWO CYCLES, built. Seven frames each, walked at
+ * the existing 200ms spinner cadence, so a waiting screen's byte volume
+ * and frame rate are exactly what they were.
+ *
+ * §5.3 is why neither rotates: "a breath says alive; a turn says
+ * counting". A call whose duration cannot be predicted must not wear a
+ * mark that implies progress it does not have.
+ */
+/** The THINKING twinkle — glyphs only, no colour at all, so it survives
+ *  NO_COLOR and any ground intact. §4.1: it settles onto `✦`, which is
+ *  the same mark the collapsed segment keeps, so nothing new appears at
+ *  the transition. Every glyph is in Menlo and absent from Apple Color
+ *  Emoji (§6.1's test, run). */
+export const TWINKLE = ["\u2727", "\u2726", "\u2736", "\u2738", "\u273a", "\u2738", "\u2726"];
+/** The COMMAND breath — brightness only, one glyph. The ramps bottom out
+ *  EXACTLY on the ground's dim token (§2.2: "the floor is a floor,
+ *  including mid-animation"): light ends at 243 (4.54:1 on white), dark
+ *  at 246 (5.50:1 on #1e1e1e). Measured, not assumed. */
+const BREATH_LIGHT = [232, 236, 240, 243, 240, 236, 232];
+const BREATH_DARK = [255, 251, 248, 246, 248, 251, 255];
+/** The breath's frame: `●` at the step's grey, for the CURRENT ground.
+ *  With no ground — or under NO_COLOR — it freezes to a static `●`,
+ *  because a brightness ramp needs a background to be a ramp against and
+ *  §3.1 forbids guessing one. The glyph never changes, so the freeze
+ *  degrades the motion and never the meaning. */
+export function breathFrame(step) {
+    const p = palette();
+    const ramp = currentGround() === "light" ? BREATH_LIGHT : currentGround() === "dark" ? BREATH_DARK : null;
+    if (ramp === null || p.bold === "")
+        return "\u25cf";
+    return `\x1b[38;5;${ramp[step % ramp.length]}m\u25cf${p.reset}`;
+}
+/** The twinkle's frame — pure glyph, no palette involved. */
+export function twinkleFrame(step) {
+    return TWINKLE[step % TWINKLE.length];
+}
+/** Both cycles are seven frames, so ONE counter walks them and the two
+ *  marks stay in step on a screen showing both. */
+export const MOTION_FRAMES = 7;
+/** DC-18: the display-width prefix of PLAIN text. `widthCut` lives in
+ *  components.ts, which imports this module — the dependency runs one
+ *  way, so the four lines live here rather than inverting it. */
+function plainCut(text, max) {
+    let w = 0;
+    let i = 0;
+    for (; i < text.length; i += 1) {
+        const cw = charWidth(text.codePointAt(i));
+        if (w + cw > max)
+            break;
+        w += cw;
+    }
+    return text.slice(0, i);
+}
 export const TAGLINE = "the coding agent that survives kill -9";
 /**
  * R2 — the wordmark is retired (2026-08-27, the nineteen-screen review).
@@ -210,7 +296,11 @@ export const TAGLINE = "the coding agent that survives kill -9";
 /** R2 — the keys a first screen teaches. One dim row, and deliberately
  *  NOT derived from KEY_BINDINGS: the sheet is the complete list and
  *  this is the opening's five, chosen rather than generated. */
-const BANNER_KEYS = "esc interrupt · ctrl+c exit · / commands · ! bash · ctrl+r expand";
+// R2: the keys row names bindings the product ACTUALLY has. The first
+// draft advertised `! bash` — there is no bang passthrough in kiso and
+// KEY_BINDINGS never had one, so the opening screen was teaching a key
+// that does nothing. A first screen that lies is worse than a short one.
+const BANNER_KEYS = "esc interrupt · ctrl+c exit · / commands · @ files · ? keys";
 /** R2 — the labels. Uppercase mono, dim, letter-spaced by the column
  *  rather than by SGR: they mark sections and are never content. */
 const BANNER_LABELS = ["MODEL", "WORKSPACE", "EXTENSIONS"];
@@ -225,6 +315,13 @@ export function truncateRow(row, width) {
     const total = displayWidth(row);
     if (total <= width)
         return row;
+    // DC-18: a width too narrow to HOLD the marker gets a hard cut. The
+    // fixpoint below floors `cut` at 0 and then appends a 6-cell marker
+    // regardless, so every width ≤ 6 returned a row WIDER than the
+    // terminal — and invariant ① throws rather than truncating. A marker
+    // wider than the row it marks is not a marker.
+    if (width < 7)
+        return plainCut(row, Math.max(0, width));
     // iterate the marker to a fixpoint: the marker's width changes the
     // cut, the cut changes the hidden count the marker reports
     let marker = " (+0)";
@@ -256,7 +353,24 @@ export function truncateRow(row, width) {
  *  resume list (BIG only, W5). Every row truncates at the terminal width
  *  with a " (+N)" marker. Pure. */
 export function bannerLines(W, H, version, extensionsText, resume = [], now = Date.now(), meta) {
-    const rows = [truncateRow(`kiso ${version}`, W)];
+    const p = palette();
+    // R2: the banner styles itself per span. It used to be wrapped in one
+    // blanket dim by its component, which made the answers as faint as the
+    // labels asking the questions — the labels are the quiet half, the
+    // values are what a human came to read.
+    //
+    // Every width decision below is taken on PLAIN text and the styling is
+    // applied after, because truncateRow measures with displayWidth, which
+    // counts SGR bytes as columns. Style then measure is a bug waiting.
+    // DC-18: the name row is CUT like every other row here. It was the one
+    // row in this function pushed unguarded, so at W ≤ 10 `kiso 0.16.4`
+    // measured 11 cells and invariant ① threw AT STARTUP — the function
+    // whose own comment preaches "invariant ① holds at every width".
+    // The cut is taken on the plain text, per the note above.
+    const namePlain = plainCut(`kiso ${version}`, Math.max(1, W));
+    const nameCut = namePlain.slice(0, 4); // "kiso", or its surviving prefix
+    const verCut = namePlain.slice(5); // the version, if the width left room for it
+    const rows = [`${p.bold}${nameCut}${p.reset}${verCut === "" ? "" : `${p.dim} ${verCut}${p.reset}`}`];
     const facts = [];
     if (meta !== undefined) {
         facts.push([BANNER_LABELS[0], `${meta.model}${meta.mode === "" ? "" : ` · ${meta.mode}`}`], [BANNER_LABELS[1], meta.cwd]);
@@ -268,32 +382,50 @@ export function bannerLines(W, H, version, extensionsText, resume = [], now = Da
         // The value column HANGS rather than truncating. The label costs
         // columns the value used to have, and an extension list cut at the
         // width would hide which extensions loaded — on the one screen whose
-        // job is to say what is loaded. Words wrap; a word longer than the
-        // column still truncates, with truncateRow's honest marker.
-        const room = Math.max(8, W - 2 - LABEL_STOP);
+        // job is to say what is loaded.
+        const indent = 2 + LABEL_STOP;
+        // a terminal too narrow to hold the label column at all: the room is
+        // what is left, floored at one column, and the assembled row is
+        // truncated as a unit so invariant ① holds at every width.
+        const room = Math.max(1, W - indent);
         for (const [label, value] of facts) {
-            const lead = `  ${label}${" ".repeat(LABEL_STOP - label.length)}`;
-            const hang = " ".repeat(displayWidth(lead));
+            const lead = `  ${p.dim}${label}${p.reset}${" ".repeat(LABEL_STOP - label.length)}`;
+            const hang = " ".repeat(indent);
+            const lines = [];
             let line = "";
-            const out = [];
             for (const word of value.split(" ")) {
                 if (line === "")
                     line = word;
                 else if (displayWidth(`${line} ${word}`) <= room)
                     line += ` ${word}`;
                 else {
-                    out.push(line);
+                    lines.push(line);
                     line = word;
                 }
             }
             if (line !== "")
-                out.push(line);
-            for (const [i, l] of out.entries())
-                rows.push(truncateRow(`${i === 0 ? lead : hang}${l}`, W));
+                lines.push(line);
+            for (const [i, l] of lines.entries()) {
+                const styled = `${i === 0 ? lead : hang}${truncateRow(l, room)}`;
+                rows.push(displayWidth(styled) - (i === 0 ? p.dim.length + p.reset.length : 0) <= W ? styled : truncateRow(`${hang}${l}`, W));
+            }
+        }
+    }
+    if (meta !== undefined && W >= 40) {
+        // R2/DC-2's device: the keys row is a list of independent clauses,
+        // so a narrow terminal drops whole clauses from the end rather than
+        // cutting one in half. `ctrl+r ex (+8)` teaches nothing.
+        const clauses = BANNER_KEYS.split(" \u00b7 ");
+        let keys = clauses[0];
+        for (let n = clauses.length; n > 1; n -= 1) {
+            const row = clauses.slice(0, n).join(" \u00b7 ");
+            if (displayWidth(row) <= W - 2) {
+                keys = row;
+                break;
+            }
         }
+        rows.push("", `  ${p.dim}${truncateRow(keys, W - 2)}${p.reset}`);
     }
-    if (meta !== undefined && W >= 40)
-        rows.push("", truncateRow(`  ${BANNER_KEYS}`, W));
     if (W >= 40 && H >= 20 && resume.length > 0) {
         rows.push("", ...renderResumeList(resume, W, now));
     }
@@ -333,7 +465,7 @@ function titleCut(text, max) {
 export function renderResumeList(metas, W, now) {
     if (metas.length === 0)
         return [];
-    const rows = ["  ▞ resume"];
+    const rows = ["  ✦ resume"]; // R2: the ONE fold/segment mark (§4.2)
     const whens = metas.map((m) => relativeTime(m.updatedAt, now));
     const metaTexts = metas.map((m) => `${m.events} events · ${m.runs} runs`);
     const metaW = Math.max(...metaTexts.map((t) => t.length));

package/dist/strings.js

@@ -51,7 +51,7 @@ export function projectTrustView(root, files) {
         name: "project trust",
         title: root,
         speaker: "kiso",
-        statusText: "▸ project trust",
+        statusText: "⏸ project trust",
         args: { kind: "text", lines: projectTrustRows(files) },
         ruleOverride: "trust this project's .kiso?",
         fallbackQuestion: `trust this project's .kiso? (y/n) `,
@@ -96,7 +96,7 @@ export function verifyOfferView() {
         name: "verification",
         title: "finish the checklist?",
         speaker: "kiso",
-        statusText: "\u25b8 run paused",
+        statusText: "\u23f8 run paused",
         args: { kind: "text", lines: [] },
         ruleOverride: "every item is marked done \u2014 run a check?",
         simpleOptions: ["run a verification pass", "not now"],
@@ -109,7 +109,7 @@ export function uncertainView(name, executionId) {
         name: "uncertain execution",
         title: `${name} (${executionId})`,
         speaker: "kiso",
-        statusText: "▸ uncertain execution",
+        statusText: "⏸ uncertain execution",
         args: { kind: "text", lines: [executionId] },
         ruleOverride: "an interrupted execution may have applied — rerun it?",
         simpleOptions: ["rerun it", "abandon it"],
@@ -136,7 +136,7 @@ export function unansweredAskView(executionId) {
         name: "unanswered question",
         title: `ask_user (${executionId})`,
         speaker: "kiso",
-        statusText: "▸ unanswered question",
+        statusText: "⏸ unanswered question",
         args: { kind: "text", lines: [executionId] },
         ruleOverride: "an unanswered question was interrupted — ask it again?",
         simpleOptions: ["ask it again", "drop it"],

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vincemakes/kiso-tui-cells",
-	"version": "0.16.3",
+	"version": "0.16.5",
 	"description": "kiso tui-cells — the components cell renderer (components, diff, width, the render slice). Zero runtime dependencies: input is data, output is bytes.",
 	"type": "module",
 	"license": "MIT",