@oh-my-pi/pi-coding-agent 15.9.5 → 15.10.0

package/src/modes/components/agent-dashboard.ts

@@ -27,6 +27,7 @@ import {
 	matchesKey,
 	padding,
 	replaceTabs,
+	ScrollView,
 	Spacer,
 	Text,
 	truncateToWidth,
@@ -205,9 +206,12 @@ class AgentListPane implements Component {
 			return lines;
 		}
 
+		const overflow = this.agents.length > this.maxVisible;
+		const rowWidth = Math.max(0, width - (overflow ? 1 : 0));
 		const start = this.scrollOffset;
 		const end = Math.min(start + this.maxVisible, this.agents.length);
 
+		const rows: string[] = [];
 		for (let i = start; i < end; i++) {
 			const agent = this.agents[i];
 			const selected = i === this.selectedIndex;
@@ -224,12 +228,17 @@ class AgentListPane implements Component {
 				line = theme.fg("dim", line);
 			}
 
-			lines.push(truncateToWidth(line, width));
+			rows.push(truncateToWidth(line, rowWidth));
 		}
 
-		if (this.agents.length > this.maxVisible) {
-			lines.push(theme.fg("muted", `  (${this.selectedIndex + 1}/${this.agents.length})`));
-		}
+		const sv = new ScrollView(rows, {
+			height: rows.length,
+			scrollbar: "auto",
+			totalRows: this.agents.length,
+			theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
+		});
+		sv.setScrollOffset(this.scrollOffset);
+		lines.push(...sv.render(width));
 
 		return lines;
 	}

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

