@zergai/ztc 0.5.0-beta.1 → 0.6.0-beta.1

package/dist/ui/widgets/settings_panel.js

@@ -1,7 +1,10 @@
 import { box, text } from '../core/index.js';
 import { displayWidth, padEndDisplay, sanitizeTerminalText } from '../core/text_width.js';
+import { wrapText } from '../core/wrap_text.js';
 import { TERMINAL_THEME } from '../views/theme.js';
 import { bodyBand, isInsideBand, sideBySideBands, widgetFrameGeometry, } from './panel_frame.js';
+import { isControlKey } from '../core/input.js';
+import { isTypedText } from './select.js';
 const graphemes = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
 /**
  * Labels a checkbox row spells out before it counts the rest. These rows sit in
@@ -89,6 +92,31 @@ function clipText(value, width) {
     }
     return `${clipped.trimEnd()}…`;
 }
+/**
+ * Help text wrapped to `width` cells: a sentence is never cut short. A
+ * bullet's continuation lines start under its text, not under the bullet.
+ */
+function wrapHelp(help, width) {
+    return help.split('\n').flatMap(line => {
+        const bullet = /^[•*-] /.exec(line)?.[0] ?? '';
+        const lead = displayWidth(bullet);
+        return wrapText(line.slice(bullet.length), Math.max(1, width - lead))
+            .map((part, index) => `${index === 0 ? bullet : ' '.repeat(lead)}${part}`);
+    });
+}
+/**
+ * Key hints joined by ` · ` that fit `width`: the first and last hints stay,
+ * and the longest of the others go first. Clipped only if two still do not fit.
+ */
+function fitHints(hints, width) {
+    const parts = hints.split(' · ');
+    while (parts.length > 2 && displayWidth(parts.join(' · ')) > width) {
+        const middle = parts.slice(1, -1);
+        const longest = middle.reduce((widest, part) => (displayWidth(part) > displayWidth(widest) ? part : widest));
+        parts.splice(parts.indexOf(longest), 1);
+    }
+    return clipText(parts.join(' · '), width);
+}
 function joinColumns(left, right, width) {
     const safeLeft = sanitizeTerminalText(left).replace(/[\r\n\t]+/g, ' ');
     const safeRight = sanitizeTerminalText(right).replace(/[\r\n\t]+/g, ' ');
@@ -166,6 +194,40 @@ function framedLine(segments, width, backgroundColor) {
         backgroundColor,
     };
 }
