@cspeach/cli 1.1.18 → 1.1.20

package/dist/ui/app.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback, useRef } from 'react';
-import { Box, useInput } from 'ink';
-import crypto from 'node:crypto';
+import chalk from 'chalk';
+import { Box, Text, useInput, useStdout } from 'ink';
+import { roleProps } from './role-props.js';
+import { IDLE_EXIT_WINDOW_MS } from './interrupt.js';
 import { Body } from './body.js';
 import { Footer } from './footer.js';
 import { ApprovalModal } from './approval-modal.js';
@@ -9,63 +11,61 @@ import { CommandPalette } from './command-palette.js';
 import { FilePalette } from './file-palette.js';
 import { nextResolutionStep, applySlashPick } from './line-resolution.js';
 import { TurnStatus } from './turn-status.js';
-import { StatusLine } from './status-line.js';
+import { FooterLine } from './footer-line.js';
+import { ShortcutsSheet } from './widgets/shortcuts-sheet.js';
+import { wasPasted } from '../repl/paste-marker.js';
 import { turnStatusEmitter } from './turn-status-emitter.js';
+import { pickSlotOccupant, liveBudget, SLOT_ROWS_ESTIMATE, PALETTE_ROWS } from './live-area.js';
+import { Checklist } from './checklist.js';
+import { formatChecklist, isPlanFinished, CHECKLIST_MAX_ROWS } from '../renderer/checklist-format.js';
 import { listWorkspaceFileChoices } from '../repl/at-picker.js';
-import { RichErrorBox } from './rich-error-box.js';
 import { SessionTimeline, toTimelineEntry } from './session-timeline.js';
-import { TodoPanel } from './todo-panel.js';
 import { RewindPanel } from './rewind-panel.js';
 import { rewindEmitter } from './rewind-emitter.js';
 import { todoEmitter } from './todo-emitter.js';
 import { approvalEmitter } from './approval-emitter.js';
-import { errorEmitter } from './error-emitter.js';
 import { SapStateContext, globalStore } from './sap-state-store.js';
 import { coachingPickerEmitter } from './coaching-picker-emitter.js';
 import { CoachingPicker } from './widgets/coaching-picker.js';
 import { askQuestionEmitter } from './ask-question-emitter.js';
-import { AskQuestionModal } from './widgets/ask-question-modal.js';
-import { AskForm } from './widgets/ask-form.js';
+import { AskCard, estimateAskCardRows } from './widgets/ask-card.js';
+import { ConfirmCard, estimateConfirmCardRows } from './widgets/confirm-card.js';
+import { cardSlotEmitter } from './card-slot.js';
+import { useCardRequest } from './use-card-request.js';
+import { FilesCard } from './widgets/files-card.js';
+import { filesCardEmitter } from './files-card-emitter.js';
+import { uiWidth } from '../renderer/ui-width.js';
 import { runModeCommand } from '../repl/mode-cycle.js';
 import { enqueueSteering } from '../agent/steering-queue.js';
+import { steeringEchoLine, classifyMidTurnLine, midTurnSlashHint } from '../renderer/steering-echo.js';
+// Moved to renderer/steering-echo.ts (piece 2 I1); re-exported for existing importers.
+export { STEERING_ECHO_MAX, formatSteeringEcho } from '../renderer/steering-echo.js';
 /**
- * Wave1 fast-follow — steering-echo truncation. The `↳ queued ▸` line
- * used to echo the ENTIRE queued text; a queued multiline paste dumped a
- * whole banner into scrollback (observed live). Show only the first line,
- * clipped to STEERING_ECHO_MAX chars, with `… (+N lines)` when more lines
- * were queued (`…` alone when just the first line was clipped). Exported
- * for the format-pinning test.
+ * I1 (spec §7) — slot occupants that ASK the user something. While one of
+ * these waits, the input box reads "› (answer above to continue)". The
+ * timeline, rewind and shortcuts panels also disable the box, but show no
+ * words.
  */
