@oh-my-pi/pi-coding-agent 15.7.5 → 15.8.0

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

@@ -7,6 +7,7 @@ import {
 	extractPrintableText,
 	fuzzyFilter,
 	Markdown,
+	type MarkdownTheme,
 	matchesKey,
 	padding,
 	renderInlineMarkdown,
@@ -14,8 +15,8 @@ import {
 	Spacer,
 	Text,
 	type TUI,
-	truncateToWidth,
 	visibleWidth,
+	wrapTextWithAnsi,
 } from "@oh-my-pi/pi-tui";
 import { getMarkdownTheme, type ThemeColor, theme } from "../../modes/theme/theme";
 import {
@@ -67,6 +68,37 @@ export interface HookSelectorOptions {
 	onExternalEditor?: () => void;
 	helpText?: string;
 	slider?: HookSelectorSlider;
+	/** Indices into the original options that cannot be selected: they render
+	 *  dimmed, are skipped during navigation, and reject enter/timeout. */
+	disabledIndices?: readonly number[];
+}
+
+export interface HookSelectorOption {
+	label: string;
+	description?: string;
+}
+
+export type HookSelectorOptionInput = string | HookSelectorOption;
+
+function normalizeHookSelectorOption(option: HookSelectorOptionInput): HookSelectorOption {
+	if (typeof option === "string") return { label: option };
+	if (option.description?.trim()) {
+		return { label: option.label, description: option.description.trim() };
+	}
+	return { label: option.label };
+}
+
+function splitLeadingSpacesForWrap(line: string, width: number): { indent: string; body: string } {
+	let indentLength = 0;
+	while (indentLength < line.length && line.charCodeAt(indentLength) === 32) {
+		indentLength += 1;
+	}
+	const maxIndentLength = Math.max(0, width - 1);
+	const clampedIndentLength = Math.min(indentLength, maxIndentLength);
+	return {
+		indent: line.slice(0, clampedIndentLength),
+		body: line.slice(indentLength),
+	};
 }
 
 class OutlinedList extends Container {
@@ -81,21 +113,33 @@ class OutlinedList extends Container {
 		const borderColor = (text: string) => theme.fg("border", text);
 		const horizontal = borderColor(theme.boxSharp.horizontal.repeat(Math.max(1, width)));
 		const innerWidth = Math.max(1, width - 2);
-		const content = this.#lines.map(line => {
+		const content: string[] = [];
+		for (const line of this.#lines) {
 			const normalized = replaceTabs(line);
-			const fitted = truncateToWidth(normalized, innerWidth);
-			const pad = Math.max(0, innerWidth - visibleWidth(fitted));
-			return `${borderColor(theme.boxSharp.vertical)}${fitted}${padding(pad)}${borderColor(theme.boxSharp.vertical)}`;
-		});
+			const { indent, body } = splitLeadingSpacesForWrap(normalized, innerWidth);
+			const wrapped = wrapTextWithAnsi(body, Math.max(1, innerWidth - visibleWidth(indent)));
+			for (const wrappedBody of wrapped.length > 0 ? wrapped : [""]) {
+				const wrappedLine = `${indent}${wrappedBody}`;
+				const pad = Math.max(0, innerWidth - visibleWidth(wrappedLine));
+				content.push(
+					`${borderColor(theme.boxSharp.vertical)}${wrappedLine}${padding(pad)}${borderColor(theme.boxSharp.vertical)}`,
+				);
+			}
+		}
 		return [horizontal, ...content, horizontal];
 	}
 }
 
