@mariozechner/pi-coding-agent 0.6.2

package/dist/tui/assistant-message.js

@@ -0,0 +1,53 @@
+import { Container, Markdown, Spacer, Text } from "@mariozechner/pi-tui";
+import chalk from "chalk";
+/**
+ * Component that renders a complete assistant message
+ */
+export class AssistantMessageComponent 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 &&
+            message.content.some((c) => (c.type === "text" && c.text.trim()) || (c.type === "thinking" && c.thinking.trim()))) {
+            this.contentContainer.addChild(new Spacer(1));
+        }
+        // Render content in order
+        for (const content of message.content) {
+            if (content.type === "text" && content.text.trim()) {
+                // Assistant text messages with no background - trim the text
+                // Set paddingY=0 to avoid extra spacing before tool executions
+                this.contentContainer.addChild(new Markdown(content.text.trim(), undefined, undefined, undefined, 1, 0));
+            }
+            else if (content.type === "thinking" && content.thinking.trim()) {
+                // Thinking traces in dark gray italic
+                // Use Markdown component because it preserves ANSI codes across wrapped lines
+                const thinkingText = chalk.gray.italic(content.thinking);
+                this.contentContainer.addChild(new Markdown(thinkingText, undefined, undefined, undefined, 1, 0));
+                this.contentContainer.addChild(new Spacer(1));
+            }
+        }
+        // Check if aborted - show after partial content
+        // But only if there are no tool calls (tool execution components will show the error)
+        const hasToolCalls = message.content.some((c) => c.type === "toolCall");
+        if (!hasToolCalls) {
+            if (message.stopReason === "aborted") {
+                this.contentContainer.addChild(new Text(chalk.red("Aborted"), 1, 0));
+            }
+            else if (message.stopReason === "error") {
+                const errorMsg = message.errorMessage || "Unknown error";
+                this.contentContainer.addChild(new Text(chalk.red(`Error: ${errorMsg}`)));
+            }
+        }
+    }
+}
+//# sourceMappingURL=assistant-message.js.map

package/dist/tui/assistant-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assistant-message.js","sourceRoot":"","sources":["../../src/tui/assistant-message.ts"],"names":[],"mappings":"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","sourcesContent":["import type { AssistantMessage } from \"@mariozechner/pi-ai\";\nimport { Container, Markdown, Spacer, Text } from \"@mariozechner/pi-tui\";\nimport chalk from \"chalk\";\n\n/**\n * Component that renders a complete assistant message\n */\nexport class AssistantMessageComponent extends Container {\n\tprivate contentContainer: Container;\n\n\tconstructor(message?: AssistantMessage) {\n\t\tsuper();\n\n\t\t// Container for text/thinking content\n\t\tthis.contentContainer = new Container();\n\t\tthis.addChild(this.contentContainer);\n\n\t\tif (message) {\n\t\t\tthis.updateContent(message);\n\t\t}\n\t}\n\n\tupdateContent(message: AssistantMessage): void {\n\t\t// Clear content container\n\t\tthis.contentContainer.clear();\n\n\t\tif (\n\t\t\tmessage.content.length > 0 &&\n\t\t\tmessage.content.some(\n\t\t\t\t(c) => (c.type === \"text\" && c.text.trim()) || (c.type === \"thinking\" && c.thinking.trim()),\n\t\t\t)\n\t\t) {\n\t\t\tthis.contentContainer.addChild(new Spacer(1));\n\t\t}\n\n\t\t// Render content in order\n\t\tfor (const content of message.content) {\n\t\t\tif (content.type === \"text\" && content.text.trim()) {\n\t\t\t\t// Assistant text messages with no background - trim the text\n\t\t\t\t// Set paddingY=0 to avoid extra spacing before tool executions\n\t\t\t\tthis.contentContainer.addChild(new Markdown(content.text.trim(), undefined, undefined, undefined, 1, 0));\n\t\t\t} else if (content.type === \"thinking\" && content.thinking.trim()) {\n\t\t\t\t// Thinking traces in dark gray italic\n\t\t\t\t// Use Markdown component because it preserves ANSI codes across wrapped lines\n\t\t\t\tconst thinkingText = chalk.gray.italic(content.thinking);\n\t\t\t\tthis.contentContainer.addChild(new Markdown(thinkingText, undefined, undefined, undefined, 1, 0));\n\t\t\t\tthis.contentContainer.addChild(new Spacer(1));\n\t\t\t}\n\t\t}\n\n\t\t// Check if aborted - show after partial content\n\t\t// But only if there are no tool calls (tool execution components will show the error)\n\t\tconst hasToolCalls = message.content.some((c) => c.type === \"toolCall\");\n\t\tif (!hasToolCalls) {\n\t\t\tif (message.stopReason === \"aborted\") {\n\t\t\t\tthis.contentContainer.addChild(new Text(chalk.red(\"Aborted\"), 1, 0));\n\t\t\t} else if (message.stopReason === \"error\") {\n\t\t\t\tconst errorMsg = message.errorMessage || \"Unknown error\";\n\t\t\t\tthis.contentContainer.addChild(new Text(chalk.red(`Error: ${errorMsg}`)));\n\t\t\t}\n\t\t}\n\t}\n}\n"]}

package/dist/tui/custom-editor.d.ts

@@ -0,0 +1,10 @@
+import { Editor } from "@mariozechner/pi-tui";
+/**
+ * Custom editor that handles Escape and Ctrl+C keys for coding-agent
+ */
+export declare class CustomEditor extends Editor {
+    onEscape?: () => void;
+    onCtrlC?: () => void;
+    handleInput(data: string): void;
+}
+//# sourceMappingURL=custom-editor.d.ts.map

package/dist/tui/custom-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-editor.d.ts","sourceRoot":"","sources":["../../src/tui/custom-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C;;GAEG;AACH,qBAAa,YAAa,SAAQ,MAAM;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAgB9B;CACD","sourcesContent":["import { Editor } from \"@mariozechner/pi-tui\";\n\n/**\n * Custom editor that handles Escape and Ctrl+C keys for coding-agent\n */\nexport class CustomEditor extends Editor {\n\tpublic onEscape?: () => void;\n\tpublic onCtrlC?: () => void;\n\n\thandleInput(data: string): void {\n\t\t// Intercept Escape key - but only if autocomplete is NOT active\n\t\t// (let parent handle escape for autocomplete cancellation)\n\t\tif (data === \"\\x1b\" && this.onEscape && !this.isShowingAutocomplete()) {\n\t\t\tthis.onEscape();\n\t\t\treturn;\n\t\t}\n\n\t\t// Intercept Ctrl+C\n\t\tif (data === \"\\x03\" && this.onCtrlC) {\n\t\t\tthis.onCtrlC();\n\t\t\treturn;\n\t\t}\n\n\t\t// Pass to parent for normal handling\n\t\tsuper.handleInput(data);\n\t}\n}\n"]}

package/dist/tui/custom-editor.js

@@ -0,0 +1,24 @@
+import { Editor } from "@mariozechner/pi-tui";
+/**
+ * Custom editor that handles Escape and Ctrl+C keys for coding-agent
+ */
+export class CustomEditor extends Editor {
+    onEscape;
+    onCtrlC;
+    handleInput(data) {
+        // Intercept Escape key - but only if autocomplete is NOT active
+        // (let parent handle escape for autocomplete cancellation)
+        if (data === "\x1b" && this.onEscape && !this.isShowingAutocomplete()) {
+            this.onEscape();
+            return;
+        }
+        // Intercept Ctrl+C
+        if (data === "\x03" && this.onCtrlC) {
+            this.onCtrlC();
+            return;
+        }
+        // Pass to parent for normal handling
+        super.handleInput(data);
+    }
+}
+//# sourceMappingURL=custom-editor.js.map