-export const STEERING_ECHO_MAX = 60;
-export function formatSteeringEcho(text) {
-    const lines = text.split('\n');
-    const first = lines[0] ?? '';
-    const extra = lines.length - 1;
-    const clipped = first.length > STEERING_ECHO_MAX;
-    let out = clipped ? first.slice(0, STEERING_ECHO_MAX) : first;
-    if (clipped || extra > 0)
-        out += '…';
-    if (extra > 0)
-        out += ` (+${extra} line${extra === 1 ? '' : 's'})`;
-    return out;
+const ASKING_OCCUPANTS = new Set(['ask', 'confirm', 'approval', 'coaching', 'files']);
+export function isAskingOccupant(occupant) {
+    return ASKING_OCCUPANTS.has(occupant);
 }
 /**
- * App — inline-mode Ink frame (Phase D6, 2026-05-17). After the
- * alt-screen detour, reverted to CC's architecture:
+ * App — inline-mode Ink frame. Live area, top to bottom (CLI look piece 2,
+ * spec §2 — the Claude Code layout):
  *
- *   (startup banner)            ← printed once by repl.tsx, becomes scrollback
- *   <Body chunkEmitter=… />     ← <Static> commits each node, becomes scrollback
- *   {coachingPending && …}      ← inline overlays that mount above input
- *   {askQuestionPending && …}
- *   <TurnStatus />              ← dynamic, live turn progress
- *   <StatusLine />              ← dynamic, persistent SAP statusline (Task 4)
- *   <Footer />                  ← dynamic, re-renders at cursor (sticky-ish)
+ *   <Body />            ← <Static> scrollback (unchanged)
+ *   <Checklist />       ← live plan checklist (P2, spec §4)
+ *   card slot           ← ONE of approval / confirm / ask / coaching / files /
+ *                         rewind / timeline / shortcuts (pickSlotOccupant)
+ *   <TurnStatus />      ← only while working and no card waits
+ *   <Footer />          ← the input box
+ *   <FooterLine />      ← system · user · transport · mode · spend, `? shortcuts`
+ *   palettes            ← `/` commands, `@` files — under the footer
  *
- * No alt-screen, no termHeight, no PgUp scroll state. The terminal's
- * native scrollback handles all of it — mouse wheel, PgUp, search,
- * everything just works because we render inline like a normal CLI.
+ * The terminal's native scrollback handles everything above the live area.
  */
-export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger, getToolCalls, getTodos, getRewindCandidates, onRewindRestore, sapRole, sapAlias, onInterrupt }) {
+export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger, getToolCalls, getTodos, getRewindCandidates, onRewindRestore, sapRole, sapAlias, onInterrupt, onExitRequest }) {
     const [pendingApproval, setPendingApproval] = useState(null);
     // Task 3 review I1(b): synchronous mirror + monotonic remount key — the same
     // I2 treatment ask-question already has. A second approval request arriving
@@ -81,8 +81,8 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
     // lag an arrival that happened during the await).
     const coachingPendingRef = useRef(null);
     // UX Wave 2 / Task 2 — discriminated union: v1 single-question requests
-    // render the untouched <AskQuestionModal>; v2 form requests ('questions'
-    // in req) render <AskForm>. All the input gates below only check
+    // and v2 form requests ('questions' in req) both render <AskCard>
+    // (piece 2 / Q2). All the input gates below only check
     // truthiness, so both shapes suppress the global handlers identically.
     const [askQuestionPending, setAskQuestionPending] = useState(null);
     // Review fix (I2): synchronous mirror of the pending request so a second
@@ -90,8 +90,8 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
     // the first one — otherwise the first tool call's promise leaks and
     // hangs forever.
     const askQuestionPendingRef = useRef(null);
-    // Review fix (I2, + T2 rider): monotonic counter keying <AskForm> AND
-    // <AskQuestionModal> so a replacing request REMOUNTS the widget instead
+    // Review fix (I2, + T2 rider): monotonic counter keying <AskCard>
+    // (v1 and forms) so a replacing request REMOUNTS the widget instead
     // of React reusing the instance with stale state (v1→v1 overlap had the
     // same stale-state exposure as v2→v2). Deliberately NOT the formId /
     // question id (collision caveat — two requests may legitimately share
@@ -104,13 +104,15 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
     // Footer via `prefill`. Replaces the old bare-`/`-only palette flow.
     const [lineResolution, setLineResolution] = useState(null);
     const [prefill, setPrefill] = useState({ text: '', nonce: 0 });
-    const [errorStack, setErrorStack] = useState([]);
     const [showTimeline, setShowTimeline] = useState(false);
-    // Task 5 (ux-wave2) — Ctrl+T todo panel + the todoEmitter-fed list.
-    // Seeded from getTodos() so a RESUMED session shows its persisted list
-    // before any todo_set fires in this process.
-    const [showTodoPanel, setShowTodoPanel] = useState(false);
+    // Piece 2 I2 (spec §8) — the `?` shortcuts sheet (card-slot occupant 'shortcuts').
+    const [showShortcuts, setShowShortcuts] = useState(false);
+    // P2 (spec §4) — the live checklist. Seeded from getTodos() so --resume
+    // shows the persisted plan before any todo_set fires in this process; a
+    // plan that was already finished stays closed.
     const [todos, setTodos] = useState(() => getTodos?.() ?? []);
+    const [planClosed, setPlanClosed] = useState(() => isPlanFinished(getTodos?.() ?? []));
+    const [checklistExpanded, setChecklistExpanded] = useState(false);
     // Task 3 (ux-wave3) — the Esc-Esc / /rewind panel + its lazily-loaded
     // candidate list. Candidates come from an ASYNC accessor (snapshots.list
     // reads fs), so the open handler loads them BEFORE flipping the panel on —
@@ -120,6 +122,24 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
     // Two-Esc chord detector: timestamp of the last lone Esc seen at idle.
     const lastEscRef = useRef(0);
     const [footerValue, setFooterValue] = useState('');
+    // Piece 2 F3 — terminal size for the live-area height budget (spec §2).
+    // ink-testing-library reports no rows, so 24 (the Review Focus 1 case) is the fallback.
+    const { stdout } = useStdout();
+    const columns = stdout?.columns ?? 80;
+    const rows = stdout?.rows ?? 24;
+    // P2 (F3 review carry-over) — Ink's useStdout does not re-render on a
+    // terminal resize, so rows/columns/budget would go stale. Bump a state value
+    // on 'resize' so this render reads the new size.
+    const [, setResizeTick] = useState(0);
+    useEffect(() => {
+        if (!stdout)
+            return;
+        const onResize = () => setResizeTick((n) => n + 1);
+        stdout.on('resize', onResize);
+        return () => { stdout.off('resize', onResize); };
+    }, [stdout]);
+    // The wrapped input's WANTED height. I1 feeds it from the Footer.
+    const [inputLines, setInputLines] = useState(1);
     // Task 7 (ux-wave1) — continuation-buffer depth mirrored up from the
     // Footer. While a multiline draft is pending the input line is EMPTY
     // between continuation lines, so every footerValue === '' live trigger
@@ -128,15 +148,15 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
     // all live triggers stay dormant while the buffer is non-empty.
     const [footerBufferCount, setFooterBufferCount] = useState(0);
     // Wave-2 review I-1: model-driven overlays (approval / ask-question /
-    // coaching) must own input EXCLUSIVELY. The todo panel opens MID-TURN by
-    // design, so a request can arrive while it (or the ? timeline) is up —
+    // coaching) must own input EXCLUSIVELY. A passive panel (the ? timeline,
+    // the rewind panel) can be up when a request arrives —
     // leaving BOTH useInputs active. Ink delivers every keypress to every
     // active subscriber (no stopPropagation), so one Esc would close the
     // panel AND fire the approval modal's onCancel — silently declining a
     // pending write; `q` typed into a free-text ask-form answer would close
     // the panel behind it; and panel + modal stacked can overflow a 24-row
     // terminal. Fix at the arrival site: evict the passive panels BEFORE
-    // mounting the modal. (The user can Ctrl+T / ? again after answering.)
+    // mounting the modal. (The user can press ? again after answering.)
     useEffect(() => {
         const onReq = (req) => {
             // I1(b) — a replacing request must not leak the previous producer's
@@ -149,8 +169,8 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
             }
             pendingApprovalRef.current = req;
             setApprovalSeq((s) => s + 1);
-            setShowTodoPanel(false); // I-1 — evict passive panels, see block comment
             setShowTimeline(false);
+            setShowShortcuts(false);
             setShowRewindPanel(false); // Task 3 — rewind panel joins the eviction family
             lastEscRef.current = 0; // M3 — a mounting overlay kills any armed Esc chord
             setPendingApproval(req);
@@ -163,8 +183,8 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
     useEffect(() => {
         const onRequest = (req) => {
             coachingPendingRef.current = req; // I1(c) — synchronous mirror
-            setShowTodoPanel(false); // I-1 — same eviction as approval/ask-question
             setShowTimeline(false);
+            setShowShortcuts(false);
             setShowRewindPanel(false); // Task 3 — rewind panel joins the eviction family
             lastEscRef.current = 0; // M3 — a mounting overlay kills any armed Esc chord
             setCoachingPending(req);
@@ -190,8 +210,8 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
             }
             askQuestionPendingRef.current = req;
             setAskQuestionSeq((s) => s + 1);
-            setShowTodoPanel(false); // I-1 — evict passive panels, see approval block
             setShowTimeline(false);
+            setShowShortcuts(false);
             setShowRewindPanel(false); // Task 3 — rewind panel joins the eviction family
             lastEscRef.current = 0; // M3 — a mounting overlay kills any armed Esc chord
             setAskQuestionPending(req);
@@ -199,29 +219,42 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
         askQuestionEmitter.on('request', onRequest);
         return () => { askQuestionEmitter.off('request', onRequest); };
     }, []);
-    // Task 5 (ux-wave2) — todo_set fan-out → panel/strip state. Re-seed from
-    // getTodos AFTER subscribing (TurnStatus snapshot pattern): an update
-    // fired between mount and this effect would otherwise be missed.
+    const confirmSlot = useCardRequest((l) => { cardSlotEmitter.on('confirm', l); return () => { cardSlotEmitter.off('confirm', l); }; }, { value: null, cancelled: true }, () => {
+        // Same eviction the approval / ask listeners do on arrival.
+        setShowTimeline(false);
+        setShowShortcuts(false);
+        setShowRewindPanel(false);
+        lastEscRef.current = 0;
+    });
+    // Piece 2 §6.4 — the `/files` search-and-list card (occupant 'files').
+    // Same request rules as the confirm slot: a replaced or orphaned pick
+    // resolves cancelled, so /files never wedges.
+    const filesSlot = useCardRequest((l) => { filesCardEmitter.on('files', l); return () => { filesCardEmitter.off('files', l); }; }, { value: null, cancelled: true }, () => { setShowTimeline(false); setShowShortcuts(false); setShowRewindPanel(false); lastEscRef.current = 0; });
+    // P2 (spec §4) — todo_set fan-out → the live checklist. 'update' redraws in
+    // place (an empty list hides it); 'close' (turn end, plan finished) hides it
+    // until the next 'update'. Re-seed from getTodos AFTER subscribing
+    // (TurnStatus snapshot pattern): an update fired between mount and this
+    // effect would otherwise be missed.
     useEffect(() => {
-        const onUpdate = (t) => setTodos(t);
+        const onUpdate = (t) => {
+            setTodos(t);
+            setPlanClosed(t.length === 0);
+            // Fix round 1 — an emptied list (/new, cleared plan) folds Ctrl+T's
+            // expand back, so the next plan opens folded.
+            if (t.length === 0)
+                setChecklistExpanded(false);
+        };
+        const onClose = () => { setPlanClosed(true); setChecklistExpanded(false); };
         todoEmitter.on('update', onUpdate);
-        setTodos(getTodos?.() ?? []);
-        return () => { todoEmitter.off('update', onUpdate); };
+        todoEmitter.on('close', onClose);
+        const seeded = getTodos?.() ?? [];
+        setTodos(seeded);
+        setPlanClosed(isPlanFinished(seeded));
+        return () => { todoEmitter.off('update', onUpdate); todoEmitter.off('close', onClose); };
         // getTodos is stable for the life of the mount (repl.tsx passes a
         // closure over the session object) — mount-once is intentional.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    useEffect(() => {
-        const onError = (err) => {
-            const id = crypto.randomUUID();
-            setErrorStack((s) => [...s, { ...err, id }]);
-            setTimeout(() => {
-                setErrorStack((s) => s.filter((e) => e.id !== id));
-            }, 5000);
-        };
-        errorEmitter.on('error', onError);
-        return () => { errorEmitter.off('error', onError); };
-    }, []);
     // Task 3 (ux-wave3) — load candidates (async fs read) THEN show the panel, so
     // it never renders against a stale/empty list. Shared by the Esc-Esc chord and
     // the /rewind builtin (which signals through rewindEmitter — <App> is a
@@ -254,7 +287,7 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
                 onSubmit(step.line);
                 return;
             case 'prefill':
-                chunkEmitter.emit('chunk', `\x1b[2m${step.hint}\x1b[22m\n`);
+                chunkEmitter.emit('chunk', chalk.dim(step.hint) + '\n');
                 setPrefill((p) => ({ text: step.text, nonce: p.nonce + 1 }));
                 return;
             case 'open-slash':
@@ -284,18 +317,31 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
             // message at the next round boundary — clear the box, and confirm it
             // landed. (Was: bounce the input and tell them to wait.)
             const t = line.trim();
+            // Fix round 3 (item 5): slash commands are never steering text.
+            const kind = classifyMidTurnLine(t);
+            if (kind.kind === 'exit') {
+                setPrefill((p) => ({ text: '', nonce: p.nonce + 1 }));
+                onExitRequest?.();
+                return;
+            }
+            if (kind.kind === 'slash') {
+                // Not sent. The text stays in the input so Enter runs it after the turn.
+                chunkEmitter.emit('chunk', midTurnSlashHint(kind.command));
+                setPrefill((p) => ({ text: line, nonce: p.nonce + 1 }));
+                return;
+            }
             if (t.length > 0) {
                 enqueueSteering(t);
                 // Fast-follow: echo a truncated receipt, not the full (possibly
                 // multiline-pasted) text — the model still gets `t` verbatim.
-                chunkEmitter.emit('chunk', `\x1b[36m↳ queued ▸ ${formatSteeringEcho(t)}\x1b[39m\n`);
+                chunkEmitter.emit('chunk', steeringEchoLine(t));
             }
             setPrefill((p) => ({ text: '', nonce: p.nonce + 1 }));
             return;
         }
         const files = listWorkspaceFileChoices();
         handleStep(nextResolutionStep(line, files), line, files);
-    }, [handleStep, chunkEmitter]);
+    }, [handleStep, chunkEmitter, onExitRequest]);
     // Palette cancel: restore the user's original line so they can edit it.
     const cancelResolution = useCallback(() => {
         const lr = lineResolution;
@@ -304,25 +350,25 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
             setPrefill((p) => ({ text: lr.original, nonce: p.nonce + 1 }));
         }
     }, [lineResolution]);
