@cspeach/cli 1.1.18 → 1.1.19

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

@@ -0,0 +1,521 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AskCard — the one question card (piece 2, spec §3). Replaces the
+ * retired v1 modal and v2 form widgets (both deleted in Q2).
+ *
+ * NO NEW VALUES (spec invariant) — every resolution is one today's widgets
+ * could return:
+ *   v1 choice → { answer: value }            | { answer: null, cancelled: true }
+ *   v1 multi  → { answer: 'v1,v2' }          (Enter with nothing ticked → the highlighted row)
+ *   v1 text   → { answer: trimmed }          (Enter on empty → cancelled, as today)
+ *   v2 form   → { formId, answers: [{ id, answer, custom? }] } | { formId, answers: [], cancelled: true }
+ * v1 choice/multi get NO free-text row. v2 optioned questions keep one —
+ * "N. Type something else…", today's Other escape (custom: true).
+ *
+ * Forms with 2+ questions: a tab row (pending/answered chip per header,
+ * then a Submit chip) and, after the last answer, a Review step
+ * ("1. Submit answers" / "2. Cancel"). Cancel returns
+ * { formId, answers: [], cancelled: true } — exactly today's Esc.
+ *
+ * Keys: ↑↓ move · 1-9 pick (single) or tick (multi) · Space ticks · Enter
+ * chooses · Tab/→ next and Shift+Tab/← previous question (←/→ only while
+ * the text input is not focused) · Esc cancels; on the free-text row Esc
+ * first returns to the options.
+ */
+import { useMemo, useRef, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from '../text-input.js';
+import { useReclaimRawStdin } from './reclaim-raw-stdin.js';
+import stringWidth from 'string-width';
+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 { answerDisplayText } from '../ask-answer-text.js';
+/** Option rows visible at once — the rest scroll. */
+export const VISIBLE_OPTION_ROWS = 5;
+/**
+ * Single-key cards (the Yes/No agent confirm) drop keys received in the first
+ * GUARD_MS after mount, so a key typed ahead while output streamed cannot
+ * answer the card.
+ */
+const GUARD_MS = 150;
+/**
+ * Card text is model- or tool-supplied. Tabs and newlines are flattened by
+ * truncateToWidth; every OTHER control character is neutralised by the
+ * shared sanitizer so it cannot drive the terminal inside the live frame.
+ */
+const sanitize = sanitizeControlChars;
+/**
+ * Sanitize, then cut to `cells` terminal cells with string-width. Ink's own
+ * truncate-end counts some emoji as one cell, so rows are pre-cut here and
+ * Ink's truncation is only the safety net.
+ */
+function fit(text, cells) {
+    return truncateToWidth(sanitize(text), cells);
+}
+/** Round 4 item 8b — the question wraps up to this many rows, then is cut. */
+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) {
+    if (!suffix)
+        return wrapCardText(question, cells, QUESTION_MAX_ROWS);
+    const rows = wrapCardText(question, cells, QUESTION_MAX_ROWS);
+    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) {
+        rows.push(suffix.trimStart());
+    }
+    else {
+        rows[rows.length - 1] = truncateToWidth(`${last} `, Math.max(1, cells - stringWidth(suffix))) + suffix;
+    }
+    return rows;
+}
+/** Context rows: every line keeps at least one row; wrapping fills the rest of the budget. */
+function contextRows(context, cells) {
+    if (!context)
+        return [];
+    const lines = context.split('\n');
+    let budget = 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));
+        out.push(...rows);
+        budget -= rows.length;
+    });
+    return out;
+}
+export function toCardQuestions(request) {
+    if ('questions' in request) {
+        return request.questions.map((q) => {
+            const freeText = q.freeText || q.options.length === 0;
+            return {
+                id: q.id,
+                question: q.question,
+                context: q.context,
+                header: q.header ?? q.id,
+                multiSelect: !freeText && q.multiSelect,
+                freeText,
+                options: freeText ? [] : q.options,
+                otherRow: !freeText,
+            };
+        });
+    }
+    const freeText = request.kind === 'text' || request.choices.length === 0;
+    return [{
+            id: request.id,
+            question: request.question,
+            context: request.context,
+            header: request.id,
+            multiSelect: !freeText && request.kind === 'multi',
+            freeText,
+            options: freeText ? [] : request.choices,
+            otherRow: false,
+            defaultValue: request.defaultValue,
+            keys: request.keys,
+        }];
+}
+export function askCardHint(kind, opts = {}) {
+    const nav = opts.multiQuestion ? ['Tab next question'] : [];
+    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(' · ');
+        default:
+            return ['↑↓ move', '1-9 or Enter picks', ...nav, 'Esc cancels'].join(' · ');
+    }
+}
+export const REVIEW_HINT = '↑↓ move · 1-2 or 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 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 suffix = q.multiSelect && inner - MULTI_SUFFIX.length >= 1 ? MULTI_SUFFIX : '';
+        const qRows = questionRows(q.question, suffix, inner).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;
+            const arrows = q.options.length > VISIBLE_OPTION_ROWS ? 2 : 0;
+            body = 1 + shown + described + arrows + (q.otherRow ? 1 : 0);
+        }
+        worst = Math.max(worst, chipRows + qRows + ctx + body + 2); // question + body + margin + hint
+    }
+    if (qs.length > 1) {
+        worst = Math.max(worst, chipRows + 1 + qs.length + 1 + REVIEW_CHOICES.length + 2);
+    }
+    return worst;
+}
+/**
+ * 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`
+ * glyph and the rest are dropped.
+ */
+function fitSegments(segs, cells) {
+    if (segs.reduce((w, sg) => w + stringWidth(sg.text), 0) <= cells)
+        return segs;
+    const out = [];
+    let used = 0;
+    for (const seg of segs) {
+        const room = cells - used;
+        const w = stringWidth(seg.text);
+        if (w < room) {
+            out.push(seg);
+            used += w;
+            continue;
+        }
+        // The row overflows, so the segment that reaches the edge must show the
+        // `more` glyph — the trailing space forces a cut even at an exact fit.
+        if (room > 0)
+            out.push({ ...seg, text: truncateToWidth(`${seg.text} `, room) });
+        break;
+    }
+    return out;
+}
+export function AskCard({ request, width, showDescriptions, onResolveV1, onResolveForm, onInterruptTurn }) {
+    useReclaimRawStdin();
+    const g = getGlyphs();
+    const dim = roleProps('dim');
+    const isForm = 'questions' in request;
+    const formId = isForm ? request.formId : '';
+    const questions = useMemo(() => toCardQuestions(request), [request]);
+    const n = questions.length;
+    // Single-key answers (Q3 Yes/No) get a pre-open drop: a `y` typed ahead
+    // while output streamed must not answer the card.
+    const mountGuard = questions.some((qq) => qq.keys !== undefined);
+    const mountedAt = useRef(Date.now());
+    const done = useRef(false);
+    // Focus slots: 0..n-1 = questions; n = the Review step (2+ questions,
+    // reachable only once every question has an answer).
+    const [focus, setFocus] = useState(0);
+    const [cursors, setCursors] = useState(() => questions.map((qq) => Math.max(0, qq.options.findIndex((o) => o.value === qq.defaultValue))));
+    const [ticks, setTicks] = useState(() => questions.map(() => new Set()));
+    const [drafts, setDrafts] = useState(() => questions.map(() => ''));
+    const [answers, setAnswers] = useState(() => questions.map(() => null));
+    const [reviewCursor, setReviewCursor] = useState(0);
+    const isReview = n > 1 && focus === n;
+    const q = isReview ? undefined : questions[focus];
+    const cursor = q ? cursors[focus] : 0;
+    const rowCount = q ? q.options.length + (q.otherRow ? 1 : 0) : 0;
+    const onOther = q !== undefined && q.otherRow && cursor === q.options.length;
+    const inputFocused = q !== undefined && (q.freeText || onOther);
+    const allAnswered = answers.every((a) => a !== null);
+    const setCursor = (i) => setCursors((prev) => prev.map((c, j) => (j === focus ? i : c)));
+    const setDraft = (v) => setDrafts((prev) => prev.map((d, j) => (j === focus ? v : d)));
+    const toggle = (value) => setTicks((prev) => prev.map((s, j) => {
+        if (j !== focus)
+            return s;
+        const next = new Set(s);
+        if (next.has(value))
+            next.delete(value);
+        else
+            next.add(value);
+        return next;
+    }));
+    const cancel = () => {
+        if (done.current)
+            return;
+        done.current = true;
+        if (isForm)
+            onResolveForm({ formId, answers: [], cancelled: true });
+        else
+            onResolveV1({ answer: null, cancelled: true });
+    };
+    const submit = (final) => {
+        if (done.current)
+            return;
+        done.current = true;
+        if (!isForm) {
+            const a = final[0];
+            onResolveV1(a ? { answer: a.answer } : { answer: null, cancelled: true });
+            return;
+        }
+        onResolveForm({
+            formId,
+            // Question order, always — regardless of the order answered in.
+            answers: questions.map((qq, i) => ({
+                id: qq.id,
+                answer: final[i]?.answer ?? null,
+                ...(final[i]?.custom ? { custom: true } : {}),
+            })),
+        });
+    };
+    /**
+     * Commit, then move to the next UNANSWERED question (wrapping). None left:
+     * one-question cards resolve at once; forms open the Review step.
+     */
+    const answerAndAdvance = (i, value, custom) => {
+        const next = answers.map((a, j) => j === i ? { answer: value, ...(custom ? { custom: true } : {}) } : a);
+        // Fix round 3 (item 9c) — "Stop here" / Cancel ends the form now; the
+        // later questions come back null instead of being asked anyway.
+        const picked = custom ? undefined : questions[i]?.options.find((o) => o.value === value);
+        if (picked?.endsForm) {
+            submit(next);
+            return;
+        }
+        for (let step = 1; step <= n; step++) {
+            const j = (i + step) % n;
+            if (next[j] === null) {
+                setAnswers(next);
+                setFocus(j);
+                return;
+            }
+        }
+        if (n === 1) {
+            submit(next);
+            return;
+        }
+        setAnswers(next);
+        setReviewCursor(0);
+        setFocus(n);
+    };
+    const pickEnter = () => {
+        if (!q)
+            return;
+        const opt = q.options[cursor];
+        if (q.multiSelect) {
+            const values = q.options.filter((o) => ticks[focus].has(o.value)).map((o) => o.value);
+            if (values.length > 0)
+                answerAndAdvance(focus, values.join(','));
+            else if (opt)
+                answerAndAdvance(focus, opt.value); // nothing ticked → the highlighted row
+            return;
+        }
+        if (opt)
+            answerAndAdvance(focus, opt.value);
+    };
+    const onTextSubmit = (v) => {
+        const trimmed = v.trim();
+        if (trimmed.length === 0) {
+            if (!isForm)
+                cancel(); // v1 text: Enter on empty cancels (today)
+            return; // v2: ignored (today)
+        }
+        // custom marks the free-text ESCAPE on an optioned question only.
+        answerAndAdvance(focus, trimmed, onOther);
+    };
+    useInput((input, key) => {
+        if (mountGuard && Date.now() - mountedAt.current < GUARD_MS)
+            return;
+        // Ctrl+C cancels outright, the result Esc gives when it cancels (same as
+        // ConfirmCard / FilesCard) — even from the text row, where Esc steps back.
+        // Round 7 item 4 — and then stops the turn (the model must not go on
+        // spending after the user pressed Ctrl+C).
+        if (key.ctrl && input === 'c') {
+            const first = !done.current;
+            cancel();
+            if (first)
+                onInterruptTurn?.();
+            return;
+        }
+        if (key.escape) {
+            if (q && onOther) {
+                setCursor(Math.max(0, q.options.length - 1));
+                return;
+            }
+            cancel();
+            return;
+        }
+        if (n > 1) {
+            const maxSlot = allAnswered ? n : n - 1;
+            if ((key.tab && !key.shift) || (!inputFocused && key.rightArrow)) {
+                setFocus((f) => (f >= maxSlot ? 0 : f + 1));
+                return;
+            }
+            if ((key.tab && key.shift) || (!inputFocused && key.leftArrow)) {
+                setFocus((f) => (f <= 0 ? maxSlot : f - 1));
+                return;
+            }
+        }
+        if (isReview) {
+            if (key.upArrow) {
+                setReviewCursor(0);
+                return;
+            }
+            if (key.downArrow) {
+                setReviewCursor(1);
+                return;
+            }
+            if (input === '1' || (key.return && reviewCursor === 0)) {
+                submit(answers);
+                return;
+            }
+            if (input === '2' || (key.return && reviewCursor === 1)) {
+                cancel();
+                return;
+            }
+            return;
+        }
+        if (!q)
+            return;
+        if (!q.freeText) {
+            if (key.upArrow) {
+                setCursor(Math.max(0, cursor - 1));
+                return;
+            }
+            if (key.downArrow) {
+                setCursor(Math.min(rowCount - 1, cursor + 1));
+                return;
+            }
+        }
+        // The text input owns every other key while it has focus.
+        if (inputFocused)
+            return;
+        // Ctrl+Y / Meta+Y are not "y": only a bare key answers.
+        const alias = key.ctrl || key.meta ? undefined : q.keys?.[input.toLowerCase()];
+        if (alias !== undefined && q.options.some((o) => o.value === alias)) {
+            answerAndAdvance(focus, alias);
+            return;
+        }
+        const digit = /^[1-9]$/.test(input) ? Number(input) - 1 : -1;
+        if (digit >= 0) {
+            if (digit >= rowCount)
+                return;
+            if (q.otherRow && digit === q.options.length) {
+                setCursor(digit);
+                return;
+            }
+            const opt = q.options[digit];
+            if (q.multiSelect) {
+                toggle(opt.value);
+                setCursor(digit);
+                return;
+            }
+            answerAndAdvance(focus, opt.value);
+            return;
+        }
+        if (q.multiSelect && input === ' ') {
+            const opt = q.options[cursor];
+            if (opt)
+                toggle(opt.value);
+            return;
+        }
+        if (key.return)
+            pickEnter();
+    }, { isActive: true });
+    const numbered = (i) => `${i + 1}. `;
+    const inner = Math.max(1, width - 2); // paddingX={1} on both sides
+    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)}`,
+                    props: i === focus ? selectedProps() : dim,
+                })),
+                { text: `  ${g.done} Submit`, props: isReview ? selectedProps() : dim },
+            ], inner).map((sg, i) => _jsx(Text, { ...sg.props, children: sg.text }, `chip-${i}`)) }) })) : null;
+    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) => {
+                    const a = answers[i];
+                    const head = fit(qq.header, headerCol - 2);
+                    const cell = `  ${head}${' '.repeat(Math.max(0, headerCol - stringWidth(head)))}`;
+                    const shown = a ? answerDisplayText(a.answer, qq.options, a.custom === true) : '';
+                    return (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { ...dim, children: fit(cell, inner) }), fit(shown, Math.max(0, inner - stringWidth(cell)))] }, `rev-${i}`));
+                }), _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) }) })] }));
+    }
+    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 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 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) }) })] }));
+}

package/dist/ui/widgets/bar-chart.js

@@ -1,15 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-const VALID_COLORS = ['red', 'yellow', 'cyan', 'green', 'blue', 'magenta', 'white', 'gray'];
-function toInkColor(c) {
-    return VALID_COLORS.includes(c) ? c : 'white';
+import { roleProps } from '../role-props.js';
+// The model names a colour; the bar takes the matching theme role, so it follows
+// NO_COLOR and the light palette. White / unknown → the terminal's own text colour.
+const COLOR_ROLE = {
+    red: 'bad', yellow: 'warn', green: 'ok', cyan: 'sap', blue: 'sap', magenta: 'brand', gray: 'dim',
+};
+function barProps(c) {
+    const role = c ? COLOR_ROLE[c] : undefined;
+    return role ? roleProps(role) : {};
 }
 export function BarChart({ data }) {
     const max = Math.max(...data.map((d) => d.value), 1);
     const barWidth = 30;
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "Distribution" }), data.map((item) => {
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: roleProps('frame').color, paddingX: 1, children: [_jsx(Text, { ...roleProps('sap', { bold: true }), children: "Distribution" }), data.map((item) => {
                 const filled = Math.round((item.value / max) * barWidth);
                 const bar = '\u2588'.repeat(filled) + '\u2591'.repeat(barWidth - filled);
-                return (_jsxs(Box, { children: [_jsxs(Text, { children: [item.label.padEnd(28), " "] }), _jsx(Text, { color: toInkColor(item.color), children: bar }), _jsxs(Text, { children: [" ", item.value] })] }, item.label));
+                return (_jsxs(Box, { children: [_jsxs(Text, { children: [item.label.padEnd(28), " "] }), _jsx(Text, { ...barProps(item.color), children: bar }), _jsxs(Text, { children: [" ", item.value] })] }, item.label));
             })] }));
 }