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

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.js";
+import { getMarkdownTheme, theme } from "../theme/theme.js";
+
+/**
+ * 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", `\x1b[1m[branch]\x1b[22m`);
+		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.js";
+import { getMarkdownTheme, theme } from "../theme/theme.js";
+
+/**
+ * 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", `\x1b[1m[compaction]\x1b[22m`);
+		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.js";
+
+/**
+ * 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.js";
+
+/**
+ * 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("─".repeat(Math.max(1, width)))];
+	}
+}