@eiei114/pi-sub-core 1.5.1

package/src/ui/settings-list.ts

@@ -0,0 +1,290 @@
+import type { Component, SettingItem, SettingsListTheme } from "@mariozechner/pi-tui";
+import {
+	Input,
+	fuzzyFilter,
+	truncateToWidth,
+	visibleWidth,
+	wrapTextWithAnsi,
+} from "@mariozechner/pi-tui";
+import { getSettingsKeybindings } from "./keybindings.js";
+
+export interface SettingsListOptions {
+	enableSearch?: boolean;
+}
+
+export const CUSTOM_OPTION = "__custom__";
+export const CUSTOM_LABEL = "custom";
+
+export type { SettingItem, SettingsListTheme };
+
+export class SettingsList implements Component {
+	private items: SettingItem[];
+	private filteredItems: SettingItem[];
+	private theme: SettingsListTheme;
+	private selectedIndex = 0;
+	private maxVisible: number;
+	private onChange: (id: string, newValue: string) => void;
+	private onCancel: () => void;
+	private searchInput?: Input;
+	private searchEnabled: boolean;
+	private submenuComponent: Component | null = null;
+	private submenuItemIndex: number | null = null;
+
+	constructor(
+		items: SettingItem[],
+		maxVisible: number,
+		theme: SettingsListTheme,
+		onChange: (id: string, newValue: string) => void,
+		onCancel: () => void,
+		options: SettingsListOptions = {},
+	) {
+		this.items = items;
+		this.filteredItems = items;
+		this.maxVisible = maxVisible;
+		this.theme = theme;
+		this.onChange = onChange;
+		this.onCancel = onCancel;
+		this.searchEnabled = options.enableSearch ?? false;
+
+		if (this.searchEnabled) {
+			this.searchInput = new Input();
+		}
+	}
+
+	/** Update an item's currentValue */
+	updateValue(id: string, newValue: string): void {
+		const item = this.items.find((i) => i.id === id);
+		if (item) {
+			item.currentValue = newValue;
+		}
+	}
+
+	invalidate(): void {
+		this.submenuComponent?.invalidate?.();
+	}
+
+	render(width: number): string[] {
+		// If submenu is active, render it instead
+		if (this.submenuComponent) {
+			return this.submenuComponent.render(width);
+		}
+		return this.renderMainList(width);
+	}
+
+	private renderMainList(width: number): string[] {
+		const lines: string[] = [];
+		if (this.searchEnabled && this.searchInput) {
+			lines.push(...this.searchInput.render(width));
+			lines.push("");
+		}
+
+		if (this.items.length === 0) {
+			lines.push(this.theme.hint("  No settings available"));
+			if (this.searchEnabled) {
+				this.addHintLine(lines);
+			}
+			return lines;
+		}
+
+		const displayItems = this.searchEnabled ? this.filteredItems : this.items;
+		if (displayItems.length === 0) {
+			lines.push(this.theme.hint("  No matching settings"));
+			this.addHintLine(lines);
+			return lines;
+		}
+
+		// Calculate visible range with scrolling
+		const startIndex = Math.max(
+			0,
+			Math.min(
+				this.selectedIndex - Math.floor(this.maxVisible / 2),
+				displayItems.length - this.maxVisible,
+			),
+		);
+		const endIndex = Math.min(startIndex + this.maxVisible, displayItems.length);
+
+		// Calculate max label width for alignment
+		const maxLabelWidth = Math.min(30, Math.max(...this.items.map((item) => visibleWidth(item.label))));
+
+		// Render visible items
+		for (let i = startIndex; i < endIndex; i++) {
+			const item = displayItems[i];
+			if (!item) continue;
+			const isSelected = i === this.selectedIndex;
+			const prefix = isSelected ? this.theme.cursor : "  ";
+			const prefixWidth = visibleWidth(prefix);
+
+			// Pad label to align values
+			const labelPadded = item.label + " ".repeat(Math.max(0, maxLabelWidth - visibleWidth(item.label)));
+			const labelText = this.theme.label(labelPadded, isSelected);
+
+			// Calculate space for value
+			const separator = "  ";
+			const usedWidth = prefixWidth + maxLabelWidth + visibleWidth(separator);
+			const valueMaxWidth = Math.max(1, width - usedWidth - 2);
+			const optionLines = isSelected && item.values && item.values.length > 0
+				? wrapTextWithAnsi(this.formatOptionsInline(item, item.values), valueMaxWidth)
+				: null;
+			const valueText = optionLines
+				? optionLines[0] ?? ""
+				: this.theme.value(truncateToWidth(item.currentValue, valueMaxWidth, ""), isSelected);
+			const line = prefix + labelText + separator + valueText;
+			lines.push(truncateToWidth(line, width, ""));
+			if (optionLines && optionLines.length > 1) {
+				const indent = " ".repeat(prefixWidth + maxLabelWidth + visibleWidth(separator));
+				for (const continuation of optionLines.slice(1)) {
+					lines.push(truncateToWidth(indent + continuation, width, ""));
+				}
+			}
+		}
+
+		// Add scroll indicator if needed
+		if (startIndex > 0 || endIndex < displayItems.length) {
+			const scrollText = `  (${this.selectedIndex + 1}/${displayItems.length})`;
+			lines.push(this.theme.hint(truncateToWidth(scrollText, width - 2, "")));
+		}
+
+		// Add description for selected item
+		const selectedItem = displayItems[this.selectedIndex];
+		if (selectedItem?.description) {
+			lines.push("");
+			const wrapWidth = Math.max(1, width - 4);
+			const wrappedDesc = wrapTextWithAnsi(selectedItem.description, wrapWidth);
+			for (const line of wrappedDesc) {
+				const prefixed = `  ${line}`;
+				lines.push(this.theme.description(truncateToWidth(prefixed, width, "")));
+			}
+		}
+
+
+		// Add hint
+		this.addHintLine(lines);
+		return lines;
+	}
+
+	handleInput(data: string): void {
+		// If submenu is active, delegate all input to it
+		// The submenu's onCancel (triggered by escape) will call done() which closes it
+		if (this.submenuComponent) {
+			this.submenuComponent.handleInput?.(data);
+			return;
+		}
+
+		const kb = getSettingsKeybindings();
+		const displayItems = this.searchEnabled ? this.filteredItems : this.items;
+
+		if (kb.matches(data, "selectUp")) {
+			if (displayItems.length === 0) return;
+			this.selectedIndex = this.selectedIndex === 0 ? displayItems.length - 1 : this.selectedIndex - 1;
+		} else if (kb.matches(data, "selectDown")) {
+			if (displayItems.length === 0) return;
+			this.selectedIndex = this.selectedIndex === displayItems.length - 1 ? 0 : this.selectedIndex + 1;
+		} else if (kb.matches(data, "cursorLeft")) {
+			this.stepValue(-1);
+		} else if (kb.matches(data, "cursorRight")) {
+			this.stepValue(1);
+		} else if (kb.matches(data, "selectConfirm") || data === " ") {
+			this.activateItem();
+		} else if (kb.matches(data, "selectCancel")) {
+			this.onCancel();
+		} else if (this.searchEnabled && this.searchInput) {
+			const sanitized = data.replace(/ /g, "");
+			if (!sanitized) {
+				return;
+			}
+			this.searchInput.handleInput(sanitized);
+			this.applyFilter(this.searchInput.getValue());
+		}
+	}
+
+	private stepValue(direction: -1 | 1): void {
+		const displayItems = this.searchEnabled ? this.filteredItems : this.items;
+		const item = displayItems[this.selectedIndex];
+		if (!item || !item.values || item.values.length === 0) return;
+		const values = item.values;
+		let currentIndex = values.indexOf(item.currentValue);
+		if (currentIndex === -1) {
+			currentIndex = direction > 0 ? 0 : values.length - 1;
+		}
+		const nextIndex = (currentIndex + direction + values.length) % values.length;
+		const newValue = values[nextIndex];
+		if (newValue === CUSTOM_OPTION) {
+			item.currentValue = newValue;
+			this.onChange(item.id, newValue);
+			return;
+		}
+		item.currentValue = newValue;
+		this.onChange(item.id, newValue);
+	}
+
+	private activateItem(): void {
+		const item = this.searchEnabled ? this.filteredItems[this.selectedIndex] : this.items[this.selectedIndex];
+		if (!item) return;
+
+		const hasCustom = Boolean(item.values && item.values.includes(CUSTOM_OPTION));
+		const currentIsCustom = hasCustom && item.values && !item.values.includes(item.currentValue);
+
+		if (item.submenu && hasCustom) {
+			if (currentIsCustom || item.currentValue === CUSTOM_OPTION) {
+				this.openSubmenu(item);
+			}
+			return;
+		}
+
+		if (item.submenu) {
+			this.openSubmenu(item);
+		}
+	}
+
+	private closeSubmenu(): void {
+		this.submenuComponent = null;
+		// Restore selection to the item that opened the submenu
+		if (this.submenuItemIndex !== null) {
+			this.selectedIndex = this.submenuItemIndex;
+			this.submenuItemIndex = null;
+		}
+	}
+
+	private applyFilter(query: string): void {
+		this.filteredItems = fuzzyFilter(this.items, query, (item) => item.label);
+		this.selectedIndex = 0;
+	}
+
+	private formatOptionsInline(item: SettingItem, values: string[]): string {
+		const separator = this.theme.description(" • ");
+		const hasCustom = values.includes(CUSTOM_OPTION);
+		const currentIsCustom = hasCustom && !values.includes(item.currentValue);
+		return values
+			.map((value) => {
+				const label = value === CUSTOM_OPTION
+					? (currentIsCustom ? `${CUSTOM_LABEL} (${item.currentValue})` : CUSTOM_LABEL)
+					: value;
+				const selected = value === item.currentValue || (currentIsCustom && value === CUSTOM_OPTION);
+				return this.theme.value(label, selected);
+			})
+			.join(separator);
+	}
+
+	private openSubmenu(item: SettingItem): void {
+		if (!item.submenu) return;
+		this.submenuItemIndex = this.selectedIndex;
+		this.submenuComponent = item.submenu(item.currentValue, (selectedValue) => {
+			if (selectedValue !== undefined) {
+				item.currentValue = selectedValue;
+				this.onChange(item.id, selectedValue);
+			}
+			this.closeSubmenu();
+		});
+	}
+
+	private addHintLine(lines: string[]): void {
+		lines.push("");
+		lines.push(
+			this.theme.hint(
+				this.searchEnabled
+					? "  Type to search · ←/→ change · Enter/Space edit custom · Esc to cancel"
+					: "  ←/→ change · Enter/Space edit custom · Esc to cancel",
+			),
+		);
+	}
+}

