@gajae-code/coding-agent 0.11.11 → 0.12.1

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

@@ -1,6 +1,8 @@
 import { getOAuthProviders } from "@gajae-code/ai/utils/oauth";
 import type { OAuthProviderInfo } from "@gajae-code/ai/utils/oauth/types";
-import { Container, matchesKey, Spacer, TruncatedText } from "@gajae-code/tui";
+import { Container, fuzzyFilter, Input, matchesKey, Spacer, TruncatedText } from "@gajae-code/tui";
+import { recordProviderAuthHealth } from "../../config/provider-auth-health";
+import { compareRankedProviders, type ProviderAuthState } from "../../config/provider-ranking";
 import { theme } from "../../modes/theme/theme";
 import { matchesSelectCancel } from "../../modes/utils/keybinding-matchers";
 import type { AuthStorage } from "../../session/auth-storage";
@@ -14,6 +16,9 @@ const OAUTH_SELECTOR_MAX_VISIBLE = 10;
 export class OAuthSelectorComponent extends Container {
 	#listContainer: Container;
 	#allProviders: OAuthProviderInfo[] = [];
+	#sortedProviders: OAuthProviderInfo[] = [];
+	#filteredProviders: OAuthProviderInfo[] = [];
+	#searchInput: Input;
 	#selectedIndex: number = 0;
 	#mode: "login" | "logout";
 	#authStorage: AuthStorage;
@@ -54,6 +59,14 @@ export class OAuthSelectorComponent extends Container {
 		const title = mode === "login" ? "Select provider to login:" : "Select provider to logout:";
 		this.addChild(new TruncatedText(theme.bold(title)));
 		this.addChild(new Spacer(1));
+		// Filter box: the provider list is long enough that arrow-key-only
+		// navigation buries entries below the visible window.
+		this.#searchInput = new Input();
+		this.#searchInput.onSubmit = () => {
+			this.#selectCurrentProvider();
+		};
+		this.addChild(this.#searchInput);
+		this.addChild(new Spacer(1));
 		// Create list container
 		this.#listContainer = new Container();
 		this.addChild(this.#listContainer);
@@ -91,7 +104,7 @@ export class OAuthSelectorComponent extends Container {
 			}
 			this.#authState.set(provider.id, "checking");
 			pending += 1;
-			void this.#validateProvider(provider.id, generation);
+			void this.#validateProvider(provider.id, generation, this.#authStorage.getGeneration());
 		}
 
 		if (pending > 0) {
@@ -101,7 +114,7 @@ export class OAuthSelectorComponent extends Container {
 		}
 	}
 
-	async #validateProvider(providerId: string, generation: number): Promise<void> {
+	async #validateProvider(providerId: string, generation: number, authGeneration: number): Promise<void> {
 		if (!this.#validateAuthCallback) return;
 		let isValid = false;
 		try {
@@ -112,6 +125,11 @@ export class OAuthSelectorComponent extends Container {
 
 		if (generation !== this.#validationGeneration) return;
 		this.#authState.set(providerId, isValid ? "valid" : "invalid");
+		// Only record the ordering hint when the credentials validated are still the
+		// current ones; a result from a superseded generation must not describe them.
+		if (authGeneration === this.#authStorage.getGeneration()) {
+			recordProviderAuthHealth(this.#authStorage, providerId, isValid ? "valid" : "invalid");
+		}
 		if (![...this.#authState.values()].includes("checking")) {
 			this.#stopSpinner();
 		}
@@ -138,6 +156,10 @@ export class OAuthSelectorComponent extends Container {
 		}
 	}
 
+	#getProviderAuthState(providerId: string): ProviderAuthState {
+		return this.#authState.get(providerId) ?? "none";
+	}
+
 	#getStatusIndicator(providerId: string): string {
 		const state = this.#authState.get(providerId);
 		if (state === "checking") {
@@ -154,9 +176,32 @@ export class OAuthSelectorComponent extends Container {
 		return this.#authStorage.hasAuth(providerId) ? theme.fg("success", ` ${theme.status.success} logged in`) : "";
 	}
 	#updateList(): void {
+		const selectedProviderId = this.#filteredProviders[this.#selectedIndex]?.id;
+		const rankedProviders = this.#allProviders.map(provider => ({
+			provider,
+			id: provider.id,
+			label: provider.name,
+			authState: this.#getProviderAuthState(provider.id),
+		}));
+		rankedProviders.sort(compareRankedProviders);
+		this.#sortedProviders = rankedProviders.map(({ provider }) => provider);
+		// Filter after ranking so an empty query preserves the curated order and a
+		// query still surfaces matches in that same order of preference.
+		this.#filteredProviders = fuzzyFilter(
+			this.#sortedProviders,
+			this.#searchInput.getValue(),
+			provider => `${provider.name} ${provider.id}`,
+		);
+		if (selectedProviderId !== undefined) {
+			const selectedIndex = this.#filteredProviders.findIndex(provider => provider.id === selectedProviderId);
+			if (selectedIndex >= 0) this.#selectedIndex = selectedIndex;
+		}
+		if (this.#selectedIndex >= this.#filteredProviders.length) {
+			this.#selectedIndex = Math.max(0, this.#filteredProviders.length - 1);
+		}
 		this.#listContainer.clear();
 
-		const total = this.#allProviders.length;
+		const total = this.#filteredProviders.length;
 		const maxVisible = OAUTH_SELECTOR_MAX_VISIBLE;
 		const startIndex =
 			total <= maxVisible
@@ -165,7 +210,7 @@ export class OAuthSelectorComponent extends Container {
 		const endIndex = Math.min(startIndex + maxVisible, total);
 
 		for (let i = startIndex; i < endIndex; i++) {
-			const provider = this.#allProviders[i];
+			const provider = this.#filteredProviders[i];
 			if (!provider) continue;
 			const isSelected = i === this.#selectedIndex;
 			const isAvailable = provider.available;
@@ -191,8 +236,11 @@ export class OAuthSelectorComponent extends Container {
 
 		// Show "no providers" if empty
 		if (total === 0) {
-			const message =
-				this.#mode === "login" ? "No OAuth providers available" : "No OAuth providers logged in. Use /login first.";
+			const message = this.#searchInput.getValue().trim()
+				? "No providers match the filter"
+				: this.#mode === "login"
+					? "No OAuth providers available"
+					: "No OAuth providers logged in. Use /login first.";
 			this.#listContainer.addChild(new TruncatedText(theme.fg("muted", `  ${message}`), 0, 0));
 		}
 		if (this.#statusMessage) {
@@ -215,58 +263,78 @@ export class OAuthSelectorComponent extends Container {
 			}
 		}
 	}
+	#selectCurrentProvider(): void {
+		const selectedProvider = this.#filteredProviders[this.#selectedIndex];
+		if (selectedProvider?.available) {
+			this.#statusMessage = undefined;
+			this.stopValidation();
+			this.#onSelectCallback(selectedProvider.id);
+		} else if (selectedProvider) {
+			this.#statusMessage = "Provider unavailable in this environment.";
+			this.#updateList();
+		}
+	}
 	handleInput(keyData: string): void {
 		// Up arrow
 		if (matchesKey(keyData, "up")) {
-			if (this.#allProviders.length > 0) {
-				this.#selectedIndex = this.#selectedIndex === 0 ? this.#allProviders.length - 1 : this.#selectedIndex - 1;
+			if (this.#filteredProviders.length > 0) {
+				this.#selectedIndex =
+					this.#selectedIndex === 0 ? this.#filteredProviders.length - 1 : this.#selectedIndex - 1;
 			}
 			this.#statusMessage = undefined;
 			this.#updateList();
+			return;
 		}
 		// Down arrow
-		else if (matchesKey(keyData, "down")) {
-			if (this.#allProviders.length > 0) {
-				this.#selectedIndex = this.#selectedIndex === this.#allProviders.length - 1 ? 0 : this.#selectedIndex + 1;
+		if (matchesKey(keyData, "down")) {
+			if (this.#filteredProviders.length > 0) {
+				this.#selectedIndex =
+					this.#selectedIndex === this.#filteredProviders.length - 1 ? 0 : this.#selectedIndex + 1;
 			}
 			this.#statusMessage = undefined;
 			this.#updateList();
+			return;
 		}
 		// Page up - jump up by one visible page
-		else if (matchesKey(keyData, "pageUp")) {
-			if (this.#allProviders.length > 0) {
+		if (matchesKey(keyData, "pageUp")) {
+			if (this.#filteredProviders.length > 0) {
 				this.#selectedIndex = Math.max(0, this.#selectedIndex - OAUTH_SELECTOR_MAX_VISIBLE);
 			}
 			this.#statusMessage = undefined;
 			this.#updateList();
+			return;
 		}
 		// Page down - jump down by one visible page
-		else if (matchesKey(keyData, "pageDown")) {
-			if (this.#allProviders.length > 0) {
+		if (matchesKey(keyData, "pageDown")) {
+			if (this.#filteredProviders.length > 0) {
 				this.#selectedIndex = Math.min(
-					this.#allProviders.length - 1,
+					this.#filteredProviders.length - 1,
 					this.#selectedIndex + OAUTH_SELECTOR_MAX_VISIBLE,
 				);
 			}
 			this.#statusMessage = undefined;
 			this.#updateList();
+			return;
 		}
 		// Enter
-		else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
-			const selectedProvider = this.#allProviders[this.#selectedIndex];
-			if (selectedProvider?.available) {
-				this.#statusMessage = undefined;
-				this.stopValidation();
-				this.#onSelectCallback(selectedProvider.id);
-			} else if (selectedProvider) {
-				this.#statusMessage = "Provider unavailable in this environment.";
-				this.#updateList();
-			}
+		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
+			this.#selectCurrentProvider();
+			return;
 		}
 		// Escape or Ctrl+C
-		else if (matchesSelectCancel(keyData)) {
+		if (matchesSelectCancel(keyData)) {
 			this.stopValidation();
 			this.#onCancelCallback();
+			return;
+		}
+		// Everything else edits the filter. A changed query invalidates the current
+		// position, so selection restarts at the best match.
+		const previousQuery = this.#searchInput.getValue();
+		this.#searchInput.handleInput(keyData);
+		if (this.#searchInput.getValue() !== previousQuery) {
+			this.#selectedIndex = 0;
+			this.#statusMessage = undefined;
+			this.#updateList();
 		}
 	}
 }

package/src/modes/components/read-tool-group.ts

@@ -3,7 +3,7 @@ import { Container, Text } from "@gajae-code/tui";
 import { InternalUrlRouter } from "../../internal-urls";
 import { getLanguageFromPath, theme } from "../../modes/theme/theme";
 import { splitPathAndSel } from "../../tools/path-utils";
-import { PREVIEW_LIMITS, shortenPath } from "../../tools/render-utils";
+import { PREVIEW_LIMITS, replaceTabs, shortenPath } from "../../tools/render-utils";
 import { renderCodeCell } from "../../tui";
 import type { ToolExecutionHandle } from "./tool-execution";
 
@@ -53,9 +53,16 @@ type ReadToolResultDetails = {
 	conflictCount?: number;
 };
 
-type ReadToolGroupOptions = {
-	showContentPreview?: boolean;
-};
+type ReadToolVisibleProjection = ReadonlyArray<{
+	path: string;
+	status: ReadEntry["status"];
+	correctedFrom?: string;
+	conflictCount?: number;
+	preview?: {
+		lines: readonly string[];
+		hiddenLineCount: number;
+	};
+}>;
 
 function getSuffixResolution(details: ReadToolResultDetails | undefined): ReadToolSuffixResolution | undefined {
 	if (typeof details?.suffixResolution?.from !== "string" || typeof details.suffixResolution.to !== "string") {
@@ -82,13 +89,16 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 	#expanded = false;
 	#manuallyExpanded: boolean | undefined;
 	#showContentPreview: boolean;
+	#visibleTranscriptChanged = false;
+	#lastVisibleProjection: ReadToolVisibleProjection = [];
 
-	constructor(options: ReadToolGroupOptions = {}) {
+	constructor(options: { showContentPreview?: boolean } = {}) {
 		super();
 		this.#showContentPreview = options.showContentPreview ?? false;
 		this.#text = new Text("", 0, 0);
 		this.addChild(this.#text);
 		this.#updateDisplay();
+		this.#lastVisibleProjection = this.#visibleProjection();
 	}
 
 	updateArgs(args: ReadRenderArgs, toolCallId?: string): void {
@@ -102,7 +112,7 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 		};
 		entry.path = rawPath;
 		this.#entries.set(toolCallId, entry);
-		this.#updateDisplay();
+		this.#updateDisplayAndNotify();
 	}
 
 	updateResult(
@@ -126,23 +136,20 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 			typeof details?.conflictCount === "number" && details.conflictCount > 0 ? details.conflictCount : undefined;
 		entry.conflictCount = conflictCount;
 		entry.status = result.isError ? "error" : suffixResolution ? "warning" : "success";
-		// Store the text content for preview/expanded display
 		const textContent = result.content?.find(c => c.type === "text")?.text;
-		if (textContent !== undefined) {
-			entry.contentText = textContent;
-		}
-		this.#updateDisplay();
+		entry.contentText = textContent;
+		this.#updateDisplayAndNotify();
 	}
 
 	setArgsComplete(_toolCallId?: string): void {
-		this.#updateDisplay();
+		this.#updateDisplayAndNotify();
 	}
 
 	/** Applies automatic expansion unless this renderer instance has an explicit fold choice. */
 	setExpanded(expanded: boolean): void {
 		if (this.#manuallyExpanded !== undefined) return;
 		this.#expanded = expanded;
-		this.#updateDisplay();
+		this.#updateDisplayAndNotify();
 	}
 
 	/**
@@ -152,13 +159,74 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 	setManuallyExpanded(expanded: boolean): void {
 		this.#manuallyExpanded = expanded;
 		this.#expanded = expanded;
-		this.#updateDisplay();
+		this.#updateDisplayAndNotify();
 	}
 
 	getComponent(): Component {
 		return this;
 	}
 
+	consumeVisibleTranscriptChange(): boolean {
+		const changed = this.#visibleTranscriptChanged;
+		this.#visibleTranscriptChanged = false;
+		return changed;
+	}
+
+	#visibleProjection(): ReadToolVisibleProjection {
+		return [...this.#entries.values()].map(entry => {
+			if (!this.#shouldRenderPreview(entry)) {
+				return {
+					path: entry.path,
+					status: entry.status,
+					correctedFrom: entry.correctedFrom,
+					conflictCount: entry.conflictCount,
+				};
+			}
+			const lines = replaceTabs(entry.contentText ?? "")
+				.split(/\r?\n/)
+				.map(line => line.slice(line.lastIndexOf("\r") + 1));
+			const visibleLineCount = this.#expanded ? lines.length : Math.min(lines.length, COLLAPSED_PREVIEW_LINES);
+			return {
+				path: entry.path,
+				status: entry.status,
+				correctedFrom: entry.correctedFrom,
+				preview: {
+					lines: lines.slice(0, visibleLineCount),
+					hiddenLineCount: lines.length - visibleLineCount,
+				},
+			};
+		});
+	}
+
+	#sameVisibleProjection(left: ReadToolVisibleProjection, right: ReadToolVisibleProjection): boolean {
+		if (left.length !== right.length) return false;
+		return left.every((entry, index) => {
+			const other = right[index];
+			if (
+				!other ||
+				entry.path !== other.path ||
+				entry.status !== other.status ||
+				entry.correctedFrom !== other.correctedFrom ||
+				(!entry.preview && entry.conflictCount !== other.conflictCount)
+			)
+				return false;
+			if (!entry.preview || !other.preview) return entry.preview === other.preview;
+			return (
+				entry.preview.hiddenLineCount === other.preview.hiddenLineCount &&
+				entry.preview.lines.length === other.preview.lines.length &&
+				entry.preview.lines.every((line, lineIndex) => line === other.preview!.lines[lineIndex])
+			);
+		});
+	}
+
+	#updateDisplayAndNotify(): void {
+		this.#updateDisplay();
+		const after = this.#visibleProjection();
+		if (this.#sameVisibleProjection(after, this.#lastVisibleProjection)) return;
+		this.#lastVisibleProjection = after;
+		this.#visibleTranscriptChanged = true;
+	}
+
 	#updateDisplay(): void {
 		const entries = [...this.#entries.values()];