@cspeach/cli 1.1.17 → 1.1.19

package/dist/ui/approval-modal.js

@@ -1,10 +1,11 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box, Text, useInput } from 'ink';
+import { riskReasonText, shownRiskReasons } from '../approvals/risk-floor.js';
 import { verbLine, viewAffordance, toSourceLines } from '../approvals/op-labels.js';
 // BUG-1 (2026-07-05 live smoke): the interactive approval modal mounted
 // DEAD — every keypress ignored — when it appeared after a guarded
-// /abap-plan turn. Root cause is identical to the one AskQuestionModal
+// /abap-plan turn. Root cause is identical to the one AskCard
 // already solves: the approval plan-gate / run-lease takeover uses
 // `@inquirer/prompts`, which toggles the terminal's raw mode (and pauses
 // stdin) out from under Ink. When it releases, Ink's INTERNAL ref-count
@@ -12,19 +13,25 @@ import { verbLine, viewAffordance, toSourceLines } from '../approvals/op-labels.
 // mounted afterwards receives no keypresses. Reclaiming raw stdin on mount
 // (direct process.stdin calls, because Ink's count is the thing that's
 // stale) re-syncs the OS state to what Ink's useInput expects.
-import { useReclaimRawStdin } from './widgets/ask-question-modal.js';
-const LABEL_MAP = {
-    delete_op: 'delete op detected',
-    prod_namespace: 'PROD namespace',
-    shared_transport: 'transport shared by 3+ devs',
-    atc_failed_24h: 'ATC failed in last 24h',
-    non_prod_override: 'auto-approve policy: never',
-    escalated_in_session: '>5 changes this session',
-};
+import { useReclaimRawStdin } from './widgets/reclaim-raw-stdin.js';
+import { getLook } from '../renderer/look.js';
+import { roleProps, inkChip, legacyInkColor } from './role-props.js';
+// Legacy look: today's literal names (bytes unchanged while colour is on).
 function riskColor(level) {
     return level === 'high' ? 'red' : level === 'medium' ? 'yellow' : 'green';
 }
-export function ApprovalModal({ change, effectiveRisk, transport, onApply, onSkip, onDiff, onCancel }) {
+// Panels look: the same meaning as theme roles. Without colour the risk still
+// reads from the "Risk: <level>" text.
+function riskRole(level) {
+    return level === 'high' ? 'bad' : level === 'medium' ? 'warn' : 'ok';
+}
+/** Review-view line colour: + added, - removed, rest dim. */
+function diffLineColor(line, panels) {
+    if (panels)
+        return roleProps(line.startsWith('+') ? 'ok' : line.startsWith('-') ? 'bad' : 'dim').color;
+    return legacyInkColor(line.startsWith('+') ? 'green' : line.startsWith('-') ? 'red' : 'gray');
+}
+export function ApprovalModal({ change, effectiveRisk, transport, onApply, onSkip, onDiff, onCancel, onInterruptTurn }) {
     // 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();
@@ -52,6 +59,15 @@ export function ApprovalModal({ change, effectiveRisk, transport, onApply, onSki
             onDiff();
             return;
         }
+        // `c` is the [c] Cancel turn key; Ctrl+C (Ink: input 'c' + key.ctrl) and
+        // Esc cancel too — spelled out, not by coincidence (review M6).
+        // Review r7 M-7 — Ctrl+C then stops the turn too; Esc / [c] only resolve
+        // the card with the cancel-turn result, as before.
+        if (key.ctrl && input === 'c') {
+            onCancel();
+            onInterruptTurn?.();
+            return;
+        }
         if (input === 'c' || key.escape) {
             onCancel();
             return;
@@ -60,9 +76,11 @@ export function ApprovalModal({ change, effectiveRisk, transport, onApply, onSki
     // Review sub-view — a diff (modify) or a source dump (create/delete).
     if (viewing && aff) {
         const isDiff = aff.key === 'd';
-        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, children: [_jsxs(Text, { bold: true, children: [isDiff ? 'Diff' : aff.label, " \u2014 Esc to return"] }), change.diff ? (isDiff ? (change.diff.split('\n').map((line, i) => (_jsx(Text, { wrap: "truncate-end", color: line.startsWith('+') ? 'green' : line.startsWith('-') ? 'red' : 'gray', children: line }, i)))) : (toSourceLines(change.diff).map((line, i) => (_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { color: "gray", children: [String(i + 1).padStart(4), "  "] }), line] }, i))))) : (_jsx(Text, { dimColor: true, children: "(no source provided by the model)" }))] }));
+        const panels = getLook() === 'panels';
+        const quiet = panels ? roleProps('dim').color : legacyInkColor('gray');
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: panels ? roleProps('frame').color : quiet, paddingX: 1, children: [_jsxs(Text, { bold: true, children: [isDiff ? 'Diff' : aff.label, " \u2014 Esc to return"] }), change.diff ? (isDiff ? (change.diff.split('\n').map((line, i) => (_jsx(Text, { wrap: "truncate-end", color: diffLineColor(line, panels), children: line }, i)))) : (toSourceLines(change.diff).map((line, i) => (_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { color: quiet, children: [String(i + 1).padStart(4), "  "] }), line] }, i))))) : (_jsx(Text, { dimColor: true, children: "(no source provided by the model)" }))] }));
     }
