@agi-fans/dsh-tui 0.22.0 → 0.23.1

package/lib/views/prompt-selector.js

@@ -1,4 +1,5 @@
 /** Interactive terminal selector used by resume, approval, and user questions. */
+import { uiText } from "../locale/index.js";
 import { imageSize } from "../chrome/terminal-images.js";
 import { documentLayout, documentMatches, documentModel, documentPosition, documentStart } from "./document-reader.js";
 import { promptTreeRows } from "./prompt-tree.js";
@@ -6,7 +7,7 @@ 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, sliceCells, stripAnsi, truncateToWidth, visibleWidth, wrapTextStable } from "../chrome/width.js";
+import { expandTabs, 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. */
@@ -21,6 +22,7 @@ const HOTKEY_CHOOSE = { keys: '←→', action: 'Choose — move between the pla
 const HOTKEY_PAGE = { keys: 'PgUp / PgDn', action: 'Scroll — page the options or the plan' };
 const HOTKEY_EDGE = { keys: 'Home / End', action: 'Jump to the first or last option, or the plan edges' };
 const HOTKEY_TOGGLE = { keys: 'Space', action: 'Toggle — check or clear a multi-select option' };
+const HOTKEY_ANSWER_TOGGLE = { keys: 'Ctrl+G', action: 'Toggle — check or clear a multi-select option' };
 const HOTKEY_SELECT = { keys: 'Enter', action: 'Select the highlighted option' };
 const HOTKEY_SUBMIT = { keys: 'Enter', action: 'Submit — send revision feedback, or keep planning when empty' };
 const HOTKEY_SUBMIT_NEWLINE = { keys: 'Ctrl+J', action: 'Submit — send revision feedback like Enter' };
@@ -38,6 +40,7 @@ export const PROMPT_SELECTOR_HOTKEYS = [
     HOTKEY_PAGE,
     HOTKEY_EDGE,
     HOTKEY_TOGGLE,
+    HOTKEY_ANSWER_TOGGLE,
     HOTKEY_SELECT,
     HOTKEY_SUBMIT,
     HOTKEY_SUBMIT_NEWLINE,
@@ -58,6 +61,8 @@ export function filteredPromptOptions(request, query, collapsed) {
     const options = request.options ?? [];
     if (request.filterable !== true)
         return options;
+    if (request.filterOptions !== undefined)
+        return request.filterOptions(query);
     return rankSearchResults(options, query, option => [option.label, option.value, option.preview, option.description, option.badge?.label]
         .filter((value) => value !== undefined));
 }
@@ -75,7 +80,7 @@ export function refreshPromptOptions(state, options, query) {
 const previewCache = new WeakMap();
 function treePreview(option, theme, width) {
     if (option === undefined)
-        return ['No matching conversation turns.'];
+        return [theme.text('No matching conversation turns.')];
     let cache = previewCache.get(option);
     if (cache === undefined) {
         cache = new Map();
@@ -97,9 +102,9 @@ function treePreview(option, theme, width) {
     cache.set(key, lines);
     return lines;
 }
-function treePageLayout(request, width, height) {
+function treePageLayout(request, width, height, language = 'en') {
     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 hint = [uiText(language, '↑↓ · ←→ fold'), ...(width >= 90 ? [uiText(language, 'type search')] : []), ...(actions === '' ? [] : [actions]), ...(width >= 90 ? [uiText(language, 'Ctrl+↑↓ preview')] : [])].join(' · ');
     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));
@@ -107,8 +112,8 @@ function treePageLayout(request, width, height) {
     return { hints, middle, listHeight, previewHeight };
 }
 /** Page movement follows the list space remaining after wrapped action hints. */
-export function promptTreePageSize(request, width, height) {
-    return height < 10 || width < 20 ? Math.max(1, height - 8) : treePageLayout(request, width, height).listHeight;
+export function promptTreePageSize(request, width, height, language = 'en') {
+    return height < 10 || width < 20 ? Math.max(1, height - 8) : treePageLayout(request, width, height, language).listHeight;
 }
 /** A hierarchical choice with an independently scrollable content preview. */
 export function renderPromptTreePage(state, theme, width, height, input, inputCursor, appName) {
@@ -119,7 +124,7 @@ export function renderPromptTreePage(state, theme, width, height, input, inputCu
     const option = rows[selected]?.option;
     const split = width >= 90;
     const inner = width - 4;
-    const { hints, middle, listHeight, previewHeight } = treePageLayout(state.request, width, height);
+    const { hints, middle, listHeight, previewHeight } = treePageLayout(state.request, width, height, theme.language);
     const listWidth = split ? Math.floor((inner - 3) * 0.45) : inner;
     const previewWidth = split ? inner - listWidth - 3 : inner;
     const range = promptSelectorVisibleRange(rows.length, selected, listHeight);
@@ -155,7 +160,7 @@ export function renderPromptTreePage(state, theme, width, height, input, inputCu
         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));
+        list.push(fit(theme.fg('dim', state.request.emptyText ?? theme.text('No matching conversation turns.')), listWidth));
     const preview = treePreview(option, theme, Math.max(1, previewWidth));
     const maxScroll = Math.max(0, preview.length - previewHeight);
     const scroll = Math.max(0, Math.min(state.previewScroll ?? 0, maxScroll));
@@ -173,8 +178,9 @@ export function renderPromptTreePage(state, theme, width, height, input, inputCu
             lines.push(pageRow(theme, preview[scroll + at] ?? '', width));
     }
     const action = option?.submitLabel ?? state.request.submitLabel ?? 'select';
-    lines.push(pageRow(theme, theme.fg('dim', `Enter ${action} · Esc back`), width), ...hints.map(hint => pageRow(theme, theme.fg('dim', hint), width)), pageBottom(theme, width));
-    return { lines, cursor: { row: 2, column: Math.min(width - 3, 4 + visibleWidth(input.slice(0, inputCursor))) },
+    const navigation = option === undefined || option.disabled === true ? theme.text('Esc back') : theme.text(`Enter ${action} · Esc back`);
+    lines.push(pageRow(theme, theme.fg('dim', navigation), width), ...hints.map(hint => pageRow(theme, theme.fg('dim', hint), width)), pageBottom(theme, width));
+    return { lines, choices: rows.slice(range.start, range.end).map((row, index) => ({ row: 4 + index, column: 2, width: listWidth, index: range.start + index, value: row.option.value ?? row.option.label })), cursor: { row: 2, column: Math.min(width - 3, 4 + visibleWidth(input.slice(0, inputCursor))) },
         document: { start: scroll, maxStart: maxScroll, pageSize: previewHeight }, cursorVisible: true };
 }
 /** Fold/unfold a subtree or move to its parent, preserving selection by value. */
@@ -344,6 +350,7 @@ export function promptNeedsPage(request) {
 /** Render a bounded, scrollable Markdown document with fixed actions. */
 function documentActionRows(state, theme, width, pageHeight) {
     const actionRows = [];
+    const actions = [];
     let actionRow = '';
     const actionWidth = Math.max(1, width - 5);
     for (const [index, option] of (state.request.options ?? []).entries()) {
@@ -352,6 +359,7 @@ function documentActionRows(state, theme, width, pageHeight) {
             actionRows.push(actionRow);
             actionRow = '';
         }
+        actions.push({ row: actionRows.length, column: 3 + visibleWidth(actionRow) + (actionRow === '' ? 0 : 3), width: visibleWidth(label), index });
         const painted = index === state.selected ? theme.bold(theme.fg('accent', label)) : theme.fg('muted', label);
         actionRow += (actionRow === '' ? '' : theme.fg('dim', '   ')) + painted;
     }
@@ -360,8 +368,9 @@ function documentActionRows(state, theme, width, pageHeight) {
         const selected = state.request.options?.[state.selected];
         actionRows.splice(0, actionRows.length, selected === undefined ? ''
             : theme.bold(theme.fg('accent', truncateToWidth(`› [ ${selected.label} ]`, actionWidth))));
+        actions.splice(0, actions.length, ...(selected === undefined ? [] : [{ row: 0, column: 3, width: visibleWidth(actionRows[0]), index: state.selected }]));
     }
-    return actionRows;
+    return { lines: actionRows, actions };
 }
 /** Reserve a bordered, padded rectangle; graphics never become display-row content. */
 export function renderImagePreviewPage(state, theme, width, height, appName, protocol, cell) {
@@ -369,7 +378,7 @@ export function renderImagePreviewPage(state, theme, width, height, appName, pro
     if (width < 16 || height < 10)
         return renderPromptSelector({ ...state, request: { ...state.request,
                 detail: image.description + '\nEnlarge the terminal or use Open to view the image.' } }, theme, width, '', 0, Math.max(1, height - 8));
-    const actions = documentActionRows(state, theme, width, height);
+    const { lines: actions } = documentActionRows(state, theme, width, height);
     const hints = 'Tab/←→ actions · Enter activate · Esc back';
     const bodyRows = Math.max(1, height - 8 - actions.length);
     const lines = [pageTop(theme, width, appName + ' · ' + state.request.title), pageRow(theme, state.request.question, width),
@@ -393,11 +402,19 @@ export function renderPlanReviewPage(state, theme, width, height, input, inputCu
         return renderPromptSelector(source === undefined ? state : { ...state, request: { ...state.request, detail: source.text } }, theme, width, input, inputCursor, Math.max(1, pageHeight - 8));
     }
     const feedback = state.feedback === true;
-    const actionRows = documentActionRows(state, theme, width, pageHeight);
+    const actionLayout = documentActionRows(state, theme, width, pageHeight);
+    const actionRows = actionLayout.lines;
     const readerInput = state.documentInput !== undefined;
     const customHints = (state.request.actions ?? []).map(action => `${action.key.toUpperCase()} ${action.label}`);
+    const renderedReader = source === undefined && state.request.presentation === 'document';
+    let renderedHints = renderedReader ? wrapTextStable(readerInput ? 'Enter find · Esc cancel'
+        : ['↑↓/PgUp/PgDn/wheel scroll', '/ find', 'Ctrl+N/P match', ...customHints,
+            ...(state.request.options && state.request.options.length > 1 ? ['Tab actions · Enter'] : []), 'Esc back'].join(' · '), Math.max(1, width - 4)) : [];
+    const maxRenderedHints = Math.max(1, pageHeight - (state.request.question === '' ? 5 : 6) - actionRows.length - (readerInput || state.documentQuery ? 1 : 0));
+    if (renderedHints.length > maxRenderedHints)
+        renderedHints = [...renderedHints.slice(0, maxRenderedHints - 1), '/ find · Esc back'];
     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' : '')
+        : (state.request.interrupt === undefined ? '' : 'Ctrl+C interrupt · ') + 'W wrap · Alt+←→ pan · ↑↓/PgUp/PgDn/wheel 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)
@@ -405,21 +422,28 @@ export function renderPlanReviewPage(state, theme, width, height, input, inputCu
     const compactReader = source !== undefined && pageHeight < 10;
     if (compactReader)
         readerHints = [];
-    const footerRows = feedback ? 5 : actionRows.length + 3 + (source === undefined ? 0 : readerHints.length);
-    const bodyRows = Math.max(1, pageHeight - (source === undefined ? 5 : compactReader ? 2 : 3) - footerRows);
+    const renderedSearchRows = readerInput || state.documentQuery ? 1 : 0;
+    const hintRows = renderedReader ? renderedHints.length - 1 + renderedSearchRows : readerHints.length;
+    const footerRows = feedback ? 5 : actionRows.length + 3 + hintRows;
+    const headerRows = renderedReader ? 2 + Number(state.request.question !== '')
+        : source === undefined ? 5 : compactReader ? 2 : 3;
+    const bodyRows = Math.max(1, pageHeight - headerRows - footerRows);
     const markdownWidth = Math.max(1, width - 6);
     const layout = source === undefined ? undefined : documentLayout(source, theme, markdownWidth, {
         wordWrap: state.documentWordWrap ?? state.request.documentPosition?.wordWrap ?? true,
         column: state.documentColumn ?? state.request.documentPosition?.column ?? 0,
     });
-    const document = layout?.rows ?? documentRows(state.request, theme, markdownWidth);
+    const textDocument = layout === undefined
+        ? state.renderDocument?.(theme, markdownWidth) ?? documentRows(state.request, theme, markdownWidth)
+        : undefined;
+    const document = layout?.rows ?? textDocument ?? [];
     const maxStart = Math.max(0, document.length - bodyRows);
     const start = Math.max(0, Math.min(state.documentScroll === Number.POSITIVE_INFINITY ? maxStart : layout !== undefined && state.documentAnchor !== undefined
         ? documentStart(layout, state.documentAnchor) : state.documentScroll ?? state.request.documentPosition?.row ?? 0, maxStart));
     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 textMatches = textDocument === undefined ? [] : findInRows(textDocument, query);
     const matching = new Set(matches);
     if (layout !== undefined)
         for (let at = 0; at < visible.length; at++) {
@@ -447,16 +471,17 @@ export function renderPlanReviewPage(state, theme, width, height, input, inputCu
     }
     const lines = [
         pageTop(theme, width, `${appName} · ${compactReader ? state.request.question : state.request.title}`),
-        ...(source === undefined ? [pageRow(theme, '', width)] : []),
-        ...(compactReader ? [] : [pageRow(theme, ' ' + theme.bold(state.request.question), width)]),
-        ...(source === undefined ? [pageRow(theme, '', width)] : []),
+        ...(source === undefined && !renderedReader ? [pageRow(theme, '', width)] : []),
+        ...(compactReader || renderedReader && state.request.question === '' ? [] : [pageRow(theme, ' ' + theme.bold(state.request.question), width)]),
+        ...(source === undefined && !renderedReader ? [pageRow(theme, '', width)] : []),
         pageDivider(theme, width),
         ...visible.map(line => pageRow(theme, '  ' + line, width)),
         pageDivider(theme, width),
     ];
+    const actions = [];
     let cursor = { row: Math.max(0, lines.length - 1), column: 1 };
     if (feedback) {
-        lines.push(pageRow(theme, ' ' + theme.bold('Revision feedback') + theme.fg('dim', ' · optional'), width));
+        lines.push(pageRow(theme, ' ' + theme.bold(theme.text('Revision feedback')) + theme.fg('dim', ' · optional'), width));
         const prefix = theme.fg('accent', '> ');
         const available = Math.max(1, width - 8);
         const displayInput = input.replace(/\r?\n/gu, ' ↵ ');
@@ -465,7 +490,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])} · Ctrl+X editor · empty ${formatHotkeyKeys(HOTKEY_SUBMIT)} keeps planning]`), width));
+        lines.push(pageRow(theme, theme.fg('dim', `[${formatOverlayHint([HOTKEY_SUBMIT, HOTKEY_BACK, HOTKEY_CANCEL_CTRL], 'lowercase', theme.language)} · Ctrl+X editor · empty ${formatHotkeyKeys(HOTKEY_SUBMIT)} keeps planning]`), width));
         lines.push(pageBottom(theme, width));
         cursor = {
             row: inputRow,
@@ -478,7 +503,7 @@ export function renderPlanReviewPage(state, theme, width, height, input, inputCu
             // 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'
+                ? theme.text('No match')
                 : `${index < 0 ? 1 : index + 1}/${textMatches.length} matching rows`;
             const label = state.documentInput === 'search' ? 'Find: ' : '';
             const value = input.replace(/\r?\n/gu, ' ');
@@ -502,23 +527,26 @@ export function renderPlanReviewPage(state, theme, width, height, input, inputCu
             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));
         }
+        actions.push(...actionLayout.actions.map(action => ({ ...action, row: action.row + lines.length })));
         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])
-                + (state.request.presentation === 'plan-review' ? ' · Ctrl+X editor' : '');
+            : formatOverlayHint([HOTKEY_PAGE, HOTKEY_NAVIGATE_TAB, HOTKEY_SELECT, HOTKEY_CANCEL], 'lowercase', theme.language)
+                + (state.request.presentation === 'plan-review' && state.request.allowCustom !== false ? ' · 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)));
+        const hints = renderedReader ? renderedHints : source === undefined ? [pageHint] : readerHints;
+        lines.push(...hints.map(hint => pageRow(theme, theme.fg('dim', hint), width)));
         lines.push(pageBottom(theme, width));
     }
     return {
         lines,
         cursor,
+        actions,
         document: { start, maxStart, pageSize: Math.max(1, bodyRows - 1),
-            ...(layout === undefined ? state.request.presentation === 'document' ? { position: { row: start, wrap: 0, query: '' } } : {} : { position: { ...documentPosition(layout, start, query),
+            ...(layout === undefined ? state.request.presentation === 'document' ? { position: { row: start, wrap: 0, query } } : {} : { position: { ...documentPosition(layout, start, query),
                     ...(state.request.documentTail === true ? { following: state.documentScroll === Number.POSITIVE_INFINITY } : {}) } }) },
         cursorVisible: feedback || readerInput,
     };
@@ -535,39 +563,48 @@ export function renderPromptSelector(state, theme, width, input, inputCursor, ma
     const filtering = input !== '';
     const contentWidth = Math.max(1, width - 4);
     const body = [state.request.question];
+    const choices = [];
+    const actions = [];
+    const bodyRow = () => 1 + body.reduce((count, line) => count + wrapTextStable(expandTabs(line, 8, 2), contentWidth).length, 0);
     if (state.request.wait !== undefined) {
         const remaining = Math.max(0, Math.ceil((state.request.wait.deadline - Date.now()) / 1_000));
         body.push(theme.fg('dim', state.waitHeld === true
-            ? 'Take your time · waiting for your answer'
-            : `Continues in ${remaining}s · ${formatHotkeyKeys(HOTKEY_TAKE_TIME)} take time`));
+            ? theme.text('Take your time · waiting for your answer')
+            : theme.text('Continues in {seconds}s · {key} take time', { seconds: remaining, key: formatHotkeyKeys(HOTKEY_TAKE_TIME) })));
     }
     if (state.request.detail !== undefined && state.request.detail !== '')
         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, (state.request.options ?? []).indexOf(option))));
+        body.push('');
+        for (let index = start; index < end; index++) {
+            const option = options[index];
+            choices.push({ row: bodyRow(), column: 2, width: contentWidth, index, value: option.value ?? option.label });
+            body.push(optionRow(option, index, 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`));
+            body.push(theme.fg('dim', `  ${state.selected + 1}/${options.length} · ${theme.text('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);
+            const previewWidth = Math.max(1, contentWidth - 2);
+            const wrapped = options[state.selected]?.previewFormat === 'markdown'
+                ? renderMarkdown(preview, theme, previewWidth)
+                : wrapTextStable(expandTabs(preview, 8, 4), previewWidth);
             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 {
+    else if (state.request.options !== undefined) {
         // 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.')}`));
+            ?? (filtering ? theme.text('No match for {query}.', { query: quote(input) }) : theme.text('Nothing to choose.'))}`));
     }
     /**
      * The query, drawn where the reader types it.
@@ -578,40 +615,57 @@ export function renderPromptSelector(state, theme, width, input, inputCursor, ma
      * hits looked broken rather than empty.
      */
     const filterRow = state.request.filterable === true && state.request.presentation !== 'progress'
-        ? body.length
+        ? bodyRow() + 1
         : 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);
+            ? theme.fg('muted', '  ' + theme.text('type to filter'))
+            : '  ' + 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');
+    const exhausted = options.length === 0 && state.request.options !== undefined && state.request.allowCustom === false;
+    const submit = (state.request.multiSelect === true ? state.request.submitLabel : options[state.selected]?.submitLabel ?? state.request.submitLabel)?.trim()
+        || (options.length === 0 ? theme.text('answer') : state.request.multiSelect === true ? theme.text('confirm') : theme.text('select'));
     // The request supplies the submit verb; the key itself comes from the catalog.
     const select = `${formatHotkeyKeys(HOTKEY_SELECT)} ${submit}`;
     const navigation = state.request.presentation === 'progress'
-        ? formatOverlayHint([HOTKEY_CANCEL, HOTKEY_CANCEL_CTRL], 'catalog')
+        ? formatOverlayHint([HOTKEY_CANCEL, HOTKEY_CANCEL_CTRL], 'catalog', theme.language)
         : exhausted
-            ? formatOverlayHint([HOTKEY_CANCEL])
+            ? formatOverlayHint([HOTKEY_CANCEL], 'lowercase', theme.language)
             : options.length === 0
-                ? `${select} · ${formatOverlayHint([HOTKEY_CANCEL])}`
+                ? `${select} · ${formatOverlayHint([HOTKEY_CANCEL], 'lowercase', theme.language)}`
                 : state.request.multiSelect === true
-                    ? `${formatOverlayHint([HOTKEY_NAVIGATE])} · ${formatOverlayHint([HOTKEY_TOGGLE])} · ${select} · ${formatOverlayHint([HOTKEY_CANCEL])}`
-                    : `${formatOverlayHint([HOTKEY_NAVIGATE])} · ${select} · ${formatOverlayHint([HOTKEY_CANCEL])}`;
+                    ? `${formatOverlayHint([HOTKEY_NAVIGATE], 'lowercase', theme.language)} · ${formatOverlayHint([state.request.answerFormat === 'json' ? HOTKEY_ANSWER_TOGGLE : HOTKEY_TOGGLE], 'lowercase', theme.language)} · ${formatOverlayHint([HOTKEY_CANCEL], 'lowercase', theme.language)}`
+                    : `${formatOverlayHint([HOTKEY_NAVIGATE], 'lowercase', theme.language)} · ${formatOverlayHint([HOTKEY_CANCEL], 'lowercase', theme.language)}`;
     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,
+        dismiss === undefined ? navigation : navigation.replace(formatOverlayHint([HOTKEY_CANCEL], 'lowercase', theme.language), `${formatHotkeyKeys(HOTKEY_CANCEL)} ${dismiss.toLowerCase()}`),
+        ...(state.request.skippable === true ? [formatOverlayHint([HOTKEY_SKIP], 'lowercase', theme.language)] : []),
     ];
-    body.push('', theme.fg('dim', hints.join(' · ')));
+    body.push('', theme.fg('dim', theme.text(hints.join(' · '))));
+    if (state.request.options !== undefined) {
+        const buttons = [...(options.length === 0 ? [] : [{ key: 'enter', label: submit }]), ...(state.request.actions ?? []).filter(action => options.length > 0 || action.scope === 'list')];
+        let line = '';
+        for (const button of buttons) {
+            const label = truncateToWidth(`[ ${button.key === 'enter' ? 'Enter' : button.key} ${button.label} ]`, contentWidth);
+            if (line !== '' && visibleWidth(line + '  ' + label) > contentWidth) {
+                body.push(line);
+                line = '';
+            }
+            const gap = line === '' ? '' : '  ';
+            actions.push({ row: bodyRow(), column: 2 + visibleWidth(line + gap), width: visibleWidth(label), index: -1, key: button.key.toLowerCase() });
+            line += gap + theme.fg('accent', label);
+        }
+        if (line !== '')
+            body.push(line);
+    }
+    else if (actionHints.length > 0)
+        body.push(theme.fg('dim', actionHints.join(' · ')));
     const card = renderFramedBlock({
         header: state.request.title,
         state: 'warning',
@@ -620,14 +674,14 @@ export function renderPromptSelector(state, theme, width, input, inputCursor, ma
         applyBg: false,
     }, theme);
     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
+        // With a filter line the caret follows the editor's insertion point;
+        // without one it stays on body padding, because the selector glyph
         // owns focus while no text editor is present.
         return {
-            lines: card,
+            lines: card, choices, actions,
             cursor: filterRow === undefined
                 ? { row: Math.min(1, Math.max(0, card.length - 1)), column: 1 }
-                : { row: filterRow + 2, column: 4 + visibleWidth(input) },
+                : { row: filterRow, column: 4 + visibleWidth(input.slice(0, inputCursor)) },
             cursorVisible: filterRow !== undefined,
         };
     }
@@ -656,10 +710,10 @@ export function renderPromptSelector(state, theme, width, input, inputCursor, ma
             input: displayInput,
             inputCursor,
             status: ' ' + theme.fg('accent', label) + ' ',
-            ...(state.request.question === '' ? {} : { inlineHint: state.request.question }),
+            ...(displayInput !== '' || 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(' · ') }),
+            ...(hints.length === 0 ? {} : { note: theme.text(hints.join(' · ')) }),
             border: 'accent',
         }, theme);
         return { lines: editor.lines, cursor: editor.cursor, cursorVisible: true };
@@ -668,12 +722,12 @@ export function renderPromptSelector(state, theme, width, input, inputCursor, ma
         width,
         input: displayInput,
         inputCursor,
-        status: theme.fg('muted', secret ? 'API key · hidden' : input === '' ? 'answer' : 'custom answer'),
+        status: theme.fg('muted', secret ? theme.text('API key · hidden') : input === '' ? theme.text('answer') : theme.text('custom answer')),
         border: 'accent',
     }, theme);
     const editorStart = card.length + 1;
     return {
-        lines: [...card, '', ...editor.lines],
+        lines: [...card, '', ...editor.lines], choices, actions,
         cursor: { row: editorStart + editor.cursor.row, column: editor.cursor.column },
         cursorVisible: true,
     };
@@ -700,6 +754,15 @@ export function togglePromptSelection(state, query = '') {
         checked.add(index);
     return { ...state, checked };
 }
+/** Keep option values and free text separate, including punctuation in labels. */
+export function structuredPromptAnswer(state, custom) {
+    const options = state.request.options ?? [];
+    const selected = state.request.multiSelect === true
+        ? options.flatMap((option, index) => state.checked.has(index) && !option.disabled ? [option.value ?? option.label] : [])
+        : custom.trim() !== '' || options[state.selected] === undefined || options[state.selected]?.disabled === true
+            ? [] : [options[state.selected].value ?? options[state.selected].label];
+    return { selected, ...(custom.trim() === '' ? {} : { custom: custom.trim() }) };
+}
 /** Resolve the selected labels in stable option order. */
 export function selectedPromptAnswer(state) {
     const options = state.request.presentation === 'tree'