@linxiraos/pi-tui 1.1.27 → 1.2.0

package/src/overlays/move-overlay.ts

@@ -15,7 +15,8 @@ import { formatKeyHint } from "../app-keybindings";
 import { editorKey, editorKeys } from "../chrome/keybinding-hints";
 import type { NativeNode, NativeUiEvent } from "../native/node";
 import { node, span } from "../native/describe";
-import { actionHint, overlayCard, statusHintsRow } from "../native/overlay";
+import { actionBar, actionButton, actionHint, overlayCard, statusHintsRow } from "../native/overlay";
+import { getKeybindings } from "../keybindings";
 
 export interface MoveOverlayResult {
 	directory: string;
@@ -122,12 +123,7 @@ export class MoveOverlay implements Component, Focusable {
 			return;
 		}
 		if (matchesKey(data, Key.tab)) {
-			const selected = this.#results[this.#selectedIndex];
-			if (selected) {
-				this.#field.setValue(selected.value);
-				this.#selectedIndex = 0;
-				this.#updateResults();
-			}
+			this.#accept();
 			return;
 		}
 		const before = this.#field.getValue();
@@ -192,19 +188,28 @@ export class MoveOverlay implements Component, Focusable {
 		);
 		const hints = statusHintsRow(
 			[span("Type to filter", "dim")],
-			[
-				actionHint(["tui.select.up", "tui.select.down"], "navigate"),
-				{ keys: ["tab"], label: "accept" },
-				{ keys: ["enter"], label: "confirm" },
-				actionHint("tui.select.cancel", "cancel"),
-			],
+			[actionHint(["tui.select.up", "tui.select.down"], "navigate")],
 		);
-		const described = overlayCard("zeta.dialog.move", "Move to directory", [this.#field, list, hints]);
+		// Accept, Confirm and Cancel run what Tab, Enter and Esc run.
+		const actions = actionBar([
+			actionButton("Accept", "accept", { keys: "tab" }),
+			null,
+			// The bound cancel key; Esc also cancels when it is unbound.
+			actionButton("Cancel", "cancel", { keys: getKeybindings().getKeys("tui.select.cancel")[0] ?? "escape" }),
+			actionButton("Confirm", "confirm", { keys: "enter", tone: "accent" }),
+		]);
+		const described = overlayCard("zeta.dialog.move", "Move to directory", [this.#field, list, hints, actions]);
 		this.#native = { revision: this.#revision, node: described };
 		return described;
 	}
 
 	handleNativeEvent(event: NativeUiEvent): void {
+		if (event.type === "action") {
+			if (event.act === "accept") this.#accept();
+			else if (event.act === "confirm") this.#field.submit();
+			else if (event.act === "cancel") this.#done(undefined);
+			return;
+		}
 		if (event.type !== "select" && event.type !== "activate") return;
 		const index = this.#results.findIndex(result => result.value === event.item);
 		if (index === -1) return;
@@ -216,6 +221,15 @@ export class MoveOverlay implements Component, Focusable {
 		if (event.type === "activate") this.#field.submit();
 	}
 
+	/** Tab: fill the field with the highlighted suggestion. */
+	#accept(): void {
+		const selected = this.#results[this.#selectedIndex];
+		if (!selected) return;
+		this.#field.setValue(selected.value);
+		this.#selectedIndex = 0;
+		this.#updateResults();
+	}
+
 	invalidate(): void {
 		this.#field.input.prompt = theme.fg("dim", "Path: ");
 		this.#field.invalidate();

package/src/overlays/oauth-selector.ts

@@ -11,7 +11,6 @@ import {
 	TruncatedText,
 	visibleWidth,
 } from "../index";
-import { tuiText, tuiTextFmt } from "../i18n";
 import { theme } from "../theme/theme";
 import { matchesSelectCancel, matchesSelectDown, matchesSelectUp } from "../keybinding-matchers";
 import { OverlayPanel } from "../chrome/overlay-box";
@@ -52,6 +51,8 @@ const ORIGIN_LABELS = {
  */
 export class OAuthSelectorComponent extends OverlayPanel {
 	#listContainer: Container;
+	/** Provider rows viewport of the last {@link #updateList}; spinner ticks repaint only its rows. */
+	#listView: ScrollView | undefined;
 	#menu: MenuSelection<OAuthProviderInfo>;
 	/** The provider search field; its value drives `#menu`'s query. */
 	#search = Object.assign(new Input(), { prompt: "" });
@@ -90,12 +91,7 @@ export class OAuthSelectorComponent extends OverlayPanel {
 			requestRender?: () => void;
 		},
 	) {
-		super(
-			mode === "login"
-				? tuiText("oauthSelectLoginTitle", "Select provider to login")
-				: tuiText("oauthSelectLogoutTitle", "Select provider to logout"),
-			"zeta.overlay.oauth",
-		);
+		super(mode === "login" ? "Select provider to login" : "Select provider to logout", "zeta.overlay.oauth");
 		this.#mode = mode;
 		this.#authStorage = authStorage;
 		this.#onSelectCallback = onSelect;
@@ -219,7 +215,13 @@ export class OAuthSelectorComponent extends OverlayPanel {
 			if (frameCount > 0) {
 				this.#spinnerFrame = (this.#spinnerFrame + 1) % frameCount;
 			}
-			this.#updateList();
+			// Only the provider rows carry the spinner glyph; the window is unchanged.
+			if (this.#listView) {
+				const start = this.#scrollStart;
+				this.#listView.setLines(this.#providerRows(start, start + this.#visibleCount));
+			} else {
+				this.#updateList();
+			}
 			this.#requestRenderCallback?.();
 		}, 80);
 	}
@@ -238,45 +240,26 @@ export class OAuthSelectorComponent extends OverlayPanel {
 	#getSourceLabel(providerId: string): string {
 		const origin = this.#authStorage.keys.source(providerId);
 		if (!origin) return "";
-		const detail =
-			origin.kind === "env" && origin.envVar
-				? `${tuiText("oauthOriginEnv", "env")}: ${origin.envVar}`
-				: this.#originDisplayLabel(origin.kind);
+		const detail = origin.kind === "env" && origin.envVar ? `env: ${origin.envVar}` : ORIGIN_LABELS[origin.kind];
 		return theme.fg("muted", ` (${detail})`);
 	}
 
-	/** Localized display tag for a credential-origin leg; `--api-key` stays a verbatim CLI flag. */
-	#originDisplayLabel(kind: keyof typeof ORIGIN_LABELS): string {
-		switch (kind) {
-			case "runtime":
-				return ORIGIN_LABELS.runtime;
-			case "config":
-				return tuiText("oauthOriginConfig", ORIGIN_LABELS.config);
-			case "oauth":
-				return tuiText("oauthOriginLogin", ORIGIN_LABELS.oauth);
-			case "api_key":
-				return tuiText("oauthOriginApiKey", ORIGIN_LABELS.api_key);
-			case "env":
-				return tuiText("oauthOriginEnv", ORIGIN_LABELS.env);
-		}
-	}
-
 	#getStatusIndicator(providerId: string): string {
 		const state = this.#authState.get(providerId);
 		const source = this.#getSourceLabel(providerId);
 		if (state === "checking") {
 			const frameCount = theme.spinnerFrames.length;
 			const spinner = frameCount > 0 ? theme.spinnerFrames[this.#spinnerFrame % frameCount] : theme.status.pending;
-			return theme.fg("warning", ` ${spinner} ${tuiText("oauthStatusChecking", "checking")}`) + source;
+			return theme.fg("warning", ` ${spinner} checking`) + source;
 		}
 		if (state === "invalid") {
-			return theme.fg("error", ` ${theme.status.error} ${tuiText("oauthStatusInvalid", "invalid")}`) + source;
+			return theme.fg("error", ` ${theme.status.error} invalid`) + source;
 		}
 		if (state === "valid") {
-			return theme.fg("success", ` ${theme.status.enabled} ${tuiText("oauthStatusLoggedIn", "logged in")}`) + source;
+			return theme.fg("success", ` ${theme.status.enabled} logged in`) + source;
 		}
 		return this.#hasSelectableAuth(providerId)
-			? theme.fg("success", ` ${theme.status.enabled} ${tuiText("oauthStatusLoggedIn", "logged in")}`) + source
+			? theme.fg("success", ` ${theme.status.enabled} logged in`) + source
 			: "";
 	}
 
@@ -290,9 +273,9 @@ export class OAuthSelectorComponent extends OverlayPanel {
 
 	#renderStatusLine(_total: number): string {
 		const query = this.#menu.query.trim();
-		if (!query) return theme.fg("muted", tuiText("oauthTypeToSearch", "Type to search"));
+		if (!query) return theme.fg("muted", "Type to search");
 		const width = visibleWidth(this.#search.getValue()) + 1;
-		return theme.fg("muted", tuiText("oauthSearchLabel", "Search: ")) + (this.#search.render(width)[0] ?? "");
+		return theme.fg("muted", "Search: ") + (this.#search.render(width)[0] ?? "");
 	}
 
 	#getProviderSearchText(provider: OAuthProviderInfo): string {
@@ -335,37 +318,15 @@ export class OAuthSelectorComponent extends OverlayPanel {
 		this.#nativeRoot = undefined;
 		this.#pickerRoot = undefined;
 		this.#listContainer.clear();
+		this.#listView = undefined;
 
-		const items = this.#menu.visibleItems;
-		const total = items.length;
+		const total = this.#menu.visibleItems.length;
 		const maxVisible = this.#maxVisible;
 		const { start: startIndex, end: endIndex } = centeredViewportRange(this.#menu.selectedIndex, total, maxVisible);
 		this.#scrollStart = startIndex;
 		this.#visibleCount = endIndex - startIndex;
 
-		const rows: string[] = [];
-		for (let i = startIndex; i < endIndex; i++) {
-			const provider = items[i];
-			if (!provider) continue;
-			const isSelected = i === this.#menu.selectedIndex;
-			const isAvailable = provider.available;
-			const statusIndicator = this.#getStatusIndicator(provider.id);
-
-			let line = "";
-			if (isSelected) {
-				const prefix = theme.fg("accent", `${theme.nav.cursor} `);
-				const text = isAvailable ? theme.fg("accent", provider.name) : theme.fg("dim", provider.name);
-				line = prefix + text + statusIndicator;
-			} else {
-				const text = isAvailable ? `  ${provider.name}` : theme.fg("dim", `  ${provider.name}`);
-				line = text + statusIndicator;
-			}
-			if (!isSelected && i === this.#hoveredIndex) {
-				line = theme.bg("selectedBg", line);
-			}
-			rows.push(line);
-		}
-
+		const rows = this.#providerRows(startIndex, endIndex);
 		if (rows.length > 0) {
 			const sv = new ScrollView(rows, {
 				height: rows.length,
@@ -374,6 +335,7 @@ export class OAuthSelectorComponent extends OverlayPanel {
 				theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
 			});
 			sv.setScrollOffset(startIndex);
+			this.#listView = sv;
 			this.#listContainer.addChild(sv);
 		}
 
@@ -386,9 +348,9 @@ export class OAuthSelectorComponent extends OverlayPanel {
 			const message =
 				this.#menu.items.length === 0
 					? this.#mode === "login"
-						? tuiText("oauthNoProvidersAvailable", "No OAuth providers available")
-						: tuiText("oauthNoStoredCredentials", "No stored provider credentials to log out")
-					: tuiText("oauthNoMatchingProviders", "No matching providers");
+						? "No OAuth providers available"
+						: "No stored provider credentials to log out"
+					: "No matching providers";
 			this.#listContainer.addChild(new TruncatedText(theme.fg("muted", message), 0, 0));
 		}
 		if (this.#statusMessage) {
@@ -396,6 +358,34 @@ export class OAuthSelectorComponent extends OverlayPanel {
 			this.#listContainer.addChild(new TruncatedText(theme.fg("warning", this.#statusMessage), 0, 0));
 		}
 	}
+
+	/** Styled rows for visible providers `[startIndex, endIndex)`: cursor, name, auth status and provenance. */
+	#providerRows(startIndex: number, endIndex: number): string[] {
+		const items = this.#menu.visibleItems;
+		const rows: string[] = [];
+		for (let i = startIndex; i < endIndex; i++) {
+			const provider = items[i];
+			if (!provider) continue;
+			const isSelected = i === this.#menu.selectedIndex;
+			const isAvailable = provider.available;
+			const statusIndicator = this.#getStatusIndicator(provider.id);
+
+			let line = "";
+			if (isSelected) {
+				const prefix = theme.fg("accent", `${theme.nav.cursor} `);
+				const text = isAvailable ? theme.fg("accent", provider.name) : theme.fg("dim", provider.name);
+				line = prefix + text + statusIndicator;
+			} else {
+				const text = isAvailable ? `  ${provider.name}` : theme.fg("dim", `  ${provider.name}`);
+				line = text + statusIndicator;
+			}
+			if (!isSelected && i === this.#hoveredIndex) {
+				line = theme.bg("selectedBg", line);
+			}
+			rows.push(line);
+		}
+		return rows;
+	}
 	handleInput(keyData: string): void {
 		// Escape or Ctrl+C
 		if (matchesSelectCancel(keyData)) {
@@ -444,7 +434,8 @@ export class OAuthSelectorComponent extends OverlayPanel {
 			this.stopValidation();
 			this.#onSelectCallback(selectedProvider.id);
 		} else if (selectedProvider) {
-			this.#statusMessage = tuiText("oauthProviderUnavailable", "Provider unavailable in this environment.");
+			this.#statusMessage = "Provider unavailable in this environment.";
+			this.#updateList();
 		}
 	}
 
@@ -667,11 +658,4 @@ export class OAuthSelectorComponent extends OverlayPanel {
 		}
 		this.#confirmSelection();
 	}
-	override render(width: number): readonly string[] {
-		this.title =
-			this.#mode === "login"
-				? tuiText("oauthSelectLoginTitle", "Select provider to login")
-				: tuiText("oauthSelectLogoutTitle", "Select provider to logout");
-		return super.render(width);
-	}
 }