From 8fa780e052a81fdfe0814c10e4916308660c13c6 Mon Sep 17 00:00:00 2001
From: Mario Zechner <badlogicgames@gmail.com>
Date: Tue, 11 Nov 2025 20:53:27 +0100
Subject: [PATCH] Improve TUI instructions and thinking selector styling

- Add ctrl+k to delete line instruction
- Change all "set x to y" confirmation messages to blue with padding
- Add blue top and bottom borders around thinking selector dialog
---
 packages/coding-agent/example.txt         |  4 +++
 packages/coding-agent/src/tui-renderer.ts | 33 ++++++++++++++++++-----
 2 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 packages/coding-agent/example.txt

diff --git a/packages/coding-agent/example.txt b/packages/coding-agent/example.txt
new file mode 100644
index 00000000..435c1104
--- /dev/null
+++ b/packages/coding-agent/example.txt
@@ -0,0 +1,4 @@
+Hello, World!
+This line has been edited!
+This is line three.
+Goodbye, World!
\ No newline at end of file
diff --git a/packages/coding-agent/src/tui-renderer.ts b/packages/coding-agent/src/tui-renderer.ts
index 5b8592d7..ad6d60b2 100644
--- a/packages/coding-agent/src/tui-renderer.ts
+++ b/packages/coding-agent/src/tui-renderer.ts
@@ -344,6 +344,9 @@ export class TuiRenderer {
 			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" +
@@ -390,9 +393,11 @@ export class TuiRenderer {
 				const validLevels: ThinkingLevel[] = ["off", "minimal", "low", "medium", "high"];
 				if (validLevels.includes(level)) {
 					this.agent.setThinkingLevel(level);
-					// Show confirmation message
-					const confirmText = new Text(chalk.dim(`Thinking level set to: ${level}`), 1, 0);
+					// Show confirmation message with padding
+					this.chatContainer.addChild(new Text("", 0, 0)); // Blank line before
+					const confirmText = new Text(chalk.blue(`Thinking level set to: ${level}`), 0, 0);
 					this.chatContainer.addChild(confirmText);
+					this.chatContainer.addChild(new Text("", 0, 0)); // Blank line after
 					this.ui.requestRender();
 					this.editor.setText("");
 					return;
@@ -746,15 +751,25 @@ export class TuiRenderer {
 			{ value: "high", label: "high", description: "Deep reasoning (~16k tokens)" },
 		];
 
+		// Create container for the selector with borders
+		const selectorContainer = new Container();
+
+		// Add top border
+		const topBorder = new Text(chalk.blue("─".repeat(50)), 0, 0);
+		selectorContainer.addChild(topBorder);
+
+		// Add selector
 		this.thinkingSelector = new SelectList(thinkingLevels, 5);
 		this.thinkingSelector.onSelect = (item) => {
 			// Apply the selected thinking level
 			const level = item.value as ThinkingLevel;
 			this.agent.setThinkingLevel(level);
 
-			// Show confirmation message
-			const confirmText = new Text(chalk.dim(`Thinking level set to: ${level}`), 1, 0);
+			// Show confirmation message with padding and blue color
+			this.chatContainer.addChild(new Text("", 0, 0)); // Blank line before
+			const confirmText = new Text(chalk.blue(`Thinking level set to: ${level}`), 0, 0);
 			this.chatContainer.addChild(confirmText);
+			this.chatContainer.addChild(new Text("", 0, 0)); // Blank line after
 
 			// Hide selector and show editor again
 			this.hideThinkingSelector();
@@ -767,9 +782,15 @@ export class TuiRenderer {
 			this.ui.requestRender();
 		};
 
-		// Replace editor with selector in the container
+		selectorContainer.addChild(this.thinkingSelector);
+
+		// Add bottom border
+		const bottomBorder = new Text(chalk.blue("─".repeat(50)), 0, 0);
+		selectorContainer.addChild(bottomBorder);
+
+		// Replace editor with selector container
 		this.editorContainer.clear();
-		this.editorContainer.addChild(this.thinkingSelector);
+		this.editorContainer.addChild(selectorContainer);
 		this.ui.setFocus(this.thinkingSelector);
 		this.ui.requestRender();
 	}