@travisennis/acai 0.0.5 → 0.0.7

package/dist/tui/components/modal.js

@@ -0,0 +1,263 @@
+import { getTerminalSize } from "../../terminal/formatting.js";
+import style from "../../terminal/style.js";
+import { Container } from "../tui.js";
+import { visibleWidth } from "../utils.js";
+/**
+ * Modal component - displays content in an overlay on top of the main UI
+ */
+export class Modal extends Container {
+    title;
+    backdrop;
+    onClose;
+    maxWidth;
+    maxHeight;
+    scrollPosition = 0;
+    constructor(title, content, backdrop = true, onClose, maxWidth, maxHeight) {
+        super();
+        this.title = title;
+        this.backdrop = backdrop;
+        this.onClose = onClose;
+        const { columns, rows } = getTerminalSize();
+        this.maxWidth = maxWidth ?? columns;
+        this.maxHeight = maxHeight ?? rows;
+        this.addChild(content);
+    }
+    handleInput(data) {
+        // Handle Escape key to close modal
+        if (data === "\x1b") {
+            this.close();
+            return;
+        }
+        // Handle scrolling
+        if (data === "\x1b[A") {
+            // Up arrow
+            this.scrollPosition = Math.max(0, this.scrollPosition - 1);
+            return;
+        }
+        if (data === "\x1b[B") {
+            // Down arrow
+            this.scrollPosition += 1;
+            return;
+        }
+        if (data === "\x1b[5~") {
+            // Page up
+            this.scrollPosition = Math.max(0, this.scrollPosition - 10);
+            return;
+        }
+        if (data === "\x1b[6~") {
+            // Page down
+            this.scrollPosition += 10;
+            return;
+        }
+        if (data === "\x1b[H" || data === "g") {
+            // Home key or 'g' for top
+            this.scrollPosition = 0;
+            return;
+        }
+        if (data === "\x1b[F" || data === "G") {
+            // End key or 'G' for bottom
+            this.scrollPosition = Number.POSITIVE_INFINITY; // Will be clamped in render
+            return;
+        }
+        // Pass input to focused child component
+        if (this.children.length > 0) {
+            const focusedChild = this.children[0];
+            if (focusedChild.handleInput) {
+                focusedChild.handleInput(data);
+            }
+        }
+    }
+    close() {
+        if (this.onClose) {
+            this.onClose();
+        }
+    }
+    render(width) {
+        const lines = [];
+        // Calculate modal dimensions - use dynamic sizing
+        // Use the provided width directly, ensuring reasonable minimum and maximum
+        const modalWidth = Math.max(40, width - 2);
+        const contentWidth = modalWidth - 4; // Account for borders and padding
+        // Calculate content height
+        const contentLines = super.render(contentWidth);
+        const contentHeight = contentLines.length;
+        // Calculate modal height based on content
+        const modalHeight = Math.min(this.maxHeight, Math.max(8, contentHeight + 4));
+        // Calculate vertical positioning (centered)
+        const { rows } = getTerminalSize();
+        const terminalHeight = rows;
+        const topOffset = Math.max(0, Math.floor((terminalHeight - modalHeight) / 2));
+        // Add top offset for centering
+        for (let i = 0; i < topOffset; i++) {
+            lines.push(" ".repeat(width));
+        }
+        // Render modal frame
+        const horizontalBorder = style.white("─".repeat(modalWidth - 2));
+        const emptyLine = style.white("│") + " ".repeat(modalWidth - 2) + style.white("│");
+        // Calculate horizontal offset for centering
+        // Use different offsets for left and right to ensure full width coverage
+        const leftOffset = Math.floor((width - modalWidth) / 2);
+        const rightOffset = width - modalWidth - leftOffset;
+        // Top border
+        lines.push(" ".repeat(leftOffset) +
+            style.white("┌") +
+            horizontalBorder +
+            style.white("┐") +
+            " ".repeat(rightOffset));
+        // Render content lines with scrolling support
+        const visibleContentHeight = Math.min(contentHeight, modalHeight - 4);
+        const maxScroll = Math.max(0, contentHeight - visibleContentHeight);
+        // Clamp scroll position
+        this.scrollPosition = Math.min(maxScroll, Math.max(0, this.scrollPosition));
+        // Add scroll indicator to title if content is scrollable
+        let displayTitle = this.title;
+        if (contentHeight > visibleContentHeight) {
+            const scrollInfo = ` (${this.scrollPosition + 1}-${Math.min(this.scrollPosition + visibleContentHeight, contentHeight)}/${contentHeight})`;
+            displayTitle = this.title + scrollInfo;
+        }
+        displayTitle += " [esc to exit]";
+        // Update title line with scroll info
+        const titleText = ` ${displayTitle} `;
+        const titlePadding = Math.max(0, modalWidth - 2 - visibleWidth(titleText));
+        const titleLine = style.white("│") +
+            style.bold(titleText) +
+            " ".repeat(titlePadding) +
+            style.white("│");
+        lines.push(" ".repeat(leftOffset) + titleLine + " ".repeat(rightOffset));
+        // Separator line
+        const separator = style.white("├") + "─".repeat(modalWidth - 2) + style.white("┤");
+        lines.push(" ".repeat(leftOffset) + separator + " ".repeat(rightOffset));
+        for (let i = 0; i < visibleContentHeight; i++) {
+            const contentLineIndex = this.scrollPosition + i;
+            const contentLine = contentLines[contentLineIndex] || "";
+            const visibleLength = visibleWidth(contentLine);
+            const padding = " ".repeat(Math.max(0, contentWidth - visibleLength));
+            const line = `${style.white("│")} ${contentLine}${padding} ${style.white("│")}`;
+            lines.push(" ".repeat(leftOffset) + line + " ".repeat(rightOffset));
+        }
+        // Fill remaining content area with empty lines if needed
+        const remainingLines = modalHeight - 4 - visibleContentHeight;
+        for (let i = 0; i < remainingLines; i++) {
+            lines.push(" ".repeat(leftOffset) + emptyLine + " ".repeat(rightOffset));
+        }
+        // Bottom border
+        lines.push(" ".repeat(leftOffset) +
+            style.white("└") +
+            horizontalBorder +
+            style.white("┘") +
+            " ".repeat(rightOffset));
+        // Fill remaining terminal height with empty lines
+        const totalLinesSoFar = lines.length;
+        const remainingTerminalLines = Math.max(0, terminalHeight - totalLinesSoFar);
+        for (let i = 0; i < remainingTerminalLines; i++) {
+            lines.push(" ".repeat(width));
+        }
+        return lines;
+    }
+    getCursorPosition() {
+        // Modal doesn't have its own cursor, but children might
+        if (this.children.length > 0) {
+            const childCursor = this.children[0].getCursorPosition?.();
+            if (childCursor) {
+                // Adjust cursor position for modal frame and centering
+                const [childRow, childCol] = childCursor;
+                const modalWidth = Math.min(this.maxWidth, 80 - 4);
+                const horizontalOffset = Math.floor((80 - modalWidth) / 2);
+                // Top padding + title + separator + content offset
+                const { columns } = getTerminalSize();
+                const terminalHeight = columns;
+                const modalHeight = Math.min(this.maxHeight, terminalHeight - 4);
+                const topPadding = Math.max(0, Math.floor((terminalHeight - modalHeight) / 2));
+                return [
+                    topPadding + 3 + childRow, // 3 = top border + title + separator
+                    horizontalOffset + 2 + childCol, // 2 = left border + padding
+                ];
+            }
+        }
+        return null;
+    }
+}
+/**
+ * ModalText component - displays text content in a modal with word wrapping
+ */
+export class ModalText extends Container {
+    text;
+    paddingX;
+    paddingY;
+    constructor(text, paddingX = 1, paddingY = 0) {
+        super();
+        this.text = text;
+        this.paddingX = paddingX;
+        this.paddingY = paddingY;
+    }
+    render(width) {
+        const lines = [];
+        const contentWidth = Math.max(1, width - this.paddingX * 2);
+        if (!this.text || this.text.trim() === "") {
+            return [];
+        }
+        // Replace tabs with spaces
+        const normalizedText = this.text.replace(/\t/g, "   ");
+        const textLines = normalizedText.split("\n");
+        for (const line of textLines) {
+            const visibleLineLength = visibleWidth(line);
+            if (visibleLineLength <= contentWidth) {
+                lines.push(line);
+            }
+            else {
+                // Word wrap
+                const words = line.split(" ");
+                let currentLine = "";
+                for (const word of words) {
+                    const currentVisible = visibleWidth(currentLine);
+                    const wordVisible = visibleWidth(word);
+                    let finalWord = word;
+                    if (wordVisible > contentWidth) {
+                        // Truncate word to fit
+                        let truncated = "";
+                        for (const char of word) {
+                            if (visibleWidth(truncated + char) > contentWidth) {
+                                break;
+                            }
+                            truncated += char;
+                        }
+                        finalWord = truncated;
+                    }
+                    if (currentVisible === 0) {
+                        currentLine = finalWord;
+                    }
+                    else if (currentVisible + 1 + visibleWidth(finalWord) <=
+                        contentWidth) {
+                        currentLine += ` ${finalWord}`;
+                    }
+                    else {
+                        lines.push(currentLine);
+                        currentLine = finalWord;
+                    }
+                }
+                if (currentLine.length > 0) {
+                    lines.push(currentLine);
+                }
+            }
+        }
+        // Add padding
+        const leftPad = " ".repeat(this.paddingX);
+        const paddedLines = [];
+        // Top padding
+        for (let i = 0; i < this.paddingY; i++) {
+            paddedLines.push("");
+        }
+        // Content with horizontal padding
+        for (const line of lines) {
+            const visibleLength = visibleWidth(line);
+            const rightPadLength = Math.max(0, width - this.paddingX - visibleLength);
+            const rightPad = " ".repeat(rightPadLength);
+            paddedLines.push(leftPad + line + rightPad);
+        }
+        // Bottom padding
+        for (let i = 0; i < this.paddingY; i++) {
+            paddedLines.push("");
+        }
+        return paddedLines;
+    }
+}