-    const raisedLabel = effectiveRisk.raisedBy.map((r) => LABEL_MAP[r] ?? r).join(', ');
+    const raisedLabel = shownRiskReasons(effectiveRisk.raisedBy).map(riskReasonText).join('; ');
     // 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
@@ -76,11 +94,19 @@ export function ApprovalModal({ change, effectiveRisk, transport, onApply, onSki
         metaSegs.push(`Transport: ${transport}`);
     // Op-aware verb line ("Create table ZMNT_NOTE"); delete gets the hot accent.
     const verb = verbLine(change);
-    const verbColor = change.op === 'delete' ? 'red' : undefined;
+    const verbColor = change.op === 'delete' ? legacyInkColor('red') : undefined;
     // Keys row — one line, human words, truncate-end (Wave-1 no-wrap rule).
     const keys = ['[a] Approve'];
     if (aff)
         keys.push(`[${aff.key}] ${aff.label}`);
     keys.push('[s] Skip', '[c] Cancel turn');
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: 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: riskColor(effectiveRisk.level), wrap: "truncate-end", children: ["Risk: ", effectiveRisk.level, raisedLabel ? `  (raised from low: ${raisedLabel})` : ''] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { wrap: "truncate-end", children: keys.join('   ') }) })] }));
+    // 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.
+    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", 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('   ') }) })] }));
 }

package/dist/ui/ask-answer-text.js

@@ -0,0 +1,17 @@
+/**
+ * The words a person picked — for the scrollback trace (tools/ask-question.ts)
+ * and the form's Review step (widgets/ask-card.tsx). Option VALUES are
+ * machine ids, so show their LABELS; a multi answer is comma-joined values.
+ * Typed answers (custom escape, free text) are shown exactly as typed.
+ */
+export function answerDisplayText(answer, options, custom = false) {
+    if (custom || options.length === 0)
+        return answer;
+    const whole = options.find((o) => o.value === answer);
+    if (whole)
+        return whole.label;
+    return answer
+        .split(',')
+        .map((v) => options.find((o) => o.value === v)?.label ?? v)
+        .join(', ');
+}

package/dist/ui/body.js

@@ -1,9 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useReducer, useEffect } from 'react';
 import { Text, Static } from 'ink';
 import { WIDGET_COMPONENTS } from './widgets/component-registry.js';
 import { WIDGET_CONTROL } from './widget-control.js';
 import { formatNoticeLine } from '../renderer/notices.js';
