@unscientificjszhai/howto 1.0.0 → 1.0.1

package/dist/ui/ConfirmView.js

@@ -1,84 +1,180 @@
-import React, { useState } from "react";
-import { Box, Text, useInput } from "ink";
-import { SelectedCommandDisplay } from "./SelectedCommandDisplay.js";
+import React, { useRef, useState } from "react";
+import { Box, Text, useStdout } from "ink";
+import { hasUnsafeTerminalControlCharacters } from "../terminal-text.js";
+import { deleteLastGrapheme, isTextInputEvent } from "./text-input.js";
+import { toSingleLinePreview, toTailPreview } from "./single-line-preview.js";
+import { useExecutionPolicy } from "./InteractiveSessionProvider.js";
+import { usePasteAwareInput } from "./use-paste-aware-input.js";
+const DANGER_CONFIRMATION_PHRASE = "EXECUTE";
+const DANGER_CONFIRMATION_SUFFIX = "+Enter; Esc/Ctrl+C |> ";
 export function isDangerConfirmationInput(input) {
-    return input.toUpperCase() === "EXECUTE";
+    return input.toUpperCase() === DANGER_CONFIRMATION_PHRASE;
 }
-export const ConfirmView = ({ candidate, command, resolvedValues, danger, onConfirm, onCancel, isDone = false, }) => {
+export const ConfirmView = ({ command, danger, onConfirm, onCancel, isDone = false, isInputActive = true, availableRows = 3, availableColumns, }) => {
+    const { policy, getPolicy } = useExecutionPolicy();
     const [buffer, setBuffer] = useState("");
-    useInput((input, key) => {
-        if (isDone)
-            return;
-        if (key.ctrl && input === "c") {
-            onCancel();
-            return;
-        }
-        if (key.escape) {
-            onCancel();
-            return;
-        }
-        if (danger) {
-            if (key.return) {
-                if (isDangerConfirmationInput(buffer)) {
-                    onConfirm();
-                }
-                else {
-                    onCancel();
-                }
+    const bufferRef = useRef(buffer);
+    const finishedRef = useRef(false);
+    const { stdout } = useStdout();
+    const stdoutColumns = typeof stdout.columns === "number" && stdout.columns > 0 ? stdout.columns : 80;
+    const columns = availableColumns ?? stdoutColumns;
+    usePasteAwareInput({
+        onInput: (input, key) => {
+            if (finishedRef.current || !isInputActive || availableRows <= 0 || isDone)
+                return;
+            if (key.ctrl && input === "c") {
+                finishedRef.current = true;
+                onCancel();
+                return;
+            }
+            if (key.escape) {
+                finishedRef.current = true;
+                onCancel();
                 return;
             }
-            if (key.backspace || key.delete) {
-                setBuffer((prev) => prev.slice(0, -1));
+            if (getPolicy() === "print") {
+                if (key.return) {
+                    finishedRef.current = true;
+                    onConfirm();
+                }
                 return;
             }
-            if (input && !Object.values(key).some(Boolean)) {
-                setBuffer((prev) => prev + input);
+            if (danger) {
+                if (key.return) {
+                    finishedRef.current = true;
+                    if (isDangerConfirmationInput(bufferRef.current)) {
+                        onConfirm();
+                    }
+                    else {
+                        onCancel();
+                    }
+                    return;
+                }
+                if (key.backspace || key.delete) {
+                    updateBuffer(deleteLastGrapheme);
+                    return;
+                }
+                if (isTextInputEvent(input, key)) {
+                    updateBuffer((previous) => previous + input);
+                }
             }
-        }
-        else {
-            if (key.return) {
+            else if (key.return) {
+                finishedRef.current = true;
                 onConfirm();
             }
-        }
+        },
+        onPaste: (input) => {
+            if (finishedRef.current ||
+                getPolicy() === "print" ||
+                danger === undefined ||
+                hasUnsafeTerminalControlCharacters(input)) {
+                return;
+            }
+            updateBuffer((previous) => previous + input);
+        },
+        isPasteActive: isInputActive && availableRows > 0 && !isDone,
     });
+    function updateBuffer(update) {
+        const nextBuffer = update(bufferRef.current);
+        bufferRef.current = nextBuffer;
+        setBuffer(nextBuffer);
+    }
+    if (availableRows <= 0) {
+        return null;
+    }
+    if (isDone) {
+        return React.createElement(CommandPreview, { command: command });
+    }
+    if (policy === "print") {
+        if (availableRows === 1) {
+            return (React.createElement(Box, { height: 1, maxHeight: 1, overflowX: "hidden", overflowY: "hidden" },
+                React.createElement(CommandPreview, { command: command, prefix: "\u4EC5\u8F93\u51FA:", prefixWidth: 7 }),
+                React.createElement(Box, { width: 8, flexShrink: 0 },
+                    React.createElement(Text, null, " Ent Esc"))));
+        }
+        return (React.createElement(Box, { flexDirection: "column" },
+            danger && availableRows >= 3 && (React.createElement(Text, { color: "red", wrap: "truncate-middle" },
+                "Risk: ",
+                toSingleLinePreview(danger.reason),
+                " [",
+                toSingleLinePreview(danger.rule),
+                "]")),
+            React.createElement(Text, { wrap: "truncate-middle" },
+                "\u4EC5\u8F93\u51FA: ",
+                toSingleLinePreview(command)),
+            React.createElement(Text, { wrap: "truncate-end" }, "Enter\u8F93\u51FA Esc\u53D6\u6D88")));
+    }
+    if (!danger && availableRows === 1) {
+        return (React.createElement(Box, { height: 1, maxHeight: 1, overflowX: "hidden", overflowY: "hidden" },
+            React.createElement(CommandPreview, { command: command }),
+            React.createElement(Box, { width: 10, flexShrink: 0 },
+                React.createElement(Text, null, " Enter Esc"))));
+    }
+    if (!danger && availableRows === 2) {
+        return (React.createElement(Box, { flexDirection: "column", height: 2, maxHeight: 2, overflowX: "hidden", overflowY: "hidden" },
+            React.createElement(CommandPreview, { command: command, prefix: "Final:", prefixWidth: 7 }),
+            React.createElement(Text, null, "Enter=run Esc=cancel")));
+    }
     if (danger) {
-        return (React.createElement(Box, { flexDirection: "column", marginY: 1 },
-            React.createElement(Text, { color: "red", bold: true }, "Dangerous command detected."),
-            React.createElement(Text, null,
-                "Rule: ",
-                danger.rule),
-            React.createElement(Text, null,
+        if (availableRows === 1) {
+            return (React.createElement(Box, { height: 1, maxHeight: 1, overflowX: "hidden", overflowY: "hidden" },
+                React.createElement(CommandPreview, { command: command, minWidth: 2 }),
+                React.createElement(Box, { width: 3, flexShrink: 0 },
+                    React.createElement(Text, null, "!X:")),
+                React.createElement(TailClippedBuffer, { buffer: buffer, width: 7 }),
+                React.createElement(Box, { width: 8, flexShrink: 0 },
+                    React.createElement(Text, null, " Ent Esc"))));
+        }
+        if (availableRows === 2) {
+            return (React.createElement(Box, { flexDirection: "column", height: 2, maxHeight: 2, overflowX: "hidden", overflowY: "hidden" },
+                React.createElement(CommandPreview, { command: command, prefix: "Danger:", prefixWidth: 8 }),
+                React.createElement(Box, { height: 1, maxHeight: 1, overflowX: "hidden", overflowY: "hidden" },
+                    React.createElement(Box, { width: 10, flexShrink: 0 },
+                        React.createElement(Text, null, "X=EXECUTE:")),
+                    React.createElement(TailClippedBuffer, { buffer: buffer, width: Math.max(1, columns - 18) }),
+                    React.createElement(Box, { width: 8, flexShrink: 0 },
+                        React.createElement(Text, null, " Ent Esc")))));
+        }
+        // 完整提示、确认短语和光标放不下时，缩短提示，为输入尾部保留空间。
+        const compactPrompt = columns < DANGER_CONFIRMATION_PHRASE.length * 2 + DANGER_CONFIRMATION_SUFFIX.length + 1;
+        const promptSuffix = compactPrompt ? ":" : DANGER_CONFIRMATION_SUFFIX;
+        const promptWidth = DANGER_CONFIRMATION_PHRASE.length + promptSuffix.length;
+        const controls = compactPrompt ? " Ent Esc" : "";
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { color: "red", bold: true, wrap: "truncate-middle" },
                 "Risk: ",
-                danger.reason),
-            React.createElement(Box, { marginTop: 1, flexDirection: "column" },
-                React.createElement(SelectedCommandDisplay, { candidate: candidate, resolvedValues: resolvedValues }),
-                React.createElement(Text, null,
-                    "Final command: ",
-                    React.createElement(Text, { color: "yellow" }, command))),
-            !isDone && (React.createElement(React.Fragment, null,
-                React.createElement(Box, { marginTop: 1 },
+                toSingleLinePreview(danger.reason),
+                " [",
+                toSingleLinePreview(danger.rule),
+                "]"),
+            React.createElement(Text, { wrap: "truncate-middle" },
+                "Final command: ",
+                React.createElement(Text, { color: "yellow" }, toSingleLinePreview(command))),
+            !isDone && (React.createElement(Box, { height: 1, maxHeight: 1, overflowX: "hidden", overflowY: "hidden" },
+                React.createElement(Box, { width: promptWidth, flexShrink: 0 },
                     React.createElement(Text, null,
-                        "Type ",
-                        React.createElement(Text, { color: "yellow" }, "EXECUTE"),
-                        " to continue, or anything else to cancel.")),
-                React.createElement(Box, null,
-                    React.createElement(Text, { color: "cyan" }, "> "),
-                    React.createElement(Text, null, buffer),
-                    React.createElement(Text, { backgroundColor: "white" }, " "))))));
+                        React.createElement(Text, { color: "yellow" }, DANGER_CONFIRMATION_PHRASE),
+                        promptSuffix)),
+                React.createElement(TailClippedBuffer, { buffer: buffer, width: Math.max(1, columns - promptWidth - controls.length), showCursor: true }),
+                controls !== "" && (React.createElement(Box, { width: controls.length, flexShrink: 0 },
+                    React.createElement(Text, null, controls)))))));
     }
-    return (React.createElement(Box, { flexDirection: "column", marginY: 1 },
-        React.createElement(SelectedCommandDisplay, { candidate: candidate, resolvedValues: resolvedValues }),
-        React.createElement(Text, null,
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Text, { wrap: "truncate-middle" },
             "Final command: ",
-            React.createElement(Text, { color: "yellow" }, command)),
-        !isDone && (React.createElement(Box, { marginTop: 1 },
-            React.createElement(Text, null,
-                "Press ",
-                React.createElement(Text, { color: "green" }, "Enter"),
-                " to execute, ",
-                React.createElement(Text, { color: "gray" }, "Esc"),
-                " or",
-                " ",
-                React.createElement(Text, { color: "gray" }, "Ctrl+C"),
-                " to cancel.")))));
+            React.createElement(Text, { color: "yellow" }, toSingleLinePreview(command))),
+        !isDone && (React.createElement(Text, { wrap: "truncate-end" },
+            React.createElement(Text, { color: "green" }, "Enter"),
+            " execute; ",
+            React.createElement(Text, { color: "gray" }, "Esc/Ctrl+C"),
+            " cancel."))));
 };
