@oh-my-pi/pi-coding-agent 1.337.0

package/src/modes/interactive/components/armin.ts

@@ -0,0 +1,382 @@
+/**
+ * Armin says hi! A fun easter egg with animated XBM art.
+ */
+
+import type { Component, TUI } from "@oh-my-pi/pi-tui";
+import { theme } from "../theme/theme.js";
+
+// XBM image: 31x36 pixels, LSB first, 1=background, 0=foreground
+const WIDTH = 31;
+const HEIGHT = 36;
+const BITS = [
+	0xff, 0xff, 0xff, 0x7f, 0xff, 0xf0, 0xff, 0x7f, 0xff, 0xed, 0xff, 0x7f, 0xff, 0xdb, 0xff, 0x7f, 0xff, 0xb7, 0xff,
+	0x7f, 0xff, 0x77, 0xfe, 0x7f, 0x3f, 0xf8, 0xfe, 0x7f, 0xdf, 0xff, 0xfe, 0x7f, 0xdf, 0x3f, 0xfc, 0x7f, 0x9f, 0xc3,
+	0xfb, 0x7f, 0x6f, 0xfc, 0xf4, 0x7f, 0xf7, 0x0f, 0xf7, 0x7f, 0xf7, 0xff, 0xf7, 0x7f, 0xf7, 0xff, 0xe3, 0x7f, 0xf7,
+	0x07, 0xe8, 0x7f, 0xef, 0xf8, 0x67, 0x70, 0x0f, 0xff, 0xbb, 0x6f, 0xf1, 0x00, 0xd0, 0x5b, 0xfd, 0x3f, 0xec, 0x53,
+	0xc1, 0xff, 0xef, 0x57, 0x9f, 0xfd, 0xee, 0x5f, 0x9f, 0xfc, 0xae, 0x5f, 0x1f, 0x78, 0xac, 0x5f, 0x3f, 0x00, 0x50,
+	0x6c, 0x7f, 0x00, 0xdc, 0x77, 0xff, 0xc0, 0x3f, 0x78, 0xff, 0x01, 0xf8, 0x7f, 0xff, 0x03, 0x9c, 0x78, 0xff, 0x07,
+	0x8c, 0x7c, 0xff, 0x0f, 0xce, 0x78, 0xff, 0xff, 0xcf, 0x7f, 0xff, 0xff, 0xcf, 0x78, 0xff, 0xff, 0xdf, 0x78, 0xff,
+	0xff, 0xdf, 0x7d, 0xff, 0xff, 0x3f, 0x7e, 0xff, 0xff, 0xff, 0x7f,
+];
+
+const BYTES_PER_ROW = Math.ceil(WIDTH / 8);
+const DISPLAY_HEIGHT = Math.ceil(HEIGHT / 2); // Half-block rendering
+
+type Effect = "typewriter" | "scanline" | "rain" | "fade" | "crt" | "glitch" | "dissolve";
+
+const EFFECTS: Effect[] = ["typewriter", "scanline", "rain", "fade", "crt", "glitch", "dissolve"];
+
+// Get pixel at (x, y): true = foreground, false = background
+function getPixel(x: number, y: number): boolean {
+	if (y >= HEIGHT) return false;
+	const byteIndex = y * BYTES_PER_ROW + Math.floor(x / 8);
+	const bitIndex = x % 8;
+	return ((BITS[byteIndex] >> bitIndex) & 1) === 0;
+}
+
+// Get the character for a cell (2 vertical pixels packed)
+function getChar(x: number, row: number): string {
+	const upper = getPixel(x, row * 2);
+	const lower = getPixel(x, row * 2 + 1);
+	if (upper && lower) return "█";
+	if (upper) return "▀";
+	if (lower) return "▄";
+	return " ";
+}
+
+// Build the final image grid
+function buildFinalGrid(): string[][] {
+	const grid: string[][] = [];
+	for (let row = 0; row < DISPLAY_HEIGHT; row++) {
+		const line: string[] = [];
+		for (let x = 0; x < WIDTH; x++) {
+			line.push(getChar(x, row));
+		}
+		grid.push(line);
+	}
+	return grid;
+}
+
+export class ArminComponent implements Component {
+	private ui: TUI;
+	private interval: ReturnType<typeof setInterval> | null = null;
+	private effect: Effect;
+	private finalGrid: string[][];
+	private currentGrid: string[][];
+	private effectState: Record<string, unknown> = {};
+	private cachedLines: string[] = [];
+	private cachedWidth = 0;
+	private gridVersion = 0;
+	private cachedVersion = -1;
+
+	constructor(ui: TUI) {
+		this.ui = ui;
+		this.effect = EFFECTS[Math.floor(Math.random() * EFFECTS.length)];
+		this.finalGrid = buildFinalGrid();
+		this.currentGrid = this.createEmptyGrid();
+
+		this.initEffect();
+		this.startAnimation();
+	}
+
+	invalidate(): void {
+		this.cachedWidth = 0;
+	}
+
+	render(width: number): string[] {
+		if (width === this.cachedWidth && this.cachedVersion === this.gridVersion) {
+			return this.cachedLines;
+		}
+
+		const padding = 1;
+		const availableWidth = width - padding;
+
+		this.cachedLines = this.currentGrid.map((row) => {
+			// Clip row to available width before applying color
+			const clipped = row.slice(0, availableWidth).join("");
+			const padRight = Math.max(0, width - padding - clipped.length);
+			return ` ${theme.fg("accent", clipped)}${" ".repeat(padRight)}`;
+		});
+
+		// Add "ARMIN SAYS HI" at the end
+		const message = "ARMIN SAYS HI";
+		const msgPadRight = Math.max(0, width - padding - message.length);
+		this.cachedLines.push(` ${theme.fg("accent", message)}${" ".repeat(msgPadRight)}`);
+
+		this.cachedWidth = width;
+		this.cachedVersion = this.gridVersion;
+
+		return this.cachedLines;
+	}
+
+	private createEmptyGrid(): string[][] {
+		return Array.from({ length: DISPLAY_HEIGHT }, () => Array(WIDTH).fill(" "));
+	}
+
+	private initEffect(): void {
+		switch (this.effect) {
+			case "typewriter":
+				this.effectState = { pos: 0 };
+				break;
+			case "scanline":
+				this.effectState = { row: 0 };
+				break;
+			case "rain":
+				// Track falling position for each column
+				this.effectState = {
+					drops: Array.from({ length: WIDTH }, () => ({
+						y: -Math.floor(Math.random() * DISPLAY_HEIGHT * 2),
+						settled: 0,
+					})),
+				};
+				break;
+			case "fade": {
+				// Shuffle all pixel positions
+				const positions: [number, number][] = [];
+				for (let row = 0; row < DISPLAY_HEIGHT; row++) {
+					for (let x = 0; x < WIDTH; x++) {
+						positions.push([row, x]);
+					}
+				}
+				// Fisher-Yates shuffle
+				for (let i = positions.length - 1; i > 0; i--) {
+					const j = Math.floor(Math.random() * (i + 1));
+					[positions[i], positions[j]] = [positions[j], positions[i]];
+				}
+				this.effectState = { positions, idx: 0 };
+				break;
+			}
+			case "crt":
+				this.effectState = { expansion: 0 };
+				break;
+			case "glitch":
+				this.effectState = { phase: 0, glitchFrames: 8 };
+				break;
+			case "dissolve": {
+				// Start with random noise
+				this.currentGrid = Array.from({ length: DISPLAY_HEIGHT }, () =>
+					Array.from({ length: WIDTH }, () => {
+						const chars = [" ", "░", "▒", "▓", "█", "▀", "▄"];
+						return chars[Math.floor(Math.random() * chars.length)];
+					}),
+				);
+				// Shuffle positions for gradual resolve
+				const dissolvePositions: [number, number][] = [];
+				for (let row = 0; row < DISPLAY_HEIGHT; row++) {
+					for (let x = 0; x < WIDTH; x++) {
+						dissolvePositions.push([row, x]);
+					}
+				}
+				for (let i = dissolvePositions.length - 1; i > 0; i--) {
+					const j = Math.floor(Math.random() * (i + 1));
+					[dissolvePositions[i], dissolvePositions[j]] = [dissolvePositions[j], dissolvePositions[i]];
+				}
+				this.effectState = { positions: dissolvePositions, idx: 0 };
+				break;
+			}
+		}
+	}
+
+	private startAnimation(): void {
+		const fps = this.effect === "glitch" ? 60 : 30;
+		this.interval = setInterval(() => {
+			const done = this.tickEffect();
+			this.updateDisplay();
+			this.ui.requestRender();
+			if (done) {
+				this.stopAnimation();
+			}
+		}, 1000 / fps);
+	}
+
+	private stopAnimation(): void {
+		if (this.interval) {
+			clearInterval(this.interval);
+			this.interval = null;
+		}
+	}
+
+	private tickEffect(): boolean {
+		switch (this.effect) {
+			case "typewriter":
+				return this.tickTypewriter();
+			case "scanline":
+				return this.tickScanline();
+			case "rain":
+				return this.tickRain();
+			case "fade":
+				return this.tickFade();
+			case "crt":
+				return this.tickCrt();
+			case "glitch":
+				return this.tickGlitch();
+			case "dissolve":
+				return this.tickDissolve();
+			default:
+				return true;
+		}
+	}
+
+	private tickTypewriter(): boolean {
+		const state = this.effectState as { pos: number };
+		const pixelsPerFrame = 3;
+
+		for (let i = 0; i < pixelsPerFrame; i++) {
+			const row = Math.floor(state.pos / WIDTH);
+			const x = state.pos % WIDTH;
+			if (row >= DISPLAY_HEIGHT) return true;
+			this.currentGrid[row][x] = this.finalGrid[row][x];
+			state.pos++;
+		}
+		return false;
+	}
+
+	private tickScanline(): boolean {
+		const state = this.effectState as { row: number };
+		if (state.row >= DISPLAY_HEIGHT) return true;
+
+		// Copy row
+		for (let x = 0; x < WIDTH; x++) {
+			this.currentGrid[state.row][x] = this.finalGrid[state.row][x];
+		}
+		state.row++;
+		return false;
+	}
+
+	private tickRain(): boolean {
+		const state = this.effectState as {
+			drops: { y: number; settled: number }[];
+		};
+
+		let allSettled = true;
+		this.currentGrid = this.createEmptyGrid();
+
+		for (let x = 0; x < WIDTH; x++) {
+			const drop = state.drops[x];
+
+			// Draw settled pixels
+			for (let row = DISPLAY_HEIGHT - 1; row >= DISPLAY_HEIGHT - drop.settled; row--) {
+				if (row >= 0) {
+					this.currentGrid[row][x] = this.finalGrid[row][x];
+				}
+			}
+
+			// Check if this column is done
+			if (drop.settled >= DISPLAY_HEIGHT) continue;
+
+			allSettled = false;
+
+			// Find the target row for this column (lowest non-space pixel)
+			let targetRow = -1;
+			for (let row = DISPLAY_HEIGHT - 1 - drop.settled; row >= 0; row--) {
+				if (this.finalGrid[row][x] !== " ") {
+					targetRow = row;
+					break;
+				}
+			}
+
+			// Move drop down
+			drop.y++;
+
+			// Draw falling drop
+			if (drop.y >= 0 && drop.y < DISPLAY_HEIGHT) {
+				if (targetRow >= 0 && drop.y >= targetRow) {
+					// Settle
+					drop.settled = DISPLAY_HEIGHT - targetRow;
+					drop.y = -Math.floor(Math.random() * 5) - 1;
+				} else {
+					// Still falling
+					this.currentGrid[drop.y][x] = "▓";
+				}
+			}
+		}
+
+		return allSettled;
+	}
+
+	private tickFade(): boolean {
+		const state = this.effectState as { positions: [number, number][]; idx: number };
+		const pixelsPerFrame = 15;
+
+		for (let i = 0; i < pixelsPerFrame; i++) {
+			if (state.idx >= state.positions.length) return true;
+			const [row, x] = state.positions[state.idx];
+			this.currentGrid[row][x] = this.finalGrid[row][x];
+			state.idx++;
+		}
+		return false;
+	}
+
+	private tickCrt(): boolean {
+		const state = this.effectState as { expansion: number };
+		const midRow = Math.floor(DISPLAY_HEIGHT / 2);
+
+		this.currentGrid = this.createEmptyGrid();
+
+		// Draw from middle expanding outward
+		const top = midRow - state.expansion;
+		const bottom = midRow + state.expansion;
+
+		for (let row = Math.max(0, top); row <= Math.min(DISPLAY_HEIGHT - 1, bottom); row++) {
+			for (let x = 0; x < WIDTH; x++) {
+				this.currentGrid[row][x] = this.finalGrid[row][x];
+			}
+		}
+
+		state.expansion++;
+		return state.expansion > DISPLAY_HEIGHT;
+	}
+
+	private tickGlitch(): boolean {
+		const state = this.effectState as { phase: number; glitchFrames: number };
+
+		if (state.phase < state.glitchFrames) {
+			// Glitch phase: show corrupted version
+			this.currentGrid = this.finalGrid.map((row) => {
+				const offset = Math.floor(Math.random() * 7) - 3;
+				const glitchRow = [...row];
+
+				// Random horizontal offset
+				if (Math.random() < 0.3) {
+					const shifted = glitchRow.slice(offset).concat(glitchRow.slice(0, offset));
+					return shifted.slice(0, WIDTH);
+				}
+
+				// Random vertical swap
+				if (Math.random() < 0.2) {
+					const swapRow = Math.floor(Math.random() * DISPLAY_HEIGHT);
+					return [...this.finalGrid[swapRow]];
+				}
+
+				return glitchRow;
+			});
+			state.phase++;
+			return false;
+		}
+
+		// Final frame: show clean image
+		this.currentGrid = this.finalGrid.map((row) => [...row]);
+		return true;
+	}
+
+	private tickDissolve(): boolean {
+		const state = this.effectState as { positions: [number, number][]; idx: number };
+		const pixelsPerFrame = 20;
+
+		for (let i = 0; i < pixelsPerFrame; i++) {
+			if (state.idx >= state.positions.length) return true;
+			const [row, x] = state.positions[state.idx];
+			this.currentGrid[row][x] = this.finalGrid[row][x];
+			state.idx++;
+		}
+		return false;
+	}
+
+	private updateDisplay(): void {
+		this.gridVersion++;
+	}
+
+	dispose(): void {
+		this.stopAnimation();
+	}
+}