+import { getLook } from '../renderer/look.js';
+import { getGlyphs } from '../renderer/glyphs.js';
+import { roleProps } from './role-props.js';
+import { attachFlow, InkNodeCommitter } from '../renderer/transcript-flow.js';
 /**
  * Frame interval for batching streaming chunks before dispatching to the
  * reducer (W2.2 — 2026-05-18). Ink already throttles its stdout writes to
@@ -131,7 +135,7 @@ function renderNode(n) {
         const Comp = WIDGET_COMPONENTS[n.widgetType];
         return _jsx(Comp, { data: n.data }, n.id);
     }
-    return _jsx(Text, { color: "yellow", children: "\u26A0 widget render error" }, n.id);
+    return _jsxs(Text, { ...roleProps('warn'), children: [getGlyphs().attention, " This widget could not be shown"] }, n.id);
 }
 /**
  * Inline-mode Body (Phase D6, 2026-05-17) — back to CC's architecture
@@ -161,16 +165,31 @@ export const Body = React.memo(function Body({ chunkEmitter }) {
         // pays nothing; dense stream (e.g. 5000 chunks during code-gen) sees
         // ~60 reducer calls instead of 5000. dispose() flushes pending text
         // synchronously on unmount so end-of-stream output isn't dropped.
-        const batcher = createChunkBatcher((buffered) => dispatch({ chunk: buffered }));
-        const handler = (chunk) => batcher.push(chunk);
+        // Panels look (polish P1): spacing is normalised as chunks arrive
+        // (transcript-flow.ts) and each batch is committed so a node renders like
+        // the same bytes on a terminal (no extra blank line per node). Legacy:
+        // untouched pass-through, as before.
+        const flow = attachFlow(chunkEmitter);
+        const committer = new InkNodeCommitter();
+        const batcher = createChunkBatcher((buffered) => {
+            if (getLook() !== 'panels') {
+                dispatch({ chunk: buffered });
+                return;
+            }
+            const node = committer.commit(buffered);
+            if (node !== null)
+                dispatch({ chunk: node });
+        });
+        const feed = (s) => (getLook() === 'panels' ? flow.feed(s) : s);
+        const handler = (chunk) => batcher.push(feed(chunk));
         // B2 fix (2026-06-12) — consume the 'warn'/'info' notice channel.
         // Tool handlers (transport-resolution Rule 9 notices, write-tool
         // snapshot lines) emit these levels on the same emitter; before this
         // they were silent no-ops in the live Ink REPL. Notices are formatted
         // to a single line and pushed through the SAME batcher so their order
         // relative to surrounding chunk text is preserved.
-        const warnHandler = (msg) => batcher.push(formatNoticeLine('warn', msg));
-        const infoHandler = (msg) => batcher.push(formatNoticeLine('info', msg));
+        const warnHandler = (msg) => batcher.push(feed(formatNoticeLine('warn', msg)));
+        const infoHandler = (msg) => batcher.push(feed(formatNoticeLine('info', msg)));
         chunkEmitter.on('chunk', handler);
         chunkEmitter.on('warn', warnHandler);
         chunkEmitter.on('info', infoHandler);

package/dist/ui/card-slot.js

@@ -0,0 +1,98 @@
+// src/ui/card-slot.ts
+//
+// Card-slot request API (CLI look piece 2, spec §1.6) — the only way anything
+// asks the user something under Ink. It performs the input-focus claim itself:
+// suspendActiveSpinner() + turnStatusEmitter.pause(), both resumed on close — the
+// pattern that fixed the doubled-card / Enter-leak / 10-minute-wedge bug
+// (was duplicated in repl/safety-confirm.ts and commands/plan-chain.ts).
+// App mounts ONE card at a time (ui/live-area.ts pickSlotOccupant).
+import { EventEmitter } from 'node:events';
+import { suspendActiveSpinner } from '../renderer/tool-widget.js';
+import { turnStatusEmitter } from './turn-status-emitter.js';
+/**
+ * Claim exclusive input focus for the duration of `fn`: pause the in-place
+ * tool spinner and freeze the ticking status row so only the card repaints.
+ * Both come back when the card closes (piece 2 seam 5: the tool is usually
+ * still running after the card, so the classic spinner must resume). A
+ * single claim behaves as before for the row (incl. resume() when the row
+ * was active, even if it was already paused before the claim). Overlapping
+ * claims share one pause: the row and the spinner resume when the last of
+ * them releases.
+ */
+let claimDepth = 0;
+let resumeOnLastRelease = false;
+/** Seam 5: one spinner resume per live claim of this turn, all fired on the last live release. */
+let spinnerResumes = [];
+/** The top-level turn the count above belongs to (turnStatusEmitter.turnGeneration). */
+let claimTurn = -1;
+export async function withFocusClaim(fn) {
+    // C2 hardening: the count is per top-level turn. A new turn starts it
+    // afresh, so a claim left unsettled by an earlier turn (Ctrl+C mid-card)
+    // can never hold the count above 0 and suppress this turn's resume.
+    const turn = turnStatusEmitter.turnGeneration();
+    if (turn !== claimTurn) {
+        claimTurn = turn;
+        claimDepth = 0;
+        resumeOnLastRelease = false;
+        // A stale claim's suspend is dropped, never resumed: its tool/turn is over.
+        spinnerResumes = [];
+    }
+    // Seam 5: SUSPEND, not stop. Every claim suspends (counted in the spinner),
+    // so nothing paints under an open card; its one-shot resume is released
+    // with the last live claim below.
+    spinnerResumes.push(suspendActiveSpinner());
+    // Refcounted (C1 fix round 1): a replaced card resolves its claim while the
+    // replacing card is still open. Only the LAST release may resume the row,
+    // otherwise it would tick again under the open card.
+    if (turnStatusEmitter.snapshot().active) {
+        turnStatusEmitter.pause();
+        resumeOnLastRelease = true;
+    }
+    claimDepth += 1;
+    try {
+        return await fn();
+    }
+    finally {
+        // A stale claim (its turn is over) settles without touching any count
+        // and never resumes: not under a later turn's open card, and not under a
+        // loop-level pause (ask_question, the save hook) taken before that turn
+        // made its first claim (C2 fix round 1).
+        const live = turn === claimTurn && turn === turnStatusEmitter.turnGeneration();
+        if (live)
+            claimDepth -= 1;
+        if (live && claimDepth === 0 && resumeOnLastRelease) {
+            resumeOnLastRelease = false;
+            // resume() is a no-op if the turn already ended (Ctrl+C mid-card).
+            turnStatusEmitter.resume();
+        }
+        if (live && claimDepth === 0 && spinnerResumes.length > 0) {
+            const resumes = spinnerResumes;
+            spinnerResumes = [];
+            // No-op when there was no spinner, when the tool stopped it meanwhile,
+            // or while another owner (an inquirer prompt) still holds it.
+            for (const resumeSpinner of resumes)
+                resumeSpinner();
+        }
+    }
+}
+class CardSlotEmitter extends EventEmitter {
+    /** No listener (classic / headless / App not mounted) → cancelled, nothing shown, no claim. */
+    requestConfirm(req) {
+        if (this.listenerCount('confirm') === 0) {
+            return Promise.resolve({ value: null, cancelled: true });
+        }
+        return withFocusClaim(() => new Promise((resolve) => {
+            this.emit('confirm', { ...req, resolve });
+        }));
+    }
+    on(event, listener) {
+        return super.on(event, listener);
+    }
+    off(event, listener) {
+        return super.off(event, listener);
+    }
+    listenerCount(event) {
+        return super.listenerCount(event);
+    }
+}
+export const cardSlotEmitter = new CardSlotEmitter();

