@vincemakes/kiso-tui 0.16.2 → 0.16.4

package/dist/ask-panel.d.ts

@@ -63,10 +63,15 @@ export declare function askKey(spec: AskSpec, state: AskRuntime, key: string): A
  *  (clearing its picks) and the walk advances. An empty line is a
  *  no-op back to the options — nothing is recorded. */
 export declare function askCommitCustom(spec: AskSpec, state: AskRuntime, text: string): AskStep;
+/** The description column, computed over the WHOLE list: two cells past
+ *  the widest label, never past the half-width, and 0 (meaning "no
+ *  column, use the em dash") when what is left would not hold a
+ *  readable description. */
+export declare function askDescriptionStop(q: AskQuestion, W: number): number;
 /** The ask block's rows — the question as the rule line, the header (or
  *  the counter) as the title, the options as the body, and the
- *  type-your-own line last. The shape is the W21 block's: gutter, rule,
- *  title, divider, body, affordance, corner. */
+ *  type-your-own line last. R2: the shape is the RULE's — rule,
+ *  title, header, body, affordance, rule. */
 export declare function askBlockRows(view: PanelView, state: AskRuntime, W: number, maxRows: number): string[];
 /** The status row's right-hand hint — the phase's keys. */
 export declare function askAffordance(state: AskRuntime): string;

package/dist/ask-panel.js

@@ -28,7 +28,7 @@
  * hand-off, no timeout and no countdown.
  */
 import { panelBlockLayout, panelAffordance as basePanelAffordance, panelBlockRows as basePanelBlockRows, panelLead as basePanelLead, panelLeadPlain as basePanelLeadPlain, panelStatus as basePanelStatus, pickAffordance, pickBlockRows, pickLead, pickLeadPlain, pickStatus, } from "./approval-panel.js";
-import { cutLine } from "@vincemakes/kiso-tui-cells/components";
+import { cutLine, selectionBar, visibleWidth, widthCut } from "@vincemakes/kiso-tui-cells/components";
 import { escapeTerminal, palette } from "./render.js";
 /** The schema's own bounds — the registry refuses anything outside them
  *  (extensions/ask validates; these are the numbers it validates to). */
@@ -181,34 +181,101 @@ export function askCommitCustom(spec, state, text) {
     return advance(spec, { ...state, custom, picks, phase: "options" });
 }
 // ── the rows ─────────────────────────────────────────────────────────
