@cspeach/cli 1.1.34 → 1.1.35

package/dist/ui/app.js

@@ -6,7 +6,7 @@ import { roleProps } from './role-props.js';
 import { IDLE_EXIT_WINDOW_MS } from './interrupt.js';
 import { Body } from './body.js';
 import { Footer } from './footer.js';
-import { ApprovalModal } from './approval-modal.js';
+import { ApprovalModal, estimateApprovalModalRows } from './approval-modal.js';
 import { CommandPalette } from './command-palette.js';
 import { FilePalette } from './file-palette.js';
 import { nextResolutionStep, applySlashPick } from './line-resolution.js';
@@ -15,7 +15,7 @@ import { FooterLine } from './footer-line.js';
 import { ShortcutsSheet } from './widgets/shortcuts-sheet.js';
 import { wasPasted } from '../repl/paste-marker.js';
 import { turnStatusEmitter } from './turn-status-emitter.js';
-import { pickSlotOccupant, liveBudget, SLOT_ROWS_ESTIMATE, PALETTE_ROWS } from './live-area.js';
+import { pickSlotOccupant, liveBudget, cardRowBudget, SLOT_ROWS_ESTIMATE, PALETTE_ROWS } from './live-area.js';
 import { Checklist } from './checklist.js';
 import { formatChecklist, isPlanFinished, CHECKLIST_MAX_ROWS } from '../renderer/checklist-format.js';
 import { listWorkspaceFileChoices } from '../repl/at-picker.js';
@@ -27,7 +27,7 @@ import { approvalEmitter } from './approval-emitter.js';
 import { useHoldRawMode } from './widgets/hold-raw-mode.js';
 import { SapStateContext, globalStore } from './sap-state-store.js';
 import { coachingPickerEmitter } from './coaching-picker-emitter.js';
-import { CoachingPicker } from './widgets/coaching-picker.js';
+import { CoachingPicker, estimateCoachingPickerRows } from './widgets/coaching-picker.js';
 import { askQuestionEmitter } from './ask-question-emitter.js';
 import { AskCard, estimateAskCardRows } from './widgets/ask-card.js';
 import { ConfirmCard, estimateConfirmCardRows } from './widgets/confirm-card.js';
@@ -575,14 +575,24 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
     // contributes a fixed estimate. Q2 (ask) and C1 (confirm) replace theirs
     // with a real estimator right below this line. P2 replaces `checklistRows: 0`.
     let cardRows = occupant === null ? 0 : SLOT_ROWS_ESTIMATE[occupant];
-    // Q2 — the ask card's full height (descriptions included, so shedding them
-    // cannot oscillate; spec §2 fold order: descriptions drop before options).
+    const paletteRows = lineResolution ? PALETTE_ROWS : 0;
+    // Fix round 1 (review I1): the room a card may take beside one input line.
+    const askMaxRows = cardRowBudget({ rows, paletteRows });
+    // Q2 — the ask card's height after its own folds under askMaxRows (labels
+    // to 1 row, descriptions to 1 row, then none — askCardLayout). Computed
+    // with descriptions ON, so shedding them cannot oscillate.
     if (occupant === 'ask' && askQuestionPending)
-        cardRows = estimateAskCardRows(askQuestionPending, true, uiWidth(columns));
+        cardRows = estimateAskCardRows(askQuestionPending, true, uiWidth(columns), askMaxRows);
     // C1 — the confirm card's real height (facts + choices) for the spec §2 cap.
     if (occupant === 'confirm' && confirmSlot.pending)
         cardRows = estimateConfirmCardRows(confirmSlot.pending, uiWidth(columns), rows - 6);
-    const paletteRows = lineResolution ? PALETTE_ROWS : 0;
+    // Fix batch 2026-10-12 — "Pick if:" wraps; count every row.
+    if (occupant === 'coaching' && coachingPending)
+        cardRows = estimateCoachingPickerRows(coachingPending.params, uiWidth(columns));
+    // Fix batch 2026-10-12 — the approval card's risk reasons wrap; count every
+    // row (+1: the slot's top margin).
+    if (occupant === 'approval' && pendingApproval)
+        cardRows = 1 + estimateApprovalModalRows(pendingApproval, uiWidth(columns) - 2);
     // P2 — the checklist's WANTED height (header + rows); liveBudget folds it.
     const showChecklist = todos.length > 0 && !planClosed;
     const checklistWidth = uiWidth(columns);
