feat: add visual thinking level indicator via border colors

The horizontal borders around the input editor now change color based on
the current thinking level, providing immediate visual feedback:

- off: gray (default)
- minimal: dim blue
- low: blue
- medium: cyan
- high: magenta

The more thinking, the brighter/more vibrant the color.

Changes:
- Add public borderColor property to Editor component (packages/tui)
- Use borderColor instead of hardcoded chalk.gray for borders
- Add getThinkingBorderColor() helper in TuiRenderer
- Add updateEditorBorderColor() to apply color changes
- Update border color when:
  - Cycling with Tab key
  - Selecting via /thinking command
  - Restoring session with thinking level set
This commit is contained in:
Tino Ehrich 2025-11-19 10:38:10 +01:00
parent 9e8373b86a
commit 0df48f6b33
2 changed files with 38 additions and 1 deletions

View file

@ -28,6 +28,9 @@ export class Editor implements Component {
private config: TextEditorConfig = {};
// Border color (can be changed dynamically)
public borderColor: (str: string) => string = chalk.gray;
// Autocomplete support
private autocompleteProvider?: AutocompleteProvider;
private autocompleteList?: SelectList;
@ -61,7 +64,7 @@ export class Editor implements Component {
}
render(width: number): string[] {
const horizontal = chalk.gray("─");
const horizontal = this.borderColor("─");
// Layout the text - use full width
const layoutLines = this.layoutText(width);