-    // `?` key opens the timeline when the footer is empty and no other overlay
-    // is active.
+    // Piece 2 (spec §8) — `?` on an EMPTY input opens the shortcuts sheet in the
+    // card slot. Pasted text never triggers it (the paste guard marks paste
+    // chunks — repl/paste-marker.ts).
     //
     // Keystroke-leak note (Task 5, verified by probe): Ink delivers every
     // keypress to EVERY active useInput subscriber — there is no
     // stopPropagation — so a live-trigger character ALSO lands in the Footer's
-    // TextInput. Before Task 5 the `?` stayed hidden behind the overlay's
-    // disabled placeholder and reappeared in the input after Esc. The working
-    // mechanism is an explicit swallow: bump `prefill` with empty text, which
-    // the Footer applies on the next commit (footer.tsx honours empty prefills
-    // since Task 5). Every live trigger in this handler family does the same.
+    // TextInput. The working mechanism is an explicit swallow: bump `prefill`
+    // with empty text, which the Footer applies on the next commit (footer.tsx
+    // honours empty prefills since Task 5). Every live trigger in this handler
+    // family does the same.
     useInput((input, _key) => {
         if (footerBufferCount > 0)
             return; // Task 7 — mid-composition, stay dormant
-        if (input === '?' && footerValue === '') {
-            setShowTimeline(true);
+        if (input === '?' && footerValue === '' && !wasPasted(input)) {
+            setShowShortcuts(true);
             setPrefill((p) => ({ text: '', nonce: p.nonce + 1 })); // swallow leaked '?'
         }
-    }, { isActive: !lineResolution && !showTimeline && !showTodoPanel && !showRewindPanel && !pendingApproval && !coachingPending && !askQuestionPending });
+    }, { isActive: !lineResolution && !showTimeline && !showShortcuts && !showRewindPanel && !pendingApproval && !coachingPending && !askQuestionPending && !confirmSlot.pending && !filesSlot.pending });
     // Task 5 (ux-wave1) — live `/` opens the command palette immediately
     // (CC-style), no Enter needed. Fill-in semantics: because the original
     // line is empty, a pick PREFILLS `/{command} ` instead of running (the
