@oh-my-pi/pi-coding-agent 3.37.1 → 4.0.1

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

@@ -3,89 +3,103 @@
  * Displays a list of string options with keyboard navigation.
  */
 
-import { Container, isArrowDown, isArrowUp, isCtrlC, isEnter, isEscape, Spacer, Text } from "@oh-my-pi/pi-tui";
+import {
+	Container,
+	isArrowDown,
+	isArrowUp,
+	isCtrlC,
+	isEnter,
+	isEscape,
+	Spacer,
+	Text,
+	type TUI,
+} from "@oh-my-pi/pi-tui";
 import { theme } from "../theme/theme";
+import { CountdownTimer } from "./countdown-timer";
 import { DynamicBorder } from "./dynamic-border";
 
+export interface HookSelectorOptions {
+	tui?: TUI;
+	timeout?: number;
+}
+
 export class HookSelectorComponent extends Container {
 	private options: string[];
 	private selectedIndex = 0;
 	private listContainer: Container;
 	private onSelectCallback: (option: string) => void;
 	private onCancelCallback: () => void;
-
-	constructor(title: string, options: string[], onSelect: (option: string) => void, onCancel: () => void) {
+	private titleText: Text;
+	private baseTitle: string;
+	private countdown: CountdownTimer | undefined;
+
+	constructor(
+		title: string,
+		options: string[],
+		onSelect: (option: string) => void,
+		onCancel: () => void,
+		opts?: HookSelectorOptions,
+	) {
 		super();
 
 		this.options = options;
 		this.onSelectCallback = onSelect;
 		this.onCancelCallback = onCancel;
+		this.baseTitle = title;
 
-		// Add top border
 		this.addChild(new DynamicBorder());
 		this.addChild(new Spacer(1));
 
-		// Add title
-		this.addChild(new Text(theme.fg("accent", title), 1, 0));
+		this.titleText = new Text(theme.fg("accent", title), 1, 0);
+		this.addChild(this.titleText);
 		this.addChild(new Spacer(1));
 
-		// Create list container
+		if (opts?.timeout && opts.timeout > 0 && opts.tui) {
+			this.countdown = new CountdownTimer(
+				opts.timeout,
+				opts.tui,
+				(s) => this.titleText.setText(theme.fg("accent", `${this.baseTitle} (${s}s)`)),
+				() => this.onCancelCallback(),
+			);
+		}
+
 		this.listContainer = new Container();
 		this.addChild(this.listContainer);
-
 		this.addChild(new Spacer(1));
-
-		// Add hint
-		this.addChild(new Text(theme.fg("dim", "↑↓ navigate  enter select  esc cancel"), 1, 0));
-
+		this.addChild(new Text(theme.fg("dim", "up/down navigate  enter select  esc cancel"), 1, 0));
 		this.addChild(new Spacer(1));
-
-		// Add bottom border
 		this.addChild(new DynamicBorder());
 
-		// Initial render
 		this.updateList();
 	}
 
 	private updateList(): void {
 		this.listContainer.clear();
-
 		for (let i = 0; i < this.options.length; i++) {
-			const option = this.options[i];
 			const isSelected = i === this.selectedIndex;
-
-			let text = "";
-			if (isSelected) {
-				text = theme.fg("accent", `${theme.nav.cursor} `) + theme.fg("accent", option);
-			} else {
-				text = `  ${theme.fg("text", option)}`;
-			}
-
+			const text = isSelected
+				? theme.fg("accent", `${theme.nav.cursor} `) + theme.fg("accent", this.options[i])
+				: `  ${theme.fg("text", this.options[i])}`;
 			this.listContainer.addChild(new Text(text, 1, 0));
 		}
 	}
 
 	handleInput(keyData: string): void {
-		// Up arrow or k
 		if (isArrowUp(keyData) || keyData === "k") {
 			this.selectedIndex = Math.max(0, this.selectedIndex - 1);
 			this.updateList();
-		}
-		// Down arrow or j
-		else if (isArrowDown(keyData) || keyData === "j") {
+		} else if (isArrowDown(keyData) || keyData === "j") {
 			this.selectedIndex = Math.min(this.options.length - 1, this.selectedIndex + 1);
 			this.updateList();
-		}
-		// Enter
-		else if (isEnter(keyData) || keyData === "\n") {
+		} else if (isEnter(keyData) || keyData === "\n") {
 			const selected = this.options[this.selectedIndex];
-			if (selected) {
-				this.onSelectCallback(selected);
-			}
-		}
-		// Escape or Ctrl+C
-		else if (isEscape(keyData) || isCtrlC(keyData)) {
+			if (selected) this.onSelectCallback(selected);
+		} else if (isEscape(keyData) || isCtrlC(keyData)) {
 			this.onCancelCallback();
 		}
 	}
+
+	dispose(): void {
+		this.countdown?.dispose();
+	}
 }

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

@@ -0,0 +1,39 @@
+// UI Components barrel export
+export { ArminComponent } from "./armin";
+export { AssistantMessageComponent } from "./assistant-message";
+export { BashExecutionComponent } from "./bash-execution";
+export { BorderedLoader } from "./bordered-loader";
+export { BranchSummaryMessageComponent } from "./branch-summary-message";
+export { CompactionSummaryMessageComponent } from "./compaction-summary-message";
+export { CountdownTimer } from "./countdown-timer";
+export { CustomEditor } from "./custom-editor";
+export { CustomMessageComponent } from "./custom-message";
+export { type RenderDiffOptions, renderDiff } from "./diff";
+export { DynamicBorder } from "./dynamic-border";
+export { FooterComponent } from "./footer";
+export { HookEditorComponent } from "./hook-editor";
+export { HookInputComponent, type HookInputOptions } from "./hook-input";
+export { HookMessageComponent } from "./hook-message";
+export { HookSelectorComponent } from "./hook-selector";
+export { LoginDialogComponent } from "./login-dialog";
+export { ModelSelectorComponent } from "./model-selector";
+export { OAuthSelectorComponent } from "./oauth-selector";
+export { QueueModeSelectorComponent } from "./queue-mode-selector";
+export { SessionSelectorComponent } from "./session-selector";
+export {
+	type SettingChangeHandler,
+	type SettingsCallbacks,
+	type SettingsRuntimeContext,
+	SettingsSelectorComponent,
+} from "./settings-selector";
+export { ShowImagesSelectorComponent } from "./show-images-selector";
+export { StatusLineComponent } from "./status-line";
+export { ThemeSelectorComponent } from "./theme-selector";
+export { ThinkingSelectorComponent } from "./thinking-selector";
+export { ToolExecutionComponent, type ToolExecutionOptions } from "./tool-execution";
+export { TreeSelectorComponent } from "./tree-selector";
+export { TtsrNotificationComponent } from "./ttsr-notification";
+export { UserMessageComponent } from "./user-message";
+export { UserMessageSelectorComponent } from "./user-message-selector";
+export { truncateToVisualLines, type VisualTruncateResult } from "./visual-truncate";
+export { type LspServerInfo, type RecentSession, WelcomeComponent } from "./welcome";

package/src/modes/interactive/components/login-dialog.ts

@@ -0,0 +1,160 @@
+import { getOAuthProviders } from "@oh-my-pi/pi-ai";
+import { Container, getEditorKeybindings, Input, Spacer, Text, type TUI } from "@oh-my-pi/pi-tui";
+import { theme } from "../theme/theme";
+import { DynamicBorder } from "./dynamic-border";
+
+/**
+ * Login dialog component - replaces editor during OAuth login flow
+ */
+export class LoginDialogComponent extends Container {
+	private contentContainer: Container;
+	private input: Input;
+	private tui: TUI;
+	private abortController = new AbortController();
+	private inputResolver?: (value: string) => void;
+	private inputRejecter?: (error: Error) => void;
+
+	constructor(
+		tui: TUI,
+		providerId: string,
+		private onComplete: (success: boolean, message?: string) => void,
+	) {
+		super();
+		this.tui = tui;
+
+		const providerInfo = getOAuthProviders().find((p) => p.id === providerId);
+		const providerName = providerInfo?.name || providerId;
+
+		// Top border
+		this.addChild(new DynamicBorder());
+
+		// Title
+		this.addChild(new Text(theme.fg("warning", `Login to ${providerName}`), 1, 0));
+
+		// Dynamic content area
+		this.contentContainer = new Container();
+		this.addChild(this.contentContainer);
+
+		// Input (always present, used when needed)
+		this.input = new Input();
+		this.input.onSubmit = () => {
+			if (this.inputResolver) {
+				this.inputResolver(this.input.getValue());
+				this.inputResolver = undefined;
+				this.inputRejecter = undefined;
+			}
+		};
+		this.input.onEscape = () => {
+			this.cancel();
+		};
+
+		// Bottom border
+		this.addChild(new DynamicBorder());
+	}
+
+	get signal(): AbortSignal {
+		return this.abortController.signal;
+	}
+
+	private cancel(): void {
+		this.abortController.abort();
+		if (this.inputRejecter) {
+			this.inputRejecter(new Error("Login cancelled"));
+			this.inputResolver = undefined;
+			this.inputRejecter = undefined;
+		}
+		this.onComplete(false, "Login cancelled");
+	}
+
+	/**
+	 * Called by onAuth callback - show URL and optional instructions
+	 */
+	showAuth(url: string, instructions?: string): void {
+		this.contentContainer.clear();
+		this.contentContainer.addChild(new Spacer(1));
+		this.contentContainer.addChild(new Text(theme.fg("accent", url), 1, 0));
+
+		const clickHint = process.platform === "darwin" ? "Cmd+click to open" : "Ctrl+click to open";
+		const hyperlink = `\x1b]8;;${url}\x07${clickHint}\x1b]8;;\x07`;
+		this.contentContainer.addChild(new Text(theme.fg("dim", hyperlink), 1, 0));
+
+		if (instructions) {
+			this.contentContainer.addChild(new Spacer(1));
+			this.contentContainer.addChild(new Text(theme.fg("warning", instructions), 1, 0));
+		}
+
+		// Try to open browser using Bun.spawn
+		const openCmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+		Bun.spawn([openCmd, url], { stdout: "ignore", stderr: "ignore" });
+
+		this.tui.requestRender();
+	}
+
+	/**
+	 * Show input for manual code/URL entry (for callback server providers)
+	 */
+	showManualInput(prompt: string): Promise<string> {
+		this.contentContainer.addChild(new Spacer(1));
+		this.contentContainer.addChild(new Text(theme.fg("dim", prompt), 1, 0));
+		this.contentContainer.addChild(this.input);
+		this.contentContainer.addChild(new Text(theme.fg("dim", "(Escape to cancel)"), 1, 0));
+		this.tui.requestRender();
+
+		return new Promise((resolve, reject) => {
+			this.inputResolver = resolve;
+			this.inputRejecter = reject;
+		});
+	}
+
+	/**
+	 * Called by onPrompt callback - show prompt and wait for input
+	 * Note: Does NOT clear content, appends to existing (preserves URL from showAuth)
+	 */
+	showPrompt(message: string, placeholder?: string): Promise<string> {
+		this.contentContainer.addChild(new Spacer(1));
+		this.contentContainer.addChild(new Text(theme.fg("text", message), 1, 0));
+		if (placeholder) {
+			this.contentContainer.addChild(new Text(theme.fg("dim", `e.g., ${placeholder}`), 1, 0));
+		}
+		this.contentContainer.addChild(this.input);
+		this.contentContainer.addChild(new Text(theme.fg("dim", "(Escape to cancel, Enter to submit)"), 1, 0));
+
+		this.input.setValue("");
+		this.tui.requestRender();
+
+		return new Promise((resolve, reject) => {
+			this.inputResolver = resolve;
+			this.inputRejecter = reject;
+		});
+	}
+
+	/**
+	 * Show waiting message (for polling flows like GitHub Copilot)
+	 */
+	showWaiting(message: string): void {
+		this.contentContainer.addChild(new Spacer(1));
+		this.contentContainer.addChild(new Text(theme.fg("dim", message), 1, 0));
+		this.contentContainer.addChild(new Text(theme.fg("dim", "(Escape to cancel)"), 1, 0));
+		this.tui.requestRender();
+	}
+
+	/**
+	 * Called by onProgress callback
+	 */
+	showProgress(message: string): void {
+		this.contentContainer.addChild(new Text(theme.fg("dim", message), 1, 0));
+		this.tui.requestRender();
+	}
+
+	handleInput(data: string): void {
+		const kb = getEditorKeybindings();
+
+		if (kb.matches(data, "selectCancel")) {
+			this.cancel();
+			return;
+		}
+
+		// Pass to input
+		this.input.handleInput(data);
+	}
+}

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

@@ -93,7 +93,7 @@ export class ModelSelectorComponent extends Container {
 		scopedModels: ReadonlyArray<ScopedModelItem>,
 		onSelect: (model: Model<any>, role: string) => void,
 		onCancel: () => void,
-		options?: { temporaryOnly?: boolean },
+		options?: { temporaryOnly?: boolean; initialSearchInput?: string },
 	) {
 		super();
 
@@ -105,6 +105,7 @@ export class ModelSelectorComponent extends Container {
 		this.onSelectCallback = onSelect;
 		this.onCancelCallback = onCancel;
 		this.temporaryOnly = options?.temporaryOnly ?? false;
+		const initialSearchInput = options?.initialSearchInput;
 
 		// Load current role assignments from settings
 		this._loadRoleModels();
@@ -129,6 +130,9 @@ export class ModelSelectorComponent extends Container {
 
 		// Create search input
 		this.searchInput = new Input();
+		if (initialSearchInput) {
+			this.searchInput.setValue(initialSearchInput);
+		}
 		this.searchInput.onSubmit = () => {
 			// Enter on search input opens menu if we have a selection
 			if (this.filteredModels[this.selectedIndex]) {
@@ -156,7 +160,11 @@ export class ModelSelectorComponent extends Container {
 		this.loadModels().then(() => {
 			this.buildProviderTabs();
 			this.updateTabBar();
-			this.updateList();
+			if (initialSearchInput) {
+				this.filterModels(initialSearchInput);
+			} else {
+				this.updateList();
+			}
 			// Request re-render after models are loaded
 			this.tui.requestRender();
 		});

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

@@ -47,7 +47,11 @@ class SessionList implements Component {
 	}
 
 	private filterSessions(query: string): void {
-		this.filteredSessions = fuzzyFilter(this.allSessions, query, (session) => session.allMessagesText);
+		this.filteredSessions = fuzzyFilter(
+			this.allSessions,
+			query,
+			(session) => `${session.id} ${session.allMessagesText}`,
+		);
 		this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.filteredSessions.length - 1));
 	}
 

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

@@ -135,6 +135,15 @@ export const SETTINGS_DEFS: SettingDef[] = [
 		get: (sm) => sm.getImageAutoResize(),
 		set: (sm, v) => sm.setImageAutoResize(v),
 	},
+	{
+		id: "blockImages",
+		tab: "config",
+		type: "boolean",
+		label: "Block images",
+		description: "Prevent images from being sent to LLM providers",
+		get: (sm) => sm.getBlockImages(),
+		set: (sm, v) => sm.setBlockImages(v),
+	},
 	{
 		id: "steeringMode",
 		tab: "config",

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

@@ -1,4 +1,5 @@
 import { hostname as osHostname } from "node:os";
+import { shortenPath } from "../../../../core/tools/render-utils";
 import { theme } from "../../theme/theme";
 import type { RenderedSegment, SegmentContext, StatusLineSegment, StatusLineSegmentId } from "./types";
 
@@ -76,10 +77,9 @@ const pathSegment: StatusLineSegment = {
 		const opts = ctx.options.path ?? {};
 
 		let pwd = process.cwd();
-		const home = process.env.HOME || process.env.USERPROFILE;
 
-		if (opts.abbreviate !== false && home && pwd.startsWith(home)) {
-			pwd = `~${pwd.slice(home.length)}`;
+		if (opts.abbreviate !== false) {
+			pwd = shortenPath(pwd);
 		}
 		if (opts.stripWorkPrefix !== false && pwd.startsWith("/work/")) {
 			pwd = pwd.slice(6);

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

@@ -17,7 +17,6 @@ import { convertToPng } from "../../../utils/image-convert";
 import { sanitizeBinaryOutput } from "../../../utils/shell";
 import { theme } from "../theme/theme";
 import { renderDiff } from "./diff";
-import { truncateToVisualLines } from "./visual-truncate";
 
 // Preview line limit for bash when not expanded
 const BASH_PREVIEW_LINES = 5;
@@ -297,6 +296,11 @@ export class ToolExecutionComponent extends Container {
 		this.updateDisplay();
 	}
 
+	override invalidate(): void {
+		super.invalidate();
+		this.updateDisplay();
+	}
+
 	private updateDisplay(): void {
 		// Set background based on state
 		const bgFn = this.isPartial
@@ -477,22 +481,11 @@ export class ToolExecutionComponent extends Container {
 		const context: Record<string, unknown> = {};
 
 		if (this.toolName === "bash" && this.result) {
-			// Bash needs visual line truncation context
+			// Pass raw output and expanded state - renderer handles width-aware truncation
 			const output = this.getTextOutput().trim();
-			if (output && !this.expanded) {
-				const styledOutput = output
-					.split("\n")
-					.map((line) => theme.fg("toolOutput", line))
-					.join("\n");
-				const { visualLines, skippedCount } = truncateToVisualLines(
-					`\n${styledOutput}`,
-					BASH_PREVIEW_LINES,
-					this.ui.terminal.columns - 2,
-				);
-				context.visualLines = visualLines;
-				context.skippedCount = skippedCount;
-				context.totalVisualLines = skippedCount + visualLines.length;
-			}
+			context.output = output;
+			context.expanded = this.expanded;
+			context.previewLines = BASH_PREVIEW_LINES;
 		} else if (this.toolName === "edit") {
 			// Edit needs diff preview and renderDiff function
 			context.editDiffPreview = this.editDiffPreview;

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

@@ -18,6 +18,7 @@ import {
 	truncateToWidth,
 } from "@oh-my-pi/pi-tui";
 import type { SessionTreeNode } from "../../../core/session-manager";
+import { shortenPath } from "../../../core/tools/render-utils";
 import { theme } from "../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
 
@@ -607,12 +608,6 @@ class TreeList implements Component {
 	}
 
 	private formatToolCall(name: string, args: Record<string, unknown>): string {
-		const shortenPath = (p: string): string => {
-			const home = process.env.HOME || process.env.USERPROFILE || "";
-			if (home && p.startsWith(home)) return `~${p.slice(home.length)}`;
-			return p;
-		};
-
 		switch (name) {
 			case "read": {
 				const path = shortenPath(String(args.path || args.file_path || ""));