@wahack/pi-coding-agent 15.11.0

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

@@ -0,0 +1,201 @@
+import { padding, truncateToWidth, visibleWidth } from './stubs/tui/index.ts';
+import { gradientEscape, gradientLogo, PI_LOGO, type ShineConfig } from "../../components/welcome";
+import { theme } from "../../theme/theme";
+
+export const SETUP_SPLASH_MS = 2600;
+export const SETUP_TICK_MS = 33;
+
+/** Brand mark at 2x: every glyph doubled horizontally, every row doubled vertically. */
+const LARGE_LOGO = PI_LOGO.flatMap(line => {
+	let wide = "";
+	for (const char of line) {
+		wide += char === " " ? "  " : `${char}${char}`;
+	}
+	return [wide, wide];
+});
+const LOGO_WIDTH = Math.max(...LARGE_LOGO.map(line => visibleWidth(line)));
+const LOGO_HEIGHT = LARGE_LOGO.length;
+const RESET = "\x1b[0m";
+
+/** Full scene needs comfortable room; below this we drop to a centered mark. */
+const MIN_SCENE_WIDTH = 56;
+const MIN_SCENE_HEIGHT = 22;
+
+const SKIP_HINT = "press enter to skip";
+
+/** Density ramp for the rippling water, lightest → heaviest. */
+const WATER_RAMP = [
+	{ min: 0.62, char: "█" },
+	{ min: 0.5, char: "▓" },
+	{ min: 0.36, char: "▒" },
+	{ min: 0.24, char: "░" },
+];
+
+function clampLine(line: string, width: number): string {
+	const truncated = truncateToWidth(line, width);
+	return truncated + padding(Math.max(0, width - visibleWidth(truncated)));
+}
+
+function centerLine(line: string, width: number): string {
+	const lineWidth = visibleWidth(line);
+	if (lineWidth >= width) return truncateToWidth(line, width);
+	const left = Math.floor((width - lineWidth) / 2);
+	return padding(left) + line + padding(width - left - lineWidth);
+}
+
+function starAt(x: number, y: number, frame: number): string {
+	const hash = (x * 73856093) ^ (y * 19349663) ^ (frame * 83492791);
+	const bucket = Math.abs(hash) % 97;
+	if (bucket === 0) return theme.fg("accent", "✦");
+	if (bucket === 1) return theme.fg("muted", "·");
+	return " ";
+}
+
+export function renderStarfield(width: number, height: number, frame: number): string[] {
+	const lines: string[] = [];
+	for (let y = 0; y < height; y++) {
+		let line = "";
+		for (let x = 0; x < width; x++) {
+			line += starAt(x, y, frame >> 3);
+		}
+		lines.push(line);
+	}
+	return lines;
+}
+
+/** Continuous diagonal gradient position (bottom-left → top-right) across the whole screen. */
+function screenGradientT(x: number, y: number, width: number, height: number, phase: number): number {
+	const span = Math.max(1, width + height - 1);
+	const base = (x + (height - 1 - y)) / span;
+	return (((base + phase) % 1) + 1) % 1;
+}
+
+/** Twinkling sparkle for the upper "sky". Returns a styled glyph, or null for empty space. */
+function skyGlyph(x: number, y: number, frame: number): string | null {
+	const hash = (x * 73856093) ^ (y * 19349663) ^ (frame * 83492791);
+	const bucket = Math.abs(hash) % 150;
+	if (bucket === 0) return theme.fg("accent", "✦");
+	if (bucket === 1) return theme.fg("border", "✧");
+	if (bucket === 2) return theme.fg("border", "·");
+	return null;
+}
+
+/** Static value-jitter in [0,1) that softens the water's threshold banding. */
+function waterJitter(x: number, y: number): number {
+	let h = Math.imul(x, 374761393) + Math.imul(y, 668265263);
+	h = Math.imul(h ^ (h >>> 13), 1274126177);
+	h ^= h >>> 16;
+	return (h >>> 0) / 4294967296;
+}
+
+/**
+ * Rippling water amplitude in [0,1] at (x, y): three travelling sine waves
+ * interfere, then a radial edge falloff and a downward fade concentrate the
+ * ripples beneath the mark and dissolve them toward the edges/bottom. `t`
+ * advances each tick, so the surface drifts.
+ */
+function waterAmplitude(
+	x: number,
+	y: number,
+	cx: number,
+	waterTop: number,
+	waterHeight: number,
+	width: number,
+	t: number,
+): number {
+	const dx = (x - cx) / 2;
+	const dy = y - waterTop;
+	const dist = Math.sqrt(dx * dx + dy * dy);
+	const wave =
+		0.5 * Math.sin(dist * 0.55 - t) +
+		0.3 * Math.sin(x * 0.22 + y * 0.45 - t * 0.7) +
+		0.2 * Math.sin(Math.abs(dx) * 0.8 + dy * 0.5 - t * 1.4);
+	const level = 0.5 + 0.5 * wave;
+	const edge = Math.max(0, 1 - Math.abs(x - cx) / (width * 0.5));
+	const fade = Math.max(0, 1 - (dy / Math.max(1, waterHeight)) * 0.55);
+	return level * edge ** 0.7 * fade;
+}
+
+/**
+ * Animated setup splash, in the spirit of the omp landing page: the brand π
+ * mark rendered with the live diagonal gradient + shine sweep, rising out of a
+ * rippling, gradient-lit water surface, under a faint twinkling starfield. The
+ * mark and water share one continuous gradient so the sweep reads across the
+ * whole scene; the water surface drifts each frame.
+ */
+export function renderSetupSplash(width: number, height: number, elapsedMs: number): string[] {
+	const w = Math.max(1, width);
+	const h = Math.max(1, height);
+	const progress = Math.max(0, Math.min(1, elapsedMs / SETUP_SPLASH_MS));
+	const phase = progress * 1.8;
+	const shine: ShineConfig = { pos: (progress * 2.5) % 1, strength: Math.max(0, 1 - progress * 0.35) };
+
+	if (w < MIN_SCENE_WIDTH || h < MIN_SCENE_HEIGHT) return renderCompactSplash(w, h, phase, shine);
+
+	const frame = Math.floor(elapsedMs / SETUP_TICK_MS);
+	const cx = Math.floor(w / 2);
+	const surfaceTime = frame * 0.13;
+
+	const cells: string[][] = Array.from({ length: h }, () => new Array<string>(w).fill(" "));
+	const put = (x: number, y: number, glyph: string): void => {
+		if (y >= 0 && y < h && x >= 0 && x < w) cells[y][x] = glyph;
+	};
+
+	const hx = Math.floor((w - LOGO_WIDTH) / 2);
+	const hy = Math.max(2, Math.floor(h * 0.16));
+	const waterTop = hy + LOGO_HEIGHT;
+	const waterHeight = Math.max(1, h - waterTop);
+
+	// 1. rippling water surface (shares the screen-wide gradient with the mark)
+	for (let y = waterTop; y < h; y++) {
+		for (let x = 0; x < w; x++) {
+			const amp = waterAmplitude(x, y, cx, waterTop, waterHeight, w, surfaceTime) + (waterJitter(x, y) - 0.5) * 0.06;
+			const cell = WATER_RAMP.find(step => amp > step.min);
+			if (cell) put(x, y, gradientEscape(screenGradientT(x, y, w, h, phase), shine) + cell.char + RESET);
+		}
+	}
+	// 2. twinkling starfield in the sky above the water
+	for (let y = 0; y < waterTop - 1; y++) {
+		for (let x = 0; x < w; x++) {
+			const star = skyGlyph(x, y, frame >> 3);
+			if (star) put(x, y, star);
+		}
+	}
+	// 3. hero — the brand mark with the live gradient + shine sweep
+	LARGE_LOGO.forEach((line, row) => {
+		let col = 0;
+		for (const ch of line) {
+			if (ch !== " ") {
+				put(
+					hx + col,
+					hy + row,
+					gradientEscape(screenGradientT(hx + col, hy + row, w, h, phase), shine) + ch + RESET,
+				);
+			}
+			col++;
+		}
+	});
+	// 4. skip hint on a cleared strip at the bottom so it stays legible over the water
+	const hintWidth = visibleWidth(SKIP_HINT);
+	const hintStart = Math.floor((w - hintWidth) / 2);
+	const hintRow = h - 1;
+	for (let x = hintStart - 1; x <= hintStart + hintWidth; x++) put(x, hintRow, " ");
+	let col = hintStart;
+	for (const ch of SKIP_HINT) put(col++, hintRow, ch === " " ? " " : theme.fg("dim", ch));
+
+	return cells.map(row => row.join(""));
+}
+
+/** Centered fallback for windows too small to hold the full scene. */
+function renderCompactSplash(width: number, height: number, phase: number, shine: ShineConfig): string[] {
+	const art = height >= 14 ? LARGE_LOGO : PI_LOGO;
+	const content = [...gradientLogo(art, phase, shine), "", theme.bold("O h   M y   P i")];
+	const start = Math.max(0, Math.floor((height - content.length) / 2));
+	const lines: string[] = [];
+	for (let y = 0; y < height; y++) {
+		const item = content[y - start];
+		lines.push(clampLine(item !== undefined ? centerLine(item, width) : "", width));
+	}
+	if (height > 2) lines[height - 2] = clampLine(centerLine(theme.fg("dim", SKIP_HINT), width), width);
+	return lines;
+}

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

@@ -0,0 +1,299 @@
+import { padding, type SelectItem, SelectList, truncateToWidth, visibleWidth } from './stubs/tui/index.ts';
+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): readonly 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 './stubs/tui/index.ts';
+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): readonly 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,129 @@
+import { type SelectItem, SelectList, truncateToWidth } from './stubs/tui/index.ts';
+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) or an
+ * unauthenticated fallback.
+ */
+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): readonly 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.isExplicitlyAvailable(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`)];
+	}
+}