@@ -338,7 +384,7 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
             return; // BUG-2b: steering, not palette (covers prep window)
         setPrefill((p) => ({ text: '', nonce: p.nonce + 1 })); // swallow leaked '/'
         handleSlashTrigger();
-    }, { isActive: !lineResolution && !showTimeline && !showTodoPanel && !showRewindPanel && !pendingApproval && !coachingPending && !askQuestionPending });
+    }, { isActive: !lineResolution && !showTimeline && !showShortcuts && !showRewindPanel && !pendingApproval && !coachingPending && !askQuestionPending && !confirmSlot.pending && !filesSlot.pending });
     // Task 6 (ux-wave1) — live `@` opens the file palette with APPEND
     // semantics: the partial line survives and the picked token lands where
     // the user was typing (pick prefills `footerValue + '@' + name + ' '`
@@ -374,7 +420,7 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
             return; // nothing to pick — let `@` land as plain text
         setPrefill((p) => ({ text: footerValue, nonce: p.nonce + 1 })); // swallow leaked '@', keep the line
         setLineResolution({ mode: 'at', prefix: '', line: `${footerValue}@`, original: `${footerValue}@`, files });
-    }, { isActive: !lineResolution && !showTimeline && !showTodoPanel && !showRewindPanel && !pendingApproval && !coachingPending && !askQuestionPending });
+    }, { isActive: !lineResolution && !showTimeline && !showShortcuts && !showRewindPanel && !pendingApproval && !coachingPending && !askQuestionPending && !confirmSlot.pending && !filesSlot.pending });
     // Task 3 (ux-wave1) — Shift+Tab / Alt+M cycle the session write mode.
     // Same gating as the `?` handler: only when the footer is empty and no
     // overlay owns input. Windows Terminal sends backtab as CSI Z, which Ink
