@oh-my-pi/pi-coding-agent 5.4.2 → 5.6.7

package/src/modes/interactive/components/hook-input.ts

@@ -2,7 +2,7 @@
  * Simple text input component for hooks.
  */
 
-import { Container, Input, isEnter, isEscape, Spacer, Text, type TUI } from "@oh-my-pi/pi-tui";
+import { Container, Input, matchesKey, Spacer, Text, type TUI } from "@oh-my-pi/pi-tui";
 import { theme } from "../theme/theme";
 import { CountdownTimer } from "./countdown-timer";
 import { DynamicBorder } from "./dynamic-border";
@@ -58,9 +58,9 @@ export class HookInputComponent extends Container {
 	}
 
 	handleInput(keyData: string): void {
-		if (isEnter(keyData) || keyData === "\n") {
+		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
 			this.onSubmitCallback(this.input.getValue());
-		} else if (isEscape(keyData)) {
+		} else if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc")) {
 			this.onCancelCallback();
 		} else {
 			this.input.handleInput(keyData);

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

@@ -3,17 +3,7 @@
  * Displays a list of string options with keyboard navigation.
  */
 
-import {
-	Container,
-	isArrowDown,
-	isArrowUp,
-	isCtrlC,
-	isEnter,
-	isEscape,
-	Spacer,
-	Text,
-	type TUI,
-} from "@oh-my-pi/pi-tui";
+import { Container, matchesKey, Spacer, Text, type TUI } from "@oh-my-pi/pi-tui";
 import { theme } from "../theme/theme";
 import { CountdownTimer } from "./countdown-timer";
 import { DynamicBorder } from "./dynamic-border";
@@ -87,16 +77,16 @@ export class HookSelectorComponent extends Container {
 	}
 
 	handleInput(keyData: string): void {
-		if (isArrowUp(keyData) || keyData === "k") {
+		if (matchesKey(keyData, "up") || keyData === "k") {
 			this.selectedIndex = Math.max(0, this.selectedIndex - 1);
 			this.updateList();
-		} else if (isArrowDown(keyData) || keyData === "j") {
+		} else if (matchesKey(keyData, "down") || keyData === "j") {
 			this.selectedIndex = Math.min(this.options.length - 1, this.selectedIndex + 1);
 			this.updateList();
-		} else if (isEnter(keyData) || keyData === "\n") {
+		} else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
 			const selected = this.options[this.selectedIndex];
 			if (selected) this.onSelectCallback(selected);
-		} else if (isEscape(keyData) || isCtrlC(keyData)) {
+		} else if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc") || matchesKey(keyData, "ctrl+c")) {
 			this.onCancelCallback();
 		}
 	}

package/src/modes/interactive/components/index.ts

@@ -15,6 +15,7 @@ export { HookEditorComponent } from "./hook-editor";
 export { HookInputComponent, type HookInputOptions } from "./hook-input";
 export { HookMessageComponent } from "./hook-message";
 export { HookSelectorComponent } from "./hook-selector";
+export { appKey, appKeyHint, editorKey, keyHint, rawKeyHint } from "./keybinding-hints";
 export { LoginDialogComponent } from "./login-dialog";
 export { ModelSelectorComponent } from "./model-selector";
 export { OAuthSelectorComponent } from "./oauth-selector";

package/src/modes/interactive/components/keybinding-hints.ts

@@ -0,0 +1,66 @@
+/**
+ * Utilities for formatting keybinding hints in the UI.
+ */
+
+import { type EditorAction, getEditorKeybindings, type KeyId } from "@oh-my-pi/pi-tui";
+import type { AppAction, KeybindingsManager } from "../../../core/keybindings";
+import { theme } from "../theme/theme";
+
+/**
+ * Format keys array as display string (e.g., ["ctrl+c", "escape"] -> "ctrl+c/escape").
+ */
+function formatKeys(keys: KeyId[]): string {
+	if (keys.length === 0) return "";
+	if (keys.length === 1) return keys[0]!;
+	return keys.join("/");
+}
+
+/**
+ * Get display string for an editor action.
+ */
+export function editorKey(action: EditorAction): string {
+	return formatKeys(getEditorKeybindings().getKeys(action));
+}
+
+/**
+ * Get display string for an app action.
+ */
+export function appKey(keybindings: KeybindingsManager, action: AppAction): string {
+	return formatKeys(keybindings.getKeys(action));
+}
+
+/**
+ * Format a keybinding hint with consistent styling: dim key, muted description.
+ * Looks up the key from editor keybindings automatically.
+ *
+ * @param action - Editor action name (e.g., "selectConfirm", "expandTools")
+ * @param description - Description text (e.g., "to expand", "cancel")
+ * @returns Formatted string with dim key and muted description
+ */
+export function keyHint(action: EditorAction, description: string): string {
+	return theme.fg("dim", editorKey(action)) + theme.fg("muted", ` ${description}`);
+}
+
+/**
+ * Format a keybinding hint for app-level actions.
+ * Requires the KeybindingsManager instance.
+ *
+ * @param keybindings - KeybindingsManager instance
+ * @param action - App action name (e.g., "interrupt", "externalEditor")
+ * @param description - Description text
+ * @returns Formatted string with dim key and muted description
+ */
+export function appKeyHint(keybindings: KeybindingsManager, action: AppAction, description: string): string {
+	return theme.fg("dim", appKey(keybindings, action)) + theme.fg("muted", ` ${description}`);
+}
+
+/**
+ * Format a raw key string with description (for non-configurable keys like ↑↓).
+ *
+ * @param key - Raw key string
+ * @param description - Description text
+ * @returns Formatted string with dim key and muted description
+ */
+export function rawKeyHint(key: string, description: string): string {
+	return theme.fg("dim", key) + theme.fg("muted", ` ${description}`);
+}

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

