@narumitw/pi-btw 0.41.0 → 0.42.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@narumitw/pi-btw",
-	"version": "0.41.0",
+	"version": "0.42.1",
 	"description": "Pi extension that adds a /btw side-question command.",
 	"type": "module",
 	"license": "MIT",
@@ -38,5 +38,13 @@
 		"type": "git",
 		"url": "https://github.com/narumiruna/pi-extensions",
 		"directory": "extensions/pi-btw"
+	},
+	"dependencies": {
+		"@narumitw/pi-tui-kit": "^0.42.0"
+	},
+	"peerDependencies": {
+		"@earendil-works/pi-ai": "*",
+		"@earendil-works/pi-coding-agent": "*",
+		"@earendil-works/pi-tui": "*"
 	}
 }

package/src/bring-to-main.ts

@@ -47,11 +47,6 @@ export type BtwQuickBringToMainScope =
 	| { kind: "from"; answeredTurnIndex: number }
 	| { kind: "entire" };
 
-export type BtwMenuSelectorAction =
-	| { kind: "select"; value: string }
-	| { kind: "back" }
-	| { kind: "close" };
-
 export type BtwTextRangeSelectorAction =
 	| { kind: "confirm"; segments: BtwBringToMainSegment[] }
 	| { kind: "back" }
@@ -175,210 +170,6 @@ export function formatBtwBringToMain(segments: readonly BtwBringToMainSegment[])
 	].join("\n");
 }
 