package/dist/tui/components/progress-bar.d.ts

@@ -0,0 +1,19 @@
+import type { Component } from "../tui.ts";
+/**
+ * Progress bar component - displays a visual progress indicator
+ */
+export declare class ProgressBarComponent implements Component {
+    private current;
+    private total;
+    private width;
+    private cachedOutput?;
+    private cachedCurrent?;
+    private cachedTotal?;
+    private cachedWidth?;
+    constructor(current: number, total: number, width: number);
+    setCurrent(current: number): void;
+    setTotal(total: number): void;
+    private invalidateCache;
+    render(width: number): string[];
+}
+//# sourceMappingURL=progress-bar.d.ts.map

package/dist/tui/components/progress-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../source/tui/components/progress-bar.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3C;;GAEG;AACH,qBAAa,oBAAqB,YAAW,SAAS;IACpD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,KAAK,CAAS;IAGtB,OAAO,CAAC,YAAY,CAAC,CAAW;IAChC,OAAO,CAAC,aAAa,CAAC,CAAS;IAC/B,OAAO,CAAC,WAAW,CAAC,CAAS;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAS;gBAEjB,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAMzD,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAKjC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,OAAO,CAAC,eAAe;IAOvB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;CA+DhC"}

package/dist/tui/components/progress-bar.js