package/dist/ui/checklist.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { formatChecklist } from '../renderer/checklist-format.js';
+export function Checklist(p) {
+    const lines = formatChecklist(p.todos, p);
+    if (lines.length === 0)
+        return null;
+    return (_jsx(Box, { flexDirection: "column", children: lines.map((l, i) => _jsx(Text, { wrap: "truncate-end", children: l }, i)) }));
+}

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

@@ -1,22 +1,25 @@
 import { select } from '@inquirer/prompts';
 import { PICK_CANCELLED } from './skill-picker.js';
+import { truncateToWidth, uiWidth } from '../renderer/ui-width.js';
+import { sanitizeControlChars } from '../renderer/sanitize.js';
 const CANCEL_VALUE = '__cancel__';
 /**
  * Classic-mode coaching picker via inquirer's select prompt. Each choice shows
- * a single-line `name` (skill + confidence %) in the list; the "Does:" and
- * "Pick if:" sub-lines appear under the highlighted entry via `description`.
+ * a single-line `name` (skill + what it does) in the list; the "Pick if:"
+ * sub-line appears under the highlighted entry via `description`.
  * Cancel entry always present at the bottom.
  *
  * Ink-mode has a separate implementation — see src/ui/widgets/coaching-picker.tsx.
  */
 export async function coachingPickerClassic(params) {
     const choices = params.options.map((opt) => ({
-        name: `/${opt.skill} · ${Math.round(opt.confidence * 100)}%`,
+        // Piece 2 §3: the skill plus what it does; the confidence % is dropped.
+        name: truncateToWidth(sanitizeControlChars(`/${opt.skill} · ${opt.whatItDoes}`), Math.max(20, uiWidth() - 4)),
         value: opt.skill,
-        description: `  Does: ${opt.whatItDoes}\n  Pick if: ${opt.whenToPick}`,
+        description: `  Pick if: ${opt.whenToPick}`,
     }));
     choices.push({
-        name: '↩ cancel (go back to prompt)',
+        name: 'Cancel · back to the prompt',
         value: CANCEL_VALUE,
     });
     const message = `I'm not sure which skill fits for: "${params.prompt.slice(0, 50)}${params.prompt.length > 50 ? '...' : ''}". Pick one:`;

package/dist/ui/command-palette.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useMemo } from 'react';
 import { Box, Text, useInput } from 'ink';
 import TextInput from 'ink-text-input';
