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

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

@@ -0,0 +1,199 @@
+/**
+ * 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";
+import { getSymbolTheme, theme } from "../theme/theme";
+import { DynamicBorder } from "./dynamic-border";
+import { truncateToVisualLines } from "./visual-truncate";
+
+// 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${theme.format.ellipsis} (esc to cancel)`,
+			getSymbolTheme().spinnerFrames,
+		);
+		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", `${theme.format.ellipsis} ${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";
+import { DynamicBorder } from "./dynamic-border";
+
+/** 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();
+	}
+}

package/src/modes/interactive/components/branch-summary-message.ts

@@ -0,0 +1,42 @@
+import { Box, Markdown, Spacer, Text } from "@oh-my-pi/pi-tui";
+import type { BranchSummaryMessage } from "../../../core/messages";
+import { getMarkdownTheme, theme } from "../theme/theme";
+
+/**
+ * Component that renders a branch summary message with collapsed/expanded state.
+ * Uses same background color as hook messages for visual consistency.
+ */
+export class BranchSummaryMessageComponent extends Box {
+	private expanded = false;
+	private message: BranchSummaryMessage;
+
+	constructor(message: BranchSummaryMessage) {
+		super(1, 1, (t) => theme.bg("customMessageBg", t));
+		this.message = message;
+		this.updateDisplay();
+	}
+
+	setExpanded(expanded: boolean): void {
+		this.expanded = expanded;
+		this.updateDisplay();
+	}
+
+	private updateDisplay(): void {
+		this.clear();
+
+		const label = theme.fg("customMessageLabel", theme.bold("[branch]"));
+		this.addChild(new Text(label, 0, 0));
+		this.addChild(new Spacer(1));
+
+		if (this.expanded) {
+			const header = "**Branch Summary**\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", "Branch summary (ctrl+o to expand)"), 0, 0));
+		}
+	}
+}

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

@@ -0,0 +1,45 @@
+import { Box, Markdown, Spacer, Text } from "@oh-my-pi/pi-tui";
+import type { CompactionSummaryMessage } from "../../../core/messages";
+import { getMarkdownTheme, theme } from "../theme/theme";
+
+/**
+ * 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 {
+	private expanded = false;
+	private message: CompactionSummaryMessage;
+
+	constructor(message: CompactionSummaryMessage) {
+		super(1, 1, (t) => theme.bg("customMessageBg", t));
+		this.message = message;
+		this.updateDisplay();
+	}
+
+	setExpanded(expanded: boolean): void {
+		this.expanded = expanded;
+		this.updateDisplay();
+	}
+
+	private 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),
+			);
+		}
+	}
+}

package/src/modes/interactive/components/custom-editor.ts

@@ -0,0 +1,122 @@
+import {
+	Editor,
+	isCtrlC,
+	isCtrlD,
+	isCtrlG,
+	isCtrlL,
+	isCtrlO,
+	isCtrlP,
+	isCtrlT,
+	isCtrlV,
+	isCtrlZ,
+	isEscape,
+	isShiftCtrlP,
+	isShiftTab,
+} from "@oh-my-pi/pi-tui";
+
+/**
+ * Custom editor that handles Escape and Ctrl+C keys for coding-agent
+ */
+export class CustomEditor extends Editor {
+	public onEscape?: () => void;
+	public onCtrlC?: () => void;
+	public onCtrlD?: () => void;
+	public onShiftTab?: () => void;
+	public onCtrlP?: () => void;
+	public onShiftCtrlP?: () => void;
+	public onCtrlL?: () => void;
+	public onCtrlO?: () => void;
+	public onCtrlT?: () => void;
+	public onCtrlG?: () => void;
+	public onCtrlZ?: () => void;
+	public onQuestionMark?: () => void;
+	/** Called when Ctrl+V is pressed. Returns true if handled (image found), false to fall through to text paste. */
+	public onCtrlV?: () => Promise<boolean>;
+
+	handleInput(data: string): void {
+		// Intercept Ctrl+V for image paste (async - fires and handles result)
+		if (isCtrlV(data) && this.onCtrlV) {
+			void this.onCtrlV();
+			return;
+		}
+
+		// Intercept Ctrl+G for external editor
+		if (isCtrlG(data) && this.onCtrlG) {
+			this.onCtrlG();
+			return;
+		}
+
+		// Intercept Ctrl+Z for suspend
+		if (isCtrlZ(data) && this.onCtrlZ) {
+			this.onCtrlZ();
+			return;
+		}
+
+		// Intercept Ctrl+T for thinking block visibility toggle
+		if (isCtrlT(data) && this.onCtrlT) {
+			this.onCtrlT();
+			return;
+		}
+
+		// Intercept Ctrl+L for model selector
+		if (isCtrlL(data) && this.onCtrlL) {
+			this.onCtrlL();
+			return;
+		}
+
+		// Intercept Ctrl+O for tool output expansion
+		if (isCtrlO(data) && this.onCtrlO) {
+			this.onCtrlO();
+			return;
+		}
+
+		// Intercept Shift+Ctrl+P for backward model cycling (check before Ctrl+P)
+		if (isShiftCtrlP(data) && this.onShiftCtrlP) {
+			this.onShiftCtrlP();
+			return;
+		}
+
+		// Intercept Ctrl+P for model cycling
+		if (isCtrlP(data) && this.onCtrlP) {
+			this.onCtrlP();
+			return;
+		}
+
+		// Intercept Shift+Tab for thinking level cycling
+		if (isShiftTab(data) && this.onShiftTab) {
+			this.onShiftTab();
+			return;
+		}
+
+		// Intercept Escape key - but only if autocomplete is NOT active
+		// (let parent handle escape for autocomplete cancellation)
+		if (isEscape(data) && this.onEscape && !this.isShowingAutocomplete()) {
+			this.onEscape();
+			return;
+		}
+
+		// Intercept Ctrl+C
+		if (isCtrlC(data) && this.onCtrlC) {
+			this.onCtrlC();
+			return;
+		}
+
+		// Intercept Ctrl+D (only when editor is empty)
+		if (isCtrlD(data)) {
+			if (this.getText().length === 0 && this.onCtrlD) {
+				this.onCtrlD();
+			}
+			// Always consume Ctrl+D (don't pass to parent)
+			return;
+		}
+
+		// Intercept ? when editor is empty to show hotkeys
+		if (data === "?" && this.getText().length === 0 && this.onQuestionMark) {
+			this.onQuestionMark();
+			return;
+		}
+
+		// Pass to parent for normal handling
+		super.handleInput(data);
+	}
+}

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

