@cspeach/cli 1.1.18 → 1.1.19

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

@@ -1,45 +1,51 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box, Text, useInput } from 'ink';
+import stringWidth from 'string-width';
 import { PICK_CANCELLED } from '../skill-picker.js';
-const PEACH = '#FFCBA4';
+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';
+export const COACHING_HINT = '↑↓ move · 1-9/Enter picks · Enter with nothing selected cancels · Esc cancels';
 /**
- * Ink-mode coaching picker — compact single-line-per-option layout.
+ * 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
+ * with string-width and Ink's truncate-end is only the safety net.
+ */
+function fit(text, cells) {
+    return truncateToWidth(sanitizeControlChars(text), Math.max(0, cells));
+}
+/**
+ * Ink-mode skill picker on the AskCard look (piece 2 / Q4, spec §3).
+ *
+ *   Pick a skill for "What is the best part…?"
  *
- * Phase D3+ (2026-05-16): the prior layout used a bordered Box per
- * option with 3 text rows each (skill+confidence, Does:, Pick if:).
- * For 5 options that's ~25 lines — exceeded available vertical space
- * once mounted inline between Body and Footer, and Ink overflow-
- * clipped only the BOTTOM line of each option leaving a garbled
- * picker (screenshot 71). This rewrite uses one line per option +
- * a "details" line only for the highlighted entry, total height
- * bounded to ~8 lines regardless of option count.
+ *   ❯ 1. /abap-explain    Plain-language code explainer
+ *        Pick if: pick this to teach code to a human
+ *     2. /abap-review     Code review vs quality criteria
  *
- * Layout (example, 3 options):
- *   ╭ Pick a skill for: "What is the best part…?" ───────────╮
- *   │  ▸ /abap-explain   72%   Plain-language code explainer  │
- *   │    /abap-review     0%   Code review vs quality criteria│
- *   │    /abap-document   0%   Generate ABAP documentation    │
- *   │                                                          │
- *   │  ▸ /abap-explain — Pick if: pick this to teach code to a human   │
- *   │  ↑/↓ navigate · Enter select · Esc cancel                │
- *   ╰──────────────────────────────────────────────────────────╯
+ *   ↑↓ move · 1-9/Enter picks · Enter with nothing selected cancels · Esc cancels
+ *
+ * INVARIANT (spec, pinned): with nothing highlighted — preSelect false, or
+ * ↑ past the first row — Enter resolves PICK_CANCELLED. Starting cursor:
+ * preferSkill (if listed) → first row when preSelect → nothing. The
+ * confidence percentage is gone; results are unchanged (skill | PICK_CANCELLED).
  */
