@xynogen/pix-toolbox 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xynogen/pix-toolbox",
-	"version": "0.1.7",
+	"version": "0.1.9",
 	"description": "Pi tool — gated tool toggle UI (/toolbox)",
 	"type": "module",
 	"main": "src/index.ts",

package/src/toolbox.test.ts

@@ -53,12 +53,7 @@ describe("buildRows", () => {
 
 describe("parseTargets", () => {
 	test("splits on commas, spaces, newlines", () => {
-		expect(parseTargets("ls, find  grep\nfetch")).toEqual([
-			"ls",
-			"find",
-			"grep",
-			"fetch",
-		]);
+		expect(parseTargets("ls, find  grep\nfetch")).toEqual(["ls", "find", "grep", "fetch"]);
 	});
 
 	test("dedupes", () => {
@@ -202,9 +197,7 @@ function makeHost(toolNames: string[]) {
 		},
 		emit(ev: string, payload: unknown, ctx?: unknown) {
 			return Promise.all(
-				(handlers[ev] ?? []).map((f) =>
-					(f as (...args: unknown[]) => unknown)(payload, ctx),
-				),
+				(handlers[ev] ?? []).map((f) => (f as (...args: unknown[]) => unknown)(payload, ctx)),
 			);
 		},
 		getAllTools() {
@@ -226,18 +219,13 @@ function makeHost(toolNames: string[]) {
 		},
 		appendEntry() {},
 		registerTool() {},
-		registerCommand(
-			name: string,
-			def: { handler: (...args: unknown[]) => unknown },
-		) {
+		registerCommand(name: string, def: { handler: (...args: unknown[]) => unknown }) {
 			commands.push({ name, handler: def.handler });
 		},
 	} as never;
 	const emit = (ev: string, payload: unknown, ctx?: unknown) =>
 		Promise.all(
-			(handlers[ev] ?? []).map((f) =>
-				(f as (...args: unknown[]) => unknown)(payload, ctx),
-			),
+			(handlers[ev] ?? []).map((f) => (f as (...args: unknown[]) => unknown)(payload, ctx)),
 		);
 	return {
 		pi,

package/src/toolbox.ts

@@ -34,17 +34,18 @@ import {
 	type TUI,
 	visibleWidth,
 } from "@earendil-works/pi-tui";
-import { frameLines, modalWidth } from "@xynogen/pix-pretty/modal-frame";
+import {
+	frameModal,
+	MIN_MODAL_HEIGHT,
+	ModalPager,
+	modalWidth,
+	terminalModalHeight,
+} from "@xynogen/pix-pretty/modal-frame";
 
 // ─── Constants ──────────────────────────────────────────────────────────────
 
 /** Tools that can never be disabled — always prompt-visible. */
-export const CORE_TOOLS: ReadonlySet<string> = new Set([
-	"bash",
-	"edit",
-	"read",
-	"write",
-]);
+export const CORE_TOOLS: ReadonlySet<string> = new Set(["bash", "edit", "read", "write"]);
 
 // ─── Types ──────────────────────────────────────────────────────────────────
 
@@ -134,14 +135,10 @@ export function toggleTool(
 
 	if (action === "enable") {
 		const did = ops.onActivate(name);
-		return did
-			? `Enabled ${name} — now prompt-visible.`
-			: `${name} is already active.`;
+		return did ? `Enabled ${name} — now prompt-visible.` : `${name} is already active.`;
 	}
 	const did = ops.onDeactivate(name);
-	return did
-		? `Disabled ${name} — hidden from prompt.`
-		: `${name} is already gated.`;
+	return did ? `Disabled ${name} — hidden from prompt.` : `${name} is already gated.`;
 }
 
 // ─── Persistence ───────────────────────────────────────────────────────────
@@ -173,11 +170,7 @@ function createState(pi: ExtensionAPI) {
 		try {
 			const sp = getStatePath();
 			mkdirSync(dirname(sp), { recursive: true });
-			writeFileSync(
-				sp,
-				JSON.stringify({ enabledTools: [...enabledTools] }, null, 2),
-				"utf-8",
-			);
+			writeFileSync(sp, JSON.stringify({ enabledTools: [...enabledTools] }, null, 2), "utf-8");
 		} catch (err) {
 			console.warn("toolbox: file persist failed:", err);
 		}
@@ -203,9 +196,7 @@ function createState(pi: ExtensionAPI) {
 		const fileSaved = loadFromFile();
 		if (fileSaved) {
 			const validNames = new Set((pi.getAllTools() ?? []).map((t) => t.name));
-			enabledTools = new Set(
-				fileSaved.filter((n) => validNames.has(n) || CORE_TOOLS.has(n)),
-			);
+			enabledTools = new Set(fileSaved.filter((n) => validNames.has(n) || CORE_TOOLS.has(n)));
 			for (const ct of CORE_TOOLS) enabledTools.add(ct);
 			initialized = true;
 			apply();
@@ -233,9 +224,7 @@ function createState(pi: ExtensionAPI) {
 
 		if (saved) {
 			const validNames = new Set((pi.getAllTools() ?? []).map((t) => t.name));
-			enabledTools = new Set(
-				saved.filter((n) => validNames.has(n) || CORE_TOOLS.has(n)),
-			);
+			enabledTools = new Set(saved.filter((n) => validNames.has(n) || CORE_TOOLS.has(n)));
 			for (const ct of CORE_TOOLS) enabledTools.add(ct);
 		} else {
 			const names = (pi.getAllTools() ?? []).map((t) => t.name);
@@ -351,34 +340,24 @@ export default function registerToolbox(pi: ExtensionAPI): void {
 		};
 	}): Promise<void> {
 		await ctx.ui.custom<null>(
-			(
-				tui: TUI,
-				theme: Theme,
-				_kb: KeybindingsManager,
-				done: (r: null) => void,
-			) => {
+			(tui: TUI, theme: Theme, keybindings: KeybindingsManager, done: (r: null) => void) => {
 				const accent = "accent";
 				const mute = (s: string) => theme.fg("muted", s);
 
 				type RowState = "active" | "gated";
-				const stateOf = (name: string): RowState =>
-					ops.isActive(name) ? "active" : "gated";
+				const stateOf = (name: string): RowState => (ops.isActive(name) ? "active" : "gated");
 
 				const labelFor = (r: ToolRow): string => {
 					const active = stateOf(r.name) === "active";
 					const marker = active ? " " : theme.fg("warning", "#");
-					const name = active
-						? theme.fg("success", r.name)
-						: theme.fg("dim", r.name);
+					const name = active ? theme.fg("success", r.name) : theme.fg("dim", r.name);
 					const kind = mute(`[${r.mcp ? "MCP" : "tool"}]`);
 					return `${marker} ${name}  ${kind}`;
 				};
 
 				const descFor = (r: ToolRow): string => {
 					const active = stateOf(r.name) === "active";
-					const tag = active
-						? theme.fg("success", "active")
-						: theme.fg("warning", "gated");
+					const tag = active ? theme.fg("success", "active") : theme.fg("warning", "gated");
 					return `${tag} ${mute("·")} ${r.description || "(no description)"}`;
 				};
 
@@ -394,14 +373,11 @@ export default function registerToolbox(pi: ExtensionAPI): void {
 				};
 
 				const allItems = rows.map(toItem);
-				const widest = allItems.reduce(
-					(w, it) => Math.max(w, visibleWidth(it.label)),
-					0,
-				);
+				const widest = allItems.reduce((w, it) => Math.max(w, visibleWidth(it.label)), 0);
 
 				const list = new SelectList(
 					allItems,
-					Math.min(allItems.length, 14),
+					Math.max(1, allItems.length),
 					{
 						selectedPrefix: (t: string) => theme.fg(accent, t),
 						selectedText: (t: string) => theme.fg(accent, t),
@@ -423,6 +399,7 @@ export default function registerToolbox(pi: ExtensionAPI): void {
 
 				const search = new Input();
 				let statusText = "";
+				const pager = new ModalPager();
 
 				const refreshLabels = () => {
 					for (const it of internal.items) {
@@ -472,43 +449,52 @@ export default function registerToolbox(pi: ExtensionAPI): void {
 					render(w: number) {
 						const mw = modalWidth(w);
 						const inner = mw - 4; // CHROME = 2 border + 2 padding
-						const lines: string[] = [
-							theme.fg(accent, theme.bold("🧰  Toolbox")),
-							theme.fg("muted", "Search:"),
-							...search.render(inner),
-							...list.render(inner),
-						];
-						if (statusText) lines.push(statusText);
-						lines.push(
+						const footer = statusText ? [statusText] : [];
+						footer.push(
 							theme.fg(
 								"dim",
-								"↑↓ navigate · e enable · d disable · space toggle · esc close",
+								"↑↓ navigate · ←→/PgUp/PgDn inspect · e enable · d disable · space toggle · esc close",
 							),
 						);
-						return frameLines({
+						const result = frameModal({
 							width: mw,
-							lines,
+							maxHeight: terminalModalHeight(tui.terminal.rows),
+							minHeight: MIN_MODAL_HEIGHT,
+							header: [
+								theme.fg(accent, theme.bold("🧰  Toolbox")),
+								theme.fg("muted", "Search:"),
+								...search.render(inner),
+							],
+							body: list.render(inner),
+							selectedBodyRange: pager.selectedRange({
+								start: internal.selectedIndex,
+								end: internal.selectedIndex + 1,
+							}),
+							footer,
+							bodyOffset: pager.bodyOffset,
 							color: (s) => theme.fg(accent, s),
 							bg: (s) => theme.bg("customMessageBg", s),
+							fg: (s) => theme.fg("text", s),
 						});
+						pager.sync(result);
+						return result.lines;
 					},
 					invalidate() {
 						list.invalidate();
 						search.invalidate();
 					},
 					handleInput(data: string) {
+						if (pager.handleInput(data, keybindings, true)) {
+							tui.requestRender?.();
+							return;
+						}
 						if (matchesKey(data, Key.up) || matchesKey(data, Key.down)) {
 							list.handleInput?.(data);
-						} else if (
-							matchesKey(data, Key.enter) ||
-							matchesKey(data, Key.escape)
-						) {
+							pager.followSelection();
+						} else if (matchesKey(data, Key.enter) || matchesKey(data, Key.escape)) {
 							done(null);
 							return;
-						} else if (
-							matchesKey(data, Key.space) ||
-							matchesKey(data, Key.tab)
-						) {
+						} else if (matchesKey(data, Key.space) || matchesKey(data, Key.tab)) {
 							flipSelected();
 						} else {
 							const printable = decodeKittyPrintable(data);
@@ -520,10 +506,12 @@ export default function registerToolbox(pi: ExtensionAPI): void {
 								} else {
 									search.handleInput?.(data);
 									applyFilter(search.getValue?.() ?? "");
+									pager.followSelection();
 								}
 							} else {
 								search.handleInput?.(data);
 								applyFilter(search.getValue?.() ?? "");
+								pager.followSelection();
 							}
 						}
 						list.invalidate();
@@ -553,9 +541,7 @@ export default function registerToolbox(pi: ExtensionAPI): void {
 					return;
 				}
 				const rows = getRows();
-				const msg = targets
-					.map((t) => toggleTool(verb, t, rows, ops))
-					.join("\n");
+				const msg = targets.map((t) => toggleTool(verb, t, rows, ops)).join("\n");
 				ctx.ui.notify(msg, "info");
 				return;
 			}