package/src/modes/interactive/components/assistant-message.ts

@@ -0,0 +1,86 @@
+import type { AssistantMessage } from "@oh-my-pi/pi-ai";
+import { Container, Markdown, Spacer, Text } from "@oh-my-pi/pi-tui";
+import { getMarkdownTheme, theme } from "../theme/theme.js";
+
+/**
+ * Component that renders a complete assistant message
+ */
+export class AssistantMessageComponent extends Container {
+	private contentContainer: Container;
+	private hideThinkingBlock: boolean;
+
+	constructor(message?: AssistantMessage, hideThinkingBlock = false) {
+		super();
+
+		this.hideThinkingBlock = hideThinkingBlock;
+
+		// Container for text/thinking content
+		this.contentContainer = new Container();
+		this.addChild(this.contentContainer);
+
+		if (message) {
+			this.updateContent(message);
+		}
+	}
+
+	setHideThinkingBlock(hide: boolean): void {
+		this.hideThinkingBlock = hide;
+	}
+
+	updateContent(message: AssistantMessage): void {
+		// Clear content container
+		this.contentContainer.clear();
+
+		if (
+			message.content.length > 0 &&
+			message.content.some(
+				(c) => (c.type === "text" && c.text.trim()) || (c.type === "thinking" && c.thinking.trim()),
+			)
+		) {
+			this.contentContainer.addChild(new Spacer(1));
+		}
+
+		// Render content in order
+		for (let i = 0; i < message.content.length; i++) {
+			const content = message.content[i];
+			if (content.type === "text" && content.text.trim()) {
+				// Assistant text messages with no background - trim the text
+				// Set paddingY=0 to avoid extra spacing before tool executions
+				this.contentContainer.addChild(new Markdown(content.text.trim(), 1, 0, getMarkdownTheme()));
+			} else if (content.type === "thinking" && content.thinking.trim()) {
+				// Check if there's text content after this thinking block
+				const hasTextAfter = message.content.slice(i + 1).some((c) => c.type === "text" && c.text.trim());
+
+				if (this.hideThinkingBlock) {
+					// Show static "Thinking..." label when hidden
+					this.contentContainer.addChild(new Text(theme.italic(theme.fg("thinkingText", "Thinking...")), 1, 0));
+					if (hasTextAfter) {
+						this.contentContainer.addChild(new Spacer(1));
+					}
+				} else {
+					// Thinking traces in thinkingText color, italic
+					this.contentContainer.addChild(
+						new Markdown(content.thinking.trim(), 1, 0, getMarkdownTheme(), {
+							color: (text: string) => theme.fg("thinkingText", text),
+							italic: true,
+						}),
+					);
+					this.contentContainer.addChild(new Spacer(1));
+				}
+			}
+		}
+
+		// Check if aborted - show after partial content
+		// But only if there are no tool calls (tool execution components will show the error)
+		const hasToolCalls = message.content.some((c) => c.type === "toolCall");
+		if (!hasToolCalls) {
+			if (message.stopReason === "aborted") {
+				this.contentContainer.addChild(new Text(theme.fg("error", "\nAborted"), 1, 0));
+			} else if (message.stopReason === "error") {
+				const errorMsg = message.errorMessage || "Unknown error";
+				this.contentContainer.addChild(new Spacer(1));
+				this.contentContainer.addChild(new Text(theme.fg("error", `Error: ${errorMsg}`), 1, 0));
+			}
+		}
+	}
+}

