@juanibiapina/pi-extension-settings 0.6.1 → 0.8.0

package/package.json

@@ -1,20 +1,14 @@
 {
   "name": "@juanibiapina/pi-extension-settings",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "description": "Pi extension for centralized settings management across extensions",
   "type": "module",
-  "main": "dist/index.js",
-  "types": "./dist/index.d.ts",
   "scripts": {
-    "clean": "rm -rf dist",
-    "build": "tsc -p tsconfig.build.json",
-    "dev": "tsc -p tsconfig.build.json --watch",
     "check": "biome check --write --error-on-warnings . && tsc --noEmit",
-    "test": "node --test --import tsx test/*.test.ts",
-    "prepublishOnly": "npm run clean && npm run build && npm run check"
+    "test": "node --test --import tsx test/*.test.ts"
   },
   "files": [
-    "dist/**/*",
+    "src/**/*",
     "README.md"
   ],
   "keywords": [
@@ -26,7 +20,7 @@
   ],
   "pi": {
     "extensions": [
-      "./dist/index.js"
+      "./src/index.ts"
     ]
   },
   "author": "Juan Ibiapina",
@@ -38,15 +32,11 @@
   "engines": {
     "node": ">=20.0.0"
   },
-  "peerDependencies": {
-    "@mariozechner/pi-coding-agent": "*",
-    "@mariozechner/pi-tui": "*"
-  },
   "devDependencies": {
-    "@biomejs/biome": "2.4.9",
-    "@mariozechner/pi-coding-agent": "^0.64.0",
-    "@types/node": "^25.5.0",
-    "tsx": "^4.20.3",
-    "typescript": "^6.0.2"
+    "@biomejs/biome": "2.4.15",
+    "@earendil-works/pi-coding-agent": "^0.75.3",
+    "@types/node": "^25.9.1",
+    "tsx": "^4.22.3",
+    "typescript": "^6.0.3"
   }
 }

package/src/components/ordered-multi-select.ts

