@cspeach/cli 1.1.33 → 1.1.35

package/dist/ui/widgets/ask-card.js

@@ -31,7 +31,9 @@ import { getGlyphs } from '../../renderer/glyphs.js';
 import { truncateToWidth, uiWidth } from '../../renderer/ui-width.js';
 import { roleProps, selectedProps } from '../role-props.js';
 import { sanitizeControlChars } from '../../renderer/sanitize.js';
+import { wrapRows } from '../../renderer/wrap-rows.js';
 import { answerDisplayText } from '../ask-answer-text.js';
+import { CardFrame } from './confirm-card.js';
 /** Option rows visible at once — the rest scroll. */
 export const VISIBLE_OPTION_ROWS = 5;
 /**
@@ -58,75 +60,26 @@ function fit(text, cells) {
 export const QUESTION_MAX_ROWS = 3;
 /** Context wraps too; it gets at least one row per line and at most this many in all (or its line count, if larger). */
 export const CONTEXT_MAX_ROWS = 6;
-const GRAPHEMES = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
-/** The longest grapheme-whole prefix of `word` that fits `cells`. */
-function takeCells(word, cells) {
-    let out = '';
-    let used = 0;
-    for (const { segment } of GRAPHEMES.segment(word)) {
-        const w = stringWidth(segment);
-        if (used + w > cells && out.length > 0)
-            break;
-        out += segment;
-        used += w;
-        if (used >= cells)
-            break;
-    }
-    return out;
-}
-/**
- * Round 4 item 8b — word-wrap card text to `cells` per row, at most `maxRows`
- * rows (the last row then ends with the `more` glyph). A question cut to one
- * row hid the model's suggestion ("…Sugges…"); it now wraps instead.
- */
-export function wrapCardText(text, cells, maxRows) {
-    const clean = sanitize(text).replace(/\t/g, '  ').replace(/\r?\n/g, ' ');
-    const width = Math.max(1, cells);
-    const indent = /^ */.exec(clean)[0].slice(0, Math.max(0, width - 1));
-    const rows = [];
-    let cur = indent;
-    const curEmpty = () => cur.length === 0 || cur === indent;
-    for (let word of clean.trim().split(/ +/).filter((w) => w.length > 0)) {
-        while (stringWidth(word) > width) {
-            if (!curEmpty()) {
-                rows.push(cur);
-                cur = '';
-            }
-            const head = takeCells(word, width - stringWidth(cur));
-            rows.push(cur + head);
-            cur = '';
-            word = word.slice(head.length);
-        }
-        if (word.length === 0)
-            continue;
-        if (curEmpty())
-            cur += word;
-        else if (stringWidth(cur) + 1 + stringWidth(word) <= width)
-            cur += ` ${word}`;
-        else {
-            rows.push(cur);
-            cur = word;
-        }
-    }
-    if (!curEmpty() || rows.length === 0)
-        rows.push(cur);
-    const max = Math.max(1, maxRows);
-    if (rows.length <= max)
-        return rows;
-    const kept = rows.slice(0, max);
-    kept[max - 1] = truncateToWidth(`${rows.slice(max - 1).join(' ')} `, width);
-    return kept;
-}
-/** The question rows, with the multi-select suffix kept whole on the last row. */
-function questionRows(question, suffix, cells) {
+/** Fix batch 2026-10-12 — an option label wraps onto at most this many rows. */
+export const LABEL_MAX_ROWS = 2;
+/** …and its description too. */
+export const DESCRIPTION_MAX_ROWS = 2;
+/** Descriptions sit under the label text: paddingX + "❯ 1. ". */
+const DESCRIPTION_INDENT = '     ';
+/** Task 4 — over budget the context folds to this many rows… */
+export const CONTEXT_FOLDED_ROWS = 3;
+/** …and then the question to this many. */
+export const QUESTION_FOLDED_ROWS = 2;
+/** The question rows (at most `maxRows`), with the multi-select suffix kept whole on the last row. */
+function questionRows(question, suffix, cells, maxRows = QUESTION_MAX_ROWS) {
     if (!suffix)
-        return wrapCardText(question, cells, QUESTION_MAX_ROWS);
-    const rows = wrapCardText(question, cells, QUESTION_MAX_ROWS);
+        return wrapRows(question, cells, maxRows);
+    const rows = wrapRows(question, cells, maxRows);
     const last = rows[rows.length - 1];
     if (stringWidth(last) + stringWidth(suffix) <= cells) {
         rows[rows.length - 1] = last + suffix;
     }
-    else if (rows.length < QUESTION_MAX_ROWS) {
+    else if (rows.length < maxRows) {
         rows.push(suffix.trimStart());
     }
     else {
@@ -134,21 +87,70 @@ function questionRows(question, suffix, cells) {
     }
     return rows;
 }
-/** Context rows: every line keeps at least one row; wrapping fills the rest of the budget. */
-function contextRows(context, cells) {
+/**
+ * Context rows: every line keeps at least one row; wrapping fills the rest of
+ * the budget. Folded (`maxRows` below CONTEXT_MAX_ROWS, Task 4) the context
+ * takes that many rows at most: more lines than rows run together.
+ */
+function contextRows(context, cells, maxRows = CONTEXT_MAX_ROWS) {
     if (!context)
         return [];
-    const lines = context.split('\n');
-    let budget = Math.max(lines.length, CONTEXT_MAX_ROWS);
+    let lines = context.split('\n');
+    if (maxRows < CONTEXT_MAX_ROWS && lines.length > maxRows)
+        lines = [lines.join(' ')];
+    let budget = maxRows < CONTEXT_MAX_ROWS ? maxRows : Math.max(lines.length, CONTEXT_MAX_ROWS);
     const out = [];
     lines.forEach((line, i) => {
         const reserve = lines.length - i - 1; // one row for each line still to come
-        const rows = wrapCardText(line, cells, Math.max(1, budget - reserve));
+        const rows = wrapRows(line, cells, Math.max(1, budget - reserve));
         out.push(...rows);
         budget -= rows.length;
     });
     return out;
 }
+/**
+ * Lay out one option at `inner` cells. The label wraps onto LABEL_MAX_ROWS
+ * under its own text; the (recommended) / (default) suffix stays whole on
+ * the last row (a new row when there is room for one, else the label is cut
+ * to make room; with no room at all the label wins and the suffix drops).
+ * The description wraps onto DESCRIPTION_MAX_ROWS dim rows under the label.
+ */
+export function optionRows(o, idx, q, inner, layout) {
+    const prefixWidth = 2 + `${idx + 1}. `.length + (q.multiSelect ? stringWidth(`${getGlyphs().tickOff} `) : 0);
+    const avail = Math.max(1, inner - prefixWidth);
+    const wantRec = o.recommended === true && !/\brecommended\b/i.test(o.label);
+    const def = q.defaultValue !== undefined && o.value === q.defaultValue;
+    const suffix = (wantRec ? REC : '') + (def ? DEFAULT_SUFFIX : '');
+    let label = wrapRows(o.label, avail, layout.labelRows);
+    let rec = wantRec;
+    let showDef = def;
+    if (suffix) {
+        // The suffix words are wrapped WITH the label; when they land whole at
+        // the end, they come off the text again and are drawn dim on that row.
+        const joined = wrapRows(`${sanitizeControlChars(o.label)}${suffix}`, avail, layout.labelRows);
+        const last = joined[joined.length - 1];
+        const bare = suffix.trimStart();
+        if (last.endsWith(bare) && !last.endsWith(getGlyphs().more)) {
+            const text = last.slice(0, last.length - bare.length).trimEnd();
+            label = [...joined.slice(0, -1), text];
+        }
+        else if (avail - stringWidth(suffix) >= 1) {
+            // Too long for the rows: the label is cut so the suffix stays whole.
+            const lastLabel = label[label.length - 1];
+            label = [...label.slice(0, -1), truncateToWidth(`${lastLabel} `, avail - stringWidth(suffix))];
+        }
+        else {
+            rec = false;
+            showDef = false; // no room at all: the label wins
+        }
+    }
+    const description = layout.descriptionRows > 0 && o.description
+        ? wrapRows(o.description, Math.max(1, inner - DESCRIPTION_INDENT.length), layout.descriptionRows).map((r) => `${DESCRIPTION_INDENT}${r}`)
+        : [];
+    return { label, rec, def: showDef, description, prefixWidth };
+}
+/** Rows one option takes on the card. */
+const optionHeight = (r) => r.label.length + r.description.length;
 export function toCardQuestions(request) {
     if ('questions' in request) {
         return request.questions.map((q) => {
@@ -179,51 +181,106 @@ export function toCardQuestions(request) {
             keys: request.keys,
         }];
 }
+/**
+ * The footer. Task 4: the same words as ConfirmCard ("1-N picks · ↑↓ move ·
+ * Enter chooses · Esc cancels"), with the real N (rows a digit reaches, at
+ * most 9). Multi-select says digits and Space tick; single-key answers add
+ * "keys y/n" as ConfirmCard does. Text rows keep "Enter submits".
+ */
 export function askCardHint(kind, opts = {}) {
     const nav = opts.multiQuestion ? ['Tab next question'] : [];
+    const digits = `1-${Math.max(1, Math.min(9, opts.count ?? 9))}`;
+    const keys = opts.keys && opts.keys.length > 0 ? [`keys ${opts.keys.join('/')}`] : [];
     switch (kind) {
         case 'text': return ['Enter submits', ...nav, 'Esc cancels'].join(' · ');
         case 'other': return ['Enter submits', ...nav, 'Esc goes back to the options'].join(' · ');
         case 'multi':
-            // Kept under 78 cells (an 80-column card) so it never truncates; the
-            // "(choose one or more)" question suffix carries the multi-select cue.
-            return ['Space or 1-9 ticks a row', 'Enter confirms', ...nav, 'Esc cancels'].join(' · ');
+            // The "(choose one or more)" question suffix carries the multi-select cue.
+            return [`${digits} or Space ticks`, '↑↓ move', 'Enter chooses', ...nav, 'Esc cancels', ...keys].join(' · ');
         default:
-            return ['↑↓ move', '1-9 or Enter picks', ...nav, 'Esc cancels'].join(' · ');
+            return [`${digits} picks`, '↑↓ move', 'Enter chooses', ...nav, 'Esc cancels', ...keys].join(' · ');
     }
 }
-export const REVIEW_HINT = '↑↓ move · 1-2 or Enter chooses · ← back to edit · Esc cancels';
+export const REVIEW_HINT = '1-2 picks · ↑↓ move · Enter chooses · ← back to edit · Esc cancels';
 const REVIEW_CHOICES = ['Submit answers', 'Cancel'];
 const MULTI_SUFFIX = ' (choose one or more)';
 const REC = ' (recommended)';
-/**
- * Upper bound on the rows this card renders — the card's share of the
- * live-area height budget (spec §2; liveBudget decides showDescriptions).
- * Worst case over every question screen, plus the Review screen.
- */
-export function estimateAskCardRows(request, showDescriptions, width = uiWidth()) {
-    const qs = toCardQuestions(request);
+const DEFAULT_SUFFIX = ' (default)';
+const suffixText = (r) => (r.rec ? REC : '') + (r.def ? DEFAULT_SUFFIX : '');
+/** Content width: the card width less the frame's side and paddingX on both sides (Task 4). */
+const askInner = (width) => Math.max(1, width - 4);
+/** The frame's top and bottom edges. */
+const FRAME_ROWS = 2;
+/** The card's rows at `layout` — worst case over every question screen, plus the Review screen. */
+function askRowsFor(qs, inner, layout) {
     const chipRows = qs.length > 1 ? 2 : 0; // tab row + its blank line
-    const inner = Math.max(1, width - 2);
     let worst = 0;
     for (const q of qs) {
-        const ctx = contextRows(q.context, inner).length;
+        const ctx = contextRows(q.context, inner, layout.contextRows).length;
         const suffix = q.multiSelect && inner - MULTI_SUFFIX.length >= 1 ? MULTI_SUFFIX : '';
-        const qRows = questionRows(q.question, suffix, inner).length;
+        const qRows = questionRows(q.question, suffix, inner, layout.questionRows).length;
         let body = 2; // margin + the text input row
         if (!q.freeText) {
-            const shown = Math.min(q.options.length, VISIBLE_OPTION_ROWS);
-            const described = showDescriptions ? Math.min(shown, q.options.filter((o) => o.description).length) : 0;
+            // Every wrapped label and description row counts; with more options
+            // than the window shows, the tallest window of VISIBLE_OPTION_ROWS.
+            const heights = q.options.map((o, i) => optionHeight(optionRows(o, i, q, inner, layout)));
+            const span = Math.min(heights.length, VISIBLE_OPTION_ROWS);
+            let tallest = 0;
+            for (let start = 0; start + span <= heights.length; start++) {
+                tallest = Math.max(tallest, heights.slice(start, start + span).reduce((x, y) => x + y, 0));
+            }
             const arrows = q.options.length > VISIBLE_OPTION_ROWS ? 2 : 0;
-            body = 1 + shown + described + arrows + (q.otherRow ? 1 : 0);
+            body = 1 + tallest + arrows + (q.otherRow ? 1 : 0);
         }
-        worst = Math.max(worst, chipRows + qRows + ctx + body + 2); // question + body + margin + hint
+        worst = Math.max(worst, chipRows + qRows + ctx + body + 1 + FRAME_ROWS); // question + body + hint + frame
     }
     if (qs.length > 1) {
-        worst = Math.max(worst, chipRows + 1 + qs.length + 1 + REVIEW_CHOICES.length + 2);
+        // title + one row per answer + margin + choices + hint + frame
+        worst = Math.max(worst, chipRows + 1 + qs.length + 1 + REVIEW_CHOICES.length + 1 + FRAME_ROWS);
     }
     return worst;
 }
+/**
+ * The one place the card's height budget is decided (fix round 1, review
+ * I1). Labels and descriptions wrap to their full rows; when the card would
+ * be taller than `maxRows` (App: the live area's room for a card), it folds
+ * in this order until it fits: labels to 1 row, descriptions to 1 row, no
+ * descriptions, then (Task 4) the context to 3 rows and the question to 2.
+ * `showDescriptions` false (liveBudget) starts with none. Frame rows count.
+ */
+export function askCardLayout(request, showDescriptions, width = uiWidth(), maxRows) {
+    const layout = {
+        labelRows: LABEL_MAX_ROWS,
+        descriptionRows: showDescriptions ? DESCRIPTION_MAX_ROWS : 0,
+        contextRows: CONTEXT_MAX_ROWS,
+        questionRows: QUESTION_MAX_ROWS,
+    };
+    if (maxRows === undefined)
+        return layout;
+    const qs = toCardQuestions(request);
+    const inner = askInner(width);
+    const folds = [
+        (l) => { l.labelRows = 1; },
+        (l) => { l.descriptionRows = Math.min(l.descriptionRows, 1); },
+        (l) => { l.descriptionRows = 0; },
+        (l) => { l.contextRows = CONTEXT_FOLDED_ROWS; },
+        (l) => { l.questionRows = QUESTION_FOLDED_ROWS; },
+    ];
+    for (const fold of folds) {
+        if (askRowsFor(qs, inner, layout) <= maxRows)
+            break;
+        fold(layout);
+    }
+    return layout;
+}
+/**
+ * Upper bound on the rows this card renders — the card's share of the
+ * live-area height budget (spec §2; liveBudget decides showDescriptions).
+ * With `maxRows`, the height after askCardLayout's folds.
+ */
+export function estimateAskCardRows(request, showDescriptions, width = uiWidth(), maxRows) {
+    return askRowsFor(toCardQuestions(request), askInner(width), askCardLayout(request, showDescriptions, width, maxRows));
+}
 /**
  * Cut differently-styled segments of ONE row to `cells` in total: whole
  * segments while they fit, then the one that overflows ends with the `more`
@@ -250,7 +307,7 @@ function fitSegments(segs, cells) {
     }
     return out;
 }
-export function AskCard({ request, width, showDescriptions, onResolveV1, onResolveForm, onInterruptTurn }) {
+export function AskCard({ request, width, showDescriptions, maxRows, onResolveV1, onResolveForm, onInterruptTurn }) {
     useReclaimRawStdin();
     const g = getGlyphs();
     const dim = roleProps('dim');
@@ -370,6 +427,13 @@ export function AskCard({ request, width, showDescriptions, onResolveV1, onResol
             return; // v2: ignored (today)
         }
         // custom marks the free-text ESCAPE on an optioned question only.
+        // Task 4 (m3): on a multi-select question the ticked options are kept.
+        // The answer is their labels, then the typed words (all typed text).
+        if (onOther && q?.multiSelect) {
+            const ticked = q.options.filter((o) => ticks[focus].has(o.value)).map((o) => o.label);
+            answerAndAdvance(focus, [...ticked, trimmed].join(', '), true);
+            return;
+        }
         answerAndAdvance(focus, trimmed, onOther);
     };
     useInput((input, key) => {
@@ -382,8 +446,12 @@ export function AskCard({ request, width, showDescriptions, onResolveV1, onResol
         if (key.ctrl && input === 'c') {
             const first = !done.current;
             cancel();
-            if (first)
+            if (first) {
+                // Task 4 (m2): a caller asking a series (the spec-gap blockers) stops the rest.
+                if (isForm)
+                    request.onInterrupt?.();
                 onInterruptTurn?.();
+            }
             return;
         }
         if (key.escape) {
@@ -472,7 +540,10 @@ export function AskCard({ request, width, showDescriptions, onResolveV1, onResol
             pickEnter();
     }, { isActive: true });
     const numbered = (i) => `${i + 1}. `;
-    const inner = Math.max(1, width - 2); // paddingX={1} on both sides
+    const inner = askInner(width); // the frame's sides and paddingX={1}
+    const frameHeader = isForm ? request.frameHeader : undefined;
+    // The same fold as estimateAskCardRows, so the drawn card is the estimated card.
+    const layout = askCardLayout(request, showDescriptions, width, maxRows);
     const chipRow = n > 1 ? (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { wrap: "truncate-end", children: fitSegments([
                 ...questions.map((qq, i) => ({
                     text: `${i > 0 ? '  ' : ''}${answers[i] !== null ? g.answered : g.pending} ${fit(qq.header, inner)}`,
@@ -483,7 +554,7 @@ export function AskCard({ request, width, showDescriptions, onResolveV1, onResol
     if (!q) {
         // Review step (forms with 2+ questions, all answered).
         const headerCol = Math.min(14, Math.max(...questions.map((qq) => stringWidth(fit(qq.header, inner)))) + 2);
-        return (_jsxs(Box, { flexDirection: "column", width: width, paddingX: 1, flexShrink: 0, children: [chipRow, _jsx(Text, { bold: true, wrap: "truncate-end", children: fit('Review your answers', inner) }), questions.map((qq, i) => {
+        return (_jsxs(CardFrame, { tag: "QUESTION", header: frameHeader, width: width, children: [chipRow, _jsx(Text, { bold: true, wrap: "truncate-end", children: fit('Review your answers', inner) }), questions.map((qq, i) => {
                     const a = answers[i];
                     const head = fit(qq.header, headerCol - 2);
                     const cell = `  ${head}${' '.repeat(Math.max(0, headerCol - stringWidth(head)))}`;
@@ -492,30 +563,35 @@ export function AskCard({ request, width, showDescriptions, onResolveV1, onResol
                 }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: REVIEW_CHOICES.map((label, i) => {
                         const cur = i === reviewCursor;
                         return (_jsx(Text, { wrap: "truncate-end", ...(cur ? selectedProps() : {}), children: fit(`${cur ? `${g.cursor} ` : '  '}${numbered(i)}${label}`, inner) }, `rc-${i}`));
-                    }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { ...dim, wrap: "truncate-end", children: fit(REVIEW_HINT, inner) }) })] }));
+                    }) }), _jsx(Text, { ...dim, wrap: "truncate-end", children: fit(REVIEW_HINT, inner) })] }));
     }
     const winStart = Math.max(0, Math.min(cursor - 3, q.options.length - VISIBLE_OPTION_ROWS));
     const visible = q.options.slice(winStart, winStart + VISIBLE_OPTION_ROWS);
     const below = Math.max(0, q.options.length - (winStart + VISIBLE_OPTION_ROWS));
-    const inputWidth = Math.max(8, width - 2 - 2 - `${rowCount}. `.length - 1);
-    const contextLines = contextRows(q.context, inner);
+    const inputWidth = Math.max(8, inner - 2 - `${rowCount}. `.length - 1);
+    const contextLines = contextRows(q.context, inner, layout.contextRows);
     const hintKind = q.freeText ? 'text' : onOther ? 'other' : q.multiSelect ? 'multi' : 'pick';
     // The multi-select suffix is the card's only multi cue: it stays whole and
     // the question is cut instead (the same rule as "(recommended)" below).
     const suffix = q.multiSelect && inner - MULTI_SUFFIX.length >= 1 ? MULTI_SUFFIX : '';
-    const questionLines = questionRows(q.question, suffix, inner);
-    return (_jsxs(Box, { flexDirection: "column", width: width, paddingX: 1, flexShrink: 0, children: [chipRow, questionLines.map((line, i) => (_jsx(Text, { bold: true, wrap: "truncate-end", children: line }, `q-${i}`))), contextLines.map((line, i) => (_jsx(Text, { ...dim, wrap: "truncate-end", children: line }, `ctx-${i}`))), q.freeText ? (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { ...roleProps('sap'), children: `${g.cursor} ` }), _jsx(TextInput, { value: drafts[focus], onChange: setDraft, onSubmit: onTextSubmit, maxDisplayWidth: inputWidth })] })) : (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [winStart > 0 && _jsx(Text, { ...dim, wrap: "truncate-end", children: `  ↑ ${winStart} more` }), visible.map((o, vi) => {
+    const questionLines = questionRows(q.question, suffix, inner, layout.questionRows);
+    const hint = askCardHint(hintKind, {
+        multiQuestion: n > 1,
+        count: rowCount,
+        keys: Object.keys(q.keys ?? {}).filter((k) => k.length === 1),
+    });
+    // Task 4 — the same frame as ConfirmCard: QUESTION tag (plus the optional
+    // header) on the top edge, the hint right under the options.
+    return (_jsxs(CardFrame, { tag: "QUESTION", header: frameHeader, width: width, children: [chipRow, questionLines.map((line, i) => (_jsx(Text, { bold: true, wrap: "truncate-end", children: line }, `q-${i}`))), contextLines.map((line, i) => (_jsx(Text, { ...dim, wrap: "truncate-end", children: line }, `ctx-${i}`))), q.freeText ? (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { ...roleProps('sap'), children: `${g.cursor} ` }), _jsx(TextInput, { value: drafts[focus], onChange: setDraft, onSubmit: onTextSubmit, maxDisplayWidth: inputWidth })] })) : (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [winStart > 0 && _jsx(Text, { ...dim, wrap: "truncate-end", children: `  ↑ ${winStart} more` }), visible.map((o, vi) => {
                         const idx = winStart + vi;
                         const cur = !onOther && idx === cursor;
-                        const rec = o.recommended === true && !/\brecommended\b/i.test(o.label);
                         const tick = q.multiSelect ? `${ticks[focus].has(o.value) ? g.tickOn : g.tickOff} ` : '';
                         const prefix = `${cur ? `${g.cursor} ` : '  '}${numbered(idx)}${tick}`;
-                        const avail = inner - stringWidth(prefix);
-                        const label = sanitize(o.label);
-                        // (recommended) stays whole: the label is cut first; with no room
-                        // for both, the label wins and the dim suffix is dropped.
-                        const showRec = rec && avail - REC.length >= 1;
-                        const shownLabel = truncateToWidth(label, showRec ? avail - REC.length : avail);
-                        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { wrap: "truncate-end", ...(cur ? selectedProps() : {}), children: [prefix, shownLabel, showRec ? _jsx(Text, { ...dim, children: REC }) : null, q.defaultValue !== undefined && o.value === q.defaultValue ? _jsx(Text, { ...dim, children: " (default)" }) : null] }), showDescriptions && o.description ? (_jsx(Text, { ...dim, wrap: "truncate-end", children: fit(`     ${o.description}`, inner) })) : null] }, `opt-${idx}`));
-                    }), below > 0 && _jsx(Text, { ...dim, wrap: "truncate-end", children: `  ↓ ${below} more` }), q.otherRow ? (_jsxs(Box, { children: [_jsxs(Text, { wrap: "truncate-end", ...(onOther ? selectedProps() : {}), children: [onOther ? `${g.cursor} ` : '  ', numbered(q.options.length)] }), onOther ? (_jsx(TextInput, { value: drafts[focus], onChange: setDraft, onSubmit: onTextSubmit, placeholder: `Type something else${g.more}`, maxDisplayWidth: inputWidth })) : (_jsx(Text, { ...dim, wrap: "truncate-end", children: `Type something else${g.more}` }))] })) : null] })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { ...dim, wrap: "truncate-end", children: fit(askCardHint(hintKind, { multiQuestion: n > 1 }), inner) }) })] }));
+                        const r = optionRows(o, idx, q, inner, layout);
+                        const pad = ' '.repeat(r.prefixWidth);
+                        const lastRow = r.label.length - 1;
+                        return (_jsxs(Box, { flexDirection: "column", children: [r.label.map((row, j) => (_jsxs(Text, { wrap: "truncate-end", ...(cur ? selectedProps() : {}), children: [j === 0 ? prefix : pad, row, j === lastRow && (r.rec || r.def) ? (
+                                        // A suffix that wrapped onto a row of its own sits under the label text, no leading blank.
+                                        _jsx(Text, { ...dim, children: row === '' ? suffixText(r).trimStart() : suffixText(r) })) : null] }, `l-${j}`))), r.description.map((row, j) => (_jsx(Text, { ...dim, wrap: "truncate-end", children: row }, `d-${j}`)))] }, `opt-${idx}`));
+                    }), below > 0 && _jsx(Text, { ...dim, wrap: "truncate-end", children: `  ↓ ${below} more` }), q.otherRow ? (_jsxs(Box, { children: [_jsxs(Text, { wrap: "truncate-end", ...(onOther ? selectedProps() : {}), children: [onOther ? `${g.cursor} ` : '  ', numbered(q.options.length)] }), onOther ? (_jsx(TextInput, { value: drafts[focus], onChange: setDraft, onSubmit: onTextSubmit, placeholder: `Type something else${g.more}`, maxDisplayWidth: inputWidth })) : (_jsx(Text, { ...dim, wrap: "truncate-end", children: `Type something else${g.more}` }))] })) : null] })), _jsx(Text, { ...dim, wrap: "truncate-end", children: fit(hint, inner) })] }));
 }

package/dist/ui/widgets/coaching-picker.js

@@ -7,7 +7,26 @@ import { getGlyphs } from '../../renderer/glyphs.js';
 import { roleProps, selectedProps } from '../role-props.js';
 import { truncateToWidth, uiWidth } from '../../renderer/ui-width.js';
 import { sanitizeControlChars } from '../../renderer/sanitize.js';
+import { wrapRows } from '../../renderer/wrap-rows.js';
 export const COACHING_HINT = '↑↓ move · 1-9/Enter picks · Enter with nothing selected cancels · Esc cancels';
+/** Fix batch 2026-10-12 — "Pick if:" tells the skills apart, so it wraps onto this many rows. */
+export const PICK_IF_MAX_ROWS = 2;
+const PICK_IF_INDENT = '     ';
+/** The highlighted option's "Pick if:" rows at content width `inner`, each carrying its indent. */
+export function pickIfRows(whenToPick, inner) {
+    return wrapRows(`Pick if: ${whenToPick}`, Math.max(1, inner - PICK_IF_INDENT.length), PICK_IF_MAX_ROWS)
+        .map((r) => `${PICK_IF_INDENT}${r}`);
+}
+/**
+ * The card's rendered height (live-area budget): title + gap + one row per
+ * option + the tallest "Pick if:" (only the highlighted option shows one) +
+ * gap + hint.
+ */
+export function estimateCoachingPickerRows(params, width = uiWidth()) {
+    const inner = Math.max(1, width - 2);
+    const pickIf = Math.max(0, ...params.options.map((o) => (o.whenToPick ? pickIfRows(o.whenToPick, inner).length : 0)));
+    return 4 + params.options.length + pickIf;
+}
 /**
  * Sanitize, then cut to `cells` terminal cells (same rule as the ask card):
  * the prompt is user text and must not drive the terminal; rows are pre-cut
@@ -78,6 +97,8 @@ export function CoachingPicker({ params, onResolve, width }) {
     return (_jsxs(Box, { flexDirection: "column", width: w, paddingX: 1, flexShrink: 0, children: [_jsx(Text, { bold: true, wrap: "truncate-end", children: fit(`Pick a skill for "${params.prompt}"`, inner) }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: params.options.map((opt, i) => {
                     const cur = i === cursor;
                     const head = fit(`${cur ? `${g.cursor} ` : '  '}${i + 1}. ${`/${opt.skill}`.padEnd(nameWidth, ' ')}`, inner);
-                    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { wrap: "truncate-end", ...(cur ? selectedProps() : {}), children: [head, _jsx(Text, { ...(cur ? {} : dim), children: fit(opt.whatItDoes, inner - stringWidth(head)) })] }), cur && opt.whenToPick ? (_jsx(Text, { ...dim, wrap: "truncate-end", children: fit(`     Pick if: ${opt.whenToPick}`, inner) })) : null] }, opt.skill));
+                    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { wrap: "truncate-end", ...(cur ? selectedProps() : {}), children: [head, _jsx(Text, { ...(cur ? {} : dim), children: fit(opt.whatItDoes, inner - stringWidth(head)) })] }), cur && opt.whenToPick
+                                ? pickIfRows(opt.whenToPick, inner).map((row, j) => (_jsx(Text, { ...dim, wrap: "truncate-end", children: row }, `pick-if-${j}`)))
+                                : null] }, opt.skill));
                 }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { ...dim, wrap: "truncate-end", children: fit(COACHING_HINT, inner) }) })] }));
 }