@mariozechner/pi-coding-agent 0.6.2

package/dist/tui/tui-renderer.d.ts

@@ -0,0 +1,44 @@
+import type { Agent, AgentEvent, AgentState } from "@mariozechner/pi-agent";
+import type { SessionManager } from "../session-manager.js";
+/**
+ * TUI renderer for the coding agent
+ */
+export declare class TuiRenderer {
+    private ui;
+    private chatContainer;
+    private statusContainer;
+    private editor;
+    private editorContainer;
+    private footer;
+    private agent;
+    private sessionManager;
+    private version;
+    private isInitialized;
+    private onInputCallback?;
+    private loadingAnimation;
+    private onInterruptCallback?;
+    private lastSigintTime;
+    private streamingComponent;
+    private pendingTools;
+    private thinkingSelector;
+    private modelSelector;
+    private isFirstUserMessage;
+    constructor(agent: Agent, sessionManager: SessionManager, version: string);
+    init(): Promise<void>;
+    handleEvent(event: AgentEvent, state: AgentState): Promise<void>;
+    private addMessageToChat;
+    renderInitialMessages(state: AgentState): void;
+    getUserInput(): Promise<string>;
+    setInterruptCallback(callback: () => void): void;
+    private handleCtrlC;
+    clearEditor(): void;
+    showError(errorMessage: string): void;
+    private showThinkingSelector;
+    private hideThinkingSelector;
+    private showModelSelector;
+    private hideModelSelector;
+    private handleExportCommand;
+    private handleSessionCommand;
+    stop(): void;
+}
+//# sourceMappingURL=tui-renderer.d.ts.map