@@ -597,7 +607,7 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
     const budget = liveBudget({ rows, checklistRows: checklistDesiredRows, cardRows, inputLines, paletteRows });
     let slot = null;
     if (occupant === 'approval' && pendingApproval) {
-        slot = (_jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsx(ApprovalModal, { change: pendingApproval.change, effectiveRisk: pendingApproval.effectiveRisk, transport: pendingApproval.transport, onApply: () => {
+        slot = (_jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsx(ApprovalModal, { change: pendingApproval.change, effectiveRisk: pendingApproval.effectiveRisk, transport: pendingApproval.transport, width: uiWidth(columns) - 2, onApply: () => {
                     pendingApproval.resolve({ approved: true });
                     clearApproval(pendingApproval);
                 }, onSkip: () => {
@@ -614,7 +624,7 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
     }
     else if (occupant === 'ask' && askQuestionPending) {
         const req = askQuestionPending;
-        slot = (_jsx(AskCard, { request: req, width: uiWidth(columns), showDescriptions: budget.showDescriptions, onResolveV1: (result) => {
+        slot = (_jsx(AskCard, { request: req, width: uiWidth(columns), showDescriptions: budget.showDescriptions, maxRows: askMaxRows, onResolveV1: (result) => {
                 if (!('questions' in req))
                     req.resolve(result);
                 clearAskIfCurrent(req);

package/dist/ui/approval-modal.js

@@ -16,6 +16,35 @@ import { verbLine, viewAffordance, toSourceLines } from '../approvals/op-labels.
 import { useReclaimRawStdin } from './widgets/reclaim-raw-stdin.js';
 import { getLook } from '../renderer/look.js';
 import { roleProps, inkChip, legacyInkColor } from './role-props.js';
+import { wrapRows } from '../renderer/wrap-rows.js';
+import { uiWidth } from '../renderer/ui-width.js';
+/**
+ * Fix batch 2026-10-12 (Task 2): why the risk went up is the decision input,
+ * so the "Risk: … (raised: …)" text wraps onto up to this many rows (both
+ * looks) instead of being cut. The verb and meta rows stay one row (chrome).
+ */
+export const RISK_MAX_ROWS = 4;
+/** Border 2 + paddingX 2 on each side. */
+const MODAL_CHROME_COLS = 6;
+function riskText(effectiveRisk) {
+    const raised = shownRiskReasons(effectiveRisk.raisedBy).map(riskReasonText).join('; ');
+    return `Risk: ${effectiveRisk.level}${raised ? `  (raised: ${raised})` : ''}`;
+}
+/** The risk text as the rows it is drawn on at card width `width`. */
+export function riskRows(effectiveRisk, width) {
+    return wrapRows(riskText(effectiveRisk), Math.max(1, width - MODAL_CHROME_COLS), RISK_MAX_ROWS);
+}
+/**
+ * The collapsed card's rendered height at `width` (the live-area budget; the
+ * App adds its own one-row top margin). Panels: border 2 + paddingY 2 + verb
+ * + meta? + risk rows + gap + keys. Legacy adds the "Write approval" title and
+ * the gap under it.
+ */
+export function estimateApprovalModalRows(p, width = uiWidth()) {
+    const meta = p.change.package || p.transport ? 1 : 0;
+    const body = 1 + meta + riskRows(p.effectiveRisk, width).length + 2;
+    return 4 + body + (getLook() === 'panels' ? 0 : 2);
+}
 // Legacy look: today's literal names (bytes unchanged while colour is on).
 function riskColor(level) {
     return level === 'high' ? 'red' : level === 'medium' ? 'yellow' : 'green';
@@ -35,7 +64,8 @@ function diffLineColor(line, panels) {
 export const BACK_GUARD_MS = 300;
 /** The review view's key line, always at its bottom: how to go back and how to answer from here. */
 export const viewKeysLine = (reviewKey) => `Esc or ${reviewKey}: back · a: approve · s: skip · c: cancel turn`;
-export function ApprovalModal({ change, effectiveRisk, transport, onApply, onSkip, onDiff, onCancel, onInterruptTurn }) {
+export function ApprovalModal({ change, effectiveRisk, transport, onApply, onSkip, onDiff, onCancel, onInterruptTurn, width }) {
+    const cardWidth = width ?? uiWidth();
     // BUG-1 — re-assert raw mode on mount so keypresses reach useInput even
     // when an inquirer gate ran earlier in the turn (see import block).
     useReclaimRawStdin();
@@ -148,7 +178,8 @@ export function ApprovalModal({ change, effectiveRisk, transport, onApply, onSki
             : '';
         return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: panels ? roleProps('frame').color : quiet, paddingX: 1, children: [_jsxs(Text, { bold: true, wrap: "truncate-end", children: [isDiff ? 'Diff' : aff.label, _jsx(Text, { color: quiet, children: where })] }), change.diff ? (isDiff ? (shownLines.map((line, i) => (_jsx(Text, { wrap: "truncate-end", color: diffLineColor(line, panels), children: line }, from + i)))) : (shownLines.map((line, i) => (_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { color: quiet, children: [String(from + i + 1).padStart(4), "  "] }), line] }, from + i))))) : (_jsx(Text, { dimColor: true, children: "(no source provided by the model)" })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { wrap: "truncate-end", children: viewKeysLine(aff.key) }) })] }));
     }
-    const raisedLabel = shownRiskReasons(effectiveRisk.raisedBy).map(riskReasonText).join('; ');
+    // Pre-wrapped rows, never Ink soft-wrap (Wave-1 rule): every row is counted.
+    const risks = riskRows(effectiveRisk, cardWidth);
     // Meta line: Package · Transport — each segment only when genuinely known.
     // The handler resolves `transport` per op (see op-labels displayTransport:
     // create-family may fall back to the session transport because the create
@@ -170,11 +201,12 @@ export function ApprovalModal({ change, effectiveRisk, transport, onApply, onSki
     keys.push('[s] Skip', '[c] Cancel turn');
     // Panels look — same content, keys and risk colour; restyled only. The
     // approval runs BEFORE snapshot/write/syntax check, so the card claims no
-    // step has run. Legacy return below stays byte-for-byte unchanged.
+    // step has run. (Fix batch 2026-10-12: the owner lifted the legacy byte pin
+    // for the wrapped risk rows and the fixed card width.)
     if (getLook() === 'panels') {
         const risk = roleProps(riskRole(effectiveRisk.level));
         const tag = inkChip('APPROVAL');
-        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: risk.color, paddingX: 2, paddingY: 1, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { ...tag.props, children: tag.text }), _jsx(Text, { children: '  ' }), _jsx(Text, { ...(change.op === 'delete' ? roleProps('bad') : {}), bold: true, children: verb }), change.op === 'create' ? _jsx(Text, { ...roleProps('dim'), children: "  (new object)" }) : null] }), metaSegs.length > 0 && _jsx(Text, { ...roleProps('dim'), wrap: "truncate-end", children: metaSegs.join(' · ') }), _jsxs(Text, { ...risk, wrap: "truncate-end", children: ["Risk: ", effectiveRisk.level, raisedLabel ? `  (raised: ${raisedLabel})` : ''] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { ...roleProps('sap', { bold: true }), children: keys[0] }), _jsx(Text, { children: '   ' + keys.slice(1).join('   ') })] }) })] }));
+        return (_jsxs(Box, { flexDirection: "column", width: cardWidth, borderStyle: "round", borderColor: risk.color, paddingX: 2, paddingY: 1, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { ...tag.props, children: tag.text }), _jsx(Text, { children: '  ' }), _jsx(Text, { ...(change.op === 'delete' ? roleProps('bad') : {}), bold: true, children: verb }), change.op === 'create' ? _jsx(Text, { ...roleProps('dim'), children: "  (new object)" }) : null] }), metaSegs.length > 0 && _jsx(Text, { ...roleProps('dim'), wrap: "truncate-end", children: metaSegs.join(' · ') }), risks.map((row, i) => _jsx(Text, { ...risk, wrap: "truncate-end", children: row }, `risk-${i}`)), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { ...roleProps('sap', { bold: true }), children: keys[0] }), _jsx(Text, { children: '   ' + keys.slice(1).join('   ') })] }) })] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: legacyInkColor(riskColor(effectiveRisk.level)), paddingX: 2, paddingY: 1, children: [_jsx(Text, { bold: true, children: "Write approval" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { bold: true, color: verbColor, children: verb }), change.op === 'create' ? _jsx(Text, { dimColor: true, children: "  (new object)" }) : null] }) }), metaSegs.length > 0 && (_jsx(Text, { dimColor: true, wrap: "truncate-end", children: metaSegs.join(' · ') })), _jsxs(Text, { color: legacyInkColor(riskColor(effectiveRisk.level)), wrap: "truncate-end", children: ["Risk: ", effectiveRisk.level, raisedLabel ? `  (raised: ${raisedLabel})` : ''] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { wrap: "truncate-end", children: keys.join('   ') }) })] }));
+    return (_jsxs(Box, { flexDirection: "column", width: cardWidth, borderStyle: "round", borderColor: legacyInkColor(riskColor(effectiveRisk.level)), paddingX: 2, paddingY: 1, children: [_jsx(Text, { bold: true, children: "Write approval" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { bold: true, color: verbColor, children: verb }), change.op === 'create' ? _jsx(Text, { dimColor: true, children: "  (new object)" }) : null] }) }), metaSegs.length > 0 && (_jsx(Text, { dimColor: true, wrap: "truncate-end", children: metaSegs.join(' · ') })), risks.map((row, i) => (_jsx(Text, { color: legacyInkColor(riskColor(effectiveRisk.level)), wrap: "truncate-end", children: row }, `risk-${i}`))), _jsx(Box, { marginTop: 1, children: _jsx(Text, { wrap: "truncate-end", children: keys.join('   ') }) })] }));
 }

