@itookit/dsht 0.3.7 → 0.5.1

package/dist/ui/app.js

@@ -6,53 +6,85 @@ import { Box, Text, measureElement, useApp, useInput, useStdout } from 'ink';
 import { useMouseWheel } from "./input/mouse.js";
 import { TextInput } from "./input/input.js";
 import { ReferenceMenu } from "./input/references.js";
-import { historyLayout } from "../session/history.js";
-import { toolLine } from "../session/transcript.js";
-import { activeReference, fileMention } from "../session/references.js";
+import { costText } from "./status/model.js";
+import { toolLine } from "../text.js";
+import { activeReference, fileMention } from "../references.js";
 import { CostPanel } from "./dialogs/cost.js";
 import { StatusBar } from "./chat/status.js";
 import { ChatHeader } from "./chat/header.js";
+import { LoopStatus } from "./chat/loop-status.js";
 import { ChatViewport } from "./chat/viewport.js";
+import { mergeShellRuns, plainRows } from "./chat/shell-view.js";
 import { Frozen } from "./frozen.js";
 import { CopyMode } from "./copy-mode.js";
-import { HelpPanel, HistoryDialog, ModelDialog, PickerScreen, QueueDialog, QueuedPreview, RemovalDialog, SearchResultsDialog, ThoughtsDialog } from "./dialogs/index.js";
-import { COMMAND_HINTS, completeCommand as completeDraft, suggestedCommands } from "./commands/registry.js";
-import { classifySubmission } from "./commands/parse.js";
-import { ROLLUP_LEGEND, sessionLabel, sessionStatus, workspaceCounts, workspaceDetail, workspaceSegments, workspaceStatus } from "../session/navigation.js";
-import { array, errorText, object, safeText, string } from "../transport/wire.js";
+import { HelpPanel, HistoryDialog, ModelDialog, PickerScreen, PromptsDialog, QueueDialog, QueuedPreview, RemovalDialog, SearchResultsDialog, ThoughtsDialog } from "./dialogs/index.js";
+import { LoopDialog, LoopMenu } from "./dialogs/loop.js";
+import { PeekPanel } from "./dialogs/peek.js";
+import { COMMAND_HINTS, argumentHint, completeCommand as completeDraft, suggestedCommands } from "../slash/registry.js";
+import { interpret, normalize, authorize } from "../slash/index.js";
+import { loopNameQuery } from "../slash/parse.js";
+import { removalIntent, runCommand } from "../controller/commands.js";
+import { sessionLabel } from "../session-title.js";
+import { ROLLUP_LEGEND, sessionStatus, workspaceCounts, workspaceDetail, workspaceSegments, workspaceStatus } from "./chat/navigation-model.js";
+import { array, string } from "../json.js";
+import { errorText } from "../text.js";
+import { safeText } from "../text.js";
 /** Transient notices expire; interactive panels remain open until dismissed. */
 const PANEL_LIFETIME_MS = 10_000;
 /** Pages one boundary recall press may walk before it reports that nothing older holds a prompt. */
 const RECALL_PAGE_SCAN = 20;
+/** No folds: the read-only view has no expand state of its own, and one empty set keeps layout cached. */
+const NO_FOLDS = new Set();
+/** Rows one PgUp/PgDn moves in the read-only view. */
+const PEEK_PAGE = 10;
+/** How long a Ctrl+C that could not exit stays armed to exit on the next press. */
+const FORCE_EXIT_MS = 5000;
 /** The caller owns starting and stopping the controller around the Ink render lifetime.
  * @param props - Controller, panel lifetime and semantic theme.
  * @returns The rendered terminal interface.
  */
 export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = mocha }) {
     const state = useSyncExternalStore(controller.subscribe, controller.snapshot);
-    const presetId = controller.telemetry.view(state.sessionId).values.agentPreset;
+    const presetId = controller.queries.telemetry.view(state.sessionId).values.agentPreset;
     useEffect(() => { if (typeof presetId === 'string')
-        controller.loadPresetNames(); }, [controller, state.online, presetId]);
+        controller.actions.loadPresetNames(); }, [controller, state.online, presetId]);
     const { exit } = useApp();
     const { stdout } = useStdout();
     const [copyMode, setCopyMode] = useState(false);
     // The composer belongs to the selected session: it resets when another session opens, and every
     // callback reads the controller rather than a render closure Ink may not have refreshed yet.
-    const { draft: input, cursor } = state.session.composer;
+    const [input, setInputValue] = useState('');
+    const [cursor, setCursor] = useState(0);
+    // The freshest draft, readable from an async continuation: a command that finishes while the
+    // operator is already writing the next line must not clear that line (D1).
+    const inputRef = useRef(input);
+    inputRef.current = input;
+    const parkedDraft = useRef('');
     const historyPaging = useRef(false);
     const setInput = (value, recalled = false) => {
         if (!recalled)
-            controller.resetRecall();
+            controller.actions.resetRecall();
         // A new message draft returns the view to the live end, so composing never needs a scroll first.
         // A slash command is not a message, and the reader keeps their place while typing one.
-        if (state.screen === 'chat' && controller.composer.draft === '' && value !== '' && !value.startsWith('/'))
-            controller.setScroll(0);
-        controller.setComposer(value);
+        if (state.screen === 'chat' && input === '' && value !== '' && !value.startsWith('/'))
+            setScroll(0);
+        // Replacing the text parks the caret at its end, exactly as the session-owned composer did; the
+        // editor reports its real caret straight afterwards when the change came from an in-place edit.
+        setInputValue(value);
+        setCursor(value.length);
     };
     // The reading view is session-owned too: which record is shown, where the reader is, and what is
     // expanded. `SessionInfo` releases the detached window, so the composer and this view reset together.
-    const { window: historyWindow, scroll, folds: reasoningOverrides, liveReasoning } = state.session.view;
-    const [historyLoading, setHistoryLoading] = useState();
+    // Reading position, folds and the live-reasoning fold mode are component state: switching the
+    // session remounts the screen, and the record's own detached window stays session-owned.
+    const [scroll, setScroll] = useState(0);
+    const [reasoningOverrides, setReasoningOverrides] = useState(new Set());
+    const [liveReasoning, setLiveReasoning] = useState('row');
+    const historyWindow = state.session.window;
+    /** The operation the controller owns right now; the front end only renders it. */
+    const foreground = controller.queries.foreground;
+    /** Lines the policy accepted but held until a turn, a loop or the foreground slot clears (A2). */
+    const [queuedLines, setQueuedLines] = useState([]);
     const displayTranscript = historyWindow ?? state.session.record;
     const displayRef = useRef(displayTranscript);
     displayRef.current = displayTranscript;
@@ -66,17 +98,27 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
         }
     });
     const [removal, setRemoval] = useState();
-    // Session-owned panels: visibility and query text only, because every row comes from the record.
-    const { thoughts: thoughtList, queue: queueOpen, model: models, history, search: searchResults } = state.session.panels;
+    // The loop parameter form is one modal step: the record it edits, while the form owns its values.
+    const [loopForm, setLoopForm] = useState();
+    // A command may borrow the composer to edit one of its entries; Enter then commits instead of
+    // sending, and Esc clears the draft. The composition root stays generic about who asked.
+    const [composerIntent, setComposerIntent] = useState();
+    // Panels are component state: visibility and query text only, because every row comes from the record.
+    const [panels, setPanels] = useState({ thoughts: false, queue: false });
+    const { thoughts: thoughtList, queue: queueOpen, model: models, history, search: searchResults, prompts: promptsOpen } = panels;
+    const openThoughts = (open) => setPanels(current => ({ ...current, thoughts: open }));
+    const openQueue = (open) => setPanels(current => ({ ...current, queue: open }));
+    const openPrompts = (open) => setPanels(current => ({ ...current, prompts: open }));
+    const setModelPanel = (model) => setPanels(current => ({ ...current, model }));
+    const setHistoryPanel = (history) => setPanels(current => ({ ...current, history }));
+    const setSearchPanel = (search) => setPanels(current => ({ ...current, search }));
     const historyQuery = history?.query;
     const contentSearch = history?.contentSearch === true;
     const historyMatches = history?.matches;
-    const historyAbort = useRef(undefined);
-    useEffect(() => () => historyAbort.current?.abort(), []);
     const [costExpanded, setCostExpanded] = useState(false);
     const [statusExpanded, setStatusExpanded] = useState(false);
     const reasoning = 'row';
-    useEffect(() => { controller.setLiveReasoning('row'); }, [state.session.record, state.session.record.liveAttemptKey]);
+    useEffect(() => { setLiveReasoning('row'); }, [state.session.record, state.session.record.liveAttemptKey]);
     const [notice, setNotice] = useState();
     const [help, setHelp] = useState(false);
     const [helpPage, setHelpPage] = useState(0);
@@ -84,6 +126,8 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
     const helpPages = Math.ceil(COMMAND_HINTS.length / helpPageSize);
     const currentHelpPage = Math.min(helpPage, helpPages - 1);
     const [statusScroll, setStatusScroll] = useState(0);
+    /** When the last Ctrl+C that could not exit was armed, so the next one leaves regardless. */
+    const exitArmed = useRef(0);
     const [statusOverflow, setStatusOverflow] = useState(false);
     // The panel owns two border rows and a one-row footer, and the two header rows and the
     // three-row composer above it never shrink, so only the remainder of the screen height shows rows.
@@ -92,7 +136,12 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
     // Answers and menu highlights are session-owned too: the waterfall itself is derived per session
     // by the controller, so only the local selection is kept here.
     const { answers, option: optionState, approval: approvalSelection } = state.session.interaction;
