@lenylvt/pi-coding-agent 0.64.0

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

@@ -0,0 +1,432 @@
+import type { ThinkingLevel } from "@lenylvt/pi-agent-core";
+import type { Transport } from "@lenylvt/pi-ai";
+import {
+	Container,
+	getCapabilities,
+	type SelectItem,
+	SelectList,
+	type SelectListLayoutOptions,
+	type SettingItem,
+	SettingsList,
+	Spacer,
+	Text,
+} from "@lenylvt/pi-tui";
+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)",
+	low: "Light reasoning (~2k tokens)",
+	medium: "Moderate reasoning (~8k tokens)",
+	high: "Deep reasoning (~16k tokens)",
+	xhigh: "Maximum reasoning (~32k tokens)",
+};
+
+export interface SettingsConfig {
+	autoCompact: boolean;
+	showImages: boolean;
+	autoResizeImages: boolean;
+	blockImages: boolean;
+	enableSkillCommands: boolean;
+	steeringMode: "all" | "one-at-a-time";
+	followUpMode: "all" | "one-at-a-time";
+	transport: Transport;
+	thinkingLevel: ThinkingLevel;
+	availableThinkingLevels: ThinkingLevel[];
+	currentTheme: string;
+	availableThemes: string[];
+	hideThinkingBlock: boolean;
+	collapseChangelog: boolean;
+	doubleEscapeAction: "fork" | "tree" | "none";
+	treeFilterMode: "default" | "no-tools" | "user-only" | "labeled-only" | "all";
+	showHardwareCursor: boolean;
+	editorPaddingX: number;
+	autocompleteMaxVisible: number;
+	quietStartup: boolean;
+	clearOnShrink: boolean;
+}
+
+export interface SettingsCallbacks {
+	onAutoCompactChange: (enabled: boolean) => void;
+	onShowImagesChange: (enabled: boolean) => void;
+	onAutoResizeImagesChange: (enabled: boolean) => void;
+	onBlockImagesChange: (blocked: boolean) => void;
+	onEnableSkillCommandsChange: (enabled: boolean) => void;
+	onSteeringModeChange: (mode: "all" | "one-at-a-time") => void;
+	onFollowUpModeChange: (mode: "all" | "one-at-a-time") => void;
+	onTransportChange: (transport: Transport) => void;
+	onThinkingLevelChange: (level: ThinkingLevel) => void;
+	onThemeChange: (theme: string) => void;
+	onThemePreview?: (theme: string) => void;
+	onHideThinkingBlockChange: (hidden: boolean) => void;
+	onCollapseChangelogChange: (collapsed: boolean) => void;
+	onDoubleEscapeActionChange: (action: "fork" | "tree" | "none") => void;
+	onTreeFilterModeChange: (mode: "default" | "no-tools" | "user-only" | "labeled-only" | "all") => void;
+	onShowHardwareCursorChange: (enabled: boolean) => void;
+	onEditorPaddingXChange: (padding: number) => void;
+	onAutocompleteMaxVisibleChange: (maxVisible: number) => void;
+	onQuietStartupChange: (enabled: boolean) => void;
+	onClearOnShrinkChange: (enabled: boolean) => void;
+	onCancel: () => void;
+}
+
+/**
+ * A submenu component for selecting from a list of options.
+ */
+class SelectSubmenu extends Container {
+	private selectList: SelectList;
+
+	constructor(
+		title: string,
+		description: string,
+		options: SelectItem[],
+		currentValue: string,
+		onSelect: (value: string) => void,
+		onCancel: () => void,
+		onSelectionChange?: (value: string) => void,
+	) {
+		super();
+
+		// Title
+		this.addChild(new Text(theme.bold(theme.fg("accent", title)), 0, 0));
+
+		// Description
+		if (description) {
+			this.addChild(new Spacer(1));
+			this.addChild(new Text(theme.fg("muted", description), 0, 0));
+		}
+
+		// Spacer
+		this.addChild(new Spacer(1));
+
+		// Select list
+		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);
+		if (currentIndex !== -1) {
+			this.selectList.setSelectedIndex(currentIndex);
+		}
+
+		this.selectList.onSelect = (item) => {
+			onSelect(item.value);
+		};
+
+		this.selectList.onCancel = onCancel;
+
+		if (onSelectionChange) {
+			this.selectList.onSelectionChange = (item) => {
+				onSelectionChange(item.value);
+			};
+		}
+
+		this.addChild(this.selectList);
+
+		// Hint
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(theme.fg("dim", "  Enter to select · Esc to go back"), 0, 0));
+	}
+
+	handleInput(data: string): void {
+		this.selectList.handleInput(data);
+	}
+}
+
+/**
+ * Main settings selector component.
+ */
+export class SettingsSelectorComponent extends Container {
+	private settingsList: SettingsList;
+
+	constructor(config: SettingsConfig, callbacks: SettingsCallbacks) {
+		super();
+
+		const supportsImages = getCapabilities().images;
+
+		const items: SettingItem[] = [
+			{
+				id: "autocompact",
+				label: "Auto-compact",
+				description: "Automatically compact context when it gets too large",
+				currentValue: config.autoCompact ? "true" : "false",
+				values: ["true", "false"],
+			},
+			{
+				id: "steering-mode",
+				label: "Steering mode",
+				description:
+					"Enter while streaming queues steering messages. 'one-at-a-time': deliver one, wait for response. 'all': deliver all at once.",
+				currentValue: config.steeringMode,
+				values: ["one-at-a-time", "all"],
+			},
+			{
+				id: "follow-up-mode",
+				label: "Follow-up mode",
+				description:
+					"Alt+Enter queues follow-up messages until agent stops. 'one-at-a-time': deliver one, wait for response. 'all': deliver all at once.",
+				currentValue: config.followUpMode,
+				values: ["one-at-a-time", "all"],
+			},
+			{
+				id: "transport",
+				label: "Transport",
+				description: "Preferred transport for providers that support multiple transports",
+				currentValue: config.transport,
+				values: ["sse", "websocket", "auto"],
+			},
+			{
+				id: "hide-thinking",
+				label: "Hide thinking",
+				description: "Hide thinking blocks in assistant responses",
+				currentValue: config.hideThinkingBlock ? "true" : "false",
+				values: ["true", "false"],
+			},
+			{
+				id: "collapse-changelog",
+				label: "Collapse changelog",
+				description: "Show condensed changelog after updates",
+				currentValue: config.collapseChangelog ? "true" : "false",
+				values: ["true", "false"],
+			},
+			{
+				id: "quiet-startup",
+				label: "Quiet startup",
+				description: "Disable verbose printing at startup",
+				currentValue: config.quietStartup ? "true" : "false",
+				values: ["true", "false"],
+			},
+			{
+				id: "double-escape-action",
+				label: "Double-escape action",
+				description: "Action when pressing Escape twice with empty editor",
+				currentValue: config.doubleEscapeAction,
+				values: ["tree", "fork", "none"],
+			},
+			{
+				id: "tree-filter-mode",
+				label: "Tree filter mode",
+				description: "Default filter when opening /tree",
+				currentValue: config.treeFilterMode,
+				values: ["default", "no-tools", "user-only", "labeled-only", "all"],
+			},
+			{
+				id: "thinking",
+				label: "Thinking level",
+				description: "Reasoning depth for thinking-capable models",
+				currentValue: config.thinkingLevel,
+				submenu: (currentValue, done) =>
+					new SelectSubmenu(
+						"Thinking Level",
+						"Select reasoning depth for thinking-capable models",
+						config.availableThinkingLevels.map((level) => ({
+							value: level,
+							label: level,
+							description: THINKING_DESCRIPTIONS[level],
+						})),
+						currentValue,
+						(value) => {
+							callbacks.onThinkingLevelChange(value as ThinkingLevel);
+							done(value);
+						},
+						() => done(),
+					),
+			},
+			{
+				id: "theme",
+				label: "Theme",
+				description: "Color theme for the interface",
+				currentValue: config.currentTheme,
+				submenu: (currentValue, done) =>
+					new SelectSubmenu(
+						"Theme",
+						"Select color theme",
+						config.availableThemes.map((t) => ({
+							value: t,
+							label: t,
+						})),
+						currentValue,
+						(value) => {
+							callbacks.onThemeChange(value);
+							done(value);
+						},
+						() => {
+							// Restore original theme on cancel
+							callbacks.onThemePreview?.(currentValue);
+							done();
+						},
+						(value) => {
+							// Preview theme on selection change
+							callbacks.onThemePreview?.(value);
+						},
+					),
+			},
+		];
+
+		// Only show image toggle if terminal supports it
+		if (supportsImages) {
+			// Insert after autocompact
+			items.splice(1, 0, {
+				id: "show-images",
+				label: "Show images",
+				description: "Render images inline in terminal",
+				currentValue: config.showImages ? "true" : "false",
+				values: ["true", "false"],
+			});
+		}
+
+		// Image auto-resize toggle (always available, affects both attached and read images)
+		items.splice(supportsImages ? 2 : 1, 0, {
+			id: "auto-resize-images",
+			label: "Auto-resize images",
+			description: "Resize large images to 2000x2000 max for better model compatibility",
+			currentValue: config.autoResizeImages ? "true" : "false",
+			values: ["true", "false"],
+		});
+
+		// Block images toggle (always available, insert after auto-resize-images)
+		const autoResizeIndex = items.findIndex((item) => item.id === "auto-resize-images");
+		items.splice(autoResizeIndex + 1, 0, {
+			id: "block-images",
+			label: "Block images",
+			description: "Prevent images from being sent to LLM providers",
+			currentValue: config.blockImages ? "true" : "false",
+			values: ["true", "false"],
+		});
+
+		// Skill commands toggle (insert after block-images)
+		const blockImagesIndex = items.findIndex((item) => item.id === "block-images");
+		items.splice(blockImagesIndex + 1, 0, {
+			id: "skill-commands",
+			label: "Skill commands",
+			description: "Register skills as /skill:name commands",
+			currentValue: config.enableSkillCommands ? "true" : "false",
+			values: ["true", "false"],
+		});
+
+		// Hardware cursor toggle (insert after skill-commands)
+		const skillCommandsIndex = items.findIndex((item) => item.id === "skill-commands");
+		items.splice(skillCommandsIndex + 1, 0, {
+			id: "show-hardware-cursor",
+			label: "Show hardware cursor",
+			description: "Show the terminal cursor while still positioning it for IME support",
+			currentValue: config.showHardwareCursor ? "true" : "false",
+			values: ["true", "false"],
+		});
+
+		// Editor padding toggle (insert after show-hardware-cursor)
+		const hardwareCursorIndex = items.findIndex((item) => item.id === "show-hardware-cursor");
+		items.splice(hardwareCursorIndex + 1, 0, {
+			id: "editor-padding",
+			label: "Editor padding",
+			description: "Horizontal padding for input editor (0-3)",
+			currentValue: String(config.editorPaddingX),
+			values: ["0", "1", "2", "3"],
+		});
+
+		// Autocomplete max visible toggle (insert after editor-padding)
+		const editorPaddingIndex = items.findIndex((item) => item.id === "editor-padding");
+		items.splice(editorPaddingIndex + 1, 0, {
+			id: "autocomplete-max-visible",
+			label: "Autocomplete max items",
+			description: "Max visible items in autocomplete dropdown (3-20)",
+			currentValue: String(config.autocompleteMaxVisible),
+			values: ["3", "5", "7", "10", "15", "20"],
+		});
+
+		// Clear on shrink toggle (insert after autocomplete-max-visible)
+		const autocompleteIndex = items.findIndex((item) => item.id === "autocomplete-max-visible");
+		items.splice(autocompleteIndex + 1, 0, {
+			id: "clear-on-shrink",
+			label: "Clear on shrink",
+			description: "Clear empty rows when content shrinks (may cause flicker)",
+			currentValue: config.clearOnShrink ? "true" : "false",
+			values: ["true", "false"],
+		});
+
+		// Add borders
+		this.addChild(new DynamicBorder());
+
+		this.settingsList = new SettingsList(
+			items,
+			10,
+			getSettingsListTheme(),
+			(id, newValue) => {
+				switch (id) {
+					case "autocompact":
+						callbacks.onAutoCompactChange(newValue === "true");
+						break;
+					case "show-images":
+						callbacks.onShowImagesChange(newValue === "true");
+						break;
+					case "auto-resize-images":
+						callbacks.onAutoResizeImagesChange(newValue === "true");
+						break;
+					case "block-images":
+						callbacks.onBlockImagesChange(newValue === "true");
+						break;
+					case "skill-commands":
+						callbacks.onEnableSkillCommandsChange(newValue === "true");
+						break;
+					case "steering-mode":
+						callbacks.onSteeringModeChange(newValue as "all" | "one-at-a-time");
+						break;
+					case "follow-up-mode":
+						callbacks.onFollowUpModeChange(newValue as "all" | "one-at-a-time");
+						break;
+					case "transport":
+						callbacks.onTransportChange(newValue as Transport);
+						break;
+					case "hide-thinking":
+						callbacks.onHideThinkingBlockChange(newValue === "true");
+						break;
+					case "collapse-changelog":
+						callbacks.onCollapseChangelogChange(newValue === "true");
+						break;
+					case "quiet-startup":
+						callbacks.onQuietStartupChange(newValue === "true");
+						break;
+					case "double-escape-action":
+						callbacks.onDoubleEscapeActionChange(newValue as "fork" | "tree");
+						break;
+					case "tree-filter-mode":
+						callbacks.onTreeFilterModeChange(
+							newValue as "default" | "no-tools" | "user-only" | "labeled-only" | "all",
+						);
+						break;
+					case "show-hardware-cursor":
+						callbacks.onShowHardwareCursorChange(newValue === "true");
+						break;
+					case "editor-padding":
+						callbacks.onEditorPaddingXChange(parseInt(newValue, 10));
+						break;
+					case "autocomplete-max-visible":
+						callbacks.onAutocompleteMaxVisibleChange(parseInt(newValue, 10));
+						break;
+					case "clear-on-shrink":
+						callbacks.onClearOnShrinkChange(newValue === "true");
+						break;
+				}
+			},
+			callbacks.onCancel,
+			{ enableSearch: true },
+		);
+
+		this.addChild(this.settingsList);
+		this.addChild(new DynamicBorder());
+	}
+
+	getSettingsList(): SettingsList {
+		return this.settingsList;
+	}
+}

