@oh-my-pi/pi-coding-agent 15.6.0 → 15.7.0

package/src/modes/setup-wizard/scenes/theme.ts

@@ -0,0 +1,299 @@
+import { padding, type SelectItem, SelectList, truncateToWidth, visibleWidth } from "@oh-my-pi/pi-tui";
+import {
+	enableAutoTheme,
+	getAvailableThemes,
+	getCurrentThemeName,
+	getSelectListTheme,
+	isLightTheme,
+	previewTheme,
+	type SymbolPreset,
+	setColorBlindMode,
+	setSymbolPreset,
+	theme,
+} from "../../theme/theme";
+import type { SetupScene, SetupSceneController, SetupSceneHost } from "./types";
+
+type ThemeMode = "curated" | "all";
+
+const CURATED_ITEMS: readonly SelectItem[] = [
+	{ value: "auto", label: "Match terminal", description: "Titanium in dark terminals, Light in light terminals" },
+	{ value: "theme:titanium", label: "Titanium", description: "Default dark theme" },
+	{ value: "theme:light", label: "Light", description: "Default light theme" },
+	{ value: "colorblind", label: "Colorblind colors", description: "Adjust red/green contrast" },
+	{ value: "ansi", label: "ANSI-safe", description: "ASCII glyphs with the dark terminal theme" },
+	{ value: "browse", label: "Browse all…", description: "Show every built-in and custom theme" },
+];
+
+function fitLine(line: string, width: number): string {
+	const truncated = truncateToWidth(line, width);
+	return truncated + padding(Math.max(0, width - visibleWidth(truncated)));
+}
+
+function fillStyledLine(content: string, width: number): string {
+	return content + padding(Math.max(0, width - visibleWidth(content)));
+}
+
+function renderMockStatusLine(width: number): string {
+	const sep = theme.fg("statusLineSep", ` ${theme.sep.pipe} `);
+	const left = [
+		theme.fg("statusLineModel", `${theme.icon.model} sonnet`),
+		theme.fg("statusLinePath", "~/project"),
+		theme.fg("statusLineGitDirty", `${theme.icon.git} main +2`),
+	].join(sep);
+	const right = [
+		theme.fg("statusLineContext", `${theme.icon.context} 42%`),
+		theme.fg("statusLineCost", `${theme.icon.cost} 0.18`),
+	].join(sep);
+	const innerWidth = Math.max(1, width - 2);
+	const leftWidth = visibleWidth(left);
+	const rightWidth = visibleWidth(right);
+	const gap = padding(Math.max(1, innerWidth - leftWidth - rightWidth - 2));
+	return theme.bg("statusLineBg", fitLine(` ${left}${gap}${right} `, width));
+}
+
+function renderMockEditor(width: number): string[] {
+	const box = theme.boxRound;
+	const innerWidth = Math.max(1, width - 2);
+	const horizontal = box.horizontal.repeat(innerWidth);
+	const top = theme.fg("borderAccent", `${box.topLeft}${horizontal}${box.topRight}`);
+	const bottom = theme.fg("borderMuted", `${box.bottomLeft}${horizontal}${box.bottomRight}`);
+	const prompt = `${theme.fg("accent", ">")} ${theme.fg("text", "Ask anything, edit files, run tools")}${theme.inverse(" ")}`;
+	const hint = theme.fg("dim", "enter send · shift+enter newline · / commands");
+	return [
+		top,
+		`${theme.fg("borderAccent", box.vertical)}${fitLine(prompt, innerWidth)}${theme.fg("borderAccent", box.vertical)}`,
+		`${theme.fg("borderMuted", box.vertical)}${fillStyledLine(hint, innerWidth)}${theme.fg("borderMuted", box.vertical)}`,
+		bottom,
+	];
+}
+
+function renderThemePreview(width: number): string[] {
+	const previewWidth = Math.max(24, Math.min(width, 88));
+	return [
+		theme.bold("Preview"),
+		`${theme.fg("success", `${theme.status.success} success`)}  ${theme.fg("warning", `${theme.status.warning} warning`)}  ${theme.fg("error", `${theme.status.error} error`)}  ${theme.fg("accent", "accent")}`,
+		"",
+		theme.fg("muted", "Status line"),
+		renderMockStatusLine(previewWidth),
+		theme.fg("muted", "Editor"),
+		...renderMockEditor(previewWidth),
+	];
+}
+
+class ThemeSceneController implements SetupSceneController {
+	title = "Pick a theme";
+	subtitle = "Move through the list to preview; Enter saves the highlighted choice.";
+	#mode: ThemeMode = "curated";
+	#selectList: SelectList;
+	#loadingAllThemes = false;
+	#message: string | undefined;
+	#previewRequest = 0;
+	#disposed = false;
+	readonly #originalTheme = getCurrentThemeName();
+	readonly #originalSymbolPreset: SymbolPreset;
+	readonly #originalColorBlindMode: boolean;
+
+	constructor(private readonly host: SetupSceneHost) {
+		this.#originalSymbolPreset = host.ctx.settings.get("symbolPreset");
+		this.#originalColorBlindMode = host.ctx.settings.get("colorBlindMode");
+		this.#selectList = this.#createSelectList(CURATED_ITEMS, this.#currentCuratedIndex());
+	}
+
+	dispose(): void {
+		this.#disposed = true;
+	}
+
+	invalidate(): void {
+		this.#selectList.invalidate();
+	}
+
+	handleInput(data: string): void {
+		const quickIndex = data >= "1" && data <= "9" ? Number(data) - 1 : -1;
+		if (quickIndex >= 0) {
+			this.#selectList.setSelectedIndex(quickIndex);
+			this.#previewByIndex(quickIndex);
+			return;
+		}
+		this.#selectList.handleInput(data);
+	}
+
+	render(width: number): string[] {
+		const lines = [
+			theme.fg("muted", "Theme changes preview live. Nothing is saved until you press Enter."),
+			this.#mode === "all"
+				? theme.fg("dim", "Browsing all themes · Esc returns to curated choices")
+				: theme.fg("dim", "Esc skips this step"),
+			"",
+			...renderThemePreview(width),
+			"",
+		];
+		if (this.#loadingAllThemes) {
+			lines.push(theme.fg("dim", "Loading themes…"));
+		} else {
+			lines.push(...this.#selectList.render(width));
+		}
+		if (this.#message) {
+			lines.push("", this.#message);
+		}
+		return lines;
+	}
+
+	#createSelectList(items: readonly SelectItem[], selectedIndex: number): SelectList {
+		const list = new SelectList(items, Math.min(10, Math.max(1, items.length)), getSelectListTheme());
+		list.setSelectedIndex(selectedIndex);
+		list.onSelectionChange = item => {
+			void this.#preview(item.value);
+		};
+		list.onSelect = item => {
+			void this.#select(item.value);
+		};
+		list.onCancel = () => {
+			if (this.#mode === "all") {
+				this.#mode = "curated";
+				this.#selectList = this.#createSelectList(CURATED_ITEMS, this.#currentCuratedIndex());
+				this.host.requestRender();
+				return;
+			}
+			this.#restorePreview();
+			this.host.finish("skipped");
+		};
+		return list;
+	}
+
+	#currentCuratedIndex(): number {
+		const current = getCurrentThemeName();
+		if (current === "titanium") return 1;
+		if (current === "light") return 2;
+		return 0;
+	}
+
+	#previewByIndex(index: number): void {
+		const items = this.#mode === "curated" ? CURATED_ITEMS : undefined;
+		const value = items?.[index]?.value;
+		if (value) void this.#preview(value);
+	}
+
+	async #select(value: string): Promise<void> {
+		if (value === "browse") {
+			await this.#showAllThemes();
+			return;
+		}
+		await this.#commit(value);
+		this.host.finish("done");
+	}
+
+	async #showAllThemes(): Promise<void> {
+		if (this.#loadingAllThemes) return;
+		this.#loadingAllThemes = true;
+		this.#message = undefined;
+		this.host.requestRender();
+		try {
+			const themes = await getAvailableThemes();
+			if (this.#disposed) return;
+			const items = themes.map(name => ({
+				value: `theme:${name}`,
+				label: name,
+				description: name === this.#originalTheme ? "current" : undefined,
+			}));
+			const selectedIndex = Math.max(0, themes.indexOf(this.#originalTheme ?? ""));
+			this.#mode = "all";
+			this.#selectList = this.#createSelectList(items, selectedIndex);
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			this.#message = theme.fg("error", `Failed to load themes: ${message}`);
+		} finally {
+			this.#loadingAllThemes = false;
+			this.host.requestRender();
+		}
+	}
+
+	async #commit(value: string): Promise<void> {
+		if (value === "auto") {
+			this.host.ctx.settings.set("theme.dark", "titanium");
+			this.host.ctx.settings.set("theme.light", "light");
+			await this.#applyPreviewPresentation(this.#originalSymbolPreset, this.#originalColorBlindMode);
+			enableAutoTheme();
+			return;
+		}
+		if (value === "colorblind") {
+			this.host.ctx.settings.set("colorBlindMode", true);
+			await this.#applyPreviewPresentation(this.#originalSymbolPreset, true);
+			return;
+		}
+		if (value === "ansi") {
+			this.host.ctx.settings.set("symbolPreset", "ascii");
+			this.host.ctx.settings.set("theme.dark", "dark-terminal");
+			await this.#applyPreviewPresentation("ascii", this.#originalColorBlindMode);
+			enableAutoTheme();
+			return;
+		}
+		const themeName = this.#themeNameFromValue(value);
+		if (!themeName) return;
+		await this.#applyPreviewPresentation(this.#originalSymbolPreset, this.#originalColorBlindMode);
+		if (isLightTheme(themeName)) {
+			this.host.ctx.settings.set("theme.light", themeName);
+		} else {
+			this.host.ctx.settings.set("theme.dark", themeName);
+		}
+		await previewTheme(themeName);
+	}
+
+	async #preview(value: string): Promise<void> {
+		const request = ++this.#previewRequest;
+		this.#message = undefined;
+		if (value === "browse") {
+			this.host.requestRender();
+			return;
+		}
+
+		let result: { success: boolean; error?: string } = { success: true };
+		if (value === "auto") {
+			await this.#applyPreviewPresentation(this.#originalSymbolPreset, this.#originalColorBlindMode);
+			enableAutoTheme();
+		} else if (value === "colorblind") {
+			await this.#applyPreviewPresentation(this.#originalSymbolPreset, true);
+		} else if (value === "ansi") {
+			await this.#applyPreviewPresentation("ascii", this.#originalColorBlindMode);
+			result = await previewTheme("dark-terminal");
+		} else {
+			const themeName = this.#themeNameFromValue(value);
+			if (themeName) {
+				await this.#applyPreviewPresentation(this.#originalSymbolPreset, this.#originalColorBlindMode);
+				result = await previewTheme(themeName);
+			}
+		}
+		if (request !== this.#previewRequest || this.#disposed) return;
+		if (!result.success) {
+			this.#message = theme.fg("error", result.error ?? "Theme preview failed");
+		}
+		this.host.ctx.ui.invalidate();
+		this.host.requestRender();
+	}
+
+	async #applyPreviewPresentation(symbolPreset: SymbolPreset, colorBlindMode: boolean): Promise<void> {
+		await setSymbolPreset(symbolPreset);
+		await setColorBlindMode(colorBlindMode);
+	}
+
+	#restorePreview(): void {
+		void (async () => {
+			await this.#applyPreviewPresentation(this.#originalSymbolPreset, this.#originalColorBlindMode);
+			if (this.#originalTheme) {
+				await previewTheme(this.#originalTheme);
+			}
+			this.host.ctx.ui.invalidate();
+			this.host.requestRender();
+		})();
+	}
+
+	#themeNameFromValue(value: string): string | undefined {
+		return value.startsWith("theme:") ? value.slice("theme:".length) : undefined;
+	}
+}
+
+export const themeSetupScene: SetupScene = {
+	id: "theme",
+	title: "Pick a theme",
+	minVersion: 1,
+	mount: host => new ThemeSceneController(host),
+};

