@cspeach/cli 1.1.34 → 1.1.36

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

@@ -19,79 +19,78 @@ import stringWidth from 'string-width';
 import { roleProps, selectedProps } from '../role-props.js';
 import { getBoxChars } from '../ascii-chars.js';
 import { getGlyphs } from '../../renderer/glyphs.js';
-import { truncateToWidth } from '../../renderer/ui-width.js';
+import { truncateToWidth, uiWidth } from '../../renderer/ui-width.js';
+import { wrapRows } from '../../renderer/wrap-rows.js';
 import { sanitizeControlChars } from '../../renderer/sanitize.js';
 // Q1b's shared hook — the one raw-stdin reclaim for every card (no second copy).
 import { useReclaimRawStdin } from './reclaim-raw-stdin.js';
 export const CONFIRM_INPUT_GUARD_MS = 150;
+/** Facts wrap onto this many rows unless the request says otherwise (fix batch 2026-10-12). */
+export const DEFAULT_WRAP_FACTS = 3;
+/** A title wraps onto at most this many rows. */
+export const TITLE_MAX_ROWS = 2;
+/** A choice label wraps onto at most this many rows. */
+export const LABEL_MAX_ROWS = 2;
+/** `${cursor} ${n}. ` — the same width whether the cursor is on the row or not. */
+const choicePrefixWidth = (i) => 2 + `${i + 1}. `.length;
 /**
- * The card's full rendered height for the live-area budget (F3 liveBudget
- * `cardRows`): top edge + title + one row per fact + the gap above the
- * choices + one row per choice + the hint + bottom edge. Every row is
- * truncate-end, so nothing wraps into extra rows — except the facts of a
- * card that asks for `wrapFacts`: with `width` given, each counts the rows
- * it is drawn on.
+ * A choice's rows. The label wraps under its own text (continuation rows are
+ * indented past the number). The dim hint stays beside the last label row
+ * when it fits; otherwise it gets a row of its own — a hint such as "DEV
+ * systems only" is a safety cue and is never dropped.
  */
