@travisennis/acai 0.0.6 → 0.0.8

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

@@ -1,24 +1,25 @@
+import type { LanguageModelUsage } from "ai";
 import type { AgentState } from "../../agent/index.ts";
-import { Container } from "../tui.ts";
-/**
- * Footer component that shows pwd, token stats, and context usage
- */
-export declare class FooterComponent extends Container {
+import type { ModelManager } from "../../models/manager.ts";
+import type { ProjectStatusData } from "../../repl/project-status.ts";
+import { type Component } from "../tui.ts";
+type State = {
+    projectStatus: ProjectStatusData;
+    currentContextWindow: number;
+    contextWindow: number;
+    usage?: LanguageModelUsage;
+    agentState?: AgentState;
+};
+export declare class FooterComponent implements Component {
+    private modelManager;
     private state;
-    constructor(state: AgentState);
-    updateState(state: AgentState): void;
+    private progressBar;
+    private usage?;
+    private agentState?;
+    constructor(modelManager: ModelManager, state: State);
+    setState(state: State): void;
+    resetState(): void;
     render(width: number): string[];
 }
-interface MinimalStep {
-    toolResults: Array<{
-        toolName: string;
-    }>;
-    toolCalls: Array<{
-        toolName: string;
-    }>;
-}
-export declare function displayToolUse(result: {
-    steps: MinimalStep[];
-}): string[];
 export {};
 //# sourceMappingURL=footer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../source/tui/components/footer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAIvD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC;;GAEG;AACH,qBAAa,eAAgB,SAAQ,SAAS;IAC5C,OAAO,CAAC,KAAK,CAAa;gBAEd,KAAK,EAAE,UAAU;IAK7B,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAI3B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;CAwIzC;AAGD,UAAU,WAAW;IACnB,WAAW,EAAE,KAAK,CAAC;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzC,SAAS,EAAE,KAAK,CAAC;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACxC;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE;IAAE,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,YA6E9D"}
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../source/tui/components/footer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,IAAI,CAAC;AAC7C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAGtE,OAAO,EAAE,KAAK,SAAS,EAAgB,MAAM,WAAW,CAAC;AAGzD,KAAK,KAAK,GAAG;IACX,aAAa,EAAE,iBAAiB,CAAC;IACjC,oBAAoB,EAAE,MAAM,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAqCF,qBAAa,eAAgB,YAAW,SAAS;IAC/C,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,KAAK,CAAQ;IACrB,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,KAAK,CAAC,CAAqB;IACnC,OAAO,CAAC,UAAU,CAAC,CAAa;gBACpB,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK;IAWpD,QAAQ,CAAC,KAAK,EAAE,KAAK;IAYrB,UAAU;IAKV,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;CA+DhC"}

package/dist/tui/components/footer.js

@@ -1,197 +1,102 @@
-import { formatDuration } from "../../formatting.js";
-import { hr } from "../../terminal/index.js";
+import { formatDuration, formatNumber } from "../../formatting.js";
+import { getTerminalSize } from "../../terminal/control.js";
 import style from "../../terminal/style.js";
-import { Container } from "../tui.js";
-/**
- * Footer component that shows pwd, token stats, and context usage
- */
-export class FooterComponent extends Container {
+import { visibleWidth } from "../tui.js";
+import { ProgressBarComponent } from "./progress-bar.js";
+function formatProjectStatus(status) {
+    const { columns: width } = getTerminalSize();
+    const maxPathLength = Math.max(20, width - 10);
+    let path = status.path;
+    if (path.length > maxPathLength) {
+        const start = path.slice(0, Math.floor(maxPathLength / 2) - 2);
+        const end = path.slice(-(Math.floor(maxPathLength / 2) - 1));
+        path = `${start}...${end}`;
+    }
+    let result = style.blue(path);
+    if (status.isGitRepository && status.branch) {
+        const asterisk = status.hasChanges ? "*" : "";
+        result += ` ${style.gray(status.branch + asterisk)}`;
+        let fileStatus = "";
+        if (status.fileChanges.added)
+            fileStatus += ` +${status.fileChanges.added}`;
+        if (status.fileChanges.modified)
+            fileStatus += ` ~${status.fileChanges.modified}`;
+        if (status.fileChanges.deleted)
+            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("]")}`;
+    }
+    return result;
+}
+export class FooterComponent {
+    modelManager;
     state;
-    constructor(state) {
-        super();
+    progressBar;
+    usage;
+    agentState;
+    constructor(modelManager, state) {
+        this.modelManager = modelManager;
+        this.agentState = state.agentState;
         this.state = state;
+        this.progressBar = new ProgressBarComponent(state.currentContextWindow, state.contextWindow, 0);
     }
-    updateState(state) {
+    setState(state) {
+        if (state.agentState) {
+            this.agentState = state.agentState;
+        }
+        if (state.usage) {
+            this.usage = state.usage;
+        }
         this.state = state;
+        this.progressBar.setCurrent(state.currentContextWindow);
+        this.progressBar.setTotal(state.contextWindow);
+    }
+    resetState() {
+        this.usage = undefined;
+        this.agentState = undefined;
     }
     render(width) {
         const results = [];
-        if (this.state.steps.length === 0) {
-            return 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 tokenSummary = `↑ ${formatNumber(inputTokens)} (${formatNumber(cachedInputTokens)}) ↓ ${formatNumber(outputTokens)} - `;
+            let status = tokenSummary;
+            const inputCost = this.agentState.modelConfig.costPerInputToken * inputTokens;
+            const outputCost = this.agentState.modelConfig.costPerOutputToken * outputTokens;
+            status += `$${(inputCost + outputCost).toFixed(2)}`;
+            results.push(style.dim(status));
         }
-        results.push(hr(width));
-        // Create a more visual representation of steps/tool usage
-        results.push(...displayToolUse(this.state));
-        let status = `Steps: ${this.state.steps.length} - `;
-        // Show time spend on this prompt
-        status += `Time: ${formatDuration(this.state.timestamps.stop - this.state.timestamps.start)} - `;
-        const total = this.state.totalUsage;
-        const inputTokens = total.inputTokens;
-        const outputTokens = total.outputTokens;
-        const cachedInputTokens = total.cachedInputTokens;
-        const tokenSummary = `Tokens: ↑ ${inputTokens} (${cachedInputTokens}) ↓ ${outputTokens} - `;
-        status += tokenSummary;
-        const inputCost = this.state.modelConfig.costPerInputToken * inputTokens;
-        const outputCost = this.state.modelConfig.costPerOutputToken * outputTokens;
-        status += `Cost: $${(inputCost + outputCost).toFixed(2)}`;
-        results.push(style.dim(status));
-        return results;
-        //   // Calculate cumulative usage from all assistant messages
-        //   let totalInput = 0;
-        //   let totalOutput = 0;
-        //   let totalCacheRead = 0;
-        //   let totalCacheWrite = 0;
-        //   let totalCost = 0;
-        //   for (const message of this.state.messages) {
-        //     if (message.role === "assistant") {
-        //       const assistantMsg = message as AssistantMessage;
-        //       totalInput += assistantMsg.usage.input;
-        //       totalOutput += assistantMsg.usage.output;
-        //       totalCacheRead += assistantMsg.usage.cacheRead;
-        //       totalCacheWrite += assistantMsg.usage.cacheWrite;
-        //       totalCost += assistantMsg.usage.cost.total;
-        //     }
-        //   }
-        //   // Get last assistant message for context percentage calculation (skip aborted messages)
-        //   const lastAssistantMessage = this.state.messages
-        //     .slice()
-        //     .reverse()
-        //     .find((m) => m.role === "assistant" && m.stopReason !== "aborted") as
-        //     | AssistantMessage
-        //     | undefined;
-        //   // Calculate context percentage from last message (input + output + cacheRead + cacheWrite)
-        //   const contextTokens = lastAssistantMessage
-        //     ? lastAssistantMessage.usage.input +
-        //       lastAssistantMessage.usage.output +
-        //       lastAssistantMessage.usage.cacheRead +
-        //       lastAssistantMessage.usage.cacheWrite
-        //     : 0;
-        //   const contextWindow = this.state.model.contextWindow;
-        //   const contextPercent =
-        //     contextWindow > 0
-        //       ? ((contextTokens / contextWindow) * 100).toFixed(1)
-        //       : "0.0";
-        //   // Format token counts (similar to web-ui)
-        //   const formatTokens = (count: number): string => {
-        //     if (count < 1000) return count.toString();
-        //     if (count < 10000) return (count / 1000).toFixed(1) + "k";
-        //     return Math.round(count / 1000) + "k";
-        //   };
-        //   // Replace home directory with ~
-        //   let pwd = process.cwd();
-        //   const home = process.env.HOME || process.env.USERPROFILE;
-        //   if (home && pwd.startsWith(home)) {
-        //     pwd = "~" + pwd.slice(home.length);
-        //   }
-        //   // Truncate path if too long to fit width
-        //   const maxPathLength = Math.max(20, width - 10); // Leave some margin
-        //   if (pwd.length > maxPathLength) {
-        //     const start = pwd.slice(0, Math.floor(maxPathLength / 2) - 2);
-        //     const end = pwd.slice(-(Math.floor(maxPathLength / 2) - 1));
-        //     pwd = `${start}...${end}`;
-        //   }
-        //   // Build stats line
-        //   const statsParts = [];
-        //   if (totalInput) statsParts.push(`↑${formatTokens(totalInput)}`);
-        //   if (totalOutput) statsParts.push(`↓${formatTokens(totalOutput)}`);
-        //   if (totalCacheRead) statsParts.push(`R${formatTokens(totalCacheRead)}`);
-        //   if (totalCacheWrite) statsParts.push(`W${formatTokens(totalCacheWrite)}`);
-        //   if (totalCost) statsParts.push(`$${totalCost.toFixed(3)}`);
-        //   statsParts.push(`${contextPercent}%`);
-        //   const statsLeft = statsParts.join(" ");
-        //   // Add model name on the right side
-        //   let modelName = this.state.model.id;
-        //   const statsLeftWidth = visibleWidth(statsLeft);
-        //   const modelWidth = visibleWidth(modelName);
-        //   // Calculate available space for padding (minimum 2 spaces between stats and model)
-        //   const minPadding = 2;
-        //   const totalNeeded = statsLeftWidth + minPadding + modelWidth;
-        //   let statsLine: string;
-        //   if (totalNeeded <= width) {
-        //     // Both fit - add padding to right-align model
-        //     const padding = " ".repeat(width - statsLeftWidth - modelWidth);
-        //     statsLine = statsLeft + padding + modelName;
-        //   } else {
-        //     // Need to truncate model name
-        //     const availableForModel = width - statsLeftWidth - minPadding;
-        //     if (availableForModel > 3) {
-        //       // Truncate model name to fit
-        //       modelName = modelName.substring(0, availableForModel);
-        //       const padding = " ".repeat(
-        //         width - statsLeftWidth - visibleWidth(modelName),
-        //       );
-        //       statsLine = statsLeft + padding + modelName;
-        //     } else {
-        //       // Not enough space for model name at all
-        //       statsLine = statsLeft;
-        //     }
-        //   }
-        //   // Return two lines: pwd and stats
-        //   return [chalk.gray(pwd), chalk.gray(statsLine)];
-    }
-}
-export function displayToolUse(result) {
-    const toolsCalled = [];
-    const toolColors = new Map();
-    const styleColors = [
-        "red",
-        "green",
-        "yellow",
-        "blue",
-        "magenta",
-        "cyan",
-        "white",
-        "gray",
-        "redBright",
-        "greenBright",
-        "yellowBright",
-        "blueBright",
-        "magentaBright",
-        "cyanBright",
-        "whiteBright",
-        "blackBright",
-    ];
-    const results = [];
-    for (const step of result.steps) {
-        let currentToolCalls = [];
-        if (step.toolResults.length > 0) {
-            currentToolCalls = step.toolResults;
-        }
-        else if (step.toolCalls.length > 0) {
-            currentToolCalls = step.toolCalls;
+        if (this.agentState) {
+            let status = `Steps: ${this.agentState.steps.length} - `;
+            // Calculate total tool calls across all steps
+            const totalToolCalls = this.agentState.steps.reduce((total, step) => total + step.toolCalls.length, 0);
+            status += `Tool calls: ${totalToolCalls} - `;
+            // Show time spend on this prompt
+            status += `${formatDuration(this.agentState.timestamps.stop - this.agentState.timestamps.start)} - `;
+            const total = this.agentState.totalUsage;
+            const inputTokens = total.inputTokens;
+            const outputTokens = total.outputTokens;
+            const cachedInputTokens = total.cachedInputTokens;
+            const tokenSummary = `↑ ${formatNumber(inputTokens)} (${formatNumber(cachedInputTokens)}) ↓ ${formatNumber(outputTokens)} - `;
+            status += tokenSummary;
+            const inputCost = this.agentState.modelConfig.costPerInputToken * inputTokens;
+            const outputCost = this.agentState.modelConfig.costPerOutputToken * outputTokens;
+            status += `$${(inputCost + outputCost).toFixed(2)}`;
+            results.push(style.dim(status));
         }
-        for (const toolCallOrResult of currentToolCalls) {
-            const toolName = toolCallOrResult.toolName;
-            if (!toolColors.has(toolName)) {
-                const availableColors = styleColors.filter((color) => !Array.from(toolColors.values()).some((c) => c === style[color]));
-                const color = availableColors.length > 0
-                    ? (availableColors[Math.floor(Math.random() * availableColors.length)] ?? "white")
-                    : "white";
-                toolColors.set(toolName, style[color]);
-            }
-            toolsCalled.push(toolName);
-        }
-    }
-    if (toolsCalled.length > 0) {
-        results.push(style.dim("Tools:"));
-        let toolBlocks = "";
-        for (const toolCalled of toolsCalled) {
-            const colorFn = toolColors.get(toolCalled) ?? style.white;
-            toolBlocks += `${colorFn("██")} `;
-        }
-        results.push(toolBlocks);
-        results.push("");
-        let toolLegend = "";
-        const uniqueTools = new Set(toolsCalled);
-        for (const [index, toolCalled] of Array.from(uniqueTools).entries()) {
-            const colorFn = toolColors.get(toolCalled) ?? style.white;
-            toolLegend += colorFn(toolCalled);
-            if (index < new Set(toolsCalled).size - 1) {
-                toolLegend += " - ";
-            }
-        }
-        results.push(toolLegend);
-        results.push("");
+        // Add progress bar output
+        results.push(...this.progressBar.render(width));
+        return results;
     }
-    return results;
 }

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

@@ -0,0 +1,21 @@
+import { type StyleInstance } from "../../terminal/style.ts";
+import type { Component } from "../tui.ts";
+/**
+ * Header component - displays styled header line
+ */
+export declare class HeaderComponent implements Component {
+    private header;
+    private styleFn;
+    private width;
+    private cachedOutput?;
+    private cachedHeader?;
+    private cachedStyleFn?;
+    private cachedWidth?;
+    constructor(header: string, styleFn?: StyleInstance, width?: number);
+    setHeader(header: string): void;
+    setStyleFn(styleFn: StyleInstance): void;
+    setWidth(width: number): void;
+    private invalidateCache;
+    render(width: number): string[];
+}
+//# sourceMappingURL=header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../source/tui/components/header.ts"],"names":[],"mappings":"AACA,OAAc,EAAE,KAAK,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3C;;GAEG;AACH,qBAAa,eAAgB,YAAW,SAAS;IAC/C,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,KAAK,CAAS;IAGtB,OAAO,CAAC,YAAY,CAAC,CAAW;IAChC,OAAO,CAAC,YAAY,CAAC,CAAS;IAC9B,OAAO,CAAC,aAAa,CAAC,CAAgB;IACtC,OAAO,CAAC,WAAW,CAAC,CAAS;gBAG3B,MAAM,EAAE,MAAM,EACd,OAAO,GAAE,aAA0B,EACnC,KAAK,CAAC,EAAE,MAAM;IAOhB,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAK/B,UAAU,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IAKxC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,OAAO,CAAC,eAAe;IAOvB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;CA+BhC"}

package/dist/tui/components/header.js

@@ -0,0 +1,63 @@
+import { getTerminalSize } from "../../terminal/control.js";
+import style from "../../terminal/style.js";
+/**
+ * Header component - displays styled header line
+ */
+export class HeaderComponent {
+    header;
+    styleFn;
+    width;
+    // Cache for rendered output
+    cachedOutput;
+    cachedHeader;
+    cachedStyleFn;
+    cachedWidth;
+    constructor(header, styleFn = style.cyan, width) {
+        this.header = header;
+        this.styleFn = styleFn;
+        this.width = width || 0;
+    }
+    setHeader(header) {
+        this.header = header;
+        this.invalidateCache();
+    }
+    setStyleFn(styleFn) {
+        this.styleFn = styleFn;
+        this.invalidateCache();
+    }
+    setWidth(width) {
+        this.width = width;
+        this.invalidateCache();
+    }
+    invalidateCache() {
+        this.cachedOutput = undefined;
+        this.cachedHeader = undefined;
+        this.cachedStyleFn = undefined;
+        this.cachedWidth = undefined;
+    }
+    render(width) {
+        // Use provided width if specified, otherwise use component width or terminal size
+        let renderWidth = width || this.width;
+        if (renderWidth === 0) {
+            const { columns } = getTerminalSize();
+            const cols = columns > 0 ? columns : 80;
+            renderWidth = Math.max(0, cols - this.header.length - 4);
+        }
+        // Check cache
+        if (this.cachedOutput &&
+            this.cachedHeader === this.header &&
+            this.cachedStyleFn === this.styleFn &&
+            this.cachedWidth === renderWidth) {
+            return this.cachedOutput;
+        }
+        const result = [
+            `${style.gray("\n── ")}${this.styleFn(this.header)} ${style.gray("─".repeat(renderWidth))}`,
+        ];
+        // Update cache
+        this.cachedOutput = result;
+        this.cachedHeader = this.header;
+        this.cachedStyleFn = this.styleFn;
+        this.cachedWidth = renderWidth;
+        return result;
+    }
+}

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../source/tui/components/input.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAG3C;;GAEG;AACH,qBAAa,KAAM,YAAW,SAAS;IACrC,OAAO,CAAC,KAAK,CAAM;IACnB,OAAO,CAAC,MAAM,CAAK;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,QAAQ,IAAI,MAAM;IAIlB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAiE/B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;CAuDhC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../source/tui/components/input.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAG3C;;GAEG;AACH,qBAAa,KAAM,YAAW,SAAS;IACrC,OAAO,CAAC,KAAK,CAAM;IACnB,OAAO,CAAC,MAAM,CAAK;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,QAAQ,IAAI,MAAM;IAIlB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAiE/B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;CAuDhC"}

package/dist/tui/components/input.js

@@ -1,3 +1,4 @@
+import { isArrowLeft, isArrowRight, isBackspace, isCtrlA, isCtrlE, isDelete, isEnter, } from "../../terminal/keys.js";
 import { visibleWidth } from "../utils.js";
 /**
  * Input component - single-line text input with horizontal scrolling
@@ -15,14 +16,14 @@ export class Input {
     }
     handleInput(data) {
         // Handle special keys
-        if (data === "\r" || data === "\n") {
+        if (isEnter(data)) {
             // Enter - submit
             if (this.onSubmit) {
                 this.onSubmit(this.value);
             }
             return;
         }
-        if (data === "\x7f" || data === "\x08") {
+        if (isBackspace(data)) {
             // Backspace
             if (this.cursor > 0) {
                 this.value =
@@ -31,21 +32,21 @@ export class Input {
             }
             return;
         }
-        if (data === "\x1b[D") {
+        if (isArrowLeft(data)) {
             // Left arrow
             if (this.cursor > 0) {
                 this.cursor--;
             }
             return;
         }
-        if (data === "\x1b[C") {
+        if (isArrowRight(data)) {
             // Right arrow
             if (this.cursor < this.value.length) {
                 this.cursor++;
             }
             return;
         }
-        if (data === "\x1b[3~") {
+        if (isDelete(data)) {
             // Delete
             if (this.cursor < this.value.length) {
                 this.value =
@@ -53,12 +54,12 @@ export class Input {
             }
             return;
         }
-        if (data === "\x01") {
+        if (isCtrlA(data)) {
             // Ctrl+A - beginning of line
             this.cursor = 0;
             return;
         }
-        if (data === "\x05") {
+        if (isCtrlE(data)) {
             // Ctrl+E - end of line
             this.cursor = this.value.length;
             return;

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

@@ -6,10 +6,15 @@ import { Text } from "./text.ts";
 export declare class Loader extends Text {
     private frames;
     private currentFrame;
+    private topPadding;
     private intervalId;
     private ui;
     private message;
-    constructor(ui: TUI, message?: string);
+    constructor(ui: TUI, message?: string, topPadding?: boolean, customBgRgb?: {
+        r: number;
+        g: number;
+        b: number;
+    });
     render(width: number): string[];
     start(): void;
     stop(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../../source/tui/components/loader.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC;;GAEG;AACH,qBAAa,MAAO,SAAQ,IAAI;IAC9B,OAAO,CAAC,MAAM,CAAsD;IACpE,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,EAAE,CAAoB;IAC9B,OAAO,CAAC,OAAO,CAAS;gBAEZ,EAAE,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,MAAM;IAO5B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;IAIxC,KAAK;IAQL,IAAI;IAOJ,UAAU,CAAC,OAAO,EAAE,MAAM;IAK1B,OAAO,CAAC,aAAa;CAOtB"}
+{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../../source/tui/components/loader.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC;;GAEG;AACH,qBAAa,MAAO,SAAQ,IAAI;IAC9B,OAAO,CAAC,MAAM,CAAsD;IACpE,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,EAAE,CAAoB;IAC9B,OAAO,CAAC,OAAO,CAAS;gBAGtB,EAAE,EAAE,GAAG,EACP,OAAO,CAAC,EAAE,MAAM,EAChB,UAAU,CAAC,EAAE,OAAO,EACpB,WAAW,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;IAS1C,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;IAOxC,KAAK;IAQL,IAAI;IAOJ,UAAU,CAAC,OAAO,EAAE,MAAM;IAK1B,OAAO,CAAC,aAAa;CAOtB"}

package/dist/tui/components/loader.js

@@ -6,17 +6,22 @@ import { Text } from "./text.js";
 export class Loader extends Text {
     frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
     currentFrame = 0;
+    topPadding;
     intervalId = null;
     ui = null;
     message;
-    constructor(ui, message) {
-        super("", 1, 0);
+    constructor(ui, message, topPadding, customBgRgb) {
+        super("", 1, 0, customBgRgb);
         this.message = message ?? "Loading...";
+        this.topPadding = topPadding ?? true;
         this.ui = ui;
         this.start();
     }
     render(width) {
-        return ["", ...super.render(width)];
+        if (this.topPadding) {
+            return ["", ...super.render(width)];
+        }
+        return super.render(width);
     }
     start() {
         this.updateDisplay();

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

@@ -1,29 +1,13 @@
+import type { Theme } from "../../terminal/highlight/theme.ts";
 import type { Component } from "../tui.ts";
 type Color = "black" | "red" | "green" | "yellow" | "blue" | "magenta" | "cyan" | "white" | "gray" | "bgBlack" | "bgRed" | "bgGreen" | "bgYellow" | "bgBlue" | "bgMagenta" | "bgCyan" | "bgWhite" | "bgGray";
-/**
- * Default text styling for markdown content.
- * Applied to all text unless overridden by markdown formatting.
- */
-export interface DefaultTextStyle {
-    /** Foreground color function */
-    color?: (text: string) => string;
-    /** Background color function */
-    bgColor?: (text: string) => string;
-    /** Bold text */
-    bold?: boolean;
-    /** Italic text */
-    italic?: boolean;
-    /** Strikethrough text */
-    strikethrough?: boolean;
-    /** Underline text */
-    underline?: boolean;
-}
 /**
  * Theme functions for markdown elements.
  * Each function takes text and returns styled text with ANSI codes.
  */
 export interface MarkdownTheme {
     heading: (text: string) => string;
+    paragraph: (text: string) => string;
     link: (text: string) => string;
     linkUrl: (text: string) => string;
     code: (text: string) => string;
@@ -38,20 +22,39 @@ export interface MarkdownTheme {
     strikethrough: (text: string) => string;
     underline: (text: string) => string;
 }
+/**
+ * Options for configuring Markdown component
+ */
+export interface MarkdownOptions {
+    /** Background color */
+    bgColor?: Color;
+    /** Custom background RGB color */
+    customBgRgb?: {
+        r: number;
+        g: number;
+        b: number;
+    };
+    /** Horizontal padding */
+    paddingX?: number;
+    /** Vertical padding */
+    paddingY?: number;
+    /** Theme for markdown */
+    theme?: MarkdownTheme;
+    /** Theme for code highlighting */
+    highlightTheme?: Theme;
+}
 export declare class Markdown implements Component {
     private text;
     private bgColor?;
     private customBgRgb?;
     private paddingX;
     private paddingY;
+    private theme;
+    private highlightTheme;
     private cachedText?;
     private cachedWidth?;
     private cachedLines?;
-    constructor(text?: string, bgColor?: Color, _fgColor?: Color, customBgRgb?: {
-        r: number;
-        g: number;
-        b: number;
-    }, paddingX?: number, paddingY?: number);
+    constructor(text: string, options?: MarkdownOptions);
     setText(text: string): void;
     setBgColor(bgColor?: Color): void;
     setCustomBgRgb(customBgRgb?: {
@@ -68,15 +71,16 @@ export declare class Markdown implements Component {
     private renderToken;
     private renderInlineTokens;
     private wrapLine;
+    /**
+     * Map a position in clean text to the corresponding position in styled text
+     * This accounts for ANSI escape codes that are inserted between characters
+     */
+    private cleanToStyledIndex;
     /**
      * Protect inline code spans by replacing them with placeholders
      * This prevents wrapAnsi from breaking code spans across lines
      */
     private protectCodeSpans;
-    /**
-     * Check if a potential code span is an actual code span (not escaped backticks)
-     */
-    private isActualCodeSpan;
     /**
      * Check if a line represents a nested list item
      */