getcompanion-ai/co-mono
1
0
Fork 0
mirror of https://github.com/getcompanion-ai/co-mono.git synced 2026-04-17 10:02:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve TUI instructions and thinking selector styling

Browse source 
- 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
This commit is contained in:
Mario Zechner 2025-11-11 20:53:27 +01:00
parent ba8d802999
commit 8fa780e052
2 changed files with 31 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/coding-agent/example.txt Normal file
View file

@ -0,0 +1,4 @@
Hello, World!
This line has been edited!
This is line three.
Goodbye, World!

33
packages/coding-agent/src/tui-renderer.ts
View file

@ -344,6 +344,9 @@ export class TuiRenderer {
chalk.dim("ctrl+c twice") + chalk.dim("ctrl+c twice") +
chalk.gray(" to exit") + chalk.gray(" to exit") +
"\n" + "\n" +
chalk.dim("ctrl+k") +
chalk.gray(" to delete line") +
"\n" +
chalk.dim("/") + chalk.dim("/") +
chalk.gray(" for commands") + chalk.gray(" for commands") +
"\n" + "\n" +
@ -390,9 +393,11 @@ export class TuiRenderer {
const validLevels: ThinkingLevel[] = ["off", "minimal", "low", "medium", "high"]; const validLevels: ThinkingLevel[] = ["off", "minimal", "low", "medium", "high"];
if (validLevels.includes(level)) { if (validLevels.includes(level)) {
this.agent.setThinkingLevel(level); this.agent.setThinkingLevel(level);
// Show confirmation message // Show confirmation message with padding
const confirmText = new Text(chalk.dim(`Thinking level set to: ${level}`), 1, 0); 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(confirmText);
this.chatContainer.addChild(new Text("", 0, 0)); // Blank line after
this.ui.requestRender(); this.ui.requestRender();
this.editor.setText(""); this.editor.setText("");
return; return;
@ -746,15 +751,25 @@ export class TuiRenderer {
{ value: "high", label: "high", description: "Deep reasoning (~16k tokens)" }, { 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 = new SelectList(thinkingLevels, 5);
this.thinkingSelector.onSelect = (item) => { this.thinkingSelector.onSelect = (item) => {
// Apply the selected thinking level // Apply the selected thinking level
const level = item.value as ThinkingLevel; const level = item.value as ThinkingLevel;
this.agent.setThinkingLevel(level); this.agent.setThinkingLevel(level);
// Show confirmation message // Show confirmation message with padding and blue color
const confirmText = new Text(chalk.dim(`Thinking level set to: ${level}`), 1, 0); 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(confirmText);
this.chatContainer.addChild(new Text("", 0, 0)); // Blank line after
// Hide selector and show editor again // Hide selector and show editor again
this.hideThinkingSelector(); this.hideThinkingSelector();
@ -767,9 +782,15 @@ export class TuiRenderer {
this.ui.requestRender(); 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.clear();
this.editorContainer.addChild(this.thinkingSelector); this.editorContainer.addChild(selectorContainer);
this.ui.setFocus(this.thinkingSelector); this.ui.setFocus(this.thinkingSelector);
this.ui.requestRender(); this.ui.requestRender();
} }