@luan.sh/pi-subagents 0.3.7

package/node_modules/@luan.sh/pi-xsettings/src/ui/structured-list-editor.ts

@@ -0,0 +1,730 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import {
+	type Component,
+	getKeybindings,
+	matchesKey,
+	Spacer,
+	Text,
+	truncateToWidth,
+	visibleWidth,
+} from "@earendil-works/pi-tui";
+import {
+	ComponentStack,
+	DialogButtonBar,
+	type DialogHost,
+	type DialogOverlayOptions,
+	icon,
+	SearchableSelect,
+	SelectableList,
+	type SelectableListRenderContext,
+	SemanticInput,
+	tuiTheme,
+} from "@luan.sh/pi-libtui";
+import type { TSchema } from "typebox";
+import { checkSchema } from "../config/schema.ts";
+import type { ListDefinition, ListItemField, SettingOption, SettingValue } from "../protocol/settings.ts";
+import { RenderLines } from "./fields.ts";
+
+type SettingObject = { [key: string]: SettingValue };
+type Path = Array<number | string>;
+
+interface ListFrame {
+	kind: "list";
+	definition: ListDefinition;
+	path: Path;
+	selected: number;
+}
+
+interface ItemFrame {
+	kind: "item";
+	definition: ListDefinition;
+	path: Path;
+	selected: number;
+}
+
+type Frame = ListFrame | ItemFrame;
+type EditorAction = "add" | "delete" | "move-up" | "move-down" | "save" | "back" | "cancel";
+
+class InlineStringEditor extends ComponentStack {
+	private readonly input: SemanticInput;
+
+	constructor(
+		label: string,
+		description: string,
+		value: string,
+		theme: Theme,
+		done: (value?: string) => void,
+		showTitle = true,
+	) {
+		const colors = tuiTheme(theme);
+		const input = new SemanticInput(theme);
+		input.setValue(value);
+		input.onSubmit = done;
+		input.onEscape = () => done();
+		const buttons = new DialogButtonBar({
+			theme,
+			leading: () => colors.fg("text.muted", "Enter save · Esc cancel"),
+			buttons: [
+				{
+					value: "cancel",
+					label: "Cancel",
+					icon: "cancel",
+					foreground: "text.primary",
+					background: "action.neutral",
+				},
+				{
+					value: "save",
+					label: "Save",
+					icon: "confirm",
+					foreground: "positive",
+					background: "action.positive",
+				},
+			],
+			requestRender() {},
+			onActivate: (action) => (action === "save" ? done(input.getValue()) : done()),
+		});
+		const children: Component[] = [
+			new Text(colors.fg("text.muted", description), 0, 0),
+			new Spacer(1),
+			input,
+			new Spacer(1),
+			buttons,
+		];
+		if (showTitle) children.unshift(new Text(theme.bold(colors.fg("accent", label)), 0, 0));
+		super(children, { activeChild: showTitle ? 3 : 2 });
+		this.input = input;
+	}
+
+	handleInput(data: string): void {
+		this.input.handleInput(data);
+	}
+}
+
+export interface StructuredListEditorOptions {
+	label: string;
+	description: string;
+	value: SettingValue[];
+	schema: TSchema;
+	list: ListDefinition;
+	modelOptions: readonly SettingOption[];
+	theme: Theme;
+	onSave(value: SettingValue[]): void;
+	onCancel(): void;
+	dialogHost?: DialogHost;
+	showTitle?: boolean;
+}
+
+export class StructuredListEditor extends ComponentStack {
+	private draft: SettingValue[];
+	private readonly initial: string;
+	private readonly frames: Frame[];
+	private activeEditor: Component | undefined;
+	private closeActiveEditor: (() => void) | undefined;
+	private discardPending = false;
+	private deletePending = false;
+	private status = "";
+	private activeList:
+		| (Component & {
+				handleInput(data: string): boolean;
+				setSelectedIndex(index: number): void;
+		  })
+		| undefined;
+
+	constructor(private readonly editorOptions: StructuredListEditorOptions) {
+		super();
+		this.draft = cloneValue(editorOptions.value);
+		this.initial = JSON.stringify(editorOptions.value);
+		this.frames = [{ kind: "list", definition: editorOptions.list, path: [], selected: 0 }];
+		this.refreshLayout();
+	}
+
+	private colors() {
+		return tuiTheme(this.editorOptions.theme);
+	}
+
+	handleInput(data: string): void {
+		if (this.activeEditor) {
+			this.activeEditor.handleInput?.(data);
+			return;
+		}
+		const frame = this.frame();
+		const keys = getKeybindings();
+		if (matchesKey(data, "ctrl+s")) {
+			this.save();
+			return;
+		}
+		if (keys.matches(data, "tui.select.cancel") || data === "q") {
+			this.backOrCancel();
+			return;
+		}
+		this.discardPending = false;
+		this.status = "";
+		if (data === "j" || keys.matches(data, "tui.select.down")) this.activeList?.handleInput(data);
+		else if (data === "k" || keys.matches(data, "tui.select.up")) this.activeList?.handleInput(data);
+		else if (matchesKey(data, "home")) this.select(0);
+		else if (data === "G" || matchesKey(data, "end")) this.select(this.rowCount(frame) - 1);
+		else if (keys.matches(data, "tui.select.confirm")) this.activeList?.handleInput(data);
+		else if (frame.kind === "list") this.handleListInput(frame, data);
+		else this.handleItemInput(frame, data);
+	}
+
+	invalidate(): void {
+		super.invalidate();
+	}
+
+	private frame(): Frame {
+		return this.frames.at(-1)!;
+	}
+	private dirty(): boolean {
+		return JSON.stringify(this.draft) !== this.initial;
+	}
+	private rowCount(frame: Frame): number {
+		return frame.kind === "list" ? this.listAt(frame.path).length : frame.definition.fields.length;
+	}
+	private select(index: number): void {
+		const frame = this.frame();
+		const count = this.rowCount(frame);
+		frame.selected = Math.max(0, Math.min(Math.max(0, count - 1), index));
+		this.activeList?.setSelectedIndex(frame.selected);
+	}
+
+	private handleListInput(frame: ListFrame, data: string): void {
+		const shortcut = frame.definition.fields.findIndex((field) => field.shortcut === data);
+		if (shortcut >= 0) this.openSelectedField(frame, shortcut);
+		else if (matchesKey(data, "ctrl+j")) this.reorder(frame, 1);
+		else if (matchesKey(data, "ctrl+k")) this.reorder(frame, -1);
+		else if (data === "a") this.add(frame);
+		else if (data === "d") {
+			if (this.deletePending) this.remove(frame);
+			else {
+				this.deletePending = true;
+				this.status = "Press d again to delete.";
+			}
+		}
+	}
+
+	private handleItemInput(frame: ItemFrame, data: string): void {
+		const shortcut = frame.definition.fields.findIndex((field) => field.shortcut === data);
+		if (shortcut >= 0) frame.selected = shortcut;
+		else if (data !== " ") return;
+		this.activateItemField(frame);
+	}
+
+	private openSelectedField(frame: ListFrame, fieldIndex: number): void {
+		const list = this.listAt(frame.path);
+		if (!list[frame.selected]) return;
+		const itemFrame: ItemFrame = {
+			kind: "item",
+			definition: frame.definition,
+			path: [...frame.path, frame.selected],
+			selected: fieldIndex,
+		};
+		this.frames.push(itemFrame);
+		this.activateItemField(itemFrame);
+		if (!this.activeEditor) this.refreshLayout();
+	}
+
+	private activateItemField(frame: ItemFrame): void {
+		const field = frame.definition.fields[frame.selected];
+		if (!field) return;
+		const item = this.objectAt(frame.path);
+		if (field.type === "boolean") {
+			item[field.key] = item[field.key] !== true;
+			this.refreshLayout();
+			return;
+		}
+		if (field.type === "list") {
+			this.frames.push({
+				kind: "list",
+				definition: field.list,
+				path: [...frame.path, field.key],
+				selected: 0,
+			});
+			this.refreshLayout();
+			return;
+		}
+		const done = (value?: string): void => {
+			if (value !== undefined) item[field.key] = value;
+			this.closeEditor();
+		};
+		if (field.type === "string") {
+			const current = item[field.key];
+			this.openEditor(
+				new InlineStringEditor(
+					field.label,
+					field.description,
+					typeof current === "string" ? current : "",
+					this.editorOptions.theme,
+					done,
+					!this.editorOptions.dialogHost,
+				),
+				{ title: field.label, width: "60%", maxHeight: "70%" },
+			);
+			return;
+		}
+		const options = Array.isArray(field.options) ? field.options : this.editorOptions.modelOptions;
+		const current = item[field.key];
+		const editor = new SearchableSelect({
+			title: field.label,
+			showTitle: false,
+			description: field.description,
+			options: options.map((option) => ({
+				...option,
+				value: String(option.value),
+				label: option.color ? this.colors().fg(option.color, option.label) : option.label,
+			})),
+			selected: typeof current === "string" ? current : undefined,
+			theme: this.editorOptions.theme,
+			onSelect: done,
+			onCancel: () => done(),
+		});
+		this.openEditor(editor, {
+			title: field.label,
+			width: "65%",
+			maxHeight: "85%",
+		});
+	}
+
+	private openEditor(editor: Component, options: DialogOverlayOptions): void {
+		this.activeEditor = editor;
+		this.closeActiveEditor = this.editorOptions.dialogHost?.open(editor, options);
+		this.refreshLayout();
+	}
+
+	private closeEditor(): void {
+		const close = this.closeActiveEditor;
+		this.closeActiveEditor = undefined;
+		this.activeEditor = undefined;
+		close?.();
+		this.refreshLayout();
+	}
+
+	private reorder(frame: ListFrame, delta: number): void {
+		const list = this.listAt(frame.path);
+		const next = Math.max(0, Math.min(list.length - 1, frame.selected + delta));
+		if (next === frame.selected) return;
+		const [item] = list.splice(frame.selected, 1);
+		list.splice(next, 0, item!);
+		frame.selected = next;
+		this.refreshLayout();
+	}
+
+	private add(frame: ListFrame): void {
+		const list = this.listAt(frame.path);
+		const item = cloneValue(frame.definition.newItem);
+		const identity = item[frame.definition.identity];
+		if (frame.definition.uniqueIdentity && typeof identity === "string") {
+			const used = new Set(
+				list.flatMap((entry) => {
+					const value = asObject(entry)?.[frame.definition.identity];
+					return typeof value === "string" ? [value] : [];
+				}),
+			);
+			let candidate = identity;
+			let suffix = 2;
+			while (used.has(candidate)) candidate = `${identity}-${suffix++}`;
+			item[frame.definition.identity] = candidate;
+		}
+		list.push(item);
+		frame.selected = list.length - 1;
+		this.frames.push({
+			kind: "item",
+			definition: frame.definition,
+			path: [...frame.path, frame.selected],
+			selected: 0,
+		});
+		this.refreshLayout();
+	}
+
+	private remove(frame: ListFrame): void {
+		const list = this.listAt(frame.path);
+		this.deletePending = false;
+		if (list.length <= frame.definition.minItems) {
+			this.status = `Keep at least ${frame.definition.minItems} ${frame.definition.itemLabel}${frame.definition.minItems === 1 ? "" : "s"}.`;
+			return;
+		}
+		list.splice(frame.selected, 1);
+		frame.selected = Math.min(frame.selected, list.length - 1);
+		this.status = "";
+		this.refreshLayout();
+	}
+
+	private save(): void {
+		if (!validList(this.draft, this.editorOptions.list) || !checkSchema(this.editorOptions.schema, this.draft)) {
+			this.status = "Some list values are invalid. Fix them before saving.";
+			return;
+		}
+		this.editorOptions.onSave(cloneValue(this.draft));
+	}
+
+	private backOrCancel(): void {
+		if (this.frames.length > 1) {
+			this.frames.pop();
+			this.deletePending = false;
+			this.discardPending = false;
+			this.status = "";
+			this.refreshLayout();
+			return;
+		}
+		this.cancelDraft();
+	}
+
+	private cancelDraft(): void {
+		if (!this.dirty() || this.discardPending) this.editorOptions.onCancel();
+		else {
+			this.discardPending = true;
+			this.status = "Unsaved changes. Press Esc/q again to discard.";
+		}
+	}
+
+	private activateListItem(frame: ListFrame, index: number): void {
+		this.deletePending = false;
+		const list = this.listAt(frame.path);
+		if (!list[index]) return;
+		frame.selected = index;
+		this.frames.push({
+			kind: "item",
+			definition: frame.definition,
+			path: [...frame.path, index],
+			selected: 0,
+		});
+		this.refreshLayout();
+	}
+
+	private performAction(action: EditorAction): void {
+		if (action !== "cancel") {
+			this.discardPending = false;
+			this.deletePending = false;
+			this.status = "";
+		}
+		const frame = this.frame();
+		if (action === "save") this.save();
+		else if (action === "cancel") this.cancelDraft();
+		else if (action === "back") this.backOrCancel();
+		else if (frame.kind === "list" && action === "add") this.add(frame);
+		else if (frame.kind === "list" && action === "delete") this.remove(frame);
+		else if (frame.kind === "list" && action === "move-up") this.reorder(frame, -1);
+		else if (frame.kind === "list" && action === "move-down") this.reorder(frame, 1);
+	}
+
+	private refreshLayout(): void {
+		if (this.activeEditor && !this.editorOptions.dialogHost) {
+			this.activeList = undefined;
+			this.setChildren([this.activeEditor]);
+			this.setActiveChild(this.activeEditor);
+			return;
+		}
+
+		const frame = this.frame();
+		const header = new RenderLines(() =>
+			frame.kind === "list" ? this.renderListHeader(frame) : this.renderItemHeader(frame),
+		);
+		if (frame.kind === "list") {
+			const items = this.listAt(frame.path);
+			this.activeList = new SelectableList({
+				items,
+				selectedIndex: frame.selected,
+				maxVisible: 10,
+				wrap: false,
+				renderItem: (item, context) => this.renderListRow(frame.definition, item, context),
+				requestRender() {},
+				onSelectionChange: (_item, index) => {
+					frame.selected = index;
+				},
+				onActivate: (_item, index) => this.activateListItem(frame, index),
+			});
+		} else {
+			this.activeList = new SelectableList({
+				items: frame.definition.fields,
+				selectedIndex: frame.selected,
+				wrap: false,
+				renderItem: (field, context) => this.renderItemRow(frame, field, context),
+				requestRender() {},
+				onSelectionChange: (_field, index) => {
+					frame.selected = index;
+				},
+				onActivate: (_field, index) => {
+					frame.selected = index;
+					this.activateItemField(frame);
+				},
+			});
+		}
+
+		const details = new RenderLines((width) => {
+			if (frame.kind !== "item") return [];
+			const selected = frame.definition.fields[frame.selected];
+			return selected ? ["", this.colors().fg("text.muted", truncateToWidth(selected.description, width, ""))] : [];
+		});
+		const footer = new RenderLines(() => ["", this.renderStatus()]);
+		const buttons = new DialogButtonBar<EditorAction>({
+			theme: this.editorOptions.theme,
+			leading: () =>
+				this.colors().fg(
+					"text.muted",
+					`${frame.kind === "list" ? "↑↓ move · Enter fields" : "↑↓ move · Enter edit"}${this.shortcutHint(frame.definition)}`,
+				),
+			buttons:
+				frame.kind === "list"
+					? [
+							{
+								value: "add",
+								label: "Add",
+								foreground: "positive",
+								background: "action.positive",
+								align: "start",
+							},
+							{
+								value: "delete",
+								label: "Delete",
+								foreground: "negative",
+								background: "action.negative",
+								align: "start",
+							},
+							{
+								value: "move-up",
+								label: "Move Up",
+								foreground: "text.primary",
+								background: "action.neutral",
+								align: "start",
+							},
+							{
+								value: "move-down",
+								label: "Move Down",
+								foreground: "text.primary",
+								background: "action.neutral",
+								align: "start",
+							},
+							...(this.frames.length > 1
+								? [
+										{
+											value: "back" as const,
+											label: "Back",
+											foreground: "text.primary" as const,
+											background: "action.neutral" as const,
+											align: "end" as const,
+										},
+									]
+								: []),
+							{
+								value: "cancel",
+								label: "Cancel",
+								icon: "cancel",
+								foreground: "text.primary",
+								background: "action.neutral",
+								align: "end",
+							},
+							{
+								value: "save",
+								label: "Save",
+								icon: "confirm",
+								foreground: "positive",
+								background: "action.positive",
+								align: "end",
+							},
+						]
+					: [
+							{
+								value: "back",
+								label: "Back",
+								foreground: "text.primary",
+								background: "action.neutral",
+								align: "start",
+							},
+							{
+								value: "cancel",
+								label: "Cancel",
+								icon: "cancel",
+								foreground: "text.primary",
+								background: "action.neutral",
+								align: "end",
+							},
+							{
+								value: "save",
+								label: "Save",
+								icon: "confirm",
+								foreground: "positive",
+								background: "action.positive",
+								align: "end",
+							},
+						],
+			requestRender() {},
+			onActivate: (action) => this.performAction(action),
+		});
+		this.setChildren([header, this.activeList, details, footer, buttons]);
+		this.setActiveChild(this.activeList);
+	}
+
+	private renderListHeader(frame: ListFrame): string[] {
+		const list = this.listAt(frame.path);
+		const title = this.frames.length === 1 ? this.editorOptions.label : `${frame.definition.itemLabel}s`;
+		const description =
+			this.frames.length === 1
+				? this.editorOptions.description
+				: `Ordered ${frame.definition.itemLabel.toLowerCase()} list.`;
+		return [
+			...(this.frames.length === 1 && this.editorOptions.showTitle === false
+				? []
+				: [this.editorOptions.theme.bold(this.colors().fg("accent", title))]),
+			this.colors().fg("text.muted", description),
+			"",
+			...(list.length === 0
+				? [this.colors().fg("text.muted", `No ${frame.definition.itemLabel.toLowerCase()}s.`)]
+				: []),
+		];
+	}
+
+	private renderItemHeader(frame: ItemFrame): string[] {
+		const item = this.objectAt(frame.path);
+		const identity = item[frame.definition.identity];
+		return [
+			this.editorOptions.theme.bold(
+				this.colors().fg("accent", `${frame.definition.itemLabel}: ${String(identity ?? "")}`),
+			),
+			this.colors().fg("text.muted", "Edit fields, then press Esc to return to the list."),
+			"",
+		];
+	}
+
+	private renderListRow(definition: ListDefinition, value: SettingValue, context: SelectableListRenderContext): string {
+		const { index, selected, hovered, width } = context;
+		const item = asObject(value) ?? {};
+		const rawIdentity = String(item[definition.identity] ?? `${definition.itemLabel} ${index + 1}`);
+		const identityColorValue = definition.identityColor ? valueAt(item, definition.identityColor.path) : undefined;
+		const identityColor =
+			typeof identityColorValue === "string" ? definition.identityColor?.colors[identityColorValue] : undefined;
+		const identity = identityColor
+			? this.colors().fg(identityColor, this.editorOptions.theme.bold(rawIdentity))
+			: this.editorOptions.theme.bold(rawIdentity);
+		const details = definition.summary
+			.flatMap((column) => {
+				const raw = valueAt(item, column.path);
+				const text = scalarSummary(raw);
+				if (!text) return [];
+				const color = column.color ?? (typeof raw === "string" ? column.colors?.[raw] : undefined);
+				return [color ? this.colors().fg(color, text) : text];
+			})
+			.join("  ");
+		const row = truncateToWidth(` ${index + 1}. ${identity}${details ? `  ${details}` : ""}`, width, "");
+		const padded = row + " ".repeat(Math.max(0, width - visibleWidth(row)));
+		return selected || hovered ? this.colors().bg("surface.selected", padded) : padded;
+	}
+
+	private renderItemRow(frame: ItemFrame, field: ListItemField, context: SelectableListRenderContext): string {
+		const item = this.objectAt(frame.path);
+		const labelWidth = Math.min(
+			28,
+			Math.max(...frame.definition.fields.map((candidate) => visibleWidth(candidate.label))) + 2,
+		);
+		const label = `${context.selected ? this.colors().fg("accent", "› ") : "  "}${field.label}`;
+		const padded = label + " ".repeat(Math.max(1, labelWidth - visibleWidth(label)));
+		const value = this.formatField(field, item[field.key]);
+		const row = truncateToWidth(
+			`${padded}${context.selected ? this.colors().fg("accent", value) : this.colors().fg("text.muted", value)}`,
+			context.width,
+			"",
+		);
+		const filled = row + " ".repeat(Math.max(0, context.width - visibleWidth(row)));
+		return context.selected || context.hovered ? this.colors().bg("surface.selected", filled) : filled;
+	}
+
+	private renderStatus(): string {
+		return this.colors().fg(this.discardPending || this.deletePending ? "warning" : "text.muted", this.status);
+	}
+
+	private formatField(field: ListItemField, value: SettingValue | undefined): string {
+		if (field.type === "boolean")
+			return `${icon(value === true ? "toggle-on" : "toggle-off")} ${value === true ? "on" : "off"}`;
+		if (field.type === "list")
+			return `${Array.isArray(value) ? value.length : 0} ${field.list.itemLabel.toLowerCase()}${Array.isArray(value) && value.length === 1 ? "" : "s"}`;
+		if (field.type === "enum") {
+			const options = Array.isArray(field.options) ? field.options : this.editorOptions.modelOptions;
+			const option = options.find((candidate) => candidate.value === value);
+			const label = option?.label ?? String(value ?? "unset");
+			return option?.color ? this.colors().fg(option.color, label) : label;
+		}
+		return String(value ?? "unset");
+	}
+
+	private shortcutHint(definition: ListDefinition): string {
+		const shortcuts = definition.fields.flatMap((field) =>
+			field.shortcut ? [`${field.shortcut} ${field.label.toLowerCase()}`] : [],
+		);
+		return shortcuts.length > 0 ? ` · ${shortcuts.join(" · ")}` : "";
+	}
+
+	private listAt(path: Path): SettingValue[] {
+		const value = this.valueAt(path);
+		if (!Array.isArray(value)) throw new Error(`Expected a list at ${path.join(".") || "root"}.`);
+		return value;
+	}
+
+	private objectAt(path: Path): SettingObject {
+		const value = this.valueAt(path);
+		const object = asObject(value);
+		if (!object) throw new Error(`Expected an item at ${path.join(".")}.`);
+		return object;
+	}
+
+	private valueAt(path: Path): SettingValue {
+		let value: SettingValue = this.draft;
+		for (const segment of path) {
+			if (typeof segment === "number") {
+				if (!Array.isArray(value)) throw new Error(`Expected a list before ${segment}.`);
+				value = value[segment]!;
+			} else {
+				const object = asObject(value);
+				if (!object) throw new Error(`Expected an item before ${segment}.`);
+				value = object[segment]!;
+			}
+		}
+		return value;
+	}
+}
+
+function asObject(value: SettingValue | undefined): SettingObject | undefined {
+	return value && typeof value === "object" && !Array.isArray(value) ? value : undefined;
+}
+
+function scalarSummary(value: SettingValue | undefined): string | undefined {
+	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return String(value);
+	if (Array.isArray(value)) return `${value.length}`;
+	return undefined;
+}
+
+function valueAt(value: SettingValue, path: readonly (number | string)[]): SettingValue | undefined {
+	let current: SettingValue | undefined = value;
+	for (const segment of path) {
+		if (typeof segment === "number") {
+			if (!Array.isArray(current)) return undefined;
+			current = current[segment];
+		} else {
+			const object = asObject(current);
+			if (!object) return undefined;
+			current = object[segment];
+		}
+	}
+	return current;
+}
+
+function validList(values: SettingValue[], definition: ListDefinition): boolean {
+	if (values.length < definition.minItems) return false;
+	const identities = values.map((value) => asObject(value)?.[definition.identity]);
+	if (identities.some((value) => typeof value !== "string" || value.length === 0)) return false;
+	if (definition.uniqueIdentity && new Set(identities).size !== identities.length) return false;
+	return values.every((value) => {
+		const item = asObject(value);
+		if (!item) return false;
+		return definition.fields.every((field) => {
+			if (field.type !== "list") return true;
+			const nested = item[field.key];
+			return Array.isArray(nested) && validList(nested, field.list);
+		});
+	});
+}
+
+function cloneValue<Value extends SettingValue>(value: Value): Value {
+	if (Array.isArray(value)) return value.map((entry) => cloneValue(entry)) as Value;
+	if (typeof value === "object")
+		return Object.fromEntries(Object.entries(value).map(([key, entry]) => [key, cloneValue(entry)])) as Value;
+	return value;
+}