-export function estimateConfirmCardRows(req, width, maxRows) {
-    const facts = req.facts ?? [];
-    const wrap = width === undefined ? 1 : fittedWrap(req, width, maxRows);
-    const factRowCount = width !== undefined && wrap > 1
-        ? facts.reduce((n, f) => n + factRows(f, Math.max(1, width - 4), wrap).length, 0)
-        : facts.length;
-    return 5 + factRowCount + req.choices.length;
+export function choiceRows(label, hint, i, inner, labelRows) {
+    const p = choicePrefixWidth(i);
+    const rows = wrapRows(label, Math.max(1, inner - p), labelRows);
+    if (!hint)
+        return { label: rows, hint: '', hintOwnRow: false };
+    const room = inner - p - stringWidth(rows[rows.length - 1]);
+    const beside = `  ${sanitizeControlChars(hint)}`;
+    if (stringWidth(beside) <= room)
+        return { label: rows, hint: beside, hintOwnRow: false };
+    return { label: rows, hint: truncateToWidth(sanitizeControlChars(hint), Math.max(1, inner - p)), hintOwnRow: true };
+}
+function rowsFor(req, inner, l) {
+    const title = wrapRows(req.title, inner, l.titleRows).length;
+    const facts = (req.facts ?? []).reduce((n, f) => n + wrapRows(f, inner, l.wrap).length, 0);
+    const choices = req.choices.reduce((n, c, i) => {
+        const r = choiceRows(c.label, c.hint, i, inner, l.labelRows);
+        return n + r.label.length + (r.hintOwnRow ? 1 : 0);
+    }, 0);
+    // top edge + title + facts + gap + choices + hint + bottom edge
+    return 4 + title + facts + choices;
 }
 /**
- * The rows a long fact may wrap onto so the whole card stays within
- * `maxRows` (App: rows − 6, so Ink never reaches its full-clear path): the
- * card's own `wrapFacts`, one less each time it would not fit, down to one
- * row (every fact cut with …, as on any card).
+ * The layout that keeps the whole card within `maxRows` (App: rows − 6, so
+ * Ink never reaches its full-clear path). Card content wraps; when it would
+ * not fit, the facts give up rows first (one less each time, down to one
+ * row cut with …), then the title, then the choice labels.
  */
-export function fittedWrap(req, width, maxRows) {
-    let wrap = Math.max(1, req.wrapFacts ?? 1);
+export function confirmLayout(req, width, maxRows) {
+    const l = { wrap: Math.max(1, req.wrapFacts ?? DEFAULT_WRAP_FACTS), titleRows: TITLE_MAX_ROWS, labelRows: LABEL_MAX_ROWS };
     if (maxRows === undefined)
-        return wrap;
-    const cells = Math.max(1, width - 4);
-    const rowsAt = (w) => 5 + req.choices.length + (req.facts ?? []).reduce((n, f) => n + factRows(f, cells, w).length, 0);
-    while (wrap > 1 && rowsAt(wrap) > maxRows)
-        wrap -= 1;
-    return wrap;
+        return l;
+    const inner = Math.max(1, width - 4);
+    while (l.wrap > 1 && rowsFor(req, inner, l) > maxRows)
+        l.wrap -= 1;
+    if (rowsFor(req, inner, l) > maxRows)
+        l.titleRows = 1;
+    if (rowsFor(req, inner, l) > maxRows)
+        l.labelRows = 1;
+    return l;
 }
-const graphemes = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
 /**
- * One fact as the rows it is drawn on. `rows` 1 (the default): one row, cut
- * with … — how every card looks. More: wrapped at spaces (a word wider than
- * the row is cut where it must be) onto at most `rows` rows, the last one cut
- * with … when there is still more. Control characters are neutralised first.
+ * The card's full rendered height for the live-area budget (F3 liveBudget
+ * `cardRows`): top edge + title rows + every fact row + the gap above the
+ * choices + every choice row + the hint + bottom edge. Every wrapped row is
+ * counted; `width` defaults to uiWidth().
  */
-export function factRows(text, cells, rows = 1) {
-    const flat = sanitizeControlChars(text).replace(/\t/g, '  ').replace(/\r?\n/g, ' ');
-    if (rows <= 1 || stringWidth(flat) <= cells)
-        return [truncateToWidth(flat, cells)];
-    const out = [];
-    let rest = flat;
-    while (out.length < rows - 1 && stringWidth(rest) > cells) {
-        let used = 0;
-        let space = -1;
-        let end = rest.length;
-        for (const { segment, index } of graphemes.segment(rest)) {
-            const w = stringWidth(segment);
-            if (used + w > cells) {
-                end = index;
-                if (segment === ' ')
-                    space = index;
-                break;
-            }
-            used += w;
-            if (segment === ' ')
-                space = index;
-        }
-        const at = space > 0 ? space : Math.max(1, end);
-        out.push(rest.slice(0, at).trimEnd());
-        rest = rest.slice(at).trimStart();
-    }
-    if (rest)
-        out.push(truncateToWidth(rest, cells));
-    return out;
+export function estimateConfirmCardRows(req, width = uiWidth(), maxRows) {
+    return rowsFor(req, Math.max(1, width - 4), confirmLayout(req, width, maxRows));
+}
+/** The rows a long fact may wrap onto so the whole card stays within `maxRows`. */
+export function fittedWrap(req, width, maxRows) {
+    return confirmLayout(req, width, maxRows).wrap;
 }
 /**
  * Owner decision (fix-round-3 deferred M1): a digit PICKS only on ordinary
@@ -155,17 +154,43 @@ export function matchAlias(aliases, input, word) {
 function fit(text, cells) {
     return truncateToWidth(sanitizeControlChars(text), cells);
 }
-const inkBorder = (b) => ({
-    topLeft: b.tl, top: b.h, topRight: b.tr, right: b.v,
-    bottomRight: b.br, bottom: b.h, bottomLeft: b.bl, left: b.v,
-});
-/** The frame every card in the slot shares: tag chip top edge, footnote bottom edge. */
-export function CardFrame({ tag, footnote, width, children }) {
+/**
+ * One border object per box-character set, reused on every render. Ink diffs
+ * style props by identity: a new borderStyle object on a re-render is sent
+ * alone, without borderTop/borderBottom false, and Ink then gives the box a
+ * top and bottom border again (two blank rows inside the frame after the
+ * first key press). Task 4 found it when AskCard moved into this frame.
+ */
+const borderCache = new Map();
+function makeInkBorder(b) {
+    return {
+        topLeft: b.tl, top: b.h, topRight: b.tr, right: b.v,
+        bottomRight: b.br, bottom: b.h, bottomLeft: b.bl, left: b.v,
+    };
+}
+const inkBorder = (b) => {
+    let out = borderCache.get(b);
+    if (!out) {
+        out = makeInkBorder(b);
+        borderCache.set(b, out);
+    }
+    return out;
+};
+/**
+ * The frame every card in the slot shares: tag chip top edge, footnote bottom
+ * edge. `header` (Task 4, e.g. "Blocker 2 of 4") follows the tag on the top
+ * edge, dim: "╭─ QUESTION · Blocker 2 of 4 ───╮"; it is cut first when narrow.
+ */
+export function CardFrame({ tag, header, footnote, width, children }) {
     const box = getBoxChars();
     const frame = roleProps('frame');
-    const top = edgeSegments([box.tl, box.tr], box.h, tag, width);
+    const extra = header ? ` · ${sanitizeControlChars(header).replace(/[\t\n]+/g, ' ')}` : '';
+    const top = edgeSegments([box.tl, box.tr], box.h, `${tag}${extra}`, width);
+    // The shown label is cut from the end, so the tag (if whole) leads it.
+    const tagShown = top.label.startsWith(tag) ? tag : top.label;
+    const headerShown = top.label.slice(tagShown.length);
     const bottom = edgeSegments([box.bl, box.br], box.h, footnote, width);
-    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, width: width, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { ...frame, children: top.lead }), _jsx(Text, { ...roleProps(TAG_ROLE[tag], { bold: true }), children: top.label }), _jsx(Text, { ...frame, children: top.tail })] }), _jsx(Box, { flexDirection: "column", width: width, paddingX: 1, borderStyle: inkBorder(box), borderTop: false, borderBottom: false, borderColor: frame.color, children: children }), _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { ...frame, children: bottom.lead }), _jsx(Text, { ...roleProps('dim'), children: bottom.label }), _jsx(Text, { ...frame, children: bottom.tail })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, width: width, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { ...frame, children: top.lead }), _jsx(Text, { ...roleProps(TAG_ROLE[tag], { bold: true }), children: tagShown }), headerShown ? _jsx(Text, { ...roleProps('dim'), children: headerShown }) : null, _jsx(Text, { ...frame, children: top.tail })] }), _jsx(Box, { flexDirection: "column", width: width, paddingX: 1, borderStyle: inkBorder(box), borderTop: false, borderBottom: false, borderColor: frame.color, children: children }), _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { ...frame, children: bottom.lead }), _jsx(Text, { ...roleProps('dim'), children: bottom.label }), _jsx(Text, { ...frame, children: bottom.tail })] })] }));
 }
 export function ConfirmCard({ request, width, maxRows, onResolve, onInterruptTurn }) {
     // Re-assert raw stdin on mount: an earlier inquirer prompt can leave Ink's
@@ -235,7 +260,7 @@ export function ConfirmCard({ request, width, maxRows, onResolve, onInterruptTur
             finish({ value: hit });
     });
     const inner = Math.max(1, width - 4);
-    const wrap = fittedWrap(request, width, maxRows);
+    const layout = confirmLayout(request, width, maxRows);
     const dim = roleProps('dim');
     const titleProps = request.tag === 'CANNOT BE UNDONE' ? roleProps('bad', { bold: true }) : { bold: true };
     const letters = Object.keys(request.aliases ?? {}).filter((k) => k.length === 1);
@@ -244,13 +269,14 @@ export function ConfirmCard({ request, width, maxRows, onResolve, onInterruptTur
         ? `1-${digits} picks · ↑↓ move · Enter chooses · Esc cancels`
         : `Enter chooses · Esc cancels · ↑↓ or 1-${digits} move`)
         + (letters.length > 0 ? ` · keys ${letters.join('/')}` : '');
-    return (_jsxs(CardFrame, { tag: request.tag, footnote: request.footnote, width: width, children: [_jsx(Text, { wrap: "truncate-end", ...titleProps, children: fit(request.title, inner) }), (request.facts ?? []).flatMap((f, i) => (wrap > 1
-                ? factRows(f, inner, wrap).map((row, j) => (_jsx(Text, { wrap: "truncate-end", ...dim, children: row }, `fact-${i}-${j}`)))
-                : [_jsx(Text, { wrap: "truncate-end", ...dim, children: fit(f, inner) }, `fact-${i}`)])), _jsx(Box, { flexDirection: "column", marginTop: 1, children: request.choices.map((c, i) => {
+    return (_jsxs(CardFrame, { tag: request.tag, footnote: request.footnote, width: width, children: [wrapRows(request.title, inner, layout.titleRows).map((row, j) => (_jsx(Text, { wrap: "truncate-end", ...titleProps, children: row }, `title-${j}`))), (request.facts ?? []).flatMap((f, i) => wrapRows(f, inner, layout.wrap).map((row, j) => (_jsx(Text, { wrap: "truncate-end", ...dim, children: row }, `fact-${i}-${j}`)))), _jsx(Box, { flexDirection: "column", marginTop: 1, children: request.choices.flatMap((c, i) => {
                     const on = i === cursor;
-                    const main = fit(`${on ? g.cursor : ' '} ${i + 1}. ${c.label}`, inner);
-                    const room = inner - stringWidth(main);
-                    const hintText = c.hint && room > 2 ? fit(`  ${c.hint}`, room) : '';
-                    return (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { ...(on ? selectedProps() : {}), children: main }), hintText ? _jsx(Text, { ...dim, children: hintText }) : null] }, c.value));
+                    const r = choiceRows(c.label, c.hint, i, inner, layout.labelRows);
+                    const pad = ' '.repeat(choicePrefixWidth(i));
+                    const sel = on ? selectedProps() : {};
+                    const out = r.label.map((row, j) => (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { ...sel, children: j === 0 ? `${on ? g.cursor : ' '} ${i + 1}. ${row}` : `${pad}${row}` }), j === r.label.length - 1 && r.hint && !r.hintOwnRow ? _jsx(Text, { ...dim, children: r.hint }) : null] }, `${c.value}-${j}`)));
+                    if (r.hintOwnRow)
+                        out.push(_jsx(Text, { wrap: "truncate-end", ...dim, children: `${pad}${r.hint}` }, `${c.value}-hint`));
+                    return out;
                 }) }), _jsx(Text, { wrap: "truncate-end", ...dim, children: fit(hint, inner) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cspeach/cli",
-  "version": "1.1.34",
+  "version": "1.1.36",
   "description": "CSPeach — AI-assisted ABAP development CLI. Direct SAP access, signed skills, safety gates.",
   "keywords": [
     "abap",
@@ -54,7 +54,7 @@
     "@anthropic-ai/sdk": "^0.90.0",
     "@azure/msal-node": "6.0.1",
     "@cspeach/register-core": "0.4.0",
-    "@cspeach/sap-client": "0.1.18",
+    "@cspeach/sap-client": "0.1.21",
     "@iarna/toml": "^2.2.5",
     "@inkjs/ui": "^2.0.0",
     "@inquirer/prompts": "^7.0.0",