@travisennis/acai 0.0.5 → 0.0.7

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

@@ -0,0 +1,16 @@
+import type { Component } from "../tui.ts";
+/**
+ * Spacer component that renders empty lines
+ */
+export declare class Spacer implements Component {
+    private lines;
+    private customBgRgb?;
+    constructor(lines?: number, customBgRgb?: {
+        r: number;
+        g: number;
+        b: number;
+    });
+    setLines(lines: number): void;
+    render(width: number): string[];
+}
+//# sourceMappingURL=spacer.d.ts.map

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

@@ -0,0 +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,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;CAgBhC"}

package/dist/tui/components/spacer.js

@@ -0,0 +1,27 @@
+import style from "../../terminal/style.js";
+/**
+ * Spacer component that renders empty lines
+ */
+export class Spacer {
+    lines;
+    customBgRgb;
+    constructor(lines = 1, customBgRgb) {
+        this.lines = lines;
+        this.customBgRgb = customBgRgb;
+    }
+    setLines(lines) {
+        this.lines = lines;
+    }
+    render(width) {
+        const result = [];
+        for (let i = 0; i < this.lines; i++) {
+            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);
+            }
+            result.push(line);
+        }
+        return result;
+    }
+}

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/text.d.ts

@@ -0,0 +1,26 @@
+import type { Component } from "../tui.ts";
+/**
+ * Text component - displays multi-line text with word wrapping
+ */
+export declare class Text implements Component {
+    private text;
+    private paddingX;
+    private paddingY;
+    private customBgRgb?;
+    private cachedText?;
+    private cachedWidth?;
+    private cachedLines?;
+    constructor(text?: string, paddingX?: number, paddingY?: number, customBgRgb?: {
+        r: number;
+        g: number;
+        b: number;
+    });
+    setText(text: string): void;
+    setCustomBgRgb(customBgRgb?: {
+        r: number;
+        g: number;
+        b: number;
+    }): void;
+    render(width: number): string[];
+}
+//# sourceMappingURL=text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../source/tui/components/text.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAG3C;;GAEG;AACH,qBAAa,IAAK,YAAW,SAAS;IACpC,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,WAAW,CAAC,CAAsC;IAG1D,OAAO,CAAC,UAAU,CAAC,CAAS;IAC5B,OAAO,CAAC,WAAW,CAAC,CAAS;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAW;gBAG7B,IAAI,SAAK,EACT,QAAQ,SAAI,EACZ,QAAQ,SAAI,EACZ,WAAW,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;IAQnD,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAQ3B,cAAc,CAAC,WAAW,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAQvE,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;CA4IhC"}

package/dist/tui/components/text.js