@@ -0,0 +1,78 @@
+import style from "../../terminal/style.js";
+/**
+ * Progress bar component - displays a visual progress indicator
+ */
+export class ProgressBarComponent {
+    current;
+    total;
+    width;
+    // Cache for rendered output
+    cachedOutput;
+    cachedCurrent;
+    cachedTotal;
+    cachedWidth;
+    constructor(current, total, width) {
+        this.current = current;
+        this.total = total;
+        this.width = width;
+    }
+    setCurrent(current) {
+        this.current = current;
+        this.invalidateCache();
+    }
+    setTotal(total) {
+        this.total = total;
+        this.invalidateCache();
+    }
+    invalidateCache() {
+        this.cachedOutput = undefined;
+        this.cachedCurrent = undefined;
+        this.cachedTotal = undefined;
+        this.cachedWidth = undefined;
+    }
+    render(width) {
+        // Use provided width if specified, otherwise use component width
+        const renderWidth = width || this.width;
+        // Check cache
+        if (this.cachedOutput &&
+            this.cachedCurrent === this.current &&
+            this.cachedTotal === this.total &&
+            this.cachedWidth === renderWidth) {
+            return this.cachedOutput;
+        }
+        // Function to format numbers concisely (e.g., 1.2K, 5M)
+        const formatNumber = (num) => {
+            if (num < 1000) {
+                return num.toString();
+            }
+            if (num < 1_000_000) {
+                return `${(num / 1000).toFixed(1)}K`;
+            }
+            if (num < 1_000_000_000) {
+                return `${(num / 1_000_000).toFixed(1)}M`;
+            }
+            return `${(num / 1_000_000_000).toFixed(1)}G`;
+        };
+        const currentFormatted = formatNumber(this.current);
+        const totalFormatted = formatNumber(this.total);
+        const progressText = `${currentFormatted}/${totalFormatted}`;
+        const progressTextLength = progressText.length + 1; // Add 1 for space
+        const progressBarMaxWidth = Math.max(1, renderWidth - progressTextLength);
+        const percentage = this.total === 0 ? 1 : this.current / this.total;
+        const filledWidth = Math.max(0, Math.min(progressBarMaxWidth, Math.floor(percentage * progressBarMaxWidth)));
+        const emptyWidth = Math.max(0, progressBarMaxWidth - filledWidth);
+        const a = filledWidth / progressBarMaxWidth > 0.5
+            ? style.red("─")
+            : style.yellow("─");
+        const b = style.gray("─");
+        const filledBar = a.repeat(filledWidth);
+        const emptyBar = b.repeat(emptyWidth);
+        const result = [`${filledBar}${emptyBar} ${progressText}`];
+        // Update cache
+        this.cachedOutput = result;
+        this.cachedCurrent = this.current;
+        this.cachedTotal = this.total;
+        this.cachedWidth = renderWidth;
+        return result;
+    }
+}