-export function CoachingPicker({ params, onResolve }) {
-    // 2026-05-17 — initial cursor position priority:
-    //   1. preferSkill (the just-used skill, if present in options) — lets
-    //      the user confirm "same skill as last turn" with one Enter press
-    //   2. preSelect=true → top-1 (classifier's best guess)
-    //   3. -1 → no selection, user must arrow-key to a choice
+export function CoachingPicker({ params, onResolve, width }) {
+    const g = getGlyphs();
+    const dim = roleProps('dim');
+    const w = width ?? uiWidth();
+    // Content width: card width minus paddingX={1} on both sides.
+    const inner = Math.max(1, w - 2);
     const preferIdx = params.preferSkill
         ? params.options.findIndex((o) => o.skill === params.preferSkill)
         : -1;
-    const initialCursor = preferIdx >= 0
-        ? preferIdx
-        : params.preSelect ? 0 : -1;
+    const initialCursor = preferIdx >= 0 ? preferIdx : params.preSelect ? 0 : -1;
     const [cursor, setCursor] = useState(initialCursor);
-    useInput((_input, key) => {
-        if (key.escape) {
+    useInput((input, key) => {
+        // Ctrl+C cancels like Esc (same as ConfirmCard / FilesCard).
+        if (key.escape || (key.ctrl && input === 'c')) {
             onResolve(PICK_CANCELLED);
             return;
         }
@@ -51,6 +57,13 @@ export function CoachingPicker({ params, onResolve }) {
             setCursor((c) => Math.min(params.options.length - 1, c + 1));
             return;
         }
+        const digit = /^[1-9]$/.test(input) ? Number(input) - 1 : -1;
+        if (digit >= 0) {
+            const picked = params.options[digit];
+            if (picked)
+                onResolve(picked.skill);
+            return;
+        }
         if (key.return) {
             if (cursor < 0) {
                 onResolve(PICK_CANCELLED);
@@ -61,28 +74,10 @@ export function CoachingPicker({ params, onResolve }) {
                 onResolve(chosen.skill);
         }
     }, { isActive: true });
-    const promptPreview = params.prompt.length > 60
-        ? params.prompt.slice(0, 57) + '…'
-        : params.prompt;
-    const highlighted = cursor >= 0 ? params.options[cursor] : undefined;
-    return (
-    // flexShrink={0} (2026-05-17) — without this, Ink's default
-    // flexShrink: 1 lets the picker get squashed when vertical space is
-    // tight, and the TOP options clip off (only the bottom one remained
-    // visible — see screenshot 74). flexShrink={0} guarantees the picker
-    // claims its natural height; Body shrinks to make room (and Body
-    // content stays recoverable via PgUp/Ctrl+B scroll).
-    _jsxs(Box, { borderStyle: "round", borderColor: PEACH, flexDirection: "column", paddingX: 1, flexShrink: 0, children: [_jsxs(Text, { bold: true, children: ["Pick a skill for: ", _jsxs(Text, { color: "cyan", children: ["\"", promptPreview, "\""] })] }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: params.options.map((opt, i) => {
-                    const isCursor = i === cursor;
-                    const arrow = isCursor ? '▸ ' : '  ';
-                    // 2026-05-17 — hide the "0%" cruft. Confidence is 0 for any
-                    // alternate / fallback option (we never had a real score for
-                    // them), AND for top-1 picks where the classifier itself
-                    // returned 0. In both cases displaying "0%" looks broken.
-                    // Show "%" only when there's a meaningful number.
-                    const pctNum = Math.round(opt.confidence * 100);
-                    const pct = pctNum > 0 ? `${pctNum.toString().padStart(3, ' ')}%` : '    ';
-                    const name = `/${opt.skill}`.padEnd(20, ' ');
-                    return (_jsxs(Text, { color: isCursor ? PEACH : undefined, bold: isCursor, children: [arrow, name, " ", pct, "  ", opt.whatItDoes.slice(0, 60)] }, opt.skill));
-                }) }), highlighted && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Pick if: ", highlighted.whenToPick] }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "\u2191/\u2193 navigate \u00B7 Enter select \u00B7 Esc cancel" }) })] }));
+    const nameWidth = Math.max(...params.options.map((o) => o.skill.length + 1)) + 2;
+    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));
+                }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { ...dim, wrap: "truncate-end", children: fit(COACHING_HINT, inner) }) })] }));
 }

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

