@f5-sales-demo/xcsh 19.51.2

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

@@ -0,0 +1,211 @@
+import { getOAuthProviders, type OAuthProviderInfo } from "@f5xc-salesdemos/pi-ai";
+import { Container, matchesKey, Spacer, TruncatedText } from "@f5xc-salesdemos/pi-tui";
+import { theme } from "../../modes/theme/theme";
+import { matchesSelectCancel } from "../../modes/utils/keybinding-matchers";
+import type { AuthStorage } from "../../session/auth-storage";
+import { DynamicBorder } from "./dynamic-border";
+/**
+ * Component that renders an OAuth provider selector.
+ */
+export class OAuthSelectorComponent extends Container {
+	#listContainer: Container;
+	#allProviders: OAuthProviderInfo[] = [];
+	#selectedIndex: number = 0;
+	#mode: "login" | "logout";
+	#authStorage: AuthStorage;
+	#onSelectCallback: (providerId: string) => void;
+	#onCancelCallback: () => void;
+	#statusMessage: string | undefined;
+	#validateAuthCallback?: (providerId: string) => Promise<boolean>;
+	#requestRenderCallback?: () => void;
+	#authState: Map<string, "checking" | "valid" | "invalid"> = new Map();
+	#spinnerFrame: number = 0;
+	#spinnerInterval?: NodeJS.Timeout;
+	#validationGeneration: number = 0;
+	constructor(
+		mode: "login" | "logout",
+		authStorage: AuthStorage,
+		onSelect: (providerId: string) => void,
+		onCancel: () => void,
+		options?: {
+			validateAuth?: (providerId: string) => Promise<boolean>;
+			requestRender?: () => void;
+		},
+	) {
+		super();
+		this.#mode = mode;
+		this.#authStorage = authStorage;
+		this.#onSelectCallback = onSelect;
+		this.#onCancelCallback = onCancel;
+		this.#validateAuthCallback = options?.validateAuth;
+		this.#requestRenderCallback = options?.requestRender;
+		// Load all OAuth providers
+		this.#loadProviders();
+		this.addChild(new DynamicBorder());
+		this.addChild(new Spacer(1));
+		// Add title
+		const title = mode === "login" ? "Select provider to login:" : "Select provider to logout:";
+		this.addChild(new TruncatedText(theme.bold(title)));
+		this.addChild(new Spacer(1));
+		// Create list container
+		this.#listContainer = new Container();
+		this.addChild(this.#listContainer);
+		this.addChild(new Spacer(1));
+		// Add bottom border
+		this.addChild(new DynamicBorder());
+		// Initial render
+		this.#updateList();
+		this.#startValidation();
+	}
+
+	stopValidation(): void {
+		this.#validationGeneration += 1;
+		this.#stopSpinner();
+	}
+	#loadProviders(): void {
+		this.#allProviders = getOAuthProviders();
+	}
+
+	#startValidation(): void {
+		if (!this.#validateAuthCallback) return;
+		const generation = this.#validationGeneration + 1;
+		this.#validationGeneration = generation;
+
+		let pending = 0;
+		for (const provider of this.#allProviders) {
+			if (!this.#authStorage.hasAuth(provider.id)) {
+				this.#authState.delete(provider.id);
+				continue;
+			}
+			this.#authState.set(provider.id, "checking");
+			pending += 1;
+			void this.#validateProvider(provider.id, generation);
+		}
+
+		if (pending > 0) {
+			this.#startSpinner();
+			this.#updateList();
+			this.#requestRenderCallback?.();
+		}
+	}
+
+	async #validateProvider(providerId: string, generation: number): Promise<void> {
+		if (!this.#validateAuthCallback) return;
+		let isValid = false;
+		try {
+			isValid = await this.#validateAuthCallback(providerId);
+		} catch {
+			isValid = false;
+		}
+
+		if (generation !== this.#validationGeneration) return;
+		this.#authState.set(providerId, isValid ? "valid" : "invalid");
+		if (![...this.#authState.values()].includes("checking")) {
+			this.#stopSpinner();
+		}
+		this.#updateList();
+		this.#requestRenderCallback?.();
+	}
+
+	#startSpinner(): void {
+		if (this.#spinnerInterval) return;
+		this.#spinnerInterval = setInterval(() => {
+			const frameCount = theme.spinnerFrames.length;
+			if (frameCount > 0) {
+				this.#spinnerFrame = (this.#spinnerFrame + 1) % frameCount;
+			}
+			this.#updateList();
+			this.#requestRenderCallback?.();
+		}, 80);
+	}
+
+	#stopSpinner(): void {
+		if (this.#spinnerInterval) {
+			clearInterval(this.#spinnerInterval);
+			this.#spinnerInterval = undefined;
+		}
+	}
+
+	#getStatusIndicator(providerId: string): string {
+		const state = this.#authState.get(providerId);
+		if (state === "checking") {
+			const frameCount = theme.spinnerFrames.length;
+			const spinner = frameCount > 0 ? `${theme.spinnerFrames[this.#spinnerFrame % frameCount]} ` : "";
+			return theme.fg("warning", ` ${spinner}checking`);
+		}
+		if (state === "invalid") {
+			return theme.fg("error", ` ${theme.status.error} invalid`);
+		}
+		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`) : "";
+	}
+	#updateList(): void {
+		this.#listContainer.clear();
+		for (let i = 0; i < this.#allProviders.length; i++) {
+			const provider = this.#allProviders[i];
+			if (!provider) continue;
+			const isSelected = i === this.#selectedIndex;
+			const isAvailable = provider.available;
+			const statusIndicator = this.#getStatusIndicator(provider.id);
+
+			let line = "";
+			if (isSelected) {
+				const prefix = theme.fg("chromeAccent", `${theme.nav.cursor} `);
+				const text = isAvailable ? theme.fg("contentAccent", 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;
+			}
+			this.#listContainer.addChild(new TruncatedText(line, 0, 0));
+		}
+
+		// Show "no providers" if empty
+		if (this.#allProviders.length === 0) {
+			const message =
+				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) {
+			this.#listContainer.addChild(new Spacer(1));
+			this.#listContainer.addChild(new TruncatedText(theme.fg("warning", `  ${this.#statusMessage}`), 0, 0));
+		}
+	}
+	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;
+			}
+			this.#statusMessage = undefined;
+			this.#updateList();
+		}
+		// Down arrow
+		else if (matchesKey(keyData, "down")) {
+			if (this.#allProviders.length > 0) {
+				this.#selectedIndex = this.#selectedIndex === this.#allProviders.length - 1 ? 0 : this.#selectedIndex + 1;
+			}
+			this.#statusMessage = undefined;
+			this.#updateList();
+		}
+		// 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();
+			}
+		}
+		// Escape or Ctrl+C
+		else if (matchesSelectCancel(keyData)) {
+			this.stopValidation();
+			this.#onCancelCallback();
+		}
+	}
+}

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