package/dist/ui/live-area.js

@@ -23,7 +23,8 @@ export const INPUT_MAX_LINES = 6;
  * occupant, fed to liveBudget as `cardRows`. They cover the collapsed card.
  * A task that owns a card with a variable height replaces its entry at the
  * App call site with a real estimator (Q2: estimateAskCardRows, C1:
- * estimateConfirmCardRows).
+ * estimateConfirmCardRows, fix batch 2026-10-12: estimateApprovalModalRows
+ * and estimateCoachingPickerRows).
  *   approval  margin 1 + border 2 + padding 2 + 3 fact rows + margin 1 + keys 1
  *   rewind    margin 1 + border 2 + title 1 + margin 1 + more 2 + REWIND_VISIBLE_ROWS 9 + margin 1 + hint 1
  *   timeline  margin 1 + border 2 + title 1 + margin 1 + more 2 + TIMELINE_VISIBLE_ROWS 9
@@ -69,3 +70,15 @@ export function liveBudget(args) {
     const inputMaxLines = Math.max(1, Math.min(Math.max(1, args.inputLines), INPUT_MAX_LINES, remaining));
     return { checklistRows, inputMaxLines, showDescriptions: remaining >= 1 };
 }
+/**
+ * Fix round 1 (review I1): the rows a card may take so the whole live area
+ * stays ≤ rows − 2 with one input line beside it — the cap less the status
+ * strip, the input border, the footer, an open palette, the checklist's one
+ * folded line and one input line. A card that can fold (AskCard) folds to
+ * fit this.
+ */
+export function cardRowBudget(args) {
+    const cap = Math.max(0, args.rows - 2);
+    const fixed = STATUS_ROWS + INPUT_BORDER_ROWS + FOOTER_ROWS + Math.max(0, args.paletteRows);
+    return Math.max(1, cap - fixed - 1 - 1);
+}

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) })] }));
 }