@@ -0,0 +1,143 @@
+import style from "../../terminal/style.js";
+import { visibleWidth } from "../utils.js";
+/**
+ * Text component - displays multi-line text with word wrapping
+ */
+export class Text {
+    text;
+    paddingX; // Left/right padding
+    paddingY; // Top/bottom padding
+    customBgRgb;
+    // Cache for rendered output
+    cachedText;
+    cachedWidth;
+    cachedLines;
+    constructor(text = "", paddingX = 1, paddingY = 1, customBgRgb) {
+        this.text = text;
+        this.paddingX = paddingX;
+        this.paddingY = paddingY;
+        this.customBgRgb = customBgRgb;
+    }
+    setText(text) {
+        this.text = text;
+        // Invalidate cache when text changes
+        this.cachedText = undefined;
+        this.cachedWidth = undefined;
+        this.cachedLines = undefined;
+    }
+    setCustomBgRgb(customBgRgb) {
+        this.customBgRgb = customBgRgb;
+        // Invalidate cache when color changes
+        this.cachedText = undefined;
+        this.cachedWidth = undefined;
+        this.cachedLines = undefined;
+    }
+    render(width) {
+        // Check cache
+        if (this.cachedLines &&
+            this.cachedText === this.text &&
+            this.cachedWidth === width) {
+            return this.cachedLines;
+        }
+        // Calculate available width for content (subtract horizontal padding)
+        const contentWidth = Math.max(1, width - this.paddingX * 2);
+        // Don't render anything if there's no actual text
+        if (!this.text || this.text.trim() === "") {
+            const result = [];
+            // Update cache
+            this.cachedText = this.text;
+            this.cachedWidth = width;
+            this.cachedLines = result;
+            return result;
+        }
+        // Replace tabs with 3 spaces for consistent rendering
+        const normalizedText = this.text.replace(/\t/g, "   ");
+        const lines = [];
+        const textLines = normalizedText.split("\n");
+        for (const line of textLines) {
+            // Measure visible length (strip ANSI codes)
+            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);
+                    // If word is too long, truncate it
+                    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 to each line
+        const leftPad = " ".repeat(this.paddingX);
+        const paddedLines = [];
+        for (const line of lines) {
+            // Calculate visible length (strip ANSI codes)
+            const visibleLength = visibleWidth(line);
+            // Right padding to fill to width (accounting for left padding and content)
+            const rightPadLength = Math.max(0, width - this.paddingX - visibleLength);
+            const rightPad = " ".repeat(rightPadLength);
+            let paddedLine = leftPad + line + rightPad;
+            // Apply background color if specified
+            if (this.customBgRgb) {
+                paddedLine = style.bgRgb(this.customBgRgb.r, this.customBgRgb.g, this.customBgRgb.b)(paddedLine);
+            }
+            paddedLines.push(paddedLine);
+        }
+        // Add top padding (empty lines)
+        const emptyLine = " ".repeat(width);
+        const topPadding = [];
+        for (let i = 0; i < this.paddingY; i++) {
+            let emptyPaddedLine = emptyLine;
+            if (this.customBgRgb) {
+                emptyPaddedLine = style.bgRgb(this.customBgRgb.r, this.customBgRgb.g, this.customBgRgb.b)(emptyPaddedLine);
+            }
+            topPadding.push(emptyPaddedLine);
+        }
+        // Add bottom padding (empty lines)
+        const bottomPadding = [];
+        for (let i = 0; i < this.paddingY; i++) {
+            let emptyPaddedLine = emptyLine;
+            if (this.customBgRgb) {
+                emptyPaddedLine = style.bgRgb(this.customBgRgb.r, this.customBgRgb.g, this.customBgRgb.b)(emptyPaddedLine);
+            }
+            bottomPadding.push(emptyPaddedLine);
+        }
+        // Combine top padding, content, and bottom padding
+        const result = [...topPadding, ...paddedLines, ...bottomPadding];
+        // Update cache
+        this.cachedText = this.text;
+        this.cachedWidth = width;
+        this.cachedLines = result;
+        return result.length > 0 ? result : [""];
+    }
+}

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

@@ -0,0 +1,14 @@
+import { Container } from "../tui.ts";
+/**
+ * Component that renders a thinking block
+ */
+export declare class ThinkingBlockComponent extends Container {
+    private contentContainer;
+    constructor(message?: {
+        content: string;
+    });
+    updateContent(message: {
+        content: string;
+    }): void;
+}
+//# sourceMappingURL=thinking-block.d.ts.map

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

@@ -0,0 +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;CAkBlD"}

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

@@ -0,0 +1,33 @@
+import style from "../../terminal/style.js";
+import { Container } from "../tui.js";
+import { Markdown } from "./markdown.js";
+import { Spacer } from "./spacer.js";
+/**
+ * Component that renders a thinking block
+ */
+export class ThinkingBlockComponent extends Container {
+    contentContainer;
+    constructor(message) {
+        super();
+        // Container for text/thinking content
+        this.contentContainer = new Container();
+        this.addChild(this.contentContainer);
+        if (message) {
+            this.updateContent(message);
+        }
+    }
+    updateContent(message) {
+        // Clear content container
+        this.contentContainer.clear();
+        if (message.content.length > 0) {
+            this.contentContainer.addChild(new Spacer(1));
+        }
+        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()), {
+            paddingX: 1,
+            paddingY: 0,
+        }));
+    }
+}

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

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

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