+/** Cells a table row spends on its `› ● ` pointer and value mark, before the first column. */
+const TABLE_MARK_WIDTH = 4;
+/** Blank cells between two table columns. */
+const TABLE_COLUMN_GAP = 2;
+/** The fewest cells the left-aligned column keeps before a column ranked to go is dropped. */
+const TABLE_FLEX_MIN = 12;
+/** Lines the highlighted option's description takes under a table. */
+const TABLE_DETAIL_LINES = 3;
+const TONE_COLOR = {
+    muted: TERMINAL_THEME.muted, good: TERMINAL_THEME.success, warn: TERMINAL_THEME.attention, bad: TERMINAL_THEME.error,
+};
+/** The columns that fit `width`, the highest-ranked dropped first, with the width the left-aligned one gets. */
+function fitTableColumns(columns, width) {
+    let kept = columns.map((column, index) => ({ ...column, index }));
+    const fixed = () => kept.reduce((sum, column) => sum + column.width, 0) + TABLE_COLUMN_GAP * Math.max(0, kept.length - 1);
+    while (fixed() + TABLE_FLEX_MIN > width && kept.some(column => column.dropRank !== undefined)) {
+        const rank = Math.max(...kept.map(column => column.dropRank ?? -Infinity));
+        kept = kept.filter(column => column.dropRank !== rank);
+    }
+    const flex = Math.max(1, width - fixed());
+    return kept.map(column => ({ ...column, cells: column.width === 0 ? flex : column.width }));
+}
+/** A cell's segments clipped to `width` and padded on the side away from its alignment. */
+function fitTableCell(segments, width, alignRight, base) {
+    const styled = segments.map(segment => ({
+        text: sanitizeTerminalText(segment.text).replace(/[\r\n\t]+/g, ' '),
+        style: { ...base, ...(segment.tone ? { color: TONE_COLOR[segment.tone] } : {}) },
+    }));
+    const total = styled.reduce((sum, segment) => sum + displayWidth(segment.text), 0);
+    const fitted = total <= width ? styled : fitSegments(styled, width).filter(segment => segment.text.trim() || segment.style);
+    const used = fitted.reduce((sum, segment) => sum + displayWidth(segment.text), 0);
+    const pad = { text: ' '.repeat(Math.max(0, width - used)) };
+    return alignRight ? [pad, ...fitted] : [...fitted, pad];
+}
 function bottomBorder(width) {
     if (width <= 1)
         return { segments: [{ text: '' }] };
@@ -212,9 +274,20 @@ export class SettingsPanelWidget {
      * from a pane that is no longer under the pointer.
      */
     frameInset = 0;
+    /** First table row painted, kept so the highlight moves through a long table instead of the table jumping. */
+    tableScroll = 0;
     constructor(host) {
         this.host = host;
     }
+    /** The open select when it draws as a table. */
+    openTable() {
+        if (!this.expandedSetting)
+            return null;
+        const setting = this.currentSetting();
+        if (!setting?.table || !setting.options?.length || setting.name !== this.expandedSetting)
+            return null;
+        return { setting, table: setting.table, options: setting.options };
+    }
     isPage() {
         return this.active?.layout === 'page';
     }
@@ -243,6 +316,8 @@ export class SettingsPanelWidget {
             if (categoryIndex >= 0)
                 this.cursorIndex = categoryIndex;
         }
+        data.connectRepaint?.(() => { if (this.active === data)
+            this.refreshRows(this.currentSetting()?.name); });
         this.host.render();
     }
     cancel() {
@@ -335,6 +410,7 @@ export class SettingsPanelWidget {
             row.setting.secret ? '' : row.setting.value,
             row.categoryName,
             optionLabels,
+            ...(row.setting.keywords ?? []),
         ];
         if (fields.some(value => value.toLowerCase().includes(filter)))
             return true;
@@ -479,7 +555,7 @@ export class SettingsPanelWidget {
             this.host.render();
             return;
         }
-        if (key.ctrl && input.toLowerCase() === 'c') {
+        if (isControlKey(input, key, 'c')) {
             this.cancel();
             this.host.render();
             return;
@@ -552,27 +628,44 @@ export class SettingsPanelWidget {
         const page = this.active;
         const previousValue = setting.value;
         setting.value = value;
+        // A refusal is said on the panel too, where the row just snapped back,
+        // in place of a notice it made stale; the next change that goes through
+        // clears it.
+        const refused = (message) => {
+            if (setting.value === value)
+                setting.value = previousValue;
+            this.host.addSystemMessage(`Setting failed: ${message}`);
+            page.notice = `✗ ${message}`;
+            page.noticeTone = 'error';
+            if (this.active === page)
+                this.refreshRows(setting.name);
+        };
         try {
             void Promise.resolve(page.onSettingChange(setting.name, value)).then(() => {
+                if (page.noticeTone === 'error')
+                    page.notice = undefined;
                 if (this.active === page)
                     this.refreshRows(setting.name);
-            }, (error) => {
-                if (setting.value === value)
-                    setting.value = previousValue;
-                this.host.addSystemMessage(`Setting failed: ${error.message}`);
-                if (this.active === page)
-                    this.refreshRows(setting.name);
-            });
+            }, (error) => refused(error.message));
         }
         catch (error) {
-            setting.value = previousValue;
-            const message = error instanceof Error ? error.message : String(error);
-            this.host.addSystemMessage(`Setting failed: ${message}`);
-            if (this.active === page)
-                this.refreshRows(setting.name);
+            refused(error instanceof Error ? error.message : String(error));
         }
     }
+    /** False only when the key is left to the composer: text typed on a page that typing closes. */
     handleInput(input, key) {
+        if (!this.active)
+            return false;
+        if (this.active.typingCloses && !this.editMode && !this.expandedSetting && !this.captureSetting && !this.filterMode
+            && isTypedText(input, key)) {
+            this.cancel();
+            this.host.render();
+            return false;
+        }
+        this.handlePanelInput(input, key);
+        return true;
+    }
+    handlePanelInput(input, key) {
         if (!this.active)
             return;
         if (key.paste) {
@@ -597,7 +690,7 @@ export class SettingsPanelWidget {
             return;
         }
         if (this.filterMode) {
-            if (key.ctrl && input.toLowerCase() === 'c') {
+            if (isControlKey(input, key, 'c')) {
                 this.cancel();
                 this.host.render();
                 return;
@@ -607,7 +700,7 @@ export class SettingsPanelWidget {
                 this.host.render();
                 return;
             }
-            if (key.ctrl && input.toLowerCase() === 'u') {
+            if (isControlKey(input, key, 'u')) {
                 this.filterText = '';
                 this.applyFilter();
                 this.host.render();
@@ -638,7 +731,7 @@ export class SettingsPanelWidget {
                 this.saveEditedValue();
                 return;
             }
-            if (key.ctrl && input.toLowerCase() === 'u') {
+            if (isControlKey(input, key, 'u')) {
                 this.editValue = '';
                 this.editDirty = true;
                 this.host.render();
@@ -696,13 +789,24 @@ export class SettingsPanelWidget {
                     this.commitSettingValue(setting, option.value);
                 }
             }
+            else if (setting.table?.onKey) {
+                // The owner may reorder the options; the highlight stays on its option.
+                const highlighted = options[this.expandedOptionIndex]?.value;
+                const taken = setting.table.onKey(input, key);
+                if (taken === false)
+                    return;
+                const index = taken === 'top' ? 0 : setting.options.findIndex(option => option.value === highlighted);
+                this.expandedOptionIndex = Math.max(0, index);
+                if (taken === 'top')
+                    this.tableScroll = 0;
+            }
             else {
                 return;
             }
             this.host.render();
             return;
         }
-        if ((key.ctrl && input.toLowerCase() === 'c') || key.escape) {
+        if ((isControlKey(input, key, 'c')) || key.escape) {
             this.cancel();
             this.host.render();
             return;
@@ -720,9 +824,9 @@ export class SettingsPanelWidget {
             this.moveSelection(-this.pageStep());
         else if (key.pageDown)
             this.moveSelection(this.pageStep());
-        else if (key.ctrl && input.toLowerCase() === 'u')
+        else if (isControlKey(input, key, 'u'))
             this.moveSelection(-Math.max(1, Math.floor(this.pageStep() / 2)));
-        else if (key.ctrl && input.toLowerCase() === 'd')
+        else if (isControlKey(input, key, 'd'))
             this.moveSelection(Math.max(1, Math.floor(this.pageStep() / 2)));
         else if (key.upArrow || input === 'k')
             this.moveSelection(-1);
@@ -754,6 +858,7 @@ export class SettingsPanelWidget {
                 this.expandedSetting = setting.name;
                 const currentIndex = setting.options.findIndex(option => (option.value === setting.value || option.label === setting.value));
                 this.expandedOptionIndex = currentIndex >= 0 ? currentIndex : 0;
+                this.tableScroll = 0;
             }
         }
         else {
@@ -794,6 +899,9 @@ export class SettingsPanelWidget {
             return setting.formatValue(setting.value);
         if (setting.type === 'keybinding')
             return setting.value || '(unbound)';
+        // A row that opens its own page holds no value to be missing.
+        if (setting.onActivate && !setting.value)
+            return '';
         return setting.value || '(not set)';
     }
     visibleSettings() {
@@ -827,7 +935,10 @@ export class SettingsPanelWidget {
      * pushed the values far from their own text.
      */
     labelColumnWidth(innerWidth) {
+        // A row with nothing in the value column spans the pane instead, so its
+        // label does not push every other value away.
         const labels = this.categorySettings(this.currentCategoryName())
+            .filter(row => this.displayValue(row.setting) !== '')
             .map(row => row.setting.label);
         const longest = labels.reduce((widest, label) => Math.max(widest, displayWidth(label)), 0);
         const room = Math.max(1, innerWidth - SETTINGS_ROW_INDENT);
@@ -847,6 +958,8 @@ export class SettingsPanelWidget {
      */
     composeRow(label, value, width, focused) {
         const cursor = `${focused ? '›' : ' '} `.padEnd(SETTINGS_ROW_INDENT);
+        if (!value)
+            return clipText(`${cursor}${label}`, width);
         const labelWidth = Math.min(this.labelColumnWidth(width), Math.max(1, width - SETTINGS_ROW_INDENT));
         const padded = padEndDisplay(clipText(label, labelWidth), labelWidth);
         const gap = ' '.repeat(SETTINGS_VALUE_COLUMN_GAP);
@@ -878,11 +991,14 @@ export class SettingsPanelWidget {
             // A typed row has nowhere else to explain itself, so the focused row
             // carries its own one-line note. The option list explains itself instead.
             if (!this.isPage() && current && row.setting.description && this.expandedSetting !== row.setting.name && !this.editMode) {
-                rendered.push({
-                    text: this.indented(row.setting.description, innerWidth),
-                    focus: true,
-                    style: { color: TERMINAL_THEME.muted, dimColor: true },
-                });
+                // Help may run to several lines, such as a list of benefits; each wraps.
+                for (const line of wrapHelp(row.setting.description, innerWidth - SETTINGS_ROW_INDENT)) {
+                    rendered.push({
+                        text: this.indented(line, innerWidth),
+                        focus: true,
+                        style: { color: TERMINAL_THEME.muted, dimColor: true },
+                    });
+                }
             }
             if (current && this.captureSetting === row.setting.name) {
                 rendered.push({
@@ -911,11 +1027,14 @@ export class SettingsPanelWidget {
                             : { color: selected ? TERMINAL_THEME.info : TERMINAL_THEME.muted },
                     });
                     if (highlighted && option.description) {
-                        rendered.push({
-                            text: this.indented(`${optionGutter}${' '.repeat(displayWidth(optionMarker))}${option.description}`, innerWidth),
-                            focus: true,
-                            style: { color: TERMINAL_THEME.muted, dimColor: true },
-                        });
+                        const lead = `${optionGutter}${' '.repeat(displayWidth(optionMarker))}`;
+                        for (const line of wrapHelp(option.description, innerWidth - SETTINGS_ROW_INDENT - displayWidth(lead))) {
+                            rendered.push({
+                                text: this.indented(`${lead}${line}`, innerWidth),
+                                focus: true,
+                                style: { color: TERMINAL_THEME.muted, dimColor: true },
+                            });
+                        }
                     }
                 }
             }
@@ -931,16 +1050,84 @@ export class SettingsPanelWidget {
         }
         return rendered;
     }
+    /**
+     * The open table's body: its caption and heading, as many rows as fit
+     * around the highlighted option, a divider before each group, then its
+     * notes. Every row is a run of styled segments `width` cells wide.
+     */
+    buildTableLines(open, width, capacity) {
+        const { setting, table, options } = open;
+        const columns = fitTableColumns(table.columns(), width - TABLE_MARK_WIDTH);
+        const muted = { color: TERMINAL_THEME.muted };
+        const caption = table.caption?.() ?? '';
+        const notes = (table.notes?.() ?? []).slice(0, 2);
+        const head = [];
+        if (caption && capacity >= 4)
+            head.push({ segments: [{ text: clipText(caption, width), style: { ...muted, dimColor: true } }] });
+        const heading = [{ text: ' '.repeat(TABLE_MARK_WIDTH) }];
+        columns.forEach((column, index) => {
+            if (index > 0)
+                heading.push({ text: ' '.repeat(TABLE_COLUMN_GAP) });
+            heading.push(...fitTableCell([{ text: column.label }], column.cells, column.width > 0, { color: TERMINAL_THEME.subtle, bold: true }));
+        });
+        head.push({ segments: heading });
+        const shownNotes = capacity - head.length - notes.length >= 3 ? notes : [];
+        const room = Math.max(1, capacity - head.length - shownNotes.length);
+        // Options and their group dividers, in the owner's order.
+        const rows = [];
+        let group;
+        options.forEach((option, index) => {
+            if (option.group !== group && option.group)
+                rows.push({ divider: option.group });
+            group = option.group;
+            rows.push({ option, index });
+        });
+        const focus = rows.findIndex(row => 'option' in row && row.index === this.expandedOptionIndex);
+        const maxStart = Math.max(0, rows.length - room);
+        let start = Math.min(this.tableScroll, maxStart);
+        if (focus < start)
+            start = Math.max(0, focus - (focus > 0 && 'divider' in rows[focus - 1] ? 1 : 0));
+        if (focus >= start + room)
+            start = focus - room + 1;
+        this.tableScroll = start;
+        const body = rows.slice(start, start + room).map(row => {
+            if ('divider' in row) {
+                const label = clipText(row.divider, Math.max(1, width - TABLE_MARK_WIDTH - 4));
+                const rule = Math.max(0, width - TABLE_MARK_WIDTH - displayWidth(label) - 4);
+                return { segments: [{ text: `${' '.repeat(TABLE_MARK_WIDTH)}── ${label} ${'─'.repeat(rule)}`, style: { color: TERMINAL_THEME.subtle } }] };
+            }
+            const highlighted = row.index === this.expandedOptionIndex;
+            const current = row.option.value === setting.value;
+            const base = highlighted ? { color: TERMINAL_THEME.text, bold: true } : { color: TERMINAL_THEME.text };
+            const segments = [
+                { text: highlighted ? '› ' : '  ', style: { color: TERMINAL_THEME.accent, bold: true } },
+                { text: current ? '● ' : '○ ', style: { color: current ? TERMINAL_THEME.info : TERMINAL_THEME.subtle } },
+            ];
+            const cells = table.cells(row.option);
+            columns.forEach((column, index) => {
+                if (index > 0)
+                    segments.push({ text: ' '.repeat(TABLE_COLUMN_GAP) });
+                segments.push(...fitTableCell(cells[column.index] ?? [], column.cells, column.width > 0, base));
+            });
+            return { segments, ...(highlighted ? { backgroundColor: TERMINAL_THEME.border } : {}) };
+        });
+        const tail = shownNotes.map(note => ({ segments: [{ text: clipText(note, width), style: { ...muted, dimColor: true } }] }));
+        return { lines: [...head, ...body, ...tail] };
+    }
     visibleSettingWindow(rows, capacity) {
         if (capacity <= 0)
             return { rows: [], hiddenAbove: 0, hiddenBelow: rows.length };
         const focusIndex = Math.max(0, rows.findIndex(row => row.focus));
+        // The focused row and its help: all of it when it fits, the row itself always.
+        let focusEnd = focusIndex;
+        rows.forEach((row, index) => { if (row.focus)
+            focusEnd = Math.max(focusEnd, index); });
         const maxStart = Math.max(0, rows.length - capacity);
         let start = Math.max(0, Math.min(this.scrollOffset, maxStart));
         if (focusIndex < start)
             start = focusIndex;
-        if (focusIndex >= start + capacity)
-            start = focusIndex - capacity + 1;
+        if (focusEnd >= start + capacity)
+            start = Math.min(focusIndex, focusEnd - capacity + 1);
         start = Math.max(0, Math.min(start, maxStart));
         this.scrollOffset = start;
         const visible = rows.slice(start, start + capacity);
@@ -981,6 +1168,9 @@ export class SettingsPanelWidget {
             return this.isPage()
                 ? 'Type · ↵ save · Esc cancel'
                 : 'Type a value · ↵ save · Esc cancel · Ctrl+U clear';
+        const table = this.openTable()?.table;
+        if (table)
+            return ['↑↓ choose', table.hints, '↵ choose', 'Esc back'].filter(Boolean).join(' · ');
         if (this.expandedSetting)
             return this.isPage()
                 ? '↑↓ choose · ↵ apply · Esc back'
@@ -1022,27 +1212,49 @@ export class SettingsPanelWidget {
         // this page's label and value columns close enough to read as one row.
         const { width, inset } = widgetFrameGeometry(termCols);
         this.frameInset = inset;
-        const desiredRows = page
-            ? Math.min(22, this.settingIndices().length + 4 + (this.active.notice ? 1 : 0))
-            : Math.max(10, Math.min(22, this.visibleRows.length + 4));
+        const summary = this.active.summary
+            ? wrapHelp(sanitizeTerminalText(this.active.summary()), Math.max(1, width - 4)).slice(0, 2) : [];
+        const open = this.openTable();
+        const desiredRows = open
+            ? Math.min(30, open.options.length + new Set(open.options.map(option => option.group).filter(Boolean)).size
+                + 6 + TABLE_DETAIL_LINES + summary.length + (open.table.notes?.().length ?? 0))
+            : page
+                ? Math.min(22, this.settingIndices().length + 4 + summary.length + (this.active.notice ? 1 : 0)
+                    + Math.max(0, wrapHelp(this.currentSetting()?.description || '', Math.max(1, width - 4)).length - 1))
+                : Math.max(10, Math.min(22, this.visibleRows.length + 4));
         const height = Math.max(1, Math.floor(maxRows ?? desiredRows));
         const innerWidth = Math.max(0, width - 4);
         const settings = this.settingIndices();
         const settingPosition = settings.indexOf(this.cursorIndex);
-        const position = settings.length > 0 ? `${Math.max(0, settingPosition) + 1}/${settings.length}` : '0/0';
+        const position = open ? `${this.expandedOptionIndex + 1}/${open.options.length}`
+            : settings.length > 0 ? `${Math.max(0, settingPosition) + 1}/${settings.length}` : '0/0';
         const lines = [topBorder(width, this.active.title || 'Settings', position)];
         if (height === 1)
             return lines;
         if (height === 2)
             return [...lines, bottomBorder(width)];
+        // The summary keeps a body row and the notice's room below it.
+        const shownSummary = height >= 5 + summary.length ? summary : [];
+        for (const line of shownSummary) {
+            lines.push(framedLine([{ text: clipText(line, innerWidth), style: { color: TERMINAL_THEME.info } }], width, TERMINAL_THEME.bgElevated));
+        }
         const showUtility = !page && height >= 5;
-        const showNotice = page && Boolean(this.active.notice) && height >= 5;
+        // A page keeps its notice down to five rows; the full panel needs room
+        // for its search bar and a body row as well.
+        const showNotice = Boolean(this.active.notice) && height >= (page ? 5 : 7);
         const showDetail = page && height >= (showNotice ? 6 : 5);
-        const fixedRows = page ? 3 + Number(showNotice) + Number(showDetail) : showUtility ? 4 : 3;
+        // A page's help wraps under its rows, leaving at least one body row; an
+        // open table explains its highlighted option there instead.
+        const detail = open ? open.options[this.expandedOptionIndex]?.description ?? '' : this.currentSetting()?.description || '';
+        const detailLines = showDetail || (open && height >= 6)
+            ? wrapHelp(detail, innerWidth)
+                .slice(0, open ? TABLE_DETAIL_LINES : Math.max(1, height - (3 + Number(showNotice)) - 1))
+            : [];
+        const fixedRows = (page || open ? 3 + Number(showNotice) + detailLines.length : (showUtility ? 4 : 3) + Number(showNotice)) + shownSummary.length;
         const bodyRows = Math.max(0, height - fixedRows);
         const settingCapacity = Math.max(0, bodyRows - (page ? 0 : 1));
         this.lastBodyRows = Math.max(1, bodyRows);
-        const wide = !page && width >= 70 && bodyRows >= 4;
+        const wide = !page && !open && width >= 70 && bodyRows >= 4;
         const categoryWidth = wide
             ? Math.max(20, Math.min(28, Math.floor(innerWidth * 0.3)))
             : 0;
@@ -1052,7 +1264,7 @@ export class SettingsPanelWidget {
         const categoryWindow = wide
             ? this.categoryWindow(settingCapacity, categoryWidth)
             : { rows: [], hiddenAbove: 0, hiddenBelow: 0 };
-        if (showUtility) {
+        if (showUtility && !open) {
             const query = this.filterText || 'all';
             const search = `/ Search: ${query}${this.filterMode ? '█' : ''}`;
             const context = this.contextLabel(settingWindow.hiddenAbove, settingWindow.hiddenBelow);
@@ -1064,10 +1276,19 @@ export class SettingsPanelWidget {
                 }], width, TERMINAL_THEME.bgElevated));
         }
         if (showNotice) {
-            lines.push(framedLine([{ text: clipText(this.active.notice || '', innerWidth),
-                    style: { color: TERMINAL_THEME.error, bold: true } }], width, TERMINAL_THEME.bgElevated));
+            lines.push(framedLine([{ text: clipText(this.active.notice || '', innerWidth), style: {
+                        color: this.active.noticeTone === 'success' ? TERMINAL_THEME.success : TERMINAL_THEME.error, bold: true,
+                    } }], width, TERMINAL_THEME.bgElevated));
+        }
+        if (open && bodyRows > 0) {
+            const bodyTop = lines.length;
+            for (const line of this.buildTableLines(open, innerWidth, bodyRows).lines) {
+                lines.push(framedLine(line.segments, width, line.backgroundColor));
+            }
+            this.categoryBand = null;
+            this.settingsBand = bodyBand(bodyTop, lines.length - 1, innerWidth, inset);
         }
-        if (bodyRows > 0) {
+        else if (bodyRows > 0) {
             const categoryName = this.currentCategoryName();
             const categoryCount = categoryName ? this.categorySettings(categoryName).length : 0;
             const heading = categoryName
@@ -1115,16 +1336,16 @@ export class SettingsPanelWidget {
             this.categoryBand = null;
             this.settingsBand = null;
         }
-        if (showDetail) {
+        for (const detail of detailLines) {
             lines.push(framedLine([{
-                    text: clipText(this.currentSetting()?.description || '', innerWidth),
+                    text: clipText(detail, innerWidth),
                     style: { color: TERMINAL_THEME.muted, dimColor: true },
                 }], width, TERMINAL_THEME.bgElevated));
         }
         while (lines.length < height - 2)
             lines.push(framedLine([], width));
         lines.push(framedLine([{
-                text: clipText(this.footerHint(), innerWidth),
+                text: fitHints(this.footerHint(), innerWidth),
                 style: { color: TERMINAL_THEME.muted, dimColor: true },
             }], width, TERMINAL_THEME.bgElevated));
         lines.push(bottomBorder(width));

package/dist/ui/widgets/status_line_panel.js

@@ -19,6 +19,7 @@ import { TERMINAL_THEME } from '../views/theme.js';
 import { fuzzyMatch } from '../../utils/fuzzy_match.js';
 import { cycleStatusLineVariant, resolveStatusLineVariants, statusLineItemGroups, statusLineItemOptions, STATUS_LINE_ITEM_DESCRIPTIONS, STATUS_LINE_VARIANT_LABELS, } from '../status_line_config.js';
 import { bodyBand, bottomBorder, clipText, dropLastGrapheme, fitSegments, framedLine, isInsideBand, joinColumns, lineText, planPanelSplit, sideBySideBands, stackedBands, topBorder, buildWidgetFrameView, widgetFrameGeometry, } from './panel_frame.js';
+import { isControlKey } from '../core/input.js';
 /** The order pane is the point of this page, so it keeps a workable width. */
 const ORDER_PANE_MIN_WIDTH = 34;
 /** Below this the panes stack instead of splitting. */
@@ -313,7 +314,7 @@ export class StatusLinePanelWidget {
             return;
         }
         if (this.filterMode) {
-            if (key.ctrl && input.toLowerCase() === 'c') {
+            if (isControlKey(input, key, 'c')) {
                 this.cancel();
                 return;
             }
@@ -322,7 +323,7 @@ export class StatusLinePanelWidget {
                 this.host.render();
                 return;
             }
-            if (key.ctrl && input.toLowerCase() === 'u') {
+            if (isControlKey(input, key, 'u')) {
                 this.filterText = '';
                 this.resetFieldCursor();
                 this.host.render();
@@ -342,7 +343,7 @@ export class StatusLinePanelWidget {
             }
             // Navigation keys fall through while the query stays open.
         }
-        if (key.ctrl && input.toLowerCase() === 'c') {
+        if (isControlKey(input, key, 'c')) {
             this.cancel();
             return;
         }
@@ -380,9 +381,9 @@ export class StatusLinePanelWidget {
             this.moveCursor(-pageStep);
         else if (key.pageDown)
             this.moveCursor(pageStep);
-        else if (key.ctrl && input.toLowerCase() === 'u')
+        else if (isControlKey(input, key, 'u'))
             this.moveCursor(-pageStep);
-        else if (key.ctrl && input.toLowerCase() === 'd')
+        else if (isControlKey(input, key, 'd'))
             this.moveCursor(pageStep);
         else if (key.upArrow || input === 'k')
             this.moveCursor(-1);

package/dist/ui/widgets/text_input.d.ts

@@ -11,6 +11,8 @@ export interface TextInputData {
     defaultValue?: string;
     isPassword?: boolean;
     allowEmptySubmit?: boolean;
+    /** Shows dots instead of the text while this returns true for it. */
+    maskWhen?: (value: string) => boolean;
     callback: (value: string | null) => void | Promise<void>;
 }
 export declare class TextInputWidget {
@@ -25,6 +27,8 @@ export declare class TextInputWidget {
     show(data: TextInputData): void;
     cancel(): void;
     isActive(): boolean;
+    /** Whether the field shows dots for its current text. */
+    private masked;
     handleInput(input: string, key: KeyEvent): void;
     buildContent(): string;
 }