@@ -0,0 +1,95 @@
+/**
+ * Interactive marketplace plugin selector.
+ *
+ * Shows available plugins from all configured marketplaces in a SelectList.
+ * Selecting a plugin triggers installation. Esc cancels.
+ */
+import { Container, type SelectItem, SelectList } from "@f5xc-salesdemos/pi-tui";
+import { getSelectListTheme } from "../theme/theme";
+import { DynamicBorder } from "./dynamic-border";
+
+export interface PluginSelectorCallbacks {
+	onSelect: (pluginName: string, marketplace: string, scope?: "user" | "project") => void;
+	onCancel: () => void;
+}
+
+export interface PluginItem {
+	plugin: { name: string; version?: string; description?: string };
+	marketplace: string;
+	/** Scope of this entry. When set, appended to the label and forwarded to onSelect. */
+	scope?: "user" | "project" | "local";
+}
+
+export class PluginSelectorComponent extends Container {
+	#selectList: SelectList;
+
+	constructor(
+		marketplaceCount: number,
+		plugins: PluginItem[],
+		installedIds: Set<string>,
+		callbacks: PluginSelectorCallbacks,
+	) {
+		super();
+
+		const items: SelectItem[] = plugins.map(({ plugin, marketplace, scope }) => {
+			// Encode scope into the value so onSelect can recover it without a parallel Map.
+			// Format: "name@marketplace" or "name@marketplace#scope"
+			const id = scope ? `${plugin.name}@${marketplace}#${scope}` : `${plugin.name}@${marketplace}`;
+			const installed = installedIds.has(`${plugin.name}@${marketplace}`);
+			const version = plugin.version ? `@${plugin.version}` : "";
+			const status = installed ? " [installed]" : "";
+			const scopeTag = scope ? ` [${scope}]` : "";
+
+			return {
+				value: id,
+				label: `${plugin.name}${version}${status}${scopeTag}`,
+				description: plugin.description,
+				hint: marketplace,
+			};
+		});
+
+		if (items.length === 0) {
+			items.push({
+				value: "__empty__",
+				label: "No plugins available",
+				description:
+					marketplaceCount === 0
+						? "Add a marketplace first: /plugin marketplace add <source>"
+						: "Configured marketplaces have no plugins",
+			});
+		}
+
+		this.addChild(new DynamicBorder());
+
+		this.#selectList = new SelectList(items, Math.min(items.length, 20), getSelectListTheme());
+
+		this.#selectList.onSelect = item => {
+			if (item.value === "__empty__") return;
+			const [name, marketplace, scope] = splitPluginId(item.value);
+			if (name && marketplace) {
+				callbacks.onSelect(name, marketplace, scope);
+			}
+		};
+
+		this.#selectList.onCancel = () => {
+			callbacks.onCancel();
+		};
+
+		this.addChild(this.#selectList);
+		this.addChild(new DynamicBorder());
+	}
+
+	getSelectList(): SelectList {
+		return this.#selectList;
+	}
+}
+
+function splitPluginId(id: string): [string, string, "user" | "project" | undefined] | [null, null, null] {
+	// value format: "name@marketplace" or "name@marketplace#scope"
+	const hashIdx = id.indexOf("#");
+	const base = hashIdx >= 0 ? id.slice(0, hashIdx) : id;
+	const scope = hashIdx >= 0 ? (id.slice(hashIdx + 1) as "user" | "project") : undefined;
+	const atIdx = base.lastIndexOf("@");
+	if (atIdx <= 0) return [null, null, null];
+	return [base.slice(0, atIdx), base.slice(atIdx + 1), scope];
+}