@oh-my-pi/pi-coding-agent 1.337.0

package/src/modes/interactive/components/theme-selector.ts

@@ -0,0 +1,62 @@
+import { Container, type SelectItem, SelectList } from "@oh-my-pi/pi-tui";
+import { getAvailableThemes, getSelectListTheme } from "../theme/theme.js";
+import { DynamicBorder } from "./dynamic-border.js";
+
+/**
+ * Component that renders a theme selector
+ */
+export class ThemeSelectorComponent extends Container {
+	private selectList: SelectList;
+	private onPreview: (themeName: string) => void;
+
+	constructor(
+		currentTheme: string,
+		onSelect: (themeName: string) => void,
+		onCancel: () => void,
+		onPreview: (themeName: string) => void,
+	) {
+		super();
+		this.onPreview = onPreview;
+
+		// Get available themes and create select items
+		const themes = getAvailableThemes();
+		const themeItems: SelectItem[] = themes.map((name) => ({
+			value: name,
+			label: name,
+			description: name === currentTheme ? "(current)" : undefined,
+		}));
+
+		// Add top border
+		this.addChild(new DynamicBorder());
+
+		// Create selector
+		this.selectList = new SelectList(themeItems, 10, getSelectListTheme());
+
+		// Preselect current theme
+		const currentIndex = themes.indexOf(currentTheme);
+		if (currentIndex !== -1) {
+			this.selectList.setSelectedIndex(currentIndex);
+		}
+
+		this.selectList.onSelect = (item) => {
+			onSelect(item.value);
+		};
+
+		this.selectList.onCancel = () => {
+			onCancel();
+		};
+
+		this.selectList.onSelectionChange = (item) => {
+			this.onPreview(item.value);
+		};
+
+		this.addChild(this.selectList);
+
+		// Add bottom border
+		this.addChild(new DynamicBorder());
+	}
+
+	getSelectList(): SelectList {
+		return this.selectList;
+	}
+}

package/src/modes/interactive/components/thinking-selector.ts

@@ -0,0 +1,64 @@
+import type { ThinkingLevel } from "@oh-my-pi/pi-agent-core";
+import { Container, type SelectItem, SelectList } from "@oh-my-pi/pi-tui";
+import { getSelectListTheme } from "../theme/theme.js";
+import { DynamicBorder } from "./dynamic-border.js";
+
+const LEVEL_DESCRIPTIONS: Record<ThinkingLevel, string> = {
+	off: "No reasoning",
+	minimal: "Very brief reasoning (~1k tokens)",
+	low: "Light reasoning (~2k tokens)",
+	medium: "Moderate reasoning (~8k tokens)",
+	high: "Deep reasoning (~16k tokens)",
+	xhigh: "Maximum reasoning (~32k tokens)",
+};
+
+/**
+ * Component that renders a thinking level selector with borders
+ */
+export class ThinkingSelectorComponent extends Container {
+	private selectList: SelectList;
+
+	constructor(
+		currentLevel: ThinkingLevel,
+		availableLevels: ThinkingLevel[],
+		onSelect: (level: ThinkingLevel) => void,
+		onCancel: () => void,
+	) {
+		super();
+
+		const thinkingLevels: SelectItem[] = availableLevels.map((level) => ({
+			value: level,
+			label: level,
+			description: LEVEL_DESCRIPTIONS[level],
+		}));
+
+		// Add top border
+		this.addChild(new DynamicBorder());
+
+		// Create selector
+		this.selectList = new SelectList(thinkingLevels, thinkingLevels.length, getSelectListTheme());
+
+		// Preselect current level
+		const currentIndex = thinkingLevels.findIndex((item) => item.value === currentLevel);
+		if (currentIndex !== -1) {
+			this.selectList.setSelectedIndex(currentIndex);
+		}
+
+		this.selectList.onSelect = (item) => {
+			onSelect(item.value as ThinkingLevel);
+		};
+
+		this.selectList.onCancel = () => {
+			onCancel();
+		};
+
+		this.addChild(this.selectList);
+
+		// Add bottom border
+		this.addChild(new DynamicBorder());
+	}
+
+	getSelectList(): SelectList {
+		return this.selectList;
+	}
+}