@eiei114/pi-sub-bar 1.5.1

package/src/settings/ui.ts

@@ -0,0 +1,1388 @@
+/**
+ * Settings UI for sub-bar
+ */
+
+import type { ExtensionContext } from "@mariozechner/pi-coding-agent";
+import { DynamicBorder, getSettingsListTheme } from "@mariozechner/pi-coding-agent";
+import { Container, Input, SelectList, Spacer, Text } from "@mariozechner/pi-tui";
+import { SettingsList, type SettingItem, CUSTOM_OPTION } from "../ui/settings-list.js";
+import type { ProviderName } from "../types.js";
+import type { Settings } from "../settings-types.js";
+import type { CoreSettings } from "@eiei114/pi-sub-shared";
+import { getFallbackCoreSettings } from "../core-settings.js";
+import { getDefaultSettings } from "../settings-types.js";
+import { getSettings, saveSettings } from "../settings.js";
+import { PROVIDER_DISPLAY_NAMES } from "../providers/metadata.js";
+import { buildProviderSettingsItems, applyProviderSettingsChange } from "../providers/settings.js";
+import {
+	buildDisplayLayoutItems,
+	buildDisplayResetItems,
+	buildDisplayColorItems,
+	buildDisplayBarItems,
+	buildDisplayProviderItems,
+	buildDisplayStatusItems,
+	buildDisplayDividerItems,
+	buildUsageColorTargetItems,
+	formatUsageColorTargetsSummary,
+	applyDisplayChange,
+} from "./display.js";
+import {
+	buildMainMenuItems,
+	buildProviderListItems,
+	buildDisplayMenuItems,
+	buildDisplayThemeMenuItems,
+	getProviderFromCategory,
+	type TooltipSelectItem,
+} from "./menu.js";
+import {
+	buildDisplayThemeItems,
+	buildThemeActionItems,
+	buildRandomDisplay,
+	resolveDisplayThemeTarget,
+	saveDisplayTheme,
+	renameDisplayTheme,
+	upsertDisplayTheme,
+} from "./themes.js";
+import {
+	buildDisplayShareString,
+	buildDisplayShareStringWithoutName,
+	decodeDisplayShareString,
+	type DecodedDisplayShare,
+} from "../share.js";
+
+/**
+ * Settings category
+ */
+type ProviderCategory = `provider-${ProviderName}`;
+
+type SettingsCategory =
+	| "main"
+	| "providers"
+	| "pin-provider"
+	| ProviderCategory
+	| "keybindings"
+	| "display"
+	| "display-theme"
+	| "display-theme-save"
+	| "display-theme-share"
+	| "display-theme-load"
+	| "display-theme-action"
+	| "display-theme-import"
+	| "display-theme-import-action"
+	| "display-theme-import-name"
+	| "display-theme-rename"
+	| "display-theme-random"
+	| "display-theme-restore"
+	| "display-layout"
+	| "display-bar"
+	| "display-provider"
+	| "display-reset"
+	| "display-status"
+	| "display-divider"
+	| "display-color";
+
+/**
+ * Show the settings UI
+ */
+export async function showSettingsUI(
+	ctx: ExtensionContext,
+	options?: {
+		coreSettings?: CoreSettings;
+		onSettingsChange?: (settings: Settings) => void | Promise<void>;
+		onCoreSettingsChange?: (patch: Partial<CoreSettings>, next: CoreSettings) => void | Promise<void>;
+		onOpenCoreSettings?: () => void | Promise<void>;
+		onDisplayThemeApplied?: (name: string, options?: { source?: "manual" }) => void | Promise<void>;
+		onDisplayThemeShared?: (name: string, shareString: string, mode?: "prompt" | "gist" | "string") => void | Promise<void>;
+	}
+): Promise<Settings> {
+	const onSettingsChange = options?.onSettingsChange;
+	const onCoreSettingsChange = options?.onCoreSettingsChange;
+	const onOpenCoreSettings = options?.onOpenCoreSettings;
+	let settings = getSettings();
+	let coreSettings = options?.coreSettings ?? getFallbackCoreSettings(settings);
+	const onDisplayThemeApplied = options?.onDisplayThemeApplied;
+	const onDisplayThemeShared = options?.onDisplayThemeShared;
+	let currentCategory: SettingsCategory = "main";
+
+	return new Promise((resolve) => {
+		ctx.ui.custom<Settings>((tui, theme, _kb, done) => {
+			let container = new Container();
+			let activeList: SelectList | SettingsList | { handleInput: (data: string) => void } | null = null;
+			let themeActionTarget: { id?: string; name: string; display: Settings["display"]; deletable: boolean } | null = null;
+			let displayPreviewBackup: Settings["display"] | null = null;
+			let randomThemeBackup: Settings["display"] | null = null;
+			let displayThemeSelection: string | null = null;
+			let pinnedProviderBackup: ProviderName | null | undefined;
+			let importCandidate: DecodedDisplayShare | null = null;
+			let importBackup: Settings["display"] | null = null;
+			let importPendingAction: "save" | "save-apply" | null = null;
+			let pendingShare: { name: string; shareString: string; backCategory: SettingsCategory } | null = null;
+			const segmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+
+			const clamp = (value: number, min: number, max: number): number => Math.min(max, Math.max(min, value));
+
+			const buildInputSubmenu = (
+				label: string,
+				parseValue: (value: string) => string | null,
+				formatInitial?: (value: string) => string,
+				description?: string,
+			) => {
+				return (currentValue: string, done: (selectedValue?: string) => void) => {
+					const input = new Input();
+					input.focused = true;
+					input.setValue(formatInitial ? formatInitial("") : "");
+					input.onSubmit = (value) => {
+						const parsed = parseValue(value);
+						if (!parsed) return;
+						done(parsed);
+					};
+					input.onEscape = () => {
+						done();
+					};
+
+					const container = new Container();
+					container.addChild(new Text(theme.fg("muted", label), 1, 0));
+					if (description) {
+						container.addChild(new Text(theme.fg("dim", description), 1, 0));
+					}
+					container.addChild(new Spacer(1));
+					container.addChild(input);
+
+					return {
+						render: (width: number) => container.render(width),
+						invalidate: () => container.invalidate(),
+						handleInput: (data: string) => input.handleInput(data),
+					};
+				};
+			};
+
+			const requestThemeShare = (name: string, shareString: string, backCategory: SettingsCategory) => {
+				pendingShare = { name, shareString, backCategory };
+				displayThemeSelection = "display-theme-share";
+				currentCategory = "display-theme-share";
+				rebuild();
+				tui.requestRender();
+			};
+
+			const parseInteger = (raw: string, min: number, max: number): string | null => {
+				const trimmed = raw.trim().replace(/%$/, "");
+				if (!trimmed) {
+					ctx.ui.notify("Enter a value", "warning");
+					return null;
+				}
+				const parsed = Number.parseInt(trimmed, 10);
+				if (Number.isNaN(parsed)) {
+					ctx.ui.notify("Enter a number", "warning");
+					return null;
+				}
+				return String(clamp(parsed, min, max));
+			};
+
+			const parseBarWidth = (raw: string): string | null => {
+				const trimmed = raw.trim().toLowerCase();
+				if (!trimmed) {
+					ctx.ui.notify("Enter a value", "warning");
+					return null;
+				}
+				if (trimmed === "fill") {
+					if ((settings.display.widgetPlacement ?? "belowEditor") === "status") {
+						ctx.ui.notify("fill is unavailable in status-line placement", "warning");
+						return null;
+					}
+					return "fill";
+				}
+				return parseInteger(trimmed, 0, 100);
+			};
+
+			const parseDividerBlanks = (raw: string): string | null => {
+				const trimmed = raw.trim().toLowerCase();
+				if (!trimmed) {
+					ctx.ui.notify("Enter a value", "warning");
+					return null;
+				}
+				if (trimmed === "fill") return "fill";
+				return parseInteger(trimmed, 0, 100);
+			};
+
+			const parseResetContainment = (raw: string): string | null => {
+				const trimmed = raw.trim();
+				if (!trimmed) {
+					ctx.ui.notify("Enter 1-2 characters", "warning");
+					return null;
+				}
+				const normalized = trimmed.toLowerCase();
+				if (["none", "blank", "()", "[]", "<>"].includes(normalized)) {
+					return normalized;
+				}
+				const segments = Array.from(segmenter.segment(trimmed), (entry) => entry.segment)
+					.map((segment) => segment.trim())
+					.filter(Boolean);
+				if (segments.length === 0) {
+					ctx.ui.notify("Enter 1-2 characters", "warning");
+					return null;
+				}
+				const first = segments[0];
+				const second = segments[1] ?? first;
+				return `${first}${second}`;
+			};
+
+			const parseDividerCharacter = (raw: string): string | null => {
+				const trimmed = raw.trim();
+				if (!trimmed) {
+					ctx.ui.notify("Enter a character", "warning");
+					return null;
+				}
+				const normalized = trimmed.toLowerCase();
+				if (normalized === "none" || normalized === "blank") {
+					return normalized;
+				}
+				const iterator = segmenter.segment(trimmed)[Symbol.iterator]();
+				const first = iterator.next().value?.segment ?? trimmed[0];
+				return first;
+			};
+
+			const parseBarCharacter = (raw: string): string | null => {
+				const trimmed = raw.trim();
+				if (!trimmed) {
+					ctx.ui.notify("Enter a character", "warning");
+					return null;
+				}
+				const normalized = trimmed.toLowerCase();
+				if (["light", "heavy", "double", "block"].includes(normalized)) {
+					return normalized;
+				}
+				const segments = Array.from(segmenter.segment(raw), (entry) => entry.segment).filter((segment) => segment !== "\n" && segment !== "\r");
+				const first = segments[0] ?? trimmed[0];
+				const second = segments[1];
+				return second ? `${first}${second}` : first;
+			};
+
+			const parseStatusIconCustom = (raw: string): string | null => {
+				const trimmed = raw.trim();
+				if (!trimmed) {
+					ctx.ui.notify("Enter four characters", "warning");
+					return null;
+				}
+				const segments = Array.from(segmenter.segment(trimmed), (entry) => entry.segment)
+					.map((segment) => segment.trim())
+					.filter(Boolean);
+				if (segments.length < 4) {
+					ctx.ui.notify("Enter four characters", "warning");
+					return null;
+				}
+				return segments.slice(0, 4).join("");
+			};
+
+			const parseProviderLabel = (raw: string): string | null => {
+				const trimmed = raw.trim();
+				if (!trimmed) {
+					ctx.ui.notify("Enter a label", "warning");
+					return null;
+				}
+				const normalized = trimmed.toLowerCase();
+				if (["none", "plan", "subscription", "sub"].includes(normalized)) {
+					return normalized;
+				}
+				return trimmed;
+			};
+
+			const attachCustomInputs = (
+				items: SettingItem[],
+				handlers: Record<string, ReturnType<typeof buildInputSubmenu>>,
+			) => {
+				for (const item of items) {
+					if (!item.values || !item.values.includes(CUSTOM_OPTION)) continue;
+					const handler = handlers[item.id];
+					if (!handler) continue;
+					item.submenu = handler;
+				}
+			};
+
+			const buildUsageColorSubmenu = () => {
+				return (_currentValue: string, done: (selectedValue?: string) => void) => {
+					const items = buildUsageColorTargetItems(settings);
+					const handleChange = (id: string, value: string) => {
+						settings = applyDisplayChange(settings, id, value);
+						saveSettings(settings);
+						if (onSettingsChange) void onSettingsChange(settings);
+					};
+					const list = new SettingsList(
+						items,
+						Math.min(items.length + 2, 10),
+						getSettingsListTheme(),
+						handleChange,
+						() => {
+							done(formatUsageColorTargetsSummary(settings.display.usageColorTargets));
+						}
+					);
+					return list;
+				};
+			};
+
+			function rebuild(): void {
+				container = new Container();
+				let tooltipText: Text | null = null;
+
+				const attachTooltip = (items: TooltipSelectItem[], selectList: SelectList): void => {
+					if (!items.some((item) => item.tooltip)) return;
+					const tooltipComponent = new Text("", 1, 0);
+					const setTooltip = (item?: TooltipSelectItem | null) => {
+						const tooltip = item?.tooltip?.trim();
+						tooltipComponent.setText(tooltip ? theme.fg("dim", tooltip) : "");
+					};
+					setTooltip(selectList.getSelectedItem() as TooltipSelectItem | null);
+					const existingHandler = selectList.onSelectionChange;
+					selectList.onSelectionChange = (item) => {
+						if (existingHandler) existingHandler(item);
+						setTooltip(item as TooltipSelectItem);
+						tui.requestRender();
+					};
+					tooltipText = tooltipComponent;
+				};
+
+				// Top border
+				container.addChild(new DynamicBorder((s: string) => theme.fg("accent", s)));
+
+				// Title
+				const titles: Record<string, string> = {
+					main: "sub-bar Settings",
+					providers: "Provider Settings",
+					"pin-provider": "Provider Shown",
+					keybindings: "Keybindings",
+					display: "Adv. Display Settings",
+					"display-theme": "Themes",
+					"display-theme-save": "Save Theme",
+					"display-theme-share": "Share Theme",
+					"display-theme-rename": "Rename Theme",
+					"display-theme-load": "Load & Manage themes",
+					"display-theme-action": "Manage Theme",
+					"display-theme-import": "Import Theme",
+					"display-theme-import-name": "Name Theme",
+					"display-theme-restore": "Restore Theme",
+					"display-layout": "Layout & Structure",
+					"display-bar": "Bars",
+					"display-provider": "Labels & Text",
+					"display-reset": "Reset Timer",
+					"display-status": "Status",
+					"display-divider": "Dividers",
+					"display-color": "Colors",
+				};
+				const providerCategory = getProviderFromCategory(currentCategory);
+				let title = providerCategory
+					? `${PROVIDER_DISPLAY_NAMES[providerCategory]} Settings`
+					: (titles[currentCategory] ?? "sub-bar Settings");
+				if (currentCategory === "display-theme-action" && themeActionTarget) {
+					title = `Manage ${themeActionTarget.name}`;
+				}
+				container.addChild(new Text(theme.fg("accent", theme.bold(title)), 1, 0));
+				container.addChild(new Spacer(1));
+
+				if (currentCategory === "main") {
+					const items = buildMainMenuItems(settings, settings.pinnedProvider);
+					const selectList = new SelectList(items, Math.min(items.length, 10), {
+						selectedPrefix: (t: string) => theme.fg("accent", t),
+						selectedText: (t: string) => theme.fg("accent", t),
+						description: (t: string) => theme.fg("muted", t),
+						scrollInfo: (t: string) => theme.fg("dim", t),
+						noMatch: (t: string) => theme.fg("warning", t),
+					});
+					attachTooltip(items, selectList);
+					selectList.onSelect = (item) => {
+						if (item.value === "open-core-settings") {
+							saveSettings(settings);
+							done(settings);
+							if (onOpenCoreSettings) {
+								setTimeout(() => void onOpenCoreSettings(), 0);
+							}
+							return;
+						}
+						currentCategory = item.value as SettingsCategory;
+						rebuild();
+						tui.requestRender();
+					};
+					selectList.onCancel = () => {
+						saveSettings(settings);
+						done(settings);
+					};
+					activeList = selectList;
+					container.addChild(selectList);
+				} else if (currentCategory === "pin-provider") {
+					if (pinnedProviderBackup === undefined) {
+						pinnedProviderBackup = settings.pinnedProvider ?? null;
+					}
+					const orderedProviders = settings.providerOrder.length > 0 ? settings.providerOrder : (Object.keys(settings.providers) as ProviderName[]);
+					const items: TooltipSelectItem[] = [
+						{
+							value: "none",
+							label: "Auto",
+							description: "current provider",
+							tooltip: "Show the current provider automatically.",
+						},
+						...orderedProviders.map((provider) => ({
+							value: provider,
+							label: PROVIDER_DISPLAY_NAMES[provider],
+							description: provider === settings.pinnedProvider ? "pinned" : "",
+							tooltip: `Pin ${PROVIDER_DISPLAY_NAMES[provider]} as the current provider.`,
+						})),
+					];
+					const selectList = new SelectList(items, Math.min(items.length, 10), {
+						selectedPrefix: (t: string) => theme.fg("accent", t),
+						selectedText: (t: string) => theme.fg("accent", t),
+						description: (t: string) => theme.fg("muted", t),
+						scrollInfo: (t: string) => theme.fg("dim", t),
+						noMatch: (t: string) => theme.fg("warning", t),
+					});
+					attachTooltip(items, selectList);
+					selectList.onSelectionChange = (item) => {
+						if (!item) return;
+						const nextPinned = item.value === "none" ? null : (item.value as ProviderName);
+						if (settings.pinnedProvider === nextPinned) return;
+						settings.pinnedProvider = nextPinned;
+						if (onSettingsChange) void onSettingsChange(settings);
+					};
+					selectList.onSelect = (item) => {
+						settings.pinnedProvider = item.value === "none" ? null : (item.value as ProviderName);
+						saveSettings(settings);
+						if (onSettingsChange) void onSettingsChange(settings);
+						pinnedProviderBackup = undefined;
+						currentCategory = "main";
+						rebuild();
+						tui.requestRender();
+					};
+					selectList.onCancel = () => {
+						if (pinnedProviderBackup !== undefined && settings.pinnedProvider !== pinnedProviderBackup) {
+							settings.pinnedProvider = pinnedProviderBackup;
+							if (onSettingsChange) void onSettingsChange(settings);
+						}
+						pinnedProviderBackup = undefined;
+						currentCategory = "main";
+						rebuild();
+						tui.requestRender();
+					};
+					activeList = selectList;
+					container.addChild(selectList);
+				} else if (currentCategory === "keybindings") {
+					const parseKeybinding = (raw: string): string | null => {
+						const trimmed = raw.trim().toLowerCase();
+						if (!trimmed) {
+							ctx.ui.notify("Enter a key combo (e.g. ctrl+alt+p) or 'none' to disable", "warning");
+							return null;
+						}
+						if (trimmed === "none") return "none";
+						const parts = trimmed.split("+");
+						const modifiers = new Set(["ctrl", "shift", "alt"]);
+						const baseKeys = parts.filter((p) => !modifiers.has(p));
+						if (baseKeys.length !== 1) {
+							ctx.ui.notify("Invalid key combo. Use format like ctrl+alt+p or ctrl+s", "warning");
+							return null;
+						}
+						return trimmed;
+					};
+
+					const kbItems: SettingItem[] = [
+						{
+							id: "cycleProvider",
+							label: "Cycle Provider",
+							currentValue: settings.keybindings.cycleProvider,
+							description: "Shortcut to cycle through providers. Changes take effect after pi restart.",
+							submenu: buildInputSubmenu(
+								"Cycle Provider shortcut",
+								parseKeybinding,
+								undefined,
+								"Enter a key combo (e.g. ctrl+alt+p) or 'none' to disable.",
+							),
+						},
+						{
+							id: "toggleResetFormat",
+							label: "Toggle Reset Format",
+							currentValue: settings.keybindings.toggleResetFormat,
+							description: "Shortcut to toggle reset timer format. Changes take effect after pi restart.",
+							submenu: buildInputSubmenu(
+								"Toggle Reset Format shortcut",
+								parseKeybinding,
+								undefined,
+								"Enter a key combo (e.g. ctrl+alt+r) or 'none' to disable.",
+							),
+						},
+					];
+
+					const handleKbChange = (id: string, value: string) => {
+						if (id === "cycleProvider" || id === "toggleResetFormat") {
+							settings.keybindings = { ...settings.keybindings, [id]: value };
+							saveSettings(settings);
+							if (onSettingsChange) void onSettingsChange(settings);
+						}
+					};
+
+					const kbList = new SettingsList(
+						kbItems,
+						Math.min(kbItems.length + 3, 10),
+						getSettingsListTheme(),
+						handleKbChange,
+						() => {
+							currentCategory = "main";
+							rebuild();
+							tui.requestRender();
+						},
+					);
+					activeList = kbList;
+					container.addChild(kbList);
+				} else if (currentCategory === "providers") {
+					const items = buildProviderListItems(settings, coreSettings.providers);
+					const selectList = new SelectList(items, Math.min(items.length, 10), {
+						selectedPrefix: (t: string) => theme.fg("accent", t),
+						selectedText: (t: string) => theme.fg("accent", t),
+						description: (t: string) => theme.fg("muted", t),
+						scrollInfo: (t: string) => theme.fg("dim", t),
+						noMatch: (t: string) => theme.fg("warning", t),
+					});
+					attachTooltip(items, selectList);
+					selectList.onSelect = (item) => {
+						if (item.value === "reset-providers") {
+							const defaults = getDefaultSettings();
+							settings.providers = { ...defaults.providers };
+							saveSettings(settings);
+							if (onSettingsChange) void onSettingsChange(settings);
+							ctx.ui.notify("Provider settings reset to defaults", "info");
+							rebuild();
+							tui.requestRender();
+							return;
+						}
+						currentCategory = item.value as SettingsCategory;
+						rebuild();
+						tui.requestRender();
+					};
+					selectList.onCancel = () => {
+						currentCategory = "main";
+						rebuild();
+						tui.requestRender();
+					};
+					activeList = selectList;
+					container.addChild(selectList);
+				} else if (providerCategory) {
+					const items = buildProviderSettingsItems(settings, providerCategory);
+					const coreProvider = coreSettings.providers[providerCategory];
+					const enabledValue = coreProvider.enabled === "auto"
+						? "auto"
+						: coreProvider.enabled === true || coreProvider.enabled === "on"
+							? "on"
+							: "off";
+					items.unshift({
+						id: "enabled",
+						label: "Enabled",
+						currentValue: enabledValue,
+						values: ["auto", "on", "off"],
+						description: "Auto enables if credentials are detected.",
+					});
+					const handleChange = (id: string, value: string) => {
+						if (id === "enabled") {
+							const nextEnabled = value === "auto" ? "auto" : value === "on";
+							coreProvider.enabled = nextEnabled;
+							if (onCoreSettingsChange) {
+								const patch = {
+									providers: {
+										[providerCategory]: { enabled: nextEnabled },
+									},
+								} as unknown as Partial<CoreSettings>;
+								void onCoreSettingsChange(patch, coreSettings);
+							}
+							return;
+						}
+						settings = applyProviderSettingsChange(settings, providerCategory, id, value);
+						saveSettings(settings);
+						if (onSettingsChange) void onSettingsChange(settings);
+					};
+					const settingsHintText = "↓ navigate • ←/→ change • Enter/Space edit custom • Esc to cancel";
+					const customTheme = {
+						...getSettingsListTheme(),
+						hint: (text: string) => {
+							if (text.includes("Enter/Space")) {
+								return theme.fg("dim", settingsHintText);
+							}
+							return theme.fg("dim", text);
+						},
+					};
+					const settingsList = new SettingsList(
+						items,
+						Math.min(items.length + 2, 15),
+						customTheme,
+						handleChange,
+						() => {
+							currentCategory = "providers";
+							rebuild();
+							tui.requestRender();
+						}
+					);
+					activeList = settingsList;
+					container.addChild(settingsList);
+				} else if (currentCategory === "display") {
+					const items = buildDisplayMenuItems();
+					const selectList = new SelectList(items, Math.min(items.length, 10), {
+						selectedPrefix: (t: string) => theme.fg("accent", t),
+						selectedText: (t: string) => theme.fg("accent", t),
+						description: (t: string) => theme.fg("muted", t),
+						scrollInfo: (t: string) => theme.fg("dim", t),
+						noMatch: (t: string) => theme.fg("warning", t),
+					});
+					attachTooltip(items, selectList);
+					selectList.onSelect = (item) => {
+						currentCategory = item.value as SettingsCategory;
+						rebuild();
+						tui.requestRender();
+					};
+					selectList.onCancel = () => {
+						currentCategory = "main";
+						rebuild();
+						tui.requestRender();
+					};
+					activeList = selectList;
+					container.addChild(selectList);
+				} else if (currentCategory === "display-theme") {
+					const items = buildDisplayThemeMenuItems();
+					const selectList = new SelectList(items, Math.min(items.length, 10), {
+						selectedPrefix: (t: string) => theme.fg("accent", t),
+						selectedText: (t: string) => theme.fg("accent", t),
+						description: (t: string) => theme.fg("muted", t),
+						scrollInfo: (t: string) => theme.fg("dim", t),
+						noMatch: (t: string) => theme.fg("warning", t),
+					});
+					if (displayThemeSelection) {
+						const index = items.findIndex((item) => item.value === displayThemeSelection);
+						if (index >= 0) {
+							selectList.setSelectedIndex(index);
+						}
+					}
+					attachTooltip(items, selectList);
+					selectList.onSelect = (item) => {
+						displayThemeSelection = item.value;
+						currentCategory = item.value as SettingsCategory;
+						pendingShare = null;
+						rebuild();
+						tui.requestRender();
+					};
+					selectList.onCancel = () => {
+						currentCategory = "display";
+						pendingShare = null;
+						rebuild();
+						tui.requestRender();
+					};
+					activeList = selectList;
+					container.addChild(selectList);
+				} else if (currentCategory === "display-theme-save") {
+					const input = new Input();
+					input.focused = true;
+					const titleText = new Text(theme.fg("muted", "Theme name"), 1, 0);
+					input.onSubmit = (value) => {
+						const trimmed = value.trim();
+						if (!trimmed) {
+							ctx.ui.notify("Enter a theme name", "warning");
+							return;
+						}
+						settings = saveDisplayTheme(settings, trimmed);
+						saveSettings(settings);
+						if (onSettingsChange) void onSettingsChange(settings);
+						ctx.ui.notify(`Theme ${trimmed} saved`, "info");
+						const shareString = buildDisplayShareString(trimmed, settings.display);
+						if (onDisplayThemeShared) {
+							requestThemeShare(trimmed, shareString, "display-theme");
+							return;
+						}
+						ctx.ui.notify(shareString, "info");
+						currentCategory = "display-theme";
+						rebuild();
+						tui.requestRender();
+					};
+					input.onEscape = () => {
+						currentCategory = "display-theme";
+						rebuild();
+						tui.requestRender();
+					};
+					container.addChild(titleText);
+					container.addChild(new Spacer(1));
+					container.addChild(input);
+					activeList = input;
+				} else if (currentCategory === "display-theme-share") {
+					displayThemeSelection = "display-theme-share";
+					const shareTarget = pendingShare ?? {
+						name: "",
+						shareString: buildDisplayShareStringWithoutName(settings.display),
+						backCategory: "display-theme" as SettingsCategory,
+					};
+					pendingShare = shareTarget;
+
+					const shareItems: TooltipSelectItem[] = [
+						{
+							value: "gist",
+							label: "Upload secret gist",
+							description: "share via GitHub gist",
+							tooltip: "Create a secret GitHub gist using the gh CLI.",
+						},
+						{
+							value: "string",
+							label: "Post share string",
+							description: "share in chat",
+							tooltip: "Post the raw share string to chat.",
+						},
+						{
+							value: "cancel",
+							label: "Cancel",
+							description: "discard share",
+							tooltip: "Cancel without sharing.",
+						},
+					];
+
+					const selectList = new SelectList(shareItems, shareItems.length, {
+						selectedPrefix: (t: string) => theme.fg("accent", t),
+						selectedText: (t: string) => theme.fg("accent", t),
+						description: (t: string) => theme.fg("muted", t),
+						scrollInfo: (t: string) => theme.fg("dim", t),
+						noMatch: (t: string) => theme.fg("warning", t),
+					});
+					attachTooltip(shareItems, selectList);
+
+					selectList.onSelect = (item) => {
+						if (item.value === "gist" || item.value === "string") {
+							if (onDisplayThemeShared) {
+								void onDisplayThemeShared(shareTarget.name, shareTarget.shareString, item.value as "gist" | "string");
+							} else {
+								ctx.ui.notify(shareTarget.shareString, "info");
+							}
+						}
+						pendingShare = null;
+						currentCategory = shareTarget.backCategory;
+						rebuild();
+						tui.requestRender();
+					};
+
+					selectList.onCancel = () => {
+						pendingShare = null;
+						currentCategory = shareTarget.backCategory;
+						rebuild();
+						tui.requestRender();
+					};
+
+					activeList = selectList;
+					container.addChild(selectList);
+				} else if (currentCategory === "display-theme-load") {
+					if (!displayPreviewBackup) {
+						displayPreviewBackup = { ...settings.display };
+					}
+					const defaults = getDefaultSettings();
+					const fallbackUser = settings.displayUserTheme ?? displayPreviewBackup;
+					const themeItems = buildDisplayThemeItems(settings);
+
+					const selectList = new SelectList(themeItems, Math.min(themeItems.length, 10), {
+						selectedPrefix: (t: string) => theme.fg("accent", t),
+						selectedText: (t: string) => theme.fg("accent", t),
+						description: (t: string) => theme.fg("muted", t),
+						scrollInfo: (t: string) => theme.fg("dim", t),
+						noMatch: (t: string) => theme.fg("warning", t),
+					});
+					selectList.onSelectionChange = (item) => {
+						if (!item) return;
+						const target = resolveDisplayThemeTarget(item.value, settings, defaults, fallbackUser);
+						if (!target) return;
+						settings.display = { ...target.display };
+						if (onSettingsChange) void onSettingsChange(settings);
+						tui.requestRender();
+					};
+					attachTooltip(themeItems, selectList);
+
+					selectList.onSelect = (item) => {
+						const target = resolveDisplayThemeTarget(item.value, settings, defaults, fallbackUser);
+						if (!target) return;
+						if (item.value.startsWith("theme:")) {
+							themeActionTarget = target;
+							currentCategory = "display-theme-action";
+							rebuild();
+							tui.requestRender();
+							return;
+						}
+
+						const backup = displayPreviewBackup ?? settings.display;
+						settings.displayUserTheme = { ...backup };
+						settings.display = { ...target.display };
+						saveSettings(settings);
+						if (onSettingsChange) void onSettingsChange(settings);
+						if (onDisplayThemeApplied) void onDisplayThemeApplied(target.name, { source: "manual" });
+						displayPreviewBackup = null;
+						currentCategory = "display-theme";
+						rebuild();
+						tui.requestRender();
+					};
+					selectList.onCancel = () => {
+						if (displayPreviewBackup) {
+							settings.display = { ...displayPreviewBackup };
+							if (onSettingsChange) void onSettingsChange(settings);
+						}
+						displayPreviewBackup = null;
+						currentCategory = "display-theme";
+						rebuild();
+						tui.requestRender();
+					};
+					activeList = selectList;
+					container.addChild(selectList);
+				} else if (currentCategory === "display-theme-random") {
+					if (!randomThemeBackup) {
+						randomThemeBackup = { ...settings.display };
+						settings.displayUserTheme = { ...randomThemeBackup };
+					}
+					displayThemeSelection = "display-theme-random";
+					const randomDisplay = buildRandomDisplay(settings.display);
+					settings.display = { ...randomDisplay };
+					saveSettings(settings);
+					if (onSettingsChange) void onSettingsChange(settings);
+					currentCategory = "display-theme";
+					rebuild();
+					tui.requestRender();
+				} else if (currentCategory === "display-theme-restore") {
+					displayThemeSelection = "display-theme-restore";
+					const defaults = getDefaultSettings();
+					const fallbackUser = settings.displayUserTheme ?? settings.display;
+					const target = resolveDisplayThemeTarget("user", settings, defaults, fallbackUser);
+					if (target) {
+						const backup = displayPreviewBackup ?? settings.display;
+						settings.displayUserTheme = { ...backup };
+						settings.display = { ...target.display };
+						saveSettings(settings);
+						if (onSettingsChange) void onSettingsChange(settings);
+						if (onDisplayThemeApplied) void onDisplayThemeApplied(target.name, { source: "manual" });
+						displayPreviewBackup = null;
+					}
+					currentCategory = "display-theme";
+					rebuild();
+					tui.requestRender();
+				} else if (currentCategory === "display-theme-import") {
+					const input = new Input();
+					input.focused = true;
+					const titleText = new Text(theme.fg("muted", "Paste Theme Share string"), 1, 0);
+					input.onSubmit = (value) => {
+						const trimmed = value.trim();
+						if (!trimmed) {
+							ctx.ui.notify("Enter a theme share string", "warning");
+							return;
+						}
+						const decoded = decodeDisplayShareString(trimmed);
+						if (!decoded) {
+							ctx.ui.notify("Invalid theme share string", "error");
+							return;
+						}
+						if (!displayPreviewBackup) {
+							displayPreviewBackup = { ...settings.display };
+						}
+						importBackup = displayPreviewBackup;
+						importCandidate = decoded;
+						settings.display = { ...decoded.display };
+						if (onSettingsChange) void onSettingsChange(settings);
+						currentCategory = "display-theme-import-action";
+						rebuild();
+						tui.requestRender();
+					};
+					input.onEscape = () => {
+						currentCategory = "display-theme-load";
+						rebuild();
+						tui.requestRender();
+					};
+					container.addChild(titleText);
+					container.addChild(new Spacer(1));
+					container.addChild(input);
+					activeList = input;
+				} else if (currentCategory === "display-theme-import-action") {
+					const candidate = importCandidate;
+					if (!candidate) {
+						currentCategory = "display-theme-load";
+						rebuild();
+						tui.requestRender();
+						return;
+					}
+
+					const importItems: TooltipSelectItem[] = [
+						{
+							value: "save-apply",
+							label: "Save & apply",
+							description: "save and use this theme",
+							tooltip: "Save the theme and keep it applied.",
+						},
+						{
+							value: "save",
+							label: "Save",
+							description: "save without applying",
+							tooltip: "Save the theme and restore the previous display.",
+						},
+						{
+							value: "cancel",
+							label: "Cancel",
+							description: "discard import",
+							tooltip: "Discard and restore the previous display.",
+						},
+					];
+
+					const notifyImported = (name: string) => {
+						const message = candidate.isNewerVersion
+							? `Imported ${name} (newer version, some fields may be ignored)`
+							: `Imported ${name}`;
+						ctx.ui.notify(message, candidate.isNewerVersion ? "warning" : "info");
+					};
+
+					const restoreBackup = () => {
+						if (importBackup) {
+							settings.display = { ...importBackup };
+							if (onSettingsChange) void onSettingsChange(settings);
+						}
+					};
+
+					const selectList = new SelectList(importItems, importItems.length, {
+						selectedPrefix: (t: string) => theme.fg("accent", t),
+						selectedText: (t: string) => theme.fg("accent", t),
+						description: (t: string) => theme.fg("muted", t),
+						scrollInfo: (t: string) => theme.fg("dim", t),
+						noMatch: (t: string) => theme.fg("warning", t),
+					});
+					selectList.onSelectionChange = (item) => {
+						if (!item) return;
+						if (item.value === "save-apply") {
+							settings.display = { ...candidate.display };
+							if (onSettingsChange) void onSettingsChange(settings);
+							return;
+						}
+						restoreBackup();
+					};
+					attachTooltip(importItems, selectList);
+
+					selectList.onSelect = (item) => {
+						if ((item.value === "save-apply" || item.value === "save") && !candidate.hasName) {
+							importPendingAction = item.value as "save" | "save-apply";
+							currentCategory = "display-theme-import-name";
+							rebuild();
+							tui.requestRender();
+							return;
+						}
+						if (item.value === "save-apply") {
+							const resolvedName = candidate.name;
+							if (importBackup) {
+								settings.displayUserTheme = { ...importBackup };
+							}
+							settings = upsertDisplayTheme(settings, resolvedName, candidate.display, "imported");
+							settings.display = { ...candidate.display };
+							saveSettings(settings);
+							if (onSettingsChange) void onSettingsChange(settings);
+							if (onDisplayThemeApplied) void onDisplayThemeApplied(resolvedName, { source: "manual" });
+							notifyImported(resolvedName);
+							displayPreviewBackup = null;
+							importCandidate = null;
+							importBackup = null;
+							importPendingAction = null;
+							currentCategory = "display-theme";
+							rebuild();
+							tui.requestRender();
+							return;
+						}
+						if (item.value === "save") {
+							const resolvedName = candidate.name;
+							settings = upsertDisplayTheme(settings, resolvedName, candidate.display, "imported");
+							restoreBackup();
+							saveSettings(settings);
+							notifyImported(resolvedName);
+							importCandidate = null;
+							importBackup = null;
+							importPendingAction = null;
+							currentCategory = "display-theme-load";
+							rebuild();
+							tui.requestRender();
+							return;
+						}
+						restoreBackup();
+						importCandidate = null;
+						importBackup = null;
+						importPendingAction = null;
+						currentCategory = "display-theme-load";
+						rebuild();
+						tui.requestRender();
+					};
+					selectList.onCancel = () => {
+						restoreBackup();
+						importCandidate = null;
+						importBackup = null;
+						importPendingAction = null;
+						currentCategory = "display-theme-load";
+						rebuild();
+						tui.requestRender();
+					};
+					activeList = selectList;
+					container.addChild(selectList);
+				} else if (currentCategory === "display-theme-import-name") {
+					const candidate = importCandidate;
+					if (!candidate) {
+						currentCategory = "display-theme-load";
+						rebuild();
+						tui.requestRender();
+						return;
+					}
+
+					const notifyImported = (name: string) => {
+						const message = candidate.isNewerVersion
+							? `Imported ${name} (newer version, some fields may be ignored)`
+							: `Imported ${name}`;
+						ctx.ui.notify(message, candidate.isNewerVersion ? "warning" : "info");
+					};
+
+					const restoreBackup = () => {
+						if (importBackup) {
+							settings.display = { ...importBackup };
+							if (onSettingsChange) void onSettingsChange(settings);
+						}
+					};
+
+					const input = new Input();
+					input.focused = true;
+					const titleText = new Text(theme.fg("muted", "Theme name"), 1, 0);
+					input.onSubmit = (value) => {
+						const trimmed = value.trim();
+						if (!trimmed) {
+							ctx.ui.notify("Enter a theme name", "warning");
+							return;
+						}
+						const applyImport = importPendingAction === "save-apply";
+						if (applyImport && importBackup) {
+							settings.displayUserTheme = { ...importBackup };
+						}
+						settings = upsertDisplayTheme(settings, trimmed, candidate.display, "imported");
+						if (applyImport) {
+							settings.display = { ...candidate.display };
+						} else {
+							restoreBackup();
+						}
+						saveSettings(settings);
+						if (onSettingsChange) void onSettingsChange(settings);
+						if (applyImport && onDisplayThemeApplied) {
+							void onDisplayThemeApplied(trimmed, { source: "manual" });
+						}
+						notifyImported(trimmed);
+						displayPreviewBackup = null;
+						importCandidate = null;
+						importBackup = null;
+						importPendingAction = null;
+						currentCategory = applyImport ? "display-theme" : "display-theme-load";
+						rebuild();
+						tui.requestRender();
+					};
+					input.onEscape = () => {
+						importPendingAction = null;
+						currentCategory = "display-theme-import-action";
+						rebuild();
+						tui.requestRender();
+					};
+					container.addChild(titleText);
+					container.addChild(new Spacer(1));
+					container.addChild(input);
+					activeList = input;
+				} else if (currentCategory === "display-theme-rename") {
+					const target = themeActionTarget;
+					if (!target || !target.id) {
+						currentCategory = "display-theme-load";
+						rebuild();
+						tui.requestRender();
+						return;
+					}
+
+					const input = new Input();
+					input.focused = true;
+					const titleText = new Text(theme.fg("muted", `Rename ${target.name}`), 1, 0);
+					input.onSubmit = (value) => {
+						const trimmed = value.trim();
+						if (!trimmed) {
+							ctx.ui.notify("Enter a theme name", "warning");
+							return;
+						}
+						settings = renameDisplayTheme(settings, target.id!, trimmed);
+						saveSettings(settings);
+						if (onSettingsChange) void onSettingsChange(settings);
+						themeActionTarget = null;
+						currentCategory = "display-theme-load";
+						rebuild();
+						tui.requestRender();
+					};
+					input.onEscape = () => {
+						currentCategory = "display-theme-action";
+						rebuild();
+						tui.requestRender();
+					};
+					container.addChild(titleText);
+					container.addChild(new Spacer(1));
+					container.addChild(input);
+					activeList = input;
+				} else if (currentCategory === "display-theme-action") {
+					const target = themeActionTarget;
+					if (!target) {
+						currentCategory = "display-theme-load";
+						rebuild();
+						tui.requestRender();
+						return;
+					}
+
+					const items = buildThemeActionItems(target);
+
+					const selectList = new SelectList(items, items.length, {
+						selectedPrefix: (t: string) => theme.fg("accent", t),
+						selectedText: (t: string) => theme.fg("accent", t),
+						description: (t: string) => theme.fg("muted", t),
+						scrollInfo: (t: string) => theme.fg("dim", t),
+						noMatch: (t: string) => theme.fg("warning", t),
+					});
+					attachTooltip(items, selectList);
+
+					selectList.onSelect = (item) => {
+						if (item.value === "load") {
+							const backup = displayPreviewBackup ?? settings.display;
+							settings.displayUserTheme = { ...backup };
+							settings.display = { ...target.display };
+							saveSettings(settings);
+							if (onSettingsChange) void onSettingsChange(settings);
+							if (onDisplayThemeApplied) void onDisplayThemeApplied(target.name, { source: "manual" });
+							displayPreviewBackup = null;
+							themeActionTarget = null;
+							currentCategory = "display-theme";
+							rebuild();
+							tui.requestRender();
+							return;
+						}
+						if (item.value === "share") {
+							const shareString = buildDisplayShareString(target.name, target.display);
+							if (onDisplayThemeShared) {
+								requestThemeShare(target.name, shareString, "display-theme-load");
+								return;
+							}
+							ctx.ui.notify(shareString, "info");
+							themeActionTarget = null;
+							currentCategory = "display-theme-load";
+							rebuild();
+							tui.requestRender();
+							return;
+						}
+						if (item.value === "rename" && target.deletable && target.id) {
+							currentCategory = "display-theme-rename";
+							rebuild();
+							tui.requestRender();
+							return;
+						}
+						if (item.value === "delete" && target.deletable && target.id) {
+							settings.displayThemes = settings.displayThemes.filter((entry) => entry.id !== target.id);
+							saveSettings(settings);
+							if (displayPreviewBackup) {
+								settings.display = { ...displayPreviewBackup };
+								if (onSettingsChange) void onSettingsChange(settings);
+							}
+							themeActionTarget = null;
+							currentCategory = "display-theme-load";
+							rebuild();
+							tui.requestRender();
+						}
+					};
+					selectList.onCancel = () => {
+						currentCategory = "display-theme-load";
+						rebuild();
+						tui.requestRender();
+					};
+					activeList = selectList;
+					container.addChild(selectList);
+				} else {
+					// Settings list for category
+					let items: SettingItem[];
+					let handleChange: (id: string, value: string) => void;
+					let backCategory: SettingsCategory = "display";
+
+					switch (currentCategory) {
+						case "display-layout":
+							items = buildDisplayLayoutItems(settings);
+							break;
+						case "display-bar":
+							items = buildDisplayBarItems(settings);
+							break;
+						case "display-provider":
+							items = buildDisplayProviderItems(settings);
+							break;
+						case "display-reset":
+							items = buildDisplayResetItems(settings);
+							break;
+						case "display-status":
+							items = buildDisplayStatusItems(settings);
+							break;
+						case "display-divider":
+							items = buildDisplayDividerItems(settings);
+							break;
+						case "display-color":
+							items = buildDisplayColorItems(settings);
+							break;
+						default:
+							items = [];
+					}
+
+					const customHandlers: Record<string, ReturnType<typeof buildInputSubmenu>> = {};
+					if (currentCategory === "display-layout") {
+						customHandlers.paddingLeft = buildInputSubmenu("Padding Left", (value) => parseInteger(value, 0, 100));
+						customHandlers.paddingRight = buildInputSubmenu("Padding Right", (value) => parseInteger(value, 0, 100));
+					}
+					if (currentCategory === "display-color") {
+						customHandlers.errorThreshold = buildInputSubmenu("Error Threshold (%)", (value) => parseInteger(value, 0, 100));
+						customHandlers.warningThreshold = buildInputSubmenu("Warning Threshold (%)", (value) => parseInteger(value, 0, 100));
+						customHandlers.successThreshold = buildInputSubmenu("Success Threshold (%)", (value) => parseInteger(value, 0, 100));
+						const usageColorItem = items.find((item) => item.id === "usageColorTargets");
+						if (usageColorItem) {
+							usageColorItem.submenu = buildUsageColorSubmenu();
+						}
+					}
+					if (currentCategory === "display-bar") {
+						customHandlers.barWidth = buildInputSubmenu("Bar Width", parseBarWidth);
+						customHandlers.barCharacter = buildInputSubmenu(
+							"Bar Character",
+							parseBarCharacter,
+							undefined,
+							"Custom bar character(s), set 1 or 2 (fill/empty)",
+						);
+					}
+					if (currentCategory === "display-provider") {
+						customHandlers.providerLabel = buildInputSubmenu("Provider Label", parseProviderLabel);
+					}
+					if (currentCategory === "display-reset") {
+						customHandlers.resetTimeContainment = buildInputSubmenu(
+							"Reset Timer Containment",
+							parseResetContainment,
+							undefined,
+							"Enter 1-2 characters for left/right wrap (e.g. <>).",
+						);
+					}
+					if (currentCategory === "display-status") {
+						customHandlers.statusIconPack = buildInputSubmenu(
+							"Custom Status Icons",
+							parseStatusIconCustom,
+							undefined,
+							"Enter four characters in order: OK, warning, error, unknown (e.g. ✓⚠×?). Applied to none, minor/maintenance, major/critical, and unknown statuses.",
+						);
+					}
+					if (currentCategory === "display-divider") {
+						customHandlers.dividerCharacter = buildInputSubmenu("Divider Character", parseDividerCharacter);
+						customHandlers.dividerBlanks = buildInputSubmenu("Divider Blanks", parseDividerBlanks);
+					}
+					attachCustomInputs(items, customHandlers);
+
+					handleChange = (id, value) => {
+						settings = applyDisplayChange(settings, id, value);
+						saveSettings(settings);
+						if (onSettingsChange) void onSettingsChange(settings);
+						if (currentCategory === "display-layout" && id === "widgetPlacement") {
+							rebuild();
+							tui.requestRender();
+							return;
+						}
+						if (currentCategory === "display-bar" && id === "barType") {
+							rebuild();
+							tui.requestRender();
+							return;
+						}
+						if (currentCategory === "display-status") {
+							if (id === "statusIndicatorMode") {
+								rebuild();
+								tui.requestRender();
+								return;
+							}
+						}
+					};
+
+					const settingsHintText = "↓ navigate • ←/→ change • Enter/Space edit custom • Esc to cancel";
+					const customTheme = {
+						...getSettingsListTheme(),
+						hint: (text: string) => {
+							if (text.includes("Enter/Space")) {
+								return theme.fg("dim", settingsHintText);
+							}
+							return theme.fg("dim", text);
+						},
+					};
+					const settingsList = new SettingsList(
+						items,
+						Math.min(items.length + 2, 15),
+						customTheme,
+						handleChange,
+						() => {
+							currentCategory = backCategory;
+							rebuild();
+							tui.requestRender();
+						}
+					);
+					activeList = settingsList;
+					container.addChild(settingsList);
+				}
+
+				// Help text
+				const usesSettingsList =
+					Boolean(providerCategory) ||
+					currentCategory === "keybindings" ||
+					currentCategory === "display-layout" ||
+					currentCategory === "display-bar" ||
+					currentCategory === "display-provider" ||
+					currentCategory === "display-reset" ||
+					currentCategory === "display-status" ||
+					currentCategory === "display-divider" ||
+					currentCategory === "display-color";
+				if (!usesSettingsList) {
+					let helpText: string;
+					if (
+						currentCategory === "display-theme-save" ||
+						currentCategory === "display-theme-import-name" ||
+						currentCategory === "display-theme-rename"
+					) {
+						helpText = "Type name • Enter to save • Esc back";
+					} else if (currentCategory === "display-theme-import") {
+						helpText = "Paste theme share string • Enter to import • Esc back";
+					} else if (
+						currentCategory === "main" ||
+						currentCategory === "providers" ||
+						currentCategory === "display" ||
+						currentCategory === "display-theme" ||
+						currentCategory === "display-theme-load" ||
+						currentCategory === "display-theme-action" ||
+						currentCategory === "display-theme-random" ||
+						currentCategory === "display-theme-restore"
+					) {
+						helpText = "↑↓ navigate • Enter/Space select • Esc back";
+					} else {
+						helpText = "↑↓ navigate • Enter/Space to change • Esc to cancel";
+					}
+					if (tooltipText) {
+						container.addChild(new Spacer(1));
+						container.addChild(tooltipText);
+					}
+					container.addChild(new Spacer(1));
+					container.addChild(new Text(theme.fg("dim", helpText), 1, 0));
+				}
+
+				// Bottom border
+				container.addChild(new DynamicBorder((s: string) => theme.fg("accent", s)));
+			}
+
+			rebuild();
+
+			return {
+				render(width: number) {
+					return container.render(width);
+				},
+				invalidate() {
+					container.invalidate();
+				},
+				handleInput(data: string) {
+					if (data === " ") {
+						if (activeList && "handleInput" in activeList && activeList.handleInput) {
+							activeList.handleInput("\r");
+						}
+						tui.requestRender();
+						return;
+					}
+					if (activeList && "handleInput" in activeList && activeList.handleInput) {
+						activeList.handleInput(data);
+					}
+					tui.requestRender();
+				},
+			};
+		}).then(resolve);
+	});
+}