@vincemakes/kiso-tui-cells 0.16.2 → 0.16.4

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

@@ -193,7 +193,8 @@ function panelRuleText(view) {
     const base = view.amended === true
         ? `${head}${p.dim}needs approval · (amended) — asked by${p.reset}${tail}`
         : `${head}${p.dim}needs approval — asked by${p.reset}${tail}`;
-    return hint ? `${base}${p.dim} ·${p.reset} ${p.code}${escapeTerminal(hint)}${p.reset}` : base;
+    // DC-3: the fix hint is metadata — it borrowed the inline-code tint.
+    return hint ? `${base}${p.dim} · ${escapeTerminal(hint)}${p.reset}` : base;
 }
 /**
  * TUI2-R3v2 ① — ONE ROW PER OPTION, and the cursor's row is a bar.
@@ -204,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).
@@ -228,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}${"\u254c".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).
@@ -251,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) +
@@ -296,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));
     }
@@ -335,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}${"\u254c".repeat(Math.max(0, W))}${p.reset}`);
     return { rows, ...layout };
 }
 /**
@@ -353,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;
 }
@@ -368,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;
 }
 /**
@@ -424,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}${"\u254c".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}${"\u254c".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

@@ -17,7 +17,7 @@
  * (untouched); render.ts supplies the original text (palette, escape,
  * tint, fold wording).
  */
-import { foldThinking, foldResult, renderToolSummary, type ResumeMeta } from "./render.js";
+import { foldThinking, foldResult, renderToolSummary, type ResumeMeta, type BannerMeta } from "./render.js";
 import { type MdBlock } from "./md.js";
 export { MdStream, renderBlock, renderMarkdown, type MdBlock, type MdKind } from "./md.js";
 /** The spinner glyphs, cycled by the compositor's on-demand tick. */
@@ -168,6 +168,7 @@ export type BodyCell = {
     version: string;
     extensionsText: string;
     resume: ResumeMeta[];
+    meta?: BannerMeta | undefined;
     done: true;
 } | {
     kind: "raw";
@@ -244,7 +245,7 @@ export declare function expandSuffix(lines: number | null, room: number): string
  * would put the invariant "exactly one bright token" in as many hands as
  * there are emitters. Here it has exactly one.
  *
- * NO_COLOR: p.code is empty, so the row's bytes are untouched.
+ * NO_COLOR: p.dim is empty, so the row's bytes are untouched.
  */
 export declare function focusToken(row: string, W: number): string;
 /** W13 — the rollup opt-in table: which tools collapse, and the count
@@ -374,13 +375,25 @@ export declare function widthCut(text: string, max: number): string;
  * keeps the columns from moving as the bar walks the list.
  */
 export declare function selectionBar(styled: string, visible: number, W: number): string;
-/** W6 — the box: the chrome's top rail. The two ╌ dotted rows become
- *  a rounded box (the box already says "input lives here"); the rails
- *  stay dim, the width is still the full W (the box is a rail with
- *  corners — the menu/gap rows above and the status below are
- *  untouched). */
+/**
+ * R2 — the composer's rails, and the ONE edge vocabulary.
+ *
+ * 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 dashed 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 \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). */