+import { roleProps, selectedProps } from './role-props.js';
 import { ALL_SLASH_ENTRIES } from '../repl/slash-picker.js';
 const VISIBLE_ROWS = 8;
 // Longest command is /abap-transport-analysis (24) — fixed column keeps
@@ -39,8 +40,9 @@ export function CommandPalette({ initialQuery, onSelect, onCancel }) {
     const [cursor, setCursor] = useState(0);
     const results = useMemo(() => rankCommandMatches(query), [query]);
     useEffect(() => { setCursor(0); }, [query]);
-    useInput((_input, key) => {
-        if (key.escape) {
+    useInput((input, key) => {
+        // Ctrl+C cancels like Esc (fix round 3, item 4).
+        if (key.escape || (key.ctrl && input === 'c')) {
             onCancel();
             return;
         }
@@ -62,9 +64,9 @@ export function CommandPalette({ initialQuery, onSelect, onCancel }) {
     const windowStart = Math.max(0, Math.min(cursor - 3, results.length - VISIBLE_ROWS));
     const visible = results.slice(windowStart, windowStart + VISIBLE_ROWS);
     const below = Math.max(0, results.length - (windowStart + VISIBLE_ROWS));
-    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: "/ " }), _jsx(TextInput, { value: query, onChange: setQuery, placeholder: "type to filter commands" })] }), results.length === 0 && (_jsx(Text, { dimColor: true, children: "  no matching command \u2014 edit the filter or Esc to cancel" })), windowStart > 0 && _jsxs(Text, { dimColor: true, children: ["  \u2191 ", windowStart, " more"] }), visible.map((e, i) => {
+    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [_jsxs(Box, { children: [_jsx(Text, { ...roleProps('sap'), children: "/ " }), _jsx(TextInput, { value: query, onChange: setQuery, placeholder: "type to filter commands" })] }), results.length === 0 && (_jsx(Text, { dimColor: true, children: "  no matching command \u2014 edit the filter or Esc to cancel" })), windowStart > 0 && _jsxs(Text, { dimColor: true, children: ["  \u2191 ", windowStart, " more"] }), visible.map((e, i) => {
                 const idx = windowStart + i;
                 const sel = idx === cursor;
-                return (_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { color: sel ? 'cyan' : undefined, bold: sel, children: [sel ? '▸ ' : '  ', e.name.padEnd(NAME_COL)] }), _jsx(Text, { dimColor: true, children: e.description })] }, e.name));
+                return (_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { ...(sel ? selectedProps() : {}), children: [sel ? '▸ ' : '  ', e.name.padEnd(NAME_COL)] }), _jsx(Text, { dimColor: true, children: e.description })] }, e.name));
             }), below > 0 && _jsxs(Text, { dimColor: true, children: ["  \u2193 ", below, " more"] }), _jsx(Text, { dimColor: true, children: "  \u2191\u2193 navigate \u00B7 Enter select \u00B7 Esc cancel" })] }));
 }