@@ -2,16 +2,11 @@ import { type Model, modelsAreEqual } from "@oh-my-pi/pi-ai";
 import {
 	Container,
 	Input,
-	isArrowDown,
-	isArrowLeft,
-	isArrowRight,
-	isArrowUp,
-	isCtrlC,
-	isEnter,
-	isEscape,
-	isShiftTab,
-	isTab,
+	matchesKey,
 	Spacer,
+	type Tab,
+	TabBar,
+	type TabBarTheme,
 	Text,
 	type TUI,
 	visibleWidth,
@@ -20,9 +15,15 @@ import type { ModelRegistry } from "../../../core/model-registry";
 import { parseModelString } from "../../../core/model-resolver";
 import type { SettingsManager } from "../../../core/settings-manager";
 import { fuzzyFilter } from "../../../utils/fuzzy";
-import { theme } from "../theme/theme";
+import { type ThemeColor, theme } from "../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
 
+function makeInvertedBadge(label: string, color: ThemeColor): string {
+	const fgAnsi = theme.getFgAnsi(color);
+	const bgAnsi = fgAnsi.replace(/\x1b\[38;/g, "\x1b[48;");
+	return `${bgAnsi}\x1b[30m ${label} \x1b[39m\x1b[49m`;
+}
+
 interface ModelItem {
 	provider: string;
 	id: string;
@@ -49,6 +50,15 @@ const MENU_ACTIONS: MenuAction[] = [
 
 const ALL_TAB = "ALL";
 
+function getTabBarTheme(): TabBarTheme {
+	return {
+		label: (text: string) => theme.bold(theme.fg("accent", text)),
+		activeTab: (text: string) => theme.bold(theme.bg("selectedBg", theme.fg("text", text))),
+		inactiveTab: (text: string) => theme.fg("muted", text),
+		hint: (text: string) => theme.fg("dim", text),
+	};
+}
+
 /**
  * Component that renders a model selector with provider tabs and context menu.
  * - Tab/Arrow Left/Right: Switch between provider tabs
@@ -59,6 +69,7 @@ const ALL_TAB = "ALL";
 export class ModelSelectorComponent extends Container {
 	private searchInput: Input;
 	private headerContainer: Container;
+	private tabBar: TabBar | null = null;
 	private listContainer: Container;
 	private menuContainer: Container;
 	private allModels: ModelItem[] = [];
@@ -268,30 +279,15 @@ export class ModelSelectorComponent extends Container {
 	private updateTabBar(): void {
 		this.headerContainer.clear();
 
-		// Build tab bar line
-		const parts: string[] = [];
-		parts.push(theme.fg("muted", "Provider:"));
-		parts.push("  ");
-
-		for (let i = 0; i < this.providers.length; i++) {
-			const provider = this.providers[i]!;
-			const isActive = i === this.activeTabIndex;
-
-			if (isActive) {
-				parts.push(theme.fg("accent", `[ ${provider} ]`));
-			} else {
-				parts.push(theme.fg("muted", `  ${provider}  `));
-			}
-
-			if (i < this.providers.length - 1) {
-				parts.push(" ");
-			}
-		}
-
-		parts.push("  ");
-		parts.push(theme.fg("dim", `(${theme.nav.back}/${theme.nav.cursor} or Tab to switch)`));
-
-		this.headerContainer.addChild(new Text(parts.join(""), 0, 0));
+		const tabs: Tab[] = this.providers.map((provider) => ({ id: provider, label: provider }));
+		const tabBar = new TabBar("Models", tabs, getTabBarTheme(), this.activeTabIndex);
+		tabBar.onTabChange = (_tab, index) => {
+			this.activeTabIndex = index;
+			this.selectedIndex = 0;
+			this.applyTabFilter();
+		};
+		this.tabBar = tabBar;
+		this.headerContainer.addChild(tabBar);
 	}
 
 	private getActiveProvider(): string {
@@ -312,6 +308,10 @@ export class ModelSelectorComponent extends Container {
 			// If user is searching, auto-switch to ALL tab to show global results
 			if (activeProvider !== ALL_TAB) {
 				this.activeTabIndex = 0;
+				if (this.tabBar && this.tabBar.getActiveIndex() !== 0) {
+					this.tabBar.setActiveIndex(0);
+					return;
+				}
 				this.updateTabBar();
 				baseModels = this.allModels;
 			}
@@ -352,28 +352,27 @@ export class ModelSelectorComponent extends Container {
 			const isSmol = modelsAreEqual(this.smolModel, item.model);
 			const isSlow = modelsAreEqual(this.slowModel, item.model);
 
-			// Build role badges (right-aligned style)
+			// Build role badges (inverted: color as background, black text)
 			const badges: string[] = [];
-			if (isDefault) badges.push(theme.fg("success", `${theme.sep.pipe}DEFAULT${theme.sep.pipe}`));
-			if (isSmol) badges.push(theme.fg("warning", `${theme.sep.pipe}SMOL${theme.sep.pipe}`));
-			if (isSlow) badges.push(theme.fg("accent", `${theme.sep.pipe}SLOW${theme.sep.pipe}`));
+			if (isDefault) badges.push(makeInvertedBadge("DEFAULT", "success"));
+			if (isSmol) badges.push(makeInvertedBadge("SMOL", "warning"));
+			if (isSlow) badges.push(makeInvertedBadge("SLOW", "accent"));
 			const badgeText = badges.length > 0 ? ` ${badges.join(" ")}` : "";
 
 			let line = "";
 			if (isSelected) {
 				const prefix = theme.fg("accent", `${theme.nav.cursor} `);
-				const modelText = item.id;
 				if (showProvider) {
-					const providerBadge = theme.fg("muted", `[${item.provider}]`);
-					line = `${prefix}${theme.fg("accent", modelText)} ${providerBadge}${badgeText}`;
+					const providerPrefix = theme.fg("dim", `${item.provider}/`);
+					line = `${prefix}${providerPrefix}${theme.fg("accent", item.id)}${badgeText}`;
 				} else {
-					line = `${prefix}${theme.fg("accent", modelText)}${badgeText}`;
+					line = `${prefix}${theme.fg("accent", item.id)}${badgeText}`;
 				}
 			} else {
 				const prefix = "  ";
 				if (showProvider) {
-					const providerBadge = theme.fg("muted", `[${item.provider}]`);
-					line = `${prefix}${item.id} ${providerBadge}${badgeText}`;
+					const providerPrefix = theme.fg("dim", `${item.provider}/`);
+					line = `${prefix}${providerPrefix}${item.id}${badgeText}`;
 				} else {
 					line = `${prefix}${item.id}${badgeText}`;
 				}
@@ -461,25 +460,13 @@ export class ModelSelectorComponent extends Container {
 			return;
 		}
 
-		// Tab bar navigation: Left/Right arrows or Tab/Shift+Tab
-		if (isArrowLeft(keyData) || isShiftTab(keyData)) {
-			this.activeTabIndex = (this.activeTabIndex - 1 + this.providers.length) % this.providers.length;
-			this.updateTabBar();
-			this.selectedIndex = 0;
-			this.applyTabFilter();
-			return;
-		}
-
-		if (isArrowRight(keyData) || isTab(keyData)) {
-			this.activeTabIndex = (this.activeTabIndex + 1) % this.providers.length;
-			this.updateTabBar();
-			this.selectedIndex = 0;
-			this.applyTabFilter();
+		// Tab bar navigation
+		if (this.tabBar?.handleInput(keyData)) {
 			return;
 		}
 
 		// Up arrow - navigate list (wrap to bottom when at top)
-		if (isArrowUp(keyData)) {
+		if (matchesKey(keyData, "up")) {
 			if (this.filteredModels.length === 0) return;
 			this.selectedIndex = this.selectedIndex === 0 ? this.filteredModels.length - 1 : this.selectedIndex - 1;
 			this.updateList();
@@ -487,7 +474,7 @@ export class ModelSelectorComponent extends Container {
 		}
 
 		// Down arrow - navigate list (wrap to top when at bottom)
-		if (isArrowDown(keyData)) {
+		if (matchesKey(keyData, "down")) {
 			if (this.filteredModels.length === 0) return;
 			this.selectedIndex = this.selectedIndex === this.filteredModels.length - 1 ? 0 : this.selectedIndex + 1;
 			this.updateList();
@@ -495,7 +482,7 @@ export class ModelSelectorComponent extends Container {
 		}
 
 		// Enter - open context menu or select directly in temporary mode
-		if (isEnter(keyData)) {
+		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
 			const selectedModel = this.filteredModels[this.selectedIndex];
 			if (selectedModel) {
 				if (this.temporaryOnly) {
@@ -509,7 +496,7 @@ export class ModelSelectorComponent extends Container {
 		}
 
 		// Escape or Ctrl+C - close selector
-		if (isEscape(keyData) || isCtrlC(keyData)) {
+		if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc") || matchesKey(keyData, "ctrl+c")) {
 			this.onCancelCallback();
 			return;
 		}
@@ -521,21 +508,21 @@ export class ModelSelectorComponent extends Container {
 
 	private handleMenuInput(keyData: string): void {
 		// Up arrow - navigate menu
-		if (isArrowUp(keyData)) {
+		if (matchesKey(keyData, "up")) {
 			this.menuSelectedIndex = (this.menuSelectedIndex - 1 + MENU_ACTIONS.length) % MENU_ACTIONS.length;
 			this.updateMenu();
 			return;
 		}
 
 		// Down arrow - navigate menu
-		if (isArrowDown(keyData)) {
+		if (matchesKey(keyData, "down")) {
 			this.menuSelectedIndex = (this.menuSelectedIndex + 1) % MENU_ACTIONS.length;
 			this.updateMenu();
 			return;
 		}
 
 		// Enter - confirm selection
-		if (isEnter(keyData)) {
+		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
 			const selectedModel = this.filteredModels[this.selectedIndex];
 			const action = MENU_ACTIONS[this.menuSelectedIndex];
 			if (selectedModel && action) {
@@ -546,7 +533,7 @@ export class ModelSelectorComponent extends Container {
 		}
 
 		// Escape or Ctrl+C - close menu only
-		if (isEscape(keyData) || isCtrlC(keyData)) {
+		if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc") || matchesKey(keyData, "ctrl+c")) {
 			this.closeMenu();
 			return;
 		}

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

@@ -1,5 +1,5 @@
 import { getOAuthProviders, type OAuthProviderInfo } from "@oh-my-pi/pi-ai";
-import { Container, isArrowDown, isArrowUp, isCtrlC, isEnter, isEscape, Spacer, TruncatedText } from "@oh-my-pi/pi-tui";
+import { Container, matchesKey, Spacer, TruncatedText } from "@oh-my-pi/pi-tui";
 import type { AuthStorage } from "../../../core/auth-storage";
 import { theme } from "../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
@@ -101,7 +101,7 @@ export class OAuthSelectorComponent extends Container {
 
 	handleInput(keyData: string): void {
 		// Up arrow
-		if (isArrowUp(keyData)) {
+		if (matchesKey(keyData, "up")) {
 			if (this.allProviders.length > 0) {
 				this.selectedIndex = this.selectedIndex === 0 ? this.allProviders.length - 1 : this.selectedIndex - 1;
 			}
@@ -109,7 +109,7 @@ export class OAuthSelectorComponent extends Container {
 			this.updateList();
 		}
 		// Down arrow
-		else if (isArrowDown(keyData)) {
+		else if (matchesKey(keyData, "down")) {
 			if (this.allProviders.length > 0) {
 				this.selectedIndex = this.selectedIndex === this.allProviders.length - 1 ? 0 : this.selectedIndex + 1;
 			}
@@ -117,7 +117,7 @@ export class OAuthSelectorComponent extends Container {
 			this.updateList();
 		}
 		// Enter
-		else if (isEnter(keyData)) {
+		else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
 			const selectedProvider = this.allProviders[this.selectedIndex];
 			if (selectedProvider?.available) {
 				this.statusMessage = undefined;
@@ -128,7 +128,7 @@ export class OAuthSelectorComponent extends Container {
 			}
 		}
 		// Escape or Ctrl+C
-		else if (isEscape(keyData) || isCtrlC(keyData)) {
+		else if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc") || matchesKey(keyData, "ctrl+c")) {
 			this.onCancelCallback();
 		}
 	}

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

@@ -2,13 +2,7 @@ import {
 	type Component,
 	Container,
 	Input,
-	isArrowDown,
-	isArrowUp,
-	isCtrlC,
-	isEnter,
-	isEscape,
-	isPageDown,
-	isPageUp,
+	matchesKey,
 	Spacer,
 	Text,
 	truncateToWidth,
@@ -51,11 +45,17 @@ class SessionList implements Component {
 	}
 
 	private filterSessions(query: string): void {
-		this.filteredSessions = fuzzyFilter(
-			this.allSessions,
-			query,
-			(session) => `${session.id} ${session.allMessagesText}`,
-		);
+		this.filteredSessions = fuzzyFilter(this.allSessions, query, (session) => {
+			const parts = [
+				session.id,
+				session.title ?? "",
+				session.cwd ?? "",
+				session.firstMessage ?? "",
+				session.allMessagesText,
+				session.path,
+			];
+			return parts.filter(Boolean).join(" ");
+		});
 		this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.filteredSessions.length - 1));
 	}
 
@@ -73,10 +73,16 @@ class SessionList implements Component {
 		if (this.filteredSessions.length === 0) {
 			if (this.showCwd) {
 				// "All" scope - no sessions anywhere that match filter
-				lines.push(theme.fg("muted", "  No sessions found"));
+				lines.push(truncateToWidth(theme.fg("muted", "  No sessions found"), width, theme.format.ellipsis));
 			} else {
 				// "Current folder" scope - hint to try "all"
-				lines.push(theme.fg("muted", "  No sessions in current folder. Press Tab to view all."));
+				lines.push(
+					truncateToWidth(
+						theme.fg("muted", "  No sessions in current folder. Press Tab to view all."),
+						width,
+						theme.format.ellipsis,
+					),
+				);
 			}
 			return lines;
 		}
@@ -139,7 +145,7 @@ class SessionList implements Component {
 			const modified = formatDate(session.modified);
 			const msgCount = `${session.messageCount} message${session.messageCount !== 1 ? "s" : ""}`;
 			const metadata = `  ${modified} ${theme.sep.dot} ${msgCount}`;
-			const metadataLine = theme.fg("dim", truncateToWidth(metadata, width, ""));
+			const metadataLine = theme.fg("dim", truncateToWidth(metadata, width, theme.format.ellipsis));
 
 			lines.push(metadataLine);
 			lines.push(""); // Blank line between sessions
@@ -148,7 +154,7 @@ class SessionList implements Component {
 		// Add scroll indicator if needed
 		if (startIndex > 0 || endIndex < this.filteredSessions.length) {
 			const scrollText = `  (${this.selectedIndex + 1}/${this.filteredSessions.length})`;
-			const scrollInfo = theme.fg("muted", truncateToWidth(scrollText, width, ""));
+			const scrollInfo = theme.fg("muted", truncateToWidth(scrollText, width, theme.format.ellipsis));
 			lines.push(scrollInfo);
 		}
 
@@ -157,36 +163,36 @@ class SessionList implements Component {
 
 	handleInput(keyData: string): void {
 		// Up arrow
-		if (isArrowUp(keyData)) {
+		if (matchesKey(keyData, "up")) {
 			this.selectedIndex = Math.max(0, this.selectedIndex - 1);
 		}
 		// Down arrow
-		else if (isArrowDown(keyData)) {
+		else if (matchesKey(keyData, "down")) {
 			this.selectedIndex = Math.min(this.filteredSessions.length - 1, this.selectedIndex + 1);
 		}
 		// Page up - jump up by maxVisible items
-		else if (isPageUp(keyData)) {
+		else if (matchesKey(keyData, "pageUp")) {
 			this.selectedIndex = Math.max(0, this.selectedIndex - this.maxVisible);
 		}
 		// Page down - jump down by maxVisible items
-		else if (isPageDown(keyData)) {
+		else if (matchesKey(keyData, "pageDown")) {
 			this.selectedIndex = Math.min(this.filteredSessions.length - 1, this.selectedIndex + this.maxVisible);
 		}
 		// Enter
-		else if (isEnter(keyData)) {
+		else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
 			const selected = this.filteredSessions[this.selectedIndex];
 			if (selected && this.onSelect) {
 				this.onSelect(selected.path);
 			}
 		}
 		// Escape - cancel
-		else if (isEscape(keyData)) {
+		else if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc")) {
 			if (this.onCancel) {
 				this.onCancel();
 			}
 		}
 		// Ctrl+C - exit
-		else if (isCtrlC(keyData)) {
+		else if (matchesKey(keyData, "ctrl+c")) {
 			this.onExit();
 		}
 		// Pass everything else to search input