@@ -0,0 +1,166 @@
+/**
+ * Ordered multi-select component.
+ *
+ * Displays a list of options that can be toggled on/off and reordered.
+ * Selected items appear at the top with their position number.
+ * Value is stored as a comma-separated string of selected IDs in order.
+ */
+
+import { type Component, getKeybindings, matchesKey, truncateToWidth } from "@earendil-works/pi-tui";
+import type { OrderedListOption } from "../settings/types.js";
+import type { SettingsListTheme } from "./settings-list.js";
+
+interface DisplayItem {
+	option: OrderedListOption;
+	selected: boolean;
+	/** 1-based position within selected items, or 0 if not selected */
+	position: number;
+}
+
+export class OrderedMultiSelect implements Component {
+	private options: OrderedListOption[];
+	private selected: string[];
+	private cursorIndex = 0;
+	private theme: SettingsListTheme;
+	private done: (selectedValue?: string) => void;
+
+	constructor(
+		options: OrderedListOption[],
+		currentValue: string,
+		theme: SettingsListTheme,
+		done: (selectedValue?: string) => void,
+	) {
+		this.options = options;
+		this.selected = currentValue
+			.split(",")
+			.map((s) => s.trim())
+			.filter(Boolean);
+		this.theme = theme;
+		this.done = done;
+	}
+
+	invalidate(): void {}
+
+	render(width: number): string[] {
+		const lines: string[] = [];
+		const items = this.buildDisplayItems();
+
+		for (let i = 0; i < items.length; i++) {
+			const item = items[i];
+			const isCursor = i === this.cursorIndex;
+			const prefix = isCursor ? this.theme.cursor : "  ";
+
+			let marker: string;
+			if (item.selected) {
+				marker = this.theme.value(`✓ ${String(item.position).padStart(2)}`, isCursor);
+			} else {
+				marker = this.theme.label("     ", isCursor);
+			}
+
+			const label = this.theme.label(item.option.label, isCursor);
+			const line = `${prefix}${marker}  ${label}`;
+			lines.push(truncateToWidth(line, width, "…"));
+		}
+
+		// Scroll indicator
+		if (items.length > 0) {
+			const scrollText = `  (${this.cursorIndex + 1}/${items.length})`;
+			lines.push(this.theme.hint(scrollText));
+		}
+
+		// Hint line
+		lines.push("");
+		lines.push(this.theme.hint("  Space toggle · Shift+↑/↓ reorder · Enter confirm · Esc cancel"));
+
+		return lines;
+	}
+
+	handleInput(data: string): void {
+		const kb = getKeybindings();
+		const items = this.buildDisplayItems();
+		if (items.length === 0) {
+			if (kb.matches(data, "tui.select.cancel")) {
+				this.done(undefined);
+			}
+			return;
+		}
+
+		if (kb.matches(data, "tui.select.up") || matchesKey(data, "up")) {
+			this.cursorIndex = this.cursorIndex === 0 ? items.length - 1 : this.cursorIndex - 1;
+		} else if (kb.matches(data, "tui.select.down") || matchesKey(data, "down")) {
+			this.cursorIndex = this.cursorIndex === items.length - 1 ? 0 : this.cursorIndex + 1;
+		} else if (data === " " || matchesKey(data, "space")) {
+			this.toggleCurrent(items);
+		} else if (matchesKey(data, "shift+up")) {
+			this.moveUp(items);
+		} else if (matchesKey(data, "shift+down")) {
+			this.moveDown(items);
+		} else if (kb.matches(data, "tui.select.confirm")) {
+			this.done(this.selected.join(","));
+		} else if (kb.matches(data, "tui.select.cancel")) {
+			this.done(undefined);
+		}
+	}
+
+	private buildDisplayItems(): DisplayItem[] {
+		const items: DisplayItem[] = [];
+
+		// Selected items first, in order
+		for (let i = 0; i < this.selected.length; i++) {
+			const id = this.selected[i];
+			const option = this.options.find((o) => o.id === id);
+			if (option) {
+				items.push({ option, selected: true, position: i + 1 });
+			}
+		}
+
+		// Unselected items, in original options order
+		for (const option of this.options) {
+			if (!this.selected.includes(option.id)) {
+				items.push({ option, selected: false, position: 0 });
+			}
+		}
+
+		return items;
+	}
+
+	private toggleCurrent(items: DisplayItem[]): void {
+		const item = items[this.cursorIndex];
+		if (!item) return;
+
+		const id = item.option.id;
+		if (item.selected) {
+			// Remove from selected
+			this.selected = this.selected.filter((s) => s !== id);
+		} else {
+			// Add to end of selected
+			this.selected.push(id);
+		}
+	}
+
+	private moveUp(items: DisplayItem[]): void {
+		const item = items[this.cursorIndex];
+		if (!item?.selected) return;
+
+		const idx = this.selected.indexOf(item.option.id);
+		if (idx <= 0) return;
+
+		// Swap with previous in selected array
+		[this.selected[idx - 1], this.selected[idx]] = [this.selected[idx], this.selected[idx - 1]];
+		// Move cursor up to follow the item
+		this.cursorIndex--;
+	}
+
+	private moveDown(items: DisplayItem[]): void {
+		const item = items[this.cursorIndex];
+		if (!item?.selected) return;
+
+		const idx = this.selected.indexOf(item.option.id);
+		if (idx < 0 || idx >= this.selected.length - 1) return;
+
+		// Swap with next in selected array
+		[this.selected[idx], this.selected[idx + 1]] = [this.selected[idx + 1], this.selected[idx]];
+		// Move cursor down to follow the item
+		this.cursorIndex++;
+	}
+}

package/src/components/settings-list.ts

