@dex-ai/coding-agent 0.1.92

package/src/extensions/cli-tui-components/settings-panel-controller.ts

@@ -0,0 +1,958 @@
+// ---------------------------------------------------------------------------
+// Settings Panel Controller
+//
+// Manages state for the SettingsPanel.vue component:
+// - Hardcoded core sections (General, Permissions, Providers)
+// - Extension-contributed sections (via CLIExtension.settings)
+// - Tab navigation (←→)
+// - Field navigation (↑↓)
+// - Inline editing (enter, esc, typing)
+// - Checkbox toggling (space)
+// - Select cycling (enter)
+// - Save (ctrl+s) per-section and close (esc)
+// ---------------------------------------------------------------------------
+
+import type { SettingsSection, SettingsField } from "../../cli-extension";
+import {
+	loadGlobalSettings,
+	saveGlobalSettings,
+	type GlobalSettings,
+	type ProviderSettingsConfig,
+} from "@dex-ai/coding-agent-sdk";
+import { PROVIDER_DESCRIPTORS } from "../../provider-registry";
+
+type PermissionMode = "read" | "auto" | "yolo";
+
+/* ------------------------------------------------------------------ */
+/* Types (exported for the Vue component)                              */
+/* ------------------------------------------------------------------ */
+
+export interface SettingsTab {
+	key: string;
+	label: string;
+	fields: SettingsField[];
+}
+
+export interface SettingsPanelState {
+	open: boolean;
+	tabs: SettingsTab[];
+	activeTabIndex: number;
+	focusedFieldIndex: number;
+	values: Record<string, string>;
+	error: string;
+	/** Search/filter text for the current tab's fields. */
+	searchFilter: string;
+	/** Which zone has focus: tabs bar, search input, or field list. */
+	focusZone: "tabs" | "search" | "fields";
+	/** Whether the focused text/password field is in edit mode. */
+	editing: boolean;
+	/** Scroll offset for visible fields. */
+	scrollOffset: number;
+	/** Max visible rows (set externally based on terminal height). */
+	visibleRows: number;
+}
+
+export interface SettingsPanelActions {
+	open(): void;
+	close(): void;
+	handleKey(key: {
+		name: string;
+		char?: string | undefined;
+		ctrl?: boolean | undefined;
+		shift?: boolean | undefined;
+	}): boolean;
+}
+
+/* ------------------------------------------------------------------ */
+/* Core Settings Sections                                              */
+/* ------------------------------------------------------------------ */
+
+function createCoreSections(): SettingsSection[] {
+	return [
+		createGeneralSection(),
+		createPermissionsSection(),
+		createProvidersSection(),
+	];
+}
+
+function createGeneralSection(): SettingsSection {
+	return {
+		id: "general",
+		label: "General",
+		fields: [
+			{
+				key: "defaultProvider",
+				label: "Default Provider",
+				type: "select",
+				get options() {
+					const settings = loadGlobalSettings();
+					const names = Object.keys(settings.providers ?? {});
+					return names.length > 0 ? names : ["(none)"];
+				},
+				placeholder: "select provider",
+			},
+			{
+				key: "defaultModel",
+				label: "Default Model",
+				type: "text",
+				placeholder: "e.g. claude-sonnet-4-20250514",
+			},
+			{
+				key: "defaultThinking",
+				label: "Thinking Level",
+				type: "select",
+				options: ["off", "min", "low", "med", "high", "max"],
+			},
+			{
+				key: "hideThinking",
+				label: "Hide Thinking",
+				type: "checkbox",
+			},
+			{
+				key: "debug",
+				label: "Debug Mode",
+				type: "checkbox",
+			},
+		],
+		load() {
+			const settings = loadGlobalSettings();
+			return {
+				defaultProvider: settings.defaultProvider ?? "",
+				defaultModel: settings.defaultModel ?? "",
+				defaultThinking: settings.defaultThinking ?? "high",
+				hideThinking: settings.hideThinking ? "true" : "false",
+				debug: settings.debug ? "true" : "false",
+			};
+		},
+		save(values) {
+			const settings = loadGlobalSettings();
+			const updated = {
+				...settings,
+				permissions: {
+					...settings.permissions,
+					allowedTools: settings.permissions.allowedTools ?? [],
+					deniedTools: settings.permissions.deniedTools ?? [],
+				},
+				...(values.defaultProvider
+					? { defaultProvider: values.defaultProvider }
+					: {}),
+				...(values.defaultModel ? { defaultModel: values.defaultModel } : {}),
+				...(values.defaultThinking && values.defaultThinking !== "off"
+					? { defaultThinking: values.defaultThinking as any }
+					: {}),
+				...(values.hideThinking === "true"
+					? { hideThinking: true as const }
+					: {}),
+				...(values.debug === "true" ? { debug: true as const } : {}),
+			} satisfies GlobalSettings;
+			saveGlobalSettings(updated);
+		},
+	};
+}
+
+function createPermissionsSection(): SettingsSection {
+	return {
+		id: "permissions",
+		label: "Permissions",
+		fields: [
+			{
+				key: "mode",
+				label: "Permission Mode",
+				type: "select",
+				options: ["read", "auto", "yolo"],
+			},
+			{
+				key: "allowedTools",
+				label: "Allowed Tools",
+				type: "text",
+				readonly: true,
+				placeholder: "(none)",
+			},
+			{
+				key: "deniedTools",
+				label: "Denied Tools",
+				type: "text",
+				readonly: true,
+				placeholder: "(none)",
+			},
+		],
+		load() {
+			const settings = loadGlobalSettings();
+			return {
+				mode: settings.permissions.mode,
+				allowedTools: (settings.permissions.allowedTools ?? []).join(", "),
+				deniedTools: (settings.permissions.deniedTools ?? []).join(", "),
+			};
+		},
+		save(values) {
+			const settings = loadGlobalSettings();
+			const updated = {
+				...settings,
+				permissions: {
+					...settings.permissions,
+					mode: (values.mode as PermissionMode) || settings.permissions.mode,
+					allowedTools: settings.permissions.allowedTools ?? [],
+					deniedTools: settings.permissions.deniedTools ?? [],
+				},
+			} satisfies GlobalSettings;
+			saveGlobalSettings(updated);
+		},
+	};
+}
+
+function createProvidersSection(): SettingsSection {
+	const settings = loadGlobalSettings();
+	const providers = settings.providers ?? {};
+	const providerNames = Object.keys(providers);
+
+	// Also include defaultProvider if it's not already in the providers list
+	// (e.g. "claude-proxy" may be referenced but not yet configured)
+	const defaultProvider = settings.defaultProvider;
+	if (defaultProvider && !providers[defaultProvider]) {
+		// Attempt to find a matching descriptor by type or name
+		const desc = PROVIDER_DESCRIPTORS.find(
+			(d) =>
+				d.type === defaultProvider ||
+				d.label.toLowerCase() === defaultProvider.toLowerCase(),
+		);
+		// Add it as an unconfigured provider so the user can set it up
+		if (!providerNames.includes(defaultProvider)) {
+			providerNames.push(defaultProvider);
+			// We'll handle missing config in field generation below
+		}
+	}
+
+	const fields: SettingsField[] = [];
+
+	// Add provider action at the top
+	fields.push({
+		key: "_add_provider",
+		label: "+ Add Provider",
+		type: "action" as const,
+	});
+	fields.push({
+		key: "_sep_top",
+		label: "",
+		type: "separator" as const,
+		readonly: true,
+	});
+
+	if (providerNames.length > 0) {
+		// Partition: new (unconfigured) providers first, then existing
+		const newProviders = providerNames.filter((n) =>
+			n.startsWith("new-provider"),
+		);
+		const existingProviders = providerNames.filter(
+			(n) => !n.startsWith("new-provider"),
+		);
+		const ordered = [...newProviders, ...existingProviders];
+
+		let addedNewSeparator = false;
+		for (let pi = 0; pi < ordered.length; pi++) {
+			const name = ordered[pi]!;
+			const isNew = newProviders.includes(name);
+			const cfg = providers[name];
+			const providerType = cfg?.type ?? "(not configured)";
+			const desc = cfg
+				? PROVIDER_DESCRIPTORS.find((d) => d.type === cfg.type)
+				: undefined;
+
+			// Insert a divider between new and existing providers
+			if (!isNew && !addedNewSeparator && newProviders.length > 0) {
+				addedNewSeparator = true;
+				fields.push({
+					key: "_sep_existing",
+					label: "Configured Providers",
+					type: "separator" as const,
+					readonly: true,
+				});
+			}
+
+			// Separator header: "ProviderName (type)"
+			fields.push({
+				key: `_sep_${name}`,
+				label: isNew
+					? `★ ${name}  ·  ${desc?.label ?? providerType}  (configure below)`
+					: `${name}  ·  ${desc?.label ?? providerType}`,
+				type: "separator" as const,
+				readonly: true,
+			});
+
+			// Name (editable for renaming)
+			fields.push({
+				key: `${name}._name`,
+				label: "Name",
+				type: "text" as const,
+				placeholder: name,
+			});
+
+			// Type selector
+			fields.push({
+				key: `${name}.type`,
+				label: "Type",
+				type: "select" as const,
+				options: PROVIDER_DESCRIPTORS.map((d) => d.type),
+			});
+
+			// Config fields
+			if (desc && cfg) {
+				for (const f of desc.fields) {
+					const field: SettingsField = {
+						key: `${name}.${f.key}`,
+						label: f.label,
+						type: f.secret ? "password" : "text",
+						required: f.required,
+					};
+					const placeholder = f.hint ?? f.default;
+					if (placeholder) {
+						fields.push({ ...field, placeholder });
+					} else {
+						fields.push(field);
+					}
+				}
+			} else if (cfg) {
+				// No descriptor — show generic fields
+				fields.push(
+					{
+						key: `${name}.apiKey`,
+						label: "API Key",
+						type: "password" as const,
+						placeholder: "sk-...",
+					},
+					{
+						key: `${name}.baseUrl`,
+						label: "Base URL",
+						type: "text" as const,
+						placeholder: "Custom endpoint",
+					},
+				);
+			} else {
+				// Provider referenced but not configured — show basic fields
+				fields.push(
+					{
+						key: `${name}.apiKey`,
+						label: "API Key",
+						type: "password" as const,
+						placeholder: "sk-...",
+					},
+					{
+						key: `${name}.baseUrl`,
+						label: "Base URL",
+						type: "text" as const,
+						placeholder: "Custom endpoint",
+					},
+				);
+			}
+
+			// Remove action for this provider
+			fields.push({
+				key: `_remove_${name}`,
+				label: `Remove ${name}`,
+				type: "action" as const,
+			});
+		}
+	} else {
+		fields.push({
+			key: "_empty",
+			label: "No providers configured",
+			type: "text" as const,
+			readonly: true as const,
+		});
+	}
+
+	return {
+		id: "providers",
+		label: "Providers",
+		fields,
+		load() {
+			const current = loadGlobalSettings();
+			const provs = current.providers ?? {};
+			const values: Record<string, string> = {};
+			for (const [name, cfg] of Object.entries(provs)) {
+				values[`${name}._name`] = name;
+				values[`${name}.type`] = cfg.type;
+				values[`${name}.apiKey`] = cfg.apiKey ?? "";
+				values[`${name}.baseUrl`] = cfg.baseUrl ?? "";
+				// Load all descriptor fields
+				const desc = PROVIDER_DESCRIPTORS.find((d) => d.type === cfg.type);
+				if (desc) {
+					for (const f of desc.fields) {
+						values[`${name}.${f.key}`] = (cfg as any)[f.key] ?? "";
+					}
+				}
+			}
+			// Also load unconfigured providers (e.g. from defaultProvider)
+			const dp = current.defaultProvider;
+			if (dp && !provs[dp]) {
+				values[`${dp}._name`] = dp;
+				values[`${dp}.type`] = "";
+			}
+			return values;
+		},
+		save(values) {
+			const current = loadGlobalSettings();
+			const existingProviders = { ...(current.providers ?? {}) };
+			const newProviders: Record<string, ProviderSettingsConfig> = {};
+
+			for (const originalName of Object.keys(existingProviders)) {
+				// Check if this provider was renamed
+				const newName = values[`${originalName}._name`] || originalName;
+				const existing = existingProviders[originalName]!;
+				const updated: Record<string, unknown> = { type: existing.type };
+
+				// If the type was changed via a select field, use that
+				if (values[`${originalName}.type`]) {
+					updated.type = values[`${originalName}.type`];
+				}
+
+				// Collect all values for this provider (skip internal keys)
+				for (const [key, val] of Object.entries(values)) {
+					if (key.startsWith(`${originalName}.`) && val) {
+						const fieldKey = key.slice(originalName.length + 1);
+						if (fieldKey === "_name") continue; // skip internal
+						updated[fieldKey] = val;
+					}
+				}
+
+				newProviders[newName] = updated as unknown as ProviderSettingsConfig;
+			}
+
+			const updated = {
+				...current,
+				permissions: {
+					...current.permissions,
+					allowedTools: current.permissions.allowedTools ?? [],
+					deniedTools: current.permissions.deniedTools ?? [],
+				},
+				providers: newProviders,
+			} satisfies GlobalSettings;
+			saveGlobalSettings(updated);
+		},
+	};
+}
+
+/* ------------------------------------------------------------------ */
+/* Controller                                                          */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Create the settings panel controller.
+ *
+ * @param getExtensionSections — callback that collects SettingsSections from
+ *   loaded CLIExtensions. Called when the panel opens so it always reflects
+ *   the current set of loaded extensions.
+ */
+export function createSettingsPanelController(
+	getExtensionSections: () => SettingsSection[],
+): {
+	state: SettingsPanelState;
+	actions: SettingsPanelActions;
+} {
+	let sections: SettingsSection[] = [];
+
+	const state: SettingsPanelState = {
+		open: false,
+		tabs: [],
+		activeTabIndex: 0,
+		focusedFieldIndex: 0,
+		values: {},
+		error: "",
+		searchFilter: "",
+		focusZone: "fields",
+		editing: false,
+		scrollOffset: 0,
+		visibleRows: 20,
+	};
+
+	function activeFields(): readonly SettingsField[] {
+		const tab = state.tabs[state.activeTabIndex];
+		if (!tab) return [];
+		if (!state.searchFilter) return tab.fields;
+		const filter = state.searchFilter.toLowerCase();
+		return tab.fields.filter(
+			(f) =>
+				f.label.toLowerCase().includes(filter) ||
+				(state.values[f.key] ?? "").toLowerCase().includes(filter),
+		);
+	}
+
+	function currentField(): SettingsField | undefined {
+		return activeFields()[state.focusedFieldIndex];
+	}
+
+	function buildTabs(): void {
+		state.tabs = sections.map((s) => ({
+			key: s.id,
+			label: s.label,
+			fields: s.fields.map((f) => ({
+				...f,
+				// Namespace key by section so values don't collide across tabs
+				key: `${s.id}.${f.key}`,
+			})),
+		}));
+	}
+
+	function loadAllValues(): void {
+		state.values = {};
+		for (const section of sections) {
+			const loaded = section.load();
+			for (const field of section.fields) {
+				state.values[`${section.id}.${field.key}`] = loaded[field.key] ?? "";
+			}
+		}
+	}
+
+	function open(): void {
+		// Rebuild sections: core + extension-contributed
+		sections = [...createCoreSections(), ...getExtensionSections()];
+		buildTabs();
+		loadAllValues();
+
+		state.activeTabIndex = 0;
+		state.focusedFieldIndex = firstFocusableIndex();
+		state.error = "";
+		state.searchFilter = "";
+		state.focusZone = "fields";
+		state.scrollOffset = 0;
+		state.open = true;
+	}
+
+	function close(): void {
+		state.error = "";
+		state.searchFilter = "";
+		state.focusZone = "fields";
+		state.scrollOffset = 0;
+		state.open = false;
+	}
+
+	function switchTab(dir: -1 | 1): void {
+		const count = state.tabs.length;
+		if (count === 0) return;
+		state.activeTabIndex = (state.activeTabIndex + dir + count) % count;
+		state.focusedFieldIndex = firstFocusableIndex();
+		state.scrollOffset = 0;
+		state.searchFilter = "";
+		state.error = "";
+	}
+
+	/** Find the first non-separator field index. */
+	function firstFocusableIndex(): number {
+		const fields = activeFields();
+		for (let i = 0; i < fields.length; i++) {
+			if (fields[i]?.type !== "separator") return i;
+		}
+		return 0;
+	}
+
+	function ensureVisible(): void {
+		// Adjust scroll so focusedFieldIndex is in view
+		if (state.focusedFieldIndex < state.scrollOffset) {
+			state.scrollOffset = state.focusedFieldIndex;
+		} else if (
+			state.focusedFieldIndex >=
+			state.scrollOffset + state.visibleRows
+		) {
+			state.scrollOffset = state.focusedFieldIndex - state.visibleRows + 1;
+		}
+	}
+
+	function focusUp(): void {
+		state.editing = false;
+		const fields = activeFields();
+		if (fields.length === 0) {
+			state.focusZone = "tabs";
+			return;
+		}
+		if (state.focusedFieldIndex === 0) {
+			state.focusZone = "tabs";
+			return;
+		}
+		// Skip separators
+		let next = state.focusedFieldIndex - 1;
+		while (next > 0 && fields[next]?.type === "separator") next--;
+		if (fields[next]?.type === "separator") {
+			// All above are separators — go to tabs
+			state.focusZone = "tabs";
+			return;
+		}
+		state.focusedFieldIndex = next;
+		ensureVisible();
+	}
+
+	function focusDown(): void {
+		state.editing = false;
+		const fields = activeFields();
+		if (fields.length === 0) return;
+		if (state.focusedFieldIndex >= fields.length - 1) return;
+		// Skip separators
+		let next = state.focusedFieldIndex + 1;
+		while (next < fields.length - 1 && fields[next]?.type === "separator")
+			next++;
+		if (fields[next]?.type === "separator") return;
+		state.focusedFieldIndex = next;
+		ensureVisible();
+	}
+
+	function toggleCheckbox(dir: 1 | -1 = 1): void {
+		const field = currentField();
+		if (!field || field.readonly || field.type !== "checkbox") return;
+		const key = field.key;
+		state.values[key] = state.values[key] === "true" ? "false" : "true";
+	}
+
+	function cycleSelect(dir: 1 | -1 = 1): void {
+		const field = currentField();
+		if (!field || field.readonly || field.type !== "select" || !field.options)
+			return;
+		const current = state.values[field.key] ?? "";
+		const options = field.options as readonly string[];
+		const idx = options.indexOf(current);
+		const nextIdx = (idx + dir + options.length) % options.length;
+		state.values[field.key] = options[nextIdx] ?? "";
+	}
+
+	function executeAction(field: SettingsField): void {
+		const key = field.key;
+
+		if (key.endsWith("_add_provider")) {
+			// Add a new empty provider instance
+			const settings = loadGlobalSettings();
+			const existing = Object.keys(settings.providers ?? {});
+			// Generate a default name
+			let name = "new-provider";
+			let i = 1;
+			while (existing.includes(name)) {
+				name = `new-provider-${i++}`;
+			}
+			const defaultType = PROVIDER_DESCRIPTORS[0]?.type ?? "openai";
+			// Put new provider FIRST in the providers object
+			const updated = {
+				...settings,
+				permissions: {
+					...settings.permissions,
+					allowedTools: settings.permissions.allowedTools ?? [],
+					deniedTools: settings.permissions.deniedTools ?? [],
+				},
+				providers: {
+					[name]: { type: defaultType } as unknown as ProviderSettingsConfig,
+					...(settings.providers ?? {}),
+				},
+			} satisfies GlobalSettings;
+			saveGlobalSettings(updated);
+			// Reopen to show new provider
+			const savedTab = state.activeTabIndex;
+			open();
+			state.activeTabIndex = savedTab;
+			// Focus the new provider's Name field (after "+ Add Provider", separator, provider separator)
+			// Find the Name field for the new provider
+			const fields = activeFields();
+			const nameFieldIdx = fields.findIndex((f) =>
+				f.key.endsWith(`${name}._name`),
+			);
+			if (nameFieldIdx >= 0) {
+				state.focusedFieldIndex = nameFieldIdx;
+				state.editing = true;
+				// Pre-fill with empty so user starts fresh
+				const stateKey = `providers.${name}._name`;
+				state.values[stateKey] = "";
+			}
+			ensureVisible();
+			return;
+		}
+
+		if (key.includes("_remove_")) {
+			const providerName = key.slice(
+				key.indexOf("_remove_") + "_remove_".length,
+			);
+			const settings = loadGlobalSettings();
+			const providers = { ...(settings.providers ?? {}) };
+			delete providers[providerName];
+			const updated = {
+				...settings,
+				permissions: {
+					...settings.permissions,
+					allowedTools: settings.permissions.allowedTools ?? [],
+					deniedTools: settings.permissions.deniedTools ?? [],
+				},
+				providers,
+			} satisfies GlobalSettings;
+			saveGlobalSettings(updated);
+			// Reopen to reflect removal
+			const savedTab = state.activeTabIndex;
+			open();
+			state.activeTabIndex = savedTab;
+			return;
+		}
+	}
+
+	function save(): void {
+		// Save the currently active tab's section
+		const section = sections[state.activeTabIndex];
+		if (!section) return;
+
+		try {
+			// Extract values for this section (strip the section.id prefix)
+			const sectionValues: Record<string, string> = {};
+			for (const field of section.fields) {
+				const stateKey = `${section.id}.${field.key}`;
+				sectionValues[field.key] = state.values[stateKey] ?? "";
+			}
+
+			section.save(sectionValues);
+			state.error = "";
+			close();
+		} catch (err) {
+			state.error = `Save failed: ${err instanceof Error ? err.message : String(err)}`;
+		}
+	}
+
+	function handleKey(key: {
+		name: string;
+		char?: string | undefined;
+		ctrl?: boolean | undefined;
+		shift?: boolean | undefined;
+	}): boolean {
+		if (!state.open) return false;
+
+		// --- Search bar focused ---
+		if (state.focusZone === "search") {
+			if (key.name === "escape") {
+				state.searchFilter = "";
+				state.focusZone = "fields";
+				state.focusedFieldIndex = firstFocusableIndex();
+				state.scrollOffset = 0;
+				return true;
+			}
+			if (key.name === "enter" || key.name === "down") {
+				state.focusZone = "fields";
+				state.focusedFieldIndex = firstFocusableIndex();
+				state.scrollOffset = 0;
+				return true;
+			}
+			if (key.name === "up") {
+				state.focusZone = "tabs";
+				return true;
+			}
+			if (key.name === "backspace") {
+				state.searchFilter = state.searchFilter.slice(0, -1);
+				state.focusedFieldIndex = firstFocusableIndex();
+				state.scrollOffset = 0;
+				return true;
+			}
+			if (key.name === "char" && key.char) {
+				state.searchFilter += key.char;
+				state.focusedFieldIndex = firstFocusableIndex();
+				state.scrollOffset = 0;
+				return true;
+			}
+			return true;
+		}
+
+		// --- Tabs bar focused ---
+		if (state.focusZone === "tabs") {
+			if (key.name === "left") {
+				switchTab(-1);
+				return true;
+			}
+			if (key.name === "right") {
+				switchTab(1);
+				return true;
+			}
+			if (key.name === "down" || key.name === "enter") {
+				state.focusZone = "fields";
+				state.focusedFieldIndex = firstFocusableIndex();
+				state.scrollOffset = 0;
+				return true;
+			}
+			if (key.name === "escape") {
+				close();
+				return true;
+			}
+			if (key.name === "char" && key.char === "/") {
+				state.focusZone = "search";
+				state.searchFilter = "";
+				return true;
+			}
+			return true;
+		}
+
+		// --- Fields zone ---
+		const field = currentField();
+
+		// --- Editing mode (text/password input) ---
+		if (state.editing) {
+			if (key.name === "escape" || key.name === "enter") {
+				// Exit edit mode
+				state.editing = false;
+				return true;
+			}
+			if (key.name === "up") {
+				state.editing = false;
+				focusUp();
+				return true;
+			}
+			if (key.name === "down") {
+				state.editing = false;
+				focusDown();
+				return true;
+			}
+			if (key.name === "backspace") {
+				if (field) {
+					const val = state.values[field.key] ?? "";
+					state.values[field.key] = val.slice(0, -1);
+				}
+				return true;
+			}
+			if (key.name === "char" && key.char && !key.ctrl) {
+				if (field) {
+					state.values[field.key] = (state.values[field.key] ?? "") + key.char;
+				}
+				return true;
+			}
+			if (key.name === "s" && key.ctrl) {
+				state.editing = false;
+				save();
+				return true;
+			}
+			// Paste in edit mode
+			if (key.name === "paste" && key.char && field) {
+				// Strip newlines from pasted content (single-line field)
+				const cleaned = key.char.replace(/[\r\n]/g, "").trim();
+				state.values[field.key] = (state.values[field.key] ?? "") + cleaned;
+				return true;
+			}
+			return true; // consume all keys in editing mode
+		}
+
+		// --- Normal field navigation ---
+		if (key.name === "up") {
+			focusUp();
+			return true;
+		}
+		if (key.name === "down") {
+			focusDown();
+			return true;
+		}
+		// Left/right arrows: toggle/cycle for checkbox/select fields
+		if (key.name === "left") {
+			if (!field || field.readonly) return true;
+			if (field.type === "checkbox") {
+				toggleCheckbox(-1);
+				return true;
+			}
+			if (field.type === "select") {
+				cycleSelect(-1);
+				return true;
+			}
+			return true;
+		}
+		if (key.name === "right") {
+			if (!field || field.readonly) return true;
+			if (field.type === "checkbox") {
+				toggleCheckbox(1);
+				return true;
+			}
+			if (field.type === "select") {
+				cycleSelect(1);
+				return true;
+			}
+			return true;
+		}
+		if (key.name === "enter") {
+			if (!field || field.readonly) return true;
+			if (field.type === "separator") return true;
+			if (field.type === "action") {
+				executeAction(field);
+				return true;
+			}
+			if (field.type === "checkbox") {
+				toggleCheckbox();
+				return true;
+			}
+			if (field.type === "select") {
+				cycleSelect();
+				return true;
+			}
+			// text/password: enter edit mode
+			state.editing = true;
+			return true;
+		}
+		if (key.name === "char" && key.char === " ") {
+			if (!field || field.readonly) return true;
+			if (field.type === "separator" || field.type === "action") return true;
+			if (field.type === "checkbox") {
+				toggleCheckbox();
+				return true;
+			}
+			if (field.type === "select") {
+				cycleSelect();
+				return true;
+			}
+			// Space on text/password enters edit mode and adds space
+			state.editing = true;
+			state.values[field.key] = (state.values[field.key] ?? "") + " ";
+			return true;
+		}
+		if (key.name === "backspace") {
+			if (!field || field.readonly) return true;
+			if (field.type === "separator" || field.type === "action") return true;
+			// Backspace enters edit mode and deletes
+			state.editing = true;
+			const val = state.values[field.key] ?? "";
+			state.values[field.key] = val.slice(0, -1);
+			return true;
+		}
+		// Any printable char
+		if (key.name === "char" && key.char) {
+			// "/" activates search
+			if (key.char === "/") {
+				state.focusZone = "search";
+				state.searchFilter = "";
+				return true;
+			}
+			if (!field || field.readonly) return true;
+			// Don't type into non-text fields
+			if (
+				field.type === "checkbox" ||
+				field.type === "select" ||
+				field.type === "separator" ||
+				field.type === "action"
+			)
+				return true;
+			// Start editing and append char
+			state.editing = true;
+			state.values[field.key] = (state.values[field.key] ?? "") + key.char;
+			return true;
+		}
+		if (key.name === "s" && key.ctrl) {
+			save();
+			return true;
+		}
+		// Paste in normal mode — auto-enter edit and paste
+		if (key.name === "paste" && key.char && field) {
+			if (field.readonly) return true;
+			if (
+				field.type === "checkbox" ||
+				field.type === "select" ||
+				field.type === "separator" ||
+				field.type === "action"
+			)
+				return true;
+			state.editing = true;
+			const cleaned = key.char.replace(/[\r\n]/g, "").trim();
+			state.values[field.key] = (state.values[field.key] ?? "") + cleaned;
+			return true;
+		}
+		if (key.name === "escape") {
+			close();
+			return true;
+		}
+
+		return false;
+	}
+
+	return {
+		state,
+		actions: { open, close, handleKey },
+	};
+}