@@ -0,0 +1,193 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/ui/widgets/confirm-card.tsx
+//
+// Piece 2 §5 — the one confirm card (APPROVAL / SAFETY CHECK / CANNOT BE
+// UNDONE, plus the ADVISORY and QUESTION confirms). Tag chip on the top edge,
+// bold title, dim facts, numbered choices, dim footnote on the bottom edge.
+//
+// Keys (deliberately NOT the question-card keys):
+//   ↑/↓ move the cursor. Digits 1–9 pick on APPROVAL / QUESTION / ADVISORY
+//   cards; on SAFETY CHECK and CANNOT BE UNDONE cards they only move it.
+//   Enter confirms the highlighted choice.
+//   Esc / Ctrl+C → { value: null, cancelled: true }.
+//   request.aliases (e.g. y/n/d, or typed words) resolve immediately.
+//   Anything received in the first CONFIRM_INPUT_GUARD_MS after mount is
+//   dropped: a `1` or Enter typed before the card opened can never apply.
+import { useRef, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+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 { 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;
+/**
+ * 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.
+ */
+export function estimateConfirmCardRows(req) {
+    return 5 + (req.facts?.length ?? 0) + req.choices.length;
+}
+/**
+ * Owner decision (fix-round-3 deferred M1): a digit PICKS only on ordinary
+ * cards (APPROVAL, QUESTION, ADVISORY). A SAFETY CHECK or CANNOT BE UNDONE
+ * card needs move-then-Enter — a digit only moves the cursor there — so one
+ * stray key can never pass a safety gate or release a transport. An
+ * allow-list, so any tag added later fails safe (move + Enter) until it is
+ * deliberately listed here.
+ */
+const DIGIT_PICK_TAGS = new Set(['APPROVAL', 'QUESTION', 'ADVISORY']);
+export function digitsPickOn(tag) {
+    return DIGIT_PICK_TAGS.has(tag);
+}
+export const TAG_ROLE = {
+    APPROVAL: 'sap',
+    'SAFETY CHECK': 'warn',
+    'CANNOT BE UNDONE': 'bad',
+    ADVISORY: 'warn',
+    QUESTION: 'sap',
+};
+/**
+ * One edge line in three segments so the label can take its own colour.
+ * lead + label + tail is exactly `width` cells whenever width ≥ 7 (the
+ * label is cut to width − 6 cells with …; wide characters count two).
+ */
+export function edgeSegments(corners, h, label, width) {
+    const [left, right] = corners;
+    if (!label)
+        return { lead: left + h.repeat(Math.max(0, width - 2)), label: '', tail: right };
+    const shown = truncateToWidth(label, Math.max(1, width - 6));
+    // Cells, not code points: a wide-character label must not widen the edge.
+    const fill = Math.max(1, width - 5 - stringWidth(shown));
+    return { lead: `${left}${h} `, label: shown, tail: ` ${h.repeat(fill)}${right}` };
+}
+/**
+ * Alias matching: a single key resolves at once; a word (e.g. 'abort') is
+ * collected letter by letter and resolves on its last letter; a pasted word
+ * resolves whole. Digits never reach here (they move the cursor).
+ */
+export function matchAlias(aliases, input, word) {
+    if (!aliases || input.length === 0)
+        return undefined;
+    const k = input.toLowerCase();
+    if (aliases[k] !== undefined) {
+        word.current = '';
+        return aliases[k];
+    }
+    const next = word.current + k;
+    if (aliases[next] !== undefined) {
+        word.current = '';
+        return aliases[next];
+    }
+    word.current = Object.keys(aliases).some((a) => a.startsWith(next)) ? next : '';
+    return undefined;
+}
+/**
+ * Card text can carry model-supplied words (the plan summary). Neutralise
+ * control characters, then pre-cut to `cells` with string-width: Ink's own
+ * truncate-end miscounts some emoji, so it is only the safety net here.
+ */
+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 }) {
+    const box = getBoxChars();
+    const frame = roleProps('frame');
+    const top = edgeSegments([box.tl, box.tr], box.h, tag, width);
+    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 })] })] }));
+}
+export function ConfirmCard({ request, width, onResolve, onInterruptTurn }) {
+    // Re-assert raw stdin on mount: an earlier inquirer prompt can leave Ink's
+    // raw-mode bookkeeping stale, and the card would then get no keys.
+    useReclaimRawStdin();
+    const g = getGlyphs();
+    const last = Math.max(0, request.choices.length - 1);
+    const [cursor, setCursor] = useState(() => Math.min(Math.max(request.initial ?? 0, 0), last));
+    const mountedAt = useRef(Date.now());
+    const done = useRef(false);
+    const word = useRef('');
+    const digitsPick = digitsPickOn(request.tag);
+    const finish = (r) => {
+        if (done.current)
+            return;
+        done.current = true;
+        onResolve(r);
+    };
+    useInput((input, key) => {
+        if (done.current)
+            return;
+        // Round 8 item 1 — Ctrl+C is never an answer, so the mount guard does not
+        // swallow it: it cancels the card and stops the turn.
+        if (key.ctrl && input === 'c') {
+            finish({ value: null, cancelled: true });
+            onInterruptTurn?.();
+            return;
+        }
+        if (Date.now() - mountedAt.current < CONFIRM_INPUT_GUARD_MS)
+            return;
+        if (key.escape) {
+            finish({ value: null, cancelled: true });
+            return;
+        }
+        if (key.upArrow) {
+            setCursor((c) => Math.max(0, c - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setCursor((c) => Math.min(last, c + 1));
+            return;
+        }
+        if (key.return) {
+            const chosen = request.choices[cursor];
+            if (chosen)
+                finish({ value: chosen.value });
+            return;
+        }
+        if (/^[1-9]$/.test(input)) {
+            const i = Number(input) - 1;
+            if (i > last)
+                return;
+            // Fix round 3 (item 9b): a digit PICKS, the same as on question cards
+            // ("1" sat unanswered for 7 minutes live). SAFETY CHECK and CANNOT BE
+            // UNDONE cards keep move-then-Enter (see digitsPickOn).
+            if (digitsPick)
+                finish({ value: request.choices[i].value });
+            else
+                setCursor(i);
+            return;
+        }
+        if (key.ctrl || key.meta)
+            return;
+        const hit = matchAlias(request.aliases, input, word);
+        // No new values: an alias only answers with a choice the card offers.
+        if (hit !== undefined && request.choices.some((c) => c.value === hit))
+            finish({ value: hit });
+    });
+    const inner = Math.max(1, width - 4);
+    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);
+    const digits = Math.min(9, request.choices.length);
+    const hint = (digitsPick
+        ? `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 ?? []).map((f, i) => (_jsx(Text, { wrap: "truncate-end", ...dim, children: fit(f, inner) }, `fact-${i}`))), _jsx(Box, { flexDirection: "column", marginTop: 1, children: request.choices.map((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));
+                }) }), _jsx(Text, { wrap: "truncate-end", ...dim, children: fit(hint, inner) })] }));
+}

package/dist/ui/widgets/dep-graph.js

@@ -1,9 +1,10 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
+import { roleProps } from '../role-props.js';
 export function DepGraph({ data }) {
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsxs(Text, { bold: true, color: "cyan", children: ["Dependencies \u2014 ", data.root] }), data.children.map((c, i) => {
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: roleProps('frame').color, paddingX: 1, children: [_jsxs(Text, { ...roleProps('sap', { bold: true }), children: ["Dependencies \u2014 ", data.root] }), data.children.map((c, i) => {
                 const isLast = i === data.children.length - 1;
                 const prefix = isLast ? '└─' : '├─';
-                return (_jsxs(Box, { children: [_jsxs(Text, { color: "gray", children: [prefix, " "] }), _jsx(Text, { color: "yellow", children: c.name }), _jsxs(Text, { color: "gray", children: [" (", c.type, ") "] }), _jsx(Text, { dimColor: true, children: c.relation })] }, c.name));
+                return (_jsxs(Box, { children: [_jsxs(Text, { ...roleProps('dim'), children: [prefix, " "] }), _jsx(Text, { ...roleProps('warn'), children: c.name }), _jsxs(Text, { ...roleProps('dim'), children: [" (", c.type, ") "] }), _jsx(Text, { dimColor: true, children: c.relation })] }, c.name));
             })] }));
 }

package/dist/ui/widgets/diff-viewer.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
+import { roleProps } from '../role-props.js';
 export function DiffViewer({ data }) {
     const lines = data.unified.split('\n');
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, children: [_jsx(Text, { bold: true, color: "gray", children: "Diff" }), lines.map((line, idx) => {
-                const color = line.startsWith('+') ? 'green' :
-                    line.startsWith('-') ? 'red' :
-                        line.startsWith('@@') ? 'cyan' : 'gray';
-                return (_jsx(Text, { color: color, bold: line.startsWith('@@'), children: line }, idx));
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: roleProps('frame').color, paddingX: 1, children: [_jsx(Text, { ...roleProps('dim', { bold: true }), children: "Diff" }), lines.map((line, idx) => {
+                const role = line.startsWith('+') ? 'ok' :
+                    line.startsWith('-') ? 'bad' :
+                        line.startsWith('@@') ? 'sap' : 'dim';
+                return (_jsx(Text, { ...roleProps(role, { bold: line.startsWith('@@') }), children: line }, idx));
             })] }));
 }

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

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/ui/widgets/files-card.tsx
+//
+// Piece 2 §6.4 — the `/files` picker as a card-slot client under Ink (was an
+// inquirer `search` drawn over the Ink frame). Type to filter by file name
+// (same match as today), ↑/↓ move, Enter picks, Esc/Ctrl+C cancel. Typed-ahead
+// input in the first CONFIRM_INPUT_GUARD_MS is dropped, like every card.
+// The list is bounded to FILES_CARD_ROWS rows (spec §2 height cap).
+import { useRef, useState } from 'react';
+import { Text, useInput } from 'ink';
+import stringWidth from 'string-width';
+import { CardFrame, CONFIRM_INPUT_GUARD_MS } from './confirm-card.js';
+import { roleProps, selectedProps } from '../role-props.js';
+import { getGlyphs } from '../../renderer/glyphs.js';
+import { truncateToWidth } from '../../renderer/ui-width.js';
+import { sanitizeControlChars } from '../../renderer/sanitize.js';
+import { useReclaimRawStdin } from './reclaim-raw-stdin.js';
+export const FILES_CARD_ROWS = 8;
+export function filterFileItems(items, query) {
+    const q = query.toLowerCase();
+    return q.length === 0 ? items : items.filter((i) => i.value.toLowerCase().includes(q));
+}
+/** File names come from disk: neutralise control characters, pre-cut by cells. */
+function fit(text, cells) {
+    return truncateToWidth(sanitizeControlChars(text), Math.max(1, cells));
+}
+export function FilesCard({ request, width, onResolve }) {
+    // Same raw-stdin reclaim as every card (an earlier inquirer prompt can leave
+    // Ink's raw-mode bookkeeping stale).
+    useReclaimRawStdin();
+    const g = getGlyphs();
+    const [query, setQuery] = useState('');
+    const [cursor, setCursor] = useState(0);
+    const mountedAt = useRef(Date.now());
+    const done = useRef(false);
+    const shown = filterFileItems(request.items, query);
+    const finish = (r) => {
+        if (done.current)
+            return;
+        done.current = true;
+        onResolve(r);
+    };
+    useInput((input, key) => {
+        if (done.current)
+            return;
+        if (Date.now() - mountedAt.current < CONFIRM_INPUT_GUARD_MS)
+            return;
+        if (key.escape || (key.ctrl && input === 'c')) {
+            finish({ value: null, cancelled: true });
+            return;
+        }
+        if (key.upArrow) {
+            setCursor((c) => Math.max(0, c - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setCursor((c) => Math.min(Math.max(0, shown.length - 1), c + 1));
+            return;
+        }
+        if (key.return) {
+            const it = shown[cursor];
+            if (it)
+                finish({ value: it.value });
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setQuery((q) => q.slice(0, -1));
+            setCursor(0);
+            return;
+        }
+        if (key.ctrl || key.meta || key.tab)
+            return;
+        // eslint-disable-next-line no-control-regex
+        const printable = input.replace(/[\u0000-\u001f\u007f]/g, '');
+        if (printable.length > 0) {
+            setQuery((q) => q + printable);
+            setCursor(0);
+        }
+    });
+    const start = cursor < FILES_CARD_ROWS ? 0 : cursor - FILES_CARD_ROWS + 1;
+    const visible = shown.slice(start, start + FILES_CARD_ROWS);
+    const hidden = shown.length - start - visible.length;
+    const inner = Math.max(1, width - 4);
+    const dim = roleProps('dim');
+    const searchLabel = 'Search  ';
+    // A long query is cut by cells (with …) so the row never wraps.
+    const queryShown = fit(query, inner - stringWidth(searchLabel) - 1);
+    return (_jsxs(CardFrame, { tag: "QUESTION", footnote: "/files", width: width, children: [_jsx(Text, { bold: true, wrap: "truncate-end", children: fit(request.title, inner) }), _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { ...dim, children: searchLabel }), _jsx(Text, { children: queryShown }), _jsx(Text, { ...roleProps('sap'), children: "_" })] }), visible.length === 0
+                ? _jsx(Text, { ...dim, children: "No file matches" })
+                : visible.map((it, i) => {
+                    const on = start + i === cursor;
+                    const main = fit(`${on ? g.cursor : ' '} ${it.label}`, inner);
+                    const room = inner - stringWidth(main);
+                    const detail = it.detail && room > 2 ? fit(`  ${g.info} ${it.detail}`, room) : '';
+                    return (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { ...(on ? selectedProps() : {}), children: main }), detail ? _jsx(Text, { ...dim, children: detail }) : null] }, it.value));
+                }), hidden > 0 ? _jsx(Text, { ...dim, children: `${g.more} ${hidden} more` }) : null, _jsx(Text, { wrap: "truncate-end", ...dim, children: fit('Type to search · ↑↓ move · Enter picks · Esc cancels', inner) })] }));
+}

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

@@ -1,5 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
+import { roleProps } from '../role-props.js';
 /**
  * Ink-mode rendering of cspeach-widget:question. Uses a double-border box
  * so it's visually distinct from the single-border tool-widget. No
@@ -7,5 +8,5 @@ import { Box, Text } from 'ink';
  * and types their answer as the next REPL prompt.
  */
 export function QuestionCard({ data }) {
-    return (_jsxs(Box, { borderStyle: "double", borderColor: "cyan", flexDirection: "column", padding: 1, marginTop: 1, children: [_jsxs(Text, { bold: true, children: ["Question: ", data.id] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { children: data.question }) }), data.context ? (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Context: ", data.context] }) })) : null, (data.kind === 'choice' || data.kind === 'multi') && data.choices ? (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: data.kind === 'choice' ? 'Pick one:' : 'Pick any (comma-separate):' }), data.choices.map((c, i) => (_jsxs(Text, { children: ["[", i + 1, "] ", c.label] }, c.value)))] })) : null] }));
+    return (_jsxs(Box, { borderStyle: "double", borderColor: roleProps('sap').color, flexDirection: "column", padding: 1, marginTop: 1, children: [_jsxs(Text, { bold: true, children: ["Question: ", data.id] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { children: data.question }) }), data.context ? (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Context: ", data.context] }) })) : null, (data.kind === 'choice' || data.kind === 'multi') && data.choices ? (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: data.kind === 'choice' ? 'Pick one:' : 'Pick any (comma-separate):' }), data.choices.map((c, i) => (_jsxs(Text, { children: ["[", i + 1, "] ", c.label] }, c.value)))] })) : null] }));
 }

package/dist/ui/widgets/reclaim-raw-stdin.js

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { resetTtyStdin } from '../../repl/reset-tty-stdin.js';
+/**
+ * Reclaim raw-mode stdin when an Ink modal mounts (2026-06-08).
+ *
+ * `@inquirer/prompts` toggles the terminal's raw mode (and pauses stdin)
+ * out from under Ink while it runs. When it releases, Ink's INTERNAL
+ * bookkeeping still thinks raw mode is on, so it does not re-assert it — a
+ * card mounted afterwards receives no keypresses. Re-syncing the OS state
+ * to what Ink expects on mount fixes it. Direct `process.stdin` calls (not
+ * Ink's ref-counted setRawMode) because Ink's count is the stale part.
+ *
+ * Moved here from the retired v1 question modal (piece 2 / Q1b) so AskCard
+ * and ApprovalModal share it; the modal file was deleted in Q2.
+ *
+ * Review I2 (2026-09-27): `setRawMode(true)` + `resume()` alone is the pair
+ * the live-fix pty evidence showed does NOT revive Windows console stdin
+ * after an inquirer prompt. Use the full reset cycle (no-op off a TTY).
+ */
+export function useReclaimRawStdin() {
+    useEffect(() => {
+        resetTtyStdin(process.stdin);
+    }, []);
+}

package/dist/ui/widgets/shortcuts-sheet.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { roleProps } from '../role-props.js';
+import { shouldUseUnicodeBoxChars } from '../../renderer/tty.js';
+import { truncateToWidth } from '../../renderer/ui-width.js';
+/** Spec §8 table, in order. */
+export const SHORTCUT_ROWS = [
+    ['/', 'commands'],
+    ['@', 'files'],
+    ['Ctrl+R', 'history'],
+    ['Ctrl+T', 'plan'],
+    ['Shift+Tab', 'mode'],
+    ['Esc Esc', 'rewind'],
+    ['Ctrl+V', 'image'],
+    ['\\', 'new line'],
+];
+export const SHORTCUTS_NOTE = "A message can't start with ? — type it after any other character.";
+const KEY_COL = 11;
+/** The `?` sheet (card-slot occupant 'shortcuts'). Esc closes. */
+export function ShortcutsSheet({ width, onClose }) {
+    useInput((input, key) => { if (key.escape || (key.ctrl && input === 'c'))
+        onClose(); });
+    const inner = Math.max(8, width - 4);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: shouldUseUnicodeBoxChars() ? 'round' : 'classic', borderColor: roleProps('frame').color, paddingX: 1, width: width, children: [_jsx(Text, { bold: true, children: "Shortcuts" }), SHORTCUT_ROWS.map(([key, action]) => (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { ...roleProps('sap'), children: key.padEnd(KEY_COL) }), truncateToWidth(action, Math.max(1, inner - KEY_COL))] }, key))), _jsx(Text, { ...roleProps('dim'), wrap: "truncate-end", children: truncateToWidth(SHORTCUTS_NOTE, inner) }), _jsx(Text, { ...roleProps('dim'), children: "Esc close" })] }));
+}

package/dist/ui/widgets/stack-frames.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
+import { roleProps } from '../role-props.js';
 export function StackFrames({ data }) {
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "red", paddingX: 1, children: [_jsx(Text, { bold: true, color: "red", children: "Stack Frames" }), data.map((f) => (_jsxs(Box, { flexDirection: "column", marginTop: f.frame === 0 ? 0 : 1, children: [_jsx(Box, { children: _jsxs(Text, { color: f.type === 'error' ? 'red' : 'gray', children: ['#' + String(f.frame).padStart(2, '0'), " ", f.program, ":", f.line] }) }), _jsx(Box, { marginLeft: 5, children: _jsx(Text, { color: f.type === 'error' ? 'white' : 'gray', dimColor: f.type === 'context', children: f.code }) })] }, f.frame)))] }));
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: roleProps('bad').color, paddingX: 1, children: [_jsx(Text, { ...roleProps('bad', { bold: true }), children: "Stack Frames" }), data.map((f) => (_jsxs(Box, { flexDirection: "column", marginTop: f.frame === 0 ? 0 : 1, children: [_jsx(Box, { children: _jsxs(Text, { ...roleProps(f.type === 'error' ? 'bad' : 'dim'), children: ['#' + String(f.frame).padStart(2, '0'), " ", f.program, ":", f.line] }) }), _jsx(Box, { marginLeft: 5, children: _jsx(Text, { ...(f.type === 'error' ? {} : roleProps('dim')), dimColor: f.type === 'context', children: f.code }) })] }, f.frame)))] }));
 }

package/dist/upgrade-check.js

@@ -1,6 +1,8 @@
-import chalk from 'chalk';
+import { formatAttention } from './renderer/notice-shape.js';
 import { loadConfig } from './config/loader.js';
 import { CLI_VERSION } from './lib/version.js';
+import { getStore } from './auth/api-key.js';
+import { brandSettled } from './renderer/brand-settled.js';
 function compareVersions(a, b) {
     const pa = a.split('.').map(Number);
     const pb = b.split('.').map(Number);
@@ -12,18 +14,47 @@ function compareVersions(a, b) {
     }
     return 0;
 }
+/**
+ * Minimum-version check (fix round 3, item 11c). The proxy has no
+ * unauthenticated endpoint that carries the minimum CLI version (/health
+ * reports the proxy's own version only), and it never sets an
+ * `x-skill-min-cli-version` header: `min_cli_version` is a field of the
+ * AUTHENTICATED `GET /v1/skills/:name` JSON body. The old unauthenticated
+ * HEAD always got a 401, so the warning could never fire. Now: signed in →
+ * GET with the bearer and read the body field (the header is still honoured
+ * should the proxy add it); not signed in → skip (a 401 tells us nothing).
+ * The warning goes to stderr so one-shot stdout stays the answer only.
+ */
 export async function checkForUpgrade() {
-    const cfg = await loadConfig();
     try {
-        const r = await fetch(`${cfg.proxy_url}/v1/skills/abap-radar`, { method: 'HEAD', signal: AbortSignal.timeout(3000) });
-        const minCli = r.headers.get('x-skill-min-cli-version');
+        const cfg = await loadConfig();
+        const key = await (await getStore()).get();
+        if (!key)
+            return;
+        const r = await fetch(`${cfg.proxy_url}/v1/skills/abap-radar`, {
+            headers: { Authorization: `Bearer ${key}` },
+            signal: AbortSignal.timeout(3000),
+        });
+        if (!r.ok)
+            return;
+        let minCli = r.headers.get('x-skill-min-cli-version');
+        if (!minCli) {
+            const body = (await r.json().catch(() => null));
+            minCli = typeof body?.min_cli_version === 'string' ? body.min_cli_version : null;
+        }
         const current = CLI_VERSION;
-        if (minCli && compareVersions(current, minCli) < 0) {
-            console.log(chalk.yellow.bold(`\n⚠  Your cspeach (${current}) is older than the minimum required (${minCli}).`));
-            console.log(chalk.yellow(`   Run:  cspeach --upgrade\n`));
+        if (minCli && /^\d+(\.\d+){0,2}$/.test(minCli) && compareVersions(current, minCli) < 0) {
+            // Piece 2 §10: one "!" line + Next: (minCli is a server value — formatAttention sanitises it).
+            // Never mid-line: wait for the early panels brand line to end (resolved
+            // at once when none is open — legacy, one-shot, piped).
+            await brandSettled();
+            console.error('\n' + formatAttention({
+                text: `This CSPeach (${current}) is older than the minimum (${minCli})`,
+                next: 'cspeach --upgrade',
+            }).trimEnd());
         }
     }
     catch {
-        // Offline or proxy down — don't block startup.
+        // Offline, keychain unavailable or proxy down — never block startup.
     }
 }