package/dist/tui/custom-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-editor.js","sourceRoot":"","sources":["../../src/tui/custom-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,MAAM;IAChC,QAAQ,CAAc;IACtB,OAAO,CAAc;IAE5B,WAAW,CAAC,IAAY,EAAQ;QAC/B,gEAAgE;QAChE,2DAA2D;QAC3D,IAAI,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,CAAC;YACvE,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,OAAO;QACR,CAAC;QAED,mBAAmB;QACnB,IAAI,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACrC,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,OAAO;QACR,CAAC;QAED,qCAAqC;QACrC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAAA,CACxB;CACD","sourcesContent":["import { Editor } from \"@mariozechner/pi-tui\";\n\n/**\n * Custom editor that handles Escape and Ctrl+C keys for coding-agent\n */\nexport class CustomEditor extends Editor {\n\tpublic onEscape?: () => void;\n\tpublic onCtrlC?: () => void;\n\n\thandleInput(data: string): void {\n\t\t// Intercept Escape key - but only if autocomplete is NOT active\n\t\t// (let parent handle escape for autocomplete cancellation)\n\t\tif (data === \"\\x1b\" && this.onEscape && !this.isShowingAutocomplete()) {\n\t\t\tthis.onEscape();\n\t\t\treturn;\n\t\t}\n\n\t\t// Intercept Ctrl+C\n\t\tif (data === \"\\x03\" && this.onCtrlC) {\n\t\t\tthis.onCtrlC();\n\t\t\treturn;\n\t\t}\n\n\t\t// Pass to parent for normal handling\n\t\tsuper.handleInput(data);\n\t}\n}\n"]}

package/dist/tui/footer.d.ts

@@ -0,0 +1,11 @@
+import type { AgentState } from "@mariozechner/pi-agent";
+/**
+ * Footer component that shows pwd, token stats, and context usage
+ */
+export declare class FooterComponent {
+    private state;
+    constructor(state: AgentState);
+    updateState(state: AgentState): void;
+    render(width: number): string[];
+}
+//# sourceMappingURL=footer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../src/tui/footer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAKzD;;GAEG;AACH,qBAAa,eAAe;IAC3B,OAAO,CAAC,KAAK,CAAa;IAE1B,YAAY,KAAK,EAAE,UAAU,EAE5B;IAED,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAEnC;IAED,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAuF9B;CACD","sourcesContent":["import type { AgentState } from \"@mariozechner/pi-agent\";\nimport type { AssistantMessage } from \"@mariozechner/pi-ai\";\nimport { visibleWidth } from \"@mariozechner/pi-tui\";\nimport chalk from \"chalk\";\n\n/**\n * Footer component that shows pwd, token stats, and context usage\n */\nexport class FooterComponent {\n\tprivate state: AgentState;\n\n\tconstructor(state: AgentState) {\n\t\tthis.state = state;\n\t}\n\n\tupdateState(state: AgentState): void {\n\t\tthis.state = state;\n\t}\n\n\trender(width: number): string[] {\n\t\t// Calculate cumulative usage from all assistant messages\n\t\tlet totalInput = 0;\n\t\tlet totalOutput = 0;\n\t\tlet totalCacheRead = 0;\n\t\tlet totalCacheWrite = 0;\n\t\tlet totalCost = 0;\n\n\t\tfor (const message of this.state.messages) {\n\t\t\tif (message.role === \"assistant\") {\n\t\t\t\tconst assistantMsg = message as AssistantMessage;\n\t\t\t\ttotalInput += assistantMsg.usage.input;\n\t\t\t\ttotalOutput += assistantMsg.usage.output;\n\t\t\t\ttotalCacheRead += assistantMsg.usage.cacheRead;\n\t\t\t\ttotalCacheWrite += assistantMsg.usage.cacheWrite;\n\t\t\t\ttotalCost += assistantMsg.usage.cost.total;\n\t\t\t}\n\t\t}\n\n\t\t// Calculate total tokens and % of context window\n\t\tconst totalTokens = totalInput + totalOutput;\n\t\tconst contextWindow = this.state.model.contextWindow;\n\t\tconst contextPercent = contextWindow > 0 ? ((totalTokens / contextWindow) * 100).toFixed(1) : \"0.0\";\n\n\t\t// Format token counts (similar to web-ui)\n\t\tconst formatTokens = (count: number): string => {\n\t\t\tif (count < 1000) return count.toString();\n\t\t\tif (count < 10000) return (count / 1000).toFixed(1) + \"k\";\n\t\t\treturn Math.round(count / 1000) + \"k\";\n\t\t};\n\n\t\t// Replace home directory with ~\n\t\tlet pwd = process.cwd();\n\t\tconst home = process.env.HOME || process.env.USERPROFILE;\n\t\tif (home && pwd.startsWith(home)) {\n\t\t\tpwd = \"~\" + pwd.slice(home.length);\n\t\t}\n\n\t\t// Truncate path if too long to fit width\n\t\tconst maxPathLength = Math.max(20, width - 10); // Leave some margin\n\t\tif (pwd.length > maxPathLength) {\n\t\t\tconst start = pwd.slice(0, Math.floor(maxPathLength / 2) - 2);\n\t\t\tconst end = pwd.slice(-(Math.floor(maxPathLength / 2) - 1));\n\t\t\tpwd = `${start}...${end}`;\n\t\t}\n\n\t\t// Build stats line\n\t\tconst statsParts = [];\n\t\tif (totalInput) statsParts.push(`↑${formatTokens(totalInput)}`);\n\t\tif (totalOutput) statsParts.push(`↓${formatTokens(totalOutput)}`);\n\t\tif (totalCacheRead) statsParts.push(`R${formatTokens(totalCacheRead)}`);\n\t\tif (totalCacheWrite) statsParts.push(`W${formatTokens(totalCacheWrite)}`);\n\t\tif (totalCost) statsParts.push(`$${totalCost.toFixed(3)}`);\n\t\tstatsParts.push(`${contextPercent}%`);\n\n\t\tconst statsLeft = statsParts.join(\" \");\n\n\t\t// Add model name on the right side\n\t\tlet modelName = this.state.model.id;\n\t\tconst statsLeftWidth = visibleWidth(statsLeft);\n\t\tconst modelWidth = visibleWidth(modelName);\n\n\t\t// Calculate available space for padding (minimum 2 spaces between stats and model)\n\t\tconst minPadding = 2;\n\t\tconst totalNeeded = statsLeftWidth + minPadding + modelWidth;\n\n\t\tlet statsLine: string;\n\t\tif (totalNeeded <= width) {\n\t\t\t// Both fit - add padding to right-align model\n\t\t\tconst padding = \" \".repeat(width - statsLeftWidth - modelWidth);\n\t\t\tstatsLine = statsLeft + padding + modelName;\n\t\t} else {\n\t\t\t// Need to truncate model name\n\t\t\tconst availableForModel = width - statsLeftWidth - minPadding;\n\t\t\tif (availableForModel > 3) {\n\t\t\t\t// Truncate model name to fit\n\t\t\t\tmodelName = modelName.substring(0, availableForModel);\n\t\t\t\tconst padding = \" \".repeat(width - statsLeftWidth - visibleWidth(modelName));\n\t\t\t\tstatsLine = statsLeft + padding + modelName;\n\t\t\t} else {\n\t\t\t\t// Not enough space for model name at all\n\t\t\t\tstatsLine = statsLeft;\n\t\t\t}\n\t\t}\n\n\t\t// Return two lines: pwd and stats\n\t\treturn [chalk.gray(pwd), chalk.gray(statsLine)];\n\t}\n}\n"]}