@@ -401,25 +447,14 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
         if (!shiftTab && !altM)
             return;
         const { line, mode } = runModeCommand(undefined, globalStore.get().writeMode ?? 'approval-gated', sapRole, sapAlias);
-        chunkEmitter.emit('chunk', `\x1b[2m${line}\x1b[22m\n`);
+        chunkEmitter.emit('chunk', chalk.dim(line) + '\n');
         globalStore.update({ writeMode: mode });
         // Alt+M's 'm' also lands in the TextInput (see the leak note on the
         // `?` handler) — swallow it. Backtab is harmless (TextInput ignores
         // tab), but the swallow is a no-op for it anyway.
         setPrefill((p) => ({ text: '', nonce: p.nonce + 1 }));
-    }, { isActive: !lineResolution && !showTimeline && !showTodoPanel && !showRewindPanel && !pendingApproval && !coachingPending && !askQuestionPending });
-    // Task 5 (ux-wave2) — Ctrl+T opens the todo panel. Same gate family as
-    // the Wave-1 live triggers (no overlay owns input, footer empty, no
-    // multiline draft) with ONE deliberate difference: mid-turn is ALLOWED —
-    // no turnStatusEmitter guard. Peeking at the model's task list WHILE it
-    // works is the point of the panel (the turn-status strip shows only the
-    // current item; Ctrl+T shows the whole plan). Closing is the panel's
-    // job (Esc/q/Ctrl+T in TodoPanel's useInput) — this handler is inactive
-    // while the panel is up, so the chord toggles instead of double-firing.
-    // Open re-reads getTodos(): cheap, and correct after a session resume
-    // (the emitter only fires on new todo_set calls). The leaked 't' is
-    // swallowed with an empty prefill — same mechanism as `?` / Alt+M
-    // (footerValue is '' by gate, so the empty prefill is lossless).
+    }, { isActive: !lineResolution && !showTimeline && !showShortcuts && !showRewindPanel && !pendingApproval && !coachingPending && !askQuestionPending && !confirmSlot.pending && !filesSlot.pending });
+    // P2 — Ctrl+T toggles the full checklist (spec §4).
     useInput((input, key) => {
         if (!(key.ctrl && (input === 't' || input === 'T')))
             return;
@@ -427,10 +462,11 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
             return;
         if (footerBufferCount > 0)
             return; // Task 7 — mid-composition, stay dormant
-        setTodos(getTodos?.() ?? []);
-        setShowTodoPanel(true);
+        // P2 — Ctrl+T expands / folds the live checklist in place (spec §4).
+        // Mid-turn is allowed (watching the plan while it runs is the point).
+        setChecklistExpanded((e) => !e);
         setPrefill((p) => ({ text: '', nonce: p.nonce + 1 })); // swallow leaked 't'
-    }, { isActive: !lineResolution && !showTimeline && !showTodoPanel && !showRewindPanel && !pendingApproval && !coachingPending && !askQuestionPending });
+    }, { isActive: !lineResolution && !showTimeline && !showShortcuts && !showRewindPanel && !pendingApproval && !coachingPending && !askQuestionPending && !confirmSlot.pending && !filesSlot.pending });
     // Task 3 (ux-wave3) — Esc-Esc opens the rewind panel. Two Esc within 500ms
     // at IDLE ONLY. The isActive gate is the full five-gate family (no overlay
     // owns input, footer empty, no multiline draft) so a single Esc keeps its
