@prometheus-ai/agent 0.5.0

package/src/modes/components/btw-panel.ts

@@ -0,0 +1,104 @@
+import { type Component, Container, Markdown, Spacer, Text, type TUI } from "@prometheus-ai/tui";
+import { replaceTabs } from "../../tools/render-utils";
+import { getMarkdownTheme, theme } from "../theme/theme";
+import { DynamicBorder } from "./dynamic-border";
+
+type BtwPanelState = "running" | "complete" | "aborted" | "error";
+
+interface BtwPanelComponentOptions {
+	question: string;
+	tui: TUI;
+}
+
+export class BtwPanelComponent extends Container {
+	#question: string;
+	#tui: TUI;
+	#state: BtwPanelState = "running";
+	#answer = "";
+	#errorMessage: string | undefined;
+	#closed = false;
+
+	constructor(options: BtwPanelComponentOptions) {
+		super();
+		this.#question = options.question;
+		this.#tui = options.tui;
+		this.#rebuild();
+	}
+
+	appendText(delta: string): void {
+		if (!delta || this.#closed) return;
+		this.#answer += delta;
+		this.#rebuild();
+	}
+
+	setAnswer(text: string): void {
+		if (this.#closed) return;
+		this.#answer = text;
+		this.#rebuild();
+	}
+
+	markComplete(): void {
+		if (this.#closed) return;
+		this.#state = "complete";
+		this.#errorMessage = undefined;
+		this.#rebuild();
+	}
+
+	markAborted(): void {
+		if (this.#closed) return;
+		this.#state = "aborted";
+		this.#errorMessage = undefined;
+		this.#rebuild();
+	}
+
+	markError(message: string): void {
+		if (this.#closed) return;
+		this.#state = "error";
+		this.#errorMessage = message;
+		this.#rebuild();
+	}
+
+	close(): void {
+		this.#closed = true;
+	}
+
+	#rebuild(): void {
+		this.clear();
+		this.addChild(new DynamicBorder(str => theme.fg("dim", str)));
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(theme.fg("accent", replaceTabs(this.#question)), 1, 0));
+		this.addChild(new Spacer(1));
+		this.addChild(this.#contentComponent());
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(this.#footerLine(), 1, 0));
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder(str => theme.fg("dim", str)));
+		this.#tui.requestRender();
+	}
+
+	#footerLine(): string {
+		switch (this.#state) {
+			case "running":
+				return theme.fg("muted", "Esc cancel /btw");
+			case "complete":
+				return theme.fg("muted", "Esc dismiss");
+			case "aborted":
+				return theme.fg("warning", `${theme.status.warning} Cancelled · Esc dismiss`);
+			case "error":
+				return theme.fg("error", `${theme.status.error} Error · Esc dismiss`);
+		}
+	}
+
+	#contentComponent(): Component {
+		if (this.#state === "error") {
+			return new Text(theme.fg("error", replaceTabs(this.#errorMessage ?? "Unknown error")), 1, 0);
+		}
+		const text = replaceTabs(this.#answer).trim();
+		if (!text) {
+			const waiting =
+				this.#state === "running" ? `${theme.status.pending} Waiting for response…` : "No text returned.";
+			return new Text(theme.fg("dim", waiting), 1, 0);
+		}
+		return new Markdown(text, 1, 0, getMarkdownTheme());
+	}
+}

package/src/modes/components/compaction-summary-message.ts

@@ -0,0 +1,51 @@
+import { Box, Markdown, Spacer, Text } from "@prometheus-ai/tui";
+import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import type { CompactionSummaryMessage } from "../../session/messages";
+
+/**
+ * Component that renders a compaction message with collapsed/expanded state.
+ * Uses same background color as hook messages for visual consistency.
+ */
+export class CompactionSummaryMessageComponent extends Box {
+	#expanded = false;
+
+	constructor(private readonly message: CompactionSummaryMessage) {
+		super(1, 1, t => theme.bg("customMessageBg", t));
+		this.#updateDisplay();
+	}
+
+	setExpanded(expanded: boolean): void {
+		this.#expanded = expanded;
+		this.#updateDisplay();
+	}
+
+	override invalidate(): void {
+		super.invalidate();
+		this.#updateDisplay();
+	}
+
+	#updateDisplay(): void {
+		this.clear();
+
+		const tokenStr = this.message.tokensBefore.toLocaleString();
+		const label = theme.fg("customMessageLabel", theme.bold("[compaction]"));
+		this.addChild(new Text(label, 0, 0));
+		this.addChild(new Spacer(1));
+
+		if (this.#expanded) {
+			const header = `**Compacted from ${tokenStr} tokens**\n\n`;
+			this.addChild(
+				new Markdown(header + this.message.summary, 0, 0, getMarkdownTheme(), {
+					color: (text: string) => theme.fg("customMessageText", text),
+				}),
+			);
+		} else {
+			this.addChild(
+				new Text(theme.fg("customMessageText", `Compacted from ${tokenStr} tokens (ctrl+o to expand)`), 0, 0),
+			);
+			if (this.message.shortSummary) {
+				this.addChild(new Text(theme.fg("customMessageText", this.message.shortSummary), 0, 1));
+			}
+		}
+	}
+}

package/src/modes/components/copy-selector.ts

@@ -0,0 +1,249 @@
+import { type Component, matchesKey, padding, Text, truncateToWidth, visibleWidth } from "@prometheus-ai/tui";
+import { replaceTabs } from "../../tools/render-utils";
+import { highlightCode, theme } from "../theme/theme";
+import type { CopyTarget } from "../utils/copy-targets";
+import {
+	matchesSelectCancel,
+	matchesSelectDown,
+	matchesSelectPageDown,
+	matchesSelectPageUp,
+	matchesSelectUp,
+} from "../utils/keybinding-matchers";
+import { keyHint, rawKeyHint } from "./keybinding-hints";
+
+/** Minimum rows reserved for the tree even on short terminals. */
+const MIN_TREE_ROWS = 3;
+/** Fixed chrome rows: top border, two dividers, footer, bottom border. */
+const CHROME_ROWS = 5;
+
+export interface CopySelectorCallbacks {
+	/** A copy target was chosen — copy its `content`. */
+	onPick: (target: CopyTarget) => void;
+	/** The picker was dismissed. */
+	onCancel: () => void;
+}
+
+interface FlatNode {
+	target: CopyTarget;
+	depth: number;
+	/** Last among its siblings (drives └─ vs ├─). */
+	isLast: boolean;
+	/** Per-ancestor flag: does ancestor at that level have a following sibling? */
+	ancestorHasNext: boolean[];
+}
+
+/** Pad or truncate a (possibly ANSI-styled) string to exactly `width` columns. */
+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;
+}
+
+function paint(s: string): string {
+	return theme.fg("border", s);
+}
+
+function topBorder(width: number, title: string): string {
+	const box = theme.boxSharp;
+	const inner = Math.max(0, width - 2);
+	if (!title) return paint(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 (
+		paint(box.topLeft + box.horizontal) +
+		theme.bold(theme.fg("accent", shown)) +
+		paint(box.horizontal.repeat(fillWidth) + box.topRight)
+	);
+}
+
+function divider(width: number): string {
+	const box = theme.boxSharp;
+	return paint(box.teeRight + box.horizontal.repeat(Math.max(0, width - 2)) + box.teeLeft);
+}
+
+function bottomBorder(width: number): string {
+	const box = theme.boxSharp;
+	return paint(box.bottomLeft + box.horizontal.repeat(Math.max(0, width - 2)) + box.bottomRight);
+}
+
+/** Wrap pre-styled content in vertical borders with single-column insets. */
+function row(content: string, width: number): string {
+	const box = theme.boxSharp;
+	return `${paint(box.vertical)} ${fit(content, Math.max(0, width - 4))} ${paint(box.vertical)}`;
+}
+
+/** Render one tree connector as exactly three cells (e.g. "├─ ", "└─ ", "|--"). */
+function connectorCells(symbol: string): string {
+	const chars = Array.from(symbol);
+	return (chars[0] ?? " ") + (chars[1] ?? theme.tree.horizontal) + (chars[2] ?? " ");
+}
+
+/** The 3-cell ancestor gutter: a vertical guide when the ancestor continues. */
+function gutterCells(hasNext: boolean): string {
+	return `${hasNext ? theme.tree.vertical : " "}  `;
+}
+
+/**
+ * Fullscreen `/copy` picker rendered as a `/tree`-style tree inside one
+ * outlined box: a title, the tree of copy targets (recent assistant messages
+ * with their code blocks nested beneath), a live preview of the highlighted
+ * node, and a keybinding footer. Every node copies its `content` on Enter.
+ */
+export class CopySelectorComponent implements Component {
+	#roots: CopyTarget[];
+	#cursorId: string;
+	#treeRows = MIN_TREE_ROWS;
+	// Reused across renders to wrap preview content to the pane width.
+	#previewText = new Text("", 0, 0);
+
+	constructor(
+		roots: CopyTarget[],
+		private readonly callbacks: CopySelectorCallbacks,
+	) {
+		this.#roots = roots;
+		this.#cursorId = roots[0]?.id ?? "";
+	}
+
+	invalidate(): void {}
+
+	#flatten(): FlatNode[] {
+		const out: FlatNode[] = [];
+		const walk = (nodes: CopyTarget[], depth: number, ancestorHasNext: boolean[]) => {
+			nodes.forEach((target, i) => {
+				const isLast = i === nodes.length - 1;
+				out.push({ target, depth, isLast, ancestorHasNext });
+				if (target.children?.length) walk(target.children, depth + 1, [...ancestorHasNext, !isLast]);
+			});
+		};
+		walk(this.#roots, 0, []);
+		return out;
+	}
+
+	handleInput(keyData: string): void {
+		if (matchesSelectCancel(keyData)) {
+			this.callbacks.onCancel();
+			return;
+		}
+
+		const flat = this.#flatten();
+		if (flat.length === 0) return;
+		const idx = Math.max(
+			0,
+			flat.findIndex(n => n.target.id === this.#cursorId),
+		);
+
+		if (matchesSelectUp(keyData)) {
+			this.#cursorId = flat[idx === 0 ? flat.length - 1 : idx - 1]!.target.id;
+		} else if (matchesSelectDown(keyData)) {
+			this.#cursorId = flat[idx === flat.length - 1 ? 0 : idx + 1]!.target.id;
+		} else if (matchesSelectPageUp(keyData)) {
+			this.#cursorId = flat[Math.max(0, idx - this.#treeRows)]!.target.id;
+		} else if (matchesSelectPageDown(keyData)) {
+			this.#cursorId = flat[Math.min(flat.length - 1, idx + this.#treeRows)]!.target.id;
+		} else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
+			const target = flat[idx]!.target;
+			if (target.content !== undefined) this.callbacks.onPick(target);
+		}
+	}
+
+	#renderTree(width: number, flat: FlatNode[], cursorIdx: number, rows: number): string[] {
+		const inner = Math.max(0, width - 4);
+		const start = Math.max(0, Math.min(cursorIdx - Math.floor(rows / 2), Math.max(0, flat.length - rows)));
+		const out: string[] = [];
+		for (let r = 0; r < rows; r++) {
+			const i = start + r;
+			const node = flat[i];
+			if (!node) {
+				out.push(row("", width));
+				continue;
+			}
+			const target = node.target;
+			const isSelected = i === cursorIdx;
+
+			let prefix = "";
+			for (let l = 0; l < node.depth - 1; l++) prefix += gutterCells(node.ancestorHasNext[l]!);
+			if (node.depth > 0) prefix += connectorCells(node.isLast ? theme.tree.last : theme.tree.branch);
+
+			const cursor = isSelected ? "❯ " : "  ";
+			const hint = target.hint ?? "";
+			const hintWidth = hint ? visibleWidth(hint) + 2 : 0;
+			const used = visibleWidth(cursor) + visibleWidth(prefix);
+			const labelPlain = truncateToWidth(target.label, Math.max(1, inner - used - hintWidth));
+			const left = isSelected
+				? theme.fg("accent", cursor) + theme.fg("dim", prefix) + theme.bold(theme.fg("accent", labelPlain))
+				: cursor + theme.fg("dim", prefix) + labelPlain;
+			const gap = Math.max(1, inner - used - visibleWidth(labelPlain) - visibleWidth(hint));
+			out.push(row(left + padding(gap) + (hint ? theme.fg("dim", hint) : ""), width));
+		}
+		return out;
+	}
+
+	#renderPreview(width: number, target: CopyTarget | undefined, rows: number): string[] {
+		const out: string[] = [];
+		const hint = target?.hint;
+		out.push(row(theme.fg("dim", `Preview${hint ? ` · ${hint}` : ""}`), width));
+
+		const contentRows = rows - 1;
+		if (!target || contentRows <= 0) {
+			while (out.length < rows) out.push(row("", width));
+			return out;
+		}
+
+		// Code/command previews are syntax-highlighted; everything else is shown
+		// as plain text. Both are wrapped (not hard-truncated) to the pane width.
+		const isCode = target.language !== undefined;
+		const source = isCode
+			? highlightCode(replaceTabs(target.preview), target.language).join("\n")
+			: replaceTabs(target.preview);
+		this.#previewText.setText(source);
+		const wrapped = this.#previewText.render(Math.max(1, width - 4));
+
+		const hasMore = wrapped.length > contentRows;
+		const visibleCount = hasMore ? contentRows - 1 : Math.min(wrapped.length, contentRows);
+		for (let k = 0; k < contentRows; k++) {
+			if (k < visibleCount) {
+				out.push(row(isCode ? wrapped[k]! : theme.fg("muted", wrapped[k]!), width));
+			} else if (k === visibleCount && hasMore) {
+				out.push(row(theme.fg("dim", `… ${wrapped.length - visibleCount} more lines`), width));
+			} else {
+				out.push(row("", width));
+			}
+		}
+		return out;
+	}
+
+	render(width: number): string[] {
+		const height = process.stdout.rows || 40;
+		const flat = this.#flatten();
+		const cursorIdx = Math.max(
+			0,
+			flat.findIndex(n => n.target.id === this.#cursorId),
+		);
+		const selected = flat[cursorIdx]?.target;
+
+		const available = Math.max(MIN_TREE_ROWS + 1, height - CHROME_ROWS);
+		const treeRows = Math.max(1, Math.min(flat.length, Math.floor(available / 2)));
+		this.#treeRows = treeRows;
+		const previewRows = Math.max(1, available - treeRows);
+
+		const footer = [
+			rawKeyHint("↑↓", "move"),
+			keyHint("tui.select.confirm", "copy"),
+			keyHint("tui.select.cancel", "quit"),
+		].join(theme.fg("dim", " · "));
+
+		return [
+			topBorder(width, "Copy to clipboard"),
+			...this.#renderTree(width, flat, cursorIdx, treeRows),
+			divider(width),
+			...this.#renderPreview(width, selected, previewRows),
+			divider(width),
+			row(footer, width),
+			bottomBorder(width),
+		];
+	}
+}

package/src/modes/components/countdown-timer.ts

@@ -0,0 +1,75 @@
+/**
+ * Reusable countdown timer for dialog components.
+ */
+import type { TUI } from "@prometheus-ai/tui";
+
+export class CountdownTimer {
+	#intervalId: NodeJS.Timeout | undefined;
+	#expireTimeoutId: NodeJS.Timeout | undefined;
+	#remainingSeconds: number;
+	#deadlineMs = 0;
+	readonly #initialMs: number;
+
+	constructor(
+		timeoutMs: number,
+		private tui: TUI | undefined,
+		private onTick: (seconds: number) => void,
+		private onExpire: () => void,
+	) {
+		this.#initialMs = timeoutMs;
+		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;
+		}
+	}
+}