package/dist/tui/footer.js

@@ -0,0 +1,101 @@
+import { visibleWidth } from "@mariozechner/pi-tui";
+import chalk from "chalk";
+/**
+ * Footer component that shows pwd, token stats, and context usage
+ */
+export class FooterComponent {
+    state;
+    constructor(state) {
+        this.state = state;
+    }
+    updateState(state) {
+        this.state = state;
+    }
+    render(width) {
+        // 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;
+                totalInput += assistantMsg.usage.input;
+                totalOutput += assistantMsg.usage.output;
+                totalCacheRead += assistantMsg.usage.cacheRead;
+                totalCacheWrite += assistantMsg.usage.cacheWrite;
+                totalCost += assistantMsg.usage.cost.total;
+            }
+        }
+        // Calculate total tokens and % of context window
+        const totalTokens = totalInput + totalOutput;
+        const contextWindow = this.state.model.contextWindow;
+        const contextPercent = contextWindow > 0 ? ((totalTokens / contextWindow) * 100).toFixed(1) : "0.0";
+        // Format token counts (similar to web-ui)
+        const formatTokens = (count) => {
+            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;
+        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)];
+    }
+}
+//# sourceMappingURL=footer.js.map

package/dist/tui/footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../src/tui/footer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,MAAM,OAAO,eAAe;IACnB,KAAK,CAAa;IAE1B,YAAY,KAAiB,EAAE;QAC9B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IAAA,CACnB;IAED,WAAW,CAAC,KAAiB,EAAQ;QACpC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IAAA,CACnB;IAED,MAAM,CAAC,KAAa,EAAY;QAC/B,yDAAyD;QACzD,IAAI,UAAU,GAAG,CAAC,CAAC;QACnB,IAAI,WAAW,GAAG,CAAC,CAAC;QACpB,IAAI,cAAc,GAAG,CAAC,CAAC;QACvB,IAAI,eAAe,GAAG,CAAC,CAAC;QACxB,IAAI,SAAS,GAAG,CAAC,CAAC;QAElB,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YAC3C,IAAI,OAAO,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;gBAClC,MAAM,YAAY,GAAG,OAA2B,CAAC;gBACjD,UAAU,IAAI,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC;gBACvC,WAAW,IAAI,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC;gBACzC,cAAc,IAAI,YAAY,CAAC,KAAK,CAAC,SAAS,CAAC;gBAC/C,eAAe,IAAI,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC;gBACjD,SAAS,IAAI,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;YAC5C,CAAC;QACF,CAAC;QAED,iDAAiD;QACjD,MAAM,WAAW,GAAG,UAAU,GAAG,WAAW,CAAC;QAC7C,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC;QACrD,MAAM,cAAc,GAAG,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,aAAa,CAAC,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAEpG,0CAA0C;QAC1C,MAAM,YAAY,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC;YAC/C,IAAI,KAAK,GAAG,IAAI;gBAAE,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;YAC1C,IAAI,KAAK,GAAG,KAAK;gBAAE,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;YAC1D,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC;QAAA,CACtC,CAAC;QAEF,gCAAgC;QAChC,IAAI,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;QACxB,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC;QACzD,IAAI,IAAI,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAClC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACpC,CAAC;QAED,yCAAyC;QACzC,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,oBAAoB;QACpE,IAAI,GAAG,CAAC,MAAM,GAAG,aAAa,EAAE,CAAC;YAChC,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;YAC9D,MAAM,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YAC5D,GAAG,GAAG,GAAG,KAAK,MAAM,GAAG,EAAE,CAAC;QAC3B,CAAC;QAED,mBAAmB;QACnB,MAAM,UAAU,GAAG,EAAE,CAAC;QACtB,IAAI,UAAU;YAAE,UAAU,CAAC,IAAI,CAAC,MAAI,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;QAChE,IAAI,WAAW;YAAE,UAAU,CAAC,IAAI,CAAC,MAAI,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAClE,IAAI,cAAc;YAAE,UAAU,CAAC,IAAI,CAAC,IAAI,YAAY,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;QACxE,IAAI,eAAe;YAAE,UAAU,CAAC,IAAI,CAAC,IAAI,YAAY,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;QAC1E,IAAI,SAAS;YAAE,UAAU,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAC3D,UAAU,CAAC,IAAI,CAAC,GAAG,cAAc,GAAG,CAAC,CAAC;QAEtC,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAEvC,mCAAmC;QACnC,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;QACpC,MAAM,cAAc,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;QAC/C,MAAM,UAAU,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;QAE3C,mFAAmF;QACnF,MAAM,UAAU,GAAG,CAAC,CAAC;QACrB,MAAM,WAAW,GAAG,cAAc,GAAG,UAAU,GAAG,UAAU,CAAC;QAE7D,IAAI,SAAiB,CAAC;QACtB,IAAI,WAAW,IAAI,KAAK,EAAE,CAAC;YAC1B,8CAA8C;YAC9C,MAAM,OAAO,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,cAAc,GAAG,UAAU,CAAC,CAAC;YAChE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;QAC7C,CAAC;aAAM,CAAC;YACP,8BAA8B;YAC9B,MAAM,iBAAiB,GAAG,KAAK,GAAG,cAAc,GAAG,UAAU,CAAC;YAC9D,IAAI,iBAAiB,GAAG,CAAC,EAAE,CAAC;gBAC3B,6BAA6B;gBAC7B,SAAS,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC;gBACtD,MAAM,OAAO,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,cAAc,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC;gBAC7E,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;YAC7C,CAAC;iBAAM,CAAC;gBACP,yCAAyC;gBACzC,SAAS,GAAG,SAAS,CAAC;YACvB,CAAC;QACF,CAAC;QAED,kCAAkC;QAClC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IAAA,CAChD;CACD","sourcesContent":["import type { AgentState } from \"@mariozechner/pi-agent\";\nimport type { AssistantMessage } from \"@mariozechner/pi-ai\";\nimport { visibleWidth } from \"@mariozechner/pi-tui\";\nimport chalk from \"chalk\";\n\n/**\n * Footer component that shows pwd, token stats, and context usage\n */\nexport class FooterComponent {\n\tprivate state: AgentState;\n\n\tconstructor(state: AgentState) {\n\t\tthis.state = state;\n\t}\n\n\tupdateState(state: AgentState): void {\n\t\tthis.state = state;\n\t}\n\n\trender(width: number): string[] {\n\t\t// Calculate cumulative usage from all assistant messages\n\t\tlet totalInput = 0;\n\t\tlet totalOutput = 0;\n\t\tlet totalCacheRead = 0;\n\t\tlet totalCacheWrite = 0;\n\t\tlet totalCost = 0;\n\n\t\tfor (const message of this.state.messages) {\n\t\t\tif (message.role === \"assistant\") {\n\t\t\t\tconst assistantMsg = message as AssistantMessage;\n\t\t\t\ttotalInput += assistantMsg.usage.input;\n\t\t\t\ttotalOutput += assistantMsg.usage.output;\n\t\t\t\ttotalCacheRead += assistantMsg.usage.cacheRead;\n\t\t\t\ttotalCacheWrite += assistantMsg.usage.cacheWrite;\n\t\t\t\ttotalCost += assistantMsg.usage.cost.total;\n\t\t\t}\n\t\t}\n\n\t\t// Calculate total tokens and % of context window\n\t\tconst totalTokens = totalInput + totalOutput;\n\t\tconst contextWindow = this.state.model.contextWindow;\n\t\tconst contextPercent = contextWindow > 0 ? ((totalTokens / contextWindow) * 100).toFixed(1) : \"0.0\";\n\n\t\t// Format token counts (similar to web-ui)\n\t\tconst formatTokens = (count: number): string => {\n\t\t\tif (count < 1000) return count.toString();\n\t\t\tif (count < 10000) return (count / 1000).toFixed(1) + \"k\";\n\t\t\treturn Math.round(count / 1000) + \"k\";\n\t\t};\n\n\t\t// Replace home directory with ~\n\t\tlet pwd = process.cwd();\n\t\tconst home = process.env.HOME || process.env.USERPROFILE;\n\t\tif (home && pwd.startsWith(home)) {\n\t\t\tpwd = \"~\" + pwd.slice(home.length);\n\t\t}\n\n\t\t// Truncate path if too long to fit width\n\t\tconst maxPathLength = Math.max(20, width - 10); // Leave some margin\n\t\tif (pwd.length > maxPathLength) {\n\t\t\tconst start = pwd.slice(0, Math.floor(maxPathLength / 2) - 2);\n\t\t\tconst end = pwd.slice(-(Math.floor(maxPathLength / 2) - 1));\n\t\t\tpwd = `${start}...${end}`;\n\t\t}\n\n\t\t// Build stats line\n\t\tconst statsParts = [];\n\t\tif (totalInput) statsParts.push(`↑${formatTokens(totalInput)}`);\n\t\tif (totalOutput) statsParts.push(`↓${formatTokens(totalOutput)}`);\n\t\tif (totalCacheRead) statsParts.push(`R${formatTokens(totalCacheRead)}`);\n\t\tif (totalCacheWrite) statsParts.push(`W${formatTokens(totalCacheWrite)}`);\n\t\tif (totalCost) statsParts.push(`$${totalCost.toFixed(3)}`);\n\t\tstatsParts.push(`${contextPercent}%`);\n\n\t\tconst statsLeft = statsParts.join(\" \");\n\n\t\t// Add model name on the right side\n\t\tlet modelName = this.state.model.id;\n\t\tconst statsLeftWidth = visibleWidth(statsLeft);\n\t\tconst modelWidth = visibleWidth(modelName);\n\n\t\t// Calculate available space for padding (minimum 2 spaces between stats and model)\n\t\tconst minPadding = 2;\n\t\tconst totalNeeded = statsLeftWidth + minPadding + modelWidth;\n\n\t\tlet statsLine: string;\n\t\tif (totalNeeded <= width) {\n\t\t\t// Both fit - add padding to right-align model\n\t\t\tconst padding = \" \".repeat(width - statsLeftWidth - modelWidth);\n\t\t\tstatsLine = statsLeft + padding + modelName;\n\t\t} else {\n\t\t\t// Need to truncate model name\n\t\t\tconst availableForModel = width - statsLeftWidth - minPadding;\n\t\t\tif (availableForModel > 3) {\n\t\t\t\t// Truncate model name to fit\n\t\t\t\tmodelName = modelName.substring(0, availableForModel);\n\t\t\t\tconst padding = \" \".repeat(width - statsLeftWidth - visibleWidth(modelName));\n\t\t\t\tstatsLine = statsLeft + padding + modelName;\n\t\t\t} else {\n\t\t\t\t// Not enough space for model name at all\n\t\t\t\tstatsLine = statsLeft;\n\t\t\t}\n\t\t}\n\n\t\t// Return two lines: pwd and stats\n\t\treturn [chalk.gray(pwd), chalk.gray(statsLine)];\n\t}\n}\n"]}