package/dist/tui/tui-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tui-renderer.d.ts","sourceRoot":"","sources":["../../src/tui/tui-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAc5E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAS5D;;GAEG;AACH,qBAAa,WAAW;IACvB,OAAO,CAAC,EAAE,CAAM;IAChB,OAAO,CAAC,aAAa,CAAY;IACjC,OAAO,CAAC,eAAe,CAAY;IACnC,OAAO,CAAC,MAAM,CAAe;IAC7B,OAAO,CAAC,eAAe,CAAY;IACnC,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,KAAK,CAAQ;IACrB,OAAO,CAAC,cAAc,CAAiB;IACvC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,eAAe,CAAC,CAAyB;IACjD,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,mBAAmB,CAAC,CAAa;IACzC,OAAO,CAAC,cAAc,CAAK;IAG3B,OAAO,CAAC,kBAAkB,CAA0C;IAGpE,OAAO,CAAC,YAAY,CAA6C;IAGjE,OAAO,CAAC,gBAAgB,CAA0C;IAGlE,OAAO,CAAC,aAAa,CAAuC;IAG5D,OAAO,CAAC,kBAAkB,CAAQ;IAElC,YAAY,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,EAuCxE;IAEK,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,CA2F1B;IAEK,WAAW,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,CAsIrE;IAED,OAAO,CAAC,gBAAgB;IAqBxB,qBAAqB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CA8D7C;IAEK,YAAY,IAAI,OAAO,CAAC,MAAM,CAAC,CAOpC;IAED,oBAAoB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI,CAE/C;IAED,OAAO,CAAC,WAAW;IAgBnB,WAAW,IAAI,IAAI,CAGlB;IAED,SAAS,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAKpC;IAED,OAAO,CAAC,oBAAoB;IAkC5B,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,iBAAiB;IAkCzB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,mBAAmB;IAuB3B,OAAO,CAAC,oBAAoB;IA4D5B,IAAI,IAAI,IAAI,CASX;CACD","sourcesContent":["import type { Agent, AgentEvent, AgentState } from \"@mariozechner/pi-agent\";\nimport type { AssistantMessage, Message } from \"@mariozechner/pi-ai\";\nimport type { SlashCommand } from \"@mariozechner/pi-tui\";\nimport {\n\tCombinedAutocompleteProvider,\n\tContainer,\n\tLoader,\n\tProcessTerminal,\n\tSpacer,\n\tText,\n\tTUI,\n} from \"@mariozechner/pi-tui\";\nimport chalk from \"chalk\";\nimport { exportSessionToHtml } from \"../export-html.js\";\nimport type { SessionManager } from \"../session-manager.js\";\nimport { AssistantMessageComponent } from \"./assistant-message.js\";\nimport { CustomEditor } from \"./custom-editor.js\";\nimport { FooterComponent } from \"./footer.js\";\nimport { ModelSelectorComponent } from \"./model-selector.js\";\nimport { ThinkingSelectorComponent } from \"./thinking-selector.js\";\nimport { ToolExecutionComponent } from \"./tool-execution.js\";\nimport { UserMessageComponent } from \"./user-message.js\";\n\n/**\n * TUI renderer for the coding agent\n */\nexport class TuiRenderer {\n\tprivate ui: TUI;\n\tprivate chatContainer: Container;\n\tprivate statusContainer: Container;\n\tprivate editor: CustomEditor;\n\tprivate editorContainer: Container; // Container to swap between editor and selector\n\tprivate footer: FooterComponent;\n\tprivate agent: Agent;\n\tprivate sessionManager: SessionManager;\n\tprivate version: string;\n\tprivate isInitialized = false;\n\tprivate onInputCallback?: (text: string) => void;\n\tprivate loadingAnimation: Loader | null = null;\n\tprivate onInterruptCallback?: () => void;\n\tprivate lastSigintTime = 0;\n\n\t// Streaming message tracking\n\tprivate streamingComponent: AssistantMessageComponent | null = null;\n\n\t// Tool execution tracking: toolCallId -> component\n\tprivate pendingTools = new Map<string, ToolExecutionComponent>();\n\n\t// Thinking level selector\n\tprivate thinkingSelector: ThinkingSelectorComponent | null = null;\n\n\t// Model selector\n\tprivate modelSelector: ModelSelectorComponent | null = null;\n\n\t// Track if this is the first user message (to skip spacer)\n\tprivate isFirstUserMessage = true;\n\n\tconstructor(agent: Agent, sessionManager: SessionManager, version: string) {\n\t\tthis.agent = agent;\n\t\tthis.sessionManager = sessionManager;\n\t\tthis.version = version;\n\t\tthis.ui = new TUI(new ProcessTerminal());\n\t\tthis.chatContainer = new Container();\n\t\tthis.statusContainer = new Container();\n\t\tthis.editor = new CustomEditor();\n\t\tthis.editorContainer = new Container(); // Container to hold editor or selector\n\t\tthis.editorContainer.addChild(this.editor); // Start with editor\n\t\tthis.footer = new FooterComponent(agent.state);\n\n\t\t// Define slash commands\n\t\tconst thinkingCommand: SlashCommand = {\n\t\t\tname: \"thinking\",\n\t\t\tdescription: \"Select reasoning level (opens selector UI)\",\n\t\t};\n\n\t\tconst modelCommand: SlashCommand = {\n\t\t\tname: \"model\",\n\t\t\tdescription: \"Select model (opens selector UI)\",\n\t\t};\n\n\t\tconst exportCommand: SlashCommand = {\n\t\t\tname: \"export\",\n\t\t\tdescription: \"Export session to HTML file\",\n\t\t};\n\n\t\tconst sessionCommand: SlashCommand = {\n\t\t\tname: \"session\",\n\t\t\tdescription: \"Show session info and stats\",\n\t\t};\n\n\t\t// Setup autocomplete for file paths and slash commands\n\t\tconst autocompleteProvider = new CombinedAutocompleteProvider(\n\t\t\t[thinkingCommand, modelCommand, exportCommand, sessionCommand],\n\t\t\tprocess.cwd(),\n\t\t);\n\t\tthis.editor.setAutocompleteProvider(autocompleteProvider);\n\t}\n\n\tasync init(): Promise<void> {\n\t\tif (this.isInitialized) return;\n\n\t\t// Add header with logo and instructions\n\t\tconst logo = chalk.bold.cyan(\"pi\") + chalk.dim(` v${this.version}`);\n\t\tconst instructions =\n\t\t\tchalk.dim(\"esc\") +\n\t\t\tchalk.gray(\" to interrupt\") +\n\t\t\t\"\\n\" +\n\t\t\tchalk.dim(\"ctrl+c\") +\n\t\t\tchalk.gray(\" to clear\") +\n\t\t\t\"\\n\" +\n\t\t\tchalk.dim(\"ctrl+c twice\") +\n\t\t\tchalk.gray(\" to exit\") +\n\t\t\t\"\\n\" +\n\t\t\tchalk.dim(\"ctrl+k\") +\n\t\t\tchalk.gray(\" to delete line\") +\n\t\t\t\"\\n\" +\n\t\t\tchalk.dim(\"/\") +\n\t\t\tchalk.gray(\" for commands\") +\n\t\t\t\"\\n\" +\n\t\t\tchalk.dim(\"drop files\") +\n\t\t\tchalk.gray(\" to attach\");\n\t\tconst header = new Text(logo + \"\\n\" + instructions, 1, 0);\n\n\t\t// Setup UI layout\n\t\tthis.ui.addChild(new Spacer(1));\n\t\tthis.ui.addChild(header);\n\t\tthis.ui.addChild(new Spacer(1));\n\t\tthis.ui.addChild(this.chatContainer);\n\t\tthis.ui.addChild(this.statusContainer);\n\t\tthis.ui.addChild(new Spacer(1));\n\t\tthis.ui.addChild(this.editorContainer); // Use container that can hold editor or selector\n\t\tthis.ui.addChild(this.footer);\n\t\tthis.ui.setFocus(this.editor);\n\n\t\t// Set up custom key handlers on the editor\n\t\tthis.editor.onEscape = () => {\n\t\t\t// Intercept Escape key when processing\n\t\t\tif (this.loadingAnimation && this.onInterruptCallback) {\n\t\t\t\tthis.onInterruptCallback();\n\t\t\t}\n\t\t};\n\n\t\tthis.editor.onCtrlC = () => {\n\t\t\tthis.handleCtrlC();\n\t\t};\n\n\t\t// Handle editor submission\n\t\tthis.editor.onSubmit = (text: string) => {\n\t\t\ttext = text.trim();\n\t\t\tif (!text) return;\n\n\t\t\t// Check for /thinking command\n\t\t\tif (text === \"/thinking\") {\n\t\t\t\t// Show thinking level selector\n\t\t\t\tthis.showThinkingSelector();\n\t\t\t\tthis.editor.setText(\"\");\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Check for /model command\n\t\t\tif (text === \"/model\") {\n\t\t\t\t// Show model selector\n\t\t\t\tthis.showModelSelector();\n\t\t\t\tthis.editor.setText(\"\");\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Check for /export command\n\t\t\tif (text.startsWith(\"/export\")) {\n\t\t\t\tthis.handleExportCommand(text);\n\t\t\t\tthis.editor.setText(\"\");\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Check for /session command\n\t\t\tif (text === \"/session\") {\n\t\t\t\tthis.handleSessionCommand();\n\t\t\t\tthis.editor.setText(\"\");\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (this.onInputCallback) {\n\t\t\t\tthis.onInputCallback(text);\n\t\t\t}\n\t\t};\n\n\t\t// Start the UI\n\t\tthis.ui.start();\n\t\tthis.isInitialized = true;\n\t}\n\n\tasync handleEvent(event: AgentEvent, state: AgentState): Promise<void> {\n\t\tif (!this.isInitialized) {\n\t\t\tawait this.init();\n\t\t}\n\n\t\t// Update footer with current stats\n\t\tthis.footer.updateState(state);\n\n\t\tswitch (event.type) {\n\t\t\tcase \"agent_start\":\n\t\t\t\t// Show loading animation\n\t\t\t\tthis.editor.disableSubmit = true;\n\t\t\t\t// Stop old loader before clearing\n\t\t\t\tif (this.loadingAnimation) {\n\t\t\t\t\tthis.loadingAnimation.stop();\n\t\t\t\t}\n\t\t\t\tthis.statusContainer.clear();\n\t\t\t\tthis.loadingAnimation = new Loader(this.ui, \"Working... (esc to interrupt)\");\n\t\t\t\tthis.statusContainer.addChild(this.loadingAnimation);\n\t\t\t\tthis.ui.requestRender();\n\t\t\t\tbreak;\n\n\t\t\tcase \"message_start\":\n\t\t\t\tif (event.message.role === \"user\") {\n\t\t\t\t\t// Show user message immediately and clear editor\n\t\t\t\t\tthis.addMessageToChat(event.message);\n\t\t\t\t\tthis.editor.setText(\"\");\n\t\t\t\t\tthis.ui.requestRender();\n\t\t\t\t} else if (event.message.role === \"assistant\") {\n\t\t\t\t\t// Create assistant component for streaming\n\t\t\t\t\tthis.streamingComponent = new AssistantMessageComponent();\n\t\t\t\t\tthis.chatContainer.addChild(this.streamingComponent);\n\t\t\t\t\tthis.streamingComponent.updateContent(event.message as AssistantMessage);\n\t\t\t\t\tthis.ui.requestRender();\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase \"message_update\":\n\t\t\t\t// Update streaming component\n\t\t\t\tif (this.streamingComponent && event.message.role === \"assistant\") {\n\t\t\t\t\tconst assistantMsg = event.message as AssistantMessage;\n\t\t\t\t\tthis.streamingComponent.updateContent(assistantMsg);\n\n\t\t\t\t\t// Create tool execution components as soon as we see tool calls\n\t\t\t\t\tfor (const content of assistantMsg.content) {\n\t\t\t\t\t\tif (content.type === \"toolCall\") {\n\t\t\t\t\t\t\t// Only create if we haven't created it yet\n\t\t\t\t\t\t\tif (!this.pendingTools.has(content.id)) {\n\t\t\t\t\t\t\t\tthis.chatContainer.addChild(new Text(\"\", 0, 0));\n\t\t\t\t\t\t\t\tconst component = new ToolExecutionComponent(content.name, content.arguments);\n\t\t\t\t\t\t\t\tthis.chatContainer.addChild(component);\n\t\t\t\t\t\t\t\tthis.pendingTools.set(content.id, component);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t// Update existing component with latest arguments as they stream\n\t\t\t\t\t\t\t\tconst component = this.pendingTools.get(content.id);\n\t\t\t\t\t\t\t\tif (component) {\n\t\t\t\t\t\t\t\t\tcomponent.updateArgs(content.arguments);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\tthis.ui.requestRender();\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase \"message_end\":\n\t\t\t\t// Skip user messages (already shown in message_start)\n\t\t\t\tif (event.message.role === \"user\") {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\tif (this.streamingComponent && event.message.role === \"assistant\") {\n\t\t\t\t\tconst assistantMsg = event.message as AssistantMessage;\n\n\t\t\t\t\t// Update streaming component with final message (includes stopReason)\n\t\t\t\t\tthis.streamingComponent.updateContent(assistantMsg);\n\n\t\t\t\t\t// If message was aborted or errored, mark all pending tool components as failed\n\t\t\t\t\tif (assistantMsg.stopReason === \"aborted\" || assistantMsg.stopReason === \"error\") {\n\t\t\t\t\t\tconst errorMessage =\n\t\t\t\t\t\t\tassistantMsg.stopReason === \"aborted\" ? \"Operation aborted\" : assistantMsg.errorMessage || \"Error\";\n\t\t\t\t\t\tfor (const [toolCallId, component] of this.pendingTools.entries()) {\n\t\t\t\t\t\t\tcomponent.updateResult({\n\t\t\t\t\t\t\t\tcontent: [{ type: \"text\", text: errorMessage }],\n\t\t\t\t\t\t\t\tisError: true,\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t\tthis.pendingTools.clear();\n\t\t\t\t\t}\n\n\t\t\t\t\t// Keep the streaming component - it's now the final assistant message\n\t\t\t\t\tthis.streamingComponent = null;\n\t\t\t\t}\n\t\t\t\tthis.ui.requestRender();\n\t\t\t\tbreak;\n\n\t\t\tcase \"tool_execution_start\": {\n\t\t\t\t// Component should already exist from message_update, but create if missing\n\t\t\t\tif (!this.pendingTools.has(event.toolCallId)) {\n\t\t\t\t\tconst component = new ToolExecutionComponent(event.toolName, event.args);\n\t\t\t\t\tthis.chatContainer.addChild(component);\n\t\t\t\t\tthis.pendingTools.set(event.toolCallId, component);\n\t\t\t\t\tthis.ui.requestRender();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tcase \"tool_execution_end\": {\n\t\t\t\t// Update the existing tool component with the result\n\t\t\t\tconst component = this.pendingTools.get(event.toolCallId);\n\t\t\t\tif (component) {\n\t\t\t\t\tcomponent.updateResult(event.result);\n\t\t\t\t\tthis.pendingTools.delete(event.toolCallId);\n\t\t\t\t\tthis.ui.requestRender();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tcase \"agent_end\":\n\t\t\t\t// Stop loading animation\n\t\t\t\tif (this.loadingAnimation) {\n\t\t\t\t\tthis.loadingAnimation.stop();\n\t\t\t\t\tthis.loadingAnimation = null;\n\t\t\t\t\tthis.statusContainer.clear();\n\t\t\t\t}\n\t\t\t\tif (this.streamingComponent) {\n\t\t\t\t\tthis.chatContainer.removeChild(this.streamingComponent);\n\t\t\t\t\tthis.streamingComponent = null;\n\t\t\t\t}\n\t\t\t\tthis.pendingTools.clear();\n\t\t\t\tthis.editor.disableSubmit = false;\n\t\t\t\tthis.ui.requestRender();\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\tprivate addMessageToChat(message: Message): void {\n\t\tif (message.role === \"user\") {\n\t\t\tconst userMsg = message as any;\n\t\t\t// Extract text content from content blocks\n\t\t\tconst textBlocks = userMsg.content.filter((c: any) => c.type === \"text\");\n\t\t\tconst textContent = textBlocks.map((c: any) => c.text).join(\"\");\n\t\t\tif (textContent) {\n\t\t\t\tconst userComponent = new UserMessageComponent(textContent, this.isFirstUserMessage);\n\t\t\t\tthis.chatContainer.addChild(userComponent);\n\t\t\t\tthis.isFirstUserMessage = false;\n\t\t\t}\n\t\t} else if (message.role === \"assistant\") {\n\t\t\tconst assistantMsg = message as AssistantMessage;\n\n\t\t\t// Add assistant message component\n\t\t\tconst assistantComponent = new AssistantMessageComponent(assistantMsg);\n\t\t\tthis.chatContainer.addChild(assistantComponent);\n\t\t}\n\t\t// Note: tool calls and results are now handled via tool_execution_start/end events\n\t}\n\n\trenderInitialMessages(state: AgentState): void {\n\t\t// Render all existing messages (for --continue mode)\n\t\t// Reset first user message flag for initial render\n\t\tthis.isFirstUserMessage = true;\n\n\t\t// Render messages\n\t\tfor (let i = 0; i < state.messages.length; i++) {\n\t\t\tconst message = state.messages[i];\n\n\t\t\tif (message.role === \"user\") {\n\t\t\t\tconst userMsg = message as any;\n\t\t\t\tconst textBlocks = userMsg.content.filter((c: any) => c.type === \"text\");\n\t\t\t\tconst textContent = textBlocks.map((c: any) => c.text).join(\"\");\n\t\t\t\tif (textContent) {\n\t\t\t\t\tconst userComponent = new UserMessageComponent(textContent, this.isFirstUserMessage);\n\t\t\t\t\tthis.chatContainer.addChild(userComponent);\n\t\t\t\t\tthis.isFirstUserMessage = false;\n\t\t\t\t}\n\t\t\t} else if (message.role === \"assistant\") {\n\t\t\t\tconst assistantMsg = message as AssistantMessage;\n\t\t\t\tconst assistantComponent = new AssistantMessageComponent(assistantMsg);\n\t\t\t\tthis.chatContainer.addChild(assistantComponent);\n\n\t\t\t\t// Create tool execution components for any tool calls\n\t\t\t\tfor (const content of assistantMsg.content) {\n\t\t\t\t\tif (content.type === \"toolCall\") {\n\t\t\t\t\t\tconst component = new ToolExecutionComponent(content.name, content.arguments);\n\t\t\t\t\t\tthis.chatContainer.addChild(component);\n\n\t\t\t\t\t\t// If message was aborted/errored, immediately mark tool as failed\n\t\t\t\t\t\tif (assistantMsg.stopReason === \"aborted\" || assistantMsg.stopReason === \"error\") {\n\t\t\t\t\t\t\tconst errorMessage =\n\t\t\t\t\t\t\t\tassistantMsg.stopReason === \"aborted\"\n\t\t\t\t\t\t\t\t\t? \"Operation aborted\"\n\t\t\t\t\t\t\t\t\t: assistantMsg.errorMessage || \"Error\";\n\t\t\t\t\t\t\tcomponent.updateResult({\n\t\t\t\t\t\t\t\tcontent: [{ type: \"text\", text: errorMessage }],\n\t\t\t\t\t\t\t\tisError: true,\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t// Store in map so we can update with results later\n\t\t\t\t\t\t\tthis.pendingTools.set(content.id, component);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (message.role === \"toolResult\") {\n\t\t\t\t// Update existing tool execution component with results\t\t\t\t;\n\t\t\t\tconst component = this.pendingTools.get(message.toolCallId);\n\t\t\t\tif (component) {\n\t\t\t\t\tcomponent.updateResult({\n\t\t\t\t\t\tcontent: message.content,\n\t\t\t\t\t\tdetails: message.details,\n\t\t\t\t\t\tisError: message.isError,\n\t\t\t\t\t});\n\t\t\t\t\t// Remove from pending map since it's complete\n\t\t\t\t\tthis.pendingTools.delete(message.toolCallId);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t// Clear pending tools after rendering initial messages\n\t\tthis.pendingTools.clear();\n\t\tthis.ui.requestRender();\n\t}\n\n\tasync getUserInput(): Promise<string> {\n\t\treturn new Promise((resolve) => {\n\t\t\tthis.onInputCallback = (text: string) => {\n\t\t\t\tthis.onInputCallback = undefined;\n\t\t\t\tresolve(text);\n\t\t\t};\n\t\t});\n\t}\n\n\tsetInterruptCallback(callback: () => void): void {\n\t\tthis.onInterruptCallback = callback;\n\t}\n\n\tprivate handleCtrlC(): void {\n\t\t// Handle Ctrl+C double-press logic\n\t\tconst now = Date.now();\n\t\tconst timeSinceLastCtrlC = now - this.lastSigintTime;\n\n\t\tif (timeSinceLastCtrlC < 500) {\n\t\t\t// Second Ctrl+C within 500ms - exit\n\t\t\tthis.stop();\n\t\t\tprocess.exit(0);\n\t\t} else {\n\t\t\t// First Ctrl+C - clear the editor\n\t\t\tthis.clearEditor();\n\t\t\tthis.lastSigintTime = now;\n\t\t}\n\t}\n\n\tclearEditor(): void {\n\t\tthis.editor.setText(\"\");\n\t\tthis.ui.requestRender();\n\t}\n\n\tshowError(errorMessage: string): void {\n\t\t// Show error message in the chat\n\t\tthis.chatContainer.addChild(new Spacer(1));\n\t\tthis.chatContainer.addChild(new Text(chalk.red(`Error: ${errorMessage}`), 1, 0));\n\t\tthis.ui.requestRender();\n\t}\n\n\tprivate showThinkingSelector(): void {\n\t\t// Create thinking selector with current level\n\t\tthis.thinkingSelector = new ThinkingSelectorComponent(\n\t\t\tthis.agent.state.thinkingLevel,\n\t\t\t(level) => {\n\t\t\t\t// Apply the selected thinking level\n\t\t\t\tthis.agent.setThinkingLevel(level);\n\n\t\t\t\t// Save thinking level change to session\n\t\t\t\tthis.sessionManager.saveThinkingLevelChange(level);\n\n\t\t\t\t// Show confirmation message with proper spacing\n\t\t\t\tthis.chatContainer.addChild(new Spacer(1));\n\t\t\t\tconst confirmText = new Text(chalk.dim(`Thinking level: ${level}`), 1, 0);\n\t\t\t\tthis.chatContainer.addChild(confirmText);\n\n\t\t\t\t// Hide selector and show editor again\n\t\t\t\tthis.hideThinkingSelector();\n\t\t\t\tthis.ui.requestRender();\n\t\t\t},\n\t\t\t() => {\n\t\t\t\t// Just hide the selector\n\t\t\t\tthis.hideThinkingSelector();\n\t\t\t\tthis.ui.requestRender();\n\t\t\t},\n\t\t);\n\n\t\t// Replace editor with selector\n\t\tthis.editorContainer.clear();\n\t\tthis.editorContainer.addChild(this.thinkingSelector);\n\t\tthis.ui.setFocus(this.thinkingSelector.getSelectList());\n\t\tthis.ui.requestRender();\n\t}\n\n\tprivate hideThinkingSelector(): void {\n\t\t// Replace selector with editor in the container\n\t\tthis.editorContainer.clear();\n\t\tthis.editorContainer.addChild(this.editor);\n\t\tthis.thinkingSelector = null;\n\t\tthis.ui.setFocus(this.editor);\n\t}\n\n\tprivate showModelSelector(): void {\n\t\t// Create model selector with current model\n\t\tthis.modelSelector = new ModelSelectorComponent(\n\t\t\tthis.agent.state.model,\n\t\t\t(model) => {\n\t\t\t\t// Apply the selected model\n\t\t\t\tthis.agent.setModel(model);\n\n\t\t\t\t// Save model change to session\n\t\t\t\tthis.sessionManager.saveModelChange(`${model.provider}/${model.id}`);\n\n\t\t\t\t// Show confirmation message with proper spacing\n\t\t\t\tthis.chatContainer.addChild(new Spacer(1));\n\t\t\t\tconst confirmText = new Text(chalk.dim(`Model: ${model.id}`), 1, 0);\n\t\t\t\tthis.chatContainer.addChild(confirmText);\n\n\t\t\t\t// Hide selector and show editor again\n\t\t\t\tthis.hideModelSelector();\n\t\t\t\tthis.ui.requestRender();\n\t\t\t},\n\t\t\t() => {\n\t\t\t\t// Just hide the selector\n\t\t\t\tthis.hideModelSelector();\n\t\t\t\tthis.ui.requestRender();\n\t\t\t},\n\t\t);\n\n\t\t// Replace editor with selector\n\t\tthis.editorContainer.clear();\n\t\tthis.editorContainer.addChild(this.modelSelector);\n\t\tthis.ui.setFocus(this.modelSelector);\n\t\tthis.ui.requestRender();\n\t}\n\n\tprivate hideModelSelector(): void {\n\t\t// Replace selector with editor in the container\n\t\tthis.editorContainer.clear();\n\t\tthis.editorContainer.addChild(this.editor);\n\t\tthis.modelSelector = null;\n\t\tthis.ui.setFocus(this.editor);\n\t}\n\n\tprivate handleExportCommand(text: string): void {\n\t\t// Parse optional filename from command: /export [filename]\n\t\tconst parts = text.split(/\\s+/);\n\t\tconst outputPath = parts.length > 1 ? parts[1] : undefined;\n\n\t\ttry {\n\t\t\t// Export session to HTML\n\t\t\tconst filePath = exportSessionToHtml(this.sessionManager, this.agent.state, outputPath);\n\n\t\t\t// Show success message in chat - matching thinking level style\n\t\t\tthis.chatContainer.addChild(new Spacer(1));\n\t\t\tthis.chatContainer.addChild(new Text(chalk.dim(`Session exported to: ${filePath}`), 1, 0));\n\t\t\tthis.ui.requestRender();\n\t\t} catch (error: any) {\n\t\t\t// Show error message in chat\n\t\t\tthis.chatContainer.addChild(new Spacer(1));\n\t\t\tthis.chatContainer.addChild(\n\t\t\t\tnew Text(chalk.red(`Failed to export session: ${error.message || \"Unknown error\"}`), 1, 0),\n\t\t\t);\n\t\t\tthis.ui.requestRender();\n\t\t}\n\t}\n\n\tprivate handleSessionCommand(): void {\n\t\t// Get session info\n\t\tconst sessionFile = this.sessionManager.getSessionFile();\n\t\tconst state = this.agent.state;\n\n\t\t// Count messages\n\t\tconst userMessages = state.messages.filter((m) => m.role === \"user\").length;\n\t\tconst assistantMessages = state.messages.filter((m) => m.role === \"assistant\").length;\n\t\tconst totalMessages = state.messages.length;\n\n\t\t// Calculate cumulative usage from all assistant messages (same as footer)\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 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\tconst totalTokens = totalInput + totalOutput + totalCacheRead + totalCacheWrite;\n\n\t\t// Build info text\n\t\tlet info = `${chalk.bold(\"Session Info\")}\\n\\n`;\n\t\tinfo += `${chalk.dim(\"File:\")} ${sessionFile}\\n`;\n\t\tinfo += `${chalk.dim(\"ID:\")} ${this.sessionManager.getSessionId()}\\n\\n`;\n\t\tinfo += `${chalk.bold(\"Messages\")}\\n`;\n\t\tinfo += `${chalk.dim(\"User:\")} ${userMessages}\\n`;\n\t\tinfo += `${chalk.dim(\"Assistant:\")} ${assistantMessages}\\n`;\n\t\tinfo += `${chalk.dim(\"Total:\")} ${totalMessages}\\n\\n`;\n\t\tinfo += `${chalk.bold(\"Tokens\")}\\n`;\n\t\tinfo += `${chalk.dim(\"Input:\")} ${totalInput.toLocaleString()}\\n`;\n\t\tinfo += `${chalk.dim(\"Output:\")} ${totalOutput.toLocaleString()}\\n`;\n\t\tif (totalCacheRead > 0) {\n\t\t\tinfo += `${chalk.dim(\"Cache Read:\")} ${totalCacheRead.toLocaleString()}\\n`;\n\t\t}\n\t\tif (totalCacheWrite > 0) {\n\t\t\tinfo += `${chalk.dim(\"Cache Write:\")} ${totalCacheWrite.toLocaleString()}\\n`;\n\t\t}\n\t\tinfo += `${chalk.dim(\"Total:\")} ${totalTokens.toLocaleString()}\\n`;\n\n\t\tif (totalCost > 0) {\n\t\t\tinfo += `\\n${chalk.bold(\"Cost\")}\\n`;\n\t\t\tinfo += `${chalk.dim(\"Total:\")} ${totalCost.toFixed(4)}`;\n\t\t}\n\n\t\t// Show info in chat\n\t\tthis.chatContainer.addChild(new Spacer(1));\n\t\tthis.chatContainer.addChild(new Text(info, 1, 0));\n\t\tthis.ui.requestRender();\n\t}\n\n\tstop(): void {\n\t\tif (this.loadingAnimation) {\n\t\t\tthis.loadingAnimation.stop();\n\t\t\tthis.loadingAnimation = null;\n\t\t}\n\t\tif (this.isInitialized) {\n\t\t\tthis.ui.stop();\n\t\t\tthis.isInitialized = false;\n\t\t}\n\t}\n}\n"]}