@@ -0,0 +1,328 @@
+/**
+ * Settings list component with support for cycling values and string input.
+ * Based on @earendil-works/pi-tui SettingsList, extended with string editing.
+ */
+
+import {
+	type Component,
+	fuzzyFilter,
+	getKeybindings,
+	Input,
+	matchesKey,
+	truncateToWidth,
+	visibleWidth,
+	wrapTextWithAnsi,
+} from "@earendil-works/pi-tui";
+
+export interface SettingItem {
+	/** Unique identifier for this setting */
+	id: string;
+	/** Display label (left side) */
+	label: string;
+	/** Optional description shown when selected */
+	description?: string;
+	/** Current value to display (right side) */
+	currentValue: string;
+	/**
+	 * If provided, Enter/Space cycles through these values.
+	 * If undefined/empty, the setting is treated as a string input.
+	 */
+	values?: string[];
+	/** If provided, Enter opens this submenu. Receives current value and done callback. */
+	submenu?: (currentValue: string, done: (selectedValue?: string) => void) => Component;
+	/** If false, item is selectable but cannot be edited or changed. */
+	editable?: boolean;
+}
+
+export interface SettingsListTheme {
+	label: (text: string, selected: boolean) => string;
+	value: (text: string, selected: boolean) => string;
+	description: (text: string) => string;
+	cursor: string;
+	hint: (text: string) => string;
+}
+
+export interface SettingsListOptions {
+	enableSearch?: boolean;
+}
+
+export class SettingsList implements Component {
+	private items: SettingItem[];
+	private filteredItems: SettingItem[];
+	private theme: SettingsListTheme;
+	private selectedIndex = 0;
+	private maxVisible: number;
+	private onChange: (id: string, newValue: string) => void;
+	private onCancel: () => void;
+	private searchInput?: Input;
+	private searchEnabled: boolean;
+
+	// Submenu state
+	private submenuComponent: Component | null = null;
+	private submenuItemIndex: number | null = null;
+
+	// String editing state
+	private editingInput: Input | null = null;
+	private editingItemIndex: number | null = null;
+
+	constructor(
+		items: SettingItem[],
+		maxVisible: number,
+		theme: SettingsListTheme,
+		onChange: (id: string, newValue: string) => void,
+		onCancel: () => void,
+		options: SettingsListOptions = {},
+	) {
+		this.items = items;
+		this.filteredItems = items;
+		this.maxVisible = maxVisible;
+		this.theme = theme;
+		this.onChange = onChange;
+		this.onCancel = onCancel;
+		this.searchEnabled = options.enableSearch ?? false;
+		if (this.searchEnabled) {
+			this.searchInput = new Input();
+		}
+	}
+
+	/** Update an item's currentValue */
+	updateValue(id: string, newValue: string): void {
+		const item = this.items.find((i) => i.id === id);
+		if (item) {
+			item.currentValue = newValue;
+		}
+	}
+
+	invalidate(): void {
+		this.submenuComponent?.invalidate?.();
+	}
+
+	render(width: number): string[] {
+		// If submenu is active, render it instead
+		if (this.submenuComponent) {
+			return this.submenuComponent.render(width);
+		}
+
+		return this.renderMainList(width);
+	}
+
+	private renderMainList(width: number): string[] {
+		const lines: string[] = [];
+
+		if (this.searchEnabled && this.searchInput && !this.editingInput) {
+			lines.push(...this.searchInput.render(width));
+			lines.push("");
+		}
+
+		if (this.items.length === 0) {
+			lines.push(this.theme.hint("  No settings available"));
+			if (this.searchEnabled) {
+				this.addHintLine(lines);
+			}
+			return lines;
+		}
+
+		const displayItems = this.searchEnabled ? this.filteredItems : this.items;
+		if (displayItems.length === 0) {
+			lines.push(this.theme.hint("  No matching settings"));
+			this.addHintLine(lines);
+			return lines;
+		}
+
+		// Calculate visible range with scrolling
+		const startIndex = Math.max(
+			0,
+			Math.min(this.selectedIndex - Math.floor(this.maxVisible / 2), displayItems.length - this.maxVisible),
+		);
+		const endIndex = Math.min(startIndex + this.maxVisible, displayItems.length);
+
+		// Calculate max label width for alignment
+		const maxLabelWidth = Math.min(30, Math.max(...this.items.map((item) => visibleWidth(item.label))));
+
+		// Render visible items
+		for (let i = startIndex; i < endIndex; i++) {
+			const item = displayItems[i];
+			if (!item) continue;
+
+			const isSelected = i === this.selectedIndex;
+			const isEditing = this.editingInput && this.editingItemIndex === i;
+			const prefix = isSelected ? this.theme.cursor : "  ";
+			const prefixWidth = visibleWidth(prefix);
+
+			// Pad label to align values
+			const labelPadded = item.label + " ".repeat(Math.max(0, maxLabelWidth - visibleWidth(item.label)));
+			const labelText = this.theme.label(labelPadded, isSelected);
+
+			// Calculate space for value
+			const separator = "  ";
+			const usedWidth = prefixWidth + maxLabelWidth + visibleWidth(separator);
+			const valueMaxWidth = width - usedWidth - 2;
+
+			if (isEditing && this.editingInput) {
+				// Render inline input for string editing
+				const inputLines = this.editingInput.render(valueMaxWidth);
+				const inputLine = inputLines[0] ?? "";
+				lines.push(prefix + labelText + separator + inputLine);
+			} else {
+				const valueText = this.theme.value(truncateToWidth(item.currentValue, valueMaxWidth, ""), isSelected);
+				lines.push(prefix + labelText + separator + valueText);
+			}
+		}
+
+		// Add scroll indicator if needed
+		if (startIndex > 0 || endIndex < displayItems.length) {
+			const scrollText = `  (${this.selectedIndex + 1}/${displayItems.length})`;
+			lines.push(this.theme.hint(truncateToWidth(scrollText, width - 2, "")));
+		}
+
+		// Add description for selected item
+		const selectedItem = displayItems[this.selectedIndex];
+		if (selectedItem?.description && !this.editingInput) {
+			lines.push("");
+			const wrappedDesc = wrapTextWithAnsi(selectedItem.description, width - 4);
+			for (const line of wrappedDesc) {
+				lines.push(this.theme.description(`  ${line}`));
+			}
+		}
+
+		// Add hint
+		this.addHintLine(lines);
+
+		return lines;
+	}
+
+	handleInput(data: string): void {
+		// If editing a string value, handle input for the editor
+		if (this.editingInput) {
+			this.handleEditingInput(data);
+			return;
+		}
+
+		// If submenu is active, delegate all input to it
+		if (this.submenuComponent) {
+			this.submenuComponent.handleInput?.(data);
+			return;
+		}
+
+		// Main list input handling
+		const kb = getKeybindings();
+		const displayItems = this.searchEnabled ? this.filteredItems : this.items;
+
+		if (kb.matches(data, "tui.select.up")) {
+			if (displayItems.length === 0) return;
+			this.selectedIndex = this.selectedIndex === 0 ? displayItems.length - 1 : this.selectedIndex - 1;
+		} else if (kb.matches(data, "tui.select.down")) {
+			if (displayItems.length === 0) return;
+			this.selectedIndex = this.selectedIndex === displayItems.length - 1 ? 0 : this.selectedIndex + 1;
+		} else if (kb.matches(data, "tui.select.confirm") || data === " ") {
+			this.activateItem();
+		} else if (kb.matches(data, "tui.select.cancel")) {
+			this.onCancel();
+		} else if (this.searchEnabled && this.searchInput) {
+			const sanitized = data.replace(/ /g, "");
+			if (!sanitized) {
+				return;
+			}
+			this.searchInput.handleInput(sanitized);
+			this.applyFilter(this.searchInput.getValue());
+		}
+	}
+
+	private handleEditingInput(data: string): void {
+		if (!this.editingInput) return;
+
+		// Enter: confirm edit
+		if (matchesKey(data, "enter")) {
+			this.confirmEdit();
+			return;
+		}
+
+		// Escape: cancel edit
+		if (matchesKey(data, "escape")) {
+			this.cancelEdit();
+			return;
+		}
+
+		// Pass other input to the editor
+		this.editingInput.handleInput(data);
+	}
+
+	private confirmEdit(): void {
+		if (!this.editingInput || this.editingItemIndex === null) return;
+
+		const displayItems = this.searchEnabled ? this.filteredItems : this.items;
+		const item = displayItems[this.editingItemIndex];
+		if (item) {
+			const newValue = this.editingInput.getValue();
+			item.currentValue = newValue;
+			this.onChange(item.id, newValue);
+		}
+
+		this.editingInput = null;
+		this.editingItemIndex = null;
+	}
+
+	private cancelEdit(): void {
+		this.editingInput = null;
+		this.editingItemIndex = null;
+	}
+
+	private activateItem(): void {
+		const displayItems = this.searchEnabled ? this.filteredItems : this.items;
+		const item = displayItems[this.selectedIndex];
+		if (!item) return;
+
+		if (item.editable === false) {
+			return;
+		}
+
+		if (item.submenu) {
+			// Open submenu, passing current value so it can pre-select correctly
+			this.submenuItemIndex = this.selectedIndex;
+			this.submenuComponent = item.submenu(item.currentValue, (selectedValue?: string) => {
+				if (selectedValue !== undefined) {
+					item.currentValue = selectedValue;
+					this.onChange(item.id, selectedValue);
+				}
+				this.closeSubmenu();
+			});
+		} else if (item.values && item.values.length > 0) {
+			// Cycle through values
+			const currentIndex = item.values.indexOf(item.currentValue);
+			const nextIndex = (currentIndex + 1) % item.values.length;
+			const newValue = item.values[nextIndex];
+			item.currentValue = newValue;
+			this.onChange(item.id, newValue);
+		} else {
+			// String input - start editing
+			this.editingItemIndex = this.selectedIndex;
+			this.editingInput = new Input();
+			this.editingInput.setValue(item.currentValue);
+		}
+	}
+
+	private closeSubmenu(): void {
+		this.submenuComponent = null;
+		// Restore selection to the item that opened the submenu
+		if (this.submenuItemIndex !== null) {
+			this.selectedIndex = this.submenuItemIndex;
+			this.submenuItemIndex = null;
+		}
+	}
+
+	private applyFilter(query: string): void {
+		this.filteredItems = fuzzyFilter(this.items, query, (item) => item.label);
+		this.selectedIndex = 0;
+	}
+
+	private addHintLine(lines: string[]): void {
+		lines.push("");
+		if (this.editingInput) {
+			lines.push(this.theme.hint("  Enter to confirm · Esc to cancel"));
+		} else if (this.searchEnabled) {
+			lines.push(this.theme.hint("  Type to search · Enter/Space to change · Esc to cancel"));
+		} else {
+			lines.push(this.theme.hint("  Enter/Space to change · Esc to cancel"));
+		}
+	}
+}