package/dist/tui/model-selector.d.ts

@@ -0,0 +1,23 @@
+import { type Model } from "@mariozechner/pi-ai";
+import { Container, Input } from "@mariozechner/pi-tui";
+/**
+ * Component that renders a model selector with search
+ */
+export declare class ModelSelectorComponent extends Container {
+    private searchInput;
+    private listContainer;
+    private allModels;
+    private filteredModels;
+    private selectedIndex;
+    private currentModel;
+    private onSelectCallback;
+    private onCancelCallback;
+    constructor(currentModel: Model<any>, onSelect: (model: Model<any>) => void, onCancel: () => void);
+    private loadModels;
+    private filterModels;
+    private updateList;
+    handleInput(keyData: string): void;
+    private handleSelect;
+    getSearchInput(): Input;
+}
+//# sourceMappingURL=model-selector.d.ts.map

package/dist/tui/model-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-selector.d.ts","sourceRoot":"","sources":["../../src/tui/model-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,MAAM,sBAAsB,CAAC;AAStE;;GAEG;AACH,qBAAa,sBAAuB,SAAQ,SAAS;IACpD,OAAO,CAAC,WAAW,CAAQ;IAC3B,OAAO,CAAC,aAAa,CAAY;IACjC,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,CAAC,cAAc,CAAmB;IACzC,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,gBAAgB,CAA8B;IACtD,OAAO,CAAC,gBAAgB,CAAa;IAErC,YAAY,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,QAAQ,EAAE,MAAM,IAAI,EAqChG;IAED,OAAO,CAAC,UAAU;IAwBlB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,UAAU;IA+ClB,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CA2BjC;IAED,OAAO,CAAC,YAAY;IAIpB,cAAc,IAAI,KAAK,CAEtB;CACD","sourcesContent":["import { getModels, getProviders, type Model } from \"@mariozechner/pi-ai\";\nimport { Container, Input, Spacer, Text } from \"@mariozechner/pi-tui\";\nimport chalk from \"chalk\";\n\ninterface ModelItem {\n\tprovider: string;\n\tid: string;\n\tmodel: Model<any>;\n}\n\n/**\n * Component that renders a model selector with search\n */\nexport class ModelSelectorComponent extends Container {\n\tprivate searchInput: Input;\n\tprivate listContainer: Container;\n\tprivate allModels: ModelItem[] = [];\n\tprivate filteredModels: ModelItem[] = [];\n\tprivate selectedIndex: number = 0;\n\tprivate currentModel: Model<any>;\n\tprivate onSelectCallback: (model: Model<any>) => void;\n\tprivate onCancelCallback: () => void;\n\n\tconstructor(currentModel: Model<any>, onSelect: (model: Model<any>) => void, onCancel: () => void) {\n\t\tsuper();\n\n\t\tthis.currentModel = currentModel;\n\t\tthis.onSelectCallback = onSelect;\n\t\tthis.onCancelCallback = onCancel;\n\n\t\t// Load all models\n\t\tthis.loadModels();\n\n\t\t// Add top border\n\t\tthis.addChild(new Text(chalk.blue(\"─\".repeat(80)), 0, 0));\n\t\tthis.addChild(new Spacer(1));\n\n\t\t// Create search input\n\t\tthis.searchInput = new Input();\n\t\tthis.searchInput.onSubmit = () => {\n\t\t\t// Enter on search input selects the first filtered item\n\t\t\tif (this.filteredModels[this.selectedIndex]) {\n\t\t\t\tthis.handleSelect(this.filteredModels[this.selectedIndex].model);\n\t\t\t}\n\t\t};\n\t\tthis.addChild(this.searchInput);\n\n\t\tthis.addChild(new Spacer(1));\n\n\t\t// Create list container\n\t\tthis.listContainer = new Container();\n\t\tthis.addChild(this.listContainer);\n\n\t\tthis.addChild(new Spacer(1));\n\n\t\t// Add bottom border\n\t\tthis.addChild(new Text(chalk.blue(\"─\".repeat(80)), 0, 0));\n\n\t\t// Initial render\n\t\tthis.updateList();\n\t}\n\n\tprivate loadModels(): void {\n\t\tconst models: ModelItem[] = [];\n\t\tconst providers = getProviders();\n\n\t\tfor (const provider of providers) {\n\t\t\tconst providerModels = getModels(provider as any);\n\t\t\tfor (const model of providerModels) {\n\t\t\t\tmodels.push({ provider, id: model.id, model });\n\t\t\t}\n\t\t}\n\n\t\t// Sort: current model first, then by provider\n\t\tmodels.sort((a, b) => {\n\t\t\tconst aIsCurrent = this.currentModel?.id === a.model.id;\n\t\t\tconst bIsCurrent = this.currentModel?.id === b.model.id;\n\t\t\tif (aIsCurrent && !bIsCurrent) return -1;\n\t\t\tif (!aIsCurrent && bIsCurrent) return 1;\n\t\t\treturn a.provider.localeCompare(b.provider);\n\t\t});\n\n\t\tthis.allModels = models;\n\t\tthis.filteredModels = models;\n\t}\n\n\tprivate filterModels(query: string): void {\n\t\tif (!query.trim()) {\n\t\t\tthis.filteredModels = this.allModels;\n\t\t} else {\n\t\t\tconst searchTokens = query\n\t\t\t\t.toLowerCase()\n\t\t\t\t.split(/\\s+/)\n\t\t\t\t.filter((t) => t);\n\t\t\tthis.filteredModels = this.allModels.filter(({ provider, id, model }) => {\n\t\t\t\tconst searchText = `${provider} ${id} ${model.name}`.toLowerCase();\n\t\t\t\treturn searchTokens.every((token) => searchText.includes(token));\n\t\t\t});\n\t\t}\n\n\t\tthis.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.filteredModels.length - 1));\n\t\tthis.updateList();\n\t}\n\n\tprivate updateList(): void {\n\t\tthis.listContainer.clear();\n\n\t\tconst maxVisible = 10;\n\t\tconst startIndex = Math.max(\n\t\t\t0,\n\t\t\tMath.min(this.selectedIndex - Math.floor(maxVisible / 2), this.filteredModels.length - maxVisible),\n\t\t);\n\t\tconst endIndex = Math.min(startIndex + maxVisible, this.filteredModels.length);\n\n\t\t// Show visible slice of filtered models\n\t\tfor (let i = startIndex; i < endIndex; i++) {\n\t\t\tconst item = this.filteredModels[i];\n\t\t\tif (!item) continue;\n\n\t\t\tconst isSelected = i === this.selectedIndex;\n\t\t\tconst isCurrent = this.currentModel?.id === item.model.id;\n\n\t\t\tlet line = \"\";\n\t\t\tif (isSelected) {\n\t\t\t\tconst prefix = chalk.blue(\"→ \");\n\t\t\t\tconst modelText = `${item.id}`;\n\t\t\t\tconst providerBadge = chalk.gray(`[${item.provider}]`);\n\t\t\t\tconst checkmark = isCurrent ? chalk.green(\" ✓\") : \"\";\n\t\t\t\tline = prefix + chalk.blue(modelText) + \" \" + providerBadge + checkmark;\n\t\t\t} else {\n\t\t\t\tconst modelText = `  ${item.id}`;\n\t\t\t\tconst providerBadge = chalk.gray(`[${item.provider}]`);\n\t\t\t\tconst checkmark = isCurrent ? chalk.green(\" ✓\") : \"\";\n\t\t\t\tline = modelText + \" \" + providerBadge + checkmark;\n\t\t\t}\n\n\t\t\tthis.listContainer.addChild(new Text(line, 0, 0));\n\t\t}\n\n\t\t// Add scroll indicator if needed\n\t\tif (startIndex > 0 || endIndex < this.filteredModels.length) {\n\t\t\tconst scrollInfo = chalk.gray(`  (${this.selectedIndex + 1}/${this.filteredModels.length})`);\n\t\t\tthis.listContainer.addChild(new Text(scrollInfo, 0, 0));\n\t\t}\n\n\t\t// Show \"no results\" if empty\n\t\tif (this.filteredModels.length === 0) {\n\t\t\tthis.listContainer.addChild(new Text(chalk.gray(\"  No matching models\"), 0, 0));\n\t\t}\n\t}\n\n\thandleInput(keyData: string): void {\n\t\t// Up arrow\n\t\tif (keyData === \"\\x1b[A\") {\n\t\t\tthis.selectedIndex = Math.max(0, this.selectedIndex - 1);\n\t\t\tthis.updateList();\n\t\t}\n\t\t// Down arrow\n\t\telse if (keyData === \"\\x1b[B\") {\n\t\t\tthis.selectedIndex = Math.min(this.filteredModels.length - 1, this.selectedIndex + 1);\n\t\t\tthis.updateList();\n\t\t}\n\t\t// Enter\n\t\telse if (keyData === \"\\r\") {\n\t\t\tconst selectedModel = this.filteredModels[this.selectedIndex];\n\t\t\tif (selectedModel) {\n\t\t\t\tthis.handleSelect(selectedModel.model);\n\t\t\t}\n\t\t}\n\t\t// Escape\n\t\telse if (keyData === \"\\x1b\") {\n\t\t\tthis.onCancelCallback();\n\t\t}\n\t\t// Pass everything else to search input\n\t\telse {\n\t\t\tthis.searchInput.handleInput(keyData);\n\t\t\tthis.filterModels(this.searchInput.getValue());\n\t\t}\n\t}\n\n\tprivate handleSelect(model: Model<any>): void {\n\t\tthis.onSelectCallback(model);\n\t}\n\n\tgetSearchInput(): Input {\n\t\treturn this.searchInput;\n\t}\n}\n"]}