+/** A filtered option paired with its index into the original options array, so
+ *  disabled-index lookups survive fuzzy filtering and reordering. */
+type FilteredOption = { option: HookSelectorOption; index: number };
+
 export class HookSelectorComponent extends Container {
-	#options: string[];
-	#filteredOptions: string[];
+	#options: HookSelectorOption[];
+	#filteredOptions: FilteredOption[];
 	#searchQuery = "";
 	#selectedIndex: number;
+	#disabledIndices: Set<number>;
 	#maxVisible: number;
 	#listContainer: Container | undefined;
 	#outlinedList: OutlinedList | undefined;
@@ -110,18 +154,24 @@ export class HookSelectorComponent extends Container {
 	#slider: HookSelectorSlider | undefined;
 	#sliderIndex: number = 0;
 	#sliderComponent: Text | undefined;
+	#lastRenderWidth: number | undefined;
 	constructor(
 		title: string,
-		options: string[],
+		options: HookSelectorOptionInput[],
 		onSelect: (option: string) => void,
 		onCancel: () => void,
 		opts?: HookSelectorOptions,
 	) {
 		super();
 
-		this.#options = options;
-		this.#filteredOptions = options;
-		this.#selectedIndex = Math.min(opts?.initialIndex ?? 0, this.#filteredOptions.length - 1);
+		this.#options = options.map(normalizeHookSelectorOption);
+		this.#filteredOptions = this.#options.map((option, index) => ({ option, index }));
+		this.#disabledIndices = new Set(
+			(opts?.disabledIndices ?? []).filter(
+				index => Number.isInteger(index) && index >= 0 && index < this.#options.length,
+			),
+		);
+		this.#selectedIndex = this.#coerceSelectedIndex(opts?.initialIndex ?? 0);
 		this.#maxVisible = Math.max(3, opts?.maxVisible ?? 12);
 		this.#onSelectCallback = onSelect;
 		this.#onCancelCallback = onCancel;
@@ -154,9 +204,10 @@ export class HookSelectorComponent extends Container {
 				s => this.#titleComponent.setText(`${this.#baseTitle} (${s}s)`),
 				() => {
 					opts?.onTimeout?.();
+					// Auto-select current option on timeout (typically the first/recommended option)
 					const selected = this.#filteredOptions[this.#selectedIndex];
-					if (selected) {
-						this.#onSelectCallback(selected);
+					if (selected && !this.#isDisabled(selected.index)) {
+						this.#onSelectCallback(selected.option.label);
 					} else {
 						this.#onCancelCallback();
 					}
@@ -180,32 +231,160 @@ export class HookSelectorComponent extends Container {
 		this.#updateList();
 	}
 
-	#updateList(): void {
+	#isDisabled(index: number): boolean {
+		return this.#disabledIndices.has(index);
+	}
+
+	/** Clamp `index` into range, then walk forward (and finally backward) to the
+	 *  nearest enabled option so the cursor never lands on a disabled row. */
+	#coerceSelectedIndex(index: number): number {
+		if (this.#filteredOptions.length === 0) return -1;
+		const maxIndex = this.#filteredOptions.length - 1;
+		const clamped = Math.max(0, Math.min(index, maxIndex));
+		const clampedOption = this.#filteredOptions[clamped];
+		if (clampedOption && !this.#isDisabled(clampedOption.index)) return clamped;
+		for (let i = clamped + 1; i <= maxIndex; i++) {
+			const option = this.#filteredOptions[i];
+			if (option && !this.#isDisabled(option.index)) return i;
+		}
+		for (let i = clamped - 1; i >= 0; i--) {
+			const option = this.#filteredOptions[i];
+			if (option && !this.#isDisabled(option.index)) return i;
+		}
+		return clamped;
+	}
+
+	/** Move the cursor by `delta`, skipping disabled rows, stopping at the first
+	 *  enabled option reached or at the list edge. */
+	#moveSelection(delta: number): void {
+		if (this.#filteredOptions.length === 0) return;
+		const maxIndex = this.#filteredOptions.length - 1;
+		let index = this.#selectedIndex;
+		while (true) {
+			const next = Math.max(0, Math.min(index + delta, maxIndex));
+			if (next === index) return;
+			index = next;
+			const option = this.#filteredOptions[index];
+			if (option && !this.#isDisabled(option.index)) {
+				this.#selectedIndex = index;
+				this.#updateList();
+				return;
+			}
+		}
+	}
+
+	#renderOptionLines(
+		option: HookSelectorOption,
+		isSelected: boolean,
+		isDisabled: boolean,
+		mdTheme: MarkdownTheme,
+	): string[] {
+		const textColor = isDisabled ? "dim" : isSelected ? "accent" : "text";
+		const prefixColor = isDisabled ? "dim" : "accent";
+		const label = renderInlineMarkdown(option.label, mdTheme, t => theme.fg(textColor, t));
+		const prefix = isSelected ? theme.fg(prefixColor, `${theme.nav.cursor} `) : "  ";
+		const lines = [prefix + label];
+		if (option.description) {
+			const descriptionColor = isDisabled ? "dim" : "muted";
+			const description = renderInlineMarkdown(option.description, mdTheme, t => theme.fg(descriptionColor, t));
+			lines.push(`    ${description}`);
+		}
+		return lines;
+	}
+
+	#renderedLineRowCount(line: string, renderWidth: number): number {
+		const normalized = replaceTabs(line);
+		if (this.#outlinedList) {
+			const innerWidth = Math.max(1, renderWidth - 2);
+			const { indent, body } = splitLeadingSpacesForWrap(normalized, innerWidth);
+			const wrapped = wrapTextWithAnsi(body, Math.max(1, innerWidth - visibleWidth(indent)));
+			return Math.max(1, wrapped.length);
+		}
+		const wrapped = wrapTextWithAnsi(normalized, Math.max(1, renderWidth - 2));
+		return Math.max(1, wrapped.length);
+	}
+
+	#optionRowCount(
+		option: HookSelectorOption,
+		renderWidth: number | undefined,
+		isSelected: boolean,
+		mdTheme: MarkdownTheme,
+	): number {
+		if (renderWidth === undefined) return option.description ? 2 : 1;
+		let rows = 0;
+		for (const line of this.#renderOptionLines(option, isSelected, false, mdTheme)) {
+			rows += this.#renderedLineRowCount(line, renderWidth);
+		}
+		return rows;
+	}
+
+	#totalOptionRows(options: HookSelectorOption[], renderWidth?: number, mdTheme?: MarkdownTheme): number {
+		const themeForRows = mdTheme ?? getMarkdownTheme();
+		let rows = 0;
+		for (const option of options) {
+			rows += this.#optionRowCount(option, renderWidth, false, themeForRows);
+		}
+		return rows;
+	}
+
+	#getVisibleOptionRange(
+		total: number,
+		renderWidth?: number,
+		mdTheme: MarkdownTheme = getMarkdownTheme(),
+	): { startIndex: number; endIndex: number } {
+		if (total === 0) return { startIndex: 0, endIndex: 0 };
+
+		const rowBudget = Math.max(1, this.#maxVisible);
+		const selectedIndex = Math.max(0, Math.min(this.#selectedIndex, total - 1));
+		let startIndex = selectedIndex;
+		let endIndex = selectedIndex + 1;
+		let rows = this.#optionRowCount(this.#filteredOptions[selectedIndex]!.option, renderWidth, true, mdTheme);
+		let beforeRows = 0;
+		const targetBeforeRows = Math.max(0, Math.floor((rowBudget - rows) / 2));
+
+		while (startIndex > 0) {
+			const cost = this.#optionRowCount(this.#filteredOptions[startIndex - 1]!.option, renderWidth, false, mdTheme);
+			if (beforeRows + cost > targetBeforeRows || rows + cost > rowBudget) break;
+			startIndex--;
+			beforeRows += cost;
+			rows += cost;
+		}
+
+		while (endIndex < total) {
+			const cost = this.#optionRowCount(this.#filteredOptions[endIndex]!.option, renderWidth, false, mdTheme);
+			if (rows + cost > rowBudget) break;
+			endIndex++;
+			rows += cost;
+		}
+
+		while (startIndex > 0) {
+			const cost = this.#optionRowCount(this.#filteredOptions[startIndex - 1]!.option, renderWidth, false, mdTheme);
+			if (rows + cost > rowBudget) break;
+			startIndex--;
+			rows += cost;
+		}
+
+		return { startIndex, endIndex };
+	}
+
+	#updateList(renderWidth = this.#lastRenderWidth): void {
 		const lines: string[] = [];
 		const total = this.#filteredOptions.length;
-		const startIndex = Math.max(
-			0,
-			Math.min(this.#selectedIndex - Math.floor(this.#maxVisible / 2), total - this.#maxVisible),
-		);
-		const endIndex = Math.min(startIndex + this.#maxVisible, total);
-
 		const mdTheme = getMarkdownTheme();
+		const { startIndex, endIndex } = this.#getVisibleOptionRange(total, renderWidth, mdTheme);
+
 		for (let i = startIndex; i < endIndex; i++) {
-			const option = this.#filteredOptions[i];
-			if (option === undefined) continue;
+			const filtered = this.#filteredOptions[i];
+			if (filtered === undefined) continue;
 			const isSelected = i === this.#selectedIndex;
-			const label = isSelected
-				? renderInlineMarkdown(option, mdTheme, t => theme.fg("accent", t))
-				: renderInlineMarkdown(option, mdTheme, t => theme.fg("text", t));
-			const prefix = isSelected ? theme.fg("accent", `${theme.nav.cursor} `) : "  ";
-			lines.push(prefix + label);
+			lines.push(...this.#renderOptionLines(filtered.option, isSelected, this.#isDisabled(filtered.index), mdTheme));
 		}
 
 		if (total === 0) {
 			lines.push(theme.fg("dim", "  No matching options"));
 		}
 
-		if (startIndex > 0 || endIndex < total || this.#shouldRenderSearchStatus()) {
+		if (startIndex > 0 || endIndex < total || this.#shouldRenderSearchStatus(renderWidth, mdTheme)) {
 			lines.push(this.#renderStatusLine(total));
 		}
 		if (this.#outlinedList) {
@@ -253,12 +432,12 @@ export class HookSelectorComponent extends Container {
 		slider.onChange?.(next);
 	}
 
-	#isSearchEnabled(): boolean {
-		return this.#options.length > this.#maxVisible;
+	#isSearchEnabled(renderWidth = this.#lastRenderWidth, mdTheme?: MarkdownTheme): boolean {
+		return this.#totalOptionRows(this.#options, renderWidth, mdTheme) > this.#maxVisible;
 	}
 
-	#shouldRenderSearchStatus(): boolean {
-		return this.#isSearchEnabled() || this.#searchQuery.length > 0;
+	#shouldRenderSearchStatus(renderWidth = this.#lastRenderWidth, mdTheme?: MarkdownTheme): boolean {
+		return this.#isSearchEnabled(renderWidth, mdTheme) || this.#searchQuery.length > 0;
 	}
 
 	#renderStatusLine(total: number): string {
@@ -273,8 +452,11 @@ export class HookSelectorComponent extends Container {
 
 	#setSearchQuery(query: string): void {
 		this.#searchQuery = query;
-		this.#filteredOptions = query.trim() ? fuzzyFilter(this.#options, query, option => option) : this.#options;
-		this.#selectedIndex = 0;
+		const indexedOptions = this.#options.map((option, index) => ({ option, index }));
+		this.#filteredOptions = query.trim()
+			? fuzzyFilter(indexedOptions, query, item => `${item.option.label} ${item.option.description ?? ""}`)
+			: indexedOptions;
+		this.#selectedIndex = this.#coerceSelectedIndex(0);
 		this.#updateList();
 	}
 
@@ -311,18 +493,12 @@ export class HookSelectorComponent extends Container {
 		}
 
 		if (matchesSelectUp(keyData) || (!this.#isSearchEnabled() && keyData === "k")) {
-			if (this.#filteredOptions.length > 0) {
-				this.#selectedIndex = Math.max(0, this.#selectedIndex - 1);
-				this.#updateList();
-			}
+			this.#moveSelection(-1);
 		} else if (matchesSelectDown(keyData) || (!this.#isSearchEnabled() && keyData === "j")) {
-			if (this.#filteredOptions.length > 0) {
-				this.#selectedIndex = Math.min(this.#filteredOptions.length - 1, this.#selectedIndex + 1);
-				this.#updateList();
-			}
+			this.#moveSelection(1);
 		} else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
 			const selected = this.#filteredOptions[this.#selectedIndex];
-			if (selected) this.#onSelectCallback(selected);
+			if (selected && !this.#isDisabled(selected.index)) this.#onSelectCallback(selected.option.label);
 		} else if (matchesKey(keyData, "left") || (this.#slider && !this.#isSearchEnabled() && keyData === "h")) {
 			if (this.#slider) this.#moveSlider(-1);
 			else this.#onLeftCallback?.();
@@ -334,6 +510,15 @@ export class HookSelectorComponent extends Container {
 		}
 	}
 
+	override render(width: number): string[] {
+		const renderWidth = Math.max(1, width);
+		if (this.#lastRenderWidth !== renderWidth) {
+			this.#lastRenderWidth = renderWidth;
+			this.#updateList(renderWidth);
+		}
+		return super.render(renderWidth);
+	}
+
 	dispose(): void {
 		this.#countdown?.dispose();
 	}

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

@@ -67,8 +67,14 @@ export class OAuthSelectorComponent extends Container {
 		this.#validationGeneration += 1;
 		this.#stopSpinner();
 	}
+	#hasSelectableAuth(providerId: string): boolean {
+		return this.#mode === "logout" ? this.#authStorage.has(providerId) : this.#authStorage.hasAuth(providerId);
+	}
+
 	#loadProviders(): void {
-		this.#allProviders = getOAuthProviders();
+		const providers = getOAuthProviders();
+		this.#allProviders =
+			this.#mode === "logout" ? providers.filter(provider => this.#hasSelectableAuth(provider.id)) : providers;
 		this.#filteredProviders = this.#allProviders;
 	}
 
@@ -79,7 +85,7 @@ export class OAuthSelectorComponent extends Container {
 
 		let pending = 0;
 		for (const provider of this.#allProviders) {
-			if (!this.#authStorage.hasAuth(provider.id)) {
+			if (!this.#hasSelectableAuth(provider.id)) {
 				this.#authState.delete(provider.id);
 				continue;
 			}
@@ -145,8 +151,9 @@ export class OAuthSelectorComponent extends Container {
 		if (state === "valid") {
 			return theme.fg("success", ` ${theme.status.success} logged in`);
 		}
-		return this.#authStorage.hasAuth(providerId) ? theme.fg("success", ` ${theme.status.success} logged in`) : "";
+		return this.#hasSelectableAuth(providerId) ? theme.fg("success", ` ${theme.status.success} logged in`) : "";
 	}
+
 	#isSearchEnabled(): boolean {
 		return this.#allProviders.length > OAUTH_SELECTOR_MAX_VISIBLE;
 	}
@@ -167,7 +174,7 @@ export class OAuthSelectorComponent extends Container {
 
 	#getProviderSearchText(provider: OAuthProviderInfo): string {
 		let text = `${provider.name} ${provider.id}`;
-		if (this.#authStorage.hasAuth(provider.id)) {
+		if (this.#hasSelectableAuth(provider.id)) {
 			text += " logged in authenticated";
 		}
 		if (!provider.available) {
@@ -240,13 +247,12 @@ export class OAuthSelectorComponent extends Container {
 			this.#listContainer.addChild(new TruncatedText(this.#renderStatusLine(total), 0, 0));
 		}
 
-		// Show "no providers" if empty
 		if (total === 0) {
 			const message =
 				this.#allProviders.length === 0
 					? this.#mode === "login"
 						? "No OAuth providers available"
-						: "No OAuth providers logged in. Use /login first."
+						: "No stored provider credentials to log out"
 					: "No matching providers";
 			this.#listContainer.addChild(new TruncatedText(theme.fg("muted", `  ${message}`), 0, 0));
 		}