package/dist/tui/components/prompt-status.d.ts

@@ -0,0 +1,17 @@
+import type { ModelManager } from "../../models/manager.ts";
+import type { Component } from "../tui.ts";
+type State = {
+    projectStatus: string;
+    currentContextWindow: number;
+    contextWindow: number;
+};
+export declare class PromptStatusComponent implements Component {
+    private modelManager;
+    private state;
+    private progressBar;
+    constructor(modelManager: ModelManager, state: State);
+    setState(state: State): void;
+    render(width: number): string[];
+}
+export {};
+//# sourceMappingURL=prompt-status.d.ts.map

package/dist/tui/components/prompt-status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prompt-status.d.ts","sourceRoot":"","sources":["../../../source/tui/components/prompt-status.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAG3C,KAAK,KAAK,GAAG;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,qBAAa,qBAAsB,YAAW,SAAS;IACrD,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,KAAK,CAAQ;IACrB,OAAO,CAAC,WAAW,CAAuB;gBAC9B,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK;IAUpD,QAAQ,CAAC,KAAK,EAAE,KAAK;IAMrB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;CAahC"}

package/dist/tui/components/prompt-status.js

@@ -0,0 +1,26 @@
+import style from "../../terminal/style.js";
+import { ProgressBarComponent } from "./progress-bar.js";
+export class PromptStatusComponent {
+    modelManager;
+    state;
+    progressBar;
+    constructor(modelManager, state) {
+        this.modelManager = modelManager;
+        this.state = state;
+        this.progressBar = new ProgressBarComponent(state.currentContextWindow, state.contextWindow, 0);
+    }
+    setState(state) {
+        this.state = state;
+        this.progressBar.setCurrent(state.currentContextWindow);
+        this.progressBar.setTotal(state.contextWindow);
+    }
+    render(width) {
+        const results = [];
+        // results.push(style.dim(hr(width)));
+        results.push(this.state.projectStatus);
+        results.push(style.dim(`${this.modelManager.getModelMetadata("repl").id} [${this.modelManager.getModel("repl").modelId}]`));
+        // Add progress bar output
+        results.push(...this.progressBar.render(width));
+        return results;
+    }
+}