package/dist/tui/model-selector.js

@@ -0,0 +1,157 @@
+import { getModels, getProviders } from "@mariozechner/pi-ai";
+import { Container, Input, Spacer, Text } from "@mariozechner/pi-tui";
+import chalk from "chalk";
+/**
+ * Component that renders a model selector with search
+ */
+export class ModelSelectorComponent extends Container {
+    searchInput;
+    listContainer;
+    allModels = [];
+    filteredModels = [];
+    selectedIndex = 0;
+    currentModel;
+    onSelectCallback;
+    onCancelCallback;
+    constructor(currentModel, onSelect, onCancel) {
+        super();
+        this.currentModel = currentModel;
+        this.onSelectCallback = onSelect;
+        this.onCancelCallback = onCancel;
+        // Load all models
+        this.loadModels();
+        // Add top border
+        this.addChild(new Text(chalk.blue("─".repeat(80)), 0, 0));
+        this.addChild(new Spacer(1));
+        // Create search input
+        this.searchInput = new Input();
+        this.searchInput.onSubmit = () => {
+            // Enter on search input selects the first filtered item
+            if (this.filteredModels[this.selectedIndex]) {
+                this.handleSelect(this.filteredModels[this.selectedIndex].model);
+            }
+        };
+        this.addChild(this.searchInput);
+        this.addChild(new Spacer(1));
+        // Create list container
+        this.listContainer = new Container();
+        this.addChild(this.listContainer);
+        this.addChild(new Spacer(1));
+        // Add bottom border
+        this.addChild(new Text(chalk.blue("─".repeat(80)), 0, 0));
+        // Initial render
+        this.updateList();
+    }
+    loadModels() {
+        const models = [];
+        const providers = getProviders();
+        for (const provider of providers) {
+            const providerModels = getModels(provider);
+            for (const model of providerModels) {
+                models.push({ provider, id: model.id, model });
+            }
+        }
+        // Sort: current model first, then by provider
+        models.sort((a, b) => {
+            const aIsCurrent = this.currentModel?.id === a.model.id;
+            const bIsCurrent = this.currentModel?.id === b.model.id;
+            if (aIsCurrent && !bIsCurrent)
+                return -1;
+            if (!aIsCurrent && bIsCurrent)
+                return 1;
+            return a.provider.localeCompare(b.provider);
+        });
+        this.allModels = models;
+        this.filteredModels = models;
+    }
+    filterModels(query) {
+        if (!query.trim()) {
+            this.filteredModels = this.allModels;
+        }
+        else {
+            const searchTokens = query
+                .toLowerCase()
+                .split(/\s+/)
+                .filter((t) => t);
+            this.filteredModels = this.allModels.filter(({ provider, id, model }) => {
+                const searchText = `${provider} ${id} ${model.name}`.toLowerCase();
+                return searchTokens.every((token) => searchText.includes(token));
+            });
+        }
+        this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.filteredModels.length - 1));
+        this.updateList();
+    }
+    updateList() {
+        this.listContainer.clear();
+        const maxVisible = 10;
+        const startIndex = Math.max(0, Math.min(this.selectedIndex - Math.floor(maxVisible / 2), this.filteredModels.length - maxVisible));
+        const endIndex = Math.min(startIndex + maxVisible, this.filteredModels.length);
+        // Show visible slice of filtered models
+        for (let i = startIndex; i < endIndex; i++) {
+            const item = this.filteredModels[i];
+            if (!item)
+                continue;
+            const isSelected = i === this.selectedIndex;
+            const isCurrent = this.currentModel?.id === item.model.id;
+            let line = "";
+            if (isSelected) {
+                const prefix = chalk.blue("→ ");
+                const modelText = `${item.id}`;
+                const providerBadge = chalk.gray(`[${item.provider}]`);
+                const checkmark = isCurrent ? chalk.green(" ✓") : "";
+                line = prefix + chalk.blue(modelText) + " " + providerBadge + checkmark;
+            }
+            else {
+                const modelText = `  ${item.id}`;
+                const providerBadge = chalk.gray(`[${item.provider}]`);
+                const checkmark = isCurrent ? chalk.green(" ✓") : "";
+                line = modelText + " " + providerBadge + checkmark;
+            }
+            this.listContainer.addChild(new Text(line, 0, 0));
+        }
+        // Add scroll indicator if needed
+        if (startIndex > 0 || endIndex < this.filteredModels.length) {
+            const scrollInfo = chalk.gray(`  (${this.selectedIndex + 1}/${this.filteredModels.length})`);
+            this.listContainer.addChild(new Text(scrollInfo, 0, 0));
+        }
+        // Show "no results" if empty
+        if (this.filteredModels.length === 0) {
+            this.listContainer.addChild(new Text(chalk.gray("  No matching models"), 0, 0));
+        }
+    }
+    handleInput(keyData) {
+        // Up arrow
+        if (keyData === "\x1b[A") {
+            this.selectedIndex = Math.max(0, this.selectedIndex - 1);
+            this.updateList();
+        }
+        // Down arrow
+        else if (keyData === "\x1b[B") {
+            this.selectedIndex = Math.min(this.filteredModels.length - 1, this.selectedIndex + 1);
+            this.updateList();
+        }
+        // Enter
+        else if (keyData === "\r") {
+            const selectedModel = this.filteredModels[this.selectedIndex];
+            if (selectedModel) {
+                this.handleSelect(selectedModel.model);
+            }
+        }
+        // Escape
+        else if (keyData === "\x1b") {
+            this.onCancelCallback();
+        }
+        // Pass everything else to search input
+        else {
+            this.searchInput.handleInput(keyData);
+            this.filterModels(this.searchInput.getValue());
+        }
+    }
+    handleSelect(model) {
+        this.onSelectCallback(model);
+    }
+    getSearchInput() {
+        return this.searchInput;
+    }
+}
+//# sourceMappingURL=model-selector.js.map