package/src/modes/interactive/components/show-images-selector.ts

@@ -0,0 +1,50 @@
+import { Container, type SelectItem, SelectList, type SelectListLayoutOptions } from "@lenylvt/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
+ */
+export class ShowImagesSelectorComponent extends Container {
+	private selectList: SelectList;
+
+	constructor(currentValue: boolean, onSelect: (show: boolean) => void, onCancel: () => void) {
+		super();
+
+		const items: SelectItem[] = [
+			{ value: "yes", label: "Yes", description: "Show images inline in terminal" },
+			{ value: "no", label: "No", description: "Show text placeholder instead" },
+		];
+
+		// Add top border
+		this.addChild(new DynamicBorder());
+
+		// Create selector
+		this.selectList = new SelectList(items, 5, getSelectListTheme(), SHOW_IMAGES_SELECT_LIST_LAYOUT);
+
+		// Preselect current value
+		this.selectList.setSelectedIndex(currentValue ? 0 : 1);
+
+		this.selectList.onSelect = (item) => {
+			onSelect(item.value === "yes");
+		};
+
+		this.selectList.onCancel = () => {
+			onCancel();
+		};
+
+		this.addChild(this.selectList);
+
+		// Add bottom border
+		this.addChild(new DynamicBorder());
+	}
+
+	getSelectList(): SelectList {
+		return this.selectList;
+	}
+}

