@oh-my-pi/pi-coding-agent 3.15.0 → 3.20.0

package/src/modes/interactive/components/hook-selector.ts

@@ -3,7 +3,7 @@
  * Displays a list of string options with keyboard navigation.
  */
 
-import { Container, isArrowDown, isArrowUp, isEnter, isEscape, Spacer, Text } from "@oh-my-pi/pi-tui";
+import { Container, isArrowDown, isArrowUp, isCtrlC, isEnter, isEscape, Spacer, Text } from "@oh-my-pi/pi-tui";
 import { theme } from "../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
 
@@ -83,8 +83,8 @@ export class HookSelectorComponent extends Container {
 				this.onSelectCallback(selected);
 			}
 		}
-		// Escape
-		else if (isEscape(keyData)) {
+		// Escape or Ctrl+C
+		else if (isEscape(keyData) || isCtrlC(keyData)) {
 			this.onCancelCallback();
 		}
 	}

package/src/modes/interactive/components/model-selector.ts

@@ -6,6 +6,7 @@ import {
 	isArrowLeft,
 	isArrowRight,
 	isArrowUp,
+	isCtrlC,
 	isEnter,
 	isEscape,
 	isShiftTab,
@@ -202,7 +203,7 @@ export class ModelSelectorComponent extends Container {
 			}));
 		} else {
 			// Refresh to pick up any changes to models.json
-			this.modelRegistry.refresh();
+			await this.modelRegistry.refresh();
 
 			// Check for models.json errors
 			const loadError = this.modelRegistry.getError();
@@ -212,7 +213,7 @@ export class ModelSelectorComponent extends Container {
 
 			// Load available models (built-in models still work even if models.json failed)
 			try {
-				const availableModels = await this.modelRegistry.getAvailable();
+				const availableModels = this.modelRegistry.getAvailable();
 				models = availableModels.map((model: Model<any>) => ({
 					provider: model.provider,
 					id: model.id,
@@ -490,8 +491,8 @@ export class ModelSelectorComponent extends Container {
 			return;
 		}
 
-		// Escape - close selector
-		if (isEscape(keyData)) {
+		// Escape or Ctrl+C - close selector
+		if (isEscape(keyData) || isCtrlC(keyData)) {
 			this.onCancelCallback();
 			return;
 		}
@@ -527,8 +528,8 @@ export class ModelSelectorComponent extends Container {
 			return;
 		}
 
-		// Escape - close menu only
-		if (isEscape(keyData)) {
+		// Escape or Ctrl+C - close menu only
+		if (isEscape(keyData) || isCtrlC(keyData)) {
 			this.closeMenu();
 			return;
 		}

package/src/modes/interactive/components/oauth-selector.ts

@@ -1,5 +1,5 @@
 import { getOAuthProviders, type OAuthProviderInfo } from "@oh-my-pi/pi-ai";
-import { Container, isArrowDown, isArrowUp, isEnter, isEscape, Spacer, TruncatedText } from "@oh-my-pi/pi-tui";
+import { Container, isArrowDown, isArrowUp, isCtrlC, isEnter, isEscape, Spacer, TruncatedText } from "@oh-my-pi/pi-tui";
 import type { AuthStorage } from "../../../core/auth-storage";
 import { theme } from "../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
@@ -128,8 +128,8 @@ export class OAuthSelectorComponent extends Container {
 				this.updateList();
 			}
 		}
-		// Escape
-		else if (isEscape(keyData)) {
+		// Escape or Ctrl+C
+		else if (isEscape(keyData) || isCtrlC(keyData)) {
 			this.onCancelCallback();
 		}
 	}

package/src/modes/interactive/components/settings-defs.ts

@@ -11,6 +11,7 @@
 import type { ThinkingLevel } from "@oh-my-pi/pi-agent-core";
 import { getCapabilities } from "@oh-my-pi/pi-tui";
 import type {
+	NotificationMethod,
 	SettingsManager,
 	StatusLinePreset,
 	StatusLineSeparatorStyle,
@@ -96,21 +97,59 @@ export const SETTINGS_DEFS: SettingDef[] = [
 		condition: () => !!getCapabilities().images,
 	},
 	{
-		id: "queueMode",
+		id: "voiceEnabled",
+		tab: "config",
+		type: "boolean",
+		label: "Voice mode",
+		description: "Enable realtime voice input/output (Ctrl+Y toggle, auto-send on silence)",
+		get: (sm) => sm.getVoiceEnabled(),
+		set: (sm, v) => sm.setVoiceEnabled(v),
+	},
+	{
+		id: "completionNotification",
 		tab: "config",
 		type: "enum",
-		label: "Queue mode",
+		label: "Completion notification",
+		description: "Notify when the agent completes",
+		values: ["auto", "bell", "osc99", "osc9", "off"],
+		get: (sm) => sm.getNotificationOnComplete(),
+		set: (sm, v) => sm.setNotificationOnComplete(v as NotificationMethod),
+	},
+	{
+		id: "autoResizeImages",
+		tab: "config",
+		type: "boolean",
+		label: "Auto-resize images",
+		description: "Resize large images to 2000x2000 max for better model compatibility",
+		get: (sm) => sm.getImageAutoResize(),
+		set: (sm, v) => sm.setImageAutoResize(v),
+	},
+	{
+		id: "steeringMode",
+		tab: "config",
+		type: "enum",
+		label: "Steering mode",
 		description: "How to process queued messages while agent is working",
 		values: ["one-at-a-time", "all"],
-		get: (sm) => sm.getQueueMode(),
-		set: (sm, v) => sm.setQueueMode(v as "all" | "one-at-a-time"), // Also handled in session
+		get: (sm) => sm.getSteeringMode(),
+		set: (sm, v) => sm.setSteeringMode(v as "all" | "one-at-a-time"), // Also handled in session
+	},
+	{
+		id: "followUpMode",
+		tab: "config",
+		type: "enum",
+		label: "Follow-up mode",
+		description: "How to drain follow-up messages after a turn completes",
+		values: ["one-at-a-time", "all"],
+		get: (sm) => sm.getFollowUpMode(),
+		set: (sm, v) => sm.setFollowUpMode(v as "one-at-a-time" | "all"), // Also handled in session
 	},
 	{
 		id: "interruptMode",
 		tab: "config",
 		type: "enum",
 		label: "Interrupt mode",
-		description: "When to process queued messages: immediately (interrupt tools) or wait for turn to complete",
+		description: "When steering messages interrupt tool execution",
 		values: ["immediate", "wait"],
 		get: (sm) => sm.getInterruptMode(),
 		set: (sm, v) => sm.setInterruptMode(v as "immediate" | "wait"), // Also handled in session
@@ -133,6 +172,16 @@ export const SETTINGS_DEFS: SettingDef[] = [
 		get: (sm) => sm.getCollapseChangelog(),
 		set: (sm, v) => sm.setCollapseChangelog(v),
 	},
+	{
+		id: "doubleEscapeAction",
+		tab: "config",
+		type: "enum",
+		label: "Double-escape action",
+		description: "Action when pressing Escape twice with empty editor",
+		values: ["tree", "branch"],
+		get: (sm) => sm.getDoubleEscapeAction(),
+		set: (sm, v) => sm.setDoubleEscapeAction(v as "branch" | "tree"),
+	},
 	{
 		id: "bashInterceptor",
 		tab: "config",
@@ -359,7 +408,7 @@ export const SETTINGS_DEFS: SettingDef[] = [
 		id: "statusLineShowHooks",
 		tab: "status",
 		type: "boolean",
-		label: "Show hook status",
+		label: "Show extension status",
 		description: "Display hook status messages below status line",
 		get: (sm) => sm.getStatusLineShowHookStatus(),
 		set: (sm, v) => sm.setStatusLineShowHookStatus(v),

package/src/modes/interactive/components/status-line/separators.ts

@@ -22,8 +22,8 @@ export function getSeparator(style: StatusLineSeparatorStyle, theme: Theme): Sep
 				left: theme.sep.powerlineThinLeft,
 				right: theme.sep.powerlineThinRight,
 				endCaps: {
-					left: theme.sep.powerlineThinRight,
-					right: theme.sep.powerlineThinLeft,
+					left: theme.sep.powerlineRight,
+					right: theme.sep.powerlineLeft,
 					useBgAsFg: true,
 				},
 			};
@@ -46,8 +46,8 @@ export function getSeparator(style: StatusLineSeparatorStyle, theme: Theme): Sep
 				left: theme.sep.powerlineThinLeft,
 				right: theme.sep.powerlineThinRight,
 				endCaps: {
-					left: theme.sep.powerlineThinRight,
-					right: theme.sep.powerlineThinLeft,
+					left: theme.sep.powerlineRight,
+					right: theme.sep.powerlineLeft,
 					useBgAsFg: true,
 				},
 			};

package/src/modes/interactive/components/status-line.ts

@@ -1,8 +1,7 @@
-import { execSync } from "node:child_process";
-import { existsSync, type FSWatcher, readFileSync, watch } from "node:fs";
-import { dirname, join } from "node:path";
 import type { AssistantMessage } from "@oh-my-pi/pi-ai";
 import { type Component, truncateToWidth, visibleWidth } from "@oh-my-pi/pi-tui";
+import { type FSWatcher, watch } from "fs";
+import { dirname, join } from "path";
 import type { AgentSession } from "../../../core/agent-session";
 import type { StatusLineSegmentOptions, StatusLineSettings } from "../../../core/settings-manager";
 import { theme } from "../theme/theme";
@@ -23,11 +22,11 @@ function sanitizeStatusText(text: string): string {
 }
 
 /** Find the git root directory by walking up from cwd */
-function findGitHeadPath(): string | null {
+async function findGitHeadPath(): Promise<string | null> {
 	let dir = process.cwd();
 	while (true) {
 		const gitHeadPath = join(dir, ".git", "HEAD");
-		if (existsSync(gitHeadPath)) {
+		if (await Bun.file(gitHeadPath).exists()) {
 			return gitHeadPath;
 		}
 		const parent = dirname(dir);
@@ -98,19 +97,20 @@ export class StatusLineComponent implements Component {
 			this.gitWatcher = null;
 		}
 
-		const gitHeadPath = findGitHeadPath();
-		if (!gitHeadPath) return;
-
-		try {
-			this.gitWatcher = watch(gitHeadPath, () => {
-				this.cachedBranch = undefined;
-				if (this.onBranchChange) {
-					this.onBranchChange();
-				}
-			});
-		} catch {
-			// Silently fail
-		}
+		findGitHeadPath().then((gitHeadPath) => {
+			if (!gitHeadPath) return;
+
+			try {
+				this.gitWatcher = watch(gitHeadPath, () => {
+					this.cachedBranch = undefined;
+					if (this.onBranchChange) {
+						this.onBranchChange();
+					}
+				});
+			} catch {
+				// Silently fail
+			}
+		});
 	}
 
 	dispose(): void {
@@ -129,24 +129,27 @@ export class StatusLineComponent implements Component {
 			return this.cachedBranch;
 		}
 
-		try {
-			const gitHeadPath = findGitHeadPath();
+		// Note: synchronous call to async function - will return undefined on first call
+		// This is acceptable since it's a cached value that will update on next render
+		findGitHeadPath().then(async (gitHeadPath) => {
 			if (!gitHeadPath) {
 				this.cachedBranch = null;
-				return null;
+				return;
 			}
-			const content = readFileSync(gitHeadPath, "utf8").trim();
+			try {
+				const content = (await Bun.file(gitHeadPath).text()).trim();
 
-			if (content.startsWith("ref: refs/heads/")) {
-				this.cachedBranch = content.slice(16);
-			} else {
-				this.cachedBranch = "detached";
+				if (content.startsWith("ref: refs/heads/")) {
+					this.cachedBranch = content.slice(16);
+				} else {
+					this.cachedBranch = "detached";
+				}
+			} catch {
+				this.cachedBranch = null;
 			}
-		} catch {
-			this.cachedBranch = null;
-		}
+		});
 
-		return this.cachedBranch;
+		return this.cachedBranch ?? null;
 	}
 
 	private getGitStatus(): { staged: number; unstaged: number; untracked: number } | null {
@@ -156,12 +159,19 @@ export class StatusLineComponent implements Component {
 		}
 
 		try {
-			const output = execSync("git status --porcelain 2>/dev/null", {
-				encoding: "utf8",
-				timeout: 1000,
-				stdio: ["pipe", "pipe", "pipe"],
+			const result = Bun.spawnSync(["git", "status", "--porcelain"], {
+				stdout: "pipe",
+				stderr: "pipe",
 			});
 
+			if (!result.success) {
+				this.cachedGitStatus = null;
+				this.gitStatusLastFetch = now;
+				return null;
+			}
+
+			const output = result.stdout.toString("utf8");
+
 			let staged = 0;
 			let unstaged = 0;
 			let untracked = 0;
@@ -333,7 +343,7 @@ export class StatusLineComponent implements Component {
 					? separatorDef.endCaps.right
 					: separatorDef.endCaps.left
 				: "";
-			const capPrefix = separatorDef.endCaps?.useBgAsFg ? bgAnsi.replace("\x1b[48;", "\x1b[38;") : sepAnsi;
+			const capPrefix = separatorDef.endCaps?.useBgAsFg ? bgAnsi.replace("\x1b[48;", "\x1b[38;") : bgAnsi + sepAnsi;
 			const capText = cap ? `${capPrefix}${cap}\x1b[0m` : "";
 
 			let content = bgAnsi + fgAnsi;

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

@@ -1,4 +1,5 @@
-import * as os from "node:os";
+import { homedir } from "node:os";
+import type { AgentTool } from "@oh-my-pi/pi-agent-core";
 import {
 	Box,
 	Container,
@@ -11,10 +12,10 @@ import {
 	type TUI,
 } from "@oh-my-pi/pi-tui";
 import stripAnsi from "strip-ansi";
-import type { CustomTool } from "../../../core/custom-tools/types";
 import { computeEditDiff, type EditDiffError, type EditDiffResult } from "../../../core/tools/edit-diff";
 import { toolRenderers } from "../../../core/tools/renderers";
 import { DEFAULT_MAX_BYTES, DEFAULT_MAX_LINES, formatSize } from "../../../core/tools/truncate";
+import { convertToPng } from "../../../utils/image-convert";
 import { sanitizeBinaryOutput } from "../../../utils/shell";
 import { getLanguageFromPath, highlightCode, theme } from "../theme/theme";
 import { renderDiff } from "./diff";
@@ -202,7 +203,9 @@ function formatDiagnostics(diag: { errored: boolean; summary: string; messages:
 		const fileBranch = isLastFile ? theme.tree.last : theme.tree.branch;
 
 		// File header with icon
-		output += `\n ${theme.fg("dim", fileBranch)} ${theme.fg("muted", theme.icon.file)} ${theme.fg("accent", filePath)}`;
+		const fileLang = getLanguageFromPath(filePath);
+		const fileIcon = theme.fg("muted", theme.getLangIcon(fileLang));
+		output += `\n ${theme.fg("dim", fileBranch)} ${fileIcon} ${theme.fg("accent", filePath)}`;
 		shown++;
 
 		// Render diagnostics for this file
@@ -310,8 +313,8 @@ function formatArgsPreview(
  * Convert absolute path to tilde notation if it's in home directory
  */
 function shortenPath(path: string): string {
-	const home = os.homedir();
-	if (path.startsWith(home)) {
+	const home = homedir();
+	if (home && path.startsWith(home)) {
 		return `~${path.slice(home.length)}`;
 	}
 	return path;
@@ -341,7 +344,7 @@ export class ToolExecutionComponent extends Container {
 	private expanded = false;
 	private showImages: boolean;
 	private isPartial = true;
-	private customTool?: CustomTool;
+	private tool?: AgentTool;
 	private ui: TUI;
 	private cwd: string;
 	private result?: {
@@ -352,6 +355,8 @@ export class ToolExecutionComponent extends Container {
 	// Cached edit diff preview (computed when args arrive, before tool executes)
 	private editDiffPreview?: EditDiffResult | EditDiffError;
 	private editDiffArgsKey?: string; // Track which args the preview is for
+	// Cached converted images for Kitty protocol (which requires PNG), keyed by index
+	private convertedImages: Map<number, { data: string; mimeType: string }> = new Map();
 	// Spinner animation for partial task results
 	private spinnerFrame = 0;
 	private spinnerInterval: ReturnType<typeof setInterval> | null = null;
@@ -360,7 +365,7 @@ export class ToolExecutionComponent extends Container {
 		toolName: string,
 		args: any,
 		options: ToolExecutionOptions = {},
-		customTool: CustomTool | undefined,
+		tool: AgentTool | undefined,
 		ui: TUI,
 		cwd: string = process.cwd(),
 	) {
@@ -368,7 +373,7 @@ export class ToolExecutionComponent extends Container {
 		this.toolName = toolName;
 		this.args = args;
 		this.showImages = options.showImages ?? true;
-		this.customTool = customTool;
+		this.tool = tool;
 		this.ui = ui;
 		this.cwd = cwd;
 
@@ -380,7 +385,8 @@ export class ToolExecutionComponent extends Container {
 
 		// Use Box for custom tools, bash, or built-in tools that have renderers
 		const hasRenderer = toolName in toolRenderers;
-		if (customTool || toolName === "bash" || hasRenderer) {
+		const hasCustomRenderer = !!(tool?.renderCall || tool?.renderResult);
+		if (hasCustomRenderer || toolName === "bash" || hasRenderer) {
 			this.addChild(this.contentBox);
 		} else {
 			this.addChild(this.contentText);
@@ -447,6 +453,39 @@ export class ToolExecutionComponent extends Container {
 		this.isPartial = isPartial;
 		this.updateSpinnerAnimation();
 		this.updateDisplay();
+		// Convert non-PNG images to PNG for Kitty protocol (async)
+		this.maybeConvertImagesForKitty();
+	}
+
+	/**
+	 * Convert non-PNG images to PNG for Kitty graphics protocol.
+	 * Kitty requires PNG format (f=100), so JPEG/GIF/WebP won't display.
+	 */
+	private maybeConvertImagesForKitty(): void {
+		const caps = getCapabilities();
+		// Only needed for Kitty protocol
+		if (caps.images !== "kitty") return;
+		if (!this.result) return;
+
+		const imageBlocks = this.result.content?.filter((c: any) => c.type === "image") || [];
+
+		for (let i = 0; i < imageBlocks.length; i++) {
+			const img = imageBlocks[i];
+			if (!img.data || !img.mimeType) continue;
+			// Skip if already PNG or already converted
+			if (img.mimeType === "image/png") continue;
+			if (this.convertedImages.has(i)) continue;
+
+			// Convert async
+			const index = i;
+			convertToPng(img.data, img.mimeType).then((converted) => {
+				if (converted) {
+					this.convertedImages.set(index, converted);
+					this.updateDisplay();
+					this.ui.requestRender();
+				}
+			});
+		}
 	}
 
 	/**
@@ -497,17 +536,23 @@ export class ToolExecutionComponent extends Container {
 				: (text: string) => theme.bg("toolSuccessBg", text);
 
 		// Check for custom tool rendering
-		if (this.customTool) {
+		if (this.tool && (this.tool.renderCall || this.tool.renderResult)) {
+			const tool = this.tool;
 			// Custom tools use Box for flexible component rendering
 			this.contentBox.setBgFn(bgFn);
 			this.contentBox.clear();
 
 			// Render call component
-			if (this.customTool.renderCall) {
+			if (tool.renderCall) {
 				try {
-					const callComponent = this.customTool.renderCall(this.args, theme);
+					const callComponent = tool.renderCall(this.args, theme);
 					if (callComponent) {
-						this.contentBox.addChild(callComponent);
+						// Ensure component has invalidate() method for Component interface
+						const component = callComponent as any;
+						if (!component.invalidate) {
+							component.invalidate = () => {};
+						}
+						this.contentBox.addChild(component);
 					}
 				} catch {
 					// Fall back to default on error
@@ -519,15 +564,20 @@ export class ToolExecutionComponent extends Container {
 			}
 
 			// Render result component if we have a result
-			if (this.result && this.customTool.renderResult) {
+			if (this.result && tool.renderResult) {
 				try {
-					const resultComponent = this.customTool.renderResult(
+					const resultComponent = tool.renderResult(
 						{ content: this.result.content as any, details: this.result.details },
 						{ expanded: this.expanded, isPartial: this.isPartial, spinnerFrame: this.spinnerFrame },
 						theme,
 					);
 					if (resultComponent) {
-						this.contentBox.addChild(resultComponent);
+						// Ensure component has invalidate() method for Component interface
+						const component = resultComponent as any;
+						if (!component.invalidate) {
+							component.invalidate = () => {};
+						}
+						this.contentBox.addChild(component);
 					}
 				} catch {
 					// Fall back to showing raw output on error
@@ -558,7 +608,12 @@ export class ToolExecutionComponent extends Container {
 			try {
 				const callComponent = renderer.renderCall(this.args, theme);
 				if (callComponent) {
-					this.contentBox.addChild(callComponent);
+					// Ensure component has invalidate() method for Component interface
+					const component = callComponent as any;
+					if (!component.invalidate) {
+						component.invalidate = () => {};
+					}
+					this.contentBox.addChild(component);
 				}
 			} catch {
 				// Fall back to default on error
@@ -574,7 +629,12 @@ export class ToolExecutionComponent extends Container {
 						theme,
 					);
 					if (resultComponent) {
-						this.contentBox.addChild(resultComponent);
+						// Ensure component has invalidate() method for Component interface
+						const component = resultComponent as any;
+						if (!component.invalidate) {
+							component.invalidate = () => {};
+						}
+						this.contentBox.addChild(component);
 					}
 				} catch {
 					// Fall back to showing raw output on error
@@ -604,14 +664,25 @@ export class ToolExecutionComponent extends Container {
 			const imageBlocks = this.result.content?.filter((c: any) => c.type === "image") || [];
 			const caps = getCapabilities();
 
-			for (const img of imageBlocks) {
+			for (let i = 0; i < imageBlocks.length; i++) {
+				const img = imageBlocks[i];
 				if (caps.images && this.showImages && img.data && img.mimeType) {
+					// Use converted PNG for Kitty protocol if available
+					const converted = this.convertedImages.get(i);
+					const imageData = converted?.data ?? img.data;
+					const imageMimeType = converted?.mimeType ?? img.mimeType;
+
+					// For Kitty, skip non-PNG images that haven't been converted yet
+					if (caps.images === "kitty" && imageMimeType !== "image/png") {
+						continue;
+					}
+
 					const spacer = new Spacer(1);
 					this.addChild(spacer);
 					this.imageSpacers.push(spacer);
 					const imageComponent = new Image(
-						img.data,
-						img.mimeType,
+						imageData,
+						imageMimeType,
 						{ fallbackColor: (s: string) => theme.fg("toolOutput", s) },
 						{ maxWidthCells: 60 },
 					);
@@ -840,6 +911,8 @@ export class ToolExecutionComponent extends Container {
 		} else if (this.toolName === "edit") {
 			const rawPath = this.args?.file_path || this.args?.path || "";
 			const path = shortenPath(rawPath);
+			const editLanguage = getLanguageFromPath(rawPath) ?? "text";
+			const editIcon = theme.fg("muted", theme.getLangIcon(editLanguage));
 
 			// Build path display, appending :line if we have diff info
 			let pathDisplay = path ? theme.fg("accent", path) : theme.fg("toolOutput", theme.format.ellipsis);
@@ -852,9 +925,8 @@ export class ToolExecutionComponent extends Container {
 				pathDisplay += theme.fg("warning", `:${firstChangedLine}`);
 			}
 
-			text = `${theme.fg("toolTitle", theme.bold("edit"))} ${pathDisplay}`;
+			text = `${theme.fg("toolTitle", theme.bold("edit"))} ${editIcon} ${pathDisplay}`;
 
-			const editLanguage = getLanguageFromPath(rawPath) ?? "text";
 			const editLineCount = countLines(this.args?.newText ?? this.args?.oldText ?? "");
 			text += `\n${formatMetadataLine(editLineCount, editLanguage)}`;