-    const { index: referenceIndex, dismissed: dismissedReference } = state.session.reference;
+    const [referenceIndex, setReferenceIndex] = useState(0);
+    const [dismissedReference, setDismissedReference] = useState();
+    // The `/loop` record list under the composer: which row is highlighted, and the draft Esc dismissed
+    // it for, so the next keystroke brings it back instead of it staying gone.
+    const [loopMenuIndex, setLoopMenuIndex] = useState(0);
+    const [dismissedLoopMenu, setDismissedLoopMenu] = useState();
     const [lookup, setLookup] = useState();
     // Interactive panels remain stable while read; only transient notices expire.
     useEffect(() => {
@@ -108,19 +157,97 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
     useEffect(() => {
         if (copyMode || contentSearch || historyQuery === undefined)
             return;
-        const timer = setTimeout(() => { controller.setHistoryPanel(undefined); }, panelLifetimeMs);
+        const timer = setTimeout(() => { setHistoryPanel(undefined); }, panelLifetimeMs);
         return () => clearTimeout(timer);
     }, [historyQuery, contentSearch, panelLifetimeMs, copyMode]);
     const pending = state.pending[0];
-    const queued = controller.telemetry.pending(state.sessionId).filter(item => item.placement !== 'context');
-    useEffect(() => { controller.openQueue(false); }, [state.sessionId, pending?.eventId]);
+    // The loop lives in the application; the UI only renders its progress snapshot.
+    const loop = controller.queries.loop;
+    // The record the open form edits, read from the same list the runner uses.
+    const loopRecord = loopForm === undefined ? undefined
+        : controller.queries.loopRecords.find(record => record.name === loopForm.name);
+    const queued = controller.queries.telemetry.pending(state.sessionId).filter(item => item.placement !== 'context');
+    // The read-only view: the application owns which source is followed and what it holds, the front end
+    // owns only the reader's position in it.
+    const peek = controller.queries.peek;
+    const [peekScroll, setPeekScroll] = useState(0);
+    const peekBox = useRef(null);
+    const [peekRows, setPeekRows] = useState(20);
+    // The rows above the transcript are measured, not guessed: a click is placed by counting down from
+    // the first line, and the header and the connection/foreground notices are what stand above it.
+    const headerSection = useRef(null);
+    const bodyPrefix = useRef(null);
+    const [chromeRows, setChromeRows] = useState({ header: 2, prefix: 0 });
+    useLayoutEffect(() => {
+        if (peekBox.current) {
+            const height = Math.floor(measureElement(peekBox.current).height);
+            if (height !== peekRows)
+                setPeekRows(height);
+        }
+    });
+    // A new source is a new document: it opens at its newest row rather than wherever the last one was.
+    useEffect(() => { setPeekScroll(0); }, [peek?.source.id]);
+    useLayoutEffect(() => {
+        const header = headerSection.current ? Math.floor(measureElement(headerSection.current).height) : 0;
+        const prefix = bodyPrefix.current ? Math.floor(measureElement(bodyPrefix.current).height) : 0;
+        if (header !== chromeRows.header || prefix !== chromeRows.prefix)
+            setChromeRows({ header, prefix });
+    });
+    useEffect(() => {
+        setPanels({ thoughts: false, queue: false });
+        setReferenceIndex(0);
+        setDismissedReference(undefined);
+        setInputValue('');
+        setCursor(0);
+        parkedDraft.current = '';
+        setComposerIntent(undefined);
+        setScroll(0);
+        setReasoningOverrides(new Set());
+        setLiveReasoning('row');
+        setLoopForm(undefined);
+        setLoopMenuIndex(0);
+        setDismissedLoopMenu(undefined);
+    }, [state.sessionId]);
+    useEffect(() => { openQueue(false); }, [state.sessionId, pending?.eventId]);
+    // A pending interaction owns the keyboard, so the loop form yields rather than swallowing its keys.
+    useEffect(() => { if (pending)
+        setLoopForm(undefined); }, [pending?.eventId]);
     // A replayed interaction (same eventId after a reconnect) starts unselected again.
-    useEffect(() => { controller.setApproval(undefined); }, [state.sessionId, state.online, pending?.eventId]);
-    const token = state.screen === 'chat' && state.online && !state.busy && !pending
+    useEffect(() => { controller.actions.setApproval(undefined); }, [state.sessionId, state.online, pending?.eventId]);
+    const token = state.screen === 'chat' && state.online && foreground === undefined && !pending
         && !input.startsWith('/') && dismissedReference !== input && cursor === input.length
         ? activeReference(input) : undefined;
     const referenceOpen = token !== undefined;
-    const dialogOpen = !!(queueOpen || removal || models || thoughtList || historyQuery !== undefined || searchResults || costExpanded || statusExpanded || help || pending || referenceOpen || state.screen !== 'chat');
+    // `/loop` offers its records while the draft is still a name: the composer menu is the one place a
+    // name can be chosen, and every row carries the defaults the form would open with. Once a second
+    // word (a flag or value) is typed the operator has decided, so the menu steps aside. The candidates
+    // survive a dismissal, because Esc only hides the list — it does not withdraw the choice.
+    const loopDraft = state.screen === 'chat' && state.online && foreground === undefined && !pending
+        && !copyMode && !referenceOpen ? loopNameQuery(input) : undefined;
+    const loopCandidates = loopDraft === undefined ? []
+        : controller.queries.loopRecords.filter(record => record.name.startsWith(loopDraft));
+    const loopMenuOpen = loopCandidates.length > 0 && loopForm === undefined && dismissedLoopMenu !== input;
+    const loopMenuCursor = Math.min(loopMenuIndex, Math.max(0, loopCandidates.length - 1));
+    // The queue dialog is not rendered while an answer is waiting, so it is not "open" then either.
+    const surfaces = [
+        // The read-only view is a whole screen, so its rule leads: any other panel open under it is
+        // unreachable until it closes, and it is the only surface the reader can see.
+        { name: 'peek', open: !!peek, arrows: true, blocksKeys: true, close: () => controller.actions.closePeek() },
+        { name: 'queue', open: queueOpen && !pending, reserved: ['d'], close: () => openQueue(false) },
+        { name: 'prompts', open: !!promptsOpen, arrows: true, blocksKeys: true, reserved: ['d', 'e'], close: () => openPrompts(false) },
+        { name: 'removal', open: !!removal, arrows: true, blocksKeys: true, close: () => setRemoval(undefined) },
+        { name: 'model', open: !!models, arrows: true, blocksKeys: true, close: () => setModelPanel(undefined) },
+        { name: 'loop', open: !!loopForm, arrows: true, blocksKeys: true, close: () => setLoopForm(undefined) },
+        { name: 'thoughts', open: thoughtList, arrows: true, blocksKeys: true, close: () => openThoughts(false) },
+        { name: 'history', open: historyQuery !== undefined, arrows: true, blocksKeys: true, close: () => setHistoryPanel(undefined) },
+        { name: 'search', open: !!searchResults, arrows: true, blocksKeys: true, close: () => setSearchPanel(undefined) },
+        { name: 'help', open: help, blocksKeys: true, close: () => setHelp(false) },
+        { name: 'cost', open: costExpanded, blocksKeys: true, close: () => setCostExpanded(false) },
+        { name: 'status', open: statusExpanded, blocksKeys: true, close: () => setStatusExpanded(false) },
+    ];
+    const openSurfaces = surfaces.filter(surface => surface.open);
+    const surfaceReservedKeys = [...new Set(openSurfaces.flatMap(surface => surface.reserved ?? []))];
+    const dialogOpen = !!(openSurfaces.length || pending || referenceOpen || state.screen !== 'chat');
     const displayPaused = copyMode || dialogOpen;
     // Startup screens need live connection feedback even while their picker remains open.
     const statusPaused = copyMode || (state.screen === 'chat' && dialogOpen);
@@ -130,8 +257,8 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
             return;
         const abort = new AbortController();
         setLookup(undefined);
-        controller.setReferenceIndex(0);
-        void controller.references(activeReference(input).query, abort.signal).then(items => {
+        setReferenceIndex(0);
+        void controller.queries.references(activeReference(input).query, abort.signal).then(items => {
             if (!abort.signal.aborted)
                 setLookup({ draft: input, sessionId: state.sessionId, items });
         }, error => {
@@ -142,7 +269,7 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
     }, [controller, input, state.sessionId, referenceOpen]);
     const pickReference = () => {
         const candidate = matches?.items[referenceIndex];
-        if (!candidate || !token || controller.composer.draft !== input)
+        if (!candidate || !token)
             return;
         const mention = fileMention(candidate, token.quoted);
         setInput(input.slice(0, -token.prefix.length) + mention + (candidate.kind === 'file' ? ' ' : ''));
@@ -153,64 +280,100 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
         if (completed !== undefined)
             setInput(completed);
     };
-    const questions = pending?.event === 'user-questions/request' ? array(object(pending.request).questions).map(object) : [];
-    const eventId = pending ? string(pending.eventId) : '';
+    const questions = pending?.kind === 'question' ? pending.questions : [];
+    const eventId = pending?.eventId ?? '';
     const answered = answers[eventId] ?? [];
     const question = questions[answered.length];
     const optionKey = `${eventId}:${answered.length}`;
-    const options = question ? array(question.options ?? []).map(object) : [];
+    const options = question ? question.options : [];
     const choiceState = optionState?.key === optionKey ? optionState : { key: optionKey, cursor: 0, selected: [], custom: false };
     const optionCursor = Math.min(choiceState.cursor, options.length);
     // Reserve the header, composer and question instructions; each choice may have a description.
     const optionPageSize = Math.max(1, Math.min(6, Math.floor(((stdout.rows ?? 30) - 16) / 2)));
     const optionStart = Math.max(0, optionCursor - optionPageSize + 1);
-    // One open panel owns the arrow and digit keys; the picker screens and the composer are not keyboard owners.
-    const panelBlocksKeys = !!(removal || models || thoughtList || historyQuery !== undefined || searchResults || help || costExpanded || statusExpanded);
+    // One open surface owns the arrow and digit keys; the picker screens and the composer are not
+    // keyboard owners. The traits live in `surfaces`, so no panel is named here.
+    const panelBlocksKeys = openSurfaces.some(surface => surface.blocksKeys);
     // Composer recall yields only to a surface that uses the arrows itself: the pickers, and a status
     // panel with more lines than the view holds. The help and cost panels and a fitting status panel
     // leave the arrows with the history, and Ctrl+P/N reach it from every surface.
-    const recallBlocked = !!(removal || models || thoughtList || historyQuery !== undefined || searchResults || (statusExpanded && statusOverflow));
+    const recallBlocked = openSurfaces.some(surface => surface.arrows) || (statusExpanded && statusOverflow) || composerIntent !== undefined;
     const questionKeysActive = !!question && options.length > 0 && !choiceState.custom && !copyMode && !panelBlocksKeys;
     // A dialog that demands an answer owns the keyboard until it is settled: the draft being written is
     // parked rather than typed into, and comes back when the last one closes. A question switches to
     // the composer itself for a free-text or "Other" answer, so it keeps the keys then.
-    const answerPending = !!pending && (pending.event === 'approval/request' || options.length > 0 && !choiceState.custom);
+    const answerPending = !!pending && (pending.kind === 'approval' || options.length > 0 && !choiceState.custom);
     useEffect(() => {
+        // A dialog that demands an answer parks the draft: the text is moved aside while it owns the
+        // keyboard and given back when it closes. Restoring writes the draft directly, so it neither
+        // counts as a recall nor moves a reader's scroll position.
         if (answerPending) {
-            controller.parkComposer();
+            // A composer intent cannot survive an answer dialog taking the keyboard: the dialog's text is
+            // not what the intent edits, so the intent is dropped rather than committed.
+            if (composerIntent)
+                setComposerIntent(undefined);
+            if (input !== '') {
+                parkedDraft.current = input;
+                setInputValue('');
+                setCursor(0);
+            }
             return;
         }
         if (pending)
             return;
-        // Restoring writes the draft directly: it was neither recalled from history nor a new message,
-        // so it must not move a reader's scroll position.
-        controller.restoreComposer();
+        if (parkedDraft.current !== '') {
+            const parked = parkedDraft.current;
+            parkedDraft.current = '';
+            setInputValue(parked);
+            setCursor(parked.length);
+        }
     }, [answerPending, pending]);
-    const approvalKeysActive = pending?.event === 'approval/request' && !copyMode && !panelBlocksKeys;
+    const approvalKeysActive = pending?.kind === 'approval' && !copyMode && !panelBlocksKeys;
     const approvalIndex = approvalSelection?.eventId === eventId ? approvalSelection.index : -1;
-    const answerQuestion = async (selected, custom) => {
-        if (controller.state.pending[0]?.eventId !== eventId)
-            throw new Error('The pending question has changed');
-        const answer = { id: string(question.id), selected, ...(custom ? { custom } : {}) };
-        const next = [...answered, answer];
-        if (next.length === questions.length) {
-            await controller.answer({ answers: next });
-            const rest = { ...controller.interaction.answers };
-            delete rest[eventId];
-            controller.setAnswers(rest);
-        }
-        else
-            controller.setAnswers({ ...controller.interaction.answers, [eventId]: next });
-        controller.setOption(undefined);
-    };
-    const operate = (fn) => { void controller.perform(fn); };
-    const requestRemoval = async (kind, query) => {
-        const target = await controller.removalTarget(kind, query);
-        if (target.kind === 'session' && target.empty)
-            await controller.removeTarget(target);
-        else
-            setRemoval(target);
-    };
+    // Actions own their busy/error envelope; this only surfaces a UI-local orchestration failure.
+    const operate = (fn) => { void fn().catch(error => setNotice(errorText(error))); };
+    /** Resolve and apply a removal; shared by the pickers' `d` key and the delete commands. */
+    async function requestRemoval(kind, query) {
+        const effects = await removalIntent(controller, kind, query);
+        if (effects === undefined)
+            return false;
+        for (const effect of effects)
+            await applyEffect(effect);
+        return true;
+    }
+    /** Run one record with the values the form confirmed.
+     *
+     * The line is handed back to the application as a parsed command, so the form and a typed command
+     * start a run through exactly the same path and cannot disagree about what the values mean.
+     * @param name - Record key to run.
+     * @param run - The four limits and the record variables as the form left them.
+     */
+    function startLoopFromForm(name, run) {
+        controller.traceNote('loop-ui', { phase: 'start', name, from: run.limits.from, to: run.limits.to,
+            score: run.limits.score, tries: run.limits.tries, vars: Object.keys(run.vars) });
+        operate(async () => {
+            const port = { interactive: true, run: (label, operation) => controller.actions.foreground('command', label, operation) };
+            // Start is a second submission (§3.4): the form may have been open while a turn started or a
+            // question arrived, so the line is authorized again here rather than trusting the earlier one.
+            const verdict = verdictFor({ kind: 'loop', name, options: { ...run.limits, vars: run.vars } });
+            // A turn that started while the form was open holds the run: the values are confirmed, so the
+            // line is queued and the form closes, exactly like a refusal keeps it open.
+            if (holdIfDeferred(verdict, `/loop ${name}`)) {
+                setLoopForm(undefined);
+                return;
+            }
+            const result = await runCommand(controller, verdict.allow ? verdict.command : verdict.error, port);
+            // A rejected result carries its own error and keeps the form open; only a missing one would leave
+            // Start looking ignored, so it says the same thing here.
+            if (result === undefined) {
+                setNotice(`Loop did not start: ${controller.state.lastFailure || 'the host did not accept the request'}`);
+                return;
+            }
+            await applyResult(result);
+            if (result.disposition === 'consume')
+                setLoopForm(undefined);
+        });
+    }
     useInput((_value, key) => {
         if (key.eventType === 'release')
             return;
@@ -219,69 +382,200 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
                 setCopyMode(false);
             return;
         }
+        // The loop form owns every key but Ctrl+C: it reads them itself, and leaving them to this handler
+        // would let a digit meant for a value start a composer draft or a recall step.
+        if (loopForm && !(key.ctrl && _value === 'c'))
+            return;
         if (key.ctrl && _value === 's') {
             setCopyMode(true);
             return;
         }
-        if ((key.escape || key.ctrl && _value === 'c') && historyAbort.current) {
-            historyAbort.current.abort();
-            // Esc also leaves a history list that was already on screen when the load was aborted.
-            if (key.escape && historyQuery !== undefined) {
-                controller.setHistoryPanel(undefined);
+        // Esc is a table, not a chain (§5.4): the first rule whose condition holds wins. A table is what
+        // keeps a new surface from either shipping with no Escape rule or placing one after the fallback,
+        // where it can never run — the two mistakes this replaces.
+        const escapeRules = [
+            // 1 Copy mode is handled above: it owns the keyboard outright.
+            // 2 A borrowed composer drops the edit and the draft it loaded.
+            { when: composerIntent !== undefined, run: () => { setInput(''); setComposerIntent(undefined); } },
+            // 3 A cancellable load in flight is the most urgent thing Esc can stop.
+            { when: foreground !== undefined, run: () => {
+                    controller.actions.cancelForeground();
+                    // Esc also leaves a history list that was already on screen when the load was aborted.
+                    if (historyQuery !== undefined)
+                        setHistoryPanel(undefined);
+                } },
+            // 4 The read-only view sits on top of the conversation it was opened from.
+            { when: peek !== undefined, run: () => controller.actions.closePeek() },
+            // 5 An approval or a question owns the keyboard until it is settled.
+            { when: pending !== undefined, run: () => {
+                    controller.actions.setApproval(undefined);
+                    setRemoval(undefined);
+                    setModelPanel(undefined);
+                    openThoughts(false);
+                    setSearchPanel(undefined);
+                    setHistoryPanel(undefined);
+                    setHelp(false);
+                    setCostExpanded(false);
+                    setStatusExpanded(false);
+                    // A question batch is one request, so Esc leaves the whole set the way the Web client's close
+                    // button does. The free-text row keeps its own step back: its first Esc returns to the options,
+                    // and only the next one dismisses. Approval keeps every choice explicit.
+                    if (pending?.kind === 'question' && !choiceState.custom) {
+                        if (controller.state.online && controller.queries.foreground === undefined && controller.state.pending[0]?.eventId === eventId) {
+                            controller.actions.setOption(undefined);
+                            const rest = { ...controller.queries.interaction.answers };
+                            delete rest[eventId];
+                            controller.actions.setAnswers(rest);
+                            operate(() => controller.actions.dismissQuestion());
+                        }
+                        return;
+                    }
+                    controller.actions.setOption({ ...choiceState, custom: false });
+                } },
+            // 6 The panels a command opened.
+            { when: queueOpen === true, run: () => openQueue(false) },
+            { when: promptsOpen === true, run: () => openPrompts(false) },
+            { when: removal !== undefined, run: () => setRemoval(undefined) },
+            { when: models !== undefined, run: () => setModelPanel(undefined) },
+            { when: thoughtList === true, run: () => { openThoughts(false); if (controller.queries.running)
+                    void controller.actions.interrupt(true); } },
+            { when: searchResults !== undefined, run: () => { setSearchPanel(undefined); if (controller.queries.running)
+                    void controller.actions.interrupt(true); } },
+            { when: historyQuery !== undefined, run: () => { setHistoryPanel(undefined); if (controller.queries.running)
+                    void controller.actions.interrupt(true); } },
+            // 7 Screens. The typed host path is one of them: the picker behind it is disabled while a draft
+            // exists, so a leftover path would leave no way back at all.
+            { when: state.screen === 'path', run: () => { setInput(''); operate(() => controller.actions.showPicker('workspaces')); } },
+            // A picker opened over a conversation is a detour, so Esc returns to that conversation; from the
+            // session list with nothing selected it steps back to the workspace list instead, which is the
+            // only thing behind the startup picker.
+            { when: state.screen === 'sessions', run: () => { if (!controller.actions.showChat())
+                    operate(() => controller.actions.showPicker('workspaces')); } },
+            { when: state.screen === 'workspaces', run: () => { controller.actions.showChat(); } },
+            // 8 The composer's own menus: hiding one never undoes the choice it was offering.
+            { when: loopMenuOpen === true, run: () => setDismissedLoopMenu(input) },
+            { when: referenceOpen === true, run: () => { setDismissedReference(input); if (controller.queries.running)
+                    void controller.actions.interrupt(true); } },
+            // 9 The read-only surfaces.
+            { when: help || costExpanded || statusExpanded || notice !== undefined, run: () => {
+                    setHelp(false);
+                    setCostExpanded(false);
+                    setStatusExpanded(false);
+                    setStatusScroll(0);
+                    setNotice(undefined);
+                    if (controller.queries.running)
+                        void controller.actions.interrupt(true);
+                } },
+            // 10 A local command in the transcript is more immediate than the agent behind it.
+            { when: state.shell.running && input === '' && !panelBlocksKeys && pending === undefined && state.screen === 'chat',
+                run: () => controller.shell.cancel() },
+            // 11 Anything left on the conversation screen cancels whatever the agent is doing.
+            { when: state.screen === 'chat', run: () => { void controller.actions.interrupt(true); } },
+        ];
+        if (key.escape) {
+            const rule = escapeRules.find(candidate => candidate.when);
+            if (rule !== undefined) {
+                rule.run();
+                return;
+            }
+        }
+        // The read-only view owns the arrows and paging: it is a document the reader scrolls, so its keys
+        // must not fall through to prompt recall or to the conversation behind it.
+        if (peek !== undefined && !key.ctrl && !key.meta) {
+            if (key.pageUp) {
+                setPeekScroll(value => value + PEEK_PAGE);
+                return;
+            }
+            if (key.pageDown) {
+                setPeekScroll(value => Math.max(0, value - PEEK_PAGE));
+                return;
+            }
+            if (key.upArrow) {
+                setPeekScroll(value => value + 1);
+                return;
+            }
+            if (key.downArrow) {
+                setPeekScroll(value => Math.max(0, value - 1));
+                return;
             }
+        }
+        // Ctrl+O opens the read-only view on the newest source — the work most likely worth watching — so
+        // the view is reachable without a list. Clicking a transcript row opens a specific source.
+        if (key.ctrl && _value === 'o' && state.screen === 'chat' && pending === undefined) {
+            const source = controller.queries.sources[0];
+            if (source !== undefined)
+                controller.actions.openPeek(source.id);
             return;
         }
-        if ((key.escape || key.ctrl && _value === 'c') && controller.state.pending.length) {
-            if (key.ctrl && controller.composer.draft)
+        // Ctrl+C is not Esc: it never dismisses a dialog, and when nothing is pending it stops the agent
+        // and then exits. The branches below keep that order.
+        if (key.ctrl && _value === 'c') {
+            // Every branch below can fail to end the client: the host may never report the turn idle, an
+            // operation may ignore the abort, an interaction may be waiting. A press that could not exit
+            // arms the next one, so no state can trap the reader. Leaving still asks the host to stop the
+            // selected turn, because every exit path runs `Controller.shutdown`.
+            if (exitArmed.current !== 0 && Date.now() - exitArmed.current < FORCE_EXIT_MS) {
+                exitArmed.current = 0;
+                exit();
+                return;
+            }
+            exitArmed.current = 0;
+            /** Arm the escape after a press that asked for something and did not get to leave. */
+            const offerExit = () => {
+                exitArmed.current = Date.now();
+                setNotice('Press Ctrl+C again to exit without waiting for the host');
+            };
+            if (controller.queries.foreground !== undefined) {
+                controller.actions.cancelForeground();
+                offerExit();
+                return;
+            }
+            if (controller.state.pending.length) {
+                if (input)
+                    setInput('');
+                offerExit();
+                return;
+            }
+            if (input === '' && state.shell.running) {
+                controller.shell.cancel();
+                return;
+            }
+            // A draft clears first, exactly like a shell prompt; an empty draft still stops or exits.
+            if (input !== '') {
                 setInput('');
-            if (key.escape) {
-                controller.setApproval(undefined);
-                setRemoval(undefined);
-                controller.setModelPanel(undefined);
-                controller.openThoughts(false);
-                controller.setSearchPanel(undefined);
-                controller.setHistoryPanel(undefined);
-                setHelp(false);
-                setCostExpanded(false);
-                setStatusExpanded(false);
-                // A question batch is one request, so Esc leaves the whole set the way the Web client's
-                // close button does. The free-text row keeps its own step back: its first Esc returns to
-                // the options, and only the next one dismisses. Approval keeps every choice explicit.
-                if (pending?.event === 'user-questions/request' && !choiceState.custom) {
-                    if (controller.state.online && !controller.state.busy && controller.state.pending[0]?.eventId === eventId) {
-                        controller.setOption(undefined);
-                        const rest = { ...controller.interaction.answers };
-                        delete rest[eventId];
-                        controller.setAnswers(rest);
-                        operate(() => controller.dismissQuestion());
-                    }
-                    return;
-                }
-                controller.setOption({ ...choiceState, custom: false });
+                return;
             }
+            if (composerIntent) {
+                setComposerIntent(undefined);
+                return;
+            }
+            void controller.actions.interrupt().then(shouldExit => { if (shouldExit)
+                exit();
+            else
+                offerExit(); });
             return;
         }
-        if (approvalKeysActive && !controller.composer.draft && controller.state.online && !controller.state.busy
+        if (approvalKeysActive && !input && controller.state.online && controller.queries.foreground === undefined
             && controller.state.pending[0]?.eventId === eventId && !key.ctrl && !key.meta) {
             const digit = /^[1-3]$/.test(_value) ? Number(_value) - 1 : -1;
             if (digit >= 0 || key.upArrow || key.downArrow) {
                 // An unselected list enters at the first, non-destructive choice, so a stray arrow plus Enter cannot cancel.
                 const index = digit >= 0 ? digit : approvalIndex < 0 ? 0
                     : Math.max(0, Math.min(2, approvalIndex + (key.upArrow ? -1 : 1)));
-                controller.setApproval({ eventId, index });
+                controller.actions.setApproval({ eventId, index });
                 return;
             }
             if (key.return) {
                 // Choice 3 cancels the turn instead of answering the request, so it sends no event result.
                 if (approvalIndex >= 0)
-                    operate(() => approvalIndex === 2 ? controller.cancelTurn() : controller.approve(approvalIndex === 0));
+                    operate(() => approvalIndex === 2 ? controller.actions.cancelTurn() : controller.actions.approve(approvalIndex === 0));
                 return;
             }
         }
-        if (questionKeysActive && !controller.composer.draft && !controller.state.busy && !key.ctrl && !key.meta) {
+        if (questionKeysActive && !input && controller.queries.foreground === undefined && !key.ctrl && !key.meta) {
             const digit = /^[1-9]$/.test(_value) ? Number(_value) - 1 : -1;
             if (key.upArrow || key.downArrow) {
-                controller.setOption({ ...choiceState, cursor: Math.max(0, Math.min(options.length, optionCursor + (key.upArrow ? -1 : 1))) });
+                controller.actions.setOption({ ...choiceState, cursor: Math.max(0, Math.min(options.length, optionCursor + (key.upArrow ? -1 : 1))) });
                 return;
             }
             if (digit >= 0 && digit <= options.length || _value === ' ' && question.multiSelect === true && optionCursor < options.length) {
@@ -290,12 +584,12 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
                 const selected = question.multiSelect === true && label
                     ? choiceState.selected.includes(label) ? choiceState.selected.filter(item => item !== label) : [...choiceState.selected, label]
                     : choiceState.selected;
-                controller.setOption({ ...choiceState, cursor: index, selected });
+                controller.actions.setOption({ ...choiceState, cursor: index, selected });
                 return;
             }
             if (key.return) {
                 if (optionCursor === options.length) {
-                    controller.setOption({ ...choiceState, custom: true });
+                    controller.actions.setOption({ ...choiceState, custom: true });
                     return;
                 }
                 const selected = question.multiSelect === true ? choiceState.selected : [string(options[optionCursor].label)];
@@ -303,7 +597,7 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
                     setNotice('Select at least one option with Space or a number');
                     return;
                 }
-                operate(() => answerQuestion(selected));
+                operate(() => controller.actions.answerQuestion({ selected }));
                 return;
             }
         }
@@ -323,291 +617,313 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
             scrollHistory(key.pageUp ? 10 : -10);
             return;
         }
-        if (key.escape && queueOpen) {
-            controller.openQueue(false);
-            return;
-        }
-        if (key.escape && removal) {
-            setRemoval(undefined);
-            return;
-        }
-        if (key.escape && models) {
-            controller.setModelPanel(undefined);
-            return;
-        }
-        if (key.escape && thoughtList) {
-            controller.openThoughts(false);
-            if (controller.running)
-                void controller.interrupt(true);
-            return;
-        }
-        if (key.escape && searchResults) {
-            controller.setSearchPanel(undefined);
-            if (controller.running)
-                void controller.interrupt(true);
-            return;
-        }
-        if (key.escape && historyQuery !== undefined) {
-            controller.setHistoryPanel(undefined);
-            if (controller.running)
-                void controller.interrupt(true);
-            return;
-        }
-        // The typed host path is a screen of its own, so Esc has to leave it: the picker behind it is
-        // disabled while a draft exists, so a leftover path would leave no way back at all.
-        if (key.escape && state.screen === 'path') {
-            setInput('');
-            operate(() => controller.showPicker('workspaces'));
-            return;
-        }
-        if (key.ctrl && _value === 'c') {
-            // A draft clears first, exactly like a shell prompt; an empty draft still stops or exits.
-            if (input !== '') {
-                setInput('');
+        if (loopMenuOpen) {
+            if (key.tab) {
+                const chosen = loopCandidates[loopMenuCursor];
+                if (chosen !== undefined)
+                    setInput(`/loop ${chosen.name}`);
+                return;
+            }
+            if (key.upArrow) {
+                setLoopMenuIndex(Math.max(0, loopMenuCursor - 1));
+                return;
+            }
+            if (key.downArrow) {
+                setLoopMenuIndex(Math.min(loopCandidates.length - 1, loopMenuCursor + 1));
                 return;
             }
-            void controller.interrupt().then(shouldExit => { if (shouldExit)
-                exit(); });
-            return;
         }
         if (referenceOpen) {
-            if (key.escape) {
-                controller.setReferenceDismissed(input);
-                if (controller.running)
-                    void controller.interrupt(true);
-            }
-            else if (key.tab)
+            if (key.tab)
                 pickReference();
             else if (key.upArrow)
-                controller.setReferenceIndex(Math.max(0, controller.reference.index - 1));
+                setReferenceIndex(Math.max(0, referenceIndex - 1));
             else if (key.downArrow)
-                controller.setReferenceIndex(Math.max(0, Math.min((matches?.items.length ?? 1) - 1, controller.reference.index + 1)));
+                setReferenceIndex(Math.max(0, Math.min((matches?.items.length ?? 1) - 1, referenceIndex + 1)));
             return;
         }
         const recallPrevious = key.upArrow || key.ctrl && _value === 'p';
         const recallNext = key.downArrow || key.ctrl && _value === 'n';
-        if ((recallPrevious || recallNext) && state.online && !controller.state.busy && !pending
+        if ((recallPrevious || recallNext) && state.online && controller.queries.foreground === undefined && !pending
             && !queueOpen && (!recallBlocked || key.ctrl)
-            && (state.screen === 'chat' || controller.composer.draft !== '' || key.ctrl)) {
+            && (state.screen === 'chat' || input !== '' || key.ctrl)) {
             // The oldest seeded entry is where the session happened to open, not where it began: stepping
             // past it fetches the page before the retained window, and the step is applied once the page
             // lands, so recall covers prompts from before this client connected. Paging stays with the
             // conversation: on a picker screen the arrows only ever walked what was already retained.
             if (recallPrevious && state.screen === 'chat' && !historyPaging.current
-                && (controller.recallAtOldest || controller.recallLength === 0)
-                && state.session.record.ready && controller.recallHasOlder) {
+                && (controller.queries.recallAtOldest || controller.queries.recallLength === 0)
+                && state.session.record.ready && controller.queries.recallHasOlder) {
                 void recallOlderPrompts();
                 return;
             }
-            setInput(controller.recall(recallPrevious ? -1 : 1, controller.composer.draft), true);
+            setInput(controller.queries.recall(recallPrevious ? -1 : 1, input), true);
             return;
         }
-        if (key.tab) {
+        if (key.tab && !composerIntent) {
             completeCommand();
             return;
         }
-        if (key.escape && (help || costExpanded || statusExpanded || notice !== undefined)) {
-            setHelp(false);
-            setCostExpanded(false);
-            setStatusExpanded(false);
-            setStatusScroll(0);
-            setNotice(undefined);
-            if (controller.running)
-                void controller.interrupt(true);
-            return;
-        }
-        if (key.escape && state.screen === 'chat') {
-            void controller.interrupt(true);
-        }
     });
+    /** The application facts `normalize`/`authorize` read, read in one place.
+     *
+     * Every submission uses these — the composer's line and the loop form's Start — so a command cannot
+     * pass one door and not the other (§3.4: authorize is per submission, not per user action).
+     */
+    function applicationFacts() {
+        return {
+            sessionSelected: state.sessionId !== undefined,
+            pending: pending !== undefined,
+            foreground: foreground !== undefined,
+            // A loop is reported as such because stopping it is what the refusal has to name.
+            during: controller.queries.loop?.active === true ? 'loop'
+                : controller.queries.running ? 'turn' : 'idle',
+        };
+    }
+    /** What a held line is waiting for, in the words the notice uses. */
+    function describeDefer(defer) {
+        return defer === 'busy' ? 'the running operation finishes' : defer === 'loop' ? 'the loop ends' : 'the turn finishes';
+    }
+    /** Hold one accepted-but-deferred line, and say whether it was deferred.
+     *
+     * A deferred line is the operator's committed submission, not a draft, so the caller is free to use
+     * up its draft; the queue runs it when the fact it named clears.
+     * @param verdict - What `authorize` said about the line.
+     * @param label - Text the notice shows.
+     * @returns True when the line was queued instead of running now.
+     */
+    function holdIfDeferred(verdict, label) {
+        if (!verdict.allow || verdict.defer === undefined)
+            return false;
+        const defer = verdict.defer;
+        controller.traceNote('command', { phase: 'queued', kind: verdict.command.kind, reason: defer });
+        setQueuedLines(list => [...list, { command: verdict.command, defer, sessionId: state.sessionId }]);
+        setNotice(`Queued ${label} · runs when ${describeDefer(verdict.defer)}`);
+        return true;
+    }
+    /** Authorize one already-normalized line against the facts as they are *now*. */
+    function verdictFor(command) {
+        const facts = applicationFacts();
+        return authorize(command, { sessionSelected: facts.sessionSelected, pending: facts.pending,
+            during: facts.during, foreground: facts.foreground });
+    }
     const submit = async (raw) => {
-        const submission = classifySubmission(raw, {
-            referenceOpen, copyMode, pending: pending !== undefined, question: question !== undefined, screen: state.screen,
-        });
-        if (submission.kind === 'ignore')
+        // A borrowed composer commits on Enter instead of sending, so an edit is never delivered.
+        if (composerIntent) {
+            const text = raw.trim();
+            if (!text) {
+                setNotice(composerIntent.emptyNotice);
+                return;
+            }
+            if (await composerIntent.commit(text)) {
+                setComposerIntent(undefined);
+                setInput('');
+            }
             return;
-        if (submission.kind === 'reference') {
+        }
+        // A composer menu completes the draft before it is submitted: Enter on the record list accepts the
+        // highlighted record exactly as if its name had been typed, so even that decision belongs to the
+        // pipeline below — the application still says whether a bare known name opens its form.
+        const highlighted = loopDraft !== undefined && loopForm === undefined ? loopCandidates[loopMenuCursor] : undefined;
+        if (highlighted !== undefined) {
+            controller.traceNote('loop-ui', { phase: 'choose', draft: loopDraft ?? '', index: loopMenuCursor,
+                candidates: loopCandidates.length, chosen: highlighted.name });
+        }
+        const line = highlighted === undefined ? raw : `/loop ${highlighted.name}`;
+        // The pipeline decides what the line means; the root only carries out the three stages' results.
+        const submission = interpret({ line, referenceOpen, copyMode, screen: state.screen });
+        if (submission.kind === 'mode') {
+            if (submission.action.kind === 'ignore')
+                return;
             pickReference();
             return;
         }
-        const value = raw.trim();
-        if (!pending && !/^\/feedback(?:\s|$)/.test(value))
-            controller.recordRecall(value);
-        if (submission.kind === 'copy') {
+        const facts = applicationFacts();
+        const command = normalize(submission, { sessionSelected: facts.sessionSelected, question: question !== undefined, pending: facts.pending });
+        // One line completes before the next may start: `authorize` refuses a second submission while the
+        // foreground slot is taken, with a reason the operator can read, and admits a control command
+        // through (its whole purpose is to interrupt whatever owns the slot).
+        const verdict = verdictFor(command);
+        // A line the policy holds runs when the fact it named clears (A2). It is accepted here — the
+        // operator pressed Enter, so the draft is used up — and the queue below runs it later; a line that
+        // was *refused* keeps the draft and is never sent on the operator's behalf (D1).
+        if (holdIfDeferred(verdict, line.trim())) {
             setInput('');
-            setCopyMode(true);
             return;
         }
-        setRemoval(undefined);
-        // Each panel belongs to the command that opened it, so any other command closes it.
-        if (value !== '/queue')
-            controller.openQueue(false);
-        if (!/^\/model(?: |$)/.test(value))
-            controller.setModelPanel(undefined);
-        if (value !== '/help')
-            setHelp(false);
-        if (value !== '/cost')
-            setCostExpanded(false);
-        if (value !== '/status')
-            setStatusExpanded(false);
-        if (!/^\/think(?: |$)/.test(value))
-            controller.openThoughts(false);
-        if (submission.kind === 'quit') {
-            exit();
-            return;
-        }
-        if (submission.kind === 'panel') {
-            if (submission.panel === 'cost') {
-                setCostExpanded(value => !value);
-                setInput('');
-                if (!costExpanded)
-                    void controller.perform(() => historyOperation(signal => controller.refreshCosts(signal)));
-            }
-            else if (submission.panel === 'status') {
-                setStatusExpanded(value => !value);
-                setStatusScroll(0);
-                setInput('');
-            }
-            else {
-                setHelp(value => !value);
-                setHelpPage(0);
+        const executable = verdict.allow ? verdict.command : verdict.error;
+        const value = line.trim();
+        if (!pending && !/^\/feedback(?:\s|$)/.test(value))
+            controller.actions.recordRecall(value);
+        await runLine(executable, raw);
+    };
+    /** Run one authorized line under the UI's port and apply what it returns.
+     *
+     * `draft` is the composer text to clear when the line is consumed; a line the UI runs from its own
+     * queue passes none, because that draft was used up when the operator submitted it.
+     */
+    async function runLine(executable, draft) {
+        // The application decides what the command does and returns the effects; the UI applies them in
+        // order. The port says a surface can be shown, which is what lets `/loop <name>` confirm defaults.
+        const port = { interactive: true, run: (label, operation) => controller.actions.foreground('command', label, operation) };
+        try {
+            const result = await runCommand(controller, executable, port);
+            if (result === undefined)
+                return;
+            await applyResult(result);
+            // Consuming the line is the application's decision, so the composer never guesses it. Only the
+            // line that was submitted is cleared: the operation may have taken long enough for the operator
+            // to write the next one (D1), and that draft is theirs, not this result's to discard.
+            if (result.disposition === 'consume' && draft !== undefined && inputRef.current === draft)
                 setInput('');
-            }
+        }
+        catch (error) {
+            setNotice(errorText(error));
+        }
+    }
+    /** Drain one held line when the fact that deferred it has cleared.
+     *
+     * One per run, in arrival order: the state update re-runs this effect, so the queue empties without
+     * a loop of its own. A line whose session is gone is dropped rather than run against another
+     * conversation, and one that is deferred again goes back to the front.
+     */
+    useEffect(() => {
+        const next = queuedLines[0];
+        if (next === undefined)
+            return;
+        const facts = applicationFacts();
+        const ready = !facts.foreground && (next.defer === 'busy' || facts.during === 'idle');
+        if (!ready)
+            return;
+        if (next.sessionId !== state.sessionId) {
+            setQueuedLines(list => list.slice(1));
+            setNotice('Dropped a queued line: the selected session changed');
             return;
         }
-        const accepted = await controller.perform(async () => {
-            switch (submission.kind) {
-                case 'remove':
-                    await requestRemoval(submission.target, submission.query);
-                    return;
-                case 'navigate': {
-                    controller.setHistoryPanel(undefined);
-                    controller.setSearchPanel(undefined);
-                    if (submission.target === 'workspace')
-                        await controller.switchWorkspace(submission.query);
-                    else
-                        await controller.switchSession(submission.query);
-                    controller.setScroll(0);
-                    return;
+        const verdict = verdictFor(next.command);
+        if (verdict.allow && verdict.defer !== undefined)
+            return;
+        setQueuedLines(list => list.slice(1));
+        void runLine(verdict.allow ? verdict.command : verdict.error);
+        // The facts that decide readiness are the dependencies; `queuedLines` re-runs the drain per line.
+    }, [queuedLines, foreground !== undefined, state.pending, state.sessionId,
+        controller.queries.loop?.active, controller.queries.running]);
+    /** Apply one command result: its effects in the order the application emitted them.
+     *
+     * This is the whole front-end half of a command — the UI names no command here and never reorders.
+     * @param result - What the application did and what should be shown.
+     */
+    async function applyResult(result) {
+        // `closePanels` must know which panel this result keeps, and the contract puts it first, so the
+        // kept panel is read from the whole list before any effect runs.
+        const keep = result.effects.find(effect => effect.kind === 'open' || effect.kind === 'toggle');
+        const keepPanel = keep?.kind === 'open' || keep?.kind === 'toggle' ? keep.panel : undefined;
+        for (const effect of result.effects)
+            await applyEffect(effect, keepPanel);
+    }
+    /** Apply one presentational verb. */
+    async function applyEffect(effect, keepPanel) {
+        switch (effect.kind) {
+            case 'quit':
+                exit();
+                return;
+            case 'copy':
+                setCopyMode(true);
+                return;
+            case 'closePanels':
+                closePanelsExcept(keepPanel);
+                return;
+            case 'close':
+                closePanel(effect.panel);
+                return;
+            case 'open':
+                if (effect.panel === 'queue')
+                    openQueue(true);
+                else if (effect.panel === 'prompts')
+                    openPrompts(true);
+                else if (effect.panel === 'thoughts')
+                    openThoughts(true);
+                return;
+            case 'toggle':
+                if (effect.panel === 'help') {
+                    setHelp(value => !value);
+                    setHelpPage(0);
                 }
-                case 'path':
-                    await controller.createWorkspace(submission.value);
-                    return;
-                case 'latest':
-                    controller.setViewWindow(undefined);
-                    controller.setHistoryPanel(undefined);
-                    controller.setSearchPanel(undefined);
-                    controller.setFolds(new Set());
-                    controller.setScroll(0);
-                    controller.pinHistory(false);
-                    return;
-                case 'models': {
-                    if (!submission.args.length) {
-                        controller.setHistoryPanel(undefined);
-                        controller.setSearchPanel(undefined);
-                        controller.setModelPanel({ catalog: await controller.modelCatalog() });
-                    }
-                    else {
-                        await controller.selectModel(submission.args[0], submission.args[1], submission.args[2]);
-                        controller.setModelPanel(undefined);
-                    }
-                    return;
+                else if (effect.panel === 'cost')
+                    setCostExpanded(value => !value);
+                else if (effect.panel === 'status') {
+                    setStatusExpanded(value => !value);
+                    setStatusScroll(0);
                 }
-                case 'queue':
-                    controller.openQueue(true);
-                    return;
-                case 'newSession':
-                    await controller.createSession();
-                    return;
-                case 'history':
-                    controller.setSearchPanel(undefined);
-                    controller.setHistoryPanel({ query: submission.query, contentSearch: false });
-                    return;
-                case 'sessionSearch':
-                    await historyOperation(async (signal) => {
-                        const result = await controller.searchSessions(submission.query, submission.command === '/ssearch', signal);
-                        controller.setHistoryPanel(undefined);
-                        controller.setSearchPanel({ query: submission.query, ...result });
-                    });
-                    return;
-                case 'historySearch':
-                    await historyOperation(async (signal) => {
-                        controller.setHistoryPanel({ query: submission.query, contentSearch: true,
-                            matches: await controller.searchHistory(submission.query, signal) });
-                        controller.setSearchPanel(undefined);
-                    });
-                    return;
-                case 'think': {
-                    if (submission.target === 'live') {
-                        controller.setLiveReasoning(controller.view.liveReasoning === 'row' ? 'full' : 'row');
-                        controller.openThoughts(false);
-                        controller.setScroll(0);
-                    }
-                    else if (submission.target) {
-                        const seq = Number(submission.target);
-                        if (!Number.isSafeInteger(seq) || !displayTranscript.thoughts.some(entry => entry.seq === seq))
-                            throw new Error('Use /think <message sequence> for a loaded reasoning block');
-                        const next = new Set(reasoningOverrides);
-                        if (next.delete(seq)) {
-                            controller.setFolds(next);
-                            return;
-                        }
-                        next.add(seq);
-                        controller.setFolds(next);
-                        await jumpHistory(seq, next);
-                    }
-                    else {
-                        controller.setHistoryPanel(undefined);
-                        controller.setSearchPanel(undefined);
-                        controller.openThoughts(true);
-                    }
-                    return;
+                return;
+            case 'history':
+                setHistoryPanel(effect.history);
+                return;
+            case 'search':
+                setSearchPanel(effect.search);
+                return;
+            case 'model':
+                setModelPanel(effect.model);
+                return;
+            case 'removal':
+                setRemoval(effect.removal);
+                return;
+            case 'loop': {
+                // The application validated the record before asking for the form, so the UI only records that
+                // the request arrived and renders it.
+                const known = controller.queries.loopRecords.some(record => record.name === effect.loop.name);
+                controller.traceNote('loop-ui', { phase: 'open', name: effect.loop.name, known });
+                setDismissedLoopMenu(undefined);
+                setLoopForm({ name: effect.loop.name });
+                return;
+            }
+            case 'live':
+                controller.actions.setViewWindow(undefined);
+                return;
+            case 'pinLive':
+                controller.actions.pinHistory(false);
+                return;
+            case 'resetFolds':
+                setReasoningOverrides(new Set());
+                return;
+            case 'toggleLiveReasoning':
+                setLiveReasoning(liveReasoning === 'row' ? 'full' : 'row');
+                return;
+            case 'toggleFold': {
+                const next = new Set(reasoningOverrides);
+                if (next.delete(effect.seq))
+                    setReasoningOverrides(next);
+                else {
+                    next.add(effect.seq);
+                    setReasoningOverrides(next);
+                    await jumpHistory(effect.seq, next);
                 }
-                case 'older':
-                    await controller.older(undefined, displayTranscript);
-                    controller.setScroll(controller.view.scroll + 10);
-                    return;
-                case 'compact':
-                    setNotice(undefined);
-                    await historyOperation(async (signal) => { setNotice(await controller.command('/compact', signal)); }, 'Compacting history…');
-                    return;
-                case 'cancel':
-                    await controller.cancelTurn();
-                    return;
-                case 'approval':
-                    await controller.approve(submission.allowed);
-                    return;
-                case 'hostCommand':
-                    setNotice(undefined);
-                    await historyOperation(async (signal) => { setNotice(await controller.command(submission.line, signal)); }, 'Running command…');
-                    return;
-                case 'export':
-                    await historyOperation(async (signal) => { setNotice(`Saved session log: ${await controller.exportLog(submission.destination, signal)}`); }, 'Exporting session log…');
-                    return;
-                case 'exportHtml':
-                    await historyOperation(async (signal) => { setNotice(`Saved loaded conversation: ${await controller.exportHtml(submission.destination, signal)}`); }, 'Exporting loaded conversation…');
-                    return;
-                case 'coredump':
-                    // V8 serializes the heap synchronously, so the client stalls until the file is written;
-                    // the path is reported afterwards so the snapshot can be opened in DevTools.
-                    await historyOperation(async () => {
-                        setNotice(`Heap snapshot saved: ${controller.heapSnapshot(submission.tag)}`);
-                    }, 'Writing heap snapshot…');
-                    return;
-                case 'answer':
-                    await answerQuestion(question.multiSelect === true ? choiceState.selected : [], submission.text);
-                    return;
-                case 'error': throw new Error(submission.message);
-                case 'prompt':
-                    await controller.prompt(submission.text);
-                    controller.setViewWindow(undefined);
-                    controller.setScroll(0);
-                    return;
+                return;
             }
-        });
-        if (accepted)
-            setInput('');
-    };
+            case 'scroll':
+                setScroll(effect.position);
+                return;
+            case 'scrollBy':
+                setScroll(current => current + effect.delta);
+                return;
+            case 'notice':
+                setNotice(effect.text);
+                return;
+            case 'error':
+                setNotice(effect.text);
+                return;
+        }
+    }
+    /** Close every panel except the one a result keeps open. */
+    function closePanelsExcept(keep) {
+        for (const surface of surfaces)
+            if (surface.name !== keep)
+                surface.close?.();
+    }
+    /** Close one named panel. */
+    function closePanel(name) {
+        surfaces.find(surface => surface.name === name)?.close?.();
+    }
     const width = Math.max(10, (stdout.columns ?? 80) - 2);
     // The composer never trades the conversation away for input. Its window grows with the body and
     // is clamped so a few conversation rows always survive; width never buys height, so landscape and
@@ -619,7 +935,7 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
     // Session activity is a list-level fact, so both pickers read it without loading any history.
     const listAge = Date.now();
     // Unanswered interactions are held per session already; a list only has to read the counts.
-    const pendingCounts = controller.pendingCounts();
+    const pendingCounts = controller.queries.pendingCounts();
     const isPending = (session) => (pendingCounts.get(string(session.sessionId)) ?? 0) > 0;
     const sessionsOf = (workspace) => {
         const ids = new Set(array(workspace.sessionIds).map(string));
@@ -644,51 +960,61 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
                 cells: workspaceSegments(counts, rollupStyle).map(segment => ({ text: segment.text, color: stateColor[segment.state] })),
                 ...(detail ? { detail } : {}),
                 remove: () => setRemoval({ kind: 'workspace', id: string(workspace.workspaceId), name: string(workspace.title), path: string(workspace.path) }),
-                action: () => controller.pickWorkspace(string(workspace.workspaceId)) };
+                action: () => controller.actions.pickWorkspace(string(workspace.workspaceId)) };
         }),
-        { key: '@all', label: 'All sessions', action: () => operate(() => controller.switchSession('all')) },
+        { key: '@all', label: 'All sessions', action: () => operate(() => controller.actions.switchSession('all')) },
         // The directory this client runs in is the one case where no path has to be typed, and offering
         // it only while the host has not registered it keeps the row from repeating itself.
         ...(state.workspaces.some(workspace => string(workspace.path) === controller.localDirectory) ? []
             : [{ key: '@here', label: `+ Add workspace (this directory)  ${controller.localDirectory}`,
-                    action: () => operate(() => controller.createWorkspace(controller.localDirectory)) }]),
-        { key: '@new', label: '+ Add workspace (host directory)', action: () => controller.enterPath() },
+                    action: () => operate(() => controller.actions.createWorkspace(controller.localDirectory)) }]),
+        { key: '@new', label: '+ Add workspace (host directory)', action: () => controller.actions.enterPath() },
     ] : [
-        ...(state.workspaceId && !state.showAllSessions ? [{ key: '@new', label: '+ New session', action: () => operate(() => controller.createSession()) }] : []),
-        ...controller.visibleSessions.map(session => ({ key: string(session.sessionId),
+        ...(state.workspaceId && !state.showAllSessions ? [{ key: '@new', label: '+ New session', action: () => operate(() => controller.actions.createSession()) }] : []),
+        ...controller.queries.visibleSessions.map(session => ({ key: string(session.sessionId),
             label: `${sessionStatus(session, listAge, isPending(session))} ${sessionLabel(session)}  ${session.sessionId}`,
             remove: () => operate(() => requestRemoval('session', string(session.sessionId))),
-            action: () => { controller.setScroll(0); operate(() => controller.selectSession(string(session.sessionId))); } })),
-        { key: '@back', label: '← Workspaces', action: () => operate(() => controller.showPicker('workspaces')) },
+            action: () => { setScroll(0); operate(() => controller.actions.selectSession(string(session.sessionId))); } })),
+        { key: '@back', label: '← Workspaces', action: () => operate(() => controller.actions.showPicker('workspaces')) },
     ];
-    const layout = useMemo(() => historyLayout(displayTranscript, width, reasoning, reasoningOverrides, liveReasoning), [displayTranscript, displayTranscript.version, width, reasoning, reasoningOverrides, liveReasoning]);
+    const layout = useMemo(() => controller.queries.render({ transcript: displayTranscript, width, folds: reasoningOverrides, liveReasoning }), [controller, displayTranscript, displayTranscript.version, width, reasoningOverrides, liveReasoning]);
     const { length, first } = layout;
+    // The read-only view lays out its own transcript, so its fold mode never leaks into the
+    // conversation's, and a local source needs no layout at all: it already holds plain lines.
+    const peekLayout = useMemo(() => peek?.transcript === undefined ? undefined
+        : controller.queries.render({ transcript: peek.transcript, width, folds: NO_FOLDS, liveReasoning: 'row' }), [controller, peek?.transcript, peek?.transcript?.version, width]);
+    const peekPlainRows = useMemo(() => peek?.lines === undefined ? []
+        : peek.lines.flatMap(line => plainRows(line, width, 'shell')), [peek?.lines, width]);
+    // Local `!` blocks live at the end of the transcript: not host records, not persisted, but they
+    // scroll with the conversation and are counted into its total so the viewport math stays honest.
+    const merged = useMemo(() => mergeShellRuns(layout, state.shell.blocks, width), [layout, controller, state.version, width]);
+    const totalRows = merged.total;
     const statusNotice = !['Connected', 'Idle', 'Running…', 'Responding…'].includes(state.status);
     const showHistoryHint = dialogOpen || displayTranscript.hasMore || !!historyWindow;
     const pageSize = Math.max(1, conversationRows - (showHistoryHint ? 1 : 0));
-    const previousView = useRef({ transcript: displayTranscript, session: state.session.record, count: length, first, folds: reasoningOverrides, liveReasoning });
+    const previousView = useRef({ transcript: displayTranscript, session: state.session.record, count: totalRows, first, folds: reasoningOverrides, liveReasoning });
     const previous = previousView.current;
     const prepended = previous.first !== undefined && first !== undefined && first < previous.first;
     const adjustedScroll = previous.session !== state.session.record ? 0
-        : scroll > 0 && previous.transcript === displayTranscript && !prepended && previous.folds === reasoningOverrides && previous.liveReasoning === liveReasoning ? Math.max(0, scroll + length - previous.count) : scroll;
-    const maxScroll = Math.max(0, length - pageSize);
+        : scroll > 0 && previous.transcript === displayTranscript && !prepended && previous.folds === reasoningOverrides && previous.liveReasoning === liveReasoning ? Math.max(0, scroll + totalRows - previous.count) : scroll;
+    const maxScroll = Math.max(0, totalRows - pageSize);
     const position = Math.min(adjustedScroll, maxScroll);
     useLayoutEffect(() => {
-        previousView.current = { transcript: displayTranscript, session: state.session.record, count: length, first, folds: reasoningOverrides, liveReasoning };
+        previousView.current = { transcript: displayTranscript, session: state.session.record, count: totalRows, first, folds: reasoningOverrides, liveReasoning };
         if (position !== scroll)
-            controller.setScroll(position);
-    }, [state.session.record, displayTranscript, length, position, scroll, reasoningOverrides, liveReasoning]);
+            setScroll(position);
+    }, [state.session.record, displayTranscript, totalRows, position, scroll, reasoningOverrides, liveReasoning]);
     useLayoutEffect(() => {
-        controller.pinHistory(!historyWindow && (position > 0 || thoughtList || historyQuery !== undefined && !contentSearch));
+        controller.actions.pinHistory(!historyWindow && (position > 0 || thoughtList || historyQuery !== undefined && !contentSearch));
     }, [controller, historyWindow, position, thoughtList, historyQuery, contentSearch, state.session.record]);
     useEffect(() => {
         const first = displayTranscript.beforeSeq;
         if (first === undefined)
             return;
-        const previous = controller.view.folds;
+        const previous = reasoningOverrides;
         const next = new Set([...previous].filter(seq => seq >= first));
         if (next.size !== previous.size)
-            controller.setFolds(next);
+            setReasoningOverrides(next);
     }, [displayTranscript, displayTranscript.memoryRevision]);
     const loadingPage = useRef(false);
     const scrollIntent = useRef(0);
@@ -698,31 +1024,28 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
         if (copyMode || state.screen !== 'chat')
             return;
         const intent = ++scrollIntent.current;
-        const next = Math.max(0, Math.min(maxScroll, controller.view.scroll + delta));
-        controller.setScroll(next);
-        if (delta <= 0 || next < maxScroll || loadingPage.current || state.busy || !state.online || !displayTranscript.ready || !displayTranscript.hasMore)
+        const next = Math.max(0, Math.min(maxScroll, scroll + delta));
+        setScroll(next);
+        if (delta <= 0 || next < maxScroll || loadingPage.current || foreground !== undefined || !state.online || !displayTranscript.ready || !displayTranscript.hasMore)
             return;
         loadingPage.current = true;
         const transcript = displayTranscript;
-        void controller.perform(() => historyOperation(signal => controller.older(signal, transcript))).then(accepted => {
+        void historyOperation(signal => controller.actions.older(signal, transcript)).then(accepted => {
             if (accepted && mounted.current && displayRef.current === transcript && scrollIntent.current === intent) {
-                controller.setScroll(controller.view.scroll + delta);
+                setScroll(scroll + delta);
             }
         }).finally(() => { loadingPage.current = false; });
     }
+    /** Run one front-end-orchestrated operation in the controller's foreground slot.
+     *
+     * The slot, its abort controller and its label live in the controller (§6.2), so this is only a
+     * typed name for the common case: paging through history.
+     * @param operation - Work handed the signal the controller aborts.
+     * @param label - Label the status line shows while it runs.
+     * @returns The value, or undefined when the slot was taken or the work was cancelled.
+     */
     async function historyOperation(operation, label = 'Loading history…') {
-        const abort = new AbortController();
-        historyAbort.current = abort;
-        setHistoryLoading(label);
-        try {
-            await operation(abort.signal);
-        }
-        finally {
-            if (historyAbort.current === abort) {
-                historyAbort.current = undefined;
-                setHistoryLoading(undefined);
-            }
-        }
+        return await controller.actions.foreground('history', label, operation);
     }
     /** Reach one prompt older than the index's boundary, from memory first and the host second.
      *
@@ -737,26 +1060,26 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
         const transcript = state.session.record;
         const sessionId = state.sessionId;
         // Recover from the loaded window first: no request, no focus change, no loading label.
-        if (controller.refillRecall() || !transcript.hasMore) {
-            setInput(controller.recall(-1, controller.composer.draft), true);
+        if (controller.actions.refillRecall() || !transcript.hasMore) {
+            setInput(controller.queries.recall(-1, input), true);
             return;
         }
         historyPaging.current = true;
         try {
-            const accepted = await controller.perform(() => historyOperation(async (signal) => {
+            const accepted = await historyOperation(async (signal) => {
                 // A prompt can be many pages back in an agent session, so scan a healthy stretch before
                 // giving up; the loading label stays visible and Esc cancels the scan.
                 for (let page = 0; page < RECALL_PAGE_SCAN; page++) {
                     if (transcript.beforeSeq === undefined || !transcript.hasMore)
                         break;
-                    await controller.older(signal, transcript);
+                    await controller.actions.older(signal, transcript);
                     signal.throwIfAborted();
-                    if (controller.refillRecall())
+                    if (controller.actions.refillRecall())
                         return;
                 }
-            }, 'Loading older prompts…'));
+            }, 'Loading older prompts…');
             if (accepted && mounted.current && controller.state.sessionId === sessionId) {
-                setInput(controller.recall(-1, controller.composer.draft), true);
+                setInput(controller.queries.recall(-1, input), true);
             }
         }
         finally {
@@ -765,64 +1088,108 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
     }
     async function openSearchSession(sessionId, query) {
         await historyOperation(async (signal) => {
-            await controller.selectSession(sessionId);
-            await controller.waitForHistory(signal);
-            controller.setHistoryPanel({ query, contentSearch: true, matches: await controller.searchHistory(query, signal) });
-            controller.setSearchPanel(undefined);
+            await controller.actions.selectSession(sessionId);
+            await controller.actions.waitForHistory(signal);
+            setHistoryPanel({ query, contentSearch: true, matches: await controller.actions.searchHistory(query, signal) });
+            setSearchPanel(undefined);
         });
     }
     async function jumpHistory(target, folds = reasoningOverrides) {
         if (state.screen !== 'chat')
             throw new Error('Select a session first');
         ++scrollIntent.current;
-        const abort = new AbortController();
-        historyAbort.current = abort;
-        try {
+        await controller.actions.foreground('history', 'Jumping to a message…', async (signal) => {
             const transcript = displayTranscript.messages.some(message => message.seq === target) ? displayTranscript
                 : state.session.record.messages.some(message => message.seq === target) ? state.session.record
-                    : await controller.historyAt(target, abort.signal);
-            abort.signal.throwIfAborted();
-            const current = historyLayout(transcript, width, reasoning, folds, liveReasoning);
+                    : await controller.queries.historyAt(target, signal);
+            signal.throwIfAborted();
+            const current = controller.queries.render({ transcript, width, folds, liveReasoning });
             const row = current.offsets.get(target);
             if (row === undefined)
-                throw new Error('No visible message at this sequence; use /history to choose a record');
-            controller.setViewWindow(transcript === state.session.record ? undefined : transcript);
-            controller.setHistoryPanel(undefined);
-            controller.openThoughts(false);
-            controller.setScroll(Math.max(0, current.length - pageSize - row));
-        }
-        finally {
-            if (historyAbort.current === abort)
-                historyAbort.current = undefined;
-        }
+                throw new Error('No visible message at that sequence; use /history to choose a record');
+            controller.actions.setViewWindow(transcript === state.session.record ? undefined : transcript);
+            setHistoryPanel(undefined);
+            openThoughts(false);
+            setScroll(Math.max(0, current.length - pageSize - row));
+        });
     }
-    useMouseWheel(direction => { if (statusExpanded && statusOverflow)
-        setStatusScroll(value => Math.max(0, value - direction * 3));
-    else
-        scrollHistory(direction * 3); }, !copyMode && state.screen === 'chat', () => { if (!dialogOpen)
-        setCopyMode(true); });
     const trailingGap = dialogOpen && length > 0 && layout.viewport(length - 1, length)[0]?.text === '' ? 1 : 0;
-    const end = Math.max(pageSize, length - position - trailingGap);
-    const visible = useMemo(() => layout.viewport(Math.max(0, end - pageSize), end), [layout, end, pageSize]);
+    const end = Math.max(pageSize, totalRows - position - trailingGap);
+    // The first merged row the viewport shows: a short record starts at 0, a scrolled one does not, and
+    // every screen line has to be translated back through this to find its row.
+    const visibleStart = Math.max(0, end - pageSize);
+    const visible = useMemo(() => merged.viewport(visibleStart, end), [merged, visibleStart, end]);
+    // The read-only view's own window: `peekScroll` counts rows back from the newest, like the
+    // conversation's scroll, so new output keeps arriving at the bottom unless the reader looked away.
+    const peekTotal = peekLayout?.length ?? peekPlainRows.length;
+    const peekMaxScroll = Math.max(0, peekTotal - Math.max(1, peekRows));
+    const peekPosition = Math.min(peekScroll, peekMaxScroll);
+    const peekEnd = Math.max(0, peekTotal - peekPosition);
+    const peekStart = Math.max(0, peekEnd - Math.max(1, peekRows));
+    const peekVisible = peekLayout === undefined ? peekPlainRows.slice(peekStart, peekEnd) : peekLayout.viewport(peekStart, peekEnd);
+    // Where the first visible transcript row sits on screen: the copy-mode banner, the measured header,
+    // the measured connection/foreground notices inside the body, and the viewport's own top margin.
+    // Rows are laid out from the top of the viewport, so a given row's screen line is simply this plus
+    // its index in `visible` — no counting back from the composer's variable height.
+    const transcriptTop = (copyMode ? 1 : 0) + chromeRows.header + chromeRows.prefix + (dialogOpen ? 0 : 1);
+    useMouseWheel(direction => {
+        // The read-only view scrolls itself; the conversation behind it must not move.
+        if (peek !== undefined) {
+            setPeekScroll(value => Math.max(0, value + direction * 3));
+            return;
+        }
+        if (statusExpanded && statusOverflow)
+            setStatusScroll(value => Math.max(0, value - direction * 3));
+        else
+            scrollHistory(direction * 3);
+    }, !copyMode && state.screen === 'chat', cell => {
+        // A bar stands for one readable source, and only its own row is the bar: its output rows below
+        // are content, and a press on them still starts a selection. Everything else is copy mode.
+        if (dialogOpen)
+            return;
+        const index = cell.row - 1 - transcriptTop;
+        if (index < 0 || index >= visible.length) {
+            setCopyMode(true);
+            return;
+        }
+        // Screen line -> merged row: the viewport starts at `visibleStart`, so a short record's first row
+        // and a scrolled one's are both placed correctly. Reading the index directly only worked when the
+        // whole transcript fit on screen, which is exactly what a real session is not.
+        const source = merged.sources.get(visibleStart + index);
+        if (source !== undefined) {
+            controller.actions.openPeek(source);
+            return;
+        }
+        setCopyMode(true);
+    });
+    // Clamp the stored offset once the source's length is known, so scrolling back down starts moving
+    // immediately instead of burning the overshoot first.
+    useLayoutEffect(() => {
+        if (peekPosition !== peekScroll)
+            setPeekScroll(peekPosition);
+    }, [peekPosition, peekScroll]);
     const liveThought = thoughtList && !historyWindow ? state.session.record.liveParts(width).find(part => part.kind === 'reasoning') : undefined;
     const thoughtEntries = thoughtList ? displayTranscript.thoughts : undefined;
     const thoughtChoices = useMemo(() => [...(thoughtEntries ?? [])].reverse().map(entry => ({
         key: String(entry.seq), label: `${toolLine(`#${entry.seq} User · ${entry.prompt}`, width - 2)}\n  ${toolLine(`◇ ${entry.preview}`, width - 4)}`,
-        action: () => operate(async () => { const next = new Set(reasoningOverrides); next.add(entry.seq); controller.setFolds(next); await jumpHistory(entry.seq, next); }),
+        action: () => operate(async () => { const next = new Set(reasoningOverrides); next.add(entry.seq); setReasoningOverrides(next); await jumpHistory(entry.seq, next); }),
     })), [thoughtEntries, width, pageSize, reasoningOverrides, liveReasoning, displayTranscript]);
     const thoughtOptions = useMemo(() => [
         ...(liveThought ? [{ key: 'live', label: `${toolLine(`Now · User · ${state.session.record.latestPrompt}`, width - 2)}\n  ${toolLine(liveThought.text, width - 4)}`,
-                action: () => { controller.setLiveReasoning('full'); controller.openThoughts(false); const expanded = historyLayout(state.session.record, width, reasoning, reasoningOverrides, 'full'); controller.setScroll(Math.max(0, expanded.length - pageSize - expanded.liveOffset)); } }] : []),
+                action: () => { setLiveReasoning('full'); openThoughts(false); const expanded = controller.queries.render({ transcript: state.session.record, width, folds: reasoningOverrides, liveReasoning: 'full' }); setScroll(Math.max(0, expanded.length - pageSize - expanded.liveOffset)); } }] : []),
         ...thoughtChoices,
-        ...(displayTranscript.hasMore ? [{ key: 'older', label: '↑ Load older reasoning', action: () => operate(() => historyOperation(signal => controller.older(signal, displayTranscript))) }] : []),
-        { key: 'close', label: '← Back to conversation', action: () => controller.openThoughts(false) },
+        ...(displayTranscript.hasMore ? [{ key: 'older', label: '↑ Load older reasoning', action: () => operate(() => historyOperation(signal => controller.actions.older(signal, displayTranscript))) }] : []),
+        { key: 'close', label: '← Back to conversation', action: () => openThoughts(false) },
     ], [liveThought, thoughtChoices, displayTranscript, displayTranscript.hasMore, width, pageSize, reasoningOverrides]);
     const workspace = state.workspaces.find(item => item.workspaceId === state.workspaceId);
     const workspaceName = workspace ? string(workspace.title) || string(workspace.path) : state.workspaceId;
-    const headerTitle = controller.sessionName
-        ? [controller.sessionName, width >= 60 ? workspaceName : undefined].filter(Boolean).join(' · ')
+    const headerTitle = controller.queries.sessionName
+        ? [controller.queries.sessionName, width >= 60 ? workspaceName : undefined].filter(Boolean).join(' · ')
         : workspaceName || 'All workspaces';
-    const commandSuggestions = input.startsWith('/') && !input.includes(' ') ? suggestedCommands(input) : undefined;
+    const commandSuggestions = !loopMenuOpen && input.startsWith('/') && !input.includes(' ') ? suggestedCommands(input) : undefined;
+    // Once the name is settled and arguments begin, the composer says what this command takes. The
+    // `/loop` record list is more specific, so it replaces the generic line rather than stacking on it.
+    const commandHint = loopMenuOpen ? undefined : argumentHint(input);
     // Reading older history pauses the clock without freezing the connection state on picker screens.
     // A paused clock is named rather than left frozen: a stopped number looks like a stall.
     const pauseReason = copyMode ? 'copy'
@@ -830,13 +1197,80 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
             : state.screen === 'chat' && position > 0 ? 'history'
                 : undefined;
     const statusFrozen = pauseReason !== undefined;
-    return _jsx(ThemeContext.Provider, { value: theme, children: _jsx(CopyMode.Provider, { value: copyMode, children: _jsx(Frozen, { frozen: copyMode, identity: `${width}:${stdout.rows}`, children: _jsxs(Box, { flexDirection: "column", paddingX: 1, height: Math.max(1, (stdout.rows ?? 30) - 1), overflowY: "hidden", children: [copyMode && _jsx(Text, { color: theme.accent, children: "Copy mode \u00B7 drag to select \u00B7 Esc / Ctrl+S resumes" }), _jsx(ChatHeader, { title: headerTitle, mode: controller.sessionMode, width: width, frozen: displayPaused, identity: `${width}:${state.sessionId}` }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, minHeight: 0, overflowY: "hidden", children: [historyLoading && _jsxs(Text, { dimColor: true, children: [historyLoading, " \u00B7 Esc / Ctrl+C cancel"] }), _jsx(Frozen, { frozen: statusPaused, identity: state.sessionId ?? "", children: statusNotice && _jsx(Text, { dimColor: true, wrap: "truncate-end", children: safeText(state.status) }) }), state.error && _jsx(Text, { color: theme.colors.error, children: state.error }), state.screen === 'chat' && _jsx(ChatViewport, { rows: visible, showHistoryHint: showHistoryHint, dialogOpen: dialogOpen, historyWindow: !!historyWindow, frozen: displayPaused, identity: `${width}:${state.sessionId}:${position}:${pageSize}`, boxRef: conversationBox })] }), _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [notice && _jsx(Text, { dimColor: true, children: safeText(notice) }), _jsxs(Box, { borderStyle: "round", borderColor: pending ? theme.colors.context : state.online ? theme.accent : theme.border, paddingX: 1, flexDirection: "column", flexShrink: 1, minHeight: 3, children: [_jsx(Box, { flexDirection: "column", flexShrink: 1, minHeight: 0, overflowY: "hidden", children: queueOpen && !pending ? _jsx(QueueDialog, { queued: queued, rows: stdout.rows ?? 30, width: width, unavailable: !!state.controlError, enabled: !input && !state.busy && state.online, canSelect: () => !controller.composer.draft && !controller.state.busy && controller.state.online && !controller.state.pending.length, onRemove: id => operate(() => controller.removeQueued(id)) }) : removal ? _jsx(RemovalDialog, { removal: removal, enabled: !input && !state.busy && state.online, canSelect: () => !controller.composer.draft && !controller.state.busy && controller.state.online, onCancel: () => setRemoval(undefined), onConfirm: () => operate(async () => { await controller.removeTarget(removal); setRemoval(undefined); }) }) : models ? _jsx(ModelDialog, { models: models, rows: stdout.rows ?? 30, width: width, enabled: !input && !state.busy && state.online, canSelect: () => !controller.composer.draft && !controller.state.busy && controller.state.online, onChoose: (provider, model, effort) => operate(async () => { await controller.selectModel(provider, model, effort); controller.setModelPanel(undefined); }), onOpen: (provider, model) => controller.setModelPanel({ catalog: models.catalog, provider, model }), onBack: () => controller.setModelPanel({ catalog: models.catalog }), onClose: () => controller.setModelPanel(undefined) }) : searchResults ? _jsx(SearchResultsDialog, { query: searchResults.query, items: searchResults.items, hasMore: searchResults.hasMore, width: width, enabled: !input && !state.busy, canSelect: () => !controller.composer.draft && !controller.state.busy, onOpen: sessionId => operate(() => openSearchSession(sessionId, searchResults.query)), onClose: () => controller.setSearchPanel(undefined) }) : state.screen === 'workspaces' || state.screen === 'sessions' ? _jsx(PickerScreen, { title: state.screen === 'workspaces' ? 'Choose workspace' : state.showAllSessions ? 'Choose session · All workspaces' : 'Choose session', identity: `${state.screen}:${state.workspaceId ?? ''}`, choices: choices, width: pickerWidth, 
+    // The bar renders plain data: the composition root is the one place that reads the controller.
+    const statusSource = (() => {
+        const view = controller.queries.telemetry.view(state.sessionId);
+        const ledger = controller.costs;
+        const workspace = state.workspaces.find(item => item.workspaceId === state.workspaceId);
+        const line = (total) => ({ text: costText(total), amount: total.amount, unknown: total.unknown });
+        const sessionOf = () => state.sessionId !== undefined && ledger !== undefined && ledger.hasSession(state.sessionId)
+            ? ledger.total(state.sessionId) : undefined;
+        const session = sessionOf();
+        return {
+            host: controller.base, online: state.online, status: state.status,
+            running: controller.queries.running,
+            // What is busy, and since when, is the controller's answer; the bar only draws it.
+            ...(controller.queries.activity === undefined ? {} : { activity: controller.queries.activity }),
+            sessionId: state.sessionId, sessionMode: controller.queries.sessionMode,
+            workspaceLabel: workspace ? `${string(workspace.title)} · ${string(workspace.path)}` : 'none selected',
+            activeTurnStartedAt: state.session.record.activeTurnStartedAt,
+            pendingCount: state.pending.length,
+            ...(state.session.record.livePhase === undefined ? {} : { livePhase: state.session.record.livePhase }),
+            values: view.values, queued: view.queued, jobs: view.jobs,
+            ...(state.defaultModel === undefined ? {} : { defaultModel: state.defaultModel }),
+            ...(ledger === undefined ? {} : { cost: {
+                    sessionText: session === undefined ? '?' : costText(session),
+                    today: () => line(ledger.today()),
+                    session: () => { const total = sessionOf(); return total === undefined ? undefined : line(total); },
+                    coverage: ledger.coverage,
+                    ...(ledger.error === undefined ? {} : { error: ledger.error }),
+                } }),
+            ...(state.controlError === undefined ? {} : { controlError: state.controlError }),
+            ...(state.presetError === undefined ? {} : { presetError: state.presetError }),
+            ...(state.modelError === undefined ? {} : { modelError: state.modelError }),
+        };
+    })();
+    const costSource = (() => {
+        const ledger = controller.costs;
+        if (ledger === undefined)
+            return undefined;
+        const line = (total) => ({ text: costText(total), unknown: total.unknown, records: total.records });
+        const id = state.sessionId;
+        const session = id !== undefined && ledger.hasSession(id) ? ledger.total(id) : undefined;
+        return {
+            ...(session === undefined ? {} : { session: line(session) }),
+            today: line(ledger.today()),
+            scanning: ledger.scanning, coverage: ledger.coverage,
+            ...(ledger.scannedAt === undefined ? {} : { scannedAt: ledger.scannedAt }),
+            customPrices: ledger.customPrices,
+            ...(ledger.error === undefined ? {} : { error: ledger.error }),
+            missing: ledger.missing(),
+        };
+    })();
+    return _jsx(ThemeContext.Provider, { value: theme, children: _jsx(CopyMode.Provider, { value: copyMode, children: _jsx(Frozen, { frozen: copyMode, identity: `${width}:${stdout.rows}`, children: _jsxs(Box, { flexDirection: "column", paddingX: 1, height: Math.max(1, (stdout.rows ?? 30) - 1), overflowY: "hidden", children: [copyMode && _jsx(Text, { color: theme.accent, children: "Copy mode \u00B7 drag to select \u00B7 Esc / Ctrl+S resumes" }), _jsx(Box, { ref: headerSection, flexShrink: 0, children: _jsx(ChatHeader, { title: headerTitle, mode: controller.queries.sessionMode, width: width, frozen: displayPaused, identity: `${width}:${state.sessionId}` }) }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, minHeight: 0, overflowY: "hidden", children: [_jsxs(Box, { ref: bodyPrefix, flexDirection: "column", flexShrink: 0, children: [foreground && _jsxs(Text, { dimColor: true, children: [foreground.label, " \u00B7 Esc / Ctrl+C cancel"] }), _jsx(Frozen, { frozen: statusPaused, identity: state.sessionId ?? "", children: statusNotice && _jsx(Text, { dimColor: true, wrap: "truncate-end", children: safeText(state.status) }) }), state.lastFailure && _jsx(Text, { color: theme.colors.error, children: state.lastFailure })] }), state.screen === 'chat' && (peek === undefined ? _jsx(ChatViewport, { rows: visible, showHistoryHint: showHistoryHint, dialogOpen: dialogOpen, historyWindow: !!historyWindow, frozen: displayPaused, identity: `${width}:${state.sessionId}:${position}:${pageSize}`, boxRef: conversationBox })
+                                    : _jsx(PeekPanel, { source: peek.source, ...(peek.error === undefined ? {} : { error: peek.error }), rows: peekVisible, position: peekPosition, total: peekTotal, width: width, now: Date.now(), boxRef: peekBox }))] }), _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [notice && _jsx(Text, { dimColor: true, children: safeText(notice) }), composerIntent && _jsx(Text, { color: theme.colors.context, children: composerIntent.hint }), loop && _jsx(LoopStatus, { progress: loop }), peek === undefined && _jsxs(Box, { borderStyle: "round", borderColor: pending ? theme.colors.context : state.online ? theme.accent : theme.border, paddingX: 1, flexDirection: "column", flexShrink: 1, minHeight: 3, children: [_jsx(Box, { flexDirection: "column", flexShrink: 1, minHeight: 0, overflowY: "hidden", children: loopForm && loopRecord ? _jsx(LoopDialog, { record: loopRecord, enabled: state.online && controller.queries.foreground === undefined, onStart: run => startLoopFromForm(loopForm.name, run), onBack: () => { setLoopForm(undefined); setInput('/loop '); setDismissedLoopMenu(undefined); }, onClose: () => setLoopForm(undefined) }, loopForm.name) : queueOpen && !pending ? _jsx(QueueDialog, { queued: queued, rows: stdout.rows ?? 30, width: width, unavailable: !!state.controlError, enabled: !input && foreground === undefined && state.online, canSelect: () => !input && controller.queries.foreground === undefined && controller.state.online && !controller.state.pending.length, onRemove: id => operate(() => controller.actions.removeQueued(id)) }) : removal ? _jsx(RemovalDialog, { removal: removal, enabled: !input && foreground === undefined && state.online, canSelect: () => !input && controller.queries.foreground === undefined && controller.state.online, onCancel: () => setRemoval(undefined), onConfirm: () => operate(async () => { if (await controller.actions.removeTarget(removal))
+                                                    setRemoval(undefined); }) }) : models ? _jsx(ModelDialog, { models: models, rows: stdout.rows ?? 30, width: width, enabled: !input && foreground === undefined && state.online, canSelect: () => !input && controller.queries.foreground === undefined && controller.state.online, onChoose: (provider, model, effort) => operate(async () => { if (await controller.actions.selectModel(provider, model, effort))
+                                                    setModelPanel(undefined); }), onOpen: (provider, model) => setModelPanel({ catalog: models.catalog, provider, model }), onBack: () => setModelPanel({ catalog: models.catalog }), onClose: () => setModelPanel(undefined) }) : searchResults ? _jsx(SearchResultsDialog, { query: searchResults.query, items: searchResults.items, hasMore: searchResults.hasMore, width: width, enabled: !input && foreground === undefined, canSelect: () => !input && controller.queries.foreground === undefined, onOpen: sessionId => operate(() => openSearchSession(sessionId, searchResults.query)), onClose: () => setSearchPanel(undefined) }) : state.screen === 'workspaces' || state.screen === 'sessions' ? _jsx(PickerScreen, { title: state.screen === 'workspaces' ? 'Choose workspace' : state.showAllSessions ? 'Choose session · All workspaces' : 'Choose session', identity: `${state.screen}:${state.workspaceId ?? ''}`, choices: choices, width: pickerWidth, 
                                                 // A rollup of badges is read through the key beside it; spelled-out states need no key, and a
                                                 // terminal too narrow for the whole key gets the badges alone rather than half a legend.
-                                                legend: state.screen === 'workspaces' && rollupStyle === 'badges' && pickerWidth >= 40 ? ROLLUP_LEGEND : undefined, enabled: state.online && !state.busy && !input, canSelect: () => !controller.composer.draft && controller.state.online && !controller.state.busy }) : _jsxs(_Fragment, { children: [thoughtList && _jsx(ThoughtsDialog, { identity: `thoughts:${state.sessionId}`, options: thoughtOptions, empty: !thoughtEntries?.length && !liveThought, rows: stdout.rows ?? 30, enabled: !input && !state.busy, canSelect: () => !controller.composer.draft && !controller.state.busy }), state.screen === 'chat' && historyQuery !== undefined && _jsx(HistoryDialog, { identity: `history:${historyQuery}`, contentSearch: contentSearch, matches: historyMatches, query: historyQuery, messages: layout.messages, width: width, enabled: !input && !state.busy, canSelect: () => !controller.composer.draft && !controller.state.busy, onJump: seq => operate(() => jumpHistory(seq)), onClose: () => controller.setHistoryPanel(undefined) }), pending && _jsxs(Box, { flexShrink: 0, flexDirection: "column", children: [_jsx(Text, { bold: true, color: theme.colors.context, children: question ? `Question ${answered.length + 1}/${questions.length}${question.header ? ` · ${safeText(string(question.header))}` : ''}` : 'Approval required' }), _jsx(Text, { children: safeText(question ? string(question.question) : JSON.stringify(pending.request, null, 2)) }), question?.detail && _jsx(Text, { children: safeText(string(question.detail)) }), pending.event === 'approval/request' && _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [['Allow once', 'Deny', 'Stop turn'].map((label, index) => _jsxs(Text, { color: approvalIndex === index ? theme.accent : undefined, children: [approvalIndex === index ? '❯ ' : '  ', index + 1, ". ", label] }, label)), _jsx(Text, { dimColor: true, children: "\u2191 \u2193 / 1\u20133 select \u00B7 Enter confirm" })] }), options.length > 0 && _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [[...options, { label: 'Other answer — type below' }].map((option, index) => ({ option, index }))
-                                                                        .slice(optionStart, optionStart + optionPageSize).map(({ option, index }) => _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsxs(Text, { color: index === optionCursor ? theme.accent : undefined, wrap: "truncate-end", children: [index === optionCursor ? '❯ ' : '  ', index + 1, ". ", question?.multiSelect === true && index < options.length ? choiceState.selected.includes(string(option.label)) ? '[x] ' : '[ ] ' : '', safeText(string(option.label))] }), option.description && _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ['     ', safeText(string(option.description))] })] }, index)), _jsx(Text, { dimColor: true, children: choiceState.custom ? 'Type your answer below · Esc returns to options' : question?.multiSelect === true
+                                                legend: state.screen === 'workspaces' && rollupStyle === 'badges' && pickerWidth >= 40 ? ROLLUP_LEGEND : undefined, enabled: state.online && foreground === undefined && !input, canSelect: () => !input && controller.state.online && controller.queries.foreground === undefined }) : _jsxs(_Fragment, { children: [thoughtList && _jsx(ThoughtsDialog, { identity: `thoughts:${state.sessionId}`, options: thoughtOptions, empty: !thoughtEntries?.length && !liveThought, rows: stdout.rows ?? 30, enabled: !input && foreground === undefined, canSelect: () => !input && controller.queries.foreground === undefined }), promptsOpen && state.screen === 'chat' && _jsx(PromptsDialog, { identity: "prompts", prompts: controller.queries.prompts, error: controller.queries.promptsError, width: width, enabled: !input && foreground === undefined, canSelect: () => !input && controller.queries.foreground === undefined, onChoose: text => { setInput(text); openPrompts(false); }, onEdit: prompt => {
+                                                            setComposerIntent({
+                                                                hint: 'Editing saved prompt · Enter saves · Esc cancels',
+                                                                emptyNotice: 'Type the prompt text; Enter then saves it',
+                                                                commit: async (text) => {
+                                                                    const saved = await controller.actions.updatePrompt(prompt.id, text);
+                                                                    if (saved)
+                                                                        setNotice('Saved prompt updated');
+                                                                    return saved;
+                                                                },
+                                                            });
+                                                            setInput(prompt.text);
+                                                            openPrompts(false);
+                                                        }, onRemove: id => operate(async () => { if (await controller.actions.deletePrompt(id))
+                                                            setNotice('Deleted saved prompt'); }) }), state.screen === 'chat' && historyQuery !== undefined && _jsx(HistoryDialog, { identity: `history:${historyQuery}`, contentSearch: contentSearch, matches: historyMatches, query: historyQuery, messages: layout.messages, width: width, enabled: !input && foreground === undefined, canSelect: () => !input && controller.queries.foreground === undefined, onJump: seq => operate(() => jumpHistory(seq)), onClose: () => setHistoryPanel(undefined) }), pending && _jsxs(Box, { flexShrink: 0, flexDirection: "column", children: [_jsx(Text, { bold: true, color: theme.colors.context, children: question ? `Question ${answered.length + 1}/${questions.length}${question.header ? ` · ${safeText(question.header)}` : ''}` : 'Approval required' }), _jsx(Text, { children: safeText(question ? question.question : pending.kind === 'approval' ? pending.description : '') }), question?.detail && _jsx(Text, { children: safeText(question.detail) }), pending.kind === 'approval' && _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [['Allow once', 'Deny', 'Stop turn'].map((label, index) => _jsxs(Text, { color: approvalIndex === index ? theme.accent : undefined, children: [approvalIndex === index ? '❯ ' : '  ', index + 1, ". ", label] }, label)), _jsx(Text, { dimColor: true, children: "\u2191 \u2193 / 1\u20133 select \u00B7 Enter confirm" })] }), options.length > 0 && _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [[...options, { label: 'Other answer — type below' }].map((option, index) => ({ option, index }))
+                                                                        .slice(optionStart, optionStart + optionPageSize).map(({ option, index }) => _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsxs(Text, { color: index === optionCursor ? theme.accent : undefined, wrap: "truncate-end", children: [index === optionCursor ? '❯ ' : '  ', index + 1, ". ", question?.multiSelect === true && index < options.length ? choiceState.selected.includes(option.label) ? '[x] ' : '[ ] ' : '', safeText(option.label)] }), option.description && _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ['     ', safeText(option.description)] })] }, index)), _jsx(Text, { dimColor: true, children: choiceState.custom ? 'Type your answer below · Esc returns to options' : question?.multiSelect === true
                                                                             ? '↑ ↓ move · Space / 1–9 toggle · Enter confirm · Esc dismisses' : '↑ ↓ / 1–9 select · Enter confirm · Esc dismisses' })] }), _jsx(Text, { dimColor: true, children: question ? options.length > 0
                                                                     ? 'Choose "Other answer" to type · the draft is kept while this is open'
                                                                     : 'Esc dismisses the question · the draft is kept while this is open'
-                                                                    : 'Esc keeps this pending · the draft is kept while this is open' })] })] }) }), !queueOpen && !pending && state.screen === 'chat' && queued.length > 0 && _jsx(QueuedPreview, { queued: queued, width: width }), _jsx(TextInput, { value: input, onChange: setInput, onCursorChange: cursor => controller.setComposerCursor(cursor), onSubmit: () => { void submit(controller.composer.draft); }, reservedKeys: approvalKeysActive ? ['1', '2', '3'] : queueOpen && !pending ? ['d'] : questionKeysActive ? ['1', '2', '3', '4', '5', '6', '7', '8', '9', ...(question?.multiSelect === true ? [' '] : [])] : !removal && !models && !searchResults && (state.screen === 'workspaces' || state.screen === 'sessions') ? ['d'] : undefined, width: draftWidth, maxRows: composerRows, promptColor: answerPending ? theme.colors.muted : theme.accent, focus: state.online && !state.busy && !copyMode && !answerPending, placeholder: state.screen === 'path' ? 'Absolute directory path on host' : 'Message, @host-file, or /help' }), referenceOpen && _jsx(ReferenceMenu, { matches: matches, index: referenceIndex })] }), commandSuggestions && _jsx(Text, { dimColor: true, children: commandSuggestions.join('  ') }), help && _jsx(HelpPanel, { page: currentHelpPage, pages: helpPages, pageSize: helpPageSize }), costExpanded && _jsx(CostPanel, { controller: controller }), _jsx(Frozen, { frozen: statusFrozen, identity: `${width}:${state.sessionId}:${statusExpanded}:${statusScroll}:${pauseReason ?? ''}`, children: _jsx(StatusBar, { controller: controller, width: width, expanded: statusExpanded, scroll: statusScroll, pageSize: statusViewRows, onScroll: setStatusScroll, onOverflow: setStatusOverflow, onRows: setStatusBarRows, pauseReason: pauseReason, revision: state.version }) })] })] }) }) }) });
+                                                                    : 'Esc keeps this pending · the draft is kept while this is open' })] })] }) }), !queueOpen && !pending && state.screen === 'chat' && queued.length > 0 && _jsx(QueuedPreview, { queued: queued, width: width }), _jsx(TextInput, { value: input, onChange: setInput, onCursorChange: setCursor, onSubmit: () => { void submit(input); }, reservedKeys: approvalKeysActive ? ['1', '2', '3'] : questionKeysActive ? ['1', '2', '3', '4', '5', '6', '7', '8', '9', ...(question?.multiSelect === true ? [' '] : [])] : !removal && !models && !searchResults && (state.screen === 'workspaces' || state.screen === 'sessions') ? ['d'] : surfaceReservedKeys.length ? surfaceReservedKeys : undefined, width: draftWidth, maxRows: composerRows, promptColor: answerPending ? theme.colors.muted : theme.accent, focus: state.online && !copyMode && !answerPending && !loopForm, placeholder: state.screen === 'path' ? 'Absolute directory path on host' : 'Message, @host-file, or /help' }), referenceOpen && _jsx(ReferenceMenu, { matches: matches, index: referenceIndex }), loopMenuOpen && _jsx(LoopMenu, { records: loopCandidates, index: loopMenuCursor })] }), commandSuggestions && _jsx(Text, { dimColor: true, children: commandSuggestions.join('  ') }), commandHint && _jsxs(Text, { dimColor: true, children: [_jsxs(Text, { color: theme.accent, children: [commandHint.command, commandHint.usage === undefined ? '' : ` ${commandHint.usage}`] }), " \u00B7 ", commandHint.description] }), help && _jsx(HelpPanel, { page: currentHelpPage, pages: helpPages, pageSize: helpPageSize }), costExpanded && _jsx(CostPanel, { source: costSource }), _jsx(Frozen, { frozen: statusFrozen, identity: `${width}:${state.sessionId}:${statusExpanded}:${statusScroll}:${pauseReason ?? ''}`, children: _jsx(StatusBar, { source: statusSource, width: width, expanded: statusExpanded, scroll: statusScroll, pageSize: statusViewRows, onScroll: setStatusScroll, onOverflow: setStatusOverflow, onRows: setStatusBarRows, pauseReason: pauseReason, revision: state.version }) })] })] }) }) }) });
 }