@@ -0,0 +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,EACL,SAAS,EAKT,KAAK,GAAG,EACT,MAAM,aAAa,CAAC;AAUrB,qBAAa,sBAAuB,SAAQ,SAAS;IACnD,OAAO,CAAC,GAAG,CAAM;IACjB,OAAO,CAAC,gBAAgB,CAAY;IACpC,OAAO,CAAC,eAAe,CAAgB;IACvC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAc;gBAEhB,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE;IAczC,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE;IAS1B,OAAO,CAAC,aAAa;IAiErB,OAAO,CAAC,yBAAyB;IA0DjC,OAAO,CAAC,sBAAsB;IAU9B,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,uBAAuB;IAI/B,OAAO,CAAC,2BAA2B;IAInC,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,oBAAoB;IA+B5B,OAAO,CAAC,aAAa;CAkBtB"}

package/dist/tui/components/tool-execution.js

@@ -0,0 +1,161 @@
+import { capitalize } from "../../formatting.js";
+import style from "../../terminal/style.js";
+import { Container, Loader, Markdown, Spacer, Text, } from "../index.js";
+const bgColor = {
+    r: 52,
+    g: 53,
+    b: 65,
+};
+export class ToolExecutionComponent extends Container {
+    tui;
+    contentContainer;
+    loaderComponent;
+    toolName;
+    events;
+    constructor(tui, events) {
+        super();
+        this.tui = tui;
+        this.loaderComponent = null;
+        this.toolName = events[0].name;
+        this.events = events;
+        // Container for text/thinking content
+        this.contentContainer = new Container();
+        this.addChild(this.contentContainer);
+        this.renderDisplay();
+    }
+    update(events) {
+        this.events = events;
+        // Clear content container
+        this.contentContainer.clear();
+        this.renderDisplay();
+    }
+    renderDisplay() {
+        // Build display from complete event history with proper ordering
+        const processedEvents = this.processEventsInOrder();
+        const currentStatus = processedEvents.at(-1)?.type ?? "tool-call-start";
+        this.contentContainer.addChild(new Spacer(1));
+        this.contentContainer.addChild(new Spacer(1, bgColor));
+        for (let i = 0; i < processedEvents.length; i++) {
+            const event = processedEvents[i];
+            const eventType = event.type;
+            switch (eventType) {
+                case "tool-call-start":
+                    this.getToolCallStartComponent(event, currentStatus);
+                    break;
+                case "tool-call-init":
+                    this.contentContainer.addChild(new Text(`→ ${this.handleToolInitMessage(event.msg)}`, 1, 0, bgColor));
+                    break;
+                case "tool-call-update":
+                    this.contentContainer.addChild(new Markdown(this.handleToolUpdateMessage(event.msg), {
+                        paddingX: 3,
+                        customBgRgb: bgColor,
+                    }));
+                    break;
+                case "tool-call-end":
+                    this.contentContainer.addChild(new Text(`└ ${this.handleToolCompletionMessage(event.msg)}`, 1, 0, bgColor));
+                    break;
+                case "tool-call-error":
+                    this.contentContainer.addChild(new Text(`└ ${this.handleToolErrorMessage(event.msg)}`, 1, 0, bgColor));
+                    break;
+                default: {
+                    eventType;
+                }
+            }
+        }
+        this.contentContainer.addChild(new Spacer(1, bgColor));
+        this.contentContainer.addChild(new Spacer(1));
+    }
+    getToolCallStartComponent(event, currentStatus) {
+        switch (currentStatus) {
+            case "tool-call-start":
+                this.contentContainer.addChild(new Text(`${style.blue.bold("●")} ${this.handleToolStartMessage(event)}`, 1, 0, bgColor));
+                break;
+            case "tool-call-init":
+            case "tool-call-update":
+                if (!this.loaderComponent) {
+                    this.loaderComponent = new Loader(this.tui, this.handleToolStartMessage(event), bgColor);
+                    this.contentContainer.addChild(this.loaderComponent);
+                }
+                else {
+                    this.loaderComponent.setMessage(this.handleToolStartMessage(event));
+                }
+                break;
+            case "tool-call-end":
+                if (this.loaderComponent) {
+                    this.loaderComponent.stop();
+                    this.loaderComponent = null;
+                }
+                this.contentContainer.addChild(new Text(`${style.green.bold("●")} ${this.handleToolStartMessage(event)}`, 1, 0, bgColor));
+                break;
+            case "tool-call-error":
+                if (this.loaderComponent) {
+                    this.loaderComponent.stop();
+                    this.loaderComponent = null;
+                }
+                this.contentContainer.addChild(new Text(`${style.red.bold("●")} ${this.handleToolStartMessage(event)}`, 1, 0, bgColor));
+                break;
+            default:
+                currentStatus;
+        }
+    }
+    handleToolStartMessage(event) {
+        const message = event.msg;
+        let result = `${style.bold(capitalize(this.toolName))} `;
+        result += message.trim() ? `${style.bold(message)} ` : "";
+        result += style.dim(JSON.stringify(event.args).slice(0, 50));
+        return result;
+    }
+    handleToolInitMessage(message) {
+        return style.bold(message);
+    }
+    handleToolUpdateMessage(message) {
+        return message;
+    }
+    handleToolCompletionMessage(message) {
+        return style.bold(message);
+    }
+    handleToolErrorMessage(message) {
+        return style.bold.red(message);
+    }
+    processEventsInOrder() {
+        const events = [...this.events];
+        const processed = [];
+        // Ensure we have a tool-call-start event for this specific tool call
+        // Events are grouped by toolCallId, so we need to check for start events
+        // that match the current tool call's ID
+        const toolCallId = events[0]?.toolCallId;
+        const hasStartEvent = events.some((event) => event.type === "tool-call-start" && event.toolCallId === toolCallId);
+        if (!hasStartEvent && events.length > 0) {
+            // Create synthetic start event using the first event's name
+            const firstEvent = events[0];
+            processed.push({
+                type: "tool-call-start",
+                name: firstEvent.name,
+                toolCallId: firstEvent.toolCallId,
+                msg: "",
+                args: firstEvent.args,
+            });
+        }
+        processed.push(...events);
+        processed.sort((a, b) => this.getEventIndex(a) - this.getEventIndex(b));
+        return processed;
+    }
+    getEventIndex(event) {
+        const eventType = event.type;
+        switch (eventType) {
+            case "tool-call-start":
+                return 0;
+            case "tool-call-init":
+                return 1;
+            case "tool-call-update":
+                return 2;
+            case "tool-call-end":
+            case "tool-call-error":
+                return 3;
+            default: {
+                eventType;
+                return -1;
+            }
+        }
+    }
+}