package/src/modes/interactive/components/bash-execution.ts

@@ -0,0 +1,196 @@
+/**
+ * Component for displaying bash command execution with streaming output.
+ */
+
+import { Container, Loader, Spacer, Text, type TUI } from "@oh-my-pi/pi-tui";
+import stripAnsi from "strip-ansi";
+import {
+	DEFAULT_MAX_BYTES,
+	DEFAULT_MAX_LINES,
+	type TruncationResult,
+	truncateTail,
+} from "../../../core/tools/truncate.js";
+import { theme } from "../theme/theme.js";
+import { DynamicBorder } from "./dynamic-border.js";
+import { truncateToVisualLines } from "./visual-truncate.js";
+
+// Preview line limit when not expanded (matches tool execution behavior)
+const PREVIEW_LINES = 20;
+
+export class BashExecutionComponent extends Container {
+	private command: string;
+	private outputLines: string[] = [];
+	private status: "running" | "complete" | "cancelled" | "error" = "running";
+	private exitCode: number | undefined = undefined;
+	private loader: Loader;
+	private truncationResult?: TruncationResult;
+	private fullOutputPath?: string;
+	private expanded = false;
+	private contentContainer: Container;
+	private ui: TUI;
+
+	constructor(command: string, ui: TUI) {
+		super();
+		this.command = command;
+		this.ui = ui;
+
+		const borderColor = (str: string) => theme.fg("bashMode", str);
+
+		// Add spacer
+		this.addChild(new Spacer(1));
+
+		// Top border
+		this.addChild(new DynamicBorder(borderColor));
+
+		// Content container (holds dynamic content between borders)
+		this.contentContainer = new Container();
+		this.addChild(this.contentContainer);
+
+		// Command header
+		const header = new Text(theme.fg("bashMode", theme.bold(`$ ${command}`)), 1, 0);
+		this.contentContainer.addChild(header);
+
+		// Loader
+		this.loader = new Loader(
+			ui,
+			(spinner) => theme.fg("bashMode", spinner),
+			(text) => theme.fg("muted", text),
+			"Running... (esc to cancel)",
+		);
+		this.contentContainer.addChild(this.loader);
+
+		// Bottom border
+		this.addChild(new DynamicBorder(borderColor));
+	}
+
+	/**
+	 * Set whether the output is expanded (shows full output) or collapsed (preview only).
+	 */
+	setExpanded(expanded: boolean): void {
+		this.expanded = expanded;
+		this.updateDisplay();
+	}
+
+	appendOutput(chunk: string): void {
+		// Strip ANSI codes and normalize line endings
+		// Note: binary data is already sanitized in tui-renderer.ts executeBashCommand
+		const clean = stripAnsi(chunk).replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+
+		// Append to output lines
+		const newLines = clean.split("\n");
+		if (this.outputLines.length > 0 && newLines.length > 0) {
+			// Append first chunk to last line (incomplete line continuation)
+			this.outputLines[this.outputLines.length - 1] += newLines[0];
+			this.outputLines.push(...newLines.slice(1));
+		} else {
+			this.outputLines.push(...newLines);
+		}
+
+		this.updateDisplay();
+	}
+
+	setComplete(
+		exitCode: number | undefined,
+		cancelled: boolean,
+		truncationResult?: TruncationResult,
+		fullOutputPath?: string,
+	): void {
+		this.exitCode = exitCode;
+		this.status = cancelled
+			? "cancelled"
+			: exitCode !== 0 && exitCode !== undefined && exitCode !== null
+				? "error"
+				: "complete";
+		this.truncationResult = truncationResult;
+		this.fullOutputPath = fullOutputPath;
+
+		// Stop loader
+		this.loader.stop();
+
+		this.updateDisplay();
+	}
+
+	private updateDisplay(): void {
+		// Apply truncation for LLM context limits (same limits as bash tool)
+		const fullOutput = this.outputLines.join("\n");
+		const contextTruncation = truncateTail(fullOutput, {
+			maxLines: DEFAULT_MAX_LINES,
+			maxBytes: DEFAULT_MAX_BYTES,
+		});
+
+		// Get the lines to potentially display (after context truncation)
+		const availableLines = contextTruncation.content ? contextTruncation.content.split("\n") : [];
+
+		// Apply preview truncation based on expanded state
+		const previewLogicalLines = availableLines.slice(-PREVIEW_LINES);
+		const hiddenLineCount = availableLines.length - previewLogicalLines.length;
+
+		// Rebuild content container
+		this.contentContainer.clear();
+
+		// Command header
+		const header = new Text(theme.fg("bashMode", theme.bold(`$ ${this.command}`)), 1, 0);
+		this.contentContainer.addChild(header);
+
+		// Output
+		if (availableLines.length > 0) {
+			if (this.expanded) {
+				// Show all lines
+				const displayText = availableLines.map((line) => theme.fg("muted", line)).join("\n");
+				this.contentContainer.addChild(new Text(`\n${displayText}`, 1, 0));
+			} else {
+				// Use shared visual truncation utility
+				const styledOutput = previewLogicalLines.map((line) => theme.fg("muted", line)).join("\n");
+				const { visualLines } = truncateToVisualLines(
+					`\n${styledOutput}`,
+					PREVIEW_LINES,
+					this.ui.terminal.columns,
+					1, // padding
+				);
+				this.contentContainer.addChild({ render: () => visualLines, invalidate: () => {} });
+			}
+		}
+
+		// Loader or status
+		if (this.status === "running") {
+			this.contentContainer.addChild(this.loader);
+		} else {
+			const statusParts: string[] = [];
+
+			// Show how many lines are hidden (collapsed preview)
+			if (hiddenLineCount > 0) {
+				statusParts.push(theme.fg("dim", `... ${hiddenLineCount} more lines (ctrl+o to expand)`));
+			}
+
+			if (this.status === "cancelled") {
+				statusParts.push(theme.fg("warning", "(cancelled)"));
+			} else if (this.status === "error") {
+				statusParts.push(theme.fg("error", `(exit ${this.exitCode})`));
+			}
+
+			// Add truncation warning (context truncation, not preview truncation)
+			const wasTruncated = this.truncationResult?.truncated || contextTruncation.truncated;
+			if (wasTruncated && this.fullOutputPath) {
+				statusParts.push(theme.fg("warning", `Output truncated. Full output: ${this.fullOutputPath}`));
+			}
+
+			if (statusParts.length > 0) {
+				this.contentContainer.addChild(new Text(`\n${statusParts.join("\n")}`, 1, 0));
+			}
+		}
+	}
+
+	/**
+	 * Get the raw output for creating BashExecutionMessage.
+	 */
+	getOutput(): string {
+		return this.outputLines.join("\n");
+	}
+
+	/**
+	 * Get the command that was executed.
+	 */
+	getCommand(): string {
+		return this.command;
+	}
+}

