shumengya/sproutclaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(tui): make select list column sizing configurable (#2154)

Browse Source 
* feat(tui): make select list layout configurable

* feat(tui): tune select list column sizing

* test(tui): fix select list alignment assertions
This commit is contained in:
Markus Ylisiurunen
2026-03-14 16:50:00 +02:00
committed by GitHub
parent e5b5738255
commit c9a3d14aa5
8 changed files with 253 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/coding-agent/src/modes/interactive/components/settings-selector.ts
View File

@@ -5,6 +5,7 @@ import {
getCapabilities,
type SelectItem,
SelectList,
type SelectListLayoutOptions,
type SettingItem,
SettingsList,
Spacer,
@@ -13,6 +14,11 @@ import {
import { getSelectListTheme, getSettingsListTheme, theme } from "../theme/theme.js";
import { DynamicBorder } from "./dynamic-border.js";
const SETTINGS_SUBMENU_SELECT_LIST_LAYOUT: SelectListLayoutOptions = {
minPrimaryColumnWidth: 12,
maxPrimaryColumnWidth: 32,
};
const THINKING_DESCRIPTIONS: Record<ThinkingLevel, string> = {
off: "No reasoning",
minimal: "Very brief reasoning (~1k tokens)",
@@ -100,7 +106,12 @@ class SelectSubmenu extends Container {
this.addChild(new Spacer(1));
// Select list
this.selectList = new SelectList(options, Math.min(options.length, 10), getSelectListTheme());
this.selectList = new SelectList(
options,
Math.min(options.length, 10),
getSelectListTheme(),
SETTINGS_SUBMENU_SELECT_LIST_LAYOUT,
);
// Pre-select current value
const currentIndex = options.findIndex((o) => o.value === currentValue);

9
packages/coding-agent/src/modes/interactive/components/show-images-selector.ts
View File

@@ -1,7 +1,12 @@
import { Container, type SelectItem, SelectList } from "@mariozechner/pi-tui";
import { Container, type SelectItem, SelectList, type SelectListLayoutOptions } from "@mariozechner/pi-tui";
import { getSelectListTheme } from "../theme/theme.js";
import { DynamicBorder } from "./dynamic-border.js";
const SHOW_IMAGES_SELECT_LIST_LAYOUT: SelectListLayoutOptions = {
minPrimaryColumnWidth: 12,
maxPrimaryColumnWidth: 32,
};
/**
* Component that renders a show images selector with borders
*/
@@ -20,7 +25,7 @@ export class ShowImagesSelectorComponent extends Container {
this.addChild(new DynamicBorder());
// Create selector
this.selectList = new SelectList(items, 5, getSelectListTheme());
this.selectList = new SelectList(items, 5, getSelectListTheme(), SHOW_IMAGES_SELECT_LIST_LAYOUT);
// Preselect current value
this.selectList.setSelectedIndex(currentValue ? 0 : 1);

9
packages/coding-agent/src/modes/interactive/components/theme-selector.ts
View File

@@ -1,7 +1,12 @@
import { Container, type SelectItem, SelectList } from "@mariozechner/pi-tui";
import { Container, type SelectItem, SelectList, type SelectListLayoutOptions } from "@mariozechner/pi-tui";
import { getAvailableThemes, getSelectListTheme } from "../theme/theme.js";
import { DynamicBorder } from "./dynamic-border.js";
const THEME_SELECT_LIST_LAYOUT: SelectListLayoutOptions = {
minPrimaryColumnWidth: 12,
maxPrimaryColumnWidth: 32,
};
/**
* Component that renders a theme selector
*/
@@ -30,7 +35,7 @@ export class ThemeSelectorComponent extends Container {
this.addChild(new DynamicBorder());
// Create selector
this.selectList = new SelectList(themeItems, 10, getSelectListTheme());
this.selectList = new SelectList(themeItems, 10, getSelectListTheme(), THEME_SELECT_LIST_LAYOUT);
// Preselect current theme
const currentIndex = themes.indexOf(currentTheme);

14
packages/coding-agent/src/modes/interactive/components/thinking-selector.ts
View File

@@ -1,8 +1,13 @@
import type { ThinkingLevel } from "@mariozechner/pi-agent-core";
import { Container, type SelectItem, SelectList } from "@mariozechner/pi-tui";
import { Container, type SelectItem, SelectList, type SelectListLayoutOptions } from "@mariozechner/pi-tui";
import { getSelectListTheme } from "../theme/theme.js";
import { DynamicBorder } from "./dynamic-border.js";
const THINKING_SELECT_LIST_LAYOUT: SelectListLayoutOptions = {
minPrimaryColumnWidth: 12,
maxPrimaryColumnWidth: 32,
};
const LEVEL_DESCRIPTIONS: Record<ThinkingLevel, string> = {
off: "No reasoning",
minimal: "Very brief reasoning (~1k tokens)",
@@ -36,7 +41,12 @@ export class ThinkingSelectorComponent extends Container {
this.addChild(new DynamicBorder());
// Create selector
this.selectList = new SelectList(thinkingLevels, thinkingLevels.length, getSelectListTheme());
this.selectList = new SelectList(
thinkingLevels,
thinkingLevels.length,
getSelectListTheme(),
THINKING_SELECT_LIST_LAYOUT,
);
// Preselect current level
const currentIndex = thinkingLevels.findIndex((item) => item.value === currentLevel);