+const CommandPreview = ({ command, minWidth = 1, prefix, prefixWidth }) => (React.createElement(Box, { flexGrow: 1, flexShrink: 1, minWidth: minWidth, height: 1, maxHeight: 1, overflowX: "hidden", overflowY: "hidden" },
+    prefix !== undefined && (React.createElement(Box, { width: prefixWidth, flexShrink: 0 },
+        React.createElement(Text, null, prefix))),
+    React.createElement(Box, { flexGrow: 1, flexShrink: 1, minWidth: 1, height: 1, maxHeight: 1, overflowX: "hidden", overflowY: "hidden" },
+        React.createElement(Text, null, toSingleLinePreview(command)))));
+const TailClippedBuffer = ({ buffer, showCursor = false, width }) => (React.createElement(Box, { width: width, flexShrink: 0, height: 1, maxHeight: 1, justifyContent: "flex-end", overflowX: "hidden", overflowY: "hidden" },
+    React.createElement(Text, null,
+        toTailPreview(buffer, Math.max(0, width - (showCursor ? 1 : 0))),
+        showCursor && React.createElement(Text, { backgroundColor: "white" }, " "))));

package/dist/ui/InteractiveSessionProvider.js

@@ -0,0 +1,19 @@
+import React, { createContext, useContext, useEffect, useSyncExternalStore } from "react";
+const SessionContext = createContext(undefined);
+export const InteractiveSessionProvider = ({ session, children }) => {
+    useEffect(() => session.beginView(), [session]);
+    return React.createElement(SessionContext.Provider, { value: session }, children);
+};
+export function useInteractiveSession() {
+    const session = useContext(SessionContext);
+    if (!session)
+        throw new Error("交互视图必须使用受管理的终端会话。");
+    return session;
+}
+const subscribeWithoutSession = () => () => { };
+const keyboardPolicy = () => "execute";
+export function useExecutionPolicy() {
+    const session = useContext(SessionContext);
+    const policy = useSyncExternalStore(session?.subscribeExecutionPolicy ?? subscribeWithoutSession, session?.getExecutionPolicy ?? keyboardPolicy, keyboardPolicy);
+    return { policy, getPolicy: session?.getExecutionPolicy ?? keyboardPolicy };
+}