package/dist/ui/confirm-request.js

@@ -0,0 +1,18 @@
+// src/ui/confirm-request.ts
+//
+// The one way product code asks a confirm under Ink (piece 2 §5): ask through
+// the card slot, then leave the one-line decision record in scrollback (§1.5).
+// F4's cardSlotEmitter.requestConfirm already runs inside withFocusClaim
+// (spinner stopped, status row paused, resumed after — the 2026-06-13
+// doubled-card / Enter-leak / 10-minute-wedge fix), so the focus is claimed
+// exactly once there; askConfirm must not wrap it again (spec §1.6).
+import { cardSlotEmitter } from './card-slot.js';
+import { emitTrace, formatDecisionTrace } from '../renderer/trace.js';
+export async function askConfirm(req, opts = {}) {
+    const res = await cardSlotEmitter.requestConfirm(req);
+    if (opts.trace !== false) {
+        const picked = res.value == null ? undefined : req.choices.find((c) => c.value === res.value);
+        emitTrace(formatDecisionTrace(opts.traceLabel ?? req.title, picked?.label ?? 'Cancelled'));
+    }
+    return res;
+}

package/dist/ui/context-grid.js

@@ -15,6 +15,7 @@
 // classic ones and an ANSI escape can never be split by the cut.
 import chalk from 'chalk';
 import { shouldUseUnicodeBoxChars } from '../renderer/tty.js';
+import { paint } from '../renderer/theme.js';
 import { buildContextReport } from '../session/context-report.js';
 import { readCostLog } from '../cost/cost-log.js';
 /** Bars never exceed this many columns (Wave-1 proportional-bar cap). */
@@ -84,7 +85,7 @@ export function renderContextGrid(report, opts = {}) {
         for (const h of report.hints) {
             // Same order as the header: plain-truncate, THEN color.
             const text = truncateEnd(`${arrow} ${h}`, width);
-            lines.push(color ? chalk.dim(text) : text);
+            lines.push(color ? paint('dim', text) : text);
         }
     }
     return lines;

package/dist/ui/file-palette.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useMemo } from 'react';
 import { Box, Text, useInput } from 'ink';
 import TextInput from 'ink-text-input';
