@travisennis/acai 0.0.9 → 0.0.11

package/dist/tui/components/footer.js

@@ -1,6 +1,6 @@
-import { formatDuration, formatNumber } from "../../formatting.js";
 import { getTerminalSize } from "../../terminal/control.js";
 import style from "../../terminal/style.js";
+import { formatDuration, formatNumber } from "../../utils/formatting.js";
 import { visibleWidth } from "../tui.js";
 import { ProgressBarComponent } from "./progress-bar.js";
 function formatProjectStatus(status) {
@@ -12,10 +12,13 @@ function formatProjectStatus(status) {
         const end = path.slice(-(Math.floor(maxPathLength / 2) - 1));
         path = `${start}...${end}`;
     }
-    let result = style.blue(path);
+    const line1 = style.blue(path);
+    // Line 2: git information
     if (status.isGitRepository && status.branch) {
-        const asterisk = status.hasChanges ? "*" : "";
-        result += ` ${style.gray(status.branch + asterisk)}`;
+        let branchDisplay = status.branch;
+        if (status.unpushedCommits > 0) {
+            branchDisplay += ` ${style.cyan(`↑${status.unpushedCommits}`)}`;
+        }
         let fileStatus = "";
         if (status.fileChanges.added)
             fileStatus += ` +${status.fileChanges.added}`;
@@ -25,22 +28,23 @@ function formatProjectStatus(status) {
             fileStatus += ` -${status.fileChanges.deleted}`;
         if (status.fileChanges.untracked)
             fileStatus += ` ?${status.fileChanges.untracked}`;
-        result +=
-            " " +
-                `${style.dim("[")}${style.yellow(fileStatus.trim())} ` +
-                `${style.green(`+${status.diffStats.insertions}`)} ` +
-                `${style.red(`-${status.diffStats.deletions}`)}${style.dim("]")}`;
+        const line2 = `${style.gray(branchDisplay)}` +
+            `${style.yellow(fileStatus)}` +
+            ` ${style.dim("[")}${style.green(`+${status.diffStats.insertions}`)} ${style.red(`-${status.diffStats.deletions}`)}${style.dim("]")}`;
+        return [line1, line2];
     }
-    return result;
+    return [line1, null];
 }
 export class FooterComponent {
     modelManager;
+    tokenTracker;
     state;
     progressBar;
-    usage;
     agentState;
-    constructor(modelManager, state) {
+    currentMode = "Normal";
+    constructor(modelManager, tokenTracker, state) {
         this.modelManager = modelManager;
+        this.tokenTracker = tokenTracker;
         this.agentState = state.agentState;
         this.state = state;
         this.progressBar = new ProgressBarComponent(state.currentContextWindow, state.contextWindow, 0);
@@ -49,31 +53,51 @@ export class FooterComponent {
         if (state.agentState) {
             this.agentState = state.agentState;
         }
-        if (state.usage) {
-            this.usage = state.usage;
+        if (state.currentMode !== undefined) {
+            this.currentMode = state.currentMode;
         }
         this.state = state;
         this.progressBar.setCurrent(state.currentContextWindow);
         this.progressBar.setTotal(state.contextWindow);
     }
     resetState() {
-        this.usage = undefined;
         this.agentState = undefined;
     }
+    getProjectStatus() {
+        return this.state.projectStatus;
+    }
     render(width) {
         const results = [];
-        const modelInfo = `${this.modelManager.getModelMetadata("repl").id} [${this.modelManager.getModel("repl").modelId}]`;
-        const projectStatusString = formatProjectStatus(this.state.projectStatus);
-        const padding = Math.max(0, width - visibleWidth(projectStatusString) - modelInfo.length);
-        results.push(projectStatusString + " ".repeat(padding) + style.dim(modelInfo));
-        if (this.usage && this.agentState) {
-            const inputTokens = this.usage.inputTokens ?? 0;
-            const outputTokens = this.usage.outputTokens ?? 0;
-            const cachedInputTokens = this.usage.inputTokenDetails.cacheReadTokens ?? 0;
+        const modelInfo = `${this.modelManager.getModelMetadata("repl").id}`;
+        const [pathLine, gitLine] = formatProjectStatus(this.state.projectStatus);
+        const padding = Math.max(0, width - visibleWidth(pathLine) - modelInfo.length);
+        results.push(pathLine + " ".repeat(padding) + style.dim(modelInfo));
+        const modeDisplay = this.currentMode !== "Normal"
+            ? style.magenta(`[${this.currentMode}]`)
+            : "";
+        if (gitLine) {
+            if (modeDisplay) {
+                const gitPadding = Math.max(0, width - visibleWidth(gitLine) - visibleWidth(modeDisplay));
+                results.push(`${gitLine}${" ".repeat(gitPadding)}${modeDisplay}`);
+            }
+            else {
+                results.push(gitLine);
+            }
+        }
+        else if (modeDisplay) {
+            results.push(modeDisplay);
+        }
+        // Line 3: Total session usage from token tracker (accumulated across all turns)
+        if (this.tokenTracker) {
+            const sessionUsage = this.tokenTracker.getUsageByApp("repl");
+            const inputTokens = sessionUsage.inputTokens ?? 0;
+            const outputTokens = sessionUsage.outputTokens ?? 0;
+            const cachedInputTokens = sessionUsage.inputTokenDetails?.cacheReadTokens ?? 0;
             const tokenSummary = `↑ ${formatNumber(inputTokens)} (${formatNumber(cachedInputTokens)}) ↓ ${formatNumber(outputTokens)} - `;
             let status = tokenSummary;
-            const inputCost = this.agentState.modelConfig.costPerInputToken * inputTokens;
-            const outputCost = this.agentState.modelConfig.costPerOutputToken * outputTokens;
+            const modelConfig = this.modelManager.getModelMetadata("repl");
+            const inputCost = modelConfig.costPerInputToken * inputTokens;
+            const outputCost = modelConfig.costPerOutputToken * outputTokens;
             status += `$${(inputCost + outputCost).toFixed(2)}`;
             results.push(style.dim(status));
         }

package/dist/tui/components/markdown.d.ts

@@ -5,7 +5,7 @@ type Color = "black" | "red" | "green" | "yellow" | "blue" | "magenta" | "cyan"
  * Theme functions for markdown elements.
  * Each function takes text and returns styled text with ANSI codes.
  */
-export interface MarkdownTheme {
+interface MarkdownTheme {
     heading: (text: string) => string;
     paragraph: (text: string) => string;
     link: (text: string) => string;
@@ -25,7 +25,7 @@ export interface MarkdownTheme {
 /**
  * Options for configuring Markdown component
  */
-export interface MarkdownOptions {
+interface MarkdownOptions {
     /** Background color */
     bgColor?: Color;
     /** Custom background RGB color */
@@ -77,17 +77,20 @@ export declare class Markdown implements Component {
      */
     private cleanToStyledIndex;
     /**
-     * Protect inline code spans by replacing them with placeholders
-     * This prevents wrapAnsi from breaking code spans across lines
+     * Create a placeholder string whose visible width matches the target width.
+     * Returns null if the code span is too short to protect reliably.
+     */
+    private createWidthMatchedPlaceholder;
+    /**
+     * Protect inline code spans by replacing them with width-matched placeholders.
+     * This prevents wrapAnsi from breaking code spans across lines while
+     * preserving the correct visible width for accurate wrapping.
      */
     private protectCodeSpans;
     /**
      * Check if a line represents a nested list item
      */
     private isNestedListLine;
-    /**
-     * Restore code spans from placeholders after wrapping
-     */
     private restoreCodeSpans;
     /**
      * Render a list with proper nesting support

package/dist/tui/components/markdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../../source/tui/components/markdown.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../../source/tui/components/markdown.ts"],"names":[],"mappings":"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"}

package/dist/tui/components/markdown.js

@@ -326,19 +326,13 @@ export class Markdown {
         return result;
     }
     wrapLine(line, contentWidth) {
-        // Handle undefined or null lines
         if (!line) {
             return [""];
         }
-        // Protect inline code spans from being split across lines
-        // by temporarily replacing them with placeholders
-        const { protectedText, codeSpans } = this.protectCodeSpans(line);
-        // Use the existing wrapAnsi function for robust ANSI-aware wrapping
-        // Use contentWidth (available width after padding) for wrapping
+        const { protectedText, codeSpans, placeholders } = this.protectCodeSpans(line);
         const wrappedText = wrapAnsi(protectedText, contentWidth, { trim: false });
         const lines = wrappedText.split("\n");
-        // Restore the code spans
-        const restoredLines = this.restoreCodeSpans(lines, codeSpans);
+        const restoredLines = this.restoreCodeSpans(lines, codeSpans, placeholders);
         return restoredLines;
     }
     /**
@@ -348,18 +342,34 @@ export class Markdown {
     cleanToStyledIndex(cleanText, styledText, cleanIndex) {
         let cleanPos = 0;
         let styledPos = 0;
-        while (cleanPos < cleanIndex && styledPos < styledText.length) {
+        const escapeChar = String.fromCharCode(27);
+        // Handle edge case: if cleanIndex is 0, return 0
+        if (cleanIndex === 0) {
+            return 0;
+        }
+        while (styledPos < styledText.length) {
+            // If we've found all the clean characters we need, skip any escape
+            // sequences at the current position and return after them
+            if (cleanPos >= cleanIndex) {
+                // Skip any escape sequences at this position
+                while (styledPos < styledText.length &&
+                    styledText[styledPos] === escapeChar) {
+                    while (styledPos < styledText.length &&
+                        styledText[styledPos] !== "m") {
+                        styledPos++;
+                    }
+                    styledPos++; // skip 'm'
+                }
+                return styledPos;
+            }
             const char = cleanText[cleanPos];
-            // Check if we're at an ANSI escape sequence in the styled text
-            const escapeChar = String.fromCharCode(27);
             if (styledText[styledPos] === escapeChar) {
                 // Skip the entire ANSI escape sequence
                 while (styledPos < styledText.length && styledText[styledPos] !== "m") {
                     styledPos++;
                 }
-                // Skip the 'm' character too
                 styledPos++;
-                // Don't increment cleanPos - ANSI codes are inserted between characters
+                // Don't increment cleanPos - ANSI codes don't correspond to clean text characters
             }
             else if (styledText[styledPos] === char) {
                 // Characters match, advance both
@@ -375,24 +385,40 @@ export class Markdown {
         return styledPos;
     }
     /**
-     * Protect inline code spans by replacing them with placeholders
-     * This prevents wrapAnsi from breaking code spans across lines
+     * Create a placeholder string whose visible width matches the target width.
+     * Returns null if the code span is too short to protect reliably.
+     */
+    createWidthMatchedPlaceholder(index, targetWidth) {
+        if (targetWidth < 3) {
+            return null;
+        }
+        const core = `__CS${index}__`;
+        const coreWidth = core.length;
+        if (targetWidth >= coreWidth) {
+            return core + "_".repeat(targetWidth - coreWidth);
+        }
+        const short = `_${index}_`;
+        if (targetWidth >= short.length) {
+            return short + "_".repeat(targetWidth - short.length);
+        }
+        return null;
+    }
+    /**
+     * Protect inline code spans by replacing them with width-matched placeholders.
+     * This prevents wrapAnsi from breaking code spans across lines while
+     * preserving the correct visible width for accurate wrapping.
      */
     protectCodeSpans(text) {
         const codeSpans = [];
+        const placeholders = [];
         let protectedText = text;
         let placeholderIndex = 0;
-        // Create a version of the text without ANSI codes for code span detection
-        // This allows us to reliably find code spans regardless of styling
         const cleanText = stripAnsi(text);
-        // Use the clean text to find code spans
         let i = 0;
         while (i < cleanText.length) {
-            // Find the next backtick in clean text
             const backtickIndex = cleanText.indexOf("`", i);
             if (backtickIndex === -1)
                 break;
-            // Look for the closing backtick in clean text
             let closingIndex = -1;
             let depth = 1;
             for (let j = backtickIndex + 1; j < cleanText.length; j++) {
@@ -405,25 +431,23 @@ export class Markdown {
                 }
             }
             if (closingIndex !== -1) {
-                // Map the positions to the styled text
                 const styledStart = this.cleanToStyledIndex(cleanText, text, backtickIndex);
                 const styledEnd = this.cleanToStyledIndex(cleanText, text, closingIndex + 1);
-                // Extract the styled code span
                 const styledCodeSpan = text.slice(styledStart, styledEnd);
-                const placeholder = `__CODE_SPAN_${placeholderIndex}__`;
-                // Store the full styled code span for restoration
-                codeSpans.push(styledCodeSpan);
-                // Replace with placeholder
-                protectedText = protectedText.replace(styledCodeSpan, placeholder);
-                placeholderIndex++;
-                // Move past this code span
+                const codeSpanWidth = visibleWidth(styledCodeSpan);
+                const placeholder = this.createWidthMatchedPlaceholder(placeholderIndex, codeSpanWidth);
+                if (placeholder !== null) {
+                    codeSpans.push(styledCodeSpan);
+                    placeholders.push(placeholder);
+                    protectedText = protectedText.replace(styledCodeSpan, placeholder);
+                    placeholderIndex++;
+                }
                 i = closingIndex + 1;
                 continue;
             }
-            // Move to next character
             i = backtickIndex + 1;
         }
-        return { protectedText, codeSpans };
+        return { protectedText, codeSpans, placeholders };
     }
     /**
      * Check if a line represents a nested list item
@@ -453,17 +477,11 @@ export class Markdown {
         }
         return false;
     }
-    /**
-     * Restore code spans from placeholders after wrapping
-     */
-    restoreCodeSpans(lines, codeSpans) {
+    restoreCodeSpans(lines, codeSpans, placeholders) {
         return lines.map((line) => {
             let restoredLine = line;
-            // Restore each code span placeholder
             for (let i = 0; i < codeSpans.length; i++) {
-                const placeholder = `__CODE_SPAN_${i}__`;
-                const codeSpan = codeSpans[i];
-                restoredLine = restoredLine.replace(placeholder, codeSpan);
+                restoredLine = restoredLine.replace(placeholders[i], codeSpans[i]);
             }
             return restoredLine;
         });

package/dist/tui/components/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../source/tui/components/modal.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAGtC;;GAEG;AACH,qBAAa,KAAM,SAAQ,SAAU,YAAW,SAAS;IACvD,OAAO,CAAC,KAAK,CAAS;IACf,QAAQ,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,OAAO,CAAC,CAAa;IAC7B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,cAAc,CAAK;gBAGzB,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,SAAS,EAClB,QAAQ,UAAO,EACf,OAAO,CAAC,EAAE,MAAM,IAAI,EACpB,QAAQ,CAAC,EAAE,MAAM,EACjB,SAAS,CAAC,EAAE,MAAM;IAYpB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAgD/B,KAAK,IAAI,IAAI;IAMJ,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;IAqHxC,iBAAiB,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI;CA2B7C;AAED;;GAEG;AACH,qBAAa,SAAU,SAAQ,SAAS;IACtC,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,QAAQ,CAAS;gBAEb,IAAI,EAAE,MAAM,EAAE,QAAQ,SAAI,EAAE,QAAQ,SAAI;IAO3C,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;CAkFzC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../source/tui/components/modal.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAGtC;;GAEG;AACH,qBAAa,KAAM,SAAQ,SAAU,YAAW,SAAS;IACvD,OAAO,CAAC,KAAK,CAAS;IACf,QAAQ,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,OAAO,CAAC,CAAa;IAC7B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,cAAc,CAAK;gBAGzB,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,SAAS,EAClB,QAAQ,UAAO,EACf,OAAO,CAAC,EAAE,MAAM,IAAI,EACpB,QAAQ,CAAC,EAAE,MAAM,EACjB,SAAS,CAAC,EAAE,MAAM;IAYpB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAgD/B,KAAK,IAAI,IAAI;IAMJ,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;IAqHxC,iBAAiB,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI;CA2B7C;AAwCD;;GAEG;AACH,qBAAa,SAAU,SAAQ,SAAS;IACtC,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,QAAQ,CAAS;gBAEb,IAAI,EAAE,MAAM,EAAE,QAAQ,SAAI,EAAE,QAAQ,SAAI;IAO3C,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;CA8CzC"}

package/dist/tui/components/modal.js

@@ -178,6 +178,40 @@ export class Modal extends Container {
         return null;
     }
 }
+function wrapLine(line, contentWidth) {
+    const words = line.split(" ");
+    const lines = [];
+    let currentLine = "";
+    for (const word of words) {
+        const currentVisible = visibleWidth(currentLine);
+        const wordVisible = visibleWidth(word);
+        let finalWord = word;
+        if (wordVisible > contentWidth) {
+            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);
+    }
+    return lines;
+}
 /**
  * ModalText component - displays text content in a modal with word wrapping
  */
@@ -206,39 +240,7 @@ export class ModalText extends Container {
                 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);
-                }
+                lines.push(...wrapLine(line, contentWidth));
             }
         }
         // Add padding

package/dist/tui/components/notification.d.ts

@@ -1,12 +1,15 @@
 import type { Component } from "../tui.ts";
 /**
  * NotificationComponent - displays a notification message with styling
+ * and auto-dismiss functionality.
  */
 export declare class NotificationComponent implements Component {
     private message;
     private bgColor;
     private textStyle;
     private paddingX;
+    private autoDismissTimer?;
+    private onDismiss?;
     private cachedMessage?;
     private cachedWidth?;
     private cachedLines?;
@@ -14,8 +17,16 @@ export declare class NotificationComponent implements Component {
         r: number;
         g: number;
         b: number;
-    }, textStyle?: (text: string) => string, paddingX?: number);
-    setMessage(message: string): void;
+    }, textStyle?: (text: string) => string, paddingX?: number, onDismiss?: () => void);
+    /**
+     * Clears the notification immediately and cancels any pending timer.
+     */
+    clear(): void;
+    /**
+     * Clears any pending auto-dismiss timer.
+     */
+    private clearTimer;
+    setMessage(message: string, autoDismissMs?: number): void;
     setBgColor(bgColor: {
         r: number;
         g: number;

package/dist/tui/components/notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../source/tui/components/notification.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAG3C;;GAEG;AACH,qBAAa,qBAAsB,YAAW,SAAS;IACrD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,OAAO,CAAsC;IACrD,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,QAAQ,CAAS;IAGzB,OAAO,CAAC,aAAa,CAAC,CAAS;IAC/B,OAAO,CAAC,WAAW,CAAC,CAAS;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAW;gBAG7B,OAAO,SAAK,EACZ,OAAO;;;;KAA0B,EACjC,SAAS,GAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAqB,EAClD,QAAQ,SAAI;IAQd,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAKjC,UAAU,CAAC,OAAO,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAK9D,YAAY,CAAC,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI;IAKvD,OAAO,CAAC,eAAe;IAMvB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;CAsChC"}
+{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../source/tui/components/notification.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAG3C;;;GAGG;AACH,qBAAa,qBAAsB,YAAW,SAAS;IACrD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,OAAO,CAAsC;IACrD,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,gBAAgB,CAAC,CAAiB;IAC1C,OAAO,CAAC,SAAS,CAAC,CAAa;IAG/B,OAAO,CAAC,aAAa,CAAC,CAAS;IAC/B,OAAO,CAAC,WAAW,CAAC,CAAS;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAW;gBAG7B,OAAO,SAAK,EACZ,OAAO;;;;KAA0B,EACjC,SAAS,GAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAqB,EAClD,QAAQ,SAAI,EACZ,SAAS,CAAC,EAAE,MAAM,IAAI;IASxB;;OAEG;IACH,KAAK,IAAI,IAAI;IAMb;;OAEG;IACH,OAAO,CAAC,UAAU;IAOlB,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,aAAa,SAAO,GAAG,IAAI;IAoBvD,UAAU,CAAC,OAAO,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAK9D,YAAY,CAAC,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI;IAKvD,OAAO,CAAC,eAAe;IAMvB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;CAsChC"}

package/dist/tui/components/notification.js

@@ -2,25 +2,59 @@ import style from "../../terminal/style.js";
 import { visibleWidth } from "../utils.js";
 /**
  * NotificationComponent - displays a notification message with styling
+ * and auto-dismiss functionality.
  */
 export class NotificationComponent {
     message;
     bgColor;
     textStyle;
     paddingX;
+    autoDismissTimer;
+    onDismiss;
     // Cache for rendered output
     cachedMessage;
     cachedWidth;
     cachedLines;
-    constructor(message = "", bgColor = { r: 64, g: 64, b: 64 }, textStyle = style.yellow, paddingX = 1) {
+    constructor(message = "", bgColor = { r: 52, g: 53, b: 65 }, textStyle = style.yellow, paddingX = 1, onDismiss) {
         this.message = message;
         this.bgColor = bgColor;
         this.textStyle = textStyle;
         this.paddingX = paddingX;
+        this.onDismiss = onDismiss;
     }
-    setMessage(message) {
+    /**
+     * Clears the notification immediately and cancels any pending timer.
+     */
+    clear() {
+        this.clearTimer();
+        this.message = "";
+        this.invalidateCache();
+    }
+    /**
+     * Clears any pending auto-dismiss timer.
+     */
+    clearTimer() {
+        if (this.autoDismissTimer) {
+            clearTimeout(this.autoDismissTimer);
+            this.autoDismissTimer = undefined;
+        }
+    }
+    setMessage(message, autoDismissMs = 3000) {
+        // Clear any pending timer first (handles reset on new notification)
+        this.clearTimer();
         this.message = message;
         this.invalidateCache();
+        // If message is non-empty, set up auto-dismiss
+        if (message) {
+            this.autoDismissTimer = setTimeout(() => {
+                this.message = "";
+                this.autoDismissTimer = undefined;
+                this.invalidateCache();
+                if (this.onDismiss) {
+                    this.onDismiss();
+                }
+            }, autoDismissMs);
+        }
     }
     setBgColor(bgColor) {
         this.bgColor = bgColor;

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

@@ -1,5 +1,5 @@
-import { formatNumber } from "../../formatting.js";
 import style from "../../terminal/style.js";
+import { formatNumber } from "../../utils/formatting.js";
 /**
  * Progress bar component - displays a visual progress indicator
  */

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

@@ -26,6 +26,7 @@ export declare class SelectList implements Component {
     setFilter(filter: string): void;
     setSelectedIndex(index: number): void;
     render(width: number): string[];
+    wantsNavigationKeys(): boolean;
     handleInput(keyData: string): void;
     private notifySelectionChange;
     getSelectedItem(): SelectItem | null;

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

@@ -1 +1 @@
-{"version":3,"file":"select-list.d.ts","sourceRoot":"","sources":["../../../source/tui/components/select-list.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAG3C,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"}
+{"version":3,"file":"select-list.d.ts","sourceRoot":"","sources":["../../../source/tui/components/select-list.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAG3C,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,mBAAmB,IAAI,OAAO;IAI9B,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

@@ -63,27 +63,27 @@ export class SelectList {
                 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 maxValueWidth = 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, "");
+                        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, "")}`);
+                        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, "")}`);
+                    line = this.theme.selectedText(`→ ${truncateToWidth(displayValue, maxWidth, "...")}`);
                 }
             }
             else {
@@ -91,27 +91,27 @@ export class SelectList {
                 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 maxValueWidth = 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 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, "");
+                        line = prefix + truncateToWidth(displayValue, maxWidth, "...");
                     }
                 }
                 else {
                     // No description or not enough width
                     const maxWidth = width - prefix.length - 2;
-                    line = prefix + truncateToWidth(displayValue, maxWidth, "");
+                    line = prefix + truncateToWidth(displayValue, maxWidth, "...");
                 }
             }
             lines.push(line);
@@ -120,10 +120,13 @@ export class SelectList {
         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, "")));
+            lines.push(this.theme.scrollInfo(truncateToWidth(scrollText, width - 2, "...")));
         }
         return lines;
     }
+    wantsNavigationKeys() {
+        return true;
+    }
     handleInput(keyData) {
         // Up arrow - wrap to bottom when at top
         if (isArrowUp(keyData)) {