package/src/modes/interactive/components/skill-invocation-message.ts

@@ -0,0 +1,55 @@
+import { Box, Markdown, type MarkdownTheme, Text } from "@lenylvt/pi-tui";
+import type { ParsedSkillBlock } from "../../../core/agent-session.js";
+import { getMarkdownTheme, theme } from "../theme/theme.js";
+import { keyText } from "./keybinding-hints.js";
+
+/**
+ * Component that renders a skill invocation message with collapsed/expanded state.
+ * Uses same background color as custom messages for visual consistency.
+ * Only renders the skill block itself - user message is rendered separately.
+ */
+export class SkillInvocationMessageComponent extends Box {
+	private expanded = false;
+	private skillBlock: ParsedSkillBlock;
+	private markdownTheme: MarkdownTheme;
+
+	constructor(skillBlock: ParsedSkillBlock, markdownTheme: MarkdownTheme = getMarkdownTheme()) {
+		super(1, 1, (t) => theme.bg("customMessageBg", t));
+		this.skillBlock = skillBlock;
+		this.markdownTheme = markdownTheme;
+		this.updateDisplay();
+	}
+
+	setExpanded(expanded: boolean): void {
+		this.expanded = expanded;
+		this.updateDisplay();
+	}
+
+	override invalidate(): void {
+		super.invalidate();
+		this.updateDisplay();
+	}
+
+	private updateDisplay(): void {
+		this.clear();
+
+		if (this.expanded) {
+			// Expanded: label + skill name header + full content
+			const label = theme.fg("customMessageLabel", `\x1b[1m[skill]\x1b[22m`);
+			this.addChild(new Text(label, 0, 0));
+			const header = `**${this.skillBlock.name}**\n\n`;
+			this.addChild(
+				new Markdown(header + this.skillBlock.content, 0, 0, this.markdownTheme, {
+					color: (text: string) => theme.fg("customMessageText", text),
+				}),
+			);
+		} else {
+			// Collapsed: single line - [skill] name (hint to expand)
+			const line =
+				theme.fg("customMessageLabel", `\x1b[1m[skill]\x1b[22m `) +
+				theme.fg("customMessageText", this.skillBlock.name) +
+				theme.fg("dim", ` (${keyText("app.tools.expand")} to expand)`);
+			this.addChild(new Text(line, 0, 0));
+		}
+	}
+}

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

@@ -0,0 +1,67 @@
+import { Container, type SelectItem, SelectList, type SelectListLayoutOptions } from "@lenylvt/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
+ */
+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(), THEME_SELECT_LIST_LAYOUT);
+
+		// 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,74 @@
+import type { ThinkingLevel } from "@lenylvt/pi-agent-core";
+import { Container, type SelectItem, SelectList, type SelectListLayoutOptions } from "@lenylvt/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)",
+	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(),
+			THINKING_SELECT_LIST_LAYOUT,
+		);
+
+		// 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;
+	}
+}