+import { roleProps, selectedProps } from './role-props.js';
 import { filterFileChoices } from '../repl/at-picker.js';
 const VISIBLE_ROWS = 8;
 /**
@@ -15,8 +16,9 @@ export function FilePalette({ files, initialQuery, onSelect, onCancel }) {
     const [cursor, setCursor] = useState(0);
     const results = useMemo(() => filterFileChoices(query, files), [query, files]);
     useEffect(() => { setCursor(0); }, [query]);
-    useInput((_input, key) => {
-        if (key.escape) {
+    useInput((input, key) => {
+        // Ctrl+C cancels like Esc (fix round 3, item 4).
+        if (key.escape || (key.ctrl && input === 'c')) {
             onCancel();
             return;
         }
@@ -36,9 +38,9 @@ export function FilePalette({ files, initialQuery, onSelect, onCancel }) {
     const windowStart = Math.max(0, Math.min(cursor - 3, results.length - VISIBLE_ROWS));
     const visible = results.slice(windowStart, windowStart + VISIBLE_ROWS);
     const below = Math.max(0, results.length - (windowStart + VISIBLE_ROWS));
-    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: "@ " }), _jsx(TextInput, { value: query, onChange: setQuery, placeholder: "type to filter workspace files" })] }), results.length === 0 && (_jsx(Text, { dimColor: true, children: "  no matching file \u2014 edit the filter or Esc to cancel" })), windowStart > 0 && _jsxs(Text, { dimColor: true, children: ["  \u2191 ", windowStart, " more"] }), visible.map((f, i) => {
+    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [_jsxs(Box, { children: [_jsx(Text, { ...roleProps('sap'), children: "@ " }), _jsx(TextInput, { value: query, onChange: setQuery, placeholder: "type to filter workspace files" })] }), results.length === 0 && (_jsx(Text, { dimColor: true, children: "  no matching file \u2014 edit the filter or Esc to cancel" })), windowStart > 0 && _jsxs(Text, { dimColor: true, children: ["  \u2191 ", windowStart, " more"] }), visible.map((f, i) => {
                 const idx = windowStart + i;
                 const sel = idx === cursor;
-                return (_jsx(Text, { wrap: "truncate-end", children: _jsxs(Text, { color: sel ? 'cyan' : undefined, bold: sel, children: [sel ? '▸ ' : '  ', f.filename] }) }, f.filename));
+                return (_jsx(Text, { wrap: "truncate-end", children: _jsxs(Text, { ...(sel ? selectedProps() : {}), children: [sel ? '▸ ' : '  ', f.filename] }) }, f.filename));
             }), below > 0 && _jsxs(Text, { dimColor: true, children: ["  \u2193 ", below, " more"] }), _jsx(Text, { dimColor: true, children: "  \u2191\u2193 navigate \u00B7 Enter select \u00B7 Esc cancel" })] }));
 }

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

@@ -0,0 +1,19 @@
+// src/ui/files-card-emitter.ts
+//
+// Piece 2 §6.4 — the `/files` search-and-list card's request channel (card
+// slot occupant 'files'). Same no-listener contract as askQuestionEmitter and
+// cardSlotEmitter: resolve cancelled at once so nothing ever waits on a UI
+// that is not mounted.
+import { EventEmitter } from 'node:events';
+class FilesCardEmitter extends EventEmitter {
+    requestPick(req) {
+        return new Promise((resolve) => {
+            if (this.listenerCount('files') === 0) {
+                resolve({ value: null, cancelled: true });
+                return;
+            }
+            this.emit('files', { ...req, resolve });
+        });
+    }
+}
+export const filesCardEmitter = new FilesCardEmitter();

package/dist/ui/footer-line.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text, useStdout } from 'ink';
+import { useSapState } from './sap-state-store.js';
+import { formatFooterLine, footerStateFrom } from '../renderer/footer-line.js';
+import { inputBoxWidth } from './footer.js';
+/**
+ * The one footer line under the input box (piece 2, spec §8) — replaces the
+ * StatusLine. Same width as the input box so the two align. Single truncating
+ * <Text>: a dynamic-frame row must never soft-wrap.
+ */
+export function FooterLine() {
+    const s = useSapState();
+    const { stdout } = useStdout();
+    const width = inputBoxWidth(stdout?.columns || 80);
+    return _jsx(Text, { wrap: "truncate-end", children: formatFooterLine(footerStateFrom(s), width) });
+}