package/src/modes/interactive/components/bordered-loader.ts

@@ -0,0 +1,41 @@
+import { CancellableLoader, Container, Spacer, Text, type TUI } from "@oh-my-pi/pi-tui";
+import type { Theme } from "../theme/theme.js";
+import { DynamicBorder } from "./dynamic-border.js";
+
+/** Loader wrapped with borders for hook UI */
+export class BorderedLoader extends Container {
+	private loader: CancellableLoader;
+
+	constructor(tui: TUI, theme: Theme, message: string) {
+		super();
+		const borderColor = (s: string) => theme.fg("border", s);
+		this.addChild(new DynamicBorder(borderColor));
+		this.loader = new CancellableLoader(
+			tui,
+			(s) => theme.fg("accent", s),
+			(s) => theme.fg("muted", s),
+			message,
+		);
+		this.addChild(this.loader);
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(theme.fg("muted", "esc cancel"), 1, 0));
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder(borderColor));
+	}
+
+	get signal(): AbortSignal {
+		return this.loader.signal;
+	}
+
+	set onAbort(fn: (() => void) | undefined) {
+		this.loader.onAbort = fn;
+	}
+
+	handleInput(data: string): void {
+		this.loader.handleInput(data);
+	}
+
+	dispose(): void {
+		this.loader.dispose();
+	}
+}