@wahack/pi-coding-agent 15.11.0

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

@@ -0,0 +1,104 @@
+import { type Component, Container, Markdown, Spacer, Text, type TUI } from './stubs/tui/index.ts';
+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/chat-block.ts

@@ -0,0 +1,111 @@
+import { Container } from './stubs/tui/index.ts';
+
+/**
+ * Capabilities a mounted {@link ChatBlock} may use against its host transcript.
+ * Kept minimal so blocks never reach into the full TUI/InteractiveMode surface.
+ */
+export interface ChatBlockHost {
+	/** Schedule a repaint of the transcript. */
+	requestRender(): void;
+}
+
+/**
+ * Lifecycle-aware transcript block — the "return a block, let the host mount it"
+ * primitive, modelled on React/Svelte component lifecycles.
+ *
+ * Producers build and return a `ChatBlock` instead of poking `chatContainer` and
+ * `ui.requestRender()` directly. The host (`ctx.present`) appends it and calls
+ * {@link mount}, which runs {@link onMount}; effects started there register
+ * teardown via {@link onCleanup}. The block repaints through {@link requestRender}
+ * — never touching the TUI — and tears down exactly once on {@link finish}
+ * (self-complete: stop the animation, keep the final frame in the transcript) or
+ * {@link dispose} (host discards it, e.g. a transcript reset).
+ *
+ * While mounted and unfinished a block reports `isTranscriptBlockFinalized() ===
+ * false` so {@link "../components/transcript-container".TranscriptContainer}
+ * keeps it in the live, repaintable region on ED3-risk terminals; after
+ * `finish()`/`dispose()` it reports `true` and freezes at its final content.
+ */
+export abstract class ChatBlock extends Container {
+	#host: ChatBlockHost | undefined;
+	#cleanups: Array<() => void> = [];
+	#active = false;
+	#disposed = false;
+
+	/**
+	 * Run setup after the block is in the transcript: start timers/subscriptions
+	 * and register their teardown with {@link onCleanup}. Default: no-op (a block
+	 * whose content is fixed at construction needs no mount work).
+	 */
+	protected onMount(): void {}
+
+	/**
+	 * Register a teardown to run on {@link finish}/{@link dispose}, à la a
+	 * `useEffect` cleanup. If the block is already disposed the cleanup runs
+	 * immediately so callers never leak.
+	 */
+	protected onCleanup(cleanup: () => void): void {
+		if (this.#disposed) {
+			cleanup();
+			return;
+		}
+		this.#cleanups.push(cleanup);
+	}
+
+	/** Ask the host to repaint. No-op before mount or after dispose. */
+	protected requestRender(): void {
+		this.#host?.requestRender();
+	}
+
+	/** True between {@link mount} and {@link finish}/{@link dispose}. */
+	protected get active(): boolean {
+		return this.#active;
+	}
+
+	/**
+	 * Host-only: attach the host and run {@link onMount}. Idempotent — a second
+	 * call (e.g. a transcript rebuild that re-presents the same instance) is a
+	 * no-op.
+	 */
+	mount(host: ChatBlockHost): void {
+		if (this.#host || this.#disposed) return;
+		this.#host = host;
+		this.#active = true;
+		this.onMount();
+	}
+
+	/**
+	 * Self-complete: stop ongoing effects and freeze the block at its current
+	 * content, leaving it rendered in the transcript. Use when the operation the
+	 * block represents finishes (connection resolved, download done).
+	 */
+	finish(): void {
+		if (!this.#active) return;
+		this.#active = false;
+		this.#runCleanups();
+		this.requestRender();
+	}
+
+	/**
+	 * Host-only teardown: release everything and propagate to children. Called
+	 * when the host permanently discards the block (transcript reset). Idempotent.
+	 */
+	override dispose(): void {
+		if (this.#disposed) return;
+		this.#disposed = true;
+		this.#active = false;
+		this.#runCleanups();
+		super.dispose();
+		this.#host = undefined;
+	}
+
+	/** Live blocks stay repaintable; finished/disposed ones may freeze. */
+	isTranscriptBlockFinalized(): boolean {
+		return !this.#active;
+	}
+
+	#runCleanups(): void {
+		const cleanups = this.#cleanups.splice(0);
+		for (const cleanup of cleanups) cleanup();
+	}
+}

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

@@ -0,0 +1,87 @@
+import { Box, type Component, Markdown } from './stubs/tui/index.ts';
+import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import type { CompactionSummaryMessage } from "../../session/messages";
+
+/**
+ * Compaction point in the transcript, rendered as a slim horizontal divider:
+ *
+ *   ──────── 📷 compacted · ctrl+o ────────
+ *
+ * The conversation above the divider stays visible (display transcript keeps
+ * full history); only the LLM context was reset. Expanding (ctrl+o) reveals
+ * the compaction summary below the divider.
+ */
+export class CompactionSummaryMessageComponent implements Component {
+	#expanded = false;
+	#cache?: { width: number; lines: string[] };
+	#detail?: Box;
+
+	constructor(private readonly message: CompactionSummaryMessage) {}
+
+	setExpanded(expanded: boolean): void {
+		if (this.#expanded === expanded) return;
+		this.#expanded = expanded;
+		this.#cache = undefined;
+	}
+
+	invalidate(): void {
+		this.#cache = undefined;
+		// Theme may have changed — rebuild the detail box lazily on next render.
+		this.#detail = undefined;
+	}
+
+	render(width: number): readonly string[] {
+		width = Math.max(1, width);
+		if (this.#cache?.width === width) {
+			return this.#cache.lines;
+		}
+		const lines = this.#expanded
+			? ["", this.#divider(width), "", ...this.#detailBox().render(width)]
+			: ["", this.#divider(width), ""];
+		this.#cache = { width, lines };
+		return lines;
+	}
+
+	#divider(width: number): string {
+		const rule = theme.tree.horizontal;
+		const label = `${theme.icon.camera} compacted`;
+		// sep.dot ships pre-padded (" · "); trim so the hint joins with single spaces.
+		const hint = `${theme.sep.dot.trim()} ctrl+o`;
+		const plainWidth = Bun.stringWidth(`${label} ${hint}`, { countAnsiEscapeCodes: false });
+		// ` label hint ` framed by rules on both sides.
+		const remaining = width - plainWidth - 2;
+		if (remaining < 4) {
+			// Too narrow for a framed rule — emit the bare label.
+			return theme.fg("muted", label);
+		}
+		const left = Math.floor(remaining / 2);
+		const right = remaining - left;
+		return (
+			theme.fg("dim", rule.repeat(left)) +
+			` ${theme.fg("muted", label)} ${theme.fg("dim", hint)} ` +
+			theme.fg("dim", rule.repeat(right))
+		);
+	}
+
+	#detailBox(): Box {
+		if (this.#detail) return this.#detail;
+		const box = new Box(1, 1, t => theme.bg("customMessageBg", t));
+		const tokenStr = this.message.tokensBefore.toLocaleString();
+		const frameCount = this.message.images?.length ?? 0;
+		const frameNote =
+			frameCount > 0 ? `\n\n_${frameCount} snapcompact frame${frameCount === 1 ? "" : "s"} attached_` : "";
+		box.addChild(
+			new Markdown(
+				`**Compacted from ${tokenStr} tokens**\n\n${this.message.summary}${frameNote}`,
+				0,
+				0,
+				getMarkdownTheme(),
+				{
+					color: (text: string) => theme.fg("customMessageText", text),
+				},
+			),
+		);
+		this.#detail = box;
+		return box;
+	}
+}

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

@@ -0,0 +1,206 @@
+import { type Component, matchesKey, padding, Text, truncateToWidth, visibleWidth } from './stubs/tui/index.ts';
+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";
+import { bottomBorder, divider, row, topBorder } from "./overlay-box";
+
+/** 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[];
+}
+
+/** 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): readonly 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 './stubs/tui/index.ts';
+
+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;
+		}
+	}
+}