package/dist/ui/ResolvePlaceholdersView.js

@@ -1,46 +1,126 @@
-import React, { useState } from "react";
-import { Box, Text, useInput } from "ink";
+import React, { useRef, useState } from "react";
+import { Box, Text } from "ink";
+import { hasUnsafeTerminalControlCharacters } from "../terminal-text.js";
 import { SelectedCommandDisplay } from "./SelectedCommandDisplay.js";
+import { toSingleLinePreview, toTailPreview } from "./single-line-preview.js";
+import { isTextInputEvent } from "./text-input.js";
+import { usePasteAwareInput } from "./use-paste-aware-input.js";
 import { applyPlaceholderResolutionInput, createPlaceholderResolution, getPlaceholderResolutionView, } from "./placeholder-logic.js";
-export const ResolvePlaceholdersView = ({ candidate, onResolve, onBack, onCancel, }) => {
+export const ResolvePlaceholdersView = ({ candidate, availableRows, availableColumns, isInputActive = true, onResolve, onBack, onCancel, }) => {
     const [resolutionState, setResolutionState] = useState(() => createPlaceholderResolution(candidate));
+    const resolutionStateRef = useRef(resolutionState);
+    const finishedRef = useRef(false);
     const { currentPlaceholder, currentBuffer, resolvedValues } = getPlaceholderResolutionView(resolutionState);
-    useInput((input, key) => {
-        if (key.ctrl && input === "c") {
-            onCancel();
+    const handleResolutionInput = (resolutionInput) => {
+        if (finishedRef.current)
             return;
-        }
-        const resolutionInput = toPlaceholderResolutionInput(input, key);
-        if (!resolutionInput) {
-            return;
-        }
-        const transition = applyPlaceholderResolutionInput(resolutionState, resolutionInput);
+        const transition = applyPlaceholderResolutionInput(resolutionStateRef.current, resolutionInput);
         switch (transition.type) {
             case "editing":
+                resolutionStateRef.current = transition.state;
                 setResolutionState(transition.state);
                 return;
             case "back-to-selection":
+                finishedRef.current = true;
                 onBack();
                 return;
             case "complete":
+                finishedRef.current = true;
                 onResolve(transition.resolved);
                 return;
         }
+    };
+    usePasteAwareInput({
+        onInput: (input, key) => {
+            if (finishedRef.current || !isInputActive || availableRows <= 0)
+                return;
+            if (key.ctrl && input === "c") {
+                finishedRef.current = true;
+                onCancel();
+                return;
+            }
+            const resolutionInput = toPlaceholderResolutionInput(input, key);
+            if (resolutionInput !== undefined) {
+                handleResolutionInput(resolutionInput);
+            }
+        },
+        onPaste: (input) => {
+            if (hasUnsafeTerminalControlCharacters(input)) {
+                return;
+            }
+            handleResolutionInput({ type: "append", value: input });
+        },
+        isPasteActive: isInputActive && availableRows > 0,
     });
-    return (React.createElement(Box, { flexDirection: "column", marginY: 1 },
-        React.createElement(SelectedCommandDisplay, { candidate: candidate, resolvedValues: resolvedValues, currentBuffer: currentBuffer }),
-        React.createElement(Text, { color: "green" }, "? Fill command placeholders"),
-        React.createElement(Box, { flexDirection: "column", marginTop: 1 },
-            React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
-                React.createElement(Text, null,
-                    currentPlaceholder.name,
-                    ": ",
-                    currentPlaceholder.description),
-                React.createElement(Box, null,
-                    React.createElement(Text, { color: "cyan" }, "> "),
-                    React.createElement(Text, null, currentBuffer.value),
-                    React.createElement(Text, { backgroundColor: "white" }, " ")))),
-        React.createElement(Text, { dimColor: true }, "Press Enter for next value, Esc to go back, Ctrl+C to cancel.")));
+    if (availableRows <= 0) {
+        return null;
+    }
+    if (availableRows === 1) {
+        return (React.createElement(OneRowPlaceholderEditor, { placeholderName: currentPlaceholder.name, buffer: currentBuffer.value, availableColumns: availableColumns }));
+    }
+    if (availableRows === 2) {
+        return (React.createElement(Box, { flexDirection: "column", height: 2, maxHeight: 2, overflowX: "hidden", overflowY: "hidden" },
+            React.createElement(PlaceholderFieldLine, { name: currentPlaceholder.name, description: currentPlaceholder.description }),
+            React.createElement(CompactInputLine, { buffer: currentBuffer.value, availableColumns: availableColumns, controls: " Ent Esc" })));
+    }
+    const showHeading = availableRows >= 4;
+    const showSelectedCommand = availableRows >= 10;
+    return (React.createElement(Box, { flexDirection: "column", maxHeight: availableRows, overflowX: "hidden", overflowY: "hidden" },
+        showSelectedCommand && (React.createElement(SelectedCommandDisplay, { candidate: candidate, resolvedValues: resolvedValues, currentBuffer: currentBuffer })),
+        showHeading && (React.createElement(Text, { color: "green", wrap: "truncate-end" }, "? Fill command placeholders")),
+        React.createElement(PlaceholderFieldLine, { name: currentPlaceholder.name, description: currentPlaceholder.description }),
+        React.createElement(CompactInputLine, { buffer: currentBuffer.value, availableColumns: availableColumns }),
+        React.createElement(Text, { dimColor: true, wrap: "truncate-end" }, "Enter=next Esc=back")));
+};
+const COMPACT_CONTROLS = " Ent Esc";
+const COMPACT_CONTROLS_WIDTH = 8;
+const OneRowPlaceholderEditor = ({ placeholderName, buffer, availableColumns }) => {
+    const editableColumns = Math.max(0, availableColumns - COMPACT_CONTROLS_WIDTH);
+    const maximumLabelWidth = editableColumns <= 1 ? editableColumns : Math.max(1, Math.floor(editableColumns / 2));
+    const labelWidth = Math.min(maximumLabelWidth, toSingleLinePreview(placeholderName).length + 1);
+    const bufferWidth = Math.max(0, editableColumns - labelWidth);
+    return (React.createElement(Box, { height: 1, maxHeight: 1, overflowX: "hidden", overflowY: "hidden" },
+        React.createElement(ClippedPlaceholderLabel, { name: placeholderName, width: labelWidth }),
+        React.createElement(TailClippedPlaceholderBuffer, { buffer: buffer, width: bufferWidth }),
+        React.createElement(Box, { width: COMPACT_CONTROLS_WIDTH, flexShrink: 0 },
+            React.createElement(Text, null, COMPACT_CONTROLS))));
+};
+const PlaceholderFieldLine = ({ name, description, }) => (React.createElement(Text, { wrap: "truncate-end" },
+    React.createElement(Text, { color: "green" }, "? "),
+    toSingleLinePreview(name),
+    ": ",
+    toSingleLinePreview(description)));
+const CompactInputLine = ({ buffer, availableColumns, controls }) => {
+    const controlsWidth = controls === undefined ? 0 : COMPACT_CONTROLS_WIDTH;
+    const bufferWidth = Math.max(0, availableColumns - 2 - controlsWidth);
+    return (React.createElement(Box, { height: 1, maxHeight: 1, overflowX: "hidden", overflowY: "hidden" },
+        React.createElement(Box, { width: 2, flexShrink: 0 },
+            React.createElement(Text, { color: "cyan" }, "> ")),
+        React.createElement(TailClippedPlaceholderBuffer, { buffer: buffer, width: bufferWidth }),
+        controls !== undefined && (React.createElement(Box, { width: controlsWidth, flexShrink: 0 },
+            React.createElement(Text, null, controls)))));
+};
+const ClippedPlaceholderLabel = ({ name, width }) => {
+    if (width <= 0) {
+        return null;
+    }
+    if (width === 1) {
+        return (React.createElement(Box, { width: 1, flexShrink: 0, overflowX: "hidden" },
+            React.createElement(Text, null, toSingleLinePreview(name))));
+    }
+    return (React.createElement(Box, { width: width, flexShrink: 0, overflowX: "hidden" },
+        React.createElement(Text, null,
+            toSingleLinePreview(name).slice(0, width - 1),
+            ":")));
+};
+const TailClippedPlaceholderBuffer = ({ buffer, width, }) => {
+    if (width <= 0) {
+        return null;
+    }
+    return (React.createElement(Box, { width: width, flexShrink: 0, overflowX: "hidden", overflowY: "hidden" },
+        React.createElement(Text, null,
+            toTailPreview(buffer, Math.max(0, width - 1)),
+            React.createElement(Text, { backgroundColor: "white" }, " "))));
 };
 function toPlaceholderResolutionInput(input, key) {
     if (key.escape) {
@@ -52,7 +132,7 @@ function toPlaceholderResolutionInput(input, key) {
     if (key.backspace || key.delete) {
         return { type: "delete" };
     }
-    if (input && !Object.values(key).some(Boolean)) {
+    if (isTextInputEvent(input, key)) {
         return { type: "append", value: input };
     }
     return undefined;

package/dist/ui/SelectCommandView.js

@@ -1,39 +1,89 @@
-import React, { useState } from "react";
-import { Box, Text, useInput } from "ink";
-export const SelectCommandView = ({ candidates, onSelect, onCancel }) => {
+import React, { useRef, useState } from "react";
+import { Box, Text } from "ink";
+import { useKeyboardInput } from "./use-keyboard-input.js";
+import { toSingleLinePreview } from "./single-line-preview.js";
+export const SelectCommandView = ({ candidates, availableRows, isInputActive = true, onSelect, onCancel, }) => {
     const [activeIndex, setActiveIndex] = useState(0);
-    useInput((input, key) => {
+    const activeIndexRef = useRef(0);
+    const finishedRef = useRef(false);
+    function updateActiveIndex(update) {
+        const nextIndex = update(activeIndexRef.current);
+        activeIndexRef.current = nextIndex;
+        setActiveIndex(nextIndex);
+    }
+    useKeyboardInput((input, key) => {
+        if (finishedRef.current || !isInputActive || availableRows <= 0)
+            return;
         if (key.escape || (key.ctrl && input === "c")) {
+            finishedRef.current = true;
             onCancel();
             return;
         }
         if (key.upArrow) {
-            setActiveIndex((prev) => (prev - 1 + candidates.length) % candidates.length);
+            updateActiveIndex((prev) => (prev - 1 + candidates.length) % candidates.length);
         }
         if (key.downArrow) {
-            setActiveIndex((prev) => (prev + 1) % candidates.length);
+            updateActiveIndex((prev) => (prev + 1) % candidates.length);
         }
         if (key.return) {
-            onSelect(candidates[activeIndex]);
+            finishedRef.current = true;
+            onSelect(candidates[activeIndexRef.current]);
         }
     });
-    return (React.createElement(Box, { flexDirection: "column", marginY: 1 },
-        React.createElement(Text, { color: "green" }, "? Select a command"),
-        React.createElement(Box, { flexDirection: "column", marginTop: 1 }, candidates.map((candidate, index) => {
-            const isSelected = index === activeIndex;
-            const isLast = index === candidates.length - 1;
-            return (React.createElement(React.Fragment, { key: index },
-                React.createElement(Box, { flexDirection: "column", flexShrink: 0 },
-                    React.createElement(Box, null,
-                        React.createElement(Text, { color: isSelected ? "cyan" : undefined }, isSelected ? "> " : "  "),
-                        React.createElement(Text, { inverse: isSelected, bold: isSelected }, candidate.title)),
-                    React.createElement(Box, { paddingLeft: 4 },
-                        React.createElement(Text, { color: "gray" }, candidate.command)),
-                    React.createElement(Box, { paddingLeft: 4 },
-                        React.createElement(Text, { italic: true, color: "dim" }, candidate.description))),
+    if (availableRows <= 0) {
+        return null;
+    }
+    const currentCandidate = candidates[activeIndex];
+    const page = `${activeIndex + 1}/${candidates.length}`;
+    if (availableRows === 1) {
+        return (React.createElement(Box, { height: 1, maxHeight: 1, overflowX: "hidden", overflowY: "hidden" },
+            React.createElement(Box, { height: 1, maxHeight: 1, flexGrow: 1, flexShrink: 1, minWidth: 1, overflowX: "hidden", overflowY: "hidden" },
+                React.createElement(Text, { color: "gray" }, toSingleLinePreview(currentCandidate.command))),
+            React.createElement(Box, { flexShrink: 0 },
+                React.createElement(Text, { dimColor: true }, ` ${page} UD Enter Esc`))));
+    }
+    if (availableRows === 2) {
+        return (React.createElement(Box, { flexDirection: "column", maxHeight: 2, overflowX: "hidden", overflowY: "hidden" },
+            React.createElement(Box, { flexShrink: 0, overflowX: "hidden" },
+                React.createElement(Box, { flexShrink: 0 },
+                    React.createElement(Text, { color: "green" }, `? ${page} `)),
+                React.createElement(Box, { flexGrow: 1, flexShrink: 1, minWidth: 1, overflowX: "hidden" },
+                    React.createElement(Text, { color: "gray", wrap: "truncate-middle" }, toSingleLinePreview(currentCandidate.command)))),
+            React.createElement(Box, { flexShrink: 0 },
+                React.createElement(Text, { dimColor: true, wrap: "truncate-end" }, "\u2191\u2193; Enter; Esc/^C"))));
+    }
+    const expandedRows = candidates.length * 4 + 1;
+    const isCompact = availableRows < expandedRows;
+    const visibleCandidates = isCompact ? [currentCandidate] : candidates;
+    const showCompactTitleInHeader = isCompact && availableRows < 4;
+    const showTitle = !showCompactTitleInHeader;
+    const showDescription = !isCompact || availableRows >= 5;
+    const showCandidateSpacing = availableRows >= (isCompact ? 5 : expandedRows) + 2;
+    return (React.createElement(Box, { flexDirection: "column", maxHeight: availableRows, overflowX: "hidden", overflowY: "hidden" },
+        showCompactTitleInHeader ? (React.createElement(Text, { wrap: "truncate-end" },
+            React.createElement(Text, { color: "green" }, `? Select (${activeIndex + 1}/${candidates.length}) `),
+            React.createElement(Text, { inverse: true, bold: true }, toSingleLinePreview(currentCandidate.title)))) : (React.createElement(Text, { color: "green", wrap: "truncate-end" },
+            "? Select a command",
+            isCompact ? ` (${activeIndex + 1}/${candidates.length})` : "")),
+        React.createElement(Box, { flexDirection: "column", marginY: showCandidateSpacing ? 1 : 0, overflowY: "hidden" }, visibleCandidates.map((candidate, visibleIndex) => {
+            const candidateIndex = isCompact ? activeIndex : visibleIndex;
+            const isLast = visibleIndex === visibleCandidates.length - 1;
+            return (React.createElement(React.Fragment, { key: candidateIndex },
+                React.createElement(CommandCandidate, { candidate: candidate, isSelected: candidateIndex === activeIndex, showTitle: showTitle, showDescription: showDescription }),
                 !isLast && (React.createElement(Box, { height: 1, flexShrink: 0 },
                     React.createElement(Text, null, " ")))));
         })),
-        React.createElement(Box, { flexShrink: 0, marginTop: 1 },
-            React.createElement(Text, { dimColor: true }, "Use Up/Down to move, Enter to select, Esc or Ctrl+C to cancel."))));
+        React.createElement(Box, { flexShrink: 0 },
+            React.createElement(Text, { dimColor: true, wrap: "truncate-end" }, showCompactTitleInHeader
+                ? "↑↓; Enter; Esc/^C"
+                : "Up/Down move; Enter select; Esc/Ctrl+C cancel."))));
 };
+const CommandCandidate = ({ candidate, isSelected, showTitle, showDescription, }) => (React.createElement(Box, { flexDirection: "column", flexShrink: 0 },
+    showTitle && (React.createElement(Box, null,
+        React.createElement(Text, { color: isSelected ? "cyan" : undefined }, isSelected ? "> " : "  "),
+        React.createElement(Box, { flexGrow: 1, overflowX: "hidden" },
+            React.createElement(Text, { inverse: isSelected, bold: isSelected, wrap: "truncate-end" }, toSingleLinePreview(candidate.title))))),
+    React.createElement(Box, { paddingLeft: 4, flexGrow: 1, flexShrink: 1, minWidth: 1, overflowX: "hidden" },
+        React.createElement(Text, { color: "gray", wrap: "truncate-middle" }, toSingleLinePreview(candidate.command))),
+    showDescription && (React.createElement(Box, { paddingLeft: 4 },
+        React.createElement(Text, { italic: true, color: "dim", wrap: "truncate-end" }, toSingleLinePreview(candidate.description))))));

package/dist/ui/SelectedCommandDisplay.js

@@ -1,31 +1,33 @@
 import React from "react";
 import { Box, Text } from "ink";
+import { toSingleLinePreview } from "./single-line-preview.js";
 export const SelectedCommandDisplay = ({ candidate, resolvedValues, currentBuffer, }) => {
     // Split command by {{placeholder}} pattern, keeping the delimiters
     const parts = candidate.command.split(/({{.*?}})/);
     return (React.createElement(Box, { flexDirection: "column", marginBottom: 1, borderStyle: "round", borderColor: "cyan", paddingX: 1 },
         React.createElement(Box, null,
             React.createElement(Text, { color: "cyan", bold: true }, "> "),
-            React.createElement(Text, { bold: true }, candidate.title)),
-        React.createElement(Box, { marginLeft: 2 },
-            React.createElement(Text, null, parts.map((part, index) => {
+            React.createElement(Box, { flexGrow: 1, overflowX: "hidden" },
+                React.createElement(Text, { bold: true, wrap: "truncate-end" }, toSingleLinePreview(candidate.title)))),
+        React.createElement(Box, { marginLeft: 2, overflowX: "hidden" },
+            React.createElement(Text, { wrap: "truncate-middle" }, parts.map((part, index) => {
                 const match = part.match(/^{{(.*)}}$/);
                 if (match) {
                     const placeholderName = match[1];
                     // If it's the current buffer, show the buffer in yellow
                     if (currentBuffer && currentBuffer.name === placeholderName) {
-                        return (React.createElement(Text, { key: index, color: "yellow" }, currentBuffer.value || part));
+                        return (React.createElement(Text, { key: index, color: "yellow" }, toSingleLinePreview(currentBuffer.value || part)));
                     }
                     // If it's already resolved, show the value in yellow
                     if (resolvedValues.has(placeholderName)) {
-                        return (React.createElement(Text, { key: index, color: "yellow" }, resolvedValues.get(placeholderName)));
+                        return (React.createElement(Text, { key: index, color: "yellow" }, toSingleLinePreview(resolvedValues.get(placeholderName) ?? "")));
                     }
                     // Otherwise show the original {{placeholder}} in default gray
-                    return (React.createElement(Text, { key: index, color: "gray" }, part));
+                    return (React.createElement(Text, { key: index, color: "gray" }, toSingleLinePreview(part)));
                 }
                 // Normal text
-                return React.createElement(Text, { key: index }, part);
+                return React.createElement(Text, { key: index }, toSingleLinePreview(part));
             }))),
-        React.createElement(Box, { marginLeft: 2 },
-            React.createElement(Text, { italic: true, color: "dim" }, candidate.description))));
+        React.createElement(Box, { marginLeft: 2, overflowX: "hidden" },
+            React.createElement(Text, { italic: true, color: "dim", wrap: "truncate-end" }, toSingleLinePreview(candidate.description)))));
 };