package/dist/tui/components/user-message.d.ts

@@ -0,0 +1,9 @@
+import { Container } from "../tui.ts";
+/**
+ * Component that renders a user message
+ */
+export declare class UserMessageComponent extends Container {
+    private markdown;
+    constructor(text: string);
+}
+//# sourceMappingURL=user-message.d.ts.map

package/dist/tui/components/user-message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-message.d.ts","sourceRoot":"","sources":["../../../source/tui/components/user-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAItC;;GAEG;AACH,qBAAa,oBAAqB,SAAQ,SAAS;IACjD,OAAO,CAAC,QAAQ,CAAW;gBAEf,IAAI,EAAE,MAAM;CAiBzB"}

package/dist/tui/components/user-message.js

@@ -0,0 +1,23 @@
+import { Container } from "../tui.js";
+import { Markdown } from "./markdown.js";
+import { Spacer } from "./spacer.js";
+/**
+ * Component that renders a user message
+ */
+export class UserMessageComponent extends Container {
+    markdown;
+    constructor(text) {
+        super();
+        this.addChild(new Spacer(1));
+        // User messages with dark gray background
+        this.markdown = new Markdown(text, {
+            customBgRgb: {
+                r: 52,
+                g: 53,
+                b: 65,
+            },
+        });
+        this.addChild(this.markdown);
+        this.addChild(new Spacer(1));
+    }
+}

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

@@ -0,0 +1,6 @@
+import type { Component } from "../tui.ts";
+export declare class Welcome implements Component {
+    render(_width: number): string[];
+    private getLogo;
+}
+//# sourceMappingURL=welcome.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"welcome.d.ts","sourceRoot":"","sources":["../../../source/tui/components/welcome.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3C,qBAAa,OAAQ,YAAW,SAAS;IACvC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE;IAiChC,OAAO,CAAC,OAAO;CAUhB"}