mergestorm 0.3.9 → 0.3.15

package/dist/ui/prompt.js

@@ -1,8 +1,8 @@
 import * as readline from "node:readline";
 import { createInterface } from "node:readline/promises";
-import { stdin as input, stdout as output } from "node:process";
+import { stdin, stdout } from "node:process";
 import { ansi } from "./ansi.js";
-import { frameWidth, preferBoxedUi, roundedBox, visibleWidth } from "./box.js";
+import { frameWidth, preferBoxedUi, roundedBox, sliceVisible, terminalColumns, visibleWidth, } from "./box.js";
 import { CTRL_C_EXIT_HINT, CtrlCExitGate } from "./ctrl-c-exit.js";
 /** Thrown when the user asks to close the prompt (Ctrl+D empty, or Ctrl+C twice). */
 export class PromptClosedError extends Error {
@@ -11,11 +11,297 @@ export class PromptClosedError extends Error {
         this.name = "PromptClosedError";
     }
 }
-const up = (n) => `[${n}A`;
-const down = (n) => `[${n}B`;
-const col = (n) => `[${n}G`;
-const clearDown = "";
-async function fallbackAskLine(promptLabel) {
+const up = (n) => `\u001b[${n}A`;
+const down = (n) => `\u001b[${n}B`;
+const col = (n) => `\u001b[${n}G`;
+const clearDown = "\u001b[0J";
+/**
+ * Redraw prefix from the parked content-row cursor.
+ * CUU keeps the column, so CR must come before ED 0 or leftover
+ * prompt cells survive (`merg` + `mergestorm` -> `mergmmmmmergestorm`).
+ */
+export function promptRedrawPrefix(inputRow) {
+    return `${up(inputRow)}\r${clearDown}`;
+}
+/**
+ * From the content row, move to the first row after the input chrome
+ * and erase the slash overlay. Boxed chrome is top + content + bottom
+ * (`down(2)`). Plain chrome is the content line (`down(1)`).
+ */
+export function promptClearOverlay(boxed) {
+    return `${down(boxed ? 2 : 1)}\r${clearDown}`;
+}
+/**
+ * Cursor home + ED 0: clears the whole screen from row 1 and leaves the
+ * cursor there. Used to redraw the welcome panel on resize, where the old
+ * frame's row count is unknowable after the terminal rewraps.
+ */
+export const HEADER_REDRAW_PREFIX = `\u001b[H${clearDown}`;
+export const DROPDOWN_MAX_COMMAND_ROWS = 8;
+export function formatSlashLabel(spec) {
+    const extra = spec.aliases?.length
+        ? ` \u00b7 ${spec.aliases.join(" \u00b7 ")}`
+        : "";
+    return `/${spec.name}${extra}`;
+}
+export function specMatchesTerm(spec, term) {
+    if (spec.name.toLowerCase().startsWith(term))
+        return true;
+    return (spec.aliases ?? []).some((alias) => alias.toLowerCase().startsWith(term));
+}
+export function slashToken(buffer) {
+    if (!buffer.startsWith("/"))
+        return null;
+    return buffer.slice(1).split(/\s/, 1)[0].toLowerCase();
+}
+export function matchSlashCommands(buffer, specs, dismissed = false) {
+    if (dismissed)
+        return [];
+    const token = slashToken(buffer);
+    if (token == null)
+        return [];
+    return specs.filter((spec) => specMatchesTerm(spec, token));
+}
+export function isExactSlashCommand(buffer, specs) {
+    const token = slashToken(buffer);
+    if (!token)
+        return false;
+    return specs.some((spec) => spec.name === token || (spec.aliases ?? []).includes(token));
+}
+export function dropdownMaxRows(terminalRows, inputRow) {
+    const rows = typeof terminalRows === "number" && Number.isFinite(terminalRows) && terminalRows >= 1
+        ? terminalRows
+        : 24;
+    return Math.max(1, Math.min(DROPDOWN_MAX_COMMAND_ROWS, rows - inputRow - 3));
+}
+export function dropdownViewport(count, index, maxRows) {
+    const max = Math.max(1, maxRows);
+    if (count <= max)
+        return { start: 0, moreAbove: 0, moreBelow: 0 };
+    const clampedIndex = Math.max(0, Math.min(index, count - 1));
+    let start = 0;
+    if (clampedIndex >= max)
+        start = clampedIndex - max + 1;
+    if (start + max > count)
+        start = Math.max(0, count - max);
+    return {
+        start,
+        moreAbove: start,
+        moreBelow: Math.max(0, count - start - max),
+    };
+}
+/** Overlay rows (no invert). At most `maxRows` commands plus edge markers. */
+/** Prompt label + input chrome + footer hint. */
+export function promptChromeRows(boxed, hasPrompt, hasHint = true) {
+    return (hasPrompt ? 1 : 0) + (boxed ? 3 : 1) + (hasHint ? 1 : 0);
+}
+function resolvedRows(terminalRows) {
+    return typeof terminalRows === "number" && Number.isFinite(terminalRows) && terminalRows >= 1
+        ? terminalRows
+        : 24;
+}
+/**
+ * Rows available above the input bar for the slash list. Idle home
+ * passes 0 — do not pad a blank gap between header and prompt.
+ */
+export function overlayReserve(terminalRows, headerRows, boxed, hasPrompt) {
+    const available = resolvedRows(terminalRows) - Math.max(0, headerRows) - promptChromeRows(boxed, hasPrompt);
+    return Math.max(0, Math.min(DROPDOWN_MAX_COMMAND_ROWS, available));
+}
+/** Pad so the slash list sits just above the input bar (Claude-style). */
+export function padOverlayRows(rows, reserve) {
+    const max = Math.max(0, reserve);
+    if (max === 0)
+        return [];
+    const visible = rows.slice(0, max);
+    const pad = max - visible.length;
+    return [...Array.from({ length: pad }, () => ({ text: " " })), ...visible];
+}
+/**
+ * Pick a header density and input chrome that fit the pane.
+ * Never drops the mark when a mini/nano header is provided — a short
+ * pane unboxes the input instead of painting an overflowing frame.
+ * `dockBottom` uses leftover rows so the prompt sits on the last lines.
+ */
+export function fitHomeFrame(params) {
+    const rows = resolvedRows(params.terminalRows);
+    const want = params.dropdownCount > 0
+        ? Math.min(DROPDOWN_MAX_COMMAND_ROWS, Math.max(1, params.dropdownCount))
+        : 0;
+    const headers = [
+        params.fullHeader,
+        params.compactHeader,
+        params.miniHeader ?? [],
+        params.nanoHeader ?? [],
+    ].filter((h, i, all) => h.length > 0 && all.findIndex((x) => x === h) === i);
+    const chromes = [];
+    if (params.boxed)
+        chromes.push({ boxed: true, hasPrompt: params.hasPrompt, hasHint: true });
+    chromes.push({ boxed: false, hasPrompt: params.hasPrompt, hasHint: true });
+    chromes.push({ boxed: false, hasPrompt: false, hasHint: true });
+    chromes.push({ boxed: false, hasPrompt: false, hasHint: false });
+    const tryFit = (header, chrome) => {
+        const chromeRows = promptChromeRows(chrome.boxed, chrome.hasPrompt, chrome.hasHint);
+        const avail = rows - header.length - chromeRows;
+        if (avail < 0)
+            return null;
+        if (params.dockBottom) {
+            return { header, reserve: avail, ...chrome };
+        }
+        if (want === 0) {
+            return { header, reserve: 0, ...chrome };
+        }
+        const maxList = Math.max(0, Math.min(DROPDOWN_MAX_COMMAND_ROWS, avail));
+        if (maxList < 1)
+            return null;
+        return { header, reserve: Math.min(want, maxList), ...chrome };
+    };
+    // Prefer keeping the input boxed: try every header density at the
+    // current chrome before unboxing. Otherwise a 12-row pane would pick
+    // the full banner + a plain prompt over compact + boxed.
+    for (const chrome of chromes) {
+        for (const header of headers) {
+            const hit = tryFit(header, chrome);
+            if (hit)
+                return hit;
+        }
+    }
+    const fallback = params.nanoHeader?.length
+        ? params.nanoHeader
+        : params.miniHeader?.length
+            ? params.miniHeader
+            : [];
+    return {
+        header: fallback,
+        reserve: params.dockBottom ? Math.max(0, rows - fallback.length - 1) : 0,
+        boxed: false,
+        hasPrompt: false,
+        hasHint: false,
+    };
+}
+export function dropdownOverlayRows(dropdown, index, maxRows) {
+    const max = Math.max(1, maxRows);
+    if (dropdown.length <= max) {
+        return dropdown.map((spec, i) => ({
+            text: `  ${formatSlashLabel(spec).padEnd(22)}${spec.summary}`,
+            selected: i === index,
+        }));
+    }
+    const cmdSlots = Math.max(1, max - 2);
+    const view = dropdownViewport(dropdown.length, index, cmdSlots);
+    const rows = [];
+    if (view.moreAbove > 0)
+        rows.push({ text: `  \u2191 ${view.moreAbove} more` });
+    const end = Math.min(dropdown.length, view.start + cmdSlots);
+    for (let i = view.start; i < end; i++) {
+        const spec = dropdown[i];
+        rows.push({
+            text: `  ${formatSlashLabel(spec).padEnd(22)}${spec.summary}`,
+            selected: i === index,
+        });
+    }
+    if (view.moreBelow > 0)
+        rows.push({ text: `  \u2193 ${view.moreBelow} more` });
+    return rows.slice(0, max);
+}
+/** Input prefix glyph (U+203A), kept as an escape so editors can't mangle it. */
+export const INPUT_PREFIX_GLYPH = "\u203a";
+/** Cells the `> ` prefix occupies before the buffer. */
+export const INPUT_PREFIX_CELLS = 2;
+/** Padding inside the boxed input frame. */
+export const INPUT_BOX_PADDING = 1;
+/**
+ * Horizontal scroll for a one-row editor: pick the `cells`-wide window of
+ * `buffer` that keeps the cursor on screen, moving the previous window only
+ * when the cursor leaves it. Never wraps onto a second physical row.
+ */
+export function inputWindow(buffer, cursor, cells, prevStart = 0) {
+    if (cells <= 0)
+        return { start: 0, text: "", cursorCol: 0 };
+    const cursorCells = visibleWidth(buffer.slice(0, Math.max(0, cursor)));
+    const totalCells = visibleWidth(buffer);
+    // The cursor needs a cell of its own at end-of-line, so a full window
+    // shows at most `cells - 1` glyphs past the scroll origin.
+    const maxStart = Math.max(0, totalCells - (cells - 1));
+    let start = Math.min(Math.max(0, prevStart), maxStart);
+    if (cursorCells < start)
+        start = cursorCells;
+    if (cursorCells > start + cells - 1)
+        start = cursorCells - (cells - 1);
+    return {
+        start,
+        text: sliceVisible(buffer, start, cells),
+        cursorCol: cursorCells - start,
+    };
+}
+/** Cells available to the buffer (after the prefix) on a content row. */
+export function inputCells(columns, boxedOverride) {
+    const boxed = boxedOverride ?? preferBoxedUi(columns);
+    const contentCells = boxed
+        ? frameWidth(80, columns) - 2 - INPUT_BOX_PADDING * 2
+        : terminalColumns(80, columns) - 1;
+    return { boxed, cells: Math.max(0, contentCells - INPUT_PREFIX_CELLS) };
+}
+/**
+ * Everything one prompt redraw writes, computed from the current terminal
+ * width. Every row fits in `columns - 1` cells so nothing wraps and the
+ * CUU count on the next redraw stays honest.
+ */
+export function buildPromptFrame(params) {
+    const { boxed, cells } = inputCells(params.columns, params.boxed);
+    const cols = terminalColumns(80, params.columns);
+    const win = inputWindow(params.buffer, params.cursor, cells, params.scrollStart ?? 0);
+    const header = params.header ?? [];
+    const reserve = params.overlayReserve;
+    const overlay = params.overlay ?? [];
+    const fitted = reserve != null ? padOverlayRows(overlay, reserve) : overlay;
+    const inputRow = header.length +
+        (reserve ?? 0) +
+        (params.prompt ? 1 : 0) +
+        (boxed ? 1 : 0);
+    // Nothing we emit may wrap: a wrapped row is one the CUU count can't see.
+    const clip = (text) => visibleWidth(text) > cols - 1 ? sliceVisible(text, 0, cols - 1) : text;
+    const paintOverlay = (row) => {
+        const text = clip(row.text);
+        return row.selected ? ansi.invert(text) : ansi.gray(text);
+    };
+    const rows = [];
+    if (reserve != null) {
+        for (const line of header)
+            rows.push(clip(line));
+        for (const row of fitted)
+            rows.push(paintOverlay(row));
+    }
+    else {
+        for (const line of header)
+            rows.push(clip(line));
+    }
+    if (params.prompt)
+        rows.push(clip(params.prompt));
+    const inputLine = `${ansi.brightGreen(INPUT_PREFIX_GLYPH)} ${win.text}`;
+    if (boxed) {
+        // Full terminal width input frame, not content-sized.
+        rows.push(...roundedBox([inputLine], {
+            padding: INPUT_BOX_PADDING,
+            width: frameWidth(80, params.columns),
+        }));
+    }
+    else {
+        // Plain prompt on narrow TTYs (avoids wrapped borders).
+        rows.push(inputLine);
+    }
+    if (reserve == null) {
+        for (const row of overlay)
+            rows.push(paintOverlay(row));
+    }
+    if (params.hint != null) {
+        rows.push(clip(params.hint === "" ? " " : params.hint));
+    }
+    // Boxed: border col + padding; plain: column 1.
+    const targetCol = (boxed ? 1 + INPUT_BOX_PADDING : 0) + INPUT_PREFIX_CELLS + win.cursorCol + 1;
+    return { rows, boxed, inputRow, targetCol, scrollStart: win.start };
+}
+async function fallbackAskLine(promptLabel, input, output) {
     const rl = createInterface({ input, output, terminal: false });
     try {
         return await rl.question(promptLabel ? `${promptLabel}> ` : "> ");
@@ -31,68 +317,133 @@ async function fallbackAskLine(promptLabel) {
 export async function askLine(opts) {
     const commands = opts.commands ?? [];
     const history = opts.history ?? [];
+    const input = opts.input ?? stdin;
+    const output = opts.output ?? stdout;
     if (!input.isTTY || !output.isTTY) {
-        return fallbackAskLine(opts.prompt);
+        return fallbackAskLine(opts.prompt, input, output);
     }
     return new Promise((resolve, reject) => {
         let buffer = "";
         let cursor = 0;
         let historyIndex = history.length;
         let dropdownIndex = 0;
+        let dropdownDismissed = false;
         let linesDrawn = 0;
+        // Geometry of the frame currently on screen. The redraw prefix and the
+        // final overlay clear must use *these*, not a fresh measurement, because
+        // the cursor is parked relative to what was actually drawn.
+        let drawnInputRow = 0;
+        let scrollStart = 0;
         let finished = false;
+        let exitHint = false;
         const ctrlCExit = new CtrlCExitGate();
         const wasRaw = Boolean(input.isRaw);
         readline.emitKeypressEvents(input);
         input.setRawMode(true);
         input.resume();
-        const boxed = preferBoxedUi();
-        // Row (0-based) of the "› buffer" content line among the rows we draw each frame.
-        // Boxed: optional prompt + top border + content. Plain: optional prompt + content.
-        const inputRow = (opts.prompt ? 1 : 0) + (boxed ? 1 : 0);
         function currentDropdown() {
-            if (!buffer.startsWith("/"))
-                return [];
-            const term = buffer.slice(1).toLowerCase();
-            return commands.filter((c) => c.name.toLowerCase().startsWith(term));
+            return matchSlashCommands(buffer, commands, dropdownDismissed);
         }
-        function render() {
-            if (linesDrawn > 0) {
-                output.write(`${up(inputRow)}${clearDown}`);
-            }
-            const rows = [];
-            if (opts.prompt)
-                rows.push(ansi.dim(opts.prompt));
-            const inputLine = `${ansi.green("›")} ${buffer}`;
-            if (boxed) {
-                // Full terminal width input frame, not content-sized.
-                rows.push(...roundedBox([inputLine], { padding: 1, width: frameWidth() }));
-            }
-            else {
-                // Plain prompt on narrow TTYs (avoids wrapped borders).
-                rows.push(inputLine);
-            }
+        function setBuffer(next) {
+            if (next !== buffer)
+                dropdownDismissed = false;
+            buffer = next;
+        }
+        let lastRoom = 24;
+        function paint() {
+            const columns = opts.columns ?? output.columns;
+            const boxedNow = preferBoxedUi(columns);
+            const rawRoom = opts.rows ?? output.rows;
+            const room = typeof rawRoom === "number" && Number.isFinite(rawRoom) && rawRoom >= 1
+                ? rawRoom
+                : lastRoom;
+            lastRoom = room;
+            const fullHeader = opts.header ? opts.header(columns, false) : [];
+            const compactHeader = opts.header ? opts.header(columns, true) : [];
+            const miniHeader = opts.header ? opts.header(columns, "mini") : [];
+            const nanoHeader = opts.header ? opts.header(columns, "nano") : [];
             const dropdown = currentDropdown();
             if (dropdown.length) {
                 if (dropdownIndex >= dropdown.length)
                     dropdownIndex = dropdown.length - 1;
-                dropdown.forEach((c, i) => {
-                    const label = `  /${c.name.padEnd(12)}${c.summary}`;
-                    rows.push(i === dropdownIndex ? ansi.invert(label) : ansi.gray(label));
-                });
             }
             else {
                 dropdownIndex = 0;
             }
-            output.write(rows.join("\r\n") + "\r\n");
-            linesDrawn = rows.length;
-            const prefixWidth = visibleWidth(`${ansi.green("›")} `);
-            // Boxed: border col + padding; plain: column 1.
-            const targetCol = (boxed ? 1 + 1 : 0) + prefixWidth + cursor + 1;
-            output.write(`${up(linesDrawn - inputRow)}${col(targetCol)}`);
+            const roomRows = resolvedRows(room);
+            const fit = opts.header
+                ? fitHomeFrame({
+                    fullHeader,
+                    compactHeader,
+                    miniHeader,
+                    nanoHeader,
+                    terminalRows: room,
+                    boxed: boxedNow,
+                    hasPrompt: Boolean(opts.prompt),
+                    dropdownCount: dropdown.length,
+                    dockBottom: true,
+                })
+                : {
+                    header: [],
+                    reserve: overlayReserve(room, 0, boxedNow, Boolean(opts.prompt)),
+                    boxed: boxedNow,
+                    hasPrompt: Boolean(opts.prompt),
+                    hasHint: true,
+                };
+            const overlay = dropdown.length
+                ? dropdownOverlayRows(dropdown, dropdownIndex, Math.max(1, Math.min(DROPDOWN_MAX_COMMAND_ROWS, fit.reserve)))
+                : [];
+            const frame = buildPromptFrame({
+                prompt: fit.hasPrompt ? opts.prompt : undefined,
+                buffer,
+                cursor,
+                columns,
+                scrollStart,
+                overlay,
+                overlayReserve: opts.header || dropdown.length ? fit.reserve : undefined,
+                header: fit.header,
+                hint: fit.hasHint ? (exitHint ? ansi.dim(CTRL_C_EXIT_HINT) : " ") : undefined,
+                boxed: fit.boxed,
+            });
+            // Never write more rows than the pane — that scrolls the welcome
+            // tail (tips / what's new) into view and looks like a broken frame.
+            if (frame.rows.length > roomRows) {
+                const keep = frame.rows.slice(frame.rows.length - roomRows);
+                const shift = frame.rows.length - keep.length;
+                frame.rows = keep;
+                frame.inputRow = Math.max(0, frame.inputRow - shift);
+            }
+            // Home screen owns the pane: always origin + ED 0. Relative CUU after
+            // a split-drag is what tore the previous layout (cursor home vs
+            // includeHeader flipping mid-resize).
+            if (opts.header) {
+                output.write(HEADER_REDRAW_PREFIX);
+            }
+            else if (linesDrawn > 0) {
+                output.write(promptRedrawPrefix(drawnInputRow));
+            }
+            // A full-pane write plus a trailing newline scrolls row 1 into
+            // scrollback — that was the missing top border. Stop on the last
+            // cell of the last row and CUU from there.
+            const fillsPane = Boolean(opts.header) && frame.rows.length >= roomRows;
+            output.write(frame.rows.join("\r\n") + (fillsPane ? "" : "\r\n"));
+            linesDrawn = frame.rows.length;
+            drawnInputRow = frame.inputRow;
+            scrollStart = frame.scrollStart;
+            const fromRow = fillsPane ? linesDrawn - 1 : linesDrawn;
+            output.write(`${up(Math.max(0, fromRow - frame.inputRow))}${col(frame.targetCol)}`);
+        }
+        function render() {
+            paint();
+        }
+        function onResize() {
+            if (finished)
+                return;
+            paint();
         }
         function cleanup() {
             input.removeListener("keypress", onKeypress);
+            output.removeListener("resize", onResize);
             input.setRawMode(wasRaw);
             // emitKeypressEvents leaves stdin flowing; pause it so an idle shell
             // (no command running) doesn't keep the process alive after exit/EOF.
@@ -103,17 +454,26 @@ export async function askLine(opts) {
                 return;
             finished = true;
             cleanup();
-            const rowsBelow = Math.max(0, linesDrawn - inputRow - 1);
-            if (rowsBelow > 0)
-                output.write(down(rowsBelow));
-            output.write("\n");
+            // Home chrome already fills the pane. down() + newline scrolls that
+            // frame (cursor to the bottom, input jumps up) before /usage paints.
+            // Leave the idle screen in place; the next TUI / askLine homes over it.
+            // Bare prompts still need the newline so oneshot output starts below.
+            // Leaving the shell: one newline so the OS prompt is not on the box.
+            if (!opts.header || err instanceof PromptClosedError) {
+                if (linesDrawn > 0) {
+                    const below = linesDrawn - drawnInputRow - 1;
+                    if (below > 0)
+                        output.write(down(below));
+                }
+                output.write("\n");
+            }
             if (err)
                 reject(err);
             else
                 resolve(value ?? "");
         }
         function acceptDropdown(dropdown) {
-            buffer = `/${dropdown[dropdownIndex].name} `;
+            setBuffer(`/${dropdown[dropdownIndex].name} `);
             cursor = buffer.length;
             dropdownIndex = 0;
         }
@@ -121,22 +481,17 @@ export async function askLine(opts) {
             try {
                 if (finished || !key)
                     return;
-                if (!(key.ctrl && key.name === "c"))
+                if (!(key.ctrl && key.name === "c")) {
                     ctrlCExit.reset();
+                    exitHint = false;
+                }
                 const dropdown = currentDropdown();
                 if (key.ctrl && key.name === "c") {
                     if (ctrlCExit.press()) {
                         finish(null, new PromptClosedError());
                         return;
                     }
-                    buffer = "";
-                    cursor = 0;
-                    historyIndex = history.length;
-                    const rowsBelow = Math.max(0, linesDrawn - inputRow - 1);
-                    if (rowsBelow > 0)
-                        output.write(down(rowsBelow));
-                    output.write(`\n${ansi.dim(CTRL_C_EXIT_HINT)}\n`);
-                    linesDrawn = 0;
+                    exitHint = true;
                     render();
                     return;
                 }
@@ -145,9 +500,18 @@ export async function askLine(opts) {
                         finish(null, new PromptClosedError());
                     return;
                 }
-                if (key.name === "return") {
+                if (key.name === "escape") {
                     if (dropdown.length)
-                        buffer = `/${dropdown[dropdownIndex].name}`;
+                        dropdownDismissed = true;
+                    render();
+                    return;
+                }
+                if (key.name === "return") {
+                    if (dropdown.length &&
+                        !dropdownDismissed &&
+                        !isExactSlashCommand(buffer, dropdown)) {
+                        setBuffer(`/${dropdown[dropdownIndex].name}`);
+                    }
                     finish(buffer);
                     return;
                 }
@@ -158,10 +522,7 @@ export async function askLine(opts) {
                     return;
                 }
                 if (key.name === "right") {
-                    if (dropdown.length)
-                        acceptDropdown(dropdown);
-                    else
-                        cursor = Math.min(buffer.length, cursor + 1);
+                    cursor = Math.min(buffer.length, cursor + 1);
                     render();
                     return;
                 }
@@ -172,11 +533,11 @@ export async function askLine(opts) {
                 }
                 if (key.name === "up") {
                     if (dropdown.length) {
-                        dropdownIndex = (dropdownIndex - 1 + dropdown.length) % dropdown.length;
+                        dropdownIndex = Math.max(0, dropdownIndex - 1);
                     }
                     else if (history.length) {
                         historyIndex = Math.max(0, historyIndex - 1);
-                        buffer = history[historyIndex] ?? "";
+                        setBuffer(history[historyIndex] ?? "");
                         cursor = buffer.length;
                     }
                     render();
@@ -184,11 +545,11 @@ export async function askLine(opts) {
                 }
                 if (key.name === "down") {
                     if (dropdown.length) {
-                        dropdownIndex = (dropdownIndex + 1) % dropdown.length;
+                        dropdownIndex = Math.min(dropdown.length - 1, dropdownIndex + 1);
                     }
                     else if (history.length) {
                         historyIndex = Math.min(history.length, historyIndex + 1);
-                        buffer = historyIndex >= history.length ? "" : history[historyIndex] ?? "";
+                        setBuffer(historyIndex >= history.length ? "" : history[historyIndex] ?? "");
                         cursor = buffer.length;
                     }
                     render();
@@ -205,31 +566,31 @@ export async function askLine(opts) {
                     return;
                 }
                 if (key.ctrl && key.name === "u") {
-                    buffer = buffer.slice(cursor);
+                    setBuffer(buffer.slice(cursor));
                     cursor = 0;
                     render();
                     return;
                 }
                 if (key.ctrl && key.name === "k") {
-                    buffer = buffer.slice(0, cursor);
+                    setBuffer(buffer.slice(0, cursor));
                     render();
                     return;
                 }
                 if (key.name === "backspace") {
                     if (cursor > 0) {
-                        buffer = buffer.slice(0, cursor - 1) + buffer.slice(cursor);
+                        setBuffer(buffer.slice(0, cursor - 1) + buffer.slice(cursor));
                         cursor -= 1;
                     }
                     render();
                     return;
                 }
                 if (key.name === "delete") {
-                    buffer = buffer.slice(0, cursor) + buffer.slice(cursor + 1);
+                    setBuffer(buffer.slice(0, cursor) + buffer.slice(cursor + 1));
                     render();
                     return;
                 }
                 if (str && !key.ctrl && !key.meta) {
-                    buffer = buffer.slice(0, cursor) + str + buffer.slice(cursor);
+                    setBuffer(buffer.slice(0, cursor) + str + buffer.slice(cursor));
                     cursor += str.length;
                     render();
                 }
@@ -239,6 +600,7 @@ export async function askLine(opts) {
             }
         }
         input.on("keypress", onKeypress);
+        output.on("resize", onResize);
         render();
     });
 }

package/dist/ui/select.js

@@ -38,7 +38,7 @@ export async function selectFromList(opts) {
                 rows.push(ansi.bold(opts.title));
             items.forEach((item, i) => {
                 const body = opts.render(item, i);
-                const marker = i === index ? ansi.green("›") : " ";
+                const marker = i === index ? ansi.brightGreen("›") : " ";
                 const line = ` ${marker} ${body}`;
                 rows.push(i === index ? ansi.invert(line) : line);
             });