@openeryc/pi-coding-agent 0.75.26 → 0.75.27

package/examples/rpc-extension-ui.ts

@@ -1,632 +0,0 @@
-/**
- * RPC Extension UI Example (TUI)
- *
- * A lightweight TUI chat client that spawns the agent in RPC mode.
- * Demonstrates how to build a custom UI on top of the RPC protocol,
- * including handling extension UI requests (select, confirm, input, editor).
- *
- * Usage: npx tsx examples/rpc-extension-ui.ts
- *
- * Slash commands:
- *   /select  - demo select dialog
- *   /confirm - demo confirm dialog
- *   /input   - demo input dialog
- *   /editor  - demo editor dialog
- */
-
-import { spawn } from "node:child_process";
-import { dirname, join } from "node:path";
-import * as readline from "node:readline";
-import { fileURLToPath } from "node:url";
-import { type Component, Container, Input, matchesKey, ProcessTerminal, SelectList, TUI } from "@openeryc/pi-tui";
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
-// ============================================================================
-// ANSI helpers
-// ============================================================================
-
-const GREEN = "\x1b[32m";
-const YELLOW = "\x1b[33m";
-const BLUE = "\x1b[34m";
-const MAGENTA = "\x1b[35m";
-const RED = "\x1b[31m";
-const DIM = "\x1b[2m";
-const BOLD = "\x1b[1m";
-const RESET = "\x1b[0m";
-
-// ============================================================================
-// Extension UI request type (subset of rpc-types.ts)
-// ============================================================================
-
-interface ExtensionUIRequest {
-	type: "extension_ui_request";
-	id: string;
-	method: string;
-	title?: string;
-	options?: string[];
-	message?: string;
-	placeholder?: string;
-	prefill?: string;
-	notifyType?: "info" | "warning" | "error";
-	statusKey?: string;
-	statusText?: string;
-	widgetKey?: string;
-	widgetLines?: string[];
-	text?: string;
-}
-
-// ============================================================================
-// Output log: accumulates styled lines, renders the tail that fits
-// ============================================================================
-
-class OutputLog implements Component {
-	private lines: string[] = [];
-	private maxLines = 1000;
-	private visibleLines = 0;
-
-	setVisibleLines(n: number): void {
-		this.visibleLines = n;
-	}
-
-	append(line: string): void {
-		this.lines.push(line);
-		if (this.lines.length > this.maxLines) {
-			this.lines = this.lines.slice(-this.maxLines);
-		}
-	}
-
-	appendRaw(text: string): void {
-		if (this.lines.length === 0) {
-			this.lines.push(text);
-		} else {
-			this.lines[this.lines.length - 1] += text;
-		}
-	}
-
-	invalidate(): void {}
-
-	render(width: number): string[] {
-		if (this.lines.length === 0) return [""];
-		const n = this.visibleLines > 0 ? this.visibleLines : this.lines.length;
-		return this.lines.slice(-n).map((l) => l.slice(0, width));
-	}
-}
-
-// ============================================================================
-// Loading indicator: "Agent: Working." -> ".." -> "..." -> "."
-// ============================================================================
-
-class LoadingIndicator implements Component {
-	private dots = 1;
-	private intervalId: NodeJS.Timeout | null = null;
-	private tui: TUI | null = null;
-
-	start(tui: TUI): void {
-		this.tui = tui;
-		this.dots = 1;
-		this.intervalId = setInterval(() => {
-			this.dots = (this.dots % 3) + 1;
-			this.tui?.requestRender();
-		}, 400);
-	}
-
-	stop(): void {
-		if (this.intervalId) {
-			clearInterval(this.intervalId);
-			this.intervalId = null;
-		}
-	}
-
-	invalidate(): void {}
-
-	render(_width: number): string[] {
-		return [`${BLUE}${BOLD}Agent:${RESET} ${DIM}Working${".".repeat(this.dots)}${RESET}`];
-	}
-}
-
-// ============================================================================
-// Prompt input: label + single-line input
-// ============================================================================
-
-class PromptInput implements Component {
-	readonly input: Input;
-	onCtrlD?: () => void;
-
-	constructor() {
-		this.input = new Input();
-	}
-
-	handleInput(data: string): void {
-		if (matchesKey(data, "ctrl+d")) {
-			this.onCtrlD?.();
-			return;
-		}
-		this.input.handleInput(data);
-	}
-
-	invalidate(): void {
-		this.input.invalidate();
-	}
-
-	render(width: number): string[] {
-		return [`${GREEN}${BOLD}You:${RESET}`, ...this.input.render(width)];
-	}
-}
-
-// ============================================================================
-// Dialog components: replace the prompt input during interactive requests
-// ============================================================================
-
-class SelectDialog implements Component {
-	private list: SelectList;
-	private title: string;
-	onSelect?: (value: string) => void;
-	onCancel?: () => void;
-
-	constructor(title: string, options: string[]) {
-		this.title = title;
-		const items = options.map((o) => ({ value: o, label: o }));
-		this.list = new SelectList(items, Math.min(items.length, 8), {
-			selectedPrefix: (t) => `${MAGENTA}${t}${RESET}`,
-			selectedText: (t) => `${MAGENTA}${t}${RESET}`,
-			description: (t) => `${DIM}${t}${RESET}`,
-			scrollInfo: (t) => `${DIM}${t}${RESET}`,
-			noMatch: (t) => `${YELLOW}${t}${RESET}`,
-		});
-		this.list.onSelect = (item) => this.onSelect?.(item.value);
-		this.list.onCancel = () => this.onCancel?.();
-	}
-
-	handleInput(data: string): void {
-		this.list.handleInput(data);
-	}
-
-	invalidate(): void {
-		this.list.invalidate();
-	}
-
-	render(width: number): string[] {
-		return [
-			`${MAGENTA}${BOLD}${this.title}${RESET}`,
-			...this.list.render(width),
-			`${DIM}Up/Down, Enter to select, Esc to cancel${RESET}`,
-		];
-	}
-}
-
-class InputDialog implements Component {
-	private dialogInput: Input;
-	private title: string;
-	onCtrlD?: () => void;
-
-	constructor(title: string, prefill?: string) {
-		this.title = title;
-		this.dialogInput = new Input();
-		if (prefill) this.dialogInput.setValue(prefill);
-	}
-
-	set onSubmit(fn: ((value: string) => void) | undefined) {
-		this.dialogInput.onSubmit = fn;
-	}
-
-	set onEscape(fn: (() => void) | undefined) {
-		this.dialogInput.onEscape = fn;
-	}
-
-	get inputComponent(): Input {
-		return this.dialogInput;
-	}
-
-	handleInput(data: string): void {
-		if (matchesKey(data, "ctrl+d")) {
-			this.onCtrlD?.();
-			return;
-		}
-		this.dialogInput.handleInput(data);
-	}
-
-	invalidate(): void {
-		this.dialogInput.invalidate();
-	}
-
-	render(width: number): string[] {
-		return [
-			`${MAGENTA}${BOLD}${this.title}${RESET}`,
-			...this.dialogInput.render(width),
-			`${DIM}Enter to submit, Esc to cancel${RESET}`,
-		];
-	}
-}
-
-// ============================================================================
-// Main
-// ============================================================================
-
-async function main() {
-	const extensionPath = join(__dirname, "extensions/rpc-demo.ts");
-	const cliPath = join(__dirname, "../dist/cli.js");
-
-	const agent = spawn(
-		"node",
-		[cliPath, "--mode", "rpc", "--no-session", "--no-extension", "--extension", extensionPath],
-		{ stdio: ["pipe", "pipe", "pipe"] },
-	);
-
-	let stderr = "";
-	agent.stderr?.on("data", (data: Buffer) => {
-		stderr += data.toString();
-	});
-
-	await new Promise((resolve) => setTimeout(resolve, 500));
-	if (agent.exitCode !== null) {
-		console.error(`Agent exited immediately. Stderr:\n${stderr}`);
-		process.exit(1);
-	}
-
-	// -- TUI setup --
-
-	const terminal = new ProcessTerminal();
-	const tui = new TUI(terminal);
-
-	const outputLog = new OutputLog();
-	const loadingIndicator = new LoadingIndicator();
-	const promptInput = new PromptInput();
-
-	const root = new Container();
-	root.addChild(outputLog);
-	root.addChild(promptInput);
-
-	tui.addChild(root);
-	tui.setFocus(promptInput.input);
-
-	// -- Agent communication --
-
-	function send(obj: Record<string, unknown>): void {
-		agent.stdin!.write(`${JSON.stringify(obj)}\n`);
-	}
-
-	let isStreaming = false;
-	let hasTextOutput = false;
-
-	function exit(): void {
-		tui.stop();
-		agent.kill("SIGTERM");
-		process.exit(0);
-	}
-
-	// -- Bottom area management --
-	// The bottom of the screen is either the prompt input or a dialog.
-	// These helpers swap between them.
-
-	let activeDialog: Component | null = null;
-
-	function setBottomComponent(component: Component): void {
-		root.clear();
-		root.addChild(outputLog);
-		if (isStreaming) root.addChild(loadingIndicator);
-		root.addChild(component);
-		tui.setFocus(component);
-		tui.requestRender();
-	}
-
-	function showPrompt(): void {
-		activeDialog = null;
-		setBottomComponent(promptInput);
-		tui.setFocus(promptInput.input);
-	}
-
-	function showDialog(dialog: Component): void {
-		activeDialog = dialog;
-		setBottomComponent(dialog);
-	}
-
-	function showLoading(): void {
-		if (!isStreaming) {
-			isStreaming = true;
-			hasTextOutput = false;
-			root.clear();
-			root.addChild(outputLog);
-			root.addChild(loadingIndicator);
-			root.addChild(activeDialog ?? promptInput);
-			if (!activeDialog) tui.setFocus(promptInput.input);
-			loadingIndicator.start(tui);
-			tui.requestRender();
-		}
-	}
-
-	function hideLoading(): void {
-		loadingIndicator.stop();
-		root.clear();
-		root.addChild(outputLog);
-		root.addChild(activeDialog ?? promptInput);
-		if (!activeDialog) tui.setFocus(promptInput.input);
-		tui.requestRender();
-	}
-
-	// -- Extension UI dialog handling --
-
-	function showSelectDialog(title: string, options: string[], onDone: (value: string | undefined) => void): void {
-		const dialog = new SelectDialog(title, options);
-		dialog.onSelect = (value) => {
-			showPrompt();
-			onDone(value);
-		};
-		dialog.onCancel = () => {
-			showPrompt();
-			onDone(undefined);
-		};
-		showDialog(dialog);
-	}
-
-	function showInputDialog(title: string, prefill?: string, onDone?: (value: string | undefined) => void): void {
-		const dialog = new InputDialog(title, prefill);
-		dialog.onSubmit = (value) => {
-			showPrompt();
-			onDone?.(value.trim() || undefined);
-		};
-		dialog.onEscape = () => {
-			showPrompt();
-			onDone?.(undefined);
-		};
-		dialog.onCtrlD = exit;
-		showDialog(dialog);
-		tui.setFocus(dialog.inputComponent);
-	}
-
-	function handleExtensionUI(req: ExtensionUIRequest): void {
-		const { id, method } = req;
-
-		switch (method) {
-			// Dialog methods: replace prompt with interactive component
-			case "select": {
-				showSelectDialog(req.title ?? "Select", req.options ?? [], (value) => {
-					if (value !== undefined) {
-						send({ type: "extension_ui_response", id, value });
-					} else {
-						send({ type: "extension_ui_response", id, cancelled: true });
-					}
-				});
-				break;
-			}
-
-			case "confirm": {
-				const title = req.message ? `${req.title}: ${req.message}` : (req.title ?? "Confirm");
-				showSelectDialog(title, ["Yes", "No"], (value) => {
-					send({ type: "extension_ui_response", id, confirmed: value === "Yes" });
-				});
-				break;
-			}
-
-			case "input": {
-				const title = req.placeholder ? `${req.title} (${req.placeholder})` : (req.title ?? "Input");
-				showInputDialog(title, undefined, (value) => {
-					if (value !== undefined) {
-						send({ type: "extension_ui_response", id, value });
-					} else {
-						send({ type: "extension_ui_response", id, cancelled: true });
-					}
-				});
-				break;
-			}
-
-			case "editor": {
-				const prefill = req.prefill?.replace(/\n/g, " ");
-				showInputDialog(req.title ?? "Editor", prefill, (value) => {
-					if (value !== undefined) {
-						send({ type: "extension_ui_response", id, value });
-					} else {
-						send({ type: "extension_ui_response", id, cancelled: true });
-					}
-				});
-				break;
-			}
-
-			// Fire-and-forget methods: display as notification
-			case "notify": {
-				const notifyType = (req.notifyType as string) ?? "info";
-				const color = notifyType === "error" ? RED : notifyType === "warning" ? YELLOW : MAGENTA;
-				outputLog.append(`${color}${BOLD}Notification:${RESET} ${req.message}`);
-				tui.requestRender();
-				break;
-			}
-
-			case "setStatus":
-				outputLog.append(
-					`${MAGENTA}${BOLD}Notification:${RESET} ${DIM}[status: ${req.statusKey}]${RESET} ${req.statusText ?? "(cleared)"}`,
-				);
-				tui.requestRender();
-				break;
-
-			case "setWidget": {
-				const lines = req.widgetLines;
-				if (lines && lines.length > 0) {
-					outputLog.append(`${MAGENTA}${BOLD}Notification:${RESET} ${DIM}[widget: ${req.widgetKey}]${RESET}`);
-					for (const wl of lines) {
-						outputLog.append(`  ${DIM}${wl}${RESET}`);
-					}
-					tui.requestRender();
-				}
-				break;
-			}
-
-			case "set_editor_text":
-				promptInput.input.setValue((req.text as string) ?? "");
-				tui.requestRender();
-				break;
-		}
-	}
-
-	// -- Slash commands (local, not sent to agent) --
-
-	function handleSlashCommand(cmd: string): boolean {
-		switch (cmd) {
-			case "/select":
-				showSelectDialog("Pick a color", ["Red", "Green", "Blue", "Yellow"], (value) => {
-					if (value) {
-						outputLog.append(`${MAGENTA}${BOLD}Notification:${RESET} You picked: ${value}`);
-					} else {
-						outputLog.append(`${MAGENTA}${BOLD}Notification:${RESET} Selection cancelled`);
-					}
-					tui.requestRender();
-				});
-				return true;
-
-			case "/confirm":
-				showSelectDialog("Are you sure?", ["Yes", "No"], (value) => {
-					const confirmed = value === "Yes";
-					outputLog.append(`${MAGENTA}${BOLD}Notification:${RESET} Confirmed: ${confirmed}`);
-					tui.requestRender();
-				});
-				return true;
-
-			case "/input":
-				showInputDialog("Enter your name", undefined, (value) => {
-					if (value) {
-						outputLog.append(`${MAGENTA}${BOLD}Notification:${RESET} You entered: ${value}`);
-					} else {
-						outputLog.append(`${MAGENTA}${BOLD}Notification:${RESET} Input cancelled`);
-					}
-					tui.requestRender();
-				});
-				return true;
-
-			case "/editor":
-				showInputDialog("Edit text", "Hello, world!", (value) => {
-					if (value) {
-						outputLog.append(`${MAGENTA}${BOLD}Notification:${RESET} Submitted: ${value}`);
-					} else {
-						outputLog.append(`${MAGENTA}${BOLD}Notification:${RESET} Editor cancelled`);
-					}
-					tui.requestRender();
-				});
-				return true;
-
-			default:
-				return false;
-		}
-	}
-
-	// -- Process agent stdout --
-
-	const stdoutRl = readline.createInterface({ input: agent.stdout!, terminal: false });
-
-	stdoutRl.on("line", (line) => {
-		let data: Record<string, unknown>;
-		try {
-			data = JSON.parse(line);
-		} catch {
-			return;
-		}
-
-		if (data.type === "response" && !data.success) {
-			outputLog.append(`${RED}[error]${RESET} ${data.command}: ${data.error}`);
-			tui.requestRender();
-			return;
-		}
-
-		if (data.type === "agent_start") {
-			showLoading();
-			return;
-		}
-
-		if (data.type === "extension_ui_request") {
-			handleExtensionUI(data as unknown as ExtensionUIRequest);
-			return;
-		}
-
-		if (data.type === "message_update") {
-			const evt = data.assistantMessageEvent as Record<string, unknown> | undefined;
-			if (evt?.type === "text_delta") {
-				if (!hasTextOutput) {
-					hasTextOutput = true;
-					outputLog.append("");
-					outputLog.append(`${BLUE}${BOLD}Agent:${RESET}`);
-				}
-				const delta = evt.delta as string;
-				const parts = delta.split("\n");
-				for (let i = 0; i < parts.length; i++) {
-					if (i > 0) outputLog.append("");
-					if (parts[i]) outputLog.appendRaw(parts[i]);
-				}
-				tui.requestRender();
-			}
-			return;
-		}
-
-		if (data.type === "tool_execution_start") {
-			outputLog.append(`${DIM}[tool: ${data.toolName}]${RESET}`);
-			tui.requestRender();
-			return;
-		}
-
-		if (data.type === "tool_execution_end") {
-			const result = JSON.stringify(data.result).slice(0, 120);
-			outputLog.append(`${DIM}[result: ${result}...]${RESET}`);
-			tui.requestRender();
-			return;
-		}
-
-		if (data.type === "agent_end") {
-			isStreaming = false;
-			hideLoading();
-			outputLog.append("");
-			tui.requestRender();
-			return;
-		}
-	});
-
-	// -- User input --
-
-	promptInput.input.onSubmit = (value) => {
-		const trimmed = value.trim();
-		if (!trimmed) return;
-
-		promptInput.input.setValue("");
-
-		if (handleSlashCommand(trimmed)) {
-			outputLog.append(`${GREEN}${BOLD}You:${RESET} ${trimmed}`);
-			tui.requestRender();
-			return;
-		}
-
-		outputLog.append(`${GREEN}${BOLD}You:${RESET} ${trimmed}`);
-		send({ type: "prompt", message: trimmed });
-		tui.requestRender();
-	};
-
-	promptInput.onCtrlD = exit;
-
-	promptInput.input.onEscape = () => {
-		if (isStreaming) {
-			send({ type: "abort" });
-			outputLog.append(`${YELLOW}[aborted]${RESET}`);
-			tui.requestRender();
-		} else {
-			exit();
-		}
-	};
-
-	// -- Agent exit --
-
-	agent.on("exit", (code) => {
-		tui.stop();
-		if (stderr) console.error(stderr);
-		console.log(`Agent exited with code ${code}`);
-		process.exit(code ?? 0);
-	});
-
-	// -- Start --
-
-	outputLog.append(`${BOLD}RPC Chat${RESET}`);
-	outputLog.append(`${DIM}Type a message and press Enter. Esc to abort or exit. Ctrl+D to quit.${RESET}`);
-	outputLog.append(`${DIM}Slash commands: /select /confirm /input /editor${RESET}`);
-	outputLog.append("");
-
-	tui.start();
-}
-
-main().catch((err) => {
-	console.error(err);
-	process.exit(1);
-});