@shanepadgett/tau-tui 0.29.0 → 0.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@shanepadgett/tau-tui",
-	"version": "0.29.0",
+	"version": "0.30.0",
 	"description": "Shared TUI components and helpers for Tau Agent",
 	"type": "module",
 	"license": "MIT",

package/src/text-record-select-panel.ts

@@ -1,5 +1,13 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
-import { type Component, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import {
+	type Component,
+	getKeybindings,
+	truncateToWidth,
+	type TUI,
+	visibleWidth,
+	wrapTextWithAnsi,
+} from "@earendil-works/pi-tui";
+import { bindingHint } from "./key-hints.ts";
 import { formatAge, preview } from "./text.ts";
 import {
 	SelectableList,
@@ -7,7 +15,7 @@ import {
 	type SelectableListItem,
 	type SelectableListRowState,
 } from "./selectable-list.ts";
-import { ToolPanel } from "./tool-panel.ts";
+import { ToolPanel, type ToolPanelConfig } from "./tool-panel.ts";
 
 export interface TextRecordSelectItem extends SelectableListItem {
 	text: string;
@@ -19,27 +27,38 @@ export type TextRecordSelectResult<T extends TextRecordSelectItem> =
 	| { kind: "primary"; item: T }
 	| { kind: "action"; actionId: string; item: T };
 
-export interface TextRecordSelectPanelConfig {
+export interface TextRecordDestructiveAction<T extends TextRecordSelectItem> extends SelectableListAction {
+	confirmLabel(item: T): string;
+	runningLabel: string;
+	onConfirm(item: T): Promise<readonly T[]>;
+	onError(error: unknown): void;
+}
+
+export interface TextRecordSelectPanelConfig<T extends TextRecordSelectItem> {
 	title: string;
 	path: string;
 	emptyMessage: string;
 	primaryLabel: string;
 	actions: readonly SelectableListAction[];
+	destructiveAction: TextRecordDestructiveAction<T>;
 	expandActiveItem: boolean;
 }
 
 export function createTextRecordSelectPanel<T extends TextRecordSelectItem>(
+	tui: TUI,
 	theme: Theme,
 	items: readonly T[],
-	config: TextRecordSelectPanelConfig,
+	config: TextRecordSelectPanelConfig<T>,
 	done: (result: TextRecordSelectResult<T>) => void,
 ): Component {
+	let currentItems = items;
+	let destructiveState: { item: T; running: boolean } | undefined;
 	const list = new SelectableList(theme, {
 		items,
 		emptyMessage: config.emptyMessage,
 		selection: { kind: "single", primaryLabel: config.primaryLabel },
 		filter: { searchText: (item) => item.text },
-		actions: config.actions,
+		actions: [...config.actions, config.destructiveAction],
 		cancelLabel: "cancel",
 		maxVisible: 12,
 		renderItem: (item, state, width) => renderTextRecord(theme, item, state, config.expandActiveItem, width),
@@ -50,20 +69,69 @@ export function createTextRecordSelectPanel<T extends TextRecordSelectItem>(
 			}
 			const item = result.items[0];
 			if (!item) return;
+			if (result.kind === "action" && result.actionId === config.destructiveAction.id) {
+				destructiveState = { item, running: false };
+				syncPanel();
+				return;
+			}
 			done(
 				result.kind === "primary" ? { kind: "primary", item } : { kind: "action", actionId: result.actionId, item },
 			);
 		},
 	});
-	const panel = new ToolPanel(theme, {
+	const panelConfig: ToolPanelConfig = {
 		title: config.title,
 		secondary: `${items.length} total · ${config.path}`,
 		body: list,
 		footer: { kind: "hints", hints: list.getKeyHints() },
-	});
+	};
+	const panel = new ToolPanel(theme, panelConfig);
+
+	function syncPanel(): void {
+		panelConfig.secondary = `${currentItems.length} total · ${config.path}`;
+		panelConfig.footer = destructiveState
+			? destructiveState.running
+				? { kind: "infoAck", message: config.destructiveAction.runningLabel, hints: [] }
+				: {
+						kind: "destructiveAck",
+						message: config.destructiveAction.confirmLabel(destructiveState.item),
+						hints: [bindingHint("tui.select.confirm", "confirm"), bindingHint("tui.select.cancel", "cancel")],
+					}
+			: { kind: "hints", hints: list.getKeyHints() };
+		tui.requestRender();
+	}
+
+	async function confirmDestructive(item: T): Promise<void> {
+		try {
+			currentItems = await config.destructiveAction.onConfirm(item);
+			list.setItems(currentItems);
+		} catch (error) {
+			config.destructiveAction.onError(error);
+		}
+		destructiveState = undefined;
+		syncPanel();
+	}
 
 	return {
-		handleInput: (data) => list.handleInput(data),
+		handleInput: (data) => {
+			if (!destructiveState) {
+				list.handleInput(data);
+				return;
+			}
+			if (destructiveState.running) return;
+			const keybindings = getKeybindings();
+			if (keybindings.matches(data, "tui.select.confirm")) {
+				const item = destructiveState.item;
+				destructiveState.running = true;
+				syncPanel();
+				void confirmDestructive(item);
+				return;
+			}
+			if (keybindings.matches(data, "tui.select.cancel")) {
+				destructiveState = undefined;
+				syncPanel();
+			}
+		},
 		render: (width) => panel.render(width),
 		invalidate: () => panel.invalidate(),
 	};