package/dist/tui/components/select-list.d.ts

@@ -0,0 +1,48 @@
+import type { Component } from "../tui.ts";
+/**
+ * Check if key data represents Shift+Tab.
+ * Supports multiple terminal escape sequences:
+ * - \x1b[Z (standard)
+ * - \x1b[1;2Z (with modifier)
+ */
+export declare function isShiftTab(keyData: string): boolean;
+/**
+ * Check if key data represents Tab (without Shift).
+ */
+export declare function isTab(keyData: string): boolean;
+/**
+ * Check if key data represents navigation key (arrows, Tab, Shift+Tab).
+ */
+export declare function isNavigationKey(keyData: string): boolean;
+export interface SelectItem {
+    value: string;
+    label: string;
+    description?: string;
+}
+export interface SelectListTheme {
+    selectedPrefix: (text: string) => string;
+    selectedText: (text: string) => string;
+    description: (text: string) => string;
+    scrollInfo: (text: string) => string;
+    noMatch: (text: string) => string;
+}
+export declare class SelectList implements Component {
+    private items;
+    private filteredItems;
+    private selectedIndex;
+    private maxVisible;
+    private theme;
+    onSelect?: (item: SelectItem) => void;
+    onCancel?: () => void;
+    onSelectionChange?: (item: SelectItem) => void;
+    constructor(items: SelectItem[], maxVisible?: number, theme?: SelectListTheme);
+    private createDefaultTheme;
+    updateItems(items: SelectItem[]): void;
+    setFilter(filter: string): void;
+    setSelectedIndex(index: number): void;
+    render(width: number): string[];
+    handleInput(keyData: string): void;
+    private notifySelectionChange;
+    getSelectedItem(): SelectItem | null;
+}
+//# sourceMappingURL=select-list.d.ts.map

package/dist/tui/components/select-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-list.d.ts","sourceRoot":"","sources":["../../../source/tui/components/select-list.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAG3C;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAEnD;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAE9C;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAOxD;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACnC;AAED,qBAAa,UAAW,YAAW,SAAS;IAC1C,OAAO,CAAC,KAAK,CAAoB;IACjC,OAAO,CAAC,aAAa,CAAoB;IACzC,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,KAAK,CAAkB;IAExB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;gBAE1C,KAAK,EAAE,UAAU,EAAE,EAAE,UAAU,SAAI,EAAE,KAAK,CAAC,EAAE,eAAe;IAOxE,OAAO,CAAC,kBAAkB;IAU1B,WAAW,CAAC,KAAK,EAAE,UAAU,EAAE;IAQ/B,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAQ/B,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAOrC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;IAgI/B,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAgDlC,OAAO,CAAC,qBAAqB;IAO7B,eAAe,IAAI,UAAU,GAAG,IAAI;CAIrC"}

package/dist/tui/components/select-list.js