package/dist/tui/model-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-selector.js","sourceRoot":"","sources":["../../src/tui/model-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import { getModels, getProviders, type Model } from \"@mariozechner/pi-ai\";\nimport { Container, Input, Spacer, Text } from \"@mariozechner/pi-tui\";\nimport chalk from \"chalk\";\n\ninterface ModelItem {\n\tprovider: string;\n\tid: string;\n\tmodel: Model<any>;\n}\n\n/**\n * Component that renders a model selector with search\n */\nexport class ModelSelectorComponent extends Container {\n\tprivate searchInput: Input;\n\tprivate listContainer: Container;\n\tprivate allModels: ModelItem[] = [];\n\tprivate filteredModels: ModelItem[] = [];\n\tprivate selectedIndex: number = 0;\n\tprivate currentModel: Model<any>;\n\tprivate onSelectCallback: (model: Model<any>) => void;\n\tprivate onCancelCallback: () => void;\n\n\tconstructor(currentModel: Model<any>, onSelect: (model: Model<any>) => void, onCancel: () => void) {\n\t\tsuper();\n\n\t\tthis.currentModel = currentModel;\n\t\tthis.onSelectCallback = onSelect;\n\t\tthis.onCancelCallback = onCancel;\n\n\t\t// Load all models\n\t\tthis.loadModels();\n\n\t\t// Add top border\n\t\tthis.addChild(new Text(chalk.blue(\"─\".repeat(80)), 0, 0));\n\t\tthis.addChild(new Spacer(1));\n\n\t\t// Create search input\n\t\tthis.searchInput = new Input();\n\t\tthis.searchInput.onSubmit = () => {\n\t\t\t// Enter on search input selects the first filtered item\n\t\t\tif (this.filteredModels[this.selectedIndex]) {\n\t\t\t\tthis.handleSelect(this.filteredModels[this.selectedIndex].model);\n\t\t\t}\n\t\t};\n\t\tthis.addChild(this.searchInput);\n\n\t\tthis.addChild(new Spacer(1));\n\n\t\t// Create list container\n\t\tthis.listContainer = new Container();\n\t\tthis.addChild(this.listContainer);\n\n\t\tthis.addChild(new Spacer(1));\n\n\t\t// Add bottom border\n\t\tthis.addChild(new Text(chalk.blue(\"─\".repeat(80)), 0, 0));\n\n\t\t// Initial render\n\t\tthis.updateList();\n\t}\n\n\tprivate loadModels(): void {\n\t\tconst models: ModelItem[] = [];\n\t\tconst providers = getProviders();\n\n\t\tfor (const provider of providers) {\n\t\t\tconst providerModels = getModels(provider as any);\n\t\t\tfor (const model of providerModels) {\n\t\t\t\tmodels.push({ provider, id: model.id, model });\n\t\t\t}\n\t\t}\n\n\t\t// Sort: current model first, then by provider\n\t\tmodels.sort((a, b) => {\n\t\t\tconst aIsCurrent = this.currentModel?.id === a.model.id;\n\t\t\tconst bIsCurrent = this.currentModel?.id === b.model.id;\n\t\t\tif (aIsCurrent && !bIsCurrent) return -1;\n\t\t\tif (!aIsCurrent && bIsCurrent) return 1;\n\t\t\treturn a.provider.localeCompare(b.provider);\n\t\t});\n\n\t\tthis.allModels = models;\n\t\tthis.filteredModels = models;\n\t}\n\n\tprivate filterModels(query: string): void {\n\t\tif (!query.trim()) {\n\t\t\tthis.filteredModels = this.allModels;\n\t\t} else {\n\t\t\tconst searchTokens = query\n\t\t\t\t.toLowerCase()\n\t\t\t\t.split(/\\s+/)\n\t\t\t\t.filter((t) => t);\n\t\t\tthis.filteredModels = this.allModels.filter(({ provider, id, model }) => {\n\t\t\t\tconst searchText = `${provider} ${id} ${model.name}`.toLowerCase();\n\t\t\t\treturn searchTokens.every((token) => searchText.includes(token));\n\t\t\t});\n\t\t}\n\n\t\tthis.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.filteredModels.length - 1));\n\t\tthis.updateList();\n\t}\n\n\tprivate updateList(): void {\n\t\tthis.listContainer.clear();\n\n\t\tconst maxVisible = 10;\n\t\tconst startIndex = Math.max(\n\t\t\t0,\n\t\t\tMath.min(this.selectedIndex - Math.floor(maxVisible / 2), this.filteredModels.length - maxVisible),\n\t\t);\n\t\tconst endIndex = Math.min(startIndex + maxVisible, this.filteredModels.length);\n\n\t\t// Show visible slice of filtered models\n\t\tfor (let i = startIndex; i < endIndex; i++) {\n\t\t\tconst item = this.filteredModels[i];\n\t\t\tif (!item) continue;\n\n\t\t\tconst isSelected = i === this.selectedIndex;\n\t\t\tconst isCurrent = this.currentModel?.id === item.model.id;\n\n\t\t\tlet line = \"\";\n\t\t\tif (isSelected) {\n\t\t\t\tconst prefix = chalk.blue(\"→ \");\n\t\t\t\tconst modelText = `${item.id}`;\n\t\t\t\tconst providerBadge = chalk.gray(`[${item.provider}]`);\n\t\t\t\tconst checkmark = isCurrent ? chalk.green(\" ✓\") : \"\";\n\t\t\t\tline = prefix + chalk.blue(modelText) + \" \" + providerBadge + checkmark;\n\t\t\t} else {\n\t\t\t\tconst modelText = `  ${item.id}`;\n\t\t\t\tconst providerBadge = chalk.gray(`[${item.provider}]`);\n\t\t\t\tconst checkmark = isCurrent ? chalk.green(\" ✓\") : \"\";\n\t\t\t\tline = modelText + \" \" + providerBadge + checkmark;\n\t\t\t}\n\n\t\t\tthis.listContainer.addChild(new Text(line, 0, 0));\n\t\t}\n\n\t\t// Add scroll indicator if needed\n\t\tif (startIndex > 0 || endIndex < this.filteredModels.length) {\n\t\t\tconst scrollInfo = chalk.gray(`  (${this.selectedIndex + 1}/${this.filteredModels.length})`);\n\t\t\tthis.listContainer.addChild(new Text(scrollInfo, 0, 0));\n\t\t}\n\n\t\t// Show \"no results\" if empty\n\t\tif (this.filteredModels.length === 0) {\n\t\t\tthis.listContainer.addChild(new Text(chalk.gray(\"  No matching models\"), 0, 0));\n\t\t}\n\t}\n\n\thandleInput(keyData: string): void {\n\t\t// Up arrow\n\t\tif (keyData === \"\\x1b[A\") {\n\t\t\tthis.selectedIndex = Math.max(0, this.selectedIndex - 1);\n\t\t\tthis.updateList();\n\t\t}\n\t\t// Down arrow\n\t\telse if (keyData === \"\\x1b[B\") {\n\t\t\tthis.selectedIndex = Math.min(this.filteredModels.length - 1, this.selectedIndex + 1);\n\t\t\tthis.updateList();\n\t\t}\n\t\t// Enter\n\t\telse if (keyData === \"\\r\") {\n\t\t\tconst selectedModel = this.filteredModels[this.selectedIndex];\n\t\t\tif (selectedModel) {\n\t\t\t\tthis.handleSelect(selectedModel.model);\n\t\t\t}\n\t\t}\n\t\t// Escape\n\t\telse if (keyData === \"\\x1b\") {\n\t\t\tthis.onCancelCallback();\n\t\t}\n\t\t// Pass everything else to search input\n\t\telse {\n\t\t\tthis.searchInput.handleInput(keyData);\n\t\t\tthis.filterModels(this.searchInput.getValue());\n\t\t}\n\t}\n\n\tprivate handleSelect(model: Model<any>): void {\n\t\tthis.onSelectCallback(model);\n\t}\n\n\tgetSearchInput(): Input {\n\t\treturn this.searchInput;\n\t}\n}\n"]}