-export type BtwBringToMainPreviewAction = { kind: "bring" } | { kind: "back" } | { kind: "close" };
-
-export class BtwBringToMainPreview implements Component {
-	private readonly lines: string[];
-	private displayLines: string[];
-	private scrollOffset = 0;
-	private finished = false;
-
-	constructor(
-		private readonly tui: TUI,
-		private readonly theme: Theme,
-		private readonly keybindings: KeybindingsManager,
-		draft: string,
-		private readonly summary: BtwBringToMainSummary,
-		private readonly onAction: (action: BtwBringToMainPreviewAction) => void,
-	) {
-		this.lines = draft.split("\n").map(escapeTerminalControls);
-		this.displayLines = this.lines;
-	}
-
-	render(width: number): string[] {
-		const safeWidth = Math.max(1, width);
-		this.displayLines = this.lines.flatMap((line) => wrapPreviewLine(line, safeWidth));
-		const availableRows = Math.max(1, this.tui.terminal.rows - RESERVED_APP_ROWS);
-		const showFooter = availableRows >= 3;
-		const viewportHeight = Math.max(1, availableRows - 1 - (showFooter ? 1 : 0));
-		this.clampScroll(viewportHeight);
-		const count = this.summary.messages === 1 ? "1 message" : `${this.summary.messages} messages`;
-		const lineCount = this.summary.lines === 1 ? "1 line" : `${this.summary.lines} lines`;
-		const firstVisible = Math.min(this.displayLines.length, this.scrollOffset + 1);
-		const lastVisible = Math.min(this.displayLines.length, this.scrollOffset + viewportHeight);
-		const scrollable = this.displayLines.length > viewportHeight;
-		const position = `${firstVisible}–${lastVisible}/${this.displayLines.length}`;
-		const header = `Preview${scrollable ? ` ${position}` : ""} · ${count} · ${lineCount} · ~${this.summary.tokens} tokens`;
-		const actions = `${confirmKeyLabel(this.keybindings)} bring • ${keybindingLabel(this.keybindings, "tui.select.cancel", ["ctrl+c"])} back • Ctrl+C close`;
-		const scroll = `${position} • ${keybindingLabel(this.keybindings, "tui.select.pageUp")}/${keybindingLabel(this.keybindings, "tui.select.pageDown")} scroll`;
-		const detailedFooter = scrollable ? `${scroll} • ${actions}` : actions;
-		const footer = visibleWidth(detailedFooter) <= safeWidth ? detailedFooter : actions;
-		return fitRows(
-			[
-				truncateToWidth(this.theme.fg("accent", this.theme.bold(header)), safeWidth, ""),
-				...this.displayLines.slice(this.scrollOffset, this.scrollOffset + viewportHeight),
-				...(showFooter ? [truncateToWidth(this.theme.fg("muted", footer), safeWidth, "")] : []),
-			],
-			availableRows,
-		);
-	}
-
-	handleInput(data: string): void {
-		if (this.finished) return;
-		if (matchesKey(data, Key.ctrl("c"))) {
-			this.finish({ kind: "close" });
-			return;
-		}
-		if (this.keybindings.matches(data, "tui.select.cancel")) {
-			this.finish({ kind: "back" });
-			return;
-		}
-		if (matchesConfirm(data, this.keybindings)) {
-			this.finish({ kind: "bring" });
-			return;
-		}
-		if (this.keybindings.matches(data, "tui.select.pageUp")) {
-			this.scrollOffset -= Math.max(1, this.tui.terminal.rows - RESERVED_APP_ROWS - 2);
-			this.clampScroll(Math.max(0, this.tui.terminal.rows - RESERVED_APP_ROWS - 2));
-			this.tui.requestRender();
-			return;
-		}
-		if (this.keybindings.matches(data, "tui.select.pageDown")) {
-			this.scrollOffset += Math.max(1, this.tui.terminal.rows - RESERVED_APP_ROWS - 2);
-			this.clampScroll(Math.max(0, this.tui.terminal.rows - RESERVED_APP_ROWS - 2));
-			this.tui.requestRender();
-		}
-	}
-
-	invalidate(): void {}
-
-	private clampScroll(viewportHeight: number): void {
-		this.scrollOffset = Math.max(
-			0,
-			Math.min(this.scrollOffset, Math.max(0, this.displayLines.length - viewportHeight)),
-		);
-	}
-
-	private finish(action: BtwBringToMainPreviewAction): void {
-		if (this.finished) return;
-		this.finished = true;
-		this.onAction(action);
-	}
-}
-
-export class BtwMenuSelector implements Component {
-	private cursor = 0;
-	private scrollOffset = 0;
-	private finished = false;
-
-	constructor(
-		private readonly tui: TUI,
-		private readonly theme: Theme,
-		private readonly keybindings: KeybindingsManager,
-		private readonly title: string,
-		private readonly options: readonly string[],
-		private readonly onAction: (action: BtwMenuSelectorAction) => void,
-		initialValue?: string,
-	) {
-		const initialIndex = initialValue === undefined ? -1 : options.indexOf(initialValue);
-		if (initialIndex >= 0) this.cursor = initialIndex;
-	}
-
-	render(width: number): string[] {
-		const safeWidth = Math.max(1, width);
-		const availableRows = Math.max(1, this.tui.terminal.rows - RESERVED_APP_ROWS);
-		const showFooter = availableRows >= 3;
-		const viewportHeight = Math.max(1, availableRows - 1 - (showFooter ? 1 : 0));
-		this.keepCursorVisible(viewportHeight);
-		const rows = this.options
-			.slice(this.scrollOffset, this.scrollOffset + viewportHeight)
-			.map((option, visibleIndex) => {
-				const index = this.scrollOffset + visibleIndex;
-				const raw = `${index === this.cursor ? ">" : " "} ${escapeTerminalControls(option)}`;
-				const toned = option.startsWith("⚠") ? this.theme.fg("warning", raw) : raw;
-				const styled =
-					index === this.cursor ? this.theme.bg("selectedBg", this.theme.fg("text", toned)) : toned;
-				return truncateToWidth(styled, safeWidth, "");
-			});
-		return fitRows(
-			[
-				truncateToWidth(
-					this.theme.fg("accent", this.theme.bold(escapeTerminalControls(this.title))),
-					safeWidth,
-					"",
-				),
-				...rows,
-				...(showFooter
-					? [
-							truncateToWidth(
-								this.theme.fg(
-									"muted",
-									`${confirmKeyLabel(this.keybindings)} confirm • ${keybindingLabel(this.keybindings, "tui.select.cancel", ["ctrl+c"])} back • Ctrl+C close`,
-								),
-								safeWidth,
-								"",
-							),
-						]
-					: []),
-			],
-			availableRows,
-		);
-	}
-
-	handleInput(data: string): void {
-		if (this.finished) return;
-		if (matchesKey(data, Key.ctrl("c"))) {
-			this.finish({ kind: "close" });
-			return;
-		}
-		if (this.keybindings.matches(data, "tui.select.cancel")) {
-			this.finish({ kind: "back" });
-			return;
-		}
-		if (matchesConfirm(data, this.keybindings)) {
-			const value = this.options[this.cursor];
-			if (value !== undefined) this.finish({ kind: "select", value });
-			return;
-		}
-		if (this.keybindings.matches(data, "tui.select.up")) {
-			this.cursor = Math.max(0, this.cursor - 1);
-			this.tui.requestRender();
-			return;
-		}
-		if (this.keybindings.matches(data, "tui.select.down")) {
-			this.cursor = Math.min(Math.max(0, this.options.length - 1), this.cursor + 1);
-			this.tui.requestRender();
-			return;
-		}
-		if (this.keybindings.matches(data, "tui.select.pageUp")) {
-			this.cursor = Math.max(0, this.cursor - 10);
-			this.tui.requestRender();
-			return;
-		}
-		if (this.keybindings.matches(data, "tui.select.pageDown")) {
-			this.cursor = Math.min(Math.max(0, this.options.length - 1), this.cursor + 10);
-			this.tui.requestRender();
-			return;
-		}
-	}
-
-	invalidate(): void {}
-
-	private keepCursorVisible(height: number): void {
-		if (height <= 0) return;
-		if (this.cursor < this.scrollOffset) this.scrollOffset = this.cursor;
-		if (this.cursor >= this.scrollOffset + height) {
-			this.scrollOffset = this.cursor - height + 1;
-		}
-	}
-
-	private finish(action: BtwMenuSelectorAction): void {
-		if (this.finished) return;
-		this.finished = true;
-		this.onAction(action);
-	}
-}
-
 export class BtwTextRangeSelector implements Component {
 	private readonly lines: BtwSelectionLine[];
 	private cursor: BtwTextPosition = { line: 0, column: 0 };
@@ -788,35 +579,6 @@ function splitGraphemes(text: string): string[] {
 	return [...GRAPHEME_SEGMENTER.segment(text)].map(({ segment }) => segment);
 }
 
-function wrapPreviewLine(text: string, width: number): string[] {
-	if (!text) return [""];
-	const rows: string[] = [];
-	let row = "";
-	let rowWidth = 0;
-	const append = (value: string, valueWidth: number) => {
-		if (row && rowWidth + valueWidth > width) {
-			rows.push(row);
-			row = "";
-			rowWidth = 0;
-		}
-		row += value;
-		rowWidth += valueWidth;
-	};
-	for (const character of splitGraphemes(text)) {
-		const characterWidth = visibleWidth(character);
-		if (characterWidth <= width) {
-			append(character, characterWidth);
-			continue;
-		}
-		const codePoints = [...character]
-			.map((value) => `\\u{${value.codePointAt(0)?.toString(16) ?? "0"}}`)
-			.join("");
-		for (const value of codePoints) append(value, 1);
-	}
-	rows.push(row);
-	return rows;
-}
-
 function compareTextPositions(first: BtwTextPosition, second: BtwTextPosition): number {
 	return first.line === second.line ? first.column - second.column : first.line - second.line;
 }

package/src/btw.ts

@@ -10,13 +10,10 @@ import {
 	type Theme,
 } from "@earendil-works/pi-coding-agent";
 import type { Component, TUI } from "@earendil-works/pi-tui";
+import { defineMenu, type MenuContext, type RunMenuResult, runMenu } from "@narumitw/pi-tui-kit";
 import {
-	BtwBringToMainPreview,
-	type BtwBringToMainPreviewAction,
 	type BtwBringToMainSegment,
 	type BtwBringToMainSummary,
-	BtwMenuSelector,
-	type BtwMenuSelectorAction,
 	BtwTextRangeSelector,
 	type BtwTextRangeSelectorState,
 	buildQuickBringToMainSegments,
@@ -391,15 +388,19 @@ type BtwCustomFactory<T> = (
 async function showBtwCustomPreservingEditor<T>(
 	ctx: ExtensionCommandContext,
 	factory: BtwCustomFactory<T>,
-): Promise<T> {
+): Promise<T | undefined> {
 	let liveEditorText = ctx.ui.getEditorText();
+	let completed = false;
 	const result = await ctx.ui.custom<T>((tui, theme, keybindings, done) =>
 		factory(tui, theme, keybindings, (value) => {
 			liveEditorText = ctx.ui.getEditorText();
+			completed = true;
 			done(value);
 		}),
 	);
-	if (ctx.ui.getEditorText() !== liveEditorText) ctx.ui.setEditorText(liveEditorText);
+	if (completed && ctx.ui.getEditorText() !== liveEditorText) {
+		ctx.ui.setEditorText(liveEditorText);
+	}
 	return result;
 }
 
@@ -501,6 +502,7 @@ export async function chooseBringToMain(
 					return selector;
 				},
 			);
+			if (!selectedRange) return { kind: "closed" };
 			if (selectedRange.kind === "closed") return selectedRange;
 			if (selectedRange.kind === "back") break;
 			const preview = await showPreview(ctx, selectedRange.draft, selectedRange.summary);
@@ -518,16 +520,47 @@ export async function chooseBringToMain(
 	}
 }
 
+type BtwMenuSelectorAction =
+	| { kind: "select"; value: string }
+	| { kind: "back" }
+	| { kind: "close" };
+
+type BtwBringToMainPreviewAction = { kind: "bring" } | { kind: "back" } | { kind: "close" };
+
 async function showBringToMainPreview(
 	ctx: ExtensionCommandContext,
 	draft: string,
 	summary: BtwBringToMainSummary,
 ): Promise<BtwBringToMainPreviewAction> {
-	return showBtwCustomPreservingEditor<BtwBringToMainPreviewAction>(
-		ctx,
-		(tui, theme, keybindings, done) =>
-			new BtwBringToMainPreview(tui, theme, keybindings, draft, summary, done),
+	let confirmed = false;
+	const count = summary.messages === 1 ? "1 message" : `${summary.messages} messages`;
+	const lineCount = summary.lines === 1 ? "1 line" : `${summary.lines} lines`;
+	const menu = defineMenu<void, "preview", "bring", MenuContext>({
+		start: "preview",
+		screens: {
+			preview: () => ({
+				kind: "review",
+				title: `Preview · ${count} · ${lineCount} · ~${summary.tokens} tokens`,
+				content: draft,
+				viewportSize: "adaptive",
+				hint: "back",
+				confirm: { id: "bring", label: "Bring", action: "bring" },
+			}),
+		},
+		actions: {
+			bring: async () => {
+				confirmed = true;
+				return { kind: "close" } as const;
+			},
+		},
+	});
+	const result = await runBtwMenuPreservingEditor(ctx, (menuContext) =>
+		runMenu(menuContext, menu, { getState: () => undefined }),
 	);
+	if (confirmed && result.kind === "closed" && result.reason === "close") {
+		return { kind: "bring" };
+	}
+	return terminalBtwMenuAction(result);
 }
 
 async function showBtwMenu(
@@ -536,11 +569,72 @@ async function showBtwMenu(
 	options: readonly string[],
 	initialValue?: string,
 ): Promise<BtwMenuSelectorAction> {
-	return showBtwCustomPreservingEditor<BtwMenuSelectorAction>(
-		ctx,
-		(tui, theme, keybindings, done) =>
-			new BtwMenuSelector(tui, theme, keybindings, title, options, done, initialValue),
+	const items = options.map((label, index) => ({ id: `option-${index}`, label }));
+	const initialIndex = initialValue === undefined ? -1 : options.indexOf(initialValue);
+	let selectedValue: string | undefined;
+	const menu = defineMenu<void, "choices", "select", MenuContext>({
+		start: "choices",
+		screens: {
+			choices: () => ({
+				kind: "choice",
+				title,
+				items,
+				action: "select",
+				initialItemId: initialIndex >= 0 ? `option-${initialIndex}` : undefined,
+				hint: "back",
+			}),
+		},
+		actions: {
+			select: async ({ itemId }: { itemId: string }) => {
+				const index = Number.parseInt(itemId.slice("option-".length), 10);
+				selectedValue = options[index];
+				return selectedValue === undefined
+					? ({ kind: "stay" } as const)
+					: ({ kind: "close" } as const);
+			},
+		},
+	});
+	const result = await runBtwMenuPreservingEditor(ctx, (menuContext) =>
+		runMenu(menuContext, menu, { getState: () => undefined }),
 	);
+	return selectedValue !== undefined && result.kind === "closed" && result.reason === "close"
+		? { kind: "select", value: selectedValue }
+		: terminalBtwMenuAction(result);
+}
+
+async function runBtwMenuPreservingEditor(
+	ctx: ExtensionCommandContext,
+	run: (menuContext: MenuContext) => Promise<RunMenuResult>,
+): Promise<RunMenuResult> {
+	let liveEditorText = ctx.ui.getEditorText();
+	let completed = false;
+	const ui = new Proxy(ctx.ui, {
+		get(target, property) {
+			if (property === "custom") {
+				return <Value>(factory: BtwCustomFactory<Value>) =>
+					target.custom<Value>((tui, theme, keybindings, done) =>
+						factory(tui, theme, keybindings, (value) => {
+							liveEditorText = target.getEditorText();
+							completed = true;
+							done(value);
+						}),
+					);
+			}
+			const value = Reflect.get(target, property, target) as unknown;
+			return typeof value === "function" ? value.bind(target) : value;
+		},
+	});
+	const result = await run({ mode: ctx.mode, hasUI: ctx.hasUI, ui });
+	if (result.kind !== "stale" && completed && ctx.ui.getEditorText() !== liveEditorText) {
+		ctx.ui.setEditorText(liveEditorText);
+	}
+	return result;
+}
+
+function terminalBtwMenuAction(result: RunMenuResult): { kind: "back" } | { kind: "close" } {
+	if (result.kind === "closed") return { kind: result.reason };
+	if (result.kind === "error") throw result.error;
+	return { kind: "close" };
 }
 
 export async function loadBringToMainDraft(