@fyeeme/pi-ask-user 2.0.0 → 2.0.2

package/src/compat.ts

@@ -0,0 +1,104 @@
+/**
+ * pi-tui compatibility layer for the migrated oh-my-pi ask UI.
+ *
+ * oh-my-pi forked the pi tui package and added helpers/symbols the ask dialog
+ * depends on. pi's published `@earendil-works/pi-tui` does not export them, so
+ * this module re-implements the small surface the migration needs, mirroring
+ * omp semantics:
+ *
+ * - Ellipsis/padding/replaceTabs: omp utils.ts helpers.
+ * - SYMBOLS: omp theme symbol defaults (modes/theme/symbols.ts) — pi's Theme
+ *   has no symbol table, so the glyphs are fixed constants here and colored
+ *   through pi's theme.fg.
+ * - renderInlineMarkdown: omp's version is backed by a full marked lexer
+ *   pi-tui does not export; labels render as plain text with the base color.
+ * - windowLines: omp's ScrollView(lines, {height}).setScrollOffset(n) string
+ *   window — pi's ScrollView is a layout container over a Component and cannot
+ *   window a plain string[] in a custom component's render().
+ *
+ * Markdown rendering itself uses pi's own Markdown component + getMarkdownTheme
+ * (both exported by @earendil-works/pi-coding-agent), which match omp 1:1.
+ */
+
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+export { truncateToWidth, visibleWidth, matchesKey, Key } from "@earendil-works/pi-tui";
+
+/** omp Ellipsis.Unicode ("…"). pi's truncateToWidth takes the glyph directly. */
+export const ELLIPSIS = "…";
+
+export function clamp(value: number, min: number, max: number): number {
+	return Math.max(min, Math.min(value, max));
+}
+
+/** omp utils.ts replaceTabs: tabs render inconsistently — replace with spaces. */
+export function replaceTabs(text: string): string {
+	return text.replaceAll("\t", "    ");
+}
+
+/** omp utils.ts padding: n spaces (n clamped at 0). */
+export function padding(n: number): string {
+	return n > 0 ? " ".repeat(n) : "";
+}
+
+/** omp theme symbol defaults (modes/theme/symbols.ts). */
+export const SYMBOLS = {
+	nav: { cursor: "❯", selected: "➤" },
+	radio: { selected: "◉", unselected: "○" },
+	checkbox: { checked: "☑", unchecked: "☐" },
+	boxRound: {
+		topLeft: "╭",
+		topRight: "╮",
+		bottomLeft: "╰",
+		bottomRight: "╯",
+		horizontal: "─",
+		vertical: "│",
+		teeRight: "├",
+		teeLeft: "┤",
+	},
+	status: { success: "+", warning: "~" },
+	format: { bullet: "•" },
+} as const;
+
+/** omp renderInlineMarkdown is backed by a full marked lexer pi-tui does not
+ *  export; labels render as plain (ANSI-passthrough) text with the base color. */
+export function renderInlineMarkdown(text: string, baseColor?: (t: string) => string): string {
+	if (typeof text !== "string") return (baseColor ?? (t => t))(text != null ? String(text) : "");
+	return (baseColor ?? (t => t))(text);
+}
+
+/**
+ * Window `lines` to `rows` starting at `offset`, padding short content with
+ * blank rows (omp ScrollView semantics: the body area never shrinks). A
+ * trailing column is NOT reserved for a scrollbar; callers render the omp
+ * ↑/↓/↕ clip indicator in the footer instead.
+ */
+export function windowLines(lines: readonly string[], offset: number, rows: number): string[] {
+	const out: string[] = [];
+	for (let i = 0; i < rows; i++) {
+		out.push(lines[offset + i] ?? "");
+	}
+	return out;
+}
+
+/** omp ask-dialog #clipIndicator: which scroll directions have hidden content. */
+export function clipIndicator(offset: number, rows: number, totalRows: number): string {
+	const above = offset > 0;
+	const below = offset + rows < totalRows;
+	if (above && below) return "↕";
+	if (above) return "↑";
+	if (below) return "↓";
+	return "";
+}
+
+/** Format a KeybindingsManager key list the way omp's formatKeyHints does. */
+export function formatKeyHints(keys: readonly string[]): string {
+	return keys.join("/");
+}
+
+/** Normalize a key label for footer hints (omp editorKey/cancelKeyLabel). */
+export function keyLabel(keys: readonly string[], fallback: string): string {
+	const [first = ""] = formatKeyHints(keys).split("/");
+	if (!first) return fallback;
+	return first === "escape" ? "Esc" : first === "pageup" ? "PgUp" : first === "pagedown" ? "PgDn" : first;
+}

