@agi-fans/dsh-tui 0.20.0 → 0.22.0

package/lib/views/prompt-selector.js

@@ -6,8 +6,9 @@ import { rankSearchResults } from "../input/fuzzy-search.js";
 import { renderEditor, renderFramedBlock } from "../chrome/box.js";
 import { renderMarkdown } from "../chrome/markdown.js";
 import { BOX, SYMBOL } from "../chrome/theme.js";
-import { padToWidth, truncateToWidth, visibleWidth, wrapText } from "../chrome/width.js";
+import { padToWidth, sliceCells, stripAnsi, truncateToWidth, visibleWidth, wrapTextStable } from "../chrome/width.js";
 import { formatHotkeyKeys, formatOverlayHint } from "./hotkey-format.js";
+import { renderListRow } from "./list-view.js";
 /** Maximum option rows retained in the prompt overlay before it windows. */
 export const PROMPT_SELECTOR_MAX_VISIBLE = 10;
 // Every key the prompt handlers accept, covering the inline card, the full-screen
@@ -52,7 +53,7 @@ export function maskPromptSecret(input) {
 }
 /** Options matching the current full-screen selector query. */
 export function filteredPromptOptions(request, query, collapsed) {
-    if (request.presentation === 'fullscreen-tree')
+    if (request.presentation === 'tree')
         return promptTreeRows(request, collapsed, query).map(row => row.option);
     const options = request.options ?? [];
     if (request.filterable !== true)
@@ -80,11 +81,17 @@ function treePreview(option, theme, width) {
         cache = new Map();
         previewCache.set(option, cache);
     }
-    const key = `${width}:${theme.name}:${theme.colors}:${theme.trueColor}`;
+    const key = `${width}:${theme.key}`;
     const cached = cache.get(key);
     if (cached !== undefined)
         return cached;
-    const lines = renderMarkdown(option.preview ?? option.label, theme, width);
+    const source = option.preview ?? option.label;
+    // One default for one field: plain text unless the caller says markdown. The
+    // tree page used to render markdown unconditionally while the card rendered
+    // text, so the same `preview` meant two things depending on the surface.
+    const lines = option.previewFormat === 'markdown'
+        ? renderMarkdown(source, theme, width)
+        : wrapTextStable(source, width);
     if (cache.size >= 4)
         cache.clear();
     cache.set(key, lines);
@@ -93,7 +100,7 @@ function treePreview(option, theme, width) {
 function treePageLayout(request, width, height) {
     const actions = (request.actions ?? []).map(item => `${item.key} ${item.label}`).join(' · ');
     const hint = `↑↓ · ←→ fold${width >= 90 ? ' · type search' : ''}${actions === '' ? '' : ` · ${actions}`}${width >= 90 ? ' · Ctrl+↑↓ preview' : ''}`;
-    const hints = wrapText(hint, width - 4).slice(0, Math.max(1, Math.floor((height - 6) / 2)));
+    const hints = wrapTextStable(hint, width - 4).slice(0, Math.max(1, Math.floor((height - 6) / 2)));
     const middle = height - 6 - hints.length;
     const listHeight = width >= 90 ? middle : Math.max(1, Math.floor((middle - 1) / 2));
     const previewHeight = width >= 90 ? middle : middle - listHeight - 1;
@@ -121,11 +128,31 @@ export function renderPromptTreePage(state, theme, width, height, input, inputCu
         const row = rows[at];
         const marker = at === selected ? theme.fg('accent', SYMBOL.cursor + ' ') : '  ';
         const fold = row.expandable ? state.collapsed?.has(row.option.value ?? row.option.label) && input === '' ? '▸ ' : '▾ ' : '  ';
-        const badge = row.option.badge?.label === undefined ? '' : `[${row.option.badge.label}] `;
-        const text = badge + row.option.label;
         const prefixLimit = Math.max(1, Math.floor(listWidth / 3));
         const prefix = row.prefix.length <= prefixLimit ? row.prefix : '…' + row.prefix.slice(-(prefixLimit - 1));
-        list.push(fit(marker + theme.fg('dim', prefix + fold) + (at === selected ? theme.fg('accent', text) : text), listWidth));
+        const head = marker + theme.fg('dim', prefix + fold);
+        /**
+         * A row says everything the option knows.
+         *
+         * The card mode already drew the badge in its tone and the description in a
+         * column; this page drew neither, so a tree opened full screen lost the
+         * agent's phase colour and its elapsed time — the two things that tell two
+         * similar-looking nodes apart.
+         */
+        const badge = row.option.badge === undefined
+            ? ''
+            : theme.fg(row.option.badge.tone ?? 'muted', `[${row.option.badge.label}] `);
+        const label = badge + row.option.label;
+        // A heading is focusable but not an answer, so it never takes the cursor colour.
+        const text = row.option.disabled === true
+            ? theme.fg('muted', label)
+            : at === selected ? theme.fg('accent', label) : theme.fg('text', label);
+        const used = visibleWidth(head) + visibleWidth(label);
+        const room = listWidth - used - 2;
+        const description = row.option.description === undefined || row.option.description === '' || room < 8
+            ? ''
+            : theme.fg('dim', '  ' + truncateToWidth(row.option.description, room));
+        list.push(fit(head + text + description, listWidth));
     }
     if (rows.length === 0)
         list.push(fit(theme.fg('dim', state.request.emptyText ?? 'No matching conversation turns.'), listWidth));
@@ -175,26 +202,43 @@ export function movePromptTree(state, direction, query) {
 }
 /** Start on a matching node instead of a context-only ancestor. */
 export function searchPromptSelection(state, query) {
-    const selected = state.request.presentation === 'fullscreen-tree'
+    const selected = state.request.presentation === 'tree'
         ? Math.max(0, promptTreeRows(state.request, state.collapsed, query).findIndex(row => row.matched)) : 0;
     return { ...state, selected, previewScroll: 0 };
 }
-/** Visible option window centered around the selected row. */
 export function promptSelectorVisibleRange(count, selected, maxVisible = PROMPT_SELECTOR_MAX_VISIBLE) {
     const max = Math.max(1, maxVisible);
     const index = Math.max(0, Math.min(selected, Math.max(0, count - 1)));
     const start = Math.max(0, Math.min(index - Math.floor(max / 2), Math.max(0, count - max)));
     return { start, end: Math.min(count, start + max) };
 }
-function optionRow(option, index, state, theme, width) {
-    const active = index === state.selected;
-    const cursor = active ? theme.fg('accent', SYMBOL.cursor + ' ') : '  ';
+function optionRow(option, index, state, theme, width, 
+/**
+ * The option's index in the request, when the visible row is a filtered one.
+ *
+ * Checked state is keyed by the request's order, not the filtered list's: a
+ * query that hides the row above must not move every checkbox below it.
+ */
+identity = index) {
+    // The multi-select marker is part of the label so the shared row keeps one
+    // cursor cell and one description gap for every prompt, checked or not.
+    if (option.disabled === true) {
+        // Same reason as the tree: focusable, dimmed, and not a value.
+        const row = { label: option.label, ...(option.description === undefined ? {} : { description: option.description }), secondary: true };
+        return renderListRow(row, theme, Math.max(1, width), { selected: index === state.selected });
+    }
+    const checked = state.checked.has(identity);
     const marker = state.request.multiSelect === true
-        ? theme.fg(state.checked.has(index) ? 'success' : 'dim', state.checked.has(index) ? '[x] ' : '[ ] ')
+        ? theme.fg(checked ? 'success' : 'dim', checked ? '[x] ' : '[ ] ')
         : '';
-    const label = active ? theme.bold(theme.fg('accent', option.label)) : option.label;
-    const description = option.description === undefined ? '' : theme.fg('dim', ' — ' + option.description);
-    return truncateToWidth(cursor + marker + label + description, Math.max(1, width));
+    const row = {
+        label: marker + option.label,
+        ...(option.description === undefined ? {} : { description: option.description }),
+        // A badge is part of what the row says — a session's status, a command's
+        // kind. The paged list drew it, so the card must draw it too.
+        ...(option.badge?.label === undefined ? {} : { value: theme.fg(option.badge.tone ?? 'muted', option.badge.label) }),
+    };
+    return renderListRow(row, theme, Math.max(1, width), { selected: index === state.selected });
 }
 function fit(text, width) {
     if (width <= 0)
@@ -222,100 +266,51 @@ function pageDivider(theme, width) {
 function pageBottom(theme, width) {
     return pageBorder(theme, BOX.bottomLeft + BOX.horizontal.repeat(Math.max(0, width - 2)) + BOX.bottomRight);
 }
-function optionBadge(option, theme) {
-    const badge = option.badge;
-    if (badge === undefined)
-        return '';
-    const icon = badge.tone === 'success'
-        ? SYMBOL.success
-        : badge.tone === 'error'
-            ? SYMBOL.error
-            : badge.tone === 'warning'
-                ? SYMBOL.warning
-                : SYMBOL.done;
-    return theme.fg(badge.tone === 'muted' ? 'dim' : badge.tone, `${icon} ${badge.label}`);
-}
-/** Render an OMP-style full-height searchable selector with one outer frame. */
-export function renderPromptSelectorPage(state, theme, width, height, input, inputCursor, appName) {
-    const pageHeight = Math.max(1, height);
-    if (pageHeight < 10 || width < 16) {
-        return renderPromptSelector(state, theme, width, input, inputCursor, Math.max(1, pageHeight - 8));
-    }
-    const options = filteredPromptOptions(state.request, input);
-    const selected = Math.max(0, Math.min(state.selected, Math.max(0, options.length - 1)));
-    const compact = state.request.optionLayout === 'compact';
-    const actionHints = (state.request.actions ?? []).map(action => `${action.key} ${action.label}`).join(' · ');
-    const hints = wrapText(formatOverlayHint([HOTKEY_TEXT, HOTKEY_NAVIGATE, HOTKEY_SELECT, HOTKEY_CANCEL])
-        + (actionHints === '' ? '' : ' · ' + actionHints), width - 4).slice(0, Math.max(1, Math.floor((height - 6) / 2)));
-    const fixedRows = (compact ? 9 : 11) + hints.length - 1;
-    const visibleCount = compact
-        ? Math.max(1, pageHeight - fixedRows)
-        : Math.max(1, Math.floor((pageHeight - fixedRows) / 4));
-    const { start, end } = promptSelectorVisibleRange(options.length, selected, visibleCount);
-    const detail = state.request.detail === undefined || state.request.detail === ''
-        ? ''
-        : ' ' + theme.fg('muted', `(${state.request.detail})`);
-    const heading = theme.bold(state.request.title) + detail;
-    const lines = compact
-        ? [
-            pageTop(theme, width, appName),
-            pageRow(theme, ' ' + heading, width),
-            pageDivider(theme, width),
-        ]
-        : [
-            pageTop(theme, width, appName),
-            pageRow(theme, '', width),
-            pageRow(theme, ' ' + heading, width),
-            pageRow(theme, '', width),
-            pageDivider(theme, width),
-        ];
-    const searchPrefix = theme.fg('dim', '> ');
-    const searchText = truncateToWidth(input, Math.max(1, width - 8));
-    const searchRow = lines.length;
-    lines.push(pageRow(theme, searchPrefix + searchText, width), pageRow(theme, '', width));
-    if (options.length === 0) {
-        // The generic line is a fallback only: this selector also serves approvals
-        // and questions, whose empty states have nothing to do with sessions.
-        const fallback = state.request.emptyText ?? 'No matching options.';
-        const empty = input === '' ? fallback : `No match for “${input}”.`;
-        lines.push(pageRow(theme, '  ' + theme.fg('muted', empty), width));
-    }
-    else {
-        for (let index = start; index < end; index += 1) {
-            const option = options[index];
-            if (option === undefined)
-                continue;
-            if (compact) {
-                lines.push(pageRow(theme, optionRow(option, index, { ...state, selected }, theme, Math.max(1, width - 6)), width));
-                continue;
-            }
-            const active = index === selected;
-            const marker = active ? theme.fg('accent', SYMBOL.cursor + ' ') : '  ';
-            const label = active ? theme.bold(option.label) : option.label;
-            lines.push(pageRow(theme, marker + label, width));
-            lines.push(pageRow(theme, '  ' + theme.fg('dim', option.preview ?? ''), width));
-            const badge = optionBadge(option, theme);
-            const description = option.description === undefined ? '' : theme.fg('dim', option.description);
-            const separator = description !== '' && badge !== '' ? theme.fg('dim', ' · ') : '';
-            lines.push(pageRow(theme, '  ' + description + separator + badge, width), pageRow(theme, '', width));
+const documentCache = new WeakMap();
+/**
+ * Case-insensitive find over rows the reader can already see.
+ *
+ * A rendered page has no source model to search, so the rows are the document.
+ * Offsets are display cells, not string indexes, so CJK and emoji highlights land
+ * on the glyphs the reader pointed at rather than shearing them.
+ */
+export function findInRows(rows, query) {
+    const needle = query.trim().toLowerCase();
+    if (needle === '')
+        return [];
+    const matches = [];
+    for (const [row, line] of rows.entries()) {
+        const plain = stripAnsi(line).toLowerCase();
+        for (let at = plain.indexOf(needle); at >= 0; at = plain.indexOf(needle, at + needle.length)) {
+            matches.push({ row, start: visibleWidth(stripAnsi(line).slice(0, at)), width: visibleWidth(query.trim()) });
         }
     }
-    const footerRows = 3 + hints.length;
-    const targetBeforeFooter = Math.max(0, pageHeight - footerRows);
-    if (lines.length > targetBeforeFooter)
-        lines.length = targetBeforeFooter;
-    while (lines.length < targetBeforeFooter)
-        lines.push(pageRow(theme, '', width));
-    const position = options.length === 0 ? '' : `${selected + 1}/${options.length}`;
-    lines.push(pageRow(theme, theme.fg('dim', position.trim()), width), ...hints.map(hint => pageRow(theme, theme.fg('dim', hint), width)), pageRow(theme, '', width), pageBottom(theme, width));
-    const cursorColumn = Math.min(Math.max(1, width - 3), 4 + visibleWidth(input.slice(0, inputCursor)));
-    return {
-        lines,
-        cursor: { row: searchRow, column: cursorColumn },
-    };
+    return matches;
 }
-const documentCache = new WeakMap();
-function documentRows(request, theme, width) {
+/** Invert the matched cells of one styled row. */
+export function highlightMatches(line, spans, theme) {
+    if (spans.length === 0)
+        return line;
+    const plain = stripAnsi(line);
+    const total = visibleWidth(plain);
+    const ordered = [...spans].sort((left, right) => left.start - right.start);
+    let out = '';
+    let at = 0;
+    for (const span of ordered) {
+        const start = Math.max(at, Math.min(span.start, total));
+        const end = Math.min(total, Math.max(start, span.start + span.width));
+        if (start > at)
+            out += sliceCells(line, at, start - at);
+        if (end > start)
+            out += theme.inverse(sliceCells(line, start, end - start));
+        at = end;
+    }
+    if (at < total)
+        out += sliceCells(line, at, total - at);
+    return out;
+}
+/** The rows a rendered document shows, shared with the find that searches them. */
+export function documentRows(request, theme, width) {
     let cache = documentCache.get(request);
     if (cache === undefined) {
         cache = new Map();
@@ -331,6 +326,21 @@ function documentRows(request, theme, width) {
     cache.set(key, lines);
     return lines;
 }
+/**
+ * Does this prompt need the whole screen?
+ *
+ * Only a tree does. Length is not the question — a long list is still a list, and
+ * the card windows its rows, filters by typing, and draws the selected row's
+ * preview — so counting rows was the wrong variable. Choosing is a different act
+ * from reading, and a choice belongs beside the conversation it interrupted.
+ */
+export function promptNeedsPage(request) {
+    // A list is a choice, and a choice belongs beside the conversation whatever its
+    // length: the card windows its rows, filters by typing, and shows the selected
+    // row's preview. Counting rows was the wrong variable — a long list is still a
+    // list. Only a tree has structure the card cannot show.
+    return request.presentation === 'tree';
+}
 /** Render a bounded, scrollable Markdown document with fixed actions. */
 function documentActionRows(state, theme, width, pageHeight) {
     const actionRows = [];
@@ -366,7 +376,7 @@ export function renderImagePreviewPage(state, theme, width, height, appName, pro
         pageRow(theme, theme.fg('muted', image.description), width), pageDivider(theme, width)];
     const top = lines.length;
     const canOpen = state.request.options?.some(option => option.value === 'open') === true;
-    const fallback = protocol === undefined ? wrapText('Inline images are unavailable in this terminal. '
+    const fallback = protocol === undefined ? wrapTextStable('Inline images are unavailable in this terminal. '
         + (canOpen ? 'Use Open to view the original.' : 'This attachment has no local original to open.'), width - 8) : [];
     for (let at = 0; at < bodyRows; at++)
         lines.push(pageRow(theme, '  ' + (fallback[at] ?? ''), width));
@@ -384,10 +394,11 @@ export function renderPlanReviewPage(state, theme, width, height, input, inputCu
     }
     const feedback = state.feedback === true;
     const actionRows = documentActionRows(state, theme, width, pageHeight);
-    const readerInput = source !== undefined && state.documentInput !== undefined;
-    let readerHints = source === undefined ? [] : wrapText(readerInput ? 'Enter apply · Esc cancel'
-        : 'W wrap · Alt+←→ pan · ↑↓/PgUp/PgDn scroll · ' + (state.request.documentTail === true ? 'Home start · End follow' : 'Home/End edges') + ' · / find · Ctrl+N/P match · G line' + (source.diff ? ' · [/] hunk' : '')
-            + ' · Tab/←→ actions · Enter activate · ' + (state.request.actions ?? []).map(action => `${action.key.toUpperCase()} ${action.label}`).join(' · ') + ' · Esc back', width - 4);
+    const readerInput = state.documentInput !== undefined;
+    const customHints = (state.request.actions ?? []).map(action => `${action.key.toUpperCase()} ${action.label}`);
+    let readerHints = source === undefined ? [] : wrapTextStable(readerInput ? 'Enter apply · Esc cancel'
+        : (state.request.interrupt === undefined ? '' : 'Ctrl+C interrupt · ') + 'W wrap · Alt+←→ pan · ↑↓/PgUp/PgDn scroll · ' + (state.request.documentTail === true ? 'Home start · End follow' : 'Home/End edges') + ' · / find · Ctrl+N/P match · G line' + (source.diff ? ' · [/] hunk' : '')
+            + ' · ' + ['Tab/←→ actions', 'Enter activate', ...customHints, 'Esc back'].join(' · '), width - 4);
     const maxHints = Math.max(1, Math.min(4, pageHeight - 8 - actionRows.length));
     if (readerHints.length > maxHints)
         readerHints = [...readerHints.slice(0, maxHints - 1), 'Tab actions · Enter · Esc back'];
@@ -408,6 +419,7 @@ export function renderPlanReviewPage(state, theme, width, height, input, inputCu
     const visible = document.slice(start, start + bodyRows);
     const query = state.documentQuery ?? '';
     const matches = source === undefined ? [] : documentMatches(source, query);
+    const textMatches = source === undefined ? findInRows(document, query) : [];
     const matching = new Set(matches);
     if (layout !== undefined)
         for (let at = 0; at < visible.length; at++) {
@@ -416,6 +428,15 @@ export function renderPlanReviewPage(state, theme, width, height, input, inputCu
                 visible[at] = theme.inverse(layout.gutterWidth === 0 ? row : '›' + row.slice(1));
             }
         }
+    if (textMatches.length > 0) {
+        // Paint the hits themselves, so the reader sees the word, not just the row.
+        for (const match of textMatches) {
+            const at = match.row - start;
+            if (at < 0 || at >= visible.length)
+                continue;
+            visible[at] = highlightMatches(visible[at] ?? '', [match], theme);
+        }
+    }
     while (visible.length < bodyRows)
         visible.push('');
     const subject = state.request.presentation === 'document' ? 'document' : 'plan';
@@ -444,7 +465,7 @@ export function renderPlanReviewPage(state, theme, width, height, input, inputCu
         const inputRow = lines.length;
         lines.push(pageRow(theme, ' ' + prefix + value, width));
         // "empty Enter keeps planning" is prose, but it names the key through the catalog.
-        lines.push(pageRow(theme, theme.fg('dim', `[${formatOverlayHint([HOTKEY_SUBMIT, HOTKEY_BACK, HOTKEY_CANCEL_CTRL])} · empty ${formatHotkeyKeys(HOTKEY_SUBMIT)} keeps planning]`), width));
+        lines.push(pageRow(theme, theme.fg('dim', `[${formatOverlayHint([HOTKEY_SUBMIT, HOTKEY_BACK, HOTKEY_CANCEL_CTRL])} · Ctrl+X editor · empty ${formatHotkeyKeys(HOTKEY_SUBMIT)} keeps planning]`), width));
         lines.push(pageBottom(theme, width));
         cursor = {
             row: inputRow,
@@ -452,6 +473,19 @@ export function renderPlanReviewPage(state, theme, width, height, input, inputCu
         };
     }
     else {
+        if (source === undefined && (readerInput || query !== '')) {
+            // A rendered page has no line numbers to cite, so the status is the find
+            // itself: the query, how many hits it has, and where the reader is in them.
+            const index = textMatches.findIndex(match => match.row === state.documentTarget);
+            const hits = textMatches.length === 0
+                ? 'No match'
+                : `${index < 0 ? 1 : index + 1}/${textMatches.length} matching rows`;
+            const label = state.documentInput === 'search' ? 'Find: ' : '';
+            const value = input.replace(/\r?\n/gu, ' ');
+            const status = readerInput ? label + value : `${hits} · “${query}”`;
+            cursor = { row: lines.length, column: Math.min(width - 3, 2 + visibleWidth(label + value.slice(0, inputCursor))) };
+            lines.push(pageRow(theme, theme.fg('muted', status), width));
+        }
         if (source !== undefined) {
             const row = layout?.sourceRows[start] ?? 0;
             const model = documentModel(source);
@@ -471,8 +505,13 @@ export function renderPlanReviewPage(state, theme, width, height, input, inputCu
         lines.push(...actionRows.map(row => pageRow(theme, ' ' + row, width)));
         const shortcuts = state.request.presentation === 'document' && state.request.actions?.length
             ? 'Tab/←→ select · Enter activate · ' + state.request.actions.map(action => `${action.key.toUpperCase()} ${action.label}`).join(' · ') + ' · Esc back'
-            : formatOverlayHint([HOTKEY_PAGE, HOTKEY_NAVIGATE_TAB, HOTKEY_SELECT, HOTKEY_CANCEL]);
-        lines.push(...(source === undefined ? [`[${shortcuts}]`] : readerHints).map(hint => pageRow(theme, theme.fg('dim', hint), width)));
+            : formatOverlayHint([HOTKEY_PAGE, HOTKEY_NAVIGATE_TAB, HOTKEY_SELECT, HOTKEY_CANCEL])
+                + (state.request.presentation === 'plan-review' ? ' · Ctrl+X editor' : '');
+        // A page long enough to need scrolling is a page someone will want to search.
+        const pageHint = source === undefined && state.request.presentation === 'document'
+            ? `[${shortcuts} · / find · Ctrl+N/P match]`
+            : `[${shortcuts}]`;
+        lines.push(...(source === undefined ? [pageHint] : readerHints).map(hint => pageRow(theme, theme.fg('dim', hint), width)));
         lines.push(pageBottom(theme, width));
     }
     return {
@@ -484,9 +523,16 @@ export function renderPlanReviewPage(state, theme, width, height, input, inputCu
         cursorVisible: feedback || readerInput,
     };
 }
+/** Rows of the selected option's preview the card shows before it truncates. */
+const CARD_PREVIEW_LINES = 3;
+/** The reader's query as it reads in a sentence, quoted so blanks are visible. */
+function quote(text) {
+    return `“${text}”`;
+}
 /** Render the prompt card and its answer editor as one bottom-of-screen overlay. */
 export function renderPromptSelector(state, theme, width, input, inputCursor, maxVisible = PROMPT_SELECTOR_MAX_VISIBLE) {
     const options = filteredPromptOptions(state.request, input, state.collapsed);
+    const filtering = input !== '';
     const contentWidth = Math.max(1, width - 4);
     const body = [state.request.question];
     if (state.request.wait !== undefined) {
@@ -499,24 +545,71 @@ export function renderPromptSelector(state, theme, width, input, inputCursor, ma
         body.push('', state.request.detail);
     if (options.length > 0) {
         const { start, end } = promptSelectorVisibleRange(options.length, state.selected, maxVisible);
-        body.push('', ...options.slice(start, end).map((option, offset) => optionRow(option, start + offset, state, theme, contentWidth)));
+        body.push('', ...options.slice(start, end).map((option, offset) => optionRow(option, start + offset, state, theme, contentWidth, (state.request.options ?? []).indexOf(option))));
         if (options.length > maxVisible) {
             body.push(theme.fg('dim', `  ${state.selected + 1}/${options.length} · scroll for more`));
         }
+        // The paged list draws the selected row's preview beside the rows; the card
+        // gives it three lines underneath, so demoting a previewed list keeps the
+        // content it was being browsed for.
+        const preview = options[state.selected]?.preview;
+        if (preview !== undefined && preview !== '') {
+            const wrapped = state.request.options?.[state.selected]?.previewFormat === 'markdown'
+                ? renderMarkdown(preview, theme, contentWidth)
+                : wrapTextStable(preview, contentWidth);
+            body.push('', ...wrapped.slice(0, CARD_PREVIEW_LINES).map(line => theme.fg('dim', '  ' + line)));
+            if (wrapped.length > CARD_PREVIEW_LINES) {
+                body.push(theme.fg('dim', `  … ${wrapped.length - CARD_PREVIEW_LINES} more lines`));
+            }
+        }
+    }
+    else {
+        // A filter that matches nothing has to say so. An empty frame reads as a
+        // broken list, and the reader cannot tell a typo from an empty transcript.
+        body.push('', theme.fg('dim', `  ${state.request.emptyText
+            ?? (filtering ? `No match for ${quote(input)}.` : 'Nothing to choose.')}`));
     }
+    /**
+     * The query, drawn where the reader types it.
+     *
+     * Every filterable card filters on the composer text, and the paged list used
+     * to print it — so demoting a list to a card made the query invisible: the rows
+     * narrowed while the reader's own words appeared nowhere, and a card with no
+     * hits looked broken rather than empty.
+     */
+    const filterRow = state.request.filterable === true && state.request.presentation !== 'progress'
+        ? body.length
+        : undefined;
+    if (filterRow !== undefined) {
+        // The query and what it kept belong on one line: the reader typed one thing
+        // and the list answered with a count.
+        const count = filtering ? theme.fg('dim', ` · ${options.length === 0 ? 'no match' : `${state.selected + 1}/${options.length}`}`) : '';
+        body.push('', input === ''
+            ? theme.fg('muted', '  ⌕ type to filter') + count
+            : theme.fg('text', '  ⌕ ') + input + count);
+    }
+    // A request that has options but no match has nothing to submit: advertising
+    // `enter select` there promises a key the handler swallows.
+    const exhausted = options.length === 0 && (state.request.options?.length ?? 0) > 0;
     const submit = state.request.submitLabel?.trim()
         || (options.length === 0 ? 'answer' : state.request.multiSelect === true ? 'confirm' : 'select');
     // The request supplies the submit verb; the key itself comes from the catalog.
     const select = `${formatHotkeyKeys(HOTKEY_SELECT)} ${submit}`;
-    const navigation = options.length === 0
-        ? `${select} · ${formatOverlayHint([HOTKEY_CANCEL])}`
-        : state.request.multiSelect === true
-            ? `${formatOverlayHint([HOTKEY_NAVIGATE])} · ${formatOverlayHint([HOTKEY_TOGGLE])} · ${select} · ${formatOverlayHint([HOTKEY_CANCEL])}`
-            : `${formatOverlayHint([HOTKEY_NAVIGATE])} · ${select} · ${formatOverlayHint([HOTKEY_CANCEL])}`;
+    const navigation = state.request.presentation === 'progress'
+        ? formatOverlayHint([HOTKEY_CANCEL, HOTKEY_CANCEL_CTRL], 'catalog')
+        : exhausted
+            ? formatOverlayHint([HOTKEY_CANCEL])
+            : options.length === 0
+                ? `${select} · ${formatOverlayHint([HOTKEY_CANCEL])}`
+                : state.request.multiSelect === true
+                    ? `${formatOverlayHint([HOTKEY_NAVIGATE])} · ${formatOverlayHint([HOTKEY_TOGGLE])} · ${select} · ${formatOverlayHint([HOTKEY_CANCEL])}`
+                    : `${formatOverlayHint([HOTKEY_NAVIGATE])} · ${select} · ${formatOverlayHint([HOTKEY_CANCEL])}`;
     const dismiss = state.request.dismissLabel;
+    const actionHints = (state.request.actions ?? []).map(action => `${action.key} ${action.label}`);
     const hints = [
         dismiss === undefined ? navigation : navigation.replace(formatOverlayHint([HOTKEY_CANCEL]), `${formatHotkeyKeys(HOTKEY_CANCEL)} ${dismiss.toLowerCase()}`),
         ...(state.request.skippable === true ? [formatOverlayHint([HOTKEY_SKIP])] : []),
+        ...actionHints,
     ];
     body.push('', theme.fg('dim', hints.join(' · ')));
     const card = renderFramedBlock({
@@ -526,17 +619,51 @@ export function renderPromptSelector(state, theme, width, input, inputCursor, ma
         width,
         applyBg: false,
     }, theme);
-    if (state.request.allowCustom === false) {
+    if (state.request.allowCustom === false || state.request.presentation === 'progress') {
+        // With a filter line the caret belongs at its end, where the next character
+        // will land; without one it stays on body padding, because the selector glyph
+        // owns focus while no text editor is present.
         return {
             lines: card,
-            // Keep the terminal caret on body padding; the visible selector glyph
-            // owns focus while no text editor is present.
-            cursor: { row: Math.min(1, Math.max(0, card.length - 1)), column: 1 },
-            cursorVisible: false,
+            cursor: filterRow === undefined
+                ? { row: Math.min(1, Math.max(0, card.length - 1)), column: 1 }
+                : { row: filterRow + 2, column: 4 + visibleWidth(input) },
+            cursorVisible: filterRow !== undefined,
         };
     }
     const secret = state.request.secret === true;
     const displayInput = secret ? maskPromptSecret(input) : input;
+    /**
+     * A question that is only text is the composer, not a card above it.
+     *
+     * This path used to draw a framed question and then a second framed editor
+     * under it: two borders that each looked like the place to type, two hint
+     * lines saying what Enter does, and a label reading `answer` that named
+     * nothing the reader had not already been told. A modal question is an
+     * interaction state the composer can carry itself — label in the top rule,
+     * question as the placeholder, keys in the bottom rule — which is also how pi
+     * mounts a dialog, in the editor's own slot.
+     *
+     * A prompt that also offers options keeps the card: a list plus a text field
+     * genuinely is two things. So does one that carries supporting copy, and one
+     * counting down a deadline — both need rows the bottom rule cannot give them.
+     */
+    const detail = state.request.detail ?? '';
+    if (options.length === 0 && detail === '' && state.request.wait === undefined) {
+        const label = secret ? `${state.request.title} · hidden` : state.request.title;
+        const editor = renderEditor({
+            width,
+            input: displayInput,
+            inputCursor,
+            status: ' ' + theme.fg('accent', label) + ' ',
+            ...(state.request.question === '' ? {} : { inlineHint: state.request.question }),
+            // The keys live on the bottom rule so the frame says how to answer without
+            // spending a row on it.
+            ...(hints.length === 0 ? {} : { note: hints.join(' · ') }),
+            border: 'accent',
+        }, theme);
+        return { lines: editor.lines, cursor: editor.cursor, cursorVisible: true };
+    }
     const editor = renderEditor({
         width,
         input: displayInput,
@@ -559,32 +686,41 @@ export function movePromptSelection(state, next, count = state.request.options?.
     return selected === state.selected ? state : { ...state, selected, previewScroll: 0 };
 }
 /** Toggle the active row for a multi-select prompt. */
-export function togglePromptSelection(state) {
-    if (state.request.multiSelect !== true || state.request.options?.[state.selected] === undefined)
+export function togglePromptSelection(state, query = '') {
+    const option = filteredPromptOptions(state.request, query)[state.selected];
+    if (state.request.multiSelect !== true || option === undefined)
+        return state;
+    const index = state.request.options?.indexOf(option) ?? -1;
+    if (index < 0)
         return state;
     const checked = new Set(state.checked);
-    if (checked.has(state.selected))
-        checked.delete(state.selected);
+    if (checked.has(index))
+        checked.delete(index);
     else
-        checked.add(state.selected);
+        checked.add(index);
     return { ...state, checked };
 }
 /** Resolve the selected labels in stable option order. */
 export function selectedPromptAnswer(state) {
-    const options = state.request.presentation === 'fullscreen-tree'
+    const options = state.request.presentation === 'tree'
         ? filteredPromptOptions(state.request, '', state.collapsed) : state.request.options ?? [];
     if (options.length === 0)
         return null;
     if (state.request.multiSelect !== true) {
         const option = options[state.selected];
+        if (option?.disabled === true)
+            return null;
         return option?.value ?? option?.label ?? null;
     }
     const labels = options.flatMap((option, index) => state.checked.has(index) ? [option.value ?? option.label] : []);
-    return labels.length === 0 ? null : labels.join(', ');
+    return labels.length === 0 ? state.request.allowEmptySelection === true ? '' : null : labels.join(', ');
 }
 /** Resolve the selected answer after applying a full-screen selector query. */
 export function selectedFilteredPromptAnswer(state, query) {
     const option = filteredPromptOptions(state.request, query, state.collapsed)[state.selected];
+    // A disabled row is focusable but carries no answer, filtered or not.
+    if (option?.disabled === true)
+        return null;
     return option?.value ?? option?.label ?? null;
 }
 //# sourceMappingURL=prompt-selector.js.map