@oh-my-pi/pi-coding-agent 3.14.0 → 3.15.1

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

@@ -10,7 +10,13 @@
 
 import type { ThinkingLevel } from "@oh-my-pi/pi-agent-core";
 import { getCapabilities } from "@oh-my-pi/pi-tui";
-import type { SettingsManager } from "../../../core/settings-manager";
+import type {
+	SettingsManager,
+	StatusLinePreset,
+	StatusLineSeparatorStyle,
+	SymbolPreset,
+} from "../../../core/settings-manager";
+import { getPreset } from "./status-line/presets";
 
 // Setting value types
 export type SettingValue = boolean | string;
@@ -208,6 +214,20 @@ export const SETTINGS_DEFS: SettingDef[] = [
 		set: (sm, v) => sm.setTheme(v),
 		getOptions: () => [], // Filled dynamically from context
 	},
+	{
+		id: "symbolPreset",
+		tab: "config",
+		type: "submenu",
+		label: "Symbol preset",
+		description: "Icon/symbol style (overrides theme default)",
+		get: (sm) => sm.getSymbolPreset() ?? "unicode",
+		set: (sm, v) => sm.setSymbolPreset(v as SymbolPreset),
+		getOptions: () => [
+			{ value: "unicode", label: "Unicode", description: "Standard Unicode symbols (default)" },
+			{ value: "nerd", label: "Nerd Font", description: "Nerd Font icons (requires Nerd Font)" },
+			{ value: "ascii", label: "ASCII", description: "ASCII-only characters (maximum compatibility)" },
+		],
+	},
 
 	// LSP tab
 	{
@@ -293,6 +313,270 @@ export const SETTINGS_DEFS: SettingDef[] = [
 		get: (sm) => sm.getExaSettings().enableWebsets,
 		set: (sm, v) => sm.setExaWebsetsEnabled(v),
 	},
+
+	// Status Line tab
+	{
+		id: "statusLinePreset",
+		tab: "status",
+		type: "submenu",
+		label: "Preset",
+		description: "Pre-built status line configurations",
+		get: (sm) => sm.getStatusLinePreset(),
+		set: (sm, v) => sm.setStatusLinePreset(v as StatusLinePreset),
+		getOptions: () => [
+			{ value: "default", label: "Default", description: "Model, path, git, context, tokens, cost" },
+			{ value: "minimal", label: "Minimal", description: "Path and git only" },
+			{ value: "compact", label: "Compact", description: "Model, git, cost, context" },
+			{ value: "full", label: "Full", description: "All segments including time" },
+			{ value: "nerd", label: "Nerd", description: "Maximum info with Nerd Font icons" },
+			{ value: "ascii", label: "ASCII", description: "No special characters" },
+			{ value: "custom", label: "Custom", description: "User-defined segments" },
+		],
+	},
+	{
+		id: "statusLineSeparator",
+		tab: "status",
+		type: "submenu",
+		label: "Separator style",
+		description: "Style of separators between segments",
+		get: (sm) => {
+			const settings = sm.getStatusLineSettings();
+			if (settings.separator) return settings.separator;
+			return getPreset(sm.getStatusLinePreset()).separator;
+		},
+		set: (sm, v) => sm.setStatusLineSeparator(v as StatusLineSeparatorStyle),
+		getOptions: () => [
+			{ value: "powerline", label: "Powerline", description: "Solid arrows (requires Nerd Font)" },
+			{ value: "powerline-thin", label: "Thin chevron", description: "Thin arrows (requires Nerd Font)" },
+			{ value: "slash", label: "Slash", description: "Forward slashes" },
+			{ value: "pipe", label: "Pipe", description: "Vertical pipes" },
+			{ value: "block", label: "Block", description: "Solid blocks" },
+			{ value: "none", label: "None", description: "Space only" },
+			{ value: "ascii", label: "ASCII", description: "Greater-than signs" },
+		],
+	},
+	{
+		id: "statusLineShowHooks",
+		tab: "status",
+		type: "boolean",
+		label: "Show hook status",
+		description: "Display hook status messages below status line",
+		get: (sm) => sm.getStatusLineShowHookStatus(),
+		set: (sm, v) => sm.setStatusLineShowHookStatus(v),
+	},
+	{
+		id: "statusLineSegments",
+		tab: "status",
+		type: "submenu",
+		label: "Configure segments",
+		description: "Choose and arrange status line segments",
+		get: () => "configure...",
+		set: () => {}, // Handled specially
+		getOptions: () => [{ value: "open", label: "Open segment editor..." }],
+	},
+	{
+		id: "statusLineModelThinking",
+		tab: "status",
+		type: "enum",
+		label: "Model thinking level",
+		description: "Show thinking level in the model segment",
+		values: ["default", "on", "off"],
+		get: (sm) => {
+			const value = sm.getStatusLineSegmentOptions().model?.showThinkingLevel;
+			if (value === undefined) return "default";
+			return value ? "on" : "off";
+		},
+		set: (sm, v) => {
+			if (v === "default") {
+				sm.clearStatusLineSegmentOption("model", "showThinkingLevel");
+			} else {
+				sm.setStatusLineSegmentOption("model", "showThinkingLevel", v === "on");
+			}
+		},
+	},
+	{
+		id: "statusLinePathAbbreviate",
+		tab: "status",
+		type: "enum",
+		label: "Path abbreviate",
+		description: "Use ~ and strip home prefix in path segment",
+		values: ["default", "on", "off"],
+		get: (sm) => {
+			const value = sm.getStatusLineSegmentOptions().path?.abbreviate;
+			if (value === undefined) return "default";
+			return value ? "on" : "off";
+		},
+		set: (sm, v) => {
+			if (v === "default") {
+				sm.clearStatusLineSegmentOption("path", "abbreviate");
+			} else {
+				sm.setStatusLineSegmentOption("path", "abbreviate", v === "on");
+			}
+		},
+	},
+	{
+		id: "statusLinePathMaxLength",
+		tab: "status",
+		type: "submenu",
+		label: "Path max length",
+		description: "Maximum length for displayed path",
+		get: (sm) => {
+			const value = sm.getStatusLineSegmentOptions().path?.maxLength;
+			return typeof value === "number" ? String(value) : "default";
+		},
+		set: (sm, v) => {
+			if (v === "default") {
+				sm.clearStatusLineSegmentOption("path", "maxLength");
+			} else {
+				sm.setStatusLineSegmentOption("path", "maxLength", Number.parseInt(v, 10));
+			}
+		},
+		getOptions: () => [
+			{ value: "default", label: "Preset default" },
+			{ value: "20", label: "20" },
+			{ value: "30", label: "30" },
+			{ value: "40", label: "40" },
+			{ value: "50", label: "50" },
+			{ value: "60", label: "60" },
+			{ value: "80", label: "80" },
+		],
+	},
+	{
+		id: "statusLinePathStripWorkPrefix",
+		tab: "status",
+		type: "enum",
+		label: "Path strip /work",
+		description: "Strip /work prefix in path segment",
+		values: ["default", "on", "off"],
+		get: (sm) => {
+			const value = sm.getStatusLineSegmentOptions().path?.stripWorkPrefix;
+			if (value === undefined) return "default";
+			return value ? "on" : "off";
+		},
+		set: (sm, v) => {
+			if (v === "default") {
+				sm.clearStatusLineSegmentOption("path", "stripWorkPrefix");
+			} else {
+				sm.setStatusLineSegmentOption("path", "stripWorkPrefix", v === "on");
+			}
+		},
+	},
+	{
+		id: "statusLineGitShowBranch",
+		tab: "status",
+		type: "enum",
+		label: "Git show branch",
+		description: "Show branch name in git segment",
+		values: ["default", "on", "off"],
+		get: (sm) => {
+			const value = sm.getStatusLineSegmentOptions().git?.showBranch;
+			if (value === undefined) return "default";
+			return value ? "on" : "off";
+		},
+		set: (sm, v) => {
+			if (v === "default") {
+				sm.clearStatusLineSegmentOption("git", "showBranch");
+			} else {
+				sm.setStatusLineSegmentOption("git", "showBranch", v === "on");
+			}
+		},
+	},
+	{
+		id: "statusLineGitShowStaged",
+		tab: "status",
+		type: "enum",
+		label: "Git show staged",
+		description: "Show staged file count in git segment",
+		values: ["default", "on", "off"],
+		get: (sm) => {
+			const value = sm.getStatusLineSegmentOptions().git?.showStaged;
+			if (value === undefined) return "default";
+			return value ? "on" : "off";
+		},
+		set: (sm, v) => {
+			if (v === "default") {
+				sm.clearStatusLineSegmentOption("git", "showStaged");
+			} else {
+				sm.setStatusLineSegmentOption("git", "showStaged", v === "on");
+			}
+		},
+	},
+	{
+		id: "statusLineGitShowUnstaged",
+		tab: "status",
+		type: "enum",
+		label: "Git show unstaged",
+		description: "Show unstaged file count in git segment",
+		values: ["default", "on", "off"],
+		get: (sm) => {
+			const value = sm.getStatusLineSegmentOptions().git?.showUnstaged;
+			if (value === undefined) return "default";
+			return value ? "on" : "off";
+		},
+		set: (sm, v) => {
+			if (v === "default") {
+				sm.clearStatusLineSegmentOption("git", "showUnstaged");
+			} else {
+				sm.setStatusLineSegmentOption("git", "showUnstaged", v === "on");
+			}
+		},
+	},
+	{
+		id: "statusLineGitShowUntracked",
+		tab: "status",
+		type: "enum",
+		label: "Git show untracked",
+		description: "Show untracked file count in git segment",
+		values: ["default", "on", "off"],
+		get: (sm) => {
+			const value = sm.getStatusLineSegmentOptions().git?.showUntracked;
+			if (value === undefined) return "default";
+			return value ? "on" : "off";
+		},
+		set: (sm, v) => {
+			if (v === "default") {
+				sm.clearStatusLineSegmentOption("git", "showUntracked");
+			} else {
+				sm.setStatusLineSegmentOption("git", "showUntracked", v === "on");
+			}
+		},
+	},
+	{
+		id: "statusLineTimeFormat",
+		tab: "status",
+		type: "enum",
+		label: "Time format",
+		description: "Clock segment time format",
+		values: ["default", "12h", "24h"],
+		get: (sm) => sm.getStatusLineSegmentOptions().time?.format ?? "default",
+		set: (sm, v) => {
+			if (v === "default") {
+				sm.clearStatusLineSegmentOption("time", "format");
+			} else {
+				sm.setStatusLineSegmentOption("time", "format", v);
+			}
+		},
+	},
+	{
+		id: "statusLineTimeShowSeconds",
+		tab: "status",
+		type: "enum",
+		label: "Time show seconds",
+		description: "Include seconds in clock segment",
+		values: ["default", "on", "off"],
+		get: (sm) => {
+			const value = sm.getStatusLineSegmentOptions().time?.showSeconds;
+			if (value === undefined) return "default";
+			return value ? "on" : "off";
+		},
+		set: (sm, v) => {
+			if (v === "default") {
+				sm.clearStatusLineSegmentOption("time", "showSeconds");
+			} else {
+				sm.setStatusLineSegmentOption("time", "showSeconds", v === "on");
+			}
+		},
+	},
 ];
 
 /**

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

@@ -16,11 +16,13 @@ import {
 	type TabBarTheme,
 	Text,
 } from "@oh-my-pi/pi-tui";
-import type { SettingsManager } from "../../../core/settings-manager";
+import type { SettingsManager, StatusLineSettings } from "../../../core/settings-manager";
 import { getSelectListTheme, getSettingsListTheme, theme } from "../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
 import { PluginSettingsComponent } from "./plugin-settings";
 import { getSettingsForTab, type SettingDef } from "./settings-defs";
+import { getPreset } from "./status-line/presets";
+import { StatusLineSegmentEditorComponent } from "./status-line-segment-editor";
 
 function getTabBarTheme(): TabBarTheme {
 	return {
@@ -36,6 +38,8 @@ function getTabBarTheme(): TabBarTheme {
  */
 class SelectSubmenu extends Container {
 	private selectList: SelectList;
+	private previewText: Text | null = null;
+	private getPreview: (() => string) | undefined;
 
 	constructor(
 		title: string,
@@ -45,8 +49,10 @@ class SelectSubmenu extends Container {
 		onSelect: (value: string) => void,
 		onCancel: () => void,
 		onSelectionChange?: (value: string) => void,
+		getPreview?: () => string,
 	) {
 		super();
+		this.getPreview = getPreview;
 
 		// Title
 		this.addChild(new Text(theme.bold(theme.fg("accent", title)), 0, 0));
@@ -57,6 +63,14 @@ class SelectSubmenu extends Container {
 			this.addChild(new Text(theme.fg("muted", description), 0, 0));
 		}
 
+		// Preview (if provided)
+		if (getPreview) {
+			this.addChild(new Spacer(1));
+			this.addChild(new Text(theme.fg("muted", "Preview:"), 0, 0));
+			this.previewText = new Text(getPreview(), 0, 0);
+			this.addChild(this.previewText);
+		}
+
 		// Spacer
 		this.addChild(new Spacer(1));
 
@@ -78,6 +92,8 @@ class SelectSubmenu extends Container {
 		if (onSelectionChange) {
 			this.selectList.onSelectionChange = (item) => {
 				onSelectionChange(item.value);
+				// Update preview after the preview callback has applied changes
+				this.updatePreview();
 			};
 		}
 
@@ -88,6 +104,12 @@ class SelectSubmenu extends Container {
 		this.addChild(new Text(theme.fg("dim", "  Enter to select · Esc to go back"), 0, 0));
 	}
 
+	private updatePreview(): void {
+		if (this.previewText && this.getPreview) {
+			this.previewText.setText(this.getPreview());
+		}
+	}
+
 	handleInput(data: string): void {
 		this.selectList.handleInput(data);
 	}
@@ -97,6 +119,7 @@ type TabId = string;
 
 const SETTINGS_TABS: Tab[] = [
 	{ id: "config", label: "Config" },
+	{ id: "status", label: "Status" },
 	{ id: "lsp", label: "LSP" },
 	{ id: "exa", label: "Exa" },
 	{ id: "plugins", label: "Plugins" },
@@ -128,6 +151,10 @@ export interface SettingsCallbacks {
 	onChange: SettingChangeHandler;
 	/** Called for theme preview while browsing */
 	onThemePreview?: (theme: string) => void;
+	/** Called for status line preview while configuring - updates actual status line */
+	onStatusLinePreview?: (settings: Partial<StatusLineSettings>) => void;
+	/** Get current rendered status line for inline preview */
+	getStatusLinePreview?: () => string;
 	/** Called when plugins change */
 	onPluginsChanged?: () => void;
 	/** Called when settings panel is closed */
@@ -143,6 +170,9 @@ export class SettingsSelectorComponent extends Container {
 	private currentList: SettingsList | null = null;
 	private currentSubmenu: Container | null = null;
 	private pluginComponent: PluginSettingsComponent | null = null;
+	private statusPreviewContainer: Container | null = null;
+	private statusPreviewText: Text | null = null;
+	private currentTabId: TabId = "config";
 
 	private settingsManager: SettingsManager;
 	private context: SettingsRuntimeContext;
@@ -176,6 +206,8 @@ export class SettingsSelectorComponent extends Container {
 	}
 
 	private switchToTab(tabId: TabId): void {
+		this.currentTabId = tabId;
+
 		// Remove current content
 		if (this.currentList) {
 			this.removeChild(this.currentList);
@@ -185,6 +217,11 @@ export class SettingsSelectorComponent extends Container {
 			this.removeChild(this.pluginComponent);
 			this.pluginComponent = null;
 		}
+		if (this.statusPreviewContainer) {
+			this.removeChild(this.statusPreviewContainer);
+			this.statusPreviewContainer = null;
+			this.statusPreviewText = null;
+		}
 
 		// Remove bottom border temporarily
 		const bottomBorder = this.children[this.children.length - 1];
@@ -262,6 +299,11 @@ export class SettingsSelectorComponent extends Container {
 		currentValue: string,
 		done: (value?: string) => void,
 	): Container {
+		// Special case: segment editor
+		if (def.id === "statusLineSegments") {
+			return this.createSegmentEditor(done);
+		}
+
 		let options = def.getOptions(this.settingsManager);
 
 		// Special case: inject runtime options
@@ -274,8 +316,55 @@ export class SettingsSelectorComponent extends Container {
 			options = this.context.availableThemes.map((t) => ({ value: t, label: t }));
 		}
 
-		const onPreview = def.id === "theme" ? this.callbacks.onThemePreview : undefined;
-		const onPreviewCancel = def.id === "theme" ? () => this.callbacks.onThemePreview?.(currentValue) : undefined;
+		// Preview handlers
+		let onPreview: ((value: string) => void) | undefined;
+		let onPreviewCancel: (() => void) | undefined;
+
+		if (def.id === "theme") {
+			onPreview = this.callbacks.onThemePreview;
+			onPreviewCancel = () => this.callbacks.onThemePreview?.(currentValue);
+		} else if (def.id === "statusLinePreset") {
+			onPreview = (value) => {
+				const presetDef = getPreset((value as StatusLineSettings["preset"]) ?? "default");
+				this.callbacks.onStatusLinePreview?.({
+					preset: value as StatusLineSettings["preset"],
+					leftSegments: presetDef.leftSegments,
+					rightSegments: presetDef.rightSegments,
+					separator: presetDef.separator,
+				});
+				this.updateStatusPreview();
+			};
+			onPreviewCancel = () => {
+				const currentPreset = this.settingsManager.getStatusLinePreset();
+				const presetDef = getPreset(currentPreset);
+				this.callbacks.onStatusLinePreview?.({
+					preset: currentPreset,
+					leftSegments: presetDef.leftSegments,
+					rightSegments: presetDef.rightSegments,
+					separator: presetDef.separator,
+				});
+				this.updateStatusPreview();
+			};
+		} else if (def.id === "statusLineSeparator") {
+			onPreview = (value) => {
+				this.callbacks.onStatusLinePreview?.({
+					separator: value as StatusLineSettings["separator"],
+				});
+				this.updateStatusPreview();
+			};
+			onPreviewCancel = () => {
+				const currentSettings = this.settingsManager.getStatusLineSettings();
+				const separator =
+					currentSettings.separator ?? getPreset(this.settingsManager.getStatusLinePreset()).separator;
+				this.callbacks.onStatusLinePreview?.({
+					separator,
+				});
+				this.updateStatusPreview();
+			};
+		}
+
+		// Provide status line preview for theme selection
+		const getPreview = def.id === "theme" ? this.callbacks.getStatusLinePreview : undefined;
 
 		return new SelectSubmenu(
 			def.label,
@@ -294,9 +383,48 @@ export class SettingsSelectorComponent extends Container {
 				done();
 			},
 			onPreview,
+			getPreview,
 		);
 	}
 
+	/**
+	 * Create the segment editor component.
+	 */
+	private createSegmentEditor(done: (value?: string) => void): Container {
+		const currentSettings = this.settingsManager.getStatusLineSettings();
+		const preset = currentSettings.preset ?? "default";
+		const presetDef = getPreset(preset);
+
+		const leftSegments = currentSettings.leftSegments ?? presetDef.leftSegments;
+		const rightSegments = currentSettings.rightSegments ?? presetDef.rightSegments;
+
+		return new StatusLineSegmentEditorComponent(leftSegments, rightSegments, {
+			onSave: (left, right) => {
+				this.settingsManager.setStatusLineLeftSegments(left);
+				this.settingsManager.setStatusLineRightSegments(right);
+				this.callbacks.onChange("statusLineSegments", "saved");
+				this.callbacks.onStatusLinePreview?.({ leftSegments: left, rightSegments: right });
+				this.updateStatusPreview();
+				done("saved");
+			},
+			onCancel: () => {
+				// Restore preview to saved state
+				const saved = this.settingsManager.getStatusLineSettings();
+				const savedPreset = getPreset(saved.preset ?? "default");
+				this.callbacks.onStatusLinePreview?.({
+					leftSegments: saved.leftSegments ?? savedPreset.leftSegments,
+					rightSegments: saved.rightSegments ?? savedPreset.rightSegments,
+				});
+				this.updateStatusPreview();
+				done();
+			},
+			onPreview: (left, right) => {
+				this.callbacks.onStatusLinePreview?.({ leftSegments: left, rightSegments: right });
+				this.updateStatusPreview();
+			},
+		});
+	}
+
 	/**
 	 * Show a settings tab using definitions.
 	 */
@@ -311,6 +439,17 @@ export class SettingsSelectorComponent extends Container {
 			}
 		}
 
+		// Add status line preview for status tab
+		if (tabId === "status") {
+			this.statusPreviewContainer = new Container();
+			this.statusPreviewContainer.addChild(new Spacer(1));
+			this.statusPreviewContainer.addChild(new Text(theme.fg("muted", "Preview:"), 0, 0));
+			this.statusPreviewText = new Text(this.getStatusPreviewString(), 0, 0);
+			this.statusPreviewContainer.addChild(this.statusPreviewText);
+			this.statusPreviewContainer.addChild(new Spacer(1));
+			this.addChild(this.statusPreviewContainer);
+		}
+
 		this.currentList = new SettingsList(
 			items,
 			10,
@@ -324,6 +463,11 @@ export class SettingsSelectorComponent extends Container {
 					const boolValue = newValue === "true";
 					def.set(this.settingsManager, boolValue);
 					this.callbacks.onChange(id, boolValue);
+
+					// Trigger status line preview for status tab boolean settings
+					if (tabId === "status") {
+						this.triggerStatusLinePreview();
+					}
 				} else if (def.type === "enum") {
 					def.set(this.settingsManager, newValue);
 					this.callbacks.onChange(id, newValue);
@@ -336,6 +480,35 @@ export class SettingsSelectorComponent extends Container {
 		this.addChild(this.currentList);
 	}
 
+	/**
+	 * Get the status line preview string.
+	 */
+	private getStatusPreviewString(): string {
+		if (this.callbacks.getStatusLinePreview) {
+			return this.callbacks.getStatusLinePreview();
+		}
+		return theme.fg("dim", "(preview not available)");
+	}
+
+	/**
+	 * Trigger status line preview with current settings.
+	 */
+	private triggerStatusLinePreview(): void {
+		const settings = this.settingsManager.getStatusLineSettings();
+		this.callbacks.onStatusLinePreview?.(settings);
+		// Update inline preview
+		this.updateStatusPreview();
+	}
+
+	/**
+	 * Update the inline status preview text.
+	 */
+	private updateStatusPreview(): void {
+		if (this.statusPreviewText && this.currentTabId === "status") {
+			this.statusPreviewText.setText(this.getStatusPreviewString());
+		}
+	}
+
 	private showPluginsTab(): void {
 		this.pluginComponent = new PluginSettingsComponent(this.context.cwd, {
 			onClose: () => this.callbacks.onCancel(),

package/src/modes/interactive/components/status-line/index.ts

@@ -0,0 +1,4 @@
+export * from "./presets";
+export * from "./segments";
+export * from "./separators";
+export * from "./types";