package/dist/tui/tui-renderer.js

@@ -0,0 +1,539 @@
+import { CombinedAutocompleteProvider, Container, Loader, ProcessTerminal, Spacer, Text, TUI, } from "@mariozechner/pi-tui";
+import chalk from "chalk";
+import { exportSessionToHtml } from "../export-html.js";
+import { AssistantMessageComponent } from "./assistant-message.js";
+import { CustomEditor } from "./custom-editor.js";
+import { FooterComponent } from "./footer.js";
+import { ModelSelectorComponent } from "./model-selector.js";
+import { ThinkingSelectorComponent } from "./thinking-selector.js";
+import { ToolExecutionComponent } from "./tool-execution.js";
+import { UserMessageComponent } from "./user-message.js";
+/**
+ * TUI renderer for the coding agent
+ */
+export class TuiRenderer {
+    ui;
+    chatContainer;
+    statusContainer;
+    editor;
+    editorContainer; // Container to swap between editor and selector
+    footer;
+    agent;
+    sessionManager;
+    version;
+    isInitialized = false;
+    onInputCallback;
+    loadingAnimation = null;
+    onInterruptCallback;
+    lastSigintTime = 0;
+    // Streaming message tracking
+    streamingComponent = null;
+    // Tool execution tracking: toolCallId -> component
+    pendingTools = new Map();
+    // Thinking level selector
+    thinkingSelector = null;
+    // Model selector
+    modelSelector = null;
+    // Track if this is the first user message (to skip spacer)
+    isFirstUserMessage = true;
+    constructor(agent, sessionManager, version) {
+        this.agent = agent;
+        this.sessionManager = sessionManager;
+        this.version = version;
+        this.ui = new TUI(new ProcessTerminal());
+        this.chatContainer = new Container();
+        this.statusContainer = new Container();
+        this.editor = new CustomEditor();
+        this.editorContainer = new Container(); // Container to hold editor or selector
+        this.editorContainer.addChild(this.editor); // Start with editor
+        this.footer = new FooterComponent(agent.state);
+        // Define slash commands
+        const thinkingCommand = {
+            name: "thinking",
+            description: "Select reasoning level (opens selector UI)",
+        };
+        const modelCommand = {
+            name: "model",
+            description: "Select model (opens selector UI)",
+        };
+        const exportCommand = {
+            name: "export",
+            description: "Export session to HTML file",
+        };
+        const sessionCommand = {
+            name: "session",
+            description: "Show session info and stats",
+        };
+        // Setup autocomplete for file paths and slash commands
+        const autocompleteProvider = new CombinedAutocompleteProvider([thinkingCommand, modelCommand, exportCommand, sessionCommand], process.cwd());
+        this.editor.setAutocompleteProvider(autocompleteProvider);
+    }
+    async init() {
+        if (this.isInitialized)
+            return;
+        // Add header with logo and instructions
+        const logo = chalk.bold.cyan("pi") + chalk.dim(` v${this.version}`);
+        const instructions = chalk.dim("esc") +
+            chalk.gray(" to interrupt") +
+            "\n" +
+            chalk.dim("ctrl+c") +
+            chalk.gray(" to clear") +
+            "\n" +
+            chalk.dim("ctrl+c twice") +
+            chalk.gray(" to exit") +
+            "\n" +
+            chalk.dim("ctrl+k") +
+            chalk.gray(" to delete line") +
+            "\n" +
+            chalk.dim("/") +
+            chalk.gray(" for commands") +
+            "\n" +
+            chalk.dim("drop files") +
+            chalk.gray(" to attach");
+        const header = new Text(logo + "\n" + instructions, 1, 0);
+        // Setup UI layout
+        this.ui.addChild(new Spacer(1));
+        this.ui.addChild(header);
+        this.ui.addChild(new Spacer(1));
+        this.ui.addChild(this.chatContainer);
+        this.ui.addChild(this.statusContainer);
+        this.ui.addChild(new Spacer(1));
+        this.ui.addChild(this.editorContainer); // Use container that can hold editor or selector
+        this.ui.addChild(this.footer);
+        this.ui.setFocus(this.editor);
+        // Set up custom key handlers on the editor
+        this.editor.onEscape = () => {
+            // Intercept Escape key when processing
+            if (this.loadingAnimation && this.onInterruptCallback) {
+                this.onInterruptCallback();
+            }
+        };
+        this.editor.onCtrlC = () => {
+            this.handleCtrlC();
+        };
+        // Handle editor submission
+        this.editor.onSubmit = (text) => {
+            text = text.trim();
+            if (!text)
+                return;
+            // Check for /thinking command
+            if (text === "/thinking") {
+                // Show thinking level selector
+                this.showThinkingSelector();
+                this.editor.setText("");
+                return;
+            }
+            // Check for /model command
+            if (text === "/model") {
+                // Show model selector
+                this.showModelSelector();
+                this.editor.setText("");
+                return;
+            }
+            // Check for /export command
+            if (text.startsWith("/export")) {
+                this.handleExportCommand(text);
+                this.editor.setText("");
+                return;
+            }
+            // Check for /session command
+            if (text === "/session") {
+                this.handleSessionCommand();
+                this.editor.setText("");
+                return;
+            }
+            if (this.onInputCallback) {
+                this.onInputCallback(text);
+            }
+        };
+        // Start the UI
+        this.ui.start();
+        this.isInitialized = true;
+    }
+    async handleEvent(event, state) {
+        if (!this.isInitialized) {
+            await this.init();
+        }
+        // Update footer with current stats
+        this.footer.updateState(state);
+        switch (event.type) {
+            case "agent_start":
+                // Show loading animation
+                this.editor.disableSubmit = true;
+                // Stop old loader before clearing
+                if (this.loadingAnimation) {
+                    this.loadingAnimation.stop();
+                }
+                this.statusContainer.clear();
+                this.loadingAnimation = new Loader(this.ui, "Working... (esc to interrupt)");
+                this.statusContainer.addChild(this.loadingAnimation);
+                this.ui.requestRender();
+                break;
+            case "message_start":
+                if (event.message.role === "user") {
+                    // Show user message immediately and clear editor
+                    this.addMessageToChat(event.message);
+                    this.editor.setText("");
+                    this.ui.requestRender();
+                }
+                else if (event.message.role === "assistant") {
+                    // Create assistant component for streaming
+                    this.streamingComponent = new AssistantMessageComponent();
+                    this.chatContainer.addChild(this.streamingComponent);
+                    this.streamingComponent.updateContent(event.message);
+                    this.ui.requestRender();
+                }
+                break;
+            case "message_update":
+                // Update streaming component
+                if (this.streamingComponent && event.message.role === "assistant") {
+                    const assistantMsg = event.message;
+                    this.streamingComponent.updateContent(assistantMsg);
+                    // Create tool execution components as soon as we see tool calls
+                    for (const content of assistantMsg.content) {
+                        if (content.type === "toolCall") {
+                            // Only create if we haven't created it yet
+                            if (!this.pendingTools.has(content.id)) {
+                                this.chatContainer.addChild(new Text("", 0, 0));
+                                const component = new ToolExecutionComponent(content.name, content.arguments);
+                                this.chatContainer.addChild(component);
+                                this.pendingTools.set(content.id, component);
+                            }
+                            else {
+                                // Update existing component with latest arguments as they stream
+                                const component = this.pendingTools.get(content.id);
+                                if (component) {
+                                    component.updateArgs(content.arguments);
+                                }
+                            }
+                        }
+                    }
+                    this.ui.requestRender();
+                }
+                break;
+            case "message_end":
+                // Skip user messages (already shown in message_start)
+                if (event.message.role === "user") {
+                    break;
+                }
+                if (this.streamingComponent && event.message.role === "assistant") {
+                    const assistantMsg = event.message;
+                    // Update streaming component with final message (includes stopReason)
+                    this.streamingComponent.updateContent(assistantMsg);
+                    // If message was aborted or errored, mark all pending tool components as failed
+                    if (assistantMsg.stopReason === "aborted" || assistantMsg.stopReason === "error") {
+                        const errorMessage = assistantMsg.stopReason === "aborted" ? "Operation aborted" : assistantMsg.errorMessage || "Error";
+                        for (const [toolCallId, component] of this.pendingTools.entries()) {
+                            component.updateResult({
+                                content: [{ type: "text", text: errorMessage }],
+                                isError: true,
+                            });
+                        }
+                        this.pendingTools.clear();
+                    }
+                    // Keep the streaming component - it's now the final assistant message
+                    this.streamingComponent = null;
+                }
+                this.ui.requestRender();
+                break;
+            case "tool_execution_start": {
+                // Component should already exist from message_update, but create if missing
+                if (!this.pendingTools.has(event.toolCallId)) {
+                    const component = new ToolExecutionComponent(event.toolName, event.args);
+                    this.chatContainer.addChild(component);
+                    this.pendingTools.set(event.toolCallId, component);
+                    this.ui.requestRender();
+                }
+                break;
+            }
+            case "tool_execution_end": {
+                // Update the existing tool component with the result
+                const component = this.pendingTools.get(event.toolCallId);
+                if (component) {
+                    component.updateResult(event.result);
+                    this.pendingTools.delete(event.toolCallId);
+                    this.ui.requestRender();
+                }
+                break;
+            }
+            case "agent_end":
+                // Stop loading animation
+                if (this.loadingAnimation) {
+                    this.loadingAnimation.stop();
+                    this.loadingAnimation = null;
+                    this.statusContainer.clear();
+                }
+                if (this.streamingComponent) {
+                    this.chatContainer.removeChild(this.streamingComponent);
+                    this.streamingComponent = null;
+                }
+                this.pendingTools.clear();
+                this.editor.disableSubmit = false;
+                this.ui.requestRender();
+                break;
+        }
+    }
+    addMessageToChat(message) {
+        if (message.role === "user") {
+            const userMsg = message;
+            // Extract text content from content blocks
+            const textBlocks = userMsg.content.filter((c) => c.type === "text");
+            const textContent = textBlocks.map((c) => c.text).join("");
+            if (textContent) {
+                const userComponent = new UserMessageComponent(textContent, this.isFirstUserMessage);
+                this.chatContainer.addChild(userComponent);
+                this.isFirstUserMessage = false;
+            }
+        }
+        else if (message.role === "assistant") {
+            const assistantMsg = message;
+            // Add assistant message component
+            const assistantComponent = new AssistantMessageComponent(assistantMsg);
+            this.chatContainer.addChild(assistantComponent);
+        }
+        // Note: tool calls and results are now handled via tool_execution_start/end events
+    }
+    renderInitialMessages(state) {
+        // Render all existing messages (for --continue mode)
+        // Reset first user message flag for initial render
+        this.isFirstUserMessage = true;
+        // Render messages
+        for (let i = 0; i < state.messages.length; i++) {
+            const message = state.messages[i];
+            if (message.role === "user") {
+                const userMsg = message;
+                const textBlocks = userMsg.content.filter((c) => c.type === "text");
+                const textContent = textBlocks.map((c) => c.text).join("");
+                if (textContent) {
+                    const userComponent = new UserMessageComponent(textContent, this.isFirstUserMessage);
+                    this.chatContainer.addChild(userComponent);
+                    this.isFirstUserMessage = false;
+                }
+            }
+            else if (message.role === "assistant") {
+                const assistantMsg = message;
+                const assistantComponent = new AssistantMessageComponent(assistantMsg);
+                this.chatContainer.addChild(assistantComponent);
+                // Create tool execution components for any tool calls
+                for (const content of assistantMsg.content) {
+                    if (content.type === "toolCall") {
+                        const component = new ToolExecutionComponent(content.name, content.arguments);
+                        this.chatContainer.addChild(component);
+                        // If message was aborted/errored, immediately mark tool as failed
+                        if (assistantMsg.stopReason === "aborted" || assistantMsg.stopReason === "error") {
+                            const errorMessage = assistantMsg.stopReason === "aborted"
+                                ? "Operation aborted"
+                                : assistantMsg.errorMessage || "Error";
+                            component.updateResult({
+                                content: [{ type: "text", text: errorMessage }],
+                                isError: true,
+                            });
+                        }
+                        else {
+                            // Store in map so we can update with results later
+                            this.pendingTools.set(content.id, component);
+                        }
+                    }
+                }
+            }
+            else if (message.role === "toolResult") {
+                // Update existing tool execution component with results				;
+                const component = this.pendingTools.get(message.toolCallId);
+                if (component) {
+                    component.updateResult({
+                        content: message.content,
+                        details: message.details,
+                        isError: message.isError,
+                    });
+                    // Remove from pending map since it's complete
+                    this.pendingTools.delete(message.toolCallId);
+                }
+            }
+        }
+        // Clear pending tools after rendering initial messages
+        this.pendingTools.clear();
+        this.ui.requestRender();
+    }
+    async getUserInput() {
+        return new Promise((resolve) => {
+            this.onInputCallback = (text) => {
+                this.onInputCallback = undefined;
+                resolve(text);
+            };
+        });
+    }
+    setInterruptCallback(callback) {
+        this.onInterruptCallback = callback;
+    }
+    handleCtrlC() {
+        // Handle Ctrl+C double-press logic
+        const now = Date.now();
+        const timeSinceLastCtrlC = now - this.lastSigintTime;
+        if (timeSinceLastCtrlC < 500) {
+            // Second Ctrl+C within 500ms - exit
+            this.stop();
+            process.exit(0);
+        }
+        else {
+            // First Ctrl+C - clear the editor
+            this.clearEditor();
+            this.lastSigintTime = now;
+        }
+    }
+    clearEditor() {
+        this.editor.setText("");
+        this.ui.requestRender();
+    }
+    showError(errorMessage) {
+        // Show error message in the chat
+        this.chatContainer.addChild(new Spacer(1));
+        this.chatContainer.addChild(new Text(chalk.red(`Error: ${errorMessage}`), 1, 0));
+        this.ui.requestRender();
+    }
+    showThinkingSelector() {
+        // Create thinking selector with current level
+        this.thinkingSelector = new ThinkingSelectorComponent(this.agent.state.thinkingLevel, (level) => {
+            // Apply the selected thinking level
+            this.agent.setThinkingLevel(level);
+            // Save thinking level change to session
+            this.sessionManager.saveThinkingLevelChange(level);
+            // Show confirmation message with proper spacing
+            this.chatContainer.addChild(new Spacer(1));
+            const confirmText = new Text(chalk.dim(`Thinking level: ${level}`), 1, 0);
+            this.chatContainer.addChild(confirmText);
+            // Hide selector and show editor again
+            this.hideThinkingSelector();
+            this.ui.requestRender();
+        }, () => {
+            // Just hide the selector
+            this.hideThinkingSelector();
+            this.ui.requestRender();
+        });
+        // Replace editor with selector
+        this.editorContainer.clear();
+        this.editorContainer.addChild(this.thinkingSelector);
+        this.ui.setFocus(this.thinkingSelector.getSelectList());
+        this.ui.requestRender();
+    }
+    hideThinkingSelector() {
+        // Replace selector with editor in the container
+        this.editorContainer.clear();
+        this.editorContainer.addChild(this.editor);
+        this.thinkingSelector = null;
+        this.ui.setFocus(this.editor);
+    }
+    showModelSelector() {
+        // Create model selector with current model
+        this.modelSelector = new ModelSelectorComponent(this.agent.state.model, (model) => {
+            // Apply the selected model
+            this.agent.setModel(model);
+            // Save model change to session
+            this.sessionManager.saveModelChange(`${model.provider}/${model.id}`);
+            // Show confirmation message with proper spacing
+            this.chatContainer.addChild(new Spacer(1));
+            const confirmText = new Text(chalk.dim(`Model: ${model.id}`), 1, 0);
+            this.chatContainer.addChild(confirmText);
+            // Hide selector and show editor again
+            this.hideModelSelector();
+            this.ui.requestRender();
+        }, () => {
+            // Just hide the selector
+            this.hideModelSelector();
+            this.ui.requestRender();
+        });
+        // Replace editor with selector
+        this.editorContainer.clear();
+        this.editorContainer.addChild(this.modelSelector);
+        this.ui.setFocus(this.modelSelector);
+        this.ui.requestRender();
+    }
+    hideModelSelector() {
+        // Replace selector with editor in the container
+        this.editorContainer.clear();
+        this.editorContainer.addChild(this.editor);
+        this.modelSelector = null;
+        this.ui.setFocus(this.editor);
+    }
+    handleExportCommand(text) {
+        // Parse optional filename from command: /export [filename]
+        const parts = text.split(/\s+/);
+        const outputPath = parts.length > 1 ? parts[1] : undefined;
+        try {
+            // Export session to HTML
+            const filePath = exportSessionToHtml(this.sessionManager, this.agent.state, outputPath);
+            // Show success message in chat - matching thinking level style
+            this.chatContainer.addChild(new Spacer(1));
+            this.chatContainer.addChild(new Text(chalk.dim(`Session exported to: ${filePath}`), 1, 0));
+            this.ui.requestRender();
+        }
+        catch (error) {
+            // Show error message in chat
+            this.chatContainer.addChild(new Spacer(1));
+            this.chatContainer.addChild(new Text(chalk.red(`Failed to export session: ${error.message || "Unknown error"}`), 1, 0));
+            this.ui.requestRender();
+        }
+    }
+    handleSessionCommand() {
+        // Get session info
+        const sessionFile = this.sessionManager.getSessionFile();
+        const state = this.agent.state;
+        // Count messages
+        const userMessages = state.messages.filter((m) => m.role === "user").length;
+        const assistantMessages = state.messages.filter((m) => m.role === "assistant").length;
+        const totalMessages = state.messages.length;
+        // Calculate cumulative usage from all assistant messages (same as footer)
+        let totalInput = 0;
+        let totalOutput = 0;
+        let totalCacheRead = 0;
+        let totalCacheWrite = 0;
+        let totalCost = 0;
+        for (const message of 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;
+            }
+        }
+        const totalTokens = totalInput + totalOutput + totalCacheRead + totalCacheWrite;
+        // Build info text
+        let info = `${chalk.bold("Session Info")}\n\n`;
+        info += `${chalk.dim("File:")} ${sessionFile}\n`;
+        info += `${chalk.dim("ID:")} ${this.sessionManager.getSessionId()}\n\n`;
+        info += `${chalk.bold("Messages")}\n`;
+        info += `${chalk.dim("User:")} ${userMessages}\n`;
+        info += `${chalk.dim("Assistant:")} ${assistantMessages}\n`;
+        info += `${chalk.dim("Total:")} ${totalMessages}\n\n`;
+        info += `${chalk.bold("Tokens")}\n`;
+        info += `${chalk.dim("Input:")} ${totalInput.toLocaleString()}\n`;
+        info += `${chalk.dim("Output:")} ${totalOutput.toLocaleString()}\n`;
+        if (totalCacheRead > 0) {
+            info += `${chalk.dim("Cache Read:")} ${totalCacheRead.toLocaleString()}\n`;
+        }
+        if (totalCacheWrite > 0) {
+            info += `${chalk.dim("Cache Write:")} ${totalCacheWrite.toLocaleString()}\n`;
+        }
+        info += `${chalk.dim("Total:")} ${totalTokens.toLocaleString()}\n`;
+        if (totalCost > 0) {
+            info += `\n${chalk.bold("Cost")}\n`;
+            info += `${chalk.dim("Total:")} ${totalCost.toFixed(4)}`;
+        }
+        // Show info in chat
+        this.chatContainer.addChild(new Spacer(1));
+        this.chatContainer.addChild(new Text(info, 1, 0));
+        this.ui.requestRender();
+    }
+    stop() {
+        if (this.loadingAnimation) {
+            this.loadingAnimation.stop();
+            this.loadingAnimation = null;
+        }
+        if (this.isInitialized) {
+            this.ui.stop();
+            this.isInitialized = false;
+        }
+    }
+}
+//# sourceMappingURL=tui-renderer.js.map