@@ -457,15 +493,35 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
             lastEscRef.current = now;
         }
     }, {
-        isActive: !lineResolution && !showTimeline && !showTodoPanel && !showRewindPanel
-            && !pendingApproval && !coachingPending && !askQuestionPending
+        isActive: !lineResolution && !showTimeline && !showShortcuts && !showRewindPanel
+            && !pendingApproval && !coachingPending && !askQuestionPending && !confirmSlot.pending && !filesSlot.pending
             && footerValue === '' && footerBufferCount === 0,
     });
-    // Ctrl+C handler — abort in-flight turn or exit at idle.
+    // Ctrl+C handler — abort in-flight turn, or arm / confirm the idle exit.
+    // Fix round 3 (item 4): while a card, sheet or palette is open, Ctrl+C
+    // belongs to it (each cancels itself like Esc) and never reaches the REPL —
+    // it used to exit the whole CLI from the skill picker.
+    const overlayOpen = !!pendingApproval || !!coachingPending || !!askQuestionPending
+        || confirmSlot.pending !== null || filesSlot.pending !== null
+        || !!lineResolution || showTimeline || showShortcuts || showRewindPanel;
+    const [exitHint, setExitHint] = useState(false);
+    const exitHintTimer = useRef(null);
+    useEffect(() => () => { if (exitHintTimer.current)
+        clearTimeout(exitHintTimer.current); }, []);
     useInput((input, key) => {
-        if (key.ctrl && input === 'c')
-            onInterrupt?.();
-    }, { isActive: true });
+        if (!(key.ctrl && input === 'c'))
+            return;
+        const r = onInterrupt?.();
+        if (exitHintTimer.current)
+            clearTimeout(exitHintTimer.current);
+        if (r === 'armed') {
+            setExitHint(true);
+            exitHintTimer.current = setTimeout(() => setExitHint(false), IDLE_EXIT_WINDOW_MS);
+        }
+        else {
+            setExitHint(false);
+        }
+    }, { isActive: !overlayOpen });
     // I1(b) — clear ONLY when this request still owns the slot: a replacing
     // request (resolved-as-superseded in onReq) may already be pending, and the
     // old modal's resolve callback must not evict it.
@@ -490,40 +546,134 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
             .filter((c) => c.completed === true)
             .map(toTimelineEntry)
         : [];