@@ -0,0 +1,207 @@
+import style from "../../terminal/style.js";
+import { truncateToWidth } from "../utils.js";
+/**
+ * Check if key data represents Shift+Tab.
+ * Supports multiple terminal escape sequences:
+ * - \x1b[Z (standard)
+ * - \x1b[1;2Z (with modifier)
+ */
+export function isShiftTab(keyData) {
+    return keyData === "\x1b[Z" || keyData === "\x1b[1;2Z";
+}
+/**
+ * Check if key data represents Tab (without Shift).
+ */
+export function isTab(keyData) {
+    return keyData === "\t";
+}
+/**
+ * Check if key data represents navigation key (arrows, Tab, Shift+Tab).
+ */
+export function isNavigationKey(keyData) {
+    return (keyData === "\x1b[A" ||
+        keyData === "\x1b[B" ||
+        isTab(keyData) ||
+        isShiftTab(keyData));
+}
+export class SelectList {
+    items = [];
+    filteredItems = [];
+    selectedIndex = 0;
+    maxVisible = 5;
+    theme;
+    onSelect;
+    onCancel;
+    onSelectionChange;
+    constructor(items, maxVisible = 5, theme) {
+        this.items = items;
+        this.filteredItems = items;
+        this.maxVisible = maxVisible;
+        this.theme = theme || this.createDefaultTheme();
+    }
+    createDefaultTheme() {
+        return {
+            selectedPrefix: (text) => style.blue(text),
+            selectedText: (text) => style.blue(text),
+            description: (text) => style.gray(text),
+            scrollInfo: (text) => style.gray(text),
+            noMatch: (text) => style.gray(text),
+        };
+    }
+    updateItems(items) {
+        this.items = items;
+        this.filteredItems = items;
+        // Reset selection to first item when items change
+        this.setSelectedIndex(0);
+        this.notifySelectionChange();
+    }
+    setFilter(filter) {
+        this.filteredItems = this.items.filter((item) => item.value.toLowerCase().startsWith(filter.toLowerCase()));
+        // Reset selection when filter changes
+        this.selectedIndex = 0;
+    }
+    setSelectedIndex(index) {
+        this.selectedIndex = Math.max(0, Math.min(index, this.filteredItems.length - 1));
+    }
+    render(width) {
+        const lines = [];
+        // If no items match filter, show message
+        if (this.filteredItems.length === 0) {
+            lines.push(this.theme.noMatch("  No matching commands"));
+            return lines;
+        }
+        // Calculate visible range with scrolling
+        const startIndex = Math.max(0, Math.min(this.selectedIndex - Math.floor(this.maxVisible / 2), this.filteredItems.length - this.maxVisible));
+        const endIndex = Math.min(startIndex + this.maxVisible, this.filteredItems.length);
+        // Render visible items
+        for (let i = startIndex; i < endIndex; i++) {
+            const item = this.filteredItems[i];
+            if (!item)
+                continue;
+            const isSelected = i === this.selectedIndex;
+            let line = "";
+            if (isSelected) {
+                // Use arrow indicator for selection - entire line uses selectedText color
+                const prefixWidth = 2; // "→ " is 2 characters visually
+                const displayValue = item.label || item.value;
+                if (item.description && width > 40) {
+                    // Calculate how much space we have for value + description
+                    const maxValueWidth = Math.min(30, width - prefixWidth - 4);
+                    const truncatedValue = truncateToWidth(displayValue, maxValueWidth, "");
+                    const spacing = " ".repeat(Math.max(1, 32 - truncatedValue.length));
+                    // Calculate remaining space for description using visible widths
+                    const descriptionStart = prefixWidth + truncatedValue.length + spacing.length;
+                    const remainingWidth = width - descriptionStart - 2; // -2 for safety
+                    if (remainingWidth > 10) {
+                        const truncatedDesc = truncateToWidth(item.description, remainingWidth, "");
+                        // Apply selectedText to entire line content
+                        line = this.theme.selectedText(`→ ${truncatedValue}${spacing}${truncatedDesc}`);
+                    }
+                    else {
+                        // Not enough space for description
+                        const maxWidth = width - prefixWidth - 2;
+                        line = this.theme.selectedText(`→ ${truncateToWidth(displayValue, maxWidth, "")}`);
+                    }
+                }
+                else {
+                    // No description or not enough width
+                    const maxWidth = width - prefixWidth - 2;
+                    line = this.theme.selectedText(`→ ${truncateToWidth(displayValue, maxWidth, "")}`);
+                }
+            }
+            else {
+                const displayValue = item.label || item.value;
+                const prefix = "  ";
+                if (item.description && width > 40) {
+                    // Calculate how much space we have for value + description
+                    const maxValueWidth = Math.min(30, width - prefix.length - 4);
+                    const truncatedValue = truncateToWidth(displayValue, maxValueWidth, "");
+                    const spacing = " ".repeat(Math.max(1, 32 - truncatedValue.length));
+                    // Calculate remaining space for description
+                    const descriptionStart = prefix.length + truncatedValue.length + spacing.length;
+                    const remainingWidth = width - descriptionStart - 2; // -2 for safety
+                    if (remainingWidth > 10) {
+                        const truncatedDesc = truncateToWidth(item.description, remainingWidth, "");
+                        const descText = this.theme.description(spacing + truncatedDesc);
+                        line = prefix + truncatedValue + descText;
+                    }
+                    else {
+                        // Not enough space for description
+                        const maxWidth = width - prefix.length - 2;
+                        line = prefix + truncateToWidth(displayValue, maxWidth, "");
+                    }
+                }
+                else {
+                    // No description or not enough width
+                    const maxWidth = width - prefix.length - 2;
+                    line = prefix + truncateToWidth(displayValue, maxWidth, "");
+                }
+            }
+            lines.push(line);
+        }
+        // Add scroll indicators if needed
+        if (startIndex > 0 || endIndex < this.filteredItems.length) {
+            const scrollText = `  (${this.selectedIndex + 1}/${this.filteredItems.length})`;
+            // Truncate if too long for terminal
+            lines.push(this.theme.scrollInfo(truncateToWidth(scrollText, width - 2, "")));
+        }
+        return lines;
+    }
+    handleInput(keyData) {
+        // Up arrow - wrap to bottom when at top
+        if (keyData === "\x1b[A") {
+            this.selectedIndex =
+                this.selectedIndex === 0
+                    ? this.filteredItems.length - 1
+                    : this.selectedIndex - 1;
+            this.notifySelectionChange();
+        }
+        // Down arrow - wrap to top when at bottom
+        else if (keyData === "\x1b[B") {
+            this.selectedIndex =
+                this.selectedIndex === this.filteredItems.length - 1
+                    ? 0
+                    : this.selectedIndex + 1;
+            this.notifySelectionChange();
+        }
+        // Tab - move down with wrapping (like down arrow)
+        else if (isTab(keyData)) {
+            this.selectedIndex =
+                this.selectedIndex === this.filteredItems.length - 1
+                    ? 0
+                    : this.selectedIndex + 1;
+            this.notifySelectionChange();
+        }
+        // Shift+Tab - move up with wrapping (like up arrow)
+        else if (isShiftTab(keyData)) {
+            this.selectedIndex =
+                this.selectedIndex === 0
+                    ? this.filteredItems.length - 1
+                    : this.selectedIndex - 1;
+            this.notifySelectionChange();
+        }
+        // Enter
+        else if (keyData === "\r") {
+            const selectedItem = this.filteredItems[this.selectedIndex];
+            if (selectedItem && this.onSelect) {
+                this.onSelect(selectedItem);
+            }
+        }
+        // Escape or Ctrl+C
+        else if (keyData === "\x1b" || keyData === "\x03") {
+            if (this.onCancel) {
+                this.onCancel();
+            }
+        }
+    }
+    notifySelectionChange() {
+        const selectedItem = this.filteredItems[this.selectedIndex];
+        if (selectedItem && this.onSelectionChange) {
+            this.onSelectionChange(selectedItem);
+        }
+    }
+    getSelectedItem() {
+        const item = this.filteredItems[this.selectedIndex];
+        return item || null;
+    }
+}