package/src/countdown-timer.ts

@@ -0,0 +1,83 @@
+/**
+ * Reusable countdown timer for dialog components — migrated verbatim from
+ * oh-my-pi (packages/coding-agent/src/modes/components/countdown-timer.ts).
+ *
+ * Adaptation: the `tui` parameter is narrowed to the only member omp uses
+ * (`requestRender`), so tests can pass a plain object.
+ */
+
+export interface TuiRenderHandle {
+	requestRender(): void;
+}
+
+export class CountdownTimer {
+	#intervalId: ReturnType<typeof setInterval> | undefined;
+	#expireTimeoutId: ReturnType<typeof setTimeout> | undefined;
+	#remainingSeconds: number;
+	#deadlineMs = 0;
+	readonly #initialMs: number;
+	readonly #tui: TuiRenderHandle | undefined;
+	readonly #onTick: (seconds: number) => void;
+	readonly #onExpire: () => void;
+
+	constructor(timeoutMs: number, tui: TuiRenderHandle | undefined, onTick: (seconds: number) => void, onExpire: () => void) {
+		this.#initialMs = timeoutMs;
+		this.#tui = tui;
+		this.#onTick = onTick;
+		this.#onExpire = onExpire;
+		this.#remainingSeconds = Math.ceil(timeoutMs / 1000);
+		this.#start();
+	}
+
+	#calculateRemainingSeconds(now = Date.now()): number {
+		const remainingMs = Math.max(0, this.#deadlineMs - now);
+		return Math.ceil(remainingMs / 1000);
+	}
+
+	#start(): void {
+		const now = Date.now();
+		this.#deadlineMs = now + this.#initialMs;
+		this.#remainingSeconds = this.#calculateRemainingSeconds(now);
+		this.#onTick(this.#remainingSeconds);
+		this.#tui?.requestRender();
+
+		this.#expireTimeoutId = setTimeout(() => {
+			this.dispose();
+			this.#onExpire();
+		}, this.#initialMs);
+
+		this.#startInterval();
+	}
+
+	#startInterval(): void {
+		if (this.#intervalId) {
+			clearInterval(this.#intervalId);
+			this.#intervalId = undefined;
+		}
+		this.#intervalId = setInterval(() => {
+			const remainingSeconds = this.#calculateRemainingSeconds();
+			if (remainingSeconds !== this.#remainingSeconds) {
+				this.#remainingSeconds = remainingSeconds;
+				this.#onTick(this.#remainingSeconds);
+			}
+			this.#tui?.requestRender();
+		}, 1000);
+	}
+
+	/** Reset the countdown to its initial value */
+	reset(): void {
+		this.dispose();
+		this.#start();
+	}
+
+	dispose(): void {
+		if (this.#intervalId) {
+			clearInterval(this.#intervalId);
+			this.#intervalId = undefined;
+		}
+		if (this.#expireTimeoutId) {
+			clearTimeout(this.#expireTimeoutId);
+			this.#expireTimeoutId = undefined;
+		}
+	}
+}

package/src/overlay-box.ts

@@ -0,0 +1,53 @@
+/**
+ * Box-drawing chrome — migrated from oh-my-pi
+ * (packages/coding-agent/src/modes/components/overlay-box.ts).
+ *
+ * Adaptation: `theme.boxRound` glyphs come from the local SYMBOLS constant
+ * (pi's Theme has no symbol table); colors still route through pi's
+ * theme.fg. Only the helpers the ask dialog uses were carried over.
+ */
+
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { padding, SYMBOLS, truncateToWidth, visibleWidth } from "./compat.ts";
+
+/** Pad or truncate a (possibly ANSI-styled) string to exactly `width` columns. */
+export function fit(text: string, width: number): string {
+	if (width <= 0) return "";
+	const w = visibleWidth(text);
+	if (w === width) return text;
+	if (w < width) return text + padding(width - w);
+	const cut = truncateToWidth(text, width, "");
+	const cw = visibleWidth(cut);
+	return cw < width ? cut + padding(width - cw) : cut;
+}
+
+/** Top border with an optional accent-colored title inset into the rule. */
+export function topBorder(theme: Theme, width: number, title: string): string {
+	const box = SYMBOLS.boxRound;
+	const inner = Math.max(0, width - 2);
+	if (!title) return theme.fg("border", box.topLeft + box.horizontal.repeat(inner) + box.topRight);
+	const shown = truncateToWidth(` ${title} `, Math.max(0, inner - 2), "");
+	const fillWidth = Math.max(0, inner - 1 - visibleWidth(shown));
+	return (
+		theme.fg("border", box.topLeft + box.horizontal) +
+		theme.bold(theme.fg("accent", shown)) +
+		theme.fg("border", box.horizontal.repeat(fillWidth) + box.topRight)
+	);
+}
+
+/** A horizontal rule with left/right tees, splitting overlay sections. */
+export function divider(theme: Theme, width: number): string {
+	const box = SYMBOLS.boxRound;
+	return theme.fg("border", box.teeRight + box.horizontal.repeat(Math.max(0, width - 2)) + box.teeLeft);
+}
+
+export function bottomBorder(theme: Theme, width: number): string {
+	const box = SYMBOLS.boxRound;
+	return theme.fg("border", box.bottomLeft + box.horizontal.repeat(Math.max(0, width - 2)) + box.bottomRight);
+}
+
+/** Wrap pre-styled content in vertical borders with single-column insets. */
+export function row(theme: Theme, content: string, width: number): string {
+	const box = SYMBOLS.boxRound;
+	return `${theme.fg("border", box.vertical)} ${fit(content, Math.max(0, width - 4))} ${theme.fg("border", box.vertical)}`;
+}

package/src/types.ts

@@ -0,0 +1,78 @@
+/**
+ * Ask dialog types — migrated from oh-my-pi. The ExtensionAskDialog / ExtensionUI
+ * shapes come from packages/coding-agent/src/extensibility/extensions/types.ts;
+ * QuestionResult/AskToolDetails/AskOption come from packages/coding-agent/src/tools/ask.ts.
+ *
+ * Adaptation: none — these are pure data shapes, carried over verbatim.
+ */
+
+export interface ExtensionUISelectOption {
+	label: string;
+	description?: string;
+}
+
+export type ExtensionUISelectItem = string | ExtensionUISelectOption;
+
+export interface ExtensionAskDialogOption {
+	label: string;
+	description?: string;
+	preview?: string;
+}
+
+export interface ExtensionAskDialogQuestion {
+	id: string;
+	question: string;
+	header?: string;
+	options: ExtensionAskDialogOption[];
+	multi?: boolean;
+	recommended?: number;
+}
+
+export interface ExtensionAskDialogResultItem {
+	id: string;
+	question: string;
+	options: string[];
+	multi: boolean;
+	selectedOptions: string[];
+	customInput?: string;
+	timedOut?: boolean;
+}
+
+export interface ExtensionAskDialogSubmitResult {
+	kind: "submit";
+	results: ExtensionAskDialogResultItem[];
+}
+
+export type ExtensionAskDialogResult = ExtensionAskDialogSubmitResult;
+
+/**
+ * Ask dialog types — migrated from oh-my-pi. The ExtensionAskDialog / ExtensionUI
+ * shapes come from packages/coding-agent/src/extensibility/extensions/types.ts;
+ * QuestionResult/AskToolDetails/AskOption come from packages/coding-agent/src/tools/ask.ts.
+ *
+ * Adaptation: none — these are pure data shapes, carried over verbatim.
+ *//** Result for a single question (omp AskToolDetails.QuestionResult). */
+export interface QuestionResult {
+	id: string;
+	question: string;
+	options: string[];
+	multi: boolean;
+	selectedOptions: string[];
+	customInput?: string;
+	timedOut?: boolean;
+}
+
+export interface AskToolDetails {
+	question?: string;
+	options?: string[];
+	multi?: boolean;
+	selectedOptions?: string[];
+	customInput?: string;
+	timedOut?: boolean;
+	results?: QuestionResult[];
+}
+
+export interface AskOption {
+	label: string;
+	description?: string;
+}