-    return (_jsx(SapStateContext.Provider, { value: globalStore, children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Body, { chunkEmitter: chunkEmitter }), coachingPending && (_jsx(CoachingPicker, { params: coachingPending.params, onResolve: (result) => {
-                        coachingPending.resolve(result);
-                        if (coachingPendingRef.current === coachingPending) {
-                            coachingPendingRef.current = null; // I1(c) — keep the mirror true
-                        }
-                        setCoachingPending(null);
-                    } })), askQuestionPending && ('questions' in askQuestionPending ? (_jsx(AskForm, { request: askQuestionPending, onResolve: (result) => {
-                        askQuestionPending.resolve(result);
-                        // Only clear when this request is still the pending one — a
-                        // replacing request (I2) may already own the slot.
-                        if (askQuestionPendingRef.current === askQuestionPending) {
-                            askQuestionPendingRef.current = null;
-                            setAskQuestionPending(null);
-                        }
-                    } }, askQuestionSeq)) : (_jsx(AskQuestionModal, { params: askQuestionPending, onResolve: (result) => {
-                        askQuestionPending.resolve(result);
-                        if (askQuestionPendingRef.current === askQuestionPending) {
-                            askQuestionPendingRef.current = null;
-                            setAskQuestionPending(null);
-                        }
-                    } }, askQuestionSeq))), _jsx(TurnStatus, { inProgressTodo: todos.filter((t) => t.status === 'in_progress').at(-1)?.text ?? null }), _jsx(StatusLine, {}), _jsx(Footer, { onSubmit: beginSubmit, onSlashTrigger: handleSlashTrigger, onHistoryTrigger: handleHistoryTrigger, prefill: prefill, onValueChange: setFooterValue, onBufferChange: setFooterBufferCount, 
+    // Spec §2 / §1.6 — exactly ONE card in the slot.
+    // piece 2 / Q2 — clear the slot only while this request is still the
+    // pending one; a replacing request (I2) may already own it.
+    const clearAskIfCurrent = (req) => {
+        if (askQuestionPendingRef.current === req) {
+            askQuestionPendingRef.current = null;
+            setAskQuestionPending(null);
+        }
+    };
+    const occupant = pickSlotOccupant({
+        approval: !!pendingApproval,
+        confirm: confirmSlot.pending !== null,
+        ask: !!askQuestionPending,
+        coaching: !!coachingPending,
+        files: filesSlot.pending !== null,
+        rewind: showRewindPanel,
+        timeline: showTimeline,
+        shortcuts: showShortcuts,
+    });
+    // I1 (spec §7) — "(answer above to continue)" only while the occupant asks.
+    const waitingForCard = isAskingOccupant(occupant);
+    // Spec §2 height cap: the live area never exceeds rows − 2. Each occupant
+    // contributes a fixed estimate. Q2 (ask) and C1 (confirm) replace theirs
+    // with a real estimator right below this line. P2 replaces `checklistRows: 0`.
+    let cardRows = occupant === null ? 0 : SLOT_ROWS_ESTIMATE[occupant];
+    // Q2 — the ask card's full height (descriptions included, so shedding them
+    // cannot oscillate; spec §2 fold order: descriptions drop before options).
+    if (occupant === 'ask' && askQuestionPending)
+        cardRows = estimateAskCardRows(askQuestionPending, true, uiWidth(columns));
+    // C1 — the confirm card's real height (facts + choices) for the spec §2 cap.
+    if (occupant === 'confirm' && confirmSlot.pending)
+        cardRows = estimateConfirmCardRows(confirmSlot.pending);
+    const paletteRows = lineResolution ? PALETTE_ROWS : 0;
+    // P2 — the checklist's WANTED height (header + rows); liveBudget folds it.
+    const showChecklist = todos.length > 0 && !planClosed;
+    const checklistWidth = uiWidth(columns);
+    const checklistDesiredRows = showChecklist
+        ? formatChecklist(todos, {
+            width: checklistWidth,
+            maxRows: checklistExpanded ? todos.length : CHECKLIST_MAX_ROWS,
+            expanded: checklistExpanded,
+            foldedToOne: false,
+        }).length
+        : 0;
+    const budget = liveBudget({ rows, checklistRows: checklistDesiredRows, cardRows, inputLines, paletteRows });
+    let slot = null;
+    if (occupant === 'approval' && pendingApproval) {
+        slot = (_jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsx(ApprovalModal, { change: pendingApproval.change, effectiveRisk: pendingApproval.effectiveRisk, transport: pendingApproval.transport, onApply: () => {
+                    pendingApproval.resolve({ approved: true });
+                    clearApproval(pendingApproval);
+                }, onSkip: () => {
+                    pendingApproval.resolve({ approved: false, reason: 'skipped' });
+                    clearApproval(pendingApproval);
+                }, onDiff: () => { }, onCancel: () => {
+                    pendingApproval.resolve({ approved: false, reason: '__cancel_turn__' });
+                    clearApproval(pendingApproval);
+                }, onInterruptTurn: () => { onInterrupt?.(); } }, approvalSeq) }));
+    }
+    else if (occupant === 'confirm' && confirmSlot.pending) {
+        const req = confirmSlot.pending;
+        slot = (_jsx(ConfirmCard, { request: req, width: uiWidth(columns), onResolve: (r) => confirmSlot.finish(req, r), onInterruptTurn: () => { onInterrupt?.(); } }, confirmSlot.seq));
+    }
+    else if (occupant === 'ask' && askQuestionPending) {
+        const req = askQuestionPending;
+        slot = (_jsx(AskCard, { request: req, width: uiWidth(columns), showDescriptions: budget.showDescriptions, onResolveV1: (result) => {
+                if (!('questions' in req))
+                    req.resolve(result);
+                clearAskIfCurrent(req);
+            }, onResolveForm: (result) => {
+                if ('questions' in req)
+                    req.resolve(result);
+                clearAskIfCurrent(req);
+            }, onInterruptTurn: () => { onInterrupt?.(); } }, askQuestionSeq));
+    }
+    else if (occupant === 'coaching' && coachingPending) {
+        const req = coachingPending;
+        slot = (_jsx(CoachingPicker, { params: req.params, width: uiWidth(columns), onResolve: (result) => {
+                req.resolve(result);
+                if (coachingPendingRef.current === req) {
+                    coachingPendingRef.current = null; // I1(c) — keep the mirror true
+                }
+                setCoachingPending(null);
+            } }));
+    }
+    else if (occupant === 'files' && filesSlot.pending) {
+        const req = filesSlot.pending;
+        slot = (_jsx(FilesCard, { request: req, width: uiWidth(columns), onResolve: (r) => filesSlot.finish(req, r) }, filesSlot.seq));
+    }
+    else if (occupant === 'rewind') {
+        slot = (_jsx(Box, { marginTop: 1, children: _jsx(RewindPanel, { width: uiWidth(columns), candidates: rewindCandidates, 
+                // Panel confirms, then fires the gated executor (repl.tsx assembles
+                // deps + bridges approval to the Ink modal) and closes itself.
+                onRestore: (c) => { onRewindRestore?.(c); }, onClose: () => {
+                    setShowRewindPanel(false);
+                    // P2 — /rewind restores the checklist from session.todos (spec §4).
+                    const list = getTodos?.() ?? [];
+                    setTodos(list);
+                    setPlanClosed(isPlanFinished(list));
+                } }) }));
+    }
+    else if (occupant === 'timeline') {
+        slot = (_jsx(Box, { marginTop: 1, children: _jsx(SessionTimeline, { width: uiWidth(columns), entries: timelineEntries, onClose: () => setShowTimeline(false) }) }));
+    }
+    else if (occupant === 'shortcuts') {
+        slot = _jsx(ShortcutsSheet, { width: uiWidth(columns), onClose: () => setShowShortcuts(false) });
+    }
+    return (_jsx(SapStateContext.Provider, { value: globalStore, children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Body, { chunkEmitter: chunkEmitter }), showChecklist && (_jsx(Checklist, { todos: todos, width: checklistWidth, maxRows: Math.max(1, budget.checklistRows - 1), expanded: checklistExpanded, 
+                    // liveBudget folds the checklist to 1 row whenever a card is open (occupant !== null).
+                    foldedToOne: budget.checklistRows <= 1 })), slot, occupant === null && _jsx(TurnStatus, {}), _jsx(Footer, { onSubmit: beginSubmit, onSlashTrigger: handleSlashTrigger, onHistoryTrigger: handleHistoryTrigger, prefill: prefill, onValueChange: setFooterValue, onBufferChange: setFooterBufferCount, maxLines: budget.inputMaxLines, onInputLinesChange: setInputLines, 
+                    // Spec §7: "(answer above to continue)" only while a card that asks
+                    // waits — not for the timeline / rewind / shortcuts panels, nor an
+                    // open `/` / `@` palette (those are not slot occupants).
+                    waitingForCard: waitingForCard, 
                     // Task 7 — multiline announcements (draft discarded) land as
                     // dim scrollback lines, house style for Footer-adjacent notices.
-                    onNotice: (t) => chunkEmitter.emit('chunk', `\x1b[2m${t}\x1b[22m\n`), 
+                    onNotice: (t) => chunkEmitter.emit('chunk', chalk.dim(t) + '\n'), 
                     // 2026-05-17 — disable Footer input while any modal owns
                     // input, so keystrokes don't double-fire (modal answer +
                     // spurious Footer submission with same text).
                     disabled: !!coachingPending
                         || !!askQuestionPending
+                        || confirmSlot.pending !== null
+                        || filesSlot.pending !== null
                         || !!pendingApproval
                         || !!lineResolution
                         || showTimeline
-                        || showTodoPanel
-                        || showRewindPanel }), lineResolution?.mode === 'slash' && (_jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsx(CommandPalette, { initialQuery: lineResolution.prefix, onSelect: (name) => {
+                        || showShortcuts
+                        || showRewindPanel }), exitHint ? _jsx(Text, { ...roleProps('dim'), children: "Press Ctrl+C again to exit" }) : _jsx(FooterLine, {}), lineResolution?.mode === 'slash' && (_jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsx(CommandPalette, { initialQuery: lineResolution.prefix, onSelect: (name) => {
                             const lr = lineResolution;
                             setLineResolution(null);
                             // Task 5 — empty original ⇔ palette opened by the live `/`
@@ -537,17 +687,5 @@ export function App({ chunkEmitter, onSubmit, onSlashTrigger, onHistoryTrigger,
                             // (e.g. add `--scope ZMM_VENDOR_CHECK` after `--from @<file>`).
                             const resolved = lr.line.replace(/@\S*$/, `@${filename}`);
                             setPrefill((p) => ({ text: `${resolved} `, nonce: p.nonce + 1 }));
-                        }, onCancel: cancelResolution }) })), errorStack.map((e) => (_jsx(Box, { children: _jsx(RichErrorBox, { code: e.code, message: e.body, hint: e.hint, severity: "error" }) }, e.id))), showTimeline && (_jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsx(SessionTimeline, { entries: timelineEntries, onClose: () => setShowTimeline(false) }) })), showTodoPanel && (_jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsx(TodoPanel, { todos: todos, onClose: () => setShowTodoPanel(false) }) })), showRewindPanel && (_jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsx(RewindPanel, { candidates: rewindCandidates, 
-                        // Panel confirms, then fires the gated executor (repl.tsx assembles
-                        // deps + bridges approval to the Ink modal) and closes itself.
-                        onRestore: (c) => { onRewindRestore?.(c); }, onClose: () => setShowRewindPanel(false) }) })), pendingApproval && (_jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsx(ApprovalModal, { change: pendingApproval.change, effectiveRisk: pendingApproval.effectiveRisk, transport: pendingApproval.transport, onApply: () => {
-                            pendingApproval.resolve({ approved: true });
-                            clearApproval(pendingApproval);
-                        }, onSkip: () => {
-                            pendingApproval.resolve({ approved: false, reason: 'skipped' });
-                            clearApproval(pendingApproval);
-                        }, onDiff: () => { }, onCancel: () => {
-                            pendingApproval.resolve({ approved: false, reason: '__cancel_turn__' });
-                            clearApproval(pendingApproval);
-                        } }, approvalSeq) }))] }) }));
+                        }, onCancel: cancelResolution }) }))] }) }));
 }