@@ -0,0 +1,147 @@
+import * as Diff from "diff";
+import { theme } from "../theme/theme";
+
+/**
+ * Parse diff line to extract prefix, line number, and content.
+ * Format: "+123 content" or "-123 content" or " 123 content" or "     ..."
+ */
+function parseDiffLine(line: string): { prefix: string; lineNum: string; content: string } | null {
+	const match = line.match(/^([+-\s])(\s*\d*)\s(.*)$/);
+	if (!match) return null;
+	return { prefix: match[1], lineNum: match[2], content: match[3] };
+}
+
+/**
+ * Replace tabs with spaces for consistent rendering.
+ */
+function replaceTabs(text: string): string {
+	return text.replace(/\t/g, "   ");
+}
+
+/**
+ * Compute word-level diff and render with inverse on changed parts.
+ * Uses diffWords which groups whitespace with adjacent words for cleaner highlighting.
+ * Strips leading whitespace from inverse to avoid highlighting indentation.
+ */
+function renderIntraLineDiff(oldContent: string, newContent: string): { removedLine: string; addedLine: string } {
+	const wordDiff = Diff.diffWords(oldContent, newContent);
+
+	let removedLine = "";
+	let addedLine = "";
+	let isFirstRemoved = true;
+	let isFirstAdded = true;
+
+	for (const part of wordDiff) {
+		if (part.removed) {
+			let value = part.value;
+			// Strip leading whitespace from the first removed part
+			if (isFirstRemoved) {
+				const leadingWs = value.match(/^(\s*)/)?.[1] || "";
+				value = value.slice(leadingWs.length);
+				removedLine += leadingWs;
+				isFirstRemoved = false;
+			}
+			if (value) {
+				removedLine += theme.inverse(value);
+			}
+		} else if (part.added) {
+			let value = part.value;
+			// Strip leading whitespace from the first added part
+			if (isFirstAdded) {
+				const leadingWs = value.match(/^(\s*)/)?.[1] || "";
+				value = value.slice(leadingWs.length);
+				addedLine += leadingWs;
+				isFirstAdded = false;
+			}
+			if (value) {
+				addedLine += theme.inverse(value);
+			}
+		} else {
+			removedLine += part.value;
+			addedLine += part.value;
+		}
+	}
+
+	return { removedLine, addedLine };
+}
+
+export interface RenderDiffOptions {
+	/** File path (unused, kept for API compatibility) */
+	filePath?: string;
+}
+
+/**
+ * Render a diff string with colored lines and intra-line change highlighting.
+ * - Context lines: dim/gray
+ * - Removed lines: red, with inverse on changed tokens
+ * - Added lines: green, with inverse on changed tokens
+ */
+export function renderDiff(diffText: string, _options: RenderDiffOptions = {}): string {
+	const lines = diffText.split("\n");
+	const result: string[] = [];
+
+	let i = 0;
+	while (i < lines.length) {
+		const line = lines[i];
+		const parsed = parseDiffLine(line);
+
+		if (!parsed) {
+			result.push(theme.fg("toolDiffContext", line));
+			i++;
+			continue;
+		}
+
+		if (parsed.prefix === "-") {
+			// Collect consecutive removed lines
+			const removedLines: { lineNum: string; content: string }[] = [];
+			while (i < lines.length) {
+				const p = parseDiffLine(lines[i]);
+				if (!p || p.prefix !== "-") break;
+				removedLines.push({ lineNum: p.lineNum, content: p.content });
+				i++;
+			}
+
+			// Collect consecutive added lines
+			const addedLines: { lineNum: string; content: string }[] = [];
+			while (i < lines.length) {
+				const p = parseDiffLine(lines[i]);
+				if (!p || p.prefix !== "+") break;
+				addedLines.push({ lineNum: p.lineNum, content: p.content });
+				i++;
+			}
+
+			// Only do intra-line diffing when there's exactly one removed and one added line
+			// (indicating a single line modification). Otherwise, show lines as-is.
+			if (removedLines.length === 1 && addedLines.length === 1) {
+				const removed = removedLines[0];
+				const added = addedLines[0];
+
+				const { removedLine, addedLine } = renderIntraLineDiff(
+					replaceTabs(removed.content),
+					replaceTabs(added.content),
+				);
+
+				result.push(theme.fg("toolDiffRemoved", `-${removed.lineNum} ${removedLine}`));
+				result.push(theme.fg("toolDiffAdded", `+${added.lineNum} ${addedLine}`));
+			} else {
+				// Show all removed lines first, then all added lines
+				for (const removed of removedLines) {
+					result.push(theme.fg("toolDiffRemoved", `-${removed.lineNum} ${replaceTabs(removed.content)}`));
+				}
+				for (const added of addedLines) {
+					result.push(theme.fg("toolDiffAdded", `+${added.lineNum} ${replaceTabs(added.content)}`));
+				}
+			}
+		} else if (parsed.prefix === "+") {
+			// Standalone added line
+			result.push(theme.fg("toolDiffAdded", `+${parsed.lineNum} ${replaceTabs(parsed.content)}`));
+			i++;
+		} else {
+			// Context line
+			result.push(theme.fg("toolDiffContext", ` ${parsed.lineNum} ${replaceTabs(parsed.content)}`));
+			i++;
+		}
+	}
+
+	return result.join("\n");
+}

package/src/modes/interactive/components/dynamic-border.ts

@@ -0,0 +1,25 @@
+import type { Component } from "@oh-my-pi/pi-tui";
+import { theme } from "../theme/theme";
+
+/**
+ * Dynamic border component that adjusts to viewport width.
+ *
+ * Note: When used from hooks loaded via jiti, the global `theme` may be undefined
+ * because jiti creates a separate module cache. Always pass an explicit color
+ * function when using DynamicBorder in components exported for hook use.
+ */
+export class DynamicBorder implements Component {
+	private color: (str: string) => string;
+
+	constructor(color: (str: string) => string = (str) => theme.fg("border", str)) {
+		this.color = color;
+	}
+
+	invalidate(): void {
+		// No cached state to invalidate currently
+	}
+
+	render(width: number): string[] {
+		return [this.color(theme.boxSharp.horizontal.repeat(Math.max(1, width)))];
+	}
+}