@adeildo/pi-kit 4.0.0 → 5.0.0

package/src/screen/view.ts

@@ -0,0 +1,771 @@
+import type { ExtensionAPI, Theme } from "@earendil-works/pi-coding-agent";
+import {
+	type Component,
+	decodeKittyPrintable,
+	Input,
+	matchesKey,
+	type TUI,
+	truncateToWidth,
+	visibleWidth,
+	wrapTextWithAnsi,
+} from "@earendil-works/pi-tui";
+
+import type { RowView } from "../contracts/screen.ts";
+import {
+	type Control,
+	type ControlOption,
+	formatValue,
+	type Json,
+	optionText,
+	sameJson,
+} from "../control.ts";
+import type { Layer } from "../settings/store.ts";
+import { applyRow, listTabs, runRow } from "./client.ts";
+import { keyOf, type Line, type ScreenModel } from "./model.ts";
+
+export type ScreenResult = { kind: "close" } | { kind: "edit"; row: RowView };
+
+export interface ScreenViewOptions {
+	tui: TUI;
+	theme: Theme;
+	events: ExtensionAPI["events"];
+	model: ScreenModel;
+	done: (result: ScreenResult) => void;
+}
+
+interface PickItem {
+	value: Json;
+	label: string;
+	description?: string;
+	/** Opens an input or the editor instead of picking a value. */
+	opens?: "input" | "edit";
+}
+
+interface PickMode {
+	kind: "pick";
+	row: RowView;
+	items: PickItem[];
+	index: number;
+	current: Json | undefined;
+}
+
+interface CheckMode {
+	kind: "check";
+	row: RowView;
+	items: PickItem[];
+	checked: Json[];
+	index: number;
+}
+
+interface InputMode {
+	kind: "input";
+	row: RowView;
+	input: Input;
+	error?: string;
+}
+
+interface TextMode {
+	kind: "text";
+	title: string;
+	text: string;
+	scroll: number;
+}
+
+type Mode = { kind: "browse" } | PickMode | CheckMode | InputMode | TextMode;
+
+type Tone = "success" | "error" | "warning" | "muted";
+
+const PANEL = 4;
+const CHROME = 7 + PANEL;
+const MIN_BODY = 6;
+
+export class ScreenView implements Component {
+	#options: ScreenViewOptions;
+	#mode: Mode = { kind: "browse" };
+	#status: { text: string; tone: Tone } | undefined;
+	#running = new Set<string>();
+	#confirming: string | undefined;
+	#scroll = 0;
+	#bodyHeight = MIN_BODY;
+
+	constructor(options: ScreenViewOptions) {
+		this.#options = options;
+	}
+
+	invalidate(): void {}
+
+	handleInput(data: string): void {
+		this.#status = undefined;
+		if (this.#confirmed(data)) {
+			this.#options.tui.requestRender();
+			return;
+		}
+		switch (this.#mode.kind) {
+			case "browse":
+				this.#browseKey(data);
+				break;
+			case "pick":
+				this.#pickKey(this.#mode, data);
+				break;
+			case "check":
+				this.#checkKey(this.#mode, data);
+				break;
+			case "input":
+				this.#mode.input.handleInput(data);
+				break;
+			case "text":
+				this.#textKey(this.#mode, data);
+				break;
+		}
+		this.#options.tui.requestRender();
+	}
+
+	/** A second Enter on the same row runs it. Any other key cancels. */
+	#confirmed(data: string): boolean {
+		const pending = this.#confirming;
+		this.#confirming = undefined;
+		if (pending === undefined || !matchesKey(data, "enter")) return false;
+
+		const row = this.#options.model.selected()?.row;
+		if (row === undefined || keyOf(row) !== pending) return false;
+		this.#run(row);
+		return true;
+	}
+
+	#browseKey(data: string): void {
+		const model = this.#options.model;
+		const row = model.selected()?.row;
+
+		if (matchesKey(data, "escape")) {
+			if (model.searching) model.setQuery("");
+			else this.#options.done({ kind: "close" });
+		} else if (matchesKey(data, "ctrl+c")) this.#options.done({ kind: "close" });
+		else if (matchesKey(data, "up")) model.move(-1);
+		else if (matchesKey(data, "down")) model.move(1);
+		else if (matchesKey(data, "pageUp")) model.move(-this.#bodyHeight);
+		else if (matchesKey(data, "pageDown")) model.move(this.#bodyHeight);
+		else if (matchesKey(data, "home")) model.moveToEdge("first");
+		else if (matchesKey(data, "end")) model.moveToEdge("last");
+		else if (matchesKey(data, "left")) model.switchTab(-1);
+		else if (matchesKey(data, "right")) model.switchTab(1);
+		else if (matchesKey(data, "tab")) this.#jumpSection(1);
+		else if (matchesKey(data, "shift+tab")) this.#jumpSection(-1);
+		else if (matchesKey(data, "enter")) {
+			if (row !== undefined) this.#activate(row);
+		} else if (matchesKey(data, "delete")) {
+			if (row !== undefined) this.#unset(row);
+		} else if (matchesKey(data, "backspace")) {
+			if (model.searching) model.setQuery(model.query.slice(0, -1));
+		} else if (matchesKey(data, "space") && !model.searching) {
+			if (row !== undefined) this.#cycle(row);
+		} else {
+			const typed = printable(data);
+			if (typed !== undefined) model.setQuery(model.query + typed);
+		}
+	}
+
+	/** The section starts at the top, heading and all. */
+	#jumpSection(direction: 1 | -1): void {
+		const model = this.#options.model;
+		model.jumpSection(direction);
+		this.#scroll = Math.max(0, model.cursorLine() - 1);
+	}
+
+	#pickKey(mode: PickMode, data: string): void {
+		if (matchesKey(data, "escape")) this.#mode = { kind: "browse" };
+		else if (matchesKey(data, "up")) step(mode, -1);
+		else if (matchesKey(data, "down")) step(mode, 1);
+		else if (matchesKey(data, "enter")) {
+			const item = mode.items[mode.index];
+			if (item === undefined) return;
+			this.#mode = { kind: "browse" };
+			if (item.opens === "input") this.#openInput(mode.row);
+			else if (item.opens === "edit") this.#options.done({ kind: "edit", row: mode.row });
+			else this.#set(mode.row, item.value);
+		}
+	}
+
+	#checkKey(mode: CheckMode, data: string): void {
+		const item = mode.items[mode.index];
+		const at =
+			item === undefined ? -1 : mode.checked.findIndex((value) => sameJson(value, item.value));
+
+		if (matchesKey(data, "escape")) this.#mode = { kind: "browse" };
+		else if (matchesKey(data, "alt+up") || matchesKey(data, "shift+up")) {
+			if (at > 0) this.#swap(mode, at, at - 1);
+		} else if (matchesKey(data, "alt+down") || matchesKey(data, "shift+down")) {
+			if (at !== -1 && at < mode.checked.length - 1) this.#swap(mode, at, at + 1);
+		} else if (matchesKey(data, "up")) step(mode, -1);
+		else if (matchesKey(data, "down")) step(mode, 1);
+		else if (matchesKey(data, "space") && item !== undefined) {
+			if (at === -1) mode.checked.push(item.value);
+			else mode.checked.splice(at, 1);
+			this.#sortChecks(mode);
+		} else if (matchesKey(data, "enter")) {
+			this.#mode = { kind: "browse" };
+			this.#set(mode.row, mode.checked);
+		}
+	}
+
+	#textKey(mode: TextMode, data: string): void {
+		if (matchesKey(data, "escape") || matchesKey(data, "enter")) this.#mode = { kind: "browse" };
+		else if (matchesKey(data, "up")) mode.scroll = Math.max(0, mode.scroll - 1);
+		else if (matchesKey(data, "down")) mode.scroll++;
+		else if (matchesKey(data, "pageUp")) mode.scroll = Math.max(0, mode.scroll - this.#bodyHeight);
+		else if (matchesKey(data, "pageDown")) mode.scroll += this.#bodyHeight;
+	}
+
+	#activate(row: RowView): void {
+		if (row.kind === "action") {
+			if (row.confirm === undefined) this.#run(row);
+			else {
+				this.#confirming = keyOf(row);
+				this.#say(`${row.confirm} \u21b5 again to confirm, any other key to keep`, "warning");
+			}
+			return;
+		}
+		const control = row.control;
+		if (control === undefined) {
+			this.#say("read only", "muted");
+			return;
+		}
+		switch (control.type) {
+			case "toggle":
+				this.#set(row, row.value !== true);
+				return;
+			case "choice":
+				this.#openPick(row, control.options.map(pickItem), control.custom === true);
+				return;
+			case "number":
+				this.#openInput(row);
+				return;
+			case "text":
+				if (control.presets !== undefined) {
+					const items = control.presets.map(pickItem);
+					items.push({
+						value: null,
+						label: "Edit\u2026",
+						opens: control.multiline ? "edit" : "input",
+					});
+					this.#openPick(row, items, false);
+				} else if (control.multiline) this.#options.done({ kind: "edit", row });
+				else this.#openInput(row);
+				return;
+			case "list":
+				if (control.options === undefined) this.#openInput(row);
+				else this.#openCheck(row, control.options);
+				return;
+		}
+	}
+
+	#cycle(row: RowView): void {
+		const control = row.control;
+		if (control?.type === "toggle") {
+			this.#set(row, row.value !== true);
+			return;
+		}
+		if (control?.type === "choice" && control.options.length > 0) {
+			const at = control.options.findIndex((option) => sameJson(option.value, row.value));
+			const next = control.options[(at + 1) % control.options.length];
+			if (next !== undefined) this.#set(row, next.value);
+			return;
+		}
+		this.#activate(row);
+	}
+
+	#openPick(row: RowView, items: PickItem[], custom: boolean): void {
+		if (custom) items.push({ value: null, label: "Other\u2026", opens: "input" });
+		const found = items.findIndex(
+			(item) => item.opens === undefined && sameJson(item.value, row.value),
+		);
+		this.#mode = { kind: "pick", row, items, index: Math.max(0, found), current: row.value };
+	}
+
+	#openCheck(row: RowView, options: readonly ControlOption[]): void {
+		const checked = Array.isArray(row.value) ? [...row.value] : [];
+		const mode: CheckMode = {
+			kind: "check",
+			row,
+			items: options.map(pickItem),
+			checked,
+			index: 0,
+		};
+		this.#sortChecks(mode);
+		this.#mode = mode;
+	}
+
+	#openInput(row: RowView): void {
+		const input = new Input();
+		input.focused = true;
+		input.setValue(inputText(row));
+		// setValue leaves the cursor at the start.
+		input.handleInput("\u001b[F");
+		const mode: InputMode = { kind: "input", row, input };
+		input.onEscape = () => {
+			this.#mode = { kind: "browse" };
+		};
+		input.onSubmit = (text) => {
+			const parsed = parseInput(row.control, text);
+			if ("error" in parsed) {
+				mode.error = parsed.error;
+				return;
+			}
+			const error = this.#set(row, parsed.value);
+			if (error === undefined) this.#mode = { kind: "browse" };
+			else mode.error = error;
+		};
+		this.#mode = mode;
+	}
+
+	#set(row: RowView, value: Json): string | undefined {
+		const error = applyRow(this.#options.events, row, "set", value);
+		this.#refresh();
+		if (error !== undefined) this.#say(error, "error");
+		else
+			this.#say(`${row.label}: ${row.control ? formatValue(row.control, value) : ""}`, "success");
+		return error;
+	}
+
+	#unset(row: RowView): void {
+		if (row.kind !== "setting") {
+			this.#say("nothing to reset", "muted");
+			return;
+		}
+		if (row.layer === "default") {
+			this.#say("already the default", "muted");
+			return;
+		}
+		const error = applyRow(this.#options.events, row, "unset");
+		this.#refresh();
+		if (error !== undefined) this.#say(error, "error");
+		else
+			this.#say(
+				row.layer === "project" ? "dropped the project value" : "back to the default",
+				"success",
+			);
+	}
+
+	#run(row: RowView): void {
+		const key = keyOf(row);
+		if (this.#running.has(key)) return;
+		this.#running.add(key);
+		void runRow(this.#options.events, row).then((done) => {
+			this.#running.delete(key);
+			this.#refresh();
+			if (done.error !== undefined) this.#say(done.error, "error");
+			else if (done.text !== undefined)
+				this.#mode = { kind: "text", title: row.label, text: done.text, scroll: 0 };
+			else this.#say(`${row.label}: done`, "success");
+			this.#options.tui.requestRender();
+		});
+	}
+
+	#refresh(): void {
+		this.#options.model.refresh(listTabs(this.#options.events));
+	}
+
+	#say(text: string, tone: Tone): void {
+		this.#status = { text, tone };
+	}
+
+	#swap(mode: CheckMode, from: number, to: number): void {
+		const moved = mode.checked[from];
+		const other = mode.checked[to];
+		if (moved === undefined || other === undefined) return;
+		mode.checked[from] = other;
+		mode.checked[to] = moved;
+		this.#sortChecks(mode);
+		mode.index = to;
+	}
+
+	/** Checked values first, in their order, then the rest as the control lists them. */
+	#sortChecks(mode: CheckMode): void {
+		const highlighted = mode.items[mode.index]?.value;
+		const rank = (item: PickItem): number => {
+			const at = mode.checked.findIndex((value) => sameJson(value, item.value));
+			return at === -1 ? mode.checked.length + mode.items.indexOf(item) : at;
+		};
+		mode.items.sort((left, right) => rank(left) - rank(right));
+		const found = mode.items.findIndex((item) => sameJson(item.value, highlighted));
+		mode.index = Math.max(0, found);
+	}
+
+	render(width: number): string[] {
+		const { theme, tui } = this.#options;
+		const inner = Math.max(20, width - 2);
+		const height = Math.max(CHROME + MIN_BODY, tui.terminal.rows);
+		this.#bodyHeight = height - CHROME;
+
+		const border = (text: string): string => theme.fg("borderMuted", text);
+		const frame = (text: string): string =>
+			border("\u2502") + truncateToWidth(text, inner, "\u2026", true) + border("\u2502");
+
+		const left = this.#mode.kind === "text" || inner < 50 ? 0 : this.#leftWidth(inner);
+		const title = ` ${theme.fg("accent", theme.bold("Settings"))} `;
+		const lines = [
+			border("\u256d\u2500") +
+				title +
+				border(`${"\u2500".repeat(Math.max(0, inner - 1 - visibleWidth(title)))}\u256e`),
+			frame(this.#tabsLine(inner)),
+			border(divider("\u251c", "\u2524", inner, left, "\u252c")),
+		];
+
+		const body = this.#body(inner, left);
+		for (const line of body) lines.push(frame(line));
+
+		lines.push(border(divider("\u251c", "\u2524", inner, left, "\u2534")));
+		for (const line of this.#panel(inner - 2)) lines.push(frame(` ${line}`));
+		lines.push(border(divider("\u251c", "\u2524", inner, 0, "")));
+		lines.push(frame(` ${theme.fg("dim", this.#hints())}`));
+		lines.push(border(`\u2570${"\u2500".repeat(inner)}\u256f`));
+		return lines;
+	}
+
+	#tabsLine(inner: number): string {
+		const { theme, model } = this.#options;
+		if (model.searching) {
+			const count = model.lines().filter((line) => line.kind === "row").length;
+			const found = count === 1 ? "1 match" : `${count} matches`;
+			return ` ${theme.fg("accent", "\u2315")} ${model.query}${theme.inverse(" ")}  ${theme.fg("dim", found)}`;
+		}
+		const tabs = model.tabs.map((tab, index) =>
+			index === model.tab
+				? theme.bg("selectedBg", theme.fg("accent", theme.bold(` ${tab.title} `)))
+				: theme.fg("muted", ` ${tab.title} `),
+		);
+		const hint = theme.fg("dim", "type to search ");
+		const used = visibleWidth(tabs.join(" ")) + 1;
+		const gap = Math.max(1, inner - used - visibleWidth(hint));
+		return ` ${tabs.join(" ")}${" ".repeat(gap)}${hint}`;
+	}
+
+	#leftWidth(inner: number): number {
+		const widest = Math.max(
+			0,
+			...this.#options.model.sections().map((entry) => visibleWidth(entry.title)),
+		);
+		return Math.min(Math.floor(inner / 3), Math.max(14, widest + 4));
+	}
+
+	#body(inner: number, left: number): string[] {
+		const mode = this.#mode;
+		if (mode.kind === "text") return this.#textBody(mode, inner);
+
+		const right = inner - (left === 0 ? 0 : left + 1);
+		const content =
+			mode.kind === "pick" || mode.kind === "check"
+				? this.#pickLines(mode, right)
+				: this.#rowLines(right);
+		const sections = left === 0 ? [] : this.#sectionLines(left);
+
+		const out: string[] = [];
+		for (let index = 0; index < this.#bodyHeight; index++) {
+			const main = content[index] ?? "";
+			if (left === 0) {
+				out.push(main);
+				continue;
+			}
+			const side = truncateToWidth(sections[index] ?? "", left, "\u2026", true);
+			out.push(side + this.#options.theme.fg("borderMuted", "\u2502") + main);
+		}
+		return out;
+	}
+
+	#sectionLines(width: number): string[] {
+		const { theme, model } = this.#options;
+		return model.sections().map((entry) => {
+			const text = truncateToWidth(entry.title, width - 3, "\u2026");
+			return entry.active
+				? ` ${theme.fg("accent", `\u25b8 ${theme.bold(text)}`)}`
+				: `   ${theme.fg("dim", text)}`;
+		});
+	}
+
+	#rowLines(width: number): string[] {
+		const { theme, model } = this.#options;
+		const lines = model.lines();
+		if (lines.length === 0) {
+			const empty = model.searching ? "nothing matches" : "no settings yet";
+			return ["", `  ${theme.fg("dim", empty)}`];
+		}
+
+		const height = this.#bodyHeight;
+		const cursor = model.cursorLine();
+		// Show the heading when the cursor is on a section's first row.
+		const top = lines[cursor - 1]?.kind === "heading" ? cursor - 1 : cursor;
+		if (top < this.#scroll) this.#scroll = Math.max(0, top);
+		if (cursor >= this.#scroll + height) this.#scroll = cursor - height + 1;
+		this.#scroll = Math.min(this.#scroll, Math.max(0, lines.length - height));
+
+		const labelWidth = Math.min(
+			Math.floor((width - 4) / 2),
+			Math.max(
+				12,
+				...lines.map((line) =>
+					line.kind === "row" ? visibleWidth(line.row.label) + (line.row.indent ?? 0) * 2 : 0,
+				),
+			) + 2,
+		);
+		const bar = scrollbar(lines.length, height, this.#scroll);
+
+		const out: string[] = [];
+		for (let index = 0; index < height; index++) {
+			const line = lines[this.#scroll + index];
+			const text =
+				line === undefined ? "" : this.#line(line, this.#scroll + index === cursor, labelWidth);
+			const mark = bar[index];
+			const edge = mark === true ? theme.fg("scrollbarThumb", "\u2503") : " ";
+			out.push(truncateToWidth(text, width - 1, "\u2026", true) + edge);
+		}
+		return out;
+	}
+
+	#line(line: Line, selected: boolean, labelWidth: number): string {
+		const { theme } = this.#options;
+		if (line.kind === "heading") return `  ${theme.underline(theme.fg("muted", line.title))}`;
+
+		const row = line.row;
+		const indent = "  ".repeat(row.indent ?? 0);
+		const cursor = selected ? theme.fg("accent", "\u276f ") : "  ";
+		const room = Math.max(1, labelWidth - 1 - visibleWidth(indent));
+		const label = truncateToWidth(row.label, room, "\u2026");
+		const pad = " ".repeat(Math.max(1, labelWidth - visibleWidth(indent) - visibleWidth(label)));
+		const labelText = selected
+			? theme.fg("accent", theme.bold(label))
+			: theme.fg(row.kind === "info" ? "muted" : "text", label);
+		return ` ${cursor}${indent}${labelText}${pad}${this.#value(row, selected)}`;
+	}
+
+	#value(row: RowView, selected: boolean): string {
+		const { theme } = this.#options;
+		if (row.kind === "action") {
+			if (this.#running.has(keyOf(row))) return theme.fg("accent", "running\u2026");
+			if (row.text === undefined) return theme.fg(selected ? "accent" : "dim", "\u21b5 run");
+			return theme.fg("muted", row.text) + (selected ? theme.fg("dim", "  \u21b5 run") : "");
+		}
+		if (row.kind === "info" || row.control === undefined) return theme.fg("dim", row.text ?? "");
+
+		const shown = formatValue(row.control, row.value) || theme.fg("dim", "(empty)");
+		const color = valueColor(row.layer);
+		const value = selected
+			? theme.bold(theme.fg(color === "muted" ? "text" : color, shown))
+			: theme.fg(color, shown);
+		return value + this.#tags(row);
+	}
+
+	#tags(row: RowView): string {
+		const { theme } = this.#options;
+
+		let tags = "";
+		if (row.layer === "project") tags += theme.fg("warning", "  \u25c6 project");
+		if (row.restart === true) tags += theme.fg("dim", "  \u21bb");
+		return tags;
+	}
+
+	#pickLines(mode: PickMode | CheckMode, width: number): string[] {
+		const { theme } = this.#options;
+		const out = [`  ${theme.underline(theme.fg("muted", mode.row.label))}`];
+		const height = this.#bodyHeight - 1;
+		const top = Math.max(0, Math.min(mode.index - height + 1, mode.items.length - height));
+		const labelWidth = Math.min(
+			34,
+			Math.floor(width / 2),
+			Math.max(...mode.items.map((item) => visibleWidth(item.label))) + 6,
+		);
+
+		mode.items.slice(top, top + height).forEach((item, offset) => {
+			const index = top + offset;
+			const selected = index === mode.index;
+			const cursor = selected ? theme.fg("accent", "\u276f ") : "  ";
+			let mark: string;
+			if (mode.kind === "check") {
+				const at = mode.checked.findIndex((value) => sameJson(value, item.value));
+				mark = at === -1 ? theme.fg("dim", "[ ] ") : theme.fg("accent", `[${at + 1}] `);
+			} else {
+				const current = item.opens === undefined && sameJson(item.value, mode.current);
+				mark = current ? theme.fg("accent", "\u25cf ") : "  ";
+			}
+			const label = selected
+				? theme.fg("accent", theme.bold(item.label))
+				: theme.fg("text", item.label);
+			const pad = " ".repeat(
+				Math.max(1, labelWidth - visibleWidth(mark) - visibleWidth(item.label)),
+			);
+			const description = item.description === undefined ? "" : theme.fg("dim", item.description);
+			out.push(` ${cursor}${mark}${label}${pad}${description}`);
+		});
+		return out;
+	}
+
+	#textBody(mode: TextMode, inner: number): string[] {
+		const { theme } = this.#options;
+		const wrapped = mode.text
+			.split("\n")
+			.flatMap((line) => (line === "" ? [""] : wrapTextWithAnsi(line, inner - 4)));
+		const height = this.#bodyHeight - 2;
+		mode.scroll = Math.min(mode.scroll, Math.max(0, wrapped.length - height));
+		const out = [`  ${theme.underline(theme.fg("muted", mode.title))}`, ""];
+		for (const line of wrapped.slice(mode.scroll, mode.scroll + height)) out.push(`  ${line}`);
+		while (out.length < this.#bodyHeight) out.push("");
+		return out;
+	}
+
+	#panel(width: number): string[] {
+		const { theme, model } = this.#options;
+		const mode = this.#mode;
+		const status = this.#status === undefined ? "" : theme.fg(this.#status.tone, this.#status.text);
+
+		if (mode.kind === "input") {
+			const error = mode.error === undefined ? "" : theme.fg("error", mode.error);
+			return [
+				theme.fg("muted", `${mode.row.label}, new value:`),
+				...mode.input.render(width),
+				error || theme.fg("dim", inputHint(mode.row.control)),
+				"",
+			].slice(0, PANEL);
+		}
+
+		let description = "";
+		let meta = "";
+		if (mode.kind === "pick" || mode.kind === "check") {
+			description = mode.items[mode.index]?.description ?? mode.row.description;
+			meta = mode.kind === "check" ? "[1] shows first" : "";
+		} else if (mode.kind === "browse") {
+			const row = model.selected()?.row;
+			description = row?.description ?? "";
+			meta = row === undefined ? "" : rowMeta(row);
+		}
+
+		const wrapped = wrapTextWithAnsi(description, width).slice(0, 2);
+		while (wrapped.length < 2) wrapped.push("");
+		return [...wrapped.map((line) => theme.fg("text", line)), theme.fg("dim", meta), status];
+	}
+
+	#hints(): string {
+		const mode = this.#mode;
+		switch (mode.kind) {
+			case "pick":
+				return "\u2191\u2193 move   \u21b5 pick   esc back";
+			case "check":
+				return "\u2191\u2193 move   space check   alt+\u2191\u2193 reorder   \u21b5 save   esc back";
+			case "input":
+				return "\u21b5 save   esc cancel";
+			case "text":
+				return "\u2191\u2193 scroll   esc back";
+			case "browse":
+				break;
+		}
+
+		const model = this.#options.model;
+		const row = model.selected()?.row;
+		const parts = ["\u2191\u2193 move"];
+		if (row?.kind === "action") parts.push("\u21b5 run");
+		else if (row?.control?.type === "toggle") parts.push("\u21b5 flip");
+		else if (row?.control !== undefined) parts.push("\u21b5 change");
+		if (row?.control?.type === "choice" && !model.searching) parts.push("space next");
+		if (row?.kind === "setting" && row.layer === "project") parts.push("del drop project value");
+		else if (row?.kind === "setting" && row.layer === "global") parts.push("del reset");
+		if (!model.searching) parts.push("\u2190\u2192 tabs", "\u21e5 section");
+		parts.push(model.searching ? "esc clear search" : "esc close");
+		return parts.join("   ");
+	}
+}
+
+function divider(start: string, end: string, inner: number, left: number, joint: string): string {
+	if (left === 0 || joint === "") return `${start}${"\u2500".repeat(inner)}${end}`;
+	return `${start}${"\u2500".repeat(left)}${joint}${"\u2500".repeat(inner - left - 1)}${end}`;
+}
+
+/** True where the thumb is. Empty when everything fits. */
+function scrollbar(total: number, height: number, scroll: number): (boolean | undefined)[] {
+	if (total <= height) return [];
+	const size = Math.max(1, Math.round((height * height) / total));
+	const start = Math.round((scroll / (total - height)) * (height - size));
+	return Array.from({ length: height }, (_, index) => index >= start && index < start + size);
+}
+
+function rowMeta(row: RowView): string {
+	const parts: string[] = [];
+	if (row.kind === "setting" && row.control !== undefined) {
+		parts.push(row.id);
+		const fallback = formatValue(row.control, row.fallback) || "(empty)";
+		if (row.layer === "project") {
+			const global = formatValue(row.control, row.hidden) || "(empty)";
+			parts.push(`this project sets it, global is ${global}`);
+		}
+		parts.push(`default ${fallback}`);
+	} else if (row.kind === "value") parts.push(row.meta ?? "this session only");
+	if (row.restart === true) parts.push("applies after /reload");
+	return parts.join(", ");
+}
+
+function valueColor(layer: Layer | undefined): "accent" | "warning" | "muted" | "text" {
+	switch (layer) {
+		case "global":
+			return "accent";
+		case "project":
+			return "warning";
+		case "default":
+			return "muted";
+		case undefined:
+			return "text";
+	}
+}
+
+function step(mode: PickMode | CheckMode, delta: number): void {
+	mode.index = Math.min(mode.items.length - 1, Math.max(0, mode.index + delta));
+}
+
+function pickItem(option: ControlOption): PickItem {
+	const item: PickItem = { value: option.value, label: optionText(option) };
+	if (option.description !== undefined) item.description = option.description;
+	return item;
+}
+
+function inputText(row: RowView): string {
+	const value = row.value;
+	if (value === undefined || value === null) return "";
+	if (Array.isArray(value)) return value.join(", ");
+	return typeof value === "string" ? value : String(value);
+}
+
+function inputHint(control: Control | undefined): string {
+	if (control?.type === "number") {
+		let range = "a number";
+		if (control.min !== undefined && control.max !== undefined)
+			range = `from ${control.min} to ${control.max}`;
+		else if (control.min !== undefined) range = `${control.min} or more`;
+		return control.nullable ? `${range}, or empty for none` : range;
+	}
+	if (control?.type === "list") return "comma separated";
+	return "";
+}
+
+function parseInput(
+	control: Control | undefined,
+	text: string,
+): { value: Json } | { error: string } {
+	const trimmed = text.trim();
+	if (control?.type === "number") {
+		if (trimmed === "" && control.nullable) return { value: null };
+		const value = Number(trimmed);
+		if (trimmed === "" || !Number.isFinite(value)) return { error: "not a number" };
+		return { value };
+	}
+	if (control?.type === "list") {
+		return {
+			value: trimmed
+				.split(",")
+				.map((entry) => entry.trim())
+				.filter((entry) => entry !== ""),
+		};
+	}
+	return { value: text };
+}
+
+function printable(data: string): string | undefined {
+	const kitty = decodeKittyPrintable(data);
+	if (kitty !== undefined) return kitty;
+	if (data.length === 1 && data >= " " && data !== "\u007f") return data;
+	return undefined;
+}