package/src/extension.ts

@@ -0,0 +1,125 @@
+/**
+ * Pi extension that provides /extension-settings command.
+ */
+
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { getSettingsListTheme } from "@earendil-works/pi-coding-agent";
+import { Container, Text } from "@earendil-works/pi-tui";
+import { OrderedMultiSelect } from "./components/ordered-multi-select.js";
+import { type SettingItem, SettingsList } from "./components/settings-list.js";
+import { getSetting, setSetting } from "./settings/storage.js";
+import type { SettingDefinition } from "./settings/types.js";
+
+interface RegistrationPayload {
+	name: string;
+	settings: SettingDefinition[];
+}
+
+export default function piLibExtension(pi: ExtensionAPI) {
+	// Local registry - stores settings registered via events
+	const registry = new Map<string, SettingDefinition[]>();
+
+	// Listen for registration events from other extensions
+	pi.events.on("pi-extension-settings:register", (data) => {
+		const { name, settings } = data as RegistrationPayload;
+		registry.set(name, settings);
+	});
+
+	pi.registerCommand("extension-settings", {
+		description: "Configure settings for all extensions",
+		handler: async (_args, ctx) => {
+			if (registry.size === 0) {
+				ctx.ui.notify(
+					"No extensions have registered settings. Ensure pi-extension-settings is listed before consumer extensions in your packages array in ~/.pi/settings.json.",
+					"info",
+				);
+				return;
+			}
+
+			// Sort extensions by name
+			const sortedExtensions = Array.from(registry.entries()).sort(([a], [b]) => a.localeCompare(b));
+
+			await ctx.ui.custom((tui, theme, _kb, done) => {
+				const container = new Container();
+
+				// Title
+				container.addChild(new Text(theme.fg("accent", theme.bold("Extension Settings")), 1, 1));
+
+				// Build items grouped by extension
+				const items: SettingItem[] = [];
+
+				for (const [extName, settings] of sortedExtensions) {
+					// Add extension header as a non-interactive item
+					items.push({
+						id: `__header__${extName}`,
+						label: theme.bold(extName),
+						currentValue: "",
+						values: undefined, // No cycling - acts as header
+						editable: false,
+					});
+
+					// Add each setting
+					for (const setting of settings) {
+						const currentValue = getSetting(extName, setting.id, setting.defaultValue) ?? setting.defaultValue;
+
+						if (setting.options && setting.options.length > 0) {
+							// Ordered multi-select: opens a submenu
+							items.push({
+								id: `${extName}::${setting.id}`,
+								label: `  ${setting.label}`,
+								description: setting.description,
+								currentValue,
+								submenu: (val, submenuDone) => {
+									return new OrderedMultiSelect(setting.options!, val, getSettingsListTheme(), submenuDone);
+								},
+							});
+						} else {
+							items.push({
+								id: `${extName}::${setting.id}`,
+								label: `  ${setting.label}`,
+								description: setting.description,
+								currentValue,
+								values: setting.values,
+							});
+						}
+					}
+				}
+
+				const settingsList = new SettingsList(
+					items,
+					Math.min(items.length + 2, 20),
+					getSettingsListTheme(),
+					(id, newValue) => {
+						// Skip headers
+						if (id.startsWith("__header__")) return;
+
+						// Parse extension::settingId
+						const [extensionName, settingId] = id.split("::");
+						if (extensionName && settingId) {
+							setSetting(extensionName, settingId, newValue);
+						}
+					},
+					() => {
+						done(undefined);
+					},
+					{ enableSearch: true },
+				);
+
+				container.addChild(settingsList);
+
+				return {
+					render(width: number) {
+						return container.render(width);
+					},
+					invalidate() {
+						container.invalidate();
+					},
+					handleInput(data: string) {
+						settingsList.handleInput?.(data);
+						tui.requestRender();
+					},
+				};
+			});
+		},
+	});
+}

package/{dist/index.d.ts → src/index.ts}

@@ -33,7 +33,11 @@
  * setSetting("my-extension", "timeout", "60");
  * ```
  */
+
+// Extension entry point
 export { default } from "./extension.js";
+
+// Stateless helpers for reading/writing settings
 export { getSetting, setSetting } from "./settings/storage.js";
+// Types for documentation/type-safety when emitting events
 export type { OrderedListOption, SettingDefinition } from "./settings/types.js";
-//# sourceMappingURL=index.d.ts.map