-/** One option row: the number, the selection mark, the label, and the
- *  description after an em dash. The row CUTS (never folds) — the
- *  block's height is its row count, the W20 discipline. */
-function optionRow(o, n, picked, cursor, multi, W) {
+/**
+ * One option row: the cursor arrow, the number, the selection mark, the
+ * label, and the description in its own RIGHT COLUMN. The row CUTS
+ * (never folds) — the block's height is its row count, the W20
+ * discipline.
+ *
+ * R2 (design §7.5) — two changes, both about what survives:
+ *
+ *  - the cursor carries `→` as well as the bar. The bar is the loud
+ *    signal and the arrow is the durable one: strip every escape and the
+ *    row still says which option the cursor is on, which is law 1.3's
+ *    test applied to a selection rather than to an outcome.
+ *  - the description leaves the em dash and takes a column. Run-on
+ *    `label — description` makes the labels — the thing being chosen
+ *    between — unscannable, because each one starts at a column the
+ *    previous row's length decided. `stop` is computed ONCE over the
+ *    whole option list by the caller, so the column is a property of
+ *    the list and not of the row.
+ *
+ * A narrow block has no room for two columns; `stop` arrives as 0 and
+ * the em-dash form is what it degrades to.
+ */
+function optionRow(o, n, picked, cursor, multi, W, stop = 0) {
     const p = palette();
     const mark = multi ? (picked ? "◉" : "◯") : picked ? "◉" : " ";
-    const head = `${cursor ? p.bold : ""} ${n} ${mark} ${escapeTerminal(o.label)}${p.reset}`;
-    const body = o.description === undefined ? "" : `${p.dim} — ${escapeTerminal(o.description)}${p.reset}`;
-    return cutLine(`${head}${body}`, Math.max(1, W - 2));
+    const lead = askOptionLead(o, n, mark, cursor);
+    const head = `${cursor ? p.bold : ""}${lead}${p.reset}`;
+    const room = Math.max(1, W - 2);
+    let body;
+    if (o.description === undefined)
+        body = "";
+    else if (stop > 0) {
+        const desc = widthCut(escapeTerminal(o.description), Math.max(0, room - stop));
+        body = `${" ".repeat(Math.max(1, stop - visibleWidth(lead)))}${p.dim}${desc}${p.reset}`;
+    }
+    else
+        body = `${p.dim} — ${escapeTerminal(o.description)}${p.reset}`;
+    const text = cutLine(`${head}${body}`, Math.max(1, W - 2));
+    // R2: the cursor is a FULL-ROW bar, the same one the approval panel
+    // has had since R1.5 ⑧ — "a two-cell marker in an eighty-column row is
+    // a selection you have to hunt for". This panel was carrying bold and
+    // nothing else, which on a white terminal is close to invisible. One
+    // ruling, applied in the second place it was always about.
+    return cursor ? selectionBar(text, visibleWidth(text), W) : ` ${text}`; // R2: the frame is a rule, so a row is just indented
+}
+/** The row's left span, PLAIN — the one place its shape is written, so
+ *  the column arithmetic below and the row above cannot disagree about
+ *  how wide it is. The arrow's cell is spent on every row so the digit
+ *  column does not move as the cursor walks. */
+function askOptionLead(o, n, mark, cursor) {
+    return `${cursor ? "→" : " "} ${n} ${mark} ${escapeTerminal(o.label)}`;
+}
+/** Below this many cells a right column is not a column, it is a
+ *  three-word stub — the em-dash form carries more of the sentence. */
+const ASK_DESC_MIN = 18;
+/** The description column, computed over the WHOLE list: two cells past
+ *  the widest label, never past the half-width, and 0 (meaning "no
+ *  column, use the em dash") when what is left would not hold a
+ *  readable description. */
+export function askDescriptionStop(q, W) {
+    const multi = q.multiSelect === true;
+    if (!q.options.some((o) => o.description !== undefined))
+        return 0;
+    const widest = Math.max(...q.options.map((o, i) => visibleWidth(askOptionLead(o, i + 1, multi ? "◯" : " ", false))));
+    const room = Math.max(1, W - 2);
+    const stop = widest + 2;
+    if (stop > Math.floor(room / 2) || room - stop < ASK_DESC_MIN)
+        return 0;
+    return stop;
 }
 /** The ask block's rows — the question as the rule line, the header (or
  *  the counter) as the title, the options as the body, and the
- *  type-your-own line last. The shape is the W21 block's: gutter, rule,
- *  title, divider, body, affordance, corner. */
+ *  type-your-own line last. R2: the shape is the RULE's — rule,
+ *  title, header, body, affordance, rule. */
 export function askBlockRows(view, state, W, maxRows) {
     const p = palette();
     const spec = view.ask;
     const q = spec.questions[state.qIndex];
     const multi = q.multiSelect === true;
-    const gutter = `${p.dim}│${p.reset} `;
     const counter = spec.questions.length > 1 ? `${p.dim} ‹ ${state.qIndex + 1}/${spec.questions.length} ›${p.reset}` : "";
     const rows = [];
-    rows.push(`${gutter}${cutLine(`${p.bold}${escapeTerminal(q.question)}${p.reset}${counter}`, Math.max(1, W - 2))}`);
+    // R2: the same dashed rule the composer and the approval panel use.
+    rows.push(`${p.dim}${"\u254c".repeat(Math.max(0, W))}${p.reset}`);
+    rows.push(`  ${cutLine(`${p.bold}${escapeTerminal(q.question)}${p.reset}${counter}`, Math.max(1, W - 2))}`);
     const header = q.header === undefined ? "the question" : escapeTerminal(q.header.slice(0, ASK_HEADER_CAP));
-    rows.push(`${gutter}${cutLine(`${p.dim}${header}${p.reset}`, Math.max(1, W - 2))}`);
-    rows.push(cutLine(`${p.dim}─ ${multi ? "pick any — space toggles" : "pick one"} ─${p.reset}`, Math.max(1, W - 2)));
+    // R2: the divider row is gone (the opening rule says a block starts
+    // here), but the multi-select gesture it carried is INFORMATION and
+    // rides the header instead — dropping it would have been a regression
+    // wearing a restyle's clothes.
+    const gesture = multi ? `${p.dim} · pick any — space toggles${p.reset}` : "";
+    rows.push(`  ${cutLine(`${p.dim}${header}${p.reset}${gesture}`, Math.max(1, W - 2))}`);
+    rows.push("");
     const picks = state.picks[state.qIndex] ?? [];
-    const body = q.options.map((o, i) => `${gutter}${optionRow(o, i + 1, picks.includes(i), state.cursor === i, multi, W)}`);
+    const stop = askDescriptionStop(q, W);
+    const body = q.options.map((o, i) => optionRow(o, i + 1, picks.includes(i), state.cursor === i, multi, W, stop));
     // REL-0152-D3: the row is part of the list, so it carries the same
     // cursor affordance the options do. Dim-always made a reachable row
     // look like a footnote.
@@ -220,14 +287,22 @@ export function askBlockRows(view, state, W, maxRows) {
     // like nothing happened. The placeholder is dim and the answer is
     // not: the two can never be mistaken for each other.
     const typingHere = state.phase === "custom";
-    body.push(`${gutter}${cutLine(typed !== null && typed !== undefined
-        ? `${onCustom || typingHere ? p.bold : ""} t ◉ ${escapeTerminal(typed)}${p.reset}`
+    // R2: the custom row is one of the list's rows, so it wears the
+    // list's cursor — the arrow AND the bar. It was carrying bold alone,
+    // which is the exact invisibility §7.5 was written about, on the one
+    // row a keyboard user reaches last.
+    const customLead = `${onCustom ? "→" : " "} t `;
+    const customText = cutLine(typed !== null && typed !== undefined
+        ? `${onCustom || typingHere ? p.bold : ""}${customLead}◉ ${escapeTerminal(typed)}${p.reset}`
         : typingHere
-            ? `${p.bold} t ▸${p.reset} ${p.dim}type your answer — enter sends, esc backs out${p.reset}`
-            : `${onCustom ? p.bold : p.dim} t   type your own answer${p.reset}`, Math.max(1, W - 2))}`);
+            ? `${p.bold}${customLead}▸${p.reset} ${p.dim}type your answer — enter sends, esc backs out${p.reset}`
+            : `${onCustom ? p.bold : p.dim}${customLead}  type your own answer${p.reset}`, Math.max(1, W - 2));
+    body.push(onCustom ? selectionBar(customText, visibleWidth(customText), W) : ` ${customText}`);
     // the bounded block: the options fold nothing and cut individually,
     // so the cap drops whole rows with the W21 notice row.
-    const budget = Math.max(1, maxRows - 5);
+    // R2: SIX rows of frame — the block opens with a rule as well as
+    // closing with one, and the divider became a blank.
+    const budget = Math.max(1, maxRows - 6);
     if (body.length > budget) {
         const kept = Math.max(0, budget - 1);
         rows.push(...body.slice(0, kept));
@@ -236,16 +311,13 @@ export function askBlockRows(view, state, W, maxRows) {
     else {
         rows.push(...body);
     }
-    rows.push(`${gutter}${p.dim}${askAffordance(state)}${p.reset}`);
-    // TUI2-R1.5 11 (VD-13), shared with the approval panel: a real bottom RULE, in the block's own edge
-    // vocabulary — the same box-drawing run its divider already uses —
-    // anchored at the gutter column. It used to be `\u2514 `: a two-cell stub
-    // floating at column 1, with no rule running from it and no corner
-    // above it to answer. Worse, `\u2514 ` is the cut-notice prefix everywhere
-    // 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}${askAffordance(state)}${p.reset}`);
+    // R2, shared with the approval panel: the block closes with the SAME
+    // dashed rule it opened with, and the same one the composer uses.
+    // TUI2-R1.5 ⑪ had already replaced a two-cell `\u2514 ` stub with a
+    // real rule for the reason that stub read as the cut-notice prefix it
+    // collides with; this keeps that finding and only changes which rule.
+    rows.push(`${p.dim}${"\u254c".repeat(Math.max(0, W))}${p.reset}`);
     return rows;
 }
 /** The status row's right-hand hint — the phase's keys. */
@@ -256,8 +328,15 @@ export function askAffordance(state) {
 }
 /** The status row's left text — the ask's own line, with the walk. */
 export function askStatus(view, state) {
+    // R2: the status says the DURABLE thing. Every other agent's option
+    // panel dies with its process; this one is a fact in the event log, so
+    // killing kiso and coming back brings the question with it and never
+    // re-asks an answered one (ADR-0051 §8). The screen had never said so.
+    // It costs a status string and it is the cheapest claim in the product
+    // that no competitor can copy without building the log first.
     const total = view.ask.questions.length;
-    return total > 1 ? `▸ question ${state.qIndex + 1} of ${total}` : "▸ a question for you";
+    const where = total > 1 ? `question ${state.qIndex + 1} of ${total}` : "a question for you";
+    return `⏸ ${where} · answers are durable facts`;
 }
 /** The input row's lead: the digit lead while picking, the typing lead
  *  in the custom phase (the rule-input phase's shape, reused). */
@@ -347,7 +426,7 @@ export function askView(spec) {
         name: "ask_user",
         title: first.header ?? first.question,
         speaker: "kiso",
-        statusText: "▸ a question for you",
+        statusText: "⏸ a question for you",
         args: { kind: "text", lines: askDeclineList(spec) },
         fallbackQuestion: `⚠ ${escapeTerminal(first.question)} — this terminal cannot show the option panel; the question is declined `,
         ask: spec,

package/dist/at-picker.d.ts

@@ -157,7 +157,15 @@ export declare function atPanelRows(state: {
     selected: number;
     capped: boolean;
 }, W: number): string[];
-/** TUI2-R1.5 ⑦(b) — the one-row dim header that turns a band into a
- *  surface. Shared by the @ picker and the / menu so the two read the
- *  same way. */
+/**
+ * TUI2-R1.5 ⑦(b) — the one row that turns a band into a surface. Shared
+ * by the @ picker, the / menu and the session picker so the three read
+ * the same way.
+ *
+ * R2: the label rides the RULE. It was a bare dim word on its own row —
+ * which said "a surface starts here" only if you already knew that, and
+ * it spent a row saying it. The dashed rule is the edge vocabulary the
+ * composer and every panel now share, so a band opens the way everything
+ * else does and the label tells you WHICH band in the same row.
+ */
 export declare function bandHeader(label: string, W: number): string;

package/dist/at-picker.js

@@ -13,7 +13,7 @@
  * on the machine's locale).
  */
 import { escapeTerminal, palette } from "./render.js";
-import { visibleWidth, widthCut } from "./components.js";
+import { selectionBar, visibleWidth, widthCut } from "./components.js";
 /**
  * KC3 §5 — the ONE cap. The file list is computed per open with no
  * index and no watcher, so its cost is bounded here rather than
@@ -212,11 +212,11 @@ export function atRow(match, selected, W) {
     // visible from anywhere on the line. Mono discipline: reverse video,
     // no new colours.
     //
-    // The inner spans close with rvEnd (SGR 27), never SGR 0 — a reset
-    // inside the bar would punch a hole in it. `painted`'s bold marks and
-    // the dim suffix both end in SGR 0, so the bar is re-opened after each.
-    const inner = `${painted.replaceAll(p.reset, `${p.reset}${p.rv}`)}${suffix === "" ? "" : `${p.dim}${suffix}${p.reset}${p.rv}`}`;
-    return `${p.rv} ${inner}${" ".repeat(Math.max(0, W - width - 2))} ${p.rvEnd}`;
+    // R2: the composition is selectionBar's — one copy, and with it the
+    // §2.1 rule that dim never sits on the wash (the directory column was
+    // rendering grey-on-grey inside the bar, i.e. the half of the row the
+    // selection was meant to help you read).
+    return selectionBar(`${painted}${suffix === "" ? "" : `${p.dim}${suffix}${p.reset}`}`, width, W);
 }
 /**
  * KC3 §4 — the counter row: `(n/total)`, where n is the 1-based
@@ -252,10 +252,19 @@ export function atPanelRows(state, W) {
     rows.push(atCounterRow(state.selected, state.matches.length, state.capped, W));
     return rows;
 }
-/** TUI2-R1.5 ⑦(b) — the one-row dim header that turns a band into a
- *  surface. Shared by the @ picker and the / menu so the two read the
- *  same way. */
+/**
+ * TUI2-R1.5 ⑦(b) — the one row that turns a band into a surface. Shared
+ * by the @ picker, the / menu and the session picker so the three read
+ * the same way.
+ *
+ * R2: the label rides the RULE. It was a bare dim word on its own row —
+ * which said "a surface starts here" only if you already knew that, and
+ * it spent a row saying it. The dashed rule is the edge vocabulary the
+ * composer and every panel now share, so a band opens the way everything
+ * else does and the label tells you WHICH band in the same row.
+ */
 export function bandHeader(label, W) {
     const p = palette();
-    return `${p.dim}${widthCut(label, Math.max(1, W))}${p.reset}`;
+    const head = `\u254c\u254c\u254c ${label} `;
+    return `${p.dim}${widthCut(`${head}${"\u254c".repeat(Math.max(1, W - head.length))}`, Math.max(1, W))}${p.reset}`;
 }

package/dist/compositor.d.ts

@@ -52,7 +52,7 @@ export interface AtPanelState {
     readonly selected: number;
     readonly capped: boolean;
 }
-import { type ResumeMeta } from "./render.js";
+import { type BannerMeta, 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). */
@@ -171,7 +171,7 @@ export declare class Body {
      *  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;
+    banner(version: string, extensionsText: string, resume?: ResumeMeta[], meta?: BannerMeta | undefined): void;
     raw(lines: string[], wrap?: "words"): void;
     /** The last COMPLETE thinking block, for /think. */
     lastThinking(): string | null;
@@ -239,6 +239,20 @@ export declare class Body {
      * that choice here, and has to pay carefully.
      */
     onResize(): void;
+    /**
+     * DC-3 — the ground arrived, so every colour on the held screen is
+     * stale.
+     *
+     * The terminal answers `OSC 11` a few milliseconds after startup, by
+     * which time the first frame is already painted with the no-ground
+     * palette. Rather than delay the opening to wait for an answer that
+     * may never come, the frame is painted at once and repainted when the
+     * answer lands. Invalidating the held screen is exactly what a resize
+     * does, for exactly the same reason — every row's bytes are wrong —
+     * so it rides the settle the resize already owns and costs one
+     * repaint, once per session.
+     */
+    onGroundChange(): 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). */
@@ -295,6 +309,8 @@ export declare class Dock {
     enter(): void;
     exit(): void;
     onResize(): void;
+    /** DC-3 — the terminal answered what its background is; repaint. */
+    onGroundChange(): void;
     /** TUI2-R3v2 ②: where the last frame put the panel's clickable option
      *  rows (absolute screen rows). The editor binds this and does no row
      *  arithmetic of its own. */

package/dist/compositor.js

@@ -667,7 +667,7 @@ export class Body {
             this.#closeOpenThinking();
             this.#closeOpenText();
             const p = palette();
-            this.#write(`${p.bold}▞${p.reset} ${escapeTerminal(header)}\n`);
+            this.#write(`${p.bold}✦${p.reset} ${escapeTerminal(header)}\n`);
             const glyphOf = (status) => (status === "pending" ? "□" : status === "active" ? "▖" : "▣");
             for (const item of items)
                 this.#write(`  ${glyphOf(item.status)} ${escapeTerminal(item.text)}\n`);
@@ -706,21 +706,21 @@ export class Body {
      *  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, extensionsText, resume = []) {
+    banner(version, extensionsText, resume = [], meta) {
         if (!this.#isActive()) {
             this.#closeOpenThinking();
             this.#closeOpenText();
             const W = this.#opts.width() || 80; // a 0-size pty falls back
             const H = this.#opts.height();
             const p = palette();
-            for (const r of bannerLines(W, H, version, extensionsText))
+            for (const r of bannerLines(W, H, version, extensionsText, [], Date.now(), meta))
                 this.#write(`${p.dim}${r}${p.reset}\n`);
             this.#write("\n");
             return;
         }
         this.#closeOpenThinking();
         this.#closeOpenText();
-        this.#cells.push({ kind: "banner", version, extensionsText, resume, done: true });
+        this.#cells.push({ kind: "banner", version, extensionsText, resume, meta, done: true });
         this.#mark();
     }
     raw(lines, wrap) {
@@ -815,11 +815,11 @@ export class Body {
             // the row showed, then one row per tool with its subjects. The
             // header keeps W15's shape; only the subject changes.
             if (cell.rolled.parts !== undefined) {
-                const header = `${p.bold}▞${p.reset} expanded · ${escapeTerminal(`explored ${exploreCounts(cell.rolled.parts)}`)} · ${back}`;
+                const header = `${p.bold}✦${p.reset} expanded · ${escapeTerminal(`explored ${exploreCounts(cell.rolled.parts)}`)} · ${back}`;
                 return { kind: "appended", lines: [header, ...exploreRows(cell.rolled.parts, this.#opts.width())] };
             }
             const noun = ROLLUP_NOUN[cell.name] ?? "calls";
-            const header = `${p.bold}▞${p.reset} expanded · ${escapeTerminal(`${displayVerb(cell.name)} ${cell.rolled.count} ${noun}`)} · ${back}`;
+            const header = `${p.bold}✦${p.reset} expanded · ${escapeTerminal(`${displayVerb(cell.name)} ${cell.rolled.count} ${noun}`)} · ${back}`;
             return {
                 kind: "appended",
                 lines: [header, ...cell.rolled.targets.map((t) => `  ${p.dim}└ ${escapeTerminal(t)}${p.reset}`)],
@@ -835,7 +835,7 @@ export class Body {
         }
         const turnsBack = this.#cells.slice(idx + 1).filter((c) => c.kind === "user").length;
         const p = palette();
-        const header = `${p.bold}▞${p.reset} expanded · ${escapeTerminal(`${displayVerb(cell.name)} ${toolTarget(cell.name, input)}`)} · ${turnsBack} ${turnsBack === 1 ? "turn" : "turns"} back`;
+        const header = `${p.bold}✦${p.reset} expanded · ${escapeTerminal(`${displayVerb(cell.name)} ${toolTarget(cell.name, input)}`)} · ${turnsBack} ${turnsBack === 1 ? "turn" : "turns"} back`;
         return {
             kind: "appended",
             lines: [
@@ -1092,6 +1092,23 @@ export class Body {
         if (this.#resizeTimer.unref !== undefined)
             this.#resizeTimer.unref();
     }
+    /**
+     * DC-3 — the ground arrived, so every colour on the held screen is
+     * stale.
+     *
+     * The terminal answers `OSC 11` a few milliseconds after startup, by
+     * which time the first frame is already painted with the no-ground
+     * palette. Rather than delay the opening to wait for an answer that
+     * may never come, the frame is painted at once and repainted when the
+     * answer lands. Invalidating the held screen is exactly what a resize
+     * does, for exactly the same reason — every row's bytes are wrong —
+     * so it rides the settle the resize already owns and costs one
+     * repaint, once per session.
+     */
+    onGroundChange() {
+        this.#screen = [];
+        this.onResize();
+    }
     /** The one repaint a drag earns, once its signals have stopped. */
     #settleResize() {
         if (!this.#resizePending || !this.#isActive())
@@ -1182,9 +1199,11 @@ export class Body {
         // W23: the frame-derived column — wallL + leadWidth(lead) + cells
         // + 1 — the SAME formula the marker embeds at (the panel lead when
         // the panel owns the row; the old prompt-only math desynced the
-        // panel rows' edit column; leadWidth is the ONE authority)
+        // panel rows' edit column; leadWidth is the ONE authority).
+        // R2: wallL is 0 — the box is retired, so the row starts at column
+        // one and the frame's marker and this formula share the constant.
         const lead = panel !== null ? panelLeadOf(panel) : this.#inputPrompt;
-        return 3 + leadWidth(lead) + st.cursor;
+        return 1 + leadWidth(lead) + st.cursor;
     }
     /** The old dock's redraw — the editor's onRender target: mark + the
      *  scheduler (16ms coalescing — the old sync draw coalesces the same). */
@@ -1903,8 +1922,14 @@ export class Body {
                 inserted = true;
             }
             const cw = displayWidth(row[i]);
-            if (w + cw > W - 4)
-                break; // the cap — the two walls' columns
+            // R2: no walls to pay for — but ONE column stays reserved. When
+            // the cursor rests past the content the drawn cell is taken out
+            // of the pad, and a walk that filled to exactly W leaves no pad
+            // to take it from: the row becomes W+1 and invariant ① throws.
+            // The old cap paid for two walls and a space; this pays for the
+            // cursor, which is the only thing still owed a cell.
+            if (w + cw > W - 1)
+                break;
             markerLine += row[i];
             w += cw;
             i += 1;
@@ -1938,8 +1963,8 @@ export class Body {
             const after = markerLine.slice(mi + CURSOR_MARKER.length);
             if (after.length === 0) {
                 // the cursor rests past the content — an inverse space,
-                // taken OUT of the pad (the walk capped content at W−4,
-                // so the pad is ≥ 1 and the row still totals W)
+                // taken OUT of the pad (the walk capped content at W, so
+                // the pad absorbs it and the row still totals W)
                 stripped0 = `${before}\x1b[7m \x1b[27m`;
                 cursorPad = 1;
             }
@@ -1954,10 +1979,12 @@ export class Body {
                 stripped0 = `${before}\x1b[7m${glyph}\x1b[27m${after.slice(glyph.length)}`;
             }
         }
-        // the pad completes the row to W — the content stopped at W−4,
-        // so the pad is ≥ 1 (≥ 0 after the drawn cursor consumed one)
-        const padW = W - 3 - w - cursorPad;
-        return { stripped: `\x1b[2m│ \x1b[0m${stripped0}\x1b[2m${" ".repeat(padW)}│\x1b[0m`, markerCell };
+        // R2 — the box is retired (see boxTop): the composer is two dashed
+        // rules and the row between them, so there are no walls to pay for
+        // and no pad to hold them off. The row is exactly W, as it always
+        // was; what changed is that all W columns belong to the input.
+        const padW = Math.max(0, W - w - cursorPad);
+        return { stripped: `${stripped0}${" ".repeat(padW)}`, markerCell };
     }
     /** KC1 §6 — the focus component's input ROWS (N = 1 today's single
      *  row, byte for byte). The lead rides the FIRST row and the
@@ -1994,7 +2021,7 @@ export class Body {
             cursorRow -= first;
         }
         const out = [];
-        let markerCol = 3;
+        let markerCol = 1; // R2: no wall to skip — the row starts at column 1
         for (let r = 0; r < rows.length; r += 1) {
             const text = `${r === 0 ? lead : " ".repeat(leadW)}${rows[r]}`;
             const bytes = this.#inputRowBytes(text, W, r === cursorRow ? leadW + cursorCol : null);
@@ -2002,7 +2029,7 @@ export class Body {
             // W23: the frame-derived column — wallL (2) + the marker's
             // cell + 1 — the CHA lands the cursor AT the marker from ANY base
             if (r === cursorRow)
-                markerCol = 3 + bytes.markerCell;
+                markerCol = 1 + bytes.markerCell;
         }
         return { rows: out, markerRow: cursorRow, markerCol };
     }
@@ -2323,6 +2350,10 @@ export class Dock {
     onResize() {
         compositorRef?.onResize();
     }
+    /** DC-3 — the terminal answered what its background is; repaint. */
+    onGroundChange() {
+        compositorRef?.onGroundChange();
+    }
     /** TUI2-R3v2 ②: where the last frame put the panel's clickable option
      *  rows (absolute screen rows). The editor binds this and does no row
      *  arithmetic of its own. */

package/dist/editor.d.ts

@@ -56,6 +56,15 @@ export declare class Editor {
     #private;
     readonly closed: Promise<void>;
     constructor(onRender: () => void);
+    /**
+     *  DC-7 — the terminal answering a question kiso asked it.
+     *
+     *  The body is everything between `ESC ]` and the terminator, verbatim
+     *  and unparsed (`11;rgb:ffff/ffff/ffff`). The editor's job ends at
+     *  keeping it out of the draft; deciding what a report MEANS belongs to
+     *  whoever asked the question.
+     */
+    onOsc(cb: (body: string) => void): void;
     onLine(cb: (line: string) => void): void;
     onSigint(cb: () => void): void;
     onEot(cb: () => void): void;

package/dist/editor.js

@@ -81,6 +81,11 @@ const TAB = 0x09;
  *  the geometry stays legal down to the compositor's enter gate (H = 4
  *  ⇒ one row, exactly today's minimum). */
 const N_MAX = 6;
+/** DC-7 — the longest OSC kiso will hold while waiting for a terminator.
+ *  The reports it reads are tens of bytes; anything past this is a
+ *  payload for someone else, and holding it is how the editor goes
+ *  deaf. */
+const OSC_MAX = 1024;
 /** The dim "…" — the ONE truncation mark: the horizontal scroll's
  *  prefix (unchanged) and the viewport's hidden-rows markers. */
 const ELLIPSIS = "\x1b[2m…\x1b[0m";
@@ -293,7 +298,9 @@ export class Editor {
     #queueState = () => [];
     #queuePop = null;
     #queuePopMode = false;
-    #pending = ""; // an incomplete ESC/CSI prefix across chunks
+    #pending = ""; // an incomplete ESC/CSI/OSC prefix across chunks
+    /** DC-7: the terminal's own reports (OSC). Never a keystroke. */
+    #oscCb = null;
     #decoder = new TextDecoder();
     #entered = false;
     #onData;
@@ -306,6 +313,17 @@ export class Editor {
             this.#closedResolve = resolve;
         });
     }
+    /**
+     *  DC-7 — the terminal answering a question kiso asked it.
+     *
+     *  The body is everything between `ESC ]` and the terminator, verbatim
+     *  and unparsed (`11;rgb:ffff/ffff/ffff`). The editor's job ends at
+     *  keeping it out of the draft; deciding what a report MEANS belongs to
+     *  whoever asked the question.
+     */
+    onOsc(cb) {
+        this.#oscCb = cb;
+    }
     onLine(cb) {
         this.#lineCb = cb;
         // Flush submits that arrived before the handler was wired (typed
@@ -1101,6 +1119,32 @@ export class Editor {
                     this.#csi(m[1], m[2]);
                     i += m[0].length + 1;
                 }
+                else if (rest.startsWith("]")) {
+                    // DC-7: an OSC is a message FROM the terminal — a background
+                    // colour answer, a theme-change notice, a clipboard report.
+                    // There was no branch for it, so the bytes fell through to
+                    // the literal-text path and the answer was typed into the
+                    // draft. The terminator is BEL **or** ST: Apple Terminal
+                    // answers `ESC ] 11 ; rgb:… BEL`, and ST is the standard.
+                    const end = /\x07|\x1b\\/.exec(rest);
+                    if (end === null) {
+                        const tail = text.slice(i);
+                        // The unterminated case is the SGR-1006 hazard by another
+                        // door: park it and a stream that never terminates grows
+                        // #pending forever until the editor goes deaf. A report
+                        // long enough to be a payload (OSC 52 carries a whole
+                        // clipboard) is not one we read, so past the cap it is
+                        // dropped rather than held.
+                        if (tail.length > OSC_MAX) {
+                            i = text.length;
+                            break;
+                        }
+                        this.#pending = tail; // incomplete OSC — wait for more
+                        break;
+                    }
+                    this.#oscCb?.(rest.slice(1, end.index));
+                    i += 1 + end.index + end[0].length;
+                }
                 else if (rest.startsWith("O")) {
                     i += 3; // SS3 (function keys) — ignored
                 }
@@ -2309,7 +2353,14 @@ export class Editor {
         // owns the keys, the brick otherwise): maxW = W − walls − lead.
         const lead = this.#panel !== null ? panelLead(this.#panel.view, this.#panel.phase, this.#panel.cursor, this.#panel.ask ?? undefined) : PROMPT;
         const leadW = leadWidth(lead);
-        const maxW = Math.max(1, W - leadW - 4); // W6: the box's walls (2+2) — the visible line fits the box's inner width; the "…" rides inside
+        // DC-17: ONE column, not four. W6's box took 2+2 and this kept
+        // reserving them after law 1.1 retired it — so the horizontal
+        // scroll fired three columns early, the cursor could never reach
+        // the row's last three cells, and the two width authorities the
+        // W23 contract says must never disagree disagreed by 3. The
+        // compositor's walk caps at W−1 (the drawn cursor's own cell);
+        // this is the same one column, on the same row.
+        const maxW = Math.max(1, W - leadW - 1);
         // KC1: the scroll is the CURSOR LINE's own offset — a single-line
         // buffer's line starts at 0, so the math is today's exactly. The
         // clamp catches a walk onto a line SHORTER than the old offset.

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export { Body, Dock, CURSOR_MARKER, type BodyOptions } from "./compositor.js";
 export { panelAffordance, panelBlockRows, panelLead, panelLeadPlain, panelLeadWidth, panelStatus, PICK_MAX, modelPickView, pickAffordance, pickBlockRows, pickLeadPlain, type PickOption, type PickResult, type PickRuntime, type PickSpec, type PanelArgs, type PanelFlavor, type PanelPhase, deletionRiskHint, SAFER_BACK, SAFER_DEGRADED, SAFER_DEGRADED_TRUNCATED, saferDegradedNote, type SaferAnswer, type SaferFailure, type SaferOption, type SaferRuntime, panelOptions, type PanelOption, type PanelOptionKind, type PanelState, type PanelVerdict, type PanelView, } from "./approval-panel.js";
 export { Container, foldLine, foldWords, visibleWidth, SPINNER, type Component, type FrameCtx } from "./components.js";
 export { Editor, MENU_ITEMS, PROMPT, PROMPT_WIDTH, displayWidth, charWidth, widthOf, type MenuItem, } from "./editor.js";
-export { bannerLines, COLOR_OFF, COLOR_ON, escapeTerminal, foldResult, foldThinking, kUnit, palette, renderEvent, renderRecap, renderResumeList, renderSessionLine, renderStatusLine, relativeTime, renderTerminalGap, renderToolSummary, TAGLINE, toolTarget, truncateRow, type Palette, type PathResolver, type RecapStats, type ResumeMeta, type RenderInput, type RenderResult, type RunUsage, } from "./render.js";
+export { bannerLines, COLOR_OFF, COLOR_ON, currentGround, setGround, escapeTerminal, foldResult, foldThinking, kUnit, palette, renderEvent, renderRecap, renderResumeList, renderSessionLine, renderStatusLine, relativeTime, renderTerminalGap, renderToolSummary, TAGLINE, toolTarget, truncateRow, type Palette, type PathResolver, type RecapStats, type ResumeMeta, type RenderInput, type RenderResult, type RunUsage, } from "./render.js";
 export { editFileDiff, truncateDiff, writeFileDiff, type DiffLine, type DiffResult } from "./diff.js";
 export { STATUS_GLYPHS, cacheHitPct, idleStatus, runningStatus, type StatusMeter } from "./status.js";
 export { contextRows, contextUnavailableRows, type ContextLedger } from "./context-ledger.js";
@@ -18,4 +18,5 @@ export { interactivePrompt, projectTrustRows, projectTrustView, projectUntrusted
 export { AT_CAP, AT_SKIP, AT_VISIBLE, atEmbed, atFilter, atPanelRows, atWindow, bandHeader, longestRun, type AtItem, type AtMatch } from "./at-picker.js";
 export { BADGE_GLYPH, idColumn, sessionAge, sessionBadge, sessionCounterRow, sessionFilter, sessionListFooter, sessionListRow, sessionNote, sessionPickerRows, sessionRow, type SessionCardView, type SessionPickState, } from "./session-picker.js";
 export { ASK_HEADER_CAP, ASK_MAX_OPTIONS, ASK_MAX_QUESTIONS, ASK_MIN_OPTIONS, askAffordance, askAnswers, askBlockRows, askCommitCustom, askDeclineAll, askDeclineList, askKey, askLeadPlain, askStart, askStatus, askView, type AskAnswer, type AskOption, type AskQuestion, type AskResult, type AskRuntime, type AskSpec, type AskStep, } from "./ask-panel.js";
+export { resolveGround, type Ground } from "@vincemakes/kiso-tui-cells";
 export { KEY_BINDINGS, PANEL_KEYS_ROW, displayVerb, extensionsBannerText, helpRows, keysHelpRow, keysSheetRows, unansweredAskView, type BannerExtension, type KeyBinding } from "./strings.js";

package/dist/index.js

@@ -15,7 +15,7 @@ export { panelAffordance, panelBlockRows, panelLead, panelLeadPlain, panelLeadWi
 PICK_MAX, modelPickView, pickAffordance, pickBlockRows, pickLeadPlain, deletionRiskHint, SAFER_BACK, SAFER_DEGRADED, SAFER_DEGRADED_TRUNCATED, saferDegradedNote, panelOptions, } from "./approval-panel.js";
 export { Container, foldLine, foldWords, visibleWidth, SPINNER } from "./components.js";
 export { Editor, MENU_ITEMS, PROMPT, PROMPT_WIDTH, displayWidth, charWidth, widthOf, } from "./editor.js";
-export { bannerLines, COLOR_OFF, COLOR_ON, escapeTerminal, foldResult, foldThinking, kUnit, palette, renderEvent, renderRecap, renderResumeList, renderSessionLine, renderStatusLine, relativeTime, renderTerminalGap, renderToolSummary, TAGLINE, toolTarget, truncateRow, } from "./render.js";
+export { bannerLines, COLOR_OFF, COLOR_ON, currentGround, setGround, escapeTerminal, foldResult, foldThinking, kUnit, palette, renderEvent, renderRecap, renderResumeList, renderSessionLine, renderStatusLine, relativeTime, renderTerminalGap, renderToolSummary, TAGLINE, toolTarget, truncateRow, } from "./render.js";
 export { editFileDiff, truncateDiff, writeFileDiff } from "./diff.js";
 // KC2 §5: the status rows' formatters — the CLI keeps the state and the
 // repaint, the terminal layer owns what the row says.
@@ -42,4 +42,5 @@ export { ASK_HEADER_CAP, ASK_MAX_OPTIONS, ASK_MAX_QUESTIONS, ASK_MIN_OPTIONS, as
 // honestly for a question nobody answered (the ① probe's surface).
 // TUI2-R1 (D): the keys sheet + THE key table — one source for the ?
 // overlay and /help's keys row.
+export { resolveGround } from "@vincemakes/kiso-tui-cells";
 export { KEY_BINDINGS, PANEL_KEYS_ROW, displayVerb, extensionsBannerText, helpRows, keysHelpRow, keysSheetRows, unansweredAskView } from "./strings.js";

package/dist/render.js

@@ -103,10 +103,10 @@ export function renderEvent(ev, prevThinking = false, resolvePath = (p) => p) {
                 prompt: false,
             };
         case "checklist": {
-            // ⑥: the durable checklist — the ▞ header accent (the recap's
+            // ⑥: the durable checklist — the ✦ header accent (the recap's
             // brick) + one brick-glyph line per item. Static line content:
             // byte-identical in pipes and NO_COLOR.
-            const lines = [`${p.bold}▞${p.reset} ${escapeTerminal(ev.header)}`];
+            const lines = [`${p.bold}✦${p.reset} ${escapeTerminal(ev.header)}`];
             for (const item of ev.items) {
                 const glyph = item.status === "pending" ? "□" : item.status === "active" ? "▖" : "▣";
                 lines.push(`  ${glyph} ${escapeTerminal(item.text)}`);
@@ -174,7 +174,7 @@ export function renderRecap(s) {
     // row's right side.
     if (s.mode === "plan") {
         const parts = ["plan ready", "/mode default executes", "/mode accept-edits auto-approves edits"];
-        return `${p.bold}▞${p.reset} ${parts.join(" · ")}\n`;
+        return `${p.bold}✦${p.reset} ${parts.join(" · ")}\n`;
     }
     const parts = [`${s.seconds}s`, `${s.tools} tool${s.tools === 1 ? "" : "s"}${s.edits > 0 ? ` (${s.edits} edit${s.edits === 1 ? "" : "s"})` : ""}`];
     if (s.usage.known) {
@@ -193,7 +193,7 @@ export function renderRecap(s) {
     }
     if (s.ctxLeftPct !== null)
         parts.push(`ctx left ~${Math.round(s.ctxLeftPct)}%`);
-    return `${p.bold}▞${p.reset} ${parts.join(" · ")}\n`;
+    return `${p.bold}✦${p.reset} ${parts.join(" · ")}\n`;
 }
 /** One-line summary of a session, for `kiso sessions`. */
 export function renderSessionLine(meta) {

package/dist/session-picker.d.ts

@@ -68,10 +68,23 @@ export declare function sessionAge(updatedAt: number, now: number): string;
  *  (the whole reason a filter-as-you-type picker is usable). */
 export declare function idColumn(cards: readonly SessionCardView[]): number;
 /**
- * The filter — the @ picker's muscle, aimed at the session id: a
+ * The filter — the @ picker's muscle, aimed at what the ROW SHOWS: a
  * case-insensitive SUBSEQUENCE, ranked by the longest contiguous run,
- * then by id length, then lexically. Identical determinism, identical
- * feel; a row under the cursor never moves because two ids tied.
+ * then by the haystack's length, then lexically. Identical determinism,
+ * identical feel; a row under the cursor never moves because two
+ * candidates tied.
+ *
+ * DC-13 (R2) — it used to search the ID and nothing else. That was
+ * coherent while the id was the row's leading column; the owner's
+ * ruling moved the TITLE there and retired the id from the row, and the
+ * filter did not follow. The result is the worst kind of search: typing
+ * what you can SEE returns nothing, and typing an id you cannot see
+ * narrows the list for a reason the screen never explains.
+ *
+ * Both are searched, title FIRST. The id stays a haystack because
+ * `kiso sessions` prints ids and a human who copied one must be able to
+ * paste it here; a title hit outranks an id hit at equal run length,
+ * because the title is what the person was reading.
  *
  * An empty query matches everything and keeps the caller's order (the
  * listing's newest-first), because "no query" is not a search — it is
@@ -107,10 +120,23 @@ export interface SessionPickState {
  * channel.
  */
 export declare function sessionPickerRows(state: SessionPickState, W: number, now: number): string[];
-/** Slice ③ — the `kiso sessions` TTY row: the SAME projection, printed
- *  rather than picked. No selection bar (nothing is selected on a
- *  listing) and no leading indent: this row starts at column 1 like
- *  every other line a shell command prints. */
+/**
+ * Slice ③ — the `kiso sessions` TTY row: the same projection, printed
+ * rather than picked. No selection bar (nothing is selected on a
+ * listing) and no leading indent: this row starts at column 1 like
+ * every other line a shell command prints.
+ *
+ * DC-16: it keeps the ID, and the picker row does not. Sharing one
+ * projection is what stops the two surfaces drifting — that is this
+ * module's whole design and it stays — but "share the projection" is
+ * not "be the same row". The owner's ruling was about the PICKER, where
+ * the id was four characters of machine identity in the column the eye
+ * lands on first. A LISTING is the surface you read to copy an id OUT
+ * of: it is what `/resume <id>` and the filter's id haystack both
+ * assume exists, and deleting the id here quietly falsified both. The
+ * id goes LAST and dim — present for the hand that needs it, out of the
+ * way of the eye that does not.
+ */
 export declare function sessionListRow(card: SessionCardView, W: number, now: number, idCol: number): string;
 /** Slice ③ — the listing's last line: the count, and the one thing the
  *  user can do next. */

package/dist/session-picker.js

@@ -24,7 +24,7 @@
  * listing render from ONE definition instead of two that drift.
  */
 import { escapeTerminal, palette } from "./render.js";
-import { visibleWidth, widthCut } from "./components.js";
+import { selectionBar, visibleWidth, widthCut } from "./components.js";
 import { atEmbed, bandHeader, longestRun, AT_VISIBLE, atWindow } from "./at-picker.js";
 /** The glyph per state — one cell each, so the badge column never
  *  shifts the id column (a column that moves per row reads as damage). */
@@ -105,10 +105,23 @@ export function idColumn(cards) {
     return Math.min(Math.max(w, 1), 24);
 }
 /**
- * The filter — the @ picker's muscle, aimed at the session id: a
+ * The filter — the @ picker's muscle, aimed at what the ROW SHOWS: a
  * case-insensitive SUBSEQUENCE, ranked by the longest contiguous run,
- * then by id length, then lexically. Identical determinism, identical
- * feel; a row under the cursor never moves because two ids tied.
+ * then by the haystack's length, then lexically. Identical determinism,
+ * identical feel; a row under the cursor never moves because two
+ * candidates tied.
+ *
+ * DC-13 (R2) — it used to search the ID and nothing else. That was
+ * coherent while the id was the row's leading column; the owner's
+ * ruling moved the TITLE there and retired the id from the row, and the
+ * filter did not follow. The result is the worst kind of search: typing
+ * what you can SEE returns nothing, and typing an id you cannot see
+ * narrows the list for a reason the screen never explains.
+ *
+ * Both are searched, title FIRST. The id stays a haystack because
+ * `kiso sessions` prints ids and a human who copied one must be able to
+ * paste it here; a title hit outranks an id hit at equal run length,
+ * because the title is what the person was reading.
  *
  * An empty query matches everything and keeps the caller's order (the
  * listing's newest-first), because "no query" is not a search — it is
@@ -120,17 +133,22 @@ export function sessionFilter(cards, query) {
     const lower = query.toLowerCase();
     const scored = [];
     for (const card of cards) {
-        const hit = atEmbed(card.id.toLowerCase(), lower);
+        const shown = (card.title ?? card.id).toLowerCase();
+        const onTitle = atEmbed(shown, lower);
+        const hit = onTitle ?? atEmbed(card.id.toLowerCase(), lower);
         if (hit === null)
             continue;
-        scored.push({ card, run: longestRun(hit) });
+        const key = onTitle !== null ? shown : card.id;
+        scored.push({ card, run: longestRun(hit), onTitle: onTitle !== null, key });
     }
     scored.sort((a, b) => {
         if (a.run !== b.run)
             return b.run - a.run;
-        if (a.card.id.length !== b.card.id.length)
-            return a.card.id.length - b.card.id.length;
-        return a.card.id < b.card.id ? -1 : a.card.id > b.card.id ? 1 : 0;
+        if (a.onTitle !== b.onTitle)
+            return a.onTitle ? -1 : 1;
+        if (a.key.length !== b.key.length)
+            return a.key.length - b.key.length;
+        return a.key < b.key ? -1 : a.key > b.key ? 1 : 0;
     });
     return scored.map((s) => s.card);
 }
@@ -173,27 +191,29 @@ function rowSpans(card, budget, now, idCol) {
         text += `${sessionBadge(card.badge)} `;
         w += 2;
     }
-    const id = widthCut(escapeTerminal(card.id), Math.max(1, Math.min(idCol, budget - w)));
-    put(id, id);
-    // the column pad only survives while there is room for what follows
-    const pad = Math.max(0, Math.min(idCol - visibleWidth(id), budget - w));
-    put(" ".repeat(pad), " ".repeat(pad));
-    const meta = `  ${sessionAge(card.updatedAt, now)} · ${card.turns} turn${card.turns === 1 ? "" : "s"}`;
-    put(meta, `${p.dim}${meta}${p.reset}`);
-    // REL-0152-D6b: the TITLE — the only span on this row that answers
-    // "which conversation is this?". It goes after the meta and before
-    // the note, and it is bounded so the note (which can be the one that
-    // demands an action) still has room at ordinary widths; on a narrow
-    // terminal `put` drops whichever no longer fits, in that order.
-    const title = card.title ?? "";
+    // R2 (owner, 2026-08-27) — the TITLE LEADS and the id is gone.
+    //
+    // The id was four characters of machine identity sitting in the column
+    // the eye lands on first, and the title — the only span that answers
+    // "which conversation is this?" — came after the meta. The order is
+    // reversed: the title takes the left edge, the age and turn count go
+    // right and dim, and the note keeps its reserve. The id is still
+    // reachable where it is USED (`kiso sessions`, `/status`) — it left
+    // the row it was never the subject of.
+    // a row with no title at all falls back to the id: the id left the
+    // row it was never the subject of, but a row must still IDENTIFY
+    // something — an anonymous row is not a picker row. (In practice
+    // `sessionTitle` returns "(no prompt)" rather than "", so this is
+    // the seam for callers that build a card without records.)
+    const title = card.title ?? card.id;
     if (title !== "") {
         const room = Math.max(0, Math.min(budget - w - 3 - NOTE_RESERVE, TITLE_MAX));
         const cut = widthCut(escapeTerminal(title), room);
-        if (cut !== "") {
-            put("  ", "  ");
+        if (cut !== "")
             put(cut, `${p.bold}${cut}${p.reset}`);
-        }
     }
+    const meta = `  ${sessionAge(card.updatedAt, now)} · ${card.turns} turn${card.turns === 1 ? "" : "s"}`;
+    put(meta, `${p.dim}${meta}${p.reset}`);
     const note = widthCut(sessionNote(card), Math.max(0, budget - w - 3));
     if (note !== "") {
         // the ? note carries the warn tint — the row's own words are what
@@ -221,8 +241,10 @@ export function sessionRow(card, selected, W, now, idCol) {
     const { text, width } = rowSpans(card, Math.max(0, W - 2), now, idCol);
     if (!selected)
         return `  ${text}`;
-    const inner = text.replaceAll(p.reset, `${p.reset}${p.rv}`);
-    return `${p.rv} ${inner}${" ".repeat(Math.max(0, W - width - 2))} ${p.rvEnd}`;
+    // R2: one bar, in one place — and with it §2.1's rule that dim never
+    // sits on the wash. The age/turns/note spans were dim INSIDE the bar,
+    // grey on grey, on the row the cursor was pointing at.
+    return selectionBar(text, width, W);
 }
 /** The counter row — the SELECTION's 1-based place in the whole
  *  filtered list, which the visible window cannot tell the user. */
@@ -253,12 +275,30 @@ export function sessionPickerRows(state, W, now) {
     rows.push(sessionCounterRow(state.selected, state.matches.length, W));
     return rows;
 }
-/** Slice ③ — the `kiso sessions` TTY row: the SAME projection, printed
- *  rather than picked. No selection bar (nothing is selected on a
- *  listing) and no leading indent: this row starts at column 1 like
- *  every other line a shell command prints. */
+/**
+ * Slice ③ — the `kiso sessions` TTY row: the same projection, printed
+ * rather than picked. No selection bar (nothing is selected on a
+ * listing) and no leading indent: this row starts at column 1 like
+ * every other line a shell command prints.
+ *
+ * DC-16: it keeps the ID, and the picker row does not. Sharing one
+ * projection is what stops the two surfaces drifting — that is this
+ * module's whole design and it stays — but "share the projection" is
+ * not "be the same row". The owner's ruling was about the PICKER, where
+ * the id was four characters of machine identity in the column the eye
+ * lands on first. A LISTING is the surface you read to copy an id OUT
+ * of: it is what `/resume <id>` and the filter's id haystack both
+ * assume exists, and deleting the id here quietly falsified both. The
+ * id goes LAST and dim — present for the hand that needs it, out of the
+ * way of the eye that does not.
+ */
 export function sessionListRow(card, W, now, idCol) {
-    return rowSpans(card, W, now, idCol).text;
+    const p = palette();
+    const tail = `  ${card.id}`;
+    const { text, width } = rowSpans(card, Math.max(1, W - visibleWidth(tail)), now, idCol);
+    if (width + visibleWidth(tail) > W)
+        return text; // a terminal too narrow for both keeps the words
+    return `${text}${p.dim}${tail}${p.reset}`;
 }
 /** Slice ③ — the listing's last line: the count, and the one thing the
  *  user can do next. */

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@vincemakes/kiso-tui",
-	"version": "0.16.2",
-	"description": "kiso tui \u2014 the pure terminal layer (cell renderer, dock, raw editor, diff, palette). Zero runtime dependencies: input is data, output is bytes.",
+	"version": "0.16.4",
+	"description": "kiso tui — the pure terminal layer (cell renderer, dock, raw editor, diff, palette). Zero runtime dependencies: input is data, output is bytes.",
 	"type": "module",
 	"license": "MIT",
 	"exports": {
@@ -35,6 +35,6 @@
 	},
 	"homepage": "https://github.com/vincemakes/kiso/tree/main/packages/tui#readme",
 	"dependencies": {
-		"@vincemakes/kiso-tui-cells": "0.16.2"
+		"@vincemakes/kiso-tui-cells": "0.16.4"
 	}
 }