package/dist/tui/session-selector.d.ts

@@ -0,0 +1,37 @@
+import { type Component, Container } from "@mariozechner/pi-tui";
+import type { SessionManager } from "../session-manager.js";
+interface SessionItem {
+    path: string;
+    id: string;
+    created: Date;
+    modified: Date;
+    messageCount: number;
+    firstMessage: string;
+    allMessagesText: string;
+}
+/**
+ * Custom session list component with multi-line items and search
+ */
+declare class SessionList implements Component {
+    private allSessions;
+    private filteredSessions;
+    private selectedIndex;
+    private searchInput;
+    onSelect?: (sessionPath: string) => void;
+    onCancel?: () => void;
+    private maxVisible;
+    constructor(sessions: SessionItem[]);
+    private filterSessions;
+    render(width: number): string[];
+    handleInput(keyData: string): void;
+}
+/**
+ * Component that renders a session selector
+ */
+export declare class SessionSelectorComponent extends Container {
+    private sessionList;
+    constructor(sessionManager: SessionManager, onSelect: (sessionPath: string) => void, onCancel: () => void);
+    getSessionList(): SessionList;
+}
+export {};
+//# sourceMappingURL=session-selector.d.ts.map

package/dist/tui/session-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"session-selector.d.ts","sourceRoot":"","sources":["../../src/tui/session-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,SAAS,EAAuB,MAAM,sBAAsB,CAAC;AAEtF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAW5D,UAAU,WAAW;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,QAAQ,EAAE,IAAI,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,cAAM,WAAY,YAAW,SAAS;IACrC,OAAO,CAAC,WAAW,CAAqB;IACxC,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,WAAW,CAAQ;IACpB,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,OAAO,CAAC,UAAU,CAAa;IAE/B,YAAY,QAAQ,EAAE,WAAW,EAAE,EAclC;IAED,OAAO,CAAC,cAAc;IAkBtB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAoE9B;IAED,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CA+BjC;CACD;AAED;;GAEG;AACH,qBAAa,wBAAyB,SAAQ,SAAS;IACtD,OAAO,CAAC,WAAW,CAAc;IAEjC,YAAY,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,EAAE,QAAQ,EAAE,MAAM,IAAI,EA4BxG;IAED,cAAc,IAAI,WAAW,CAE5B;CACD","sourcesContent":["import { type Component, Container, Input, Spacer, Text } from \"@mariozechner/pi-tui\";\nimport chalk from \"chalk\";\nimport type { SessionManager } from \"../session-manager.js\";\n\n/**\n * Dynamic border component that adjusts to viewport width\n */\nclass DynamicBorder implements Component {\n\trender(width: number): string[] {\n\t\treturn [chalk.blue(\"─\".repeat(Math.max(1, width)))];\n\t}\n}\n\ninterface SessionItem {\n\tpath: string;\n\tid: string;\n\tcreated: Date;\n\tmodified: Date;\n\tmessageCount: number;\n\tfirstMessage: string;\n\tallMessagesText: string;\n}\n\n/**\n * Custom session list component with multi-line items and search\n */\nclass SessionList implements Component {\n\tprivate allSessions: SessionItem[] = [];\n\tprivate filteredSessions: SessionItem[] = [];\n\tprivate selectedIndex: number = 0;\n\tprivate searchInput: Input;\n\tpublic onSelect?: (sessionPath: string) => void;\n\tpublic onCancel?: () => void;\n\tprivate maxVisible: number = 5; // Max sessions visible (each session is 3 lines: msg + metadata + blank)\n\n\tconstructor(sessions: SessionItem[]) {\n\t\tthis.allSessions = sessions;\n\t\tthis.filteredSessions = sessions;\n\t\tthis.searchInput = new Input();\n\n\t\t// Handle Enter in search input - select current item\n\t\tthis.searchInput.onSubmit = () => {\n\t\t\tif (this.filteredSessions[this.selectedIndex]) {\n\t\t\t\tconst selected = this.filteredSessions[this.selectedIndex];\n\t\t\t\tif (this.onSelect) {\n\t\t\t\t\tthis.onSelect(selected.path);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t}\n\n\tprivate filterSessions(query: string): void {\n\t\tif (!query.trim()) {\n\t\t\tthis.filteredSessions = this.allSessions;\n\t\t} else {\n\t\t\tconst searchTokens = query\n\t\t\t\t.toLowerCase()\n\t\t\t\t.split(/\\s+/)\n\t\t\t\t.filter((t) => t);\n\t\t\tthis.filteredSessions = this.allSessions.filter((session) => {\n\t\t\t\t// Search through all messages in the session\n\t\t\t\tconst searchText = session.allMessagesText.toLowerCase();\n\t\t\t\treturn searchTokens.every((token) => searchText.includes(token));\n\t\t\t});\n\t\t}\n\n\t\tthis.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.filteredSessions.length - 1));\n\t}\n\n\trender(width: number): string[] {\n\t\tconst lines: string[] = [];\n\n\t\t// Render search input\n\t\tlines.push(...this.searchInput.render(width));\n\t\tlines.push(\"\"); // Blank line after search\n\n\t\tif (this.filteredSessions.length === 0) {\n\t\t\tlines.push(chalk.gray(\"  No sessions found\"));\n\t\t\treturn lines;\n\t\t}\n\n\t\t// Format dates\n\t\tconst formatDate = (date: Date): string => {\n\t\t\tconst now = new Date();\n\t\t\tconst diffMs = now.getTime() - date.getTime();\n\t\t\tconst diffMins = Math.floor(diffMs / 60000);\n\t\t\tconst diffHours = Math.floor(diffMs / 3600000);\n\t\t\tconst diffDays = Math.floor(diffMs / 86400000);\n\n\t\t\tif (diffMins < 1) return \"just now\";\n\t\t\tif (diffMins < 60) return `${diffMins} minute${diffMins !== 1 ? \"s\" : \"\"} ago`;\n\t\t\tif (diffHours < 24) return `${diffHours} hour${diffHours !== 1 ? \"s\" : \"\"} ago`;\n\t\t\tif (diffDays === 1) return \"1 day ago\";\n\t\t\tif (diffDays < 7) return `${diffDays} days ago`;\n\n\t\t\treturn date.toLocaleDateString();\n\t\t};\n\n\t\t// Calculate visible range with scrolling\n\t\tconst startIndex = Math.max(\n\t\t\t0,\n\t\t\tMath.min(this.selectedIndex - Math.floor(this.maxVisible / 2), this.filteredSessions.length - this.maxVisible),\n\t\t);\n\t\tconst endIndex = Math.min(startIndex + this.maxVisible, this.filteredSessions.length);\n\n\t\t// Render visible sessions (2 lines per session + blank line)\n\t\tfor (let i = startIndex; i < endIndex; i++) {\n\t\t\tconst session = this.filteredSessions[i];\n\t\t\tconst isSelected = i === this.selectedIndex;\n\n\t\t\t// Normalize first message to single line\n\t\t\tconst normalizedMessage = session.firstMessage.replace(/\\n/g, \" \").trim();\n\n\t\t\t// First line: cursor + message\n\t\t\tconst cursor = isSelected ? chalk.blue(\"› \") : \"  \";\n\t\t\tconst maxMsgWidth = width - 2; // Account for cursor\n\t\t\tconst truncatedMsg = normalizedMessage.substring(0, maxMsgWidth);\n\t\t\tconst messageLine = cursor + (isSelected ? chalk.bold(truncatedMsg) : truncatedMsg);\n\n\t\t\t// Second line: metadata (dimmed)\n\t\t\tconst modified = formatDate(session.modified);\n\t\t\tconst msgCount = `${session.messageCount} message${session.messageCount !== 1 ? \"s\" : \"\"}`;\n\t\t\tconst metadata = `  ${modified} · ${msgCount}`;\n\t\t\tconst metadataLine = chalk.dim(metadata);\n\n\t\t\tlines.push(messageLine);\n\t\t\tlines.push(metadataLine);\n\t\t\tlines.push(\"\"); // Blank line between sessions\n\t\t}\n\n\t\t// Add scroll indicator if needed\n\t\tif (startIndex > 0 || endIndex < this.filteredSessions.length) {\n\t\t\tconst scrollInfo = chalk.gray(`  (${this.selectedIndex + 1}/${this.filteredSessions.length})`);\n\t\t\tlines.push(scrollInfo);\n\t\t}\n\n\t\treturn lines;\n\t}\n\n\thandleInput(keyData: string): void {\n\t\t// Up arrow\n\t\tif (keyData === \"\\x1b[A\") {\n\t\t\tthis.selectedIndex = Math.max(0, this.selectedIndex - 1);\n\t\t}\n\t\t// Down arrow\n\t\telse if (keyData === \"\\x1b[B\") {\n\t\t\tthis.selectedIndex = Math.min(this.filteredSessions.length - 1, this.selectedIndex + 1);\n\t\t}\n\t\t// Enter\n\t\telse if (keyData === \"\\r\") {\n\t\t\tconst selected = this.filteredSessions[this.selectedIndex];\n\t\t\tif (selected && this.onSelect) {\n\t\t\t\tthis.onSelect(selected.path);\n\t\t\t}\n\t\t}\n\t\t// Escape - cancel\n\t\telse if (keyData === \"\\x1b\") {\n\t\t\tif (this.onCancel) {\n\t\t\t\tthis.onCancel();\n\t\t\t}\n\t\t}\n\t\t// Ctrl+C - exit process\n\t\telse if (keyData === \"\\x03\") {\n\t\t\tprocess.exit(0);\n\t\t}\n\t\t// Pass everything else to search input\n\t\telse {\n\t\t\tthis.searchInput.handleInput(keyData);\n\t\t\tthis.filterSessions(this.searchInput.getValue());\n\t\t}\n\t}\n}\n\n/**\n * Component that renders a session selector\n */\nexport class SessionSelectorComponent extends Container {\n\tprivate sessionList: SessionList;\n\n\tconstructor(sessionManager: SessionManager, onSelect: (sessionPath: string) => void, onCancel: () => void) {\n\t\tsuper();\n\n\t\t// Load all sessions\n\t\tconst sessions = sessionManager.loadAllSessions();\n\n\t\t// Add header\n\t\tthis.addChild(new Spacer(1));\n\t\tthis.addChild(new Text(chalk.bold(\"Resume Session\"), 1, 0));\n\t\tthis.addChild(new Spacer(1));\n\t\tthis.addChild(new DynamicBorder());\n\t\tthis.addChild(new Spacer(1));\n\n\t\t// Create session list\n\t\tthis.sessionList = new SessionList(sessions);\n\t\tthis.sessionList.onSelect = onSelect;\n\t\tthis.sessionList.onCancel = onCancel;\n\n\t\tthis.addChild(this.sessionList);\n\n\t\t// Add bottom border\n\t\tthis.addChild(new Spacer(1));\n\t\tthis.addChild(new DynamicBorder());\n\n\t\t// Auto-cancel if no sessions\n\t\tif (sessions.length === 0) {\n\t\t\tsetTimeout(() => onCancel(), 100);\n\t\t}\n\t}\n\n\tgetSessionList(): SessionList {\n\t\treturn this.sessionList;\n\t}\n}\n"]}