package/src/modes/setup-wizard/scenes/types.ts

@@ -0,0 +1,48 @@
+import type { Component } from "@oh-my-pi/pi-tui";
+import type { InteractiveModeContext } from "../../types";
+
+export type SetupSceneResult = "done" | "skipped";
+
+export interface SetupSceneHost {
+	ctx: InteractiveModeContext;
+	requestRender(): void;
+	finish(result: SetupSceneResult): void;
+	setFocus(component: Component | null): void;
+	restoreFocus(): void;
+}
+
+export interface SetupSceneController extends Component {
+	title: string;
+	subtitle?: string;
+	onMount?(): void | Promise<void>;
+	onUnmount?(): void;
+	dispose?(): void;
+}
+
+/**
+ * A single panel inside a tabbed setup scene. The host scene owns the tab bar
+ * and forwards rendering/input to the active tab.
+ */
+export interface SetupTab {
+	readonly id: string;
+	readonly label: string;
+	/**
+	 * While `true` the tab owns all keyboard input (e.g. an in-progress OAuth
+	 * login). The parent scene MUST NOT switch tabs or finish while modal.
+	 */
+	readonly modal: boolean;
+	render(width: number): string[];
+	handleInput(data: string): void;
+	invalidate(): void;
+	/** Called when the tab becomes active (including initial mount). */
+	onActivate?(): void;
+	dispose(): void;
+}
+
+export interface SetupScene {
+	id: string;
+	title: string;
+	minVersion: number;
+	shouldRun?(ctx: InteractiveModeContext): boolean | Promise<boolean>;
+	mount(host: SetupSceneHost): SetupSceneController;
+}

