@travisennis/acai 0.0.6 → 0.0.8

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

@@ -0,0 +1,66 @@
+import { formatNumber } from "../../formatting.js";
+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;
+        }
+        const percentage = this.total === 0 ? 1 : this.current / this.total;
+        const currentFormatted = formatNumber(this.current);
+        const totalFormatted = formatNumber(this.total);
+        const progressText = `${currentFormatted}/${totalFormatted} [${(percentage * 100).toFixed(1)}%]`;
+        const progressTextLength = progressText.length + 1; // Add 1 for space
+        const progressBarMaxWidth = Math.max(1, renderWidth - progressTextLength);
+        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/select-list.d.ts

@@ -4,19 +4,30 @@ export interface SelectItem {
     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;
-    constructor(items: SelectItem[], maxVisible?: number);
+    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

@@ -1 +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;AAE3C,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;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;IAEhB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;gBAEjB,KAAK,EAAE,UAAU,EAAE,EAAE,UAAU,SAAI;IAM/C,WAAW,CAAC,KAAK,EAAE,UAAU,EAAE;IAK/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;IA8G/B,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IA2BlC,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,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

@@ -1,19 +1,36 @@
+import { isArrowDown, isArrowUp, isCtrlC, isEnter, isEscape, isShiftTab, isTab, } from "../../terminal/keys.js";
 import style from "../../terminal/style.js";
+import { truncateToWidth } from "../utils.js";
 export class SelectList {
     items = [];
     filteredItems = [];
     selectedIndex = 0;
     maxVisible = 5;
+    theme;
     onSelect;
     onCancel;
-    constructor(items, maxVisible = 5) {
+    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()));
@@ -27,7 +44,7 @@ export class SelectList {
         const lines = [];
         // If no items match filter, show message
         if (this.filteredItems.length === 0) {
-            lines.push(style.gray("  No matching commands"));
+            lines.push(this.theme.noMatch("  No matching commands"));
             return lines;
         }
         // Calculate visible range with scrolling
@@ -41,35 +58,32 @@ export class SelectList {
             const isSelected = i === this.selectedIndex;
             let line = "";
             if (isSelected) {
-                // Use arrow indicator for selection
-                const prefix = style.blue("→ ");
+                // 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 maxValueLength = Math.min(displayValue.length, 30);
-                    const truncatedValue = displayValue.substring(0, maxValueLength);
+                    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 = item.description.substring(0, remainingWidth);
-                        line =
-                            prefix +
-                                style.blue(truncatedValue) +
-                                style.gray(spacing + truncatedDesc);
+                        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 = prefix + style.blue(displayValue.substring(0, maxWidth));
+                        line = this.theme.selectedText(`→ ${truncateToWidth(displayValue, maxWidth, "")}`);
                     }
                 }
                 else {
                     // No description or not enough width
                     const maxWidth = width - prefixWidth - 2;
-                    line = prefix + style.blue(displayValue.substring(0, maxWidth));
+                    line = this.theme.selectedText(`→ ${truncateToWidth(displayValue, maxWidth, "")}`);
                 }
             }
             else {
@@ -77,27 +91,27 @@ export class SelectList {
                 const prefix = "  ";
                 if (item.description && width > 40) {
                     // Calculate how much space we have for value + description
-                    const maxValueLength = Math.min(displayValue.length, 30);
-                    const truncatedValue = displayValue.substring(0, maxValueLength);
+                    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 = item.description.substring(0, remainingWidth);
-                        line =
-                            prefix + truncatedValue + style.gray(spacing + truncatedDesc);
+                        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 + displayValue.substring(0, maxWidth);
+                        line = prefix + truncateToWidth(displayValue, maxWidth, "");
                     }
                 }
                 else {
                     // No description or not enough width
                     const maxWidth = width - prefix.length - 2;
-                    line = prefix + displayValue.substring(0, maxWidth);
+                    line = prefix + truncateToWidth(displayValue, maxWidth, "");
                 }
             }
             lines.push(line);
@@ -106,36 +120,63 @@ export class SelectList {
         if (startIndex > 0 || endIndex < this.filteredItems.length) {
             const scrollText = `  (${this.selectedIndex + 1}/${this.filteredItems.length})`;
             // Truncate if too long for terminal
-            const maxWidth = width - 2;
-            const truncated = scrollText.substring(0, maxWidth);
-            const scrollInfo = style.gray(truncated);
-            lines.push(scrollInfo);
+            lines.push(this.theme.scrollInfo(truncateToWidth(scrollText, width - 2, "")));
         }
         return lines;
     }
     handleInput(keyData) {
-        // Up arrow
-        if (keyData === "\x1b[A") {
-            this.selectedIndex = Math.max(0, this.selectedIndex - 1);
+        // Up arrow - wrap to bottom when at top
+        if (isArrowUp(keyData)) {
+            this.selectedIndex =
+                this.selectedIndex === 0
+                    ? this.filteredItems.length - 1
+                    : this.selectedIndex - 1;
+            this.notifySelectionChange();
+        }
+        // Down arrow - wrap to top when at bottom
+        else if (isArrowDown(keyData)) {
+            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();
         }
-        // Down arrow or Tab
-        else if (keyData === "\x1b[B" || keyData === "\t") {
-            this.selectedIndex = Math.min(this.filteredItems.length - 1, this.selectedIndex + 1);
+        // 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") {
+        else if (isEnter(keyData)) {
             const selectedItem = this.filteredItems[this.selectedIndex];
             if (selectedItem && this.onSelect) {
                 this.onSelect(selectedItem);
             }
         }
         // Escape or Ctrl+C
-        else if (keyData === "\x1b" || keyData === "\x03") {
+        else if (isEscape(keyData) || isCtrlC(keyData)) {
             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;

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

@@ -11,6 +11,6 @@ export declare class Spacer implements Component {
         b: number;
     });
     setLines(lines: number): void;
-    render(_width: number): string[];
+    render(width: number): string[];
 }
 //# sourceMappingURL=spacer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"spacer.d.ts","sourceRoot":"","sources":["../../../source/tui/components/spacer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3C;;GAEG;AACH,qBAAa,MAAO,YAAW,SAAS;IACtC,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,WAAW,CAAC,CAAsC;gBAE9C,KAAK,SAAI,EAAE,WAAW,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;IAKxE,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7B,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE;CAgBjC"}
+{"version":3,"file":"spacer.d.ts","sourceRoot":"","sources":["../../../source/tui/components/spacer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3C;;GAEG;AACH,qBAAa,MAAO,YAAW,SAAS;IACtC,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,WAAW,CAAC,CAAsC;gBAE9C,KAAK,SAAI,EAAE,WAAW,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;IAKxE,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;CAgBhC"}

package/dist/tui/components/spacer.js

@@ -12,10 +12,10 @@ export class Spacer {
     setLines(lines) {
         this.lines = lines;
     }
-    render(_width) {
+    render(width) {
         const result = [];
         for (let i = 0; i < this.lines; i++) {
-            let line = "";
+            let line = " ".repeat(width);
             // Apply background color if specified
             if (this.customBgRgb) {
                 line = style.bgRgb(this.customBgRgb.r, this.customBgRgb.g, this.customBgRgb.b)(line);

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

@@ -0,0 +1,27 @@
+import type { Component } from "../tui.ts";
+/**
+ * Table component - displays tabular data with proper formatting and wrapping
+ */
+export declare class TableComponent implements Component {
+    private data;
+    private headers?;
+    private colWidths?;
+    private width?;
+    private cachedOutput?;
+    private cachedData?;
+    private cachedHeaders?;
+    private cachedColWidths?;
+    private cachedWidth?;
+    constructor(data: (string | number)[][], options: {
+        headers?: string[];
+        colWidths?: number[];
+        width?: number;
+    });
+    setData(data: (string | number)[][]): void;
+    setHeaders(headers?: string[]): void;
+    setColWidths(colWidths?: number[]): void;
+    setWidth(width: number): void;
+    private invalidateCache;
+    render(width: number): string[];
+}
+//# sourceMappingURL=table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../source/tui/components/table.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3C;;GAEG;AACH,qBAAa,cAAe,YAAW,SAAS;IAC9C,OAAO,CAAC,IAAI,CAAwB;IACpC,OAAO,CAAC,OAAO,CAAC,CAAW;IAC3B,OAAO,CAAC,SAAS,CAAC,CAAW;IAC7B,OAAO,CAAC,KAAK,CAAC,CAAS;IAGvB,OAAO,CAAC,YAAY,CAAC,CAAW;IAChC,OAAO,CAAC,UAAU,CAAC,CAAwB;IAC3C,OAAO,CAAC,aAAa,CAAC,CAAW;IACjC,OAAO,CAAC,eAAe,CAAC,CAAW;IACnC,OAAO,CAAC,WAAW,CAAC,CAAS;gBAG3B,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAAE,EAC3B,OAAO,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE;IAQvE,OAAO,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAAE,GAAG,IAAI;IAK1C,UAAU,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI;IAKpC,YAAY,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI;IAKxC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,OAAO,CAAC,eAAe;IAQvB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;CAiGhC"}

package/dist/tui/components/table.js

@@ -0,0 +1,125 @@
+import { Table } from "../../terminal/table/index.js";
+/**
+ * Table component - displays tabular data with proper formatting and wrapping
+ */
+export class TableComponent {
+    data;
+    headers;
+    colWidths;
+    width;
+    // Cache for rendered output
+    cachedOutput;
+    cachedData;
+    cachedHeaders;
+    cachedColWidths;
+    cachedWidth;
+    constructor(data, options) {
+        this.data = data;
+        this.headers = options.headers;
+        this.colWidths = options.colWidths;
+        this.width = options.width;
+    }
+    setData(data) {
+        this.data = data;
+        this.invalidateCache();
+    }
+    setHeaders(headers) {
+        this.headers = headers;
+        this.invalidateCache();
+    }
+    setColWidths(colWidths) {
+        this.colWidths = colWidths;
+        this.invalidateCache();
+    }
+    setWidth(width) {
+        this.width = width;
+        this.invalidateCache();
+    }
+    invalidateCache() {
+        this.cachedOutput = undefined;
+        this.cachedData = undefined;
+        this.cachedHeaders = undefined;
+        this.cachedColWidths = undefined;
+        this.cachedWidth = undefined;
+    }
+    render(width) {
+        // Use provided width if specified, otherwise use component width
+        const renderWidth = this.width || width;
+        // Check cache
+        if (this.cachedOutput &&
+            this.cachedData === this.data &&
+            this.cachedHeaders === this.headers &&
+            this.cachedColWidths === this.colWidths &&
+            this.cachedWidth === renderWidth) {
+            return this.cachedOutput;
+        }
+        if (this.data.length === 0) {
+            this.cachedOutput = [];
+            return [];
+        }
+        // Determine number of columns from data or header
+        let colCount = this.headers?.length;
+        if (colCount === undefined) {
+            colCount = this.data.length > 0 && this.data[0] ? this.data[0].length : 1;
+        }
+        // Calculate column widths based on terminal width
+        const padding = 5; // Account for table borders and padding
+        const availableWidth = Math.max(20, renderWidth - padding);
+        let computedColWidths;
+        if (this.colWidths && this.colWidths.length === colCount) {
+            // Use provided percentages
+            computedColWidths = this.colWidths.map((percent) => Math.max(10, Math.floor((percent / 100) * availableWidth)));
+        }
+        else {
+            // Distribute width evenly with minimum width per column
+            const minColWidth = 15;
+            const maxColsThatFit = Math.floor(availableWidth / minColWidth);
+            const actualColCount = Math.min(colCount, maxColsThatFit);
+            if (actualColCount === 1) {
+                computedColWidths = [availableWidth];
+            }
+            else {
+                // Calculate base width and distribute remaining pixels
+                const baseWidth = Math.floor(availableWidth / actualColCount);
+                const remainder = availableWidth % actualColCount;
+                computedColWidths = Array(actualColCount).fill(baseWidth);
+                // Distribute remainder pixels to first few columns
+                for (let i = 0; i < remainder && i < actualColCount; i++) {
+                    computedColWidths[i] = (computedColWidths[i] || 0) + 1;
+                }
+            }
+            // If we have fewer computed widths than columns, extend the array
+            while (computedColWidths.length < colCount) {
+                computedColWidths.push(minColWidth);
+            }
+        }
+        const table = new Table({
+            head: this.headers,
+            colWidths: computedColWidths,
+            wordWrap: true,
+            wrapOnWordBoundary: true,
+        });
+        // Ensure all data rows have the same number of columns
+        const normalizedData = this.data.map((row) => {
+            if (row.length < colCount) {
+                // Pad with empty strings if row has fewer columns
+                return [...row, ...Array(colCount - row.length).fill("")];
+            }
+            if (row.length > colCount) {
+                // Truncate if row has more columns
+                return row.slice(0, colCount);
+            }
+            return row;
+        });
+        table.push(...normalizedData);
+        const tableString = table.toString();
+        const result = tableString.split("\n");
+        // Update cache
+        this.cachedOutput = result;
+        this.cachedData = this.data;
+        this.cachedHeaders = this.headers;
+        this.cachedColWidths = this.colWidths;
+        this.cachedWidth = renderWidth;
+        return result;
+    }
+}

package/dist/tui/components/thinking-block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thinking-block.d.ts","sourceRoot":"","sources":["../../../source/tui/components/thinking-block.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAItC;;GAEG;AACH,qBAAa,sBAAuB,SAAQ,SAAS;IACnD,OAAO,CAAC,gBAAgB,CAAY;gBAExB,OAAO,CAAC,EAAE;QACpB,OAAO,EAAE,MAAM,CAAC;KACjB;IAYD,aAAa,CAAC,OAAO,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;CAsBlD"}
+{"version":3,"file":"thinking-block.d.ts","sourceRoot":"","sources":["../../../source/tui/components/thinking-block.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAItC;;GAEG;AACH,qBAAa,sBAAuB,SAAQ,SAAS;IACnD,OAAO,CAAC,gBAAgB,CAAY;gBAExB,OAAO,CAAC,EAAE;QACpB,OAAO,EAAE,MAAM,CAAC;KACjB;IAYD,aAAa,CAAC,OAAO,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;CAkBlD"}

package/dist/tui/components/thinking-block.js

@@ -25,6 +25,9 @@ export class ThinkingBlockComponent extends Container {
         const content = message.content;
         // Assistant text messages with no background - trim the text
         // Set paddingY=0 to avoid extra spacing before tool executions
-        this.contentContainer.addChild(new Markdown(style.dim(content.trim()), undefined, undefined, undefined, 1, 0));
+        this.contentContainer.addChild(new Markdown(style.dim(content.trim()), {
+            paddingX: 1,
+            paddingY: 0,
+        }));
     }
 }

package/dist/tui/components/tool-execution.d.ts

@@ -2,16 +2,17 @@ import type { ToolEvent } from "../../agent/index.ts";
 import { Container } from "../index.ts";
 export declare class ToolExecutionComponent extends Container {
     private contentContainer;
+    private loaderComponent;
     private toolName;
     private events;
-    constructor(event: ToolEvent);
-    update(event: ToolEvent): void;
+    constructor(events: ToolEvent[]);
+    update(events: ToolEvent[]): void;
     private renderDisplay;
-    private getIndicator;
-    private handleToolInitMessage;
-    private handleToolUpdateMessage;
-    private handleToolCompletionMessage;
+    private getToolCallStartComponent;
+    private handleToolStartMessage;
+    private renderOutputDisplay;
     private handleToolErrorMessage;
     private processEventsInOrder;
+    private getEventIndex;
 }
 //# sourceMappingURL=tool-execution.d.ts.map

package/dist/tui/components/tool-execution.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-execution.d.ts","sourceRoot":"","sources":["../../../source/tui/components/tool-execution.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGtD,OAAO,EAAE,SAAS,EAAgB,MAAM,aAAa,CAAC;AAItD,qBAAa,sBAAuB,SAAQ,SAAS;IACnD,OAAO,CAAC,gBAAgB,CAAY;IACpC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAc;gBAEhB,KAAK,EAAE,SAAS;IAY5B,MAAM,CAAC,KAAK,EAAE,SAAS;IAKvB,OAAO,CAAC,aAAa;IAwDrB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,uBAAuB;IAkB/B,OAAO,CAAC,2BAA2B;IAcnC,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,oBAAoB;CA+C7B"}
+{"version":3,"file":"tool-execution.d.ts","sourceRoot":"","sources":["../../../source/tui/components/tool-execution.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGtD,OAAO,EAAE,SAAS,EAA6B,MAAM,aAAa,CAAC;AAWnE,qBAAa,sBAAuB,SAAQ,SAAS;IACnD,OAAO,CAAC,gBAAgB,CAAY;IACpC,OAAO,CAAC,eAAe,CAAgB;IACvC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAc;gBAEhB,MAAM,EAAE,SAAS,EAAE;IAa/B,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE;IAS1B,OAAO,CAAC,aAAa;IA2CrB,OAAO,CAAC,yBAAyB;IA6CjC,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,mBAAmB;IA0B3B,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,oBAAoB;IAgC5B,OAAO,CAAC,aAAa;CActB"}