package/src/usage/controller.ts

@@ -0,0 +1,250 @@
+/**
+ * Usage refresh and provider selection controller.
+ */
+
+import type { ExtensionContext } from "@mariozechner/pi-coding-agent";
+import type { ProviderName, UsageSnapshot } from "../types.js";
+import type { Settings } from "../settings-types.js";
+import { detectProviderFromModel } from "../providers/detection.js";
+import { isExpectedMissingData } from "../errors.js";
+import { formatElapsedSince } from "../utils.js";
+import { fetchUsageForProvider, refreshStatusForProvider } from "./fetch.js";
+import type { Dependencies } from "../types.js";
+import { getCachedData, readCache } from "../cache.js";
+import { hasProviderCredentials } from "../providers/registry.js";
+
+export interface UsageControllerState {
+	currentProvider?: ProviderName;
+	cachedUsage?: UsageSnapshot;
+	lastSuccessAt?: number;
+	providerCycleIndex: number;
+}
+
+export interface UsageUpdate {
+	provider?: ProviderName;
+	usage?: UsageSnapshot;
+}
+
+export type UsageUpdateHandler = (update: UsageUpdate) => void;
+
+export function createUsageController(deps: Dependencies) {
+	function isProviderAvailable(
+		settings: Settings,
+		provider: ProviderName,
+		options?: { skipCredentials?: boolean }
+	): boolean {
+		const setting = settings.providers[provider];
+		if (setting.enabled === "off" || setting.enabled === false) return false;
+		if (setting.enabled === "on" || setting.enabled === true) return true;
+		if (options?.skipCredentials) return true;
+		return hasProviderCredentials(provider, deps);
+	}
+
+	function getEnabledProviders(settings: Settings): ProviderName[] {
+		return settings.providerOrder.filter((p) => isProviderAvailable(settings, p));
+	}
+
+	function resolveProvider(
+		ctx: ExtensionContext,
+		settings: Settings,
+		state: UsageControllerState,
+		options?: { skipCredentials?: boolean }
+	): ProviderName | undefined {
+		const detected = detectProviderFromModel(ctx.model);
+		if (detected && isProviderAvailable(settings, detected, options)) {
+			return detected;
+		}
+		return undefined;
+	}
+
+	function emitUpdate(state: UsageControllerState, onUpdate: UsageUpdateHandler): void {
+		onUpdate({
+			provider: state.currentProvider,
+			usage: state.cachedUsage,
+		});
+	}
+
+	async function refresh(
+		ctx: ExtensionContext,
+		settings: Settings,
+		state: UsageControllerState,
+		onUpdate: UsageUpdateHandler,
+		options?: { force?: boolean; allowStaleCache?: boolean; forceStatus?: boolean; skipFetch?: boolean }
+	): Promise<void> {
+		const provider = resolveProvider(ctx, settings, state, { skipCredentials: options?.skipFetch });
+		if (!provider) {
+			state.currentProvider = undefined;
+			state.cachedUsage = undefined;
+			emitUpdate(state, onUpdate);
+			return;
+		}
+
+		const providerChanged = provider !== state.currentProvider;
+		state.currentProvider = provider;
+		if (providerChanged) {
+			state.cachedUsage = undefined;
+		}
+
+		const cache = readCache();
+		let cachedEntry = await getCachedData(provider, settings.behavior.refreshInterval * 1000, cache);
+		if (!cachedEntry && options?.allowStaleCache) {
+			cachedEntry = cache[provider] ?? null;
+		}
+		if (cachedEntry?.usage) {
+			state.cachedUsage = {
+				...cachedEntry.usage,
+				status: cachedEntry.status,
+				lastSuccessAt: cachedEntry.fetchedAt,
+			};
+			if (!cachedEntry.usage.error) {
+				state.lastSuccessAt = cachedEntry.fetchedAt;
+			}
+		}
+		emitUpdate(state, onUpdate);
+
+		if (options?.skipFetch) {
+			return;
+		}
+
+		const result = await fetchUsageForProvider(deps, settings, provider, options);
+		const error = result.usage?.error;
+		const fetchError = Boolean(error && !isExpectedMissingData(error));
+		if (fetchError) {
+			let fallback = state.cachedUsage;
+			let fallbackFetchedAt = state.lastSuccessAt;
+			if (!fallback || fallback.windows.length === 0) {
+				const cachedEntry = cache[provider];
+				const cachedUsage = cachedEntry?.usage ? { ...cachedEntry.usage, status: cachedEntry.status } : undefined;
+				fallback = cachedUsage && cachedUsage.windows.length > 0 ? cachedUsage : undefined;
+				if (cachedEntry?.fetchedAt) fallbackFetchedAt = cachedEntry.fetchedAt;
+			}
+			if (fallback && fallback.windows.length > 0) {
+				const lastSuccessAt = fallbackFetchedAt ?? state.lastSuccessAt;
+				const elapsed = lastSuccessAt ? formatElapsedSince(lastSuccessAt) : undefined;
+				const description = elapsed ? (elapsed === "just now" ? "just now" : `${elapsed} ago`) : "Fetch failed";
+				state.cachedUsage = {
+					...fallback,
+					lastSuccessAt,
+					error,
+					status: { indicator: "minor", description },
+				};
+			} else {
+				state.cachedUsage = result.usage ? { ...result.usage, status: result.status } : undefined;
+			}
+		} else {
+			const successAt = Date.now();
+			state.cachedUsage = result.usage
+				? { ...result.usage, status: result.status, lastSuccessAt: successAt }
+				: undefined;
+			if (result.usage && !result.usage.error) {
+				state.lastSuccessAt = successAt;
+			}
+		}
+		emitUpdate(state, onUpdate);
+	}
+
+	async function refreshStatus(
+		ctx: ExtensionContext,
+		settings: Settings,
+		state: UsageControllerState,
+		onUpdate: UsageUpdateHandler,
+		options?: { force?: boolean; allowStaleCache?: boolean; skipFetch?: boolean }
+	): Promise<void> {
+		const provider = resolveProvider(ctx, settings, state, { skipCredentials: options?.skipFetch });
+		if (!provider) {
+			state.currentProvider = undefined;
+			state.cachedUsage = undefined;
+			emitUpdate(state, onUpdate);
+			return;
+		}
+
+		const providerChanged = provider !== state.currentProvider;
+		state.currentProvider = provider;
+		if (providerChanged) {
+			state.cachedUsage = undefined;
+		}
+
+		const cache = readCache();
+		let cachedEntry = await getCachedData(provider, settings.behavior.refreshInterval * 1000, cache);
+		if (!cachedEntry && options?.allowStaleCache) {
+			cachedEntry = cache[provider] ?? null;
+		}
+		if (cachedEntry?.usage) {
+			state.cachedUsage = {
+				...cachedEntry.usage,
+				status: cachedEntry.status,
+				lastSuccessAt: cachedEntry.fetchedAt,
+			};
+			if (!cachedEntry.usage.error) {
+				state.lastSuccessAt = cachedEntry.fetchedAt;
+			}
+		}
+
+		if (options?.skipFetch) {
+			emitUpdate(state, onUpdate);
+			return;
+		}
+
+		const status = await refreshStatusForProvider(deps, settings, provider, { force: options?.force });
+		if (status && state.cachedUsage) {
+			state.cachedUsage = { ...state.cachedUsage, status };
+		}
+
+		emitUpdate(state, onUpdate);
+	}
+
+	async function cycleProvider(
+		ctx: ExtensionContext,
+		settings: Settings,
+		state: UsageControllerState,
+		onUpdate: UsageUpdateHandler
+	): Promise<void> {
+		const enabledProviders = getEnabledProviders(settings);
+		if (enabledProviders.length === 0) {
+			state.currentProvider = undefined;
+			state.cachedUsage = undefined;
+			emitUpdate(state, onUpdate);
+			return;
+		}
+
+		const currentIndex = state.currentProvider
+			? enabledProviders.indexOf(state.currentProvider)
+			: -1;
+		if (currentIndex >= 0) {
+			state.providerCycleIndex = currentIndex;
+		}
+
+		const total = enabledProviders.length;
+		for (let i = 0; i < total; i += 1) {
+			state.providerCycleIndex = (state.providerCycleIndex + 1) % total;
+			const nextProvider = enabledProviders[state.providerCycleIndex];
+			const result = await fetchUsageForProvider(deps, settings, nextProvider);
+			if (!isUsageAvailable(result.usage)) {
+				continue;
+			}
+			state.currentProvider = nextProvider;
+			state.cachedUsage = result.usage ? { ...result.usage, status: result.status } : undefined;
+			emitUpdate(state, onUpdate);
+			return;
+		}
+
+		state.currentProvider = undefined;
+		state.cachedUsage = undefined;
+		emitUpdate(state, onUpdate);
+	}
+
+	function isUsageAvailable(usage: UsageSnapshot | undefined): usage is UsageSnapshot {
+		if (!usage) return false;
+		if (usage.windows.length > 0) return true;
+		if (!usage.error) return false;
+		return !isExpectedMissingData(usage.error);
+	}
+
+	return {
+		getEnabledProviders,
+		resolveProvider,
+		refresh,
+		refreshStatus,
+		cycleProvider,
+	};
+}