package/src/modes/setup-wizard/scenes/web-search.ts

@@ -0,0 +1,128 @@
+import { type SelectItem, SelectList, truncateToWidth } from "@oh-my-pi/pi-tui";
+import { SETTINGS_SCHEMA } from "../../../config/settings-schema";
+import { getSearchProvider, setPreferredSearchProvider } from "../../../web/search/provider";
+import { isSearchProviderPreference, type SearchProviderId } from "../../../web/search/types";
+import { getSelectListTheme, theme } from "../../theme/theme";
+import type { SetupSceneHost, SetupTab } from "./types";
+
+const MAX_VISIBLE = 8;
+
+/** Reuse the settings schema as the single source of truth for labels/descriptions. */
+const WEB_SEARCH_ITEMS: readonly SelectItem[] = SETTINGS_SCHEMA["providers.webSearch"].ui.options.map(option => ({
+	value: option.value,
+	label: option.label,
+	description: option.description,
+}));
+
+type Availability = "checking" | boolean;
+
+/**
+ * "Web search" panel: picks the provider the web_search tool should prefer and
+ * reports whether the highlighted provider is ready to use given current
+ * credentials (env keys or OAuth sign-ins from the Sign in tab).
+ */
+export class WebSearchTab implements SetupTab {
+	readonly id = "web-search";
+	readonly label = "Web search";
+	readonly modal = false;
+
+	#list: SelectList;
+	#availability = new Map<SearchProviderId, Availability>();
+	#status: string[] = [];
+	#disposed = false;
+
+	constructor(private readonly host: SetupSceneHost) {
+		this.#list = new SelectList(WEB_SEARCH_ITEMS, MAX_VISIBLE, getSelectListTheme());
+		const current = host.ctx.settings.get("providers.webSearch");
+		const index = WEB_SEARCH_ITEMS.findIndex(item => item.value === current);
+		if (index >= 0) this.#list.setSelectedIndex(index);
+		this.#list.onSelectionChange = item => this.#onHighlight(item.value);
+		this.#list.onSelect = item => this.#apply(item.value);
+		this.#list.onCancel = () => host.finish("skipped");
+	}
+
+	onActivate(): void {
+		// Auth may have changed in the Sign in tab; re-check from scratch.
+		this.#availability.clear();
+		this.#status = [];
+		const selected = this.#list.getSelectedItem();
+		if (selected) this.#onHighlight(selected.value);
+		this.host.requestRender();
+	}
+
+	handleInput(data: string): void {
+		this.#list.handleInput(data);
+	}
+
+	invalidate(): void {
+		this.#list.invalidate();
+	}
+
+	dispose(): void {
+		this.#disposed = true;
+	}
+
+	render(width: number): string[] {
+		const lines = [
+			theme.fg("muted", "Choose the provider the web_search tool should prefer."),
+			"",
+			...this.#list.render(width),
+		];
+		const selected = this.#list.getSelectedItem();
+		if (selected) {
+			lines.push("", ...this.#readinessLines(selected.value).map(line => truncateToWidth(line, width)));
+		}
+		if (this.#status.length > 0) {
+			lines.push("", ...this.#status.map(line => truncateToWidth(line, width)));
+		}
+		return lines;
+	}
+
+	#onHighlight(value: string): void {
+		this.#status = [];
+		if (value !== "auto") this.#checkAvailability(value as SearchProviderId);
+		this.host.requestRender();
+	}
+
+	#checkAvailability(id: SearchProviderId): void {
+		if (this.#availability.has(id)) return;
+		this.#availability.set(id, "checking");
+		void (async () => {
+			let ready = false;
+			try {
+				const provider = await getSearchProvider(id);
+				ready = await provider.isAvailable(this.host.ctx.session.modelRegistry.authStorage);
+			} catch {
+				ready = false;
+			}
+			if (this.#disposed) return;
+			this.#availability.set(id, ready);
+			this.host.requestRender();
+		})();
+	}
+
+	#apply(value: string): void {
+		if (!isSearchProviderPreference(value)) return;
+		this.host.ctx.settings.set("providers.webSearch", value);
+		setPreferredSearchProvider(value);
+		const label = WEB_SEARCH_ITEMS.find(item => item.value === value)?.label ?? value;
+		this.#status = [theme.fg("success", `${theme.status.success} Web search set to ${label}`)];
+		if (value !== "auto" && this.#availability.get(value as SearchProviderId) === false) {
+			this.#status.push(theme.fg("dim", "Not configured yet — add its API key or sign in to enable it."));
+		}
+		this.host.requestRender();
+	}
+
+	#readinessLines(value: string): string[] {
+		if (value === "auto") {
+			return [theme.fg("dim", "Automatically uses the first configured provider.")];
+		}
+		const state = this.#availability.get(value as SearchProviderId);
+		if (state === undefined || state === "checking") {
+			return [theme.fg("dim", "Checking availability…")];
+		}
+		return state
+			? [theme.fg("success", `${theme.status.success} Ready to use`)]
+			: [theme.fg("warning", `${theme.status.pending} Needs credentials`)];
+	}
+}