@@ -18,6 +18,15 @@ export class AssistantMessageComponent extends Container {
 	#convertedKittyImages = new Map<string, ImageContent>();
 	#kittyConversionsInFlight = new Set<string>();
 	#transcriptBlockFinalized: boolean;
+	/**
+	 * When true, the turn-ending `Error: …` line for `stopReason === "error"` is
+	 * suppressed because the same error is currently shown in the pinned banner
+	 * above the editor (see `EventController` + `ErrorBannerComponent`). Avoids
+	 * rendering the identical error twice (inline + banner) at the error moment.
+	 * Restored to `false` when the banner is cleared at the next turn so the
+	 * transcript keeps the error in history.
+	 */
+	#errorPinned = false;
 
 	constructor(
 		message?: AssistantMessage,
@@ -49,6 +58,18 @@ export class AssistantMessageComponent extends Container {
 		this.hideThinkingBlock = hide;
 	}
 
+	/**
+	 * Toggle suppression of the inline `Error: …` line while the same error is
+	 * pinned in the banner above the editor. Re-renders so the change is visible.
+	 */
+	setErrorPinned(pinned: boolean): void {
+		if (this.#errorPinned === pinned) return;
+		this.#errorPinned = pinned;
+		if (this.#lastMessage) {
+			this.updateContent(this.#lastMessage);
+		}
+	}
+
 	isTranscriptBlockFinalized(): boolean {
 		return this.#transcriptBlockFinalized;
 	}
@@ -246,7 +267,7 @@ export class AssistantMessageComponent extends Container {
 					this.#contentContainer.addChild(new Spacer(1));
 				}
 				this.#contentContainer.addChild(new Text(theme.fg("error", abortMessage), 1, 0));
-			} else if (message.stopReason === "error") {
+			} else if (message.stopReason === "error" && !this.#errorPinned) {
 				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/components/copy-selector.ts

@@ -0,0 +1,249 @@
+import { type Component, matchesKey, padding, Text, truncateToWidth, visibleWidth } from "@oh-my-pi/pi-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/custom-editor.ts

@@ -10,6 +10,7 @@ type ConfigurableEditorAction = Extract<
 	| "app.clear"
 	| "app.exit"
 	| "app.suspend"
+	| "app.display.reset"
 	| "app.thinking.cycle"
 	| "app.model.cycleForward"
 	| "app.model.cycleBackward"
@@ -30,10 +31,11 @@ const DEFAULT_ACTION_KEYS: Record<ConfigurableEditorAction, KeyId[]> = {
 	"app.clear": ["ctrl+c"],
 	"app.exit": ["ctrl+d"],
 	"app.suspend": ["ctrl+z"],
+	"app.display.reset": ["ctrl+l"],
 	"app.thinking.cycle": ["shift+tab"],
 	"app.model.cycleForward": ["ctrl+p"],
 	"app.model.cycleBackward": ["shift+ctrl+p"],
-	"app.model.select": ["ctrl+l"],
+	"app.model.select": ["alt+m"],
 	"app.model.selectTemporary": ["alt+p"],
 	"app.tools.expand": ["ctrl+o"],
 	"app.thinking.toggle": ["ctrl+t"],
@@ -65,6 +67,7 @@ export class CustomEditor extends Editor {
 	onEscape?: () => void;
 	onClear?: () => void;
 	onExit?: () => void;
+	onDisplayReset?: () => void;
 	onCycleThinkingLevel?: () => void;
 	onCycleModelForward?: () => void;
 	onCycleModelBackward?: () => void;
@@ -158,6 +161,12 @@ export class CustomEditor extends Editor {
 			return;
 		}
 
+		// Intercept configured display reset shortcut
+		if (this.#matchesAction(data, "app.display.reset") && this.onDisplayReset) {
+			this.onDisplayReset();
+			return;
+		}
+
 		// Intercept configured suspend shortcut
 		if (this.#matchesAction(data, "app.suspend") && this.onSuspend) {
 			this.onSuspend();

package/src/modes/components/extensions/extension-list.ts

@@ -10,6 +10,7 @@ import {
 	extractPrintableText,
 	matchesKey,
 	padding,
+	ScrollView,
 	truncateToWidth,
 	visibleWidth,
 } from "@oh-my-pi/pi-tui";
@@ -134,25 +135,33 @@ export class ExtensionList implements Component {
 		const startIdx = this.#scrollOffset;
 		const endIdx = Math.min(startIdx + this.#maxVisible, this.#listItems.length);
 
+		// Reserve the rightmost column for the scrollbar when overflowing
+		const overflow = this.#listItems.length > this.#maxVisible;
+		const rowWidth = Math.max(0, width - (overflow ? 1 : 0));
+
 		// Render visible items
+		const rows: string[] = [];
 		for (let i = startIdx; i < endIdx; i++) {
 			const listItem = this.#listItems[i];
 			const isSelected = this.#focused && i === this.#selectedIndex;
 
 			if (listItem.type === "master") {
-				lines.push(this.#renderMasterSwitch(listItem, isSelected, width));
+				rows.push(this.#renderMasterSwitch(listItem, isSelected, rowWidth));
 			} else if (listItem.type === "kind-header") {
-				lines.push(this.#renderKindHeader(listItem, isSelected, width));
+				rows.push(this.#renderKindHeader(listItem, isSelected, rowWidth));
 			} else {
-				lines.push(this.#renderExtensionRow(listItem.item, isSelected, width, masterDisabled));
+				rows.push(this.#renderExtensionRow(listItem.item, isSelected, rowWidth, masterDisabled));
 			}
 		}
 
-		// Scroll indicator
-		if (this.#listItems.length > this.#maxVisible) {
-			const indicator = theme.fg("muted", `  (${this.#selectedIndex + 1}/${this.#listItems.length})`);
-			lines.push(indicator);
-		}
+		const sv = new ScrollView(rows, {
+			height: rows.length,
+			scrollbar: "auto",
+			totalRows: this.#listItems.length,
+			theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
+		});
+		sv.setScrollOffset(this.#scrollOffset);
+		lines.push(...sv.render(width));
 
 		return lines;
 	}

package/src/modes/components/history-search.ts

@@ -5,6 +5,7 @@ import {
 	Input,
 	matchesKey,
 	padding,
+	ScrollView,
 	Spacer,
 	Text,
 	truncateToWidth,
@@ -115,15 +116,19 @@ class HistoryResultsList implements Component {
 		);
 		const endIndex = Math.min(startIndex + this.#maxVisible, this.#results.length);
 
+		const overflow = this.#results.length > this.#maxVisible;
+		const rowWidth = Math.max(0, width - (overflow ? 1 : 0));
+		const rows: string[] = [];
+
 		for (let i = startIndex; i < endIndex; i++) {
 			const entry = this.#results[i];
 			const isSelected = i === this.#selectedIndex;
 
 			const timeStr = relativeTime(entry.created_at);
 			const timeWidth = visibleWidth(timeStr);
-			const showTime = width >= gutterWidth + 12 + timeWidth;
+			const showTime = rowWidth >= gutterWidth + 12 + timeWidth;
 
-			const promptBudget = Math.max(4, width - gutterWidth - (showTime ? timeWidth + 1 : 0));
+			const promptBudget = Math.max(4, rowWidth - gutterWidth - (showTime ? timeWidth + 1 : 0));
 			const normalized = entry.prompt.replace(/\s+/g, " ").trim();
 			const plain = truncateToWidth(normalized, promptBudget);
 			const highlighted = highlightTokens(plain, this.#tokens);
@@ -133,21 +138,24 @@ class HistoryResultsList implements Component {
 
 			if (showTime) {
 				// Pad the prompt region so the timestamp sits flush right with a one-cell gap.
-				line = `${truncateToWidth(line, width - timeWidth - 1, Ellipsis.Unicode, true)} ${theme.fg("dim", timeStr)}`;
+				line = `${truncateToWidth(line, rowWidth - timeWidth - 1, Ellipsis.Unicode, true)} ${theme.fg("dim", timeStr)}`;
 			}
 
-			lines.push(
+			rows.push(
 				isSelected
-					? theme.bg("selectedBg", truncateToWidth(line, width, Ellipsis.Omit, true))
-					: truncateToWidth(line, width),
+					? theme.bg("selectedBg", truncateToWidth(line, rowWidth, Ellipsis.Omit, true))
+					: truncateToWidth(line, rowWidth),
 			);
 		}
 
-		if (startIndex > 0 || endIndex < this.#results.length) {
-			const scrollText = `  ${this.#selectedIndex + 1}/${this.#results.length}`;
-			lines.push(theme.fg("muted", truncateToWidth(scrollText, width, Ellipsis.Omit)));
-		}
-
+		const sv = new ScrollView(rows, {
+			height: rows.length,
+			scrollbar: "auto",
+			totalRows: this.#results.length,
+			theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
+		});
+		sv.setScrollOffset(startIndex);
+		lines.push(...sv.render(width));
 		return lines;
 	}
 }