@mariozechner/pi-coding-agent 0.7.29 → 0.8.2

package/dist/tui/tui-renderer.js

@@ -1,10 +1,10 @@
 import { CombinedAutocompleteProvider, Container, Input, Loader, Markdown, ProcessTerminal, Spacer, Text, TruncatedText, TUI, } from "@mariozechner/pi-tui";
-import chalk from "chalk";
 import { exec } from "child_process";
 import { getChangelogPath, parseChangelog } from "../changelog.js";
 import { exportSessionToHtml } from "../export-html.js";
 import { getApiKeyForModel, getAvailableModels } from "../model-config.js";
 import { listOAuthProviders, login, logout } from "../oauth/index.js";
+import { getEditorTheme, getMarkdownTheme, onThemeChange, setTheme, theme } from "../theme/theme.js";
 import { AssistantMessageComponent } from "./assistant-message.js";
 import { CustomEditor } from "./custom-editor.js";
 import { DynamicBorder } from "./dynamic-border.js";
@@ -12,6 +12,7 @@ import { FooterComponent } from "./footer.js";
 import { ModelSelectorComponent } from "./model-selector.js";
 import { OAuthSelectorComponent } from "./oauth-selector.js";
 import { QueueModeSelectorComponent } from "./queue-mode-selector.js";
+import { ThemeSelectorComponent } from "./theme-selector.js";
 import { ThinkingSelectorComponent } from "./thinking-selector.js";
 import { ToolExecutionComponent } from "./tool-execution.js";
 import { UserMessageComponent } from "./user-message.js";
@@ -48,6 +49,8 @@ export class TuiRenderer {
     thinkingSelector = null;
     // Queue mode selector
     queueModeSelector = null;
+    // Theme selector
+    themeSelector = null;
     // Model selector
     modelSelector = null;
     // User message selector (for branching)
@@ -72,7 +75,7 @@ export class TuiRenderer {
         this.chatContainer = new Container();
         this.pendingMessagesContainer = new Container();
         this.statusContainer = new Container();
-        this.editor = new CustomEditor();
+        this.editor = new CustomEditor(getEditorTheme());
         this.editorContainer = new Container(); // Container to hold editor or selector
         this.editorContainer.addChild(this.editor); // Start with editor
         this.footer = new FooterComponent(agent.state);
@@ -113,10 +116,15 @@ export class TuiRenderer {
             name: "queue",
             description: "Select message queue mode (opens selector UI)",
         };
+        const themeCommand = {
+            name: "theme",
+            description: "Select color theme (opens selector UI)",
+        };
         // Setup autocomplete for file paths and slash commands
         const autocompleteProvider = new CombinedAutocompleteProvider([
             thinkingCommand,
             modelCommand,
+            themeCommand,
             exportCommand,
             sessionCommand,
             changelogCommand,
@@ -131,33 +139,33 @@ export class TuiRenderer {
         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") +
+        const logo = theme.bold(theme.fg("accent", "pi")) + theme.fg("dim", ` v${this.version}`);
+        const instructions = theme.fg("dim", "esc") +
+            theme.fg("muted", " to interrupt") +
             "\n" +
-            chalk.dim("ctrl+c") +
-            chalk.gray(" to clear") +
+            theme.fg("dim", "ctrl+c") +
+            theme.fg("muted", " to clear") +
             "\n" +
-            chalk.dim("ctrl+c twice") +
-            chalk.gray(" to exit") +
+            theme.fg("dim", "ctrl+c twice") +
+            theme.fg("muted", " to exit") +
             "\n" +
-            chalk.dim("ctrl+k") +
-            chalk.gray(" to delete line") +
+            theme.fg("dim", "ctrl+k") +
+            theme.fg("muted", " to delete line") +
             "\n" +
-            chalk.dim("shift+tab") +
-            chalk.gray(" to cycle thinking") +
+            theme.fg("dim", "shift+tab") +
+            theme.fg("muted", " to cycle thinking") +
             "\n" +
-            chalk.dim("ctrl+p") +
-            chalk.gray(" to cycle models") +
+            theme.fg("dim", "ctrl+p") +
+            theme.fg("muted", " to cycle models") +
             "\n" +
-            chalk.dim("ctrl+o") +
-            chalk.gray(" to expand tools") +
+            theme.fg("dim", "ctrl+o") +
+            theme.fg("muted", " to expand tools") +
             "\n" +
-            chalk.dim("/") +
-            chalk.gray(" for commands") +
+            theme.fg("dim", "/") +
+            theme.fg("muted", " for commands") +
             "\n" +
-            chalk.dim("drop files") +
-            chalk.gray(" to attach");
+            theme.fg("dim", "drop files") +
+            theme.fg("muted", " to attach");
         const header = new Text(logo + "\n" + instructions, 1, 0);
         // Setup UI layout
         this.ui.addChild(new Spacer(1));
@@ -165,21 +173,21 @@ export class TuiRenderer {
         this.ui.addChild(new Spacer(1));
         // Add new version notification if available
         if (this.newVersion) {
-            this.ui.addChild(new DynamicBorder(chalk.yellow));
-            this.ui.addChild(new Text(chalk.bold.yellow("Update Available") +
+            this.ui.addChild(new DynamicBorder((text) => theme.fg("warning", text)));
+            this.ui.addChild(new Text(theme.bold(theme.fg("warning", "Update Available")) +
                 "\n" +
-                chalk.gray(`New version ${this.newVersion} is available. Run: `) +
-                chalk.cyan("npm install -g @mariozechner/pi-coding-agent"), 1, 0));
-            this.ui.addChild(new DynamicBorder(chalk.yellow));
+                theme.fg("muted", `New version ${this.newVersion} is available. Run: `) +
+                theme.fg("accent", "npm install -g @mariozechner/pi-coding-agent"), 1, 0));
+            this.ui.addChild(new DynamicBorder((text) => theme.fg("warning", text)));
         }
         // Add changelog if provided
         if (this.changelogMarkdown) {
-            this.ui.addChild(new DynamicBorder(chalk.cyan));
-            this.ui.addChild(new Text(chalk.bold.cyan("What's New"), 1, 0));
+            this.ui.addChild(new DynamicBorder());
+            this.ui.addChild(new Text(theme.bold(theme.fg("accent", "What's New")), 1, 0));
             this.ui.addChild(new Spacer(1));
-            this.ui.addChild(new Markdown(this.changelogMarkdown.trim(), 1, 0));
+            this.ui.addChild(new Markdown(this.changelogMarkdown.trim(), 1, 0, getMarkdownTheme()));
             this.ui.addChild(new Spacer(1));
-            this.ui.addChild(new DynamicBorder(chalk.cyan));
+            this.ui.addChild(new DynamicBorder());
         }
         this.ui.addChild(this.chatContainer);
         this.ui.addChild(this.pendingMessagesContainer);
@@ -282,6 +290,12 @@ export class TuiRenderer {
                 this.editor.setText("");
                 return;
             }
+            // Check for /theme command
+            if (text === "/theme") {
+                this.showThemeSelector();
+                this.editor.setText("");
+                return;
+            }
             // Normal message submission - validate model and API key first
             const currentModel = this.agent.state.model;
             if (!currentModel) {
@@ -323,6 +337,12 @@ export class TuiRenderer {
         // Start the UI
         this.ui.start();
         this.isInitialized = true;
+        // Set up theme file watcher for live reload
+        onThemeChange(() => {
+            this.ui.invalidate();
+            this.updateEditorBorderColor();
+            this.ui.requestRender();
+        });
     }
     async handleEvent(event, state) {
         if (!this.isInitialized) {
@@ -339,7 +359,7 @@ export class TuiRenderer {
                     this.loadingAnimation.stop();
                 }
                 this.statusContainer.clear();
-                this.loadingAnimation = new Loader(this.ui, "Working... (esc to interrupt)");
+                this.loadingAnimation = new Loader(this.ui, (spinner) => theme.fg("accent", spinner), (text) => theme.fg("muted", text), "Working... (esc to interrupt)");
                 this.statusContainer.addChild(this.loadingAnimation);
                 this.ui.requestRender();
                 break;
@@ -580,34 +600,16 @@ export class TuiRenderer {
             this.lastSigintTime = now;
         }
     }
-    getThinkingBorderColor(level) {
-        // More thinking = more color (gray → dim colors → bright colors)
-        switch (level) {
-            case "off":
-                return chalk.gray;
-            case "minimal":
-                return chalk.dim.blue;
-            case "low":
-                return chalk.blue;
-            case "medium":
-                return chalk.cyan;
-            case "high":
-                return chalk.magenta;
-            default:
-                return chalk.gray;
-        }
-    }
     updateEditorBorderColor() {
         const level = this.agent.state.thinkingLevel || "off";
-        const color = this.getThinkingBorderColor(level);
-        this.editor.borderColor = color;
+        this.editor.borderColor = theme.getThinkingBorderColor(level);
         this.ui.requestRender();
     }
     cycleThinkingLevel() {
         // Only cycle if model supports thinking
         if (!this.agent.state.model?.reasoning) {
             this.chatContainer.addChild(new Spacer(1));
-            this.chatContainer.addChild(new Text(chalk.dim("Current model does not support thinking"), 1, 0));
+            this.chatContainer.addChild(new Text(theme.fg("dim", "Current model does not support thinking"), 1, 0));
             this.ui.requestRender();
             return;
         }
@@ -624,7 +626,7 @@ export class TuiRenderer {
         this.updateEditorBorderColor();
         // Show brief notification
         this.chatContainer.addChild(new Spacer(1));
-        this.chatContainer.addChild(new Text(chalk.dim(`Thinking level: ${nextLevel}`), 1, 0));
+        this.chatContainer.addChild(new Text(theme.fg("dim", `Thinking level: ${nextLevel}`), 1, 0));
         this.ui.requestRender();
     }
     async cycleModel() {
@@ -647,7 +649,7 @@ export class TuiRenderer {
         }
         if (modelsToUse.length === 1) {
             this.chatContainer.addChild(new Spacer(1));
-            this.chatContainer.addChild(new Text(chalk.dim("Only one model in scope"), 1, 0));
+            this.chatContainer.addChild(new Text(theme.fg("dim", "Only one model in scope"), 1, 0));
             this.ui.requestRender();
             return;
         }
@@ -669,7 +671,7 @@ export class TuiRenderer {
         this.agent.setModel(nextModel);
         // Show notification
         this.chatContainer.addChild(new Spacer(1));
-        this.chatContainer.addChild(new Text(chalk.dim(`Switched to ${nextModel.name || nextModel.id}`), 1, 0));
+        this.chatContainer.addChild(new Text(theme.fg("dim", `Switched to ${nextModel.name || nextModel.id}`), 1, 0));
         this.ui.requestRender();
     }
     toggleToolOutputExpansion() {
@@ -689,13 +691,13 @@ export class TuiRenderer {
     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.chatContainer.addChild(new Text(theme.fg("error", `Error: ${errorMessage}`), 1, 0));
         this.ui.requestRender();
     }
     showWarning(warningMessage) {
         // Show warning message in the chat
         this.chatContainer.addChild(new Spacer(1));
-        this.chatContainer.addChild(new Text(chalk.yellow(`Warning: ${warningMessage}`), 1, 0));
+        this.chatContainer.addChild(new Text(theme.fg("warning", `Warning: ${warningMessage}`), 1, 0));
         this.ui.requestRender();
     }
     showThinkingSelector() {
@@ -709,7 +711,7 @@ export class TuiRenderer {
             this.updateEditorBorderColor();
             // Show confirmation message with proper spacing
             this.chatContainer.addChild(new Spacer(1));
-            const confirmText = new Text(chalk.dim(`Thinking level: ${level}`), 1, 0);
+            const confirmText = new Text(theme.fg("dim", `Thinking level: ${level}`), 1, 0);
             this.chatContainer.addChild(confirmText);
             // Hide selector and show editor again
             this.hideThinkingSelector();
@@ -741,7 +743,7 @@ export class TuiRenderer {
             this.settingsManager.setQueueMode(mode);
             // Show confirmation message with proper spacing
             this.chatContainer.addChild(new Spacer(1));
-            const confirmText = new Text(chalk.dim(`Queue mode: ${mode}`), 1, 0);
+            const confirmText = new Text(theme.fg("dim", `Queue mode: ${mode}`), 1, 0);
             this.chatContainer.addChild(confirmText);
             // Hide selector and show editor again
             this.hideQueueModeSelector();
@@ -764,6 +766,56 @@ export class TuiRenderer {
         this.queueModeSelector = null;
         this.ui.setFocus(this.editor);
     }
+    showThemeSelector() {
+        // Get current theme from settings
+        const currentTheme = this.settingsManager.getTheme() || "dark";
+        // Create theme selector
+        this.themeSelector = new ThemeSelectorComponent(currentTheme, (themeName) => {
+            // Apply the selected theme
+            const result = setTheme(themeName);
+            // Save theme to settings
+            this.settingsManager.setTheme(themeName);
+            // Invalidate all components to clear cached rendering
+            this.ui.invalidate();
+            // Show confirmation or error message
+            this.chatContainer.addChild(new Spacer(1));
+            if (result.success) {
+                const confirmText = new Text(theme.fg("dim", `Theme: ${themeName}`), 1, 0);
+                this.chatContainer.addChild(confirmText);
+            }
+            else {
+                const errorText = new Text(theme.fg("error", `Failed to load theme "${themeName}": ${result.error}\nFell back to dark theme.`), 1, 0);
+                this.chatContainer.addChild(errorText);
+            }
+            // Hide selector and show editor again
+            this.hideThemeSelector();
+            this.ui.requestRender();
+        }, () => {
+            // Just hide the selector
+            this.hideThemeSelector();
+            this.ui.requestRender();
+        }, (themeName) => {
+            // Preview theme on selection change
+            const result = setTheme(themeName);
+            if (result.success) {
+                this.ui.invalidate();
+                this.ui.requestRender();
+            }
+            // If failed, theme already fell back to dark, just don't re-render
+        });
+        // Replace editor with selector
+        this.editorContainer.clear();
+        this.editorContainer.addChild(this.themeSelector);
+        this.ui.setFocus(this.themeSelector.getSelectList());
+        this.ui.requestRender();
+    }
+    hideThemeSelector() {
+        // Replace selector with editor in the container
+        this.editorContainer.clear();
+        this.editorContainer.addChild(this.editor);
+        this.themeSelector = null;
+        this.ui.setFocus(this.editor);
+    }
     showModelSelector() {
         // Create model selector with current model
         this.modelSelector = new ModelSelectorComponent(this.ui, this.agent.state.model, this.settingsManager, (model) => {
@@ -773,7 +825,7 @@ export class TuiRenderer {
             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);
+            const confirmText = new Text(theme.fg("dim", `Model: ${model.id}`), 1, 0);
             this.chatContainer.addChild(confirmText);
             // Hide selector and show editor again
             this.hideModelSelector();
@@ -813,7 +865,7 @@ export class TuiRenderer {
         // Don't show selector if there are no messages or only one message
         if (userMessages.length <= 1) {
             this.chatContainer.addChild(new Spacer(1));
-            this.chatContainer.addChild(new Text(chalk.dim("No messages to branch from"), 1, 0));
+            this.chatContainer.addChild(new Text(theme.fg("dim", "No messages to branch from"), 1, 0));
             this.ui.requestRender();
             return;
         }
@@ -837,7 +889,7 @@ export class TuiRenderer {
             this.renderInitialMessages(this.agent.state);
             // Show confirmation message
             this.chatContainer.addChild(new Spacer(1));
-            this.chatContainer.addChild(new Text(chalk.dim(`Branched to new session from message ${messageIndex}`), 1, 0));
+            this.chatContainer.addChild(new Text(theme.fg("dim", `Branched to new session from message ${messageIndex}`), 1, 0));
             // Put the selected message in the editor
             this.editor.setText(selectedText);
             // Hide selector and show editor again
@@ -868,7 +920,7 @@ export class TuiRenderer {
             const loggedInProviders = listOAuthProviders();
             if (loggedInProviders.length === 0) {
                 this.chatContainer.addChild(new Spacer(1));
-                this.chatContainer.addChild(new Text(chalk.dim("No OAuth providers logged in. Use /login first."), 1, 0));
+                this.chatContainer.addChild(new Text(theme.fg("dim", "No OAuth providers logged in. Use /login first."), 1, 0));
                 this.ui.requestRender();
                 return;
             }
@@ -881,16 +933,16 @@ export class TuiRenderer {
             if (mode === "login") {
                 // Handle login
                 this.chatContainer.addChild(new Spacer(1));
-                this.chatContainer.addChild(new Text(chalk.dim(`Logging in to ${providerId}...`), 1, 0));
+                this.chatContainer.addChild(new Text(theme.fg("dim", `Logging in to ${providerId}...`), 1, 0));
                 this.ui.requestRender();
                 try {
                     await login(providerId, (url) => {
                         // Show auth URL to user
                         this.chatContainer.addChild(new Spacer(1));
-                        this.chatContainer.addChild(new Text(chalk.cyan("Opening browser to:"), 1, 0));
-                        this.chatContainer.addChild(new Text(chalk.cyan(url), 1, 0));
+                        this.chatContainer.addChild(new Text(theme.fg("accent", "Opening browser to:"), 1, 0));
+                        this.chatContainer.addChild(new Text(theme.fg("accent", url), 1, 0));
                         this.chatContainer.addChild(new Spacer(1));
-                        this.chatContainer.addChild(new Text(chalk.yellow("Paste the authorization code below:"), 1, 0));
+                        this.chatContainer.addChild(new Text(theme.fg("warning", "Paste the authorization code below:"), 1, 0));
                         this.ui.requestRender();
                         // Open URL in browser
                         const openCmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
@@ -915,8 +967,8 @@ export class TuiRenderer {
                     });
                     // Success
                     this.chatContainer.addChild(new Spacer(1));
-                    this.chatContainer.addChild(new Text(chalk.green(`✓ Successfully logged in to ${providerId}`), 1, 0));
-                    this.chatContainer.addChild(new Text(chalk.dim(`Tokens saved to ~/.pi/agent/oauth.json`), 1, 0));
+                    this.chatContainer.addChild(new Text(theme.fg("success", `✓ Successfully logged in to ${providerId}`), 1, 0));
+                    this.chatContainer.addChild(new Text(theme.fg("dim", `Tokens saved to ~/.pi/agent/oauth.json`), 1, 0));
                     this.ui.requestRender();
                 }
                 catch (error) {
@@ -928,8 +980,8 @@ export class TuiRenderer {
                 try {
                     await logout(providerId);
                     this.chatContainer.addChild(new Spacer(1));
-                    this.chatContainer.addChild(new Text(chalk.green(`✓ Successfully logged out of ${providerId}`), 1, 0));
-                    this.chatContainer.addChild(new Text(chalk.dim(`Credentials removed from ~/.pi/agent/oauth.json`), 1, 0));
+                    this.chatContainer.addChild(new Text(theme.fg("success", `✓ Successfully logged out of ${providerId}`), 1, 0));
+                    this.chatContainer.addChild(new Text(theme.fg("dim", `Credentials removed from ~/.pi/agent/oauth.json`), 1, 0));
                     this.ui.requestRender();
                 }
                 catch (error) {
@@ -963,13 +1015,13 @@ export class TuiRenderer {
             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.chatContainer.addChild(new Text(theme.fg("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.chatContainer.addChild(new Text(theme.fg("error", `Failed to export session: ${error.message || "Unknown error"}`), 1, 0));
             this.ui.requestRender();
         }
     }
@@ -1008,28 +1060,28 @@ export class TuiRenderer {
         }
         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("Tool Calls:")} ${toolCalls}\n`;
-        info += `${chalk.dim("Tool Results:")} ${toolResults}\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`;
+        let info = `${theme.bold("Session Info")}\n\n`;
+        info += `${theme.fg("dim", "File:")} ${sessionFile}\n`;
+        info += `${theme.fg("dim", "ID:")} ${this.sessionManager.getSessionId()}\n\n`;
+        info += `${theme.bold("Messages")}\n`;
+        info += `${theme.fg("dim", "User:")} ${userMessages}\n`;
+        info += `${theme.fg("dim", "Assistant:")} ${assistantMessages}\n`;
+        info += `${theme.fg("dim", "Tool Calls:")} ${toolCalls}\n`;
+        info += `${theme.fg("dim", "Tool Results:")} ${toolResults}\n`;
+        info += `${theme.fg("dim", "Total:")} ${totalMessages}\n\n`;
+        info += `${theme.bold("Tokens")}\n`;
+        info += `${theme.fg("dim", "Input:")} ${totalInput.toLocaleString()}\n`;
+        info += `${theme.fg("dim", "Output:")} ${totalOutput.toLocaleString()}\n`;
         if (totalCacheRead > 0) {
-            info += `${chalk.dim("Cache Read:")} ${totalCacheRead.toLocaleString()}\n`;
+            info += `${theme.fg("dim", "Cache Read:")} ${totalCacheRead.toLocaleString()}\n`;
         }
         if (totalCacheWrite > 0) {
-            info += `${chalk.dim("Cache Write:")} ${totalCacheWrite.toLocaleString()}\n`;
+            info += `${theme.fg("dim", "Cache Write:")} ${totalCacheWrite.toLocaleString()}\n`;
         }
-        info += `${chalk.dim("Total:")} ${totalTokens.toLocaleString()}\n`;
+        info += `${theme.fg("dim", "Total:")} ${totalTokens.toLocaleString()}\n`;
         if (totalCost > 0) {
-            info += `\n${chalk.bold("Cost")}\n`;
-            info += `${chalk.dim("Total:")} ${totalCost.toFixed(4)}`;
+            info += `\n${theme.bold("Cost")}\n`;
+            info += `${theme.fg("dim", "Total:")} ${totalCost.toFixed(4)}`;
         }
         // Show info in chat
         this.chatContainer.addChild(new Spacer(1));
@@ -1048,11 +1100,11 @@ export class TuiRenderer {
             : "No changelog entries found.";
         // Display in chat
         this.chatContainer.addChild(new Spacer(1));
-        this.chatContainer.addChild(new DynamicBorder(chalk.cyan));
-        this.ui.addChild(new Text(chalk.bold.cyan("What's New"), 1, 0));
+        this.chatContainer.addChild(new DynamicBorder());
+        this.ui.addChild(new Text(theme.bold(theme.fg("accent", "What's New")), 1, 0));
         this.ui.addChild(new Spacer(1));
-        this.chatContainer.addChild(new Markdown(changelogMarkdown, 1, 1));
-        this.chatContainer.addChild(new DynamicBorder(chalk.cyan));
+        this.chatContainer.addChild(new Markdown(changelogMarkdown, 1, 1, getMarkdownTheme()));
+        this.chatContainer.addChild(new DynamicBorder());
         this.ui.requestRender();
     }
     updatePendingMessagesDisplay() {
@@ -1060,7 +1112,7 @@ export class TuiRenderer {
         if (this.queuedMessages.length > 0) {
             this.pendingMessagesContainer.addChild(new Spacer(1));
             for (const message of this.queuedMessages) {
-                const queuedText = chalk.dim("Queued: " + message);
+                const queuedText = theme.fg("dim", "Queued: " + message);
                 this.pendingMessagesContainer.addChild(new TruncatedText(queuedText, 1, 0));
             }
         }