@oh-my-pi/pi-coding-agent 15.0.0 → 15.0.2

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

@@ -7,19 +7,23 @@ import {
 	Container,
 	Ellipsis,
 	ImageProtocol,
-	Loader,
-	Spacer,
+	type Loader,
 	TERMINAL,
 	Text,
 	type TUI,
 	truncateToWidth,
 	visibleWidth,
 } from "@oh-my-pi/pi-tui";
-import { getSymbolTheme, theme } from "../../modes/theme/theme";
-import { formatTruncationMetaNotice, type TruncationMeta } from "../../tools/output-meta";
+import { theme } from "../../modes/theme/theme";
+import type { TruncationMeta } from "../../tools/output-meta";
 import { getSixelLineMask, isSixelPassthroughEnabled, sanitizeWithOptionalSixelPassthrough } from "../../utils/sixel";
-import { DynamicBorder } from "./dynamic-border";
-import { truncateToVisualLines } from "./visual-truncate";
+import {
+	buildExecutionFrame,
+	buildStatusFooter,
+	createCollapsedPreview,
+	type ExecutionStatus,
+	resolveExecutionStatus,
+} from "./execution-shared";
 
 // Preview line limit when not expanded (matches tool execution behavior)
 const PREVIEW_LINES = 20;
@@ -31,7 +35,7 @@ const CHUNK_THROTTLE_MS = 50;
 
 export class BashExecutionComponent extends Container {
 	#outputLines: string[] = [];
-	#status: "running" | "complete" | "cancelled" | "error" = "running";
+	#status: ExecutionStatus = "running";
 	#exitCode: number | undefined = undefined;
 	#loader: Loader;
 	#truncation?: TruncationMeta;
@@ -50,34 +54,14 @@ export class BashExecutionComponent extends Container {
 
 		// Use dim border for excluded-from-context commands (!! prefix)
 		const colorKey = excludeFromContext ? "dim" : "bashMode";
-		const borderColor = (str: string) => theme.fg(colorKey, 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);
+		const { contentContainer, loader } = buildExecutionFrame(this, ui, colorKey);
+		this.#contentContainer = contentContainer;
+		this.#loader = loader;
 
 		// Command header
 		this.#headerText = new Text(theme.fg(colorKey, theme.bold(`$ ${command}`)), 1, 0);
 		this.#contentContainer.addChild(this.#headerText);
-
-		// Loader
-		this.#loader = new Loader(
-			ui,
-			spinner => theme.fg(colorKey, spinner),
-			text => theme.fg("muted", text),
-			`Running… (esc to cancel)`,
-			getSymbolTheme().spinnerFrames,
-		);
 		this.#contentContainer.addChild(this.#loader);
-
-		// Bottom border
-		this.addChild(new DynamicBorder(borderColor));
 	}
 
 	/**
@@ -130,11 +114,7 @@ export class BashExecutionComponent extends Container {
 		options?: { output?: string; truncation?: TruncationMeta },
 	): void {
 		this.#exitCode = exitCode;
-		this.#status = cancelled
-			? "cancelled"
-			: exitCode !== 0 && exitCode !== undefined && exitCode !== null
-				? "error"
-				: "complete";
+		this.#status = resolveExecutionStatus(exitCode, cancelled);
 		this.#truncation = options?.truncation;
 		if (options?.output !== undefined) {
 			this.#setOutput(options.output);
@@ -182,14 +162,7 @@ export class BashExecutionComponent extends Container {
 			} else {
 				// Use shared visual truncation utility, recomputed per render width
 				const styledOutput = previewLogicalLines.map(line => theme.fg("muted", line)).join("\n");
-				const previewText = `\n${styledOutput}`;
-				this.#contentContainer.addChild({
-					render: (width: number) => {
-						const { visualLines } = truncateToVisualLines(previewText, PREVIEW_LINES, width, 1);
-						return visualLines;
-					},
-					invalidate: () => {},
-				});
+				this.#contentContainer.addChild(createCollapsedPreview(`\n${styledOutput}`, PREVIEW_LINES));
 			}
 		}
 
@@ -197,26 +170,14 @@ export class BashExecutionComponent extends Container {
 		if (this.#status === "running") {
 			this.#contentContainer.addChild(this.#loader);
 		} else {
-			const statusParts: string[] = [];
-
-			// Show how many lines are hidden (collapsed preview)
-			if (hiddenLineCount > 0 && !hasSixelOutput) {
-				statusParts.push(theme.fg("dim", `… ${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})`));
-			}
-
-			if (this.#truncation) {
-				statusParts.push(theme.fg("warning", formatTruncationMetaNotice(this.#truncation)));
-			}
-
-			if (statusParts.length > 0) {
-				this.#contentContainer.addChild(new Text(`\n${statusParts.join("\n")}`, 1, 0));
-			}
+			const footer = buildStatusFooter({
+				status: this.#status,
+				exitCode: this.#exitCode,
+				truncation: this.#truncation,
+				hiddenLineCount,
+				suppressHiddenCount: hasSixelOutput,
+			});
+			if (footer) this.#contentContainer.addChild(footer);
 		}
 	}
 

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

@@ -1,9 +1,9 @@
-import type { TextContent } from "@oh-my-pi/pi-ai";
 import type { Component } from "@oh-my-pi/pi-tui";
-import { Box, Container, Markdown, Spacer, Text } from "@oh-my-pi/pi-tui";
+import { Box, Container, Spacer } from "@oh-my-pi/pi-tui";
 import type { MessageRenderer } from "../../extensibility/extensions/types";
-import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import { theme } from "../../modes/theme/theme";
 import type { CustomMessage } from "../../session/messages";
+import { renderFramedMessage } from "./message-frame";
 
 /**
  * Component that renders a custom message entry from extensions.
@@ -41,51 +41,25 @@ export class CustomMessageComponent extends Container {
 	}
 
 	#rebuild(): void {
-		// Remove previous content component
 		if (this.#customComponent) {
 			this.removeChild(this.#customComponent);
 			this.#customComponent = undefined;
 		}
 		this.removeChild(this.#box);
 
-		// Try custom renderer first - it handles its own styling
-		if (this.customRenderer) {
-			try {
-				const component = this.customRenderer(this.message, { expanded: this.#expanded }, theme);
-				if (component) {
-					this.#customComponent = component;
-					this.addChild(component);
-					return;
-				}
-			} catch {
-				// Fall through to default rendering
-			}
-		}
-
-		// Default rendering uses our box
-		this.addChild(this.#box);
-		this.#box.clear();
+		const custom = renderFramedMessage({
+			message: this.message,
+			box: this.#box,
+			expanded: this.#expanded,
+			customRenderer: this.customRenderer,
+			// Extension messages render full content; no collapse-on-fold behaviour.
+		});
 
-		// Default rendering: label + content
-		const label = theme.fg("customMessageLabel", theme.bold(`[${this.message.customType}]`));
-		this.#box.addChild(new Text(label, 0, 0));
-		this.#box.addChild(new Spacer(1));
-
-		// Extract text content
-		let text: string;
-		if (typeof this.message.content === "string") {
-			text = this.message.content;
+		if (custom) {
+			this.#customComponent = custom;
+			this.addChild(custom);
 		} else {
-			text = this.message.content
-				.filter((c): c is TextContent => c.type === "text")
-				.map(c => c.text)
-				.join("\n");
+			this.addChild(this.#box);
 		}
-
-		this.#box.addChild(
-			new Markdown(text, 0, 0, getMarkdownTheme(), {
-				color: (value: string) => theme.fg("customMessageText", value),
-			}),
-		);
 	}
 }

package/src/modes/components/eval-execution.ts

@@ -4,11 +4,17 @@
  */
 
 import { sanitizeText } from "@oh-my-pi/pi-natives";
-import { Container, Loader, Spacer, Text, type TUI } from "@oh-my-pi/pi-tui";
-import { getSymbolTheme, highlightCode, theme } from "../../modes/theme/theme";
-import { formatTruncationMetaNotice, type TruncationMeta } from "../../tools/output-meta";
-import { DynamicBorder } from "./dynamic-border";
-import { truncateToVisualLines } from "./visual-truncate";
+import { Container, type Loader, Text, type TUI } from "@oh-my-pi/pi-tui";
+import { highlightCode, theme } from "../../modes/theme/theme";
+import type { TruncationMeta } from "../../tools/output-meta";
+import {
+	buildExecutionFrame,
+	buildStatusFooter,
+	createCollapsedPreview,
+	type ExecutionColorKey,
+	type ExecutionStatus,
+	resolveExecutionStatus,
+} from "./execution-shared";
 
 const PREVIEW_LINES = 20;
 const MAX_DISPLAY_LINE_CHARS = 4000;
@@ -17,7 +23,7 @@ export type EvalExecutionLanguage = "python" | "js";
 
 export class EvalExecutionComponent extends Container {
 	#outputLines: string[] = [];
-	#status: "running" | "complete" | "cancelled" | "error" = "running";
+	#status: ExecutionStatus = "running";
 	#exitCode: number | undefined = undefined;
 	#loader: Loader;
 	#truncation?: TruncationMeta;
@@ -28,7 +34,7 @@ export class EvalExecutionComponent extends Container {
 		return this.language === "js" ? "javascript" : "python";
 	}
 
-	#formatHeader(colorKey: "dim" | "pythonMode"): Text {
+	#formatHeader(colorKey: ExecutionColorKey): Text {
 		const prompt = theme.fg(colorKey, theme.bold(">>>"));
 		const continuation = theme.fg(colorKey, "    ");
 		const codeLines = highlightCode(this.code, this.#highlightLang());
@@ -46,26 +52,13 @@ export class EvalExecutionComponent extends Container {
 	) {
 		super();
 
-		const colorKey = this.excludeFromContext ? "dim" : "pythonMode";
-		const borderColor = (str: string) => theme.fg(colorKey, str);
+		const colorKey: ExecutionColorKey = this.excludeFromContext ? "dim" : "pythonMode";
+		const { contentContainer, loader } = buildExecutionFrame(this, ui, colorKey);
+		this.#contentContainer = contentContainer;
+		this.#loader = loader;
 
-		this.addChild(new Spacer(1));
-		this.addChild(new DynamicBorder(borderColor));
-
-		this.#contentContainer = new Container();
-		this.addChild(this.#contentContainer);
 		this.#contentContainer.addChild(this.#formatHeader(colorKey));
-
-		this.#loader = new Loader(
-			ui,
-			spinner => theme.fg(colorKey, spinner),
-			text => theme.fg("muted", text),
-			`Running… (esc to cancel)`,
-			getSymbolTheme().spinnerFrames,
-		);
 		this.#contentContainer.addChild(this.#loader);
-
-		this.addChild(new DynamicBorder(borderColor));
 	}
 
 	setExpanded(expanded: boolean): void {
@@ -99,11 +92,7 @@ export class EvalExecutionComponent extends Container {
 		options?: { output?: string; truncation?: TruncationMeta },
 	): void {
 		this.#exitCode = exitCode;
-		this.#status = cancelled
-			? "cancelled"
-			: exitCode !== 0 && exitCode !== undefined && exitCode !== null
-				? "error"
-				: "complete";
+		this.#status = resolveExecutionStatus(exitCode, cancelled);
 		this.#truncation = options?.truncation;
 		if (options?.output !== undefined) {
 			this.#setOutput(options.output);
@@ -120,7 +109,7 @@ export class EvalExecutionComponent extends Container {
 
 		this.#contentContainer.clear();
 
-		const colorKey = this.excludeFromContext ? "dim" : "pythonMode";
+		const colorKey: ExecutionColorKey = this.excludeFromContext ? "dim" : "pythonMode";
 		this.#contentContainer.addChild(this.#formatHeader(colorKey));
 
 		if (availableLines.length > 0) {
@@ -129,39 +118,20 @@ export class EvalExecutionComponent extends Container {
 				this.#contentContainer.addChild(new Text(`\n${displayText}`, 1, 0));
 			} else {
 				const styledOutput = previewLogicalLines.map(line => theme.fg("muted", line)).join("\n");
-				const previewText = `\n${styledOutput}`;
-				this.#contentContainer.addChild({
-					render: (width: number) => {
-						const { visualLines } = truncateToVisualLines(previewText, PREVIEW_LINES, width, 1);
-						return visualLines;
-					},
-					invalidate: () => {},
-				});
+				this.#contentContainer.addChild(createCollapsedPreview(`\n${styledOutput}`, PREVIEW_LINES));
 			}
 		}
 
 		if (this.#status === "running") {
 			this.#contentContainer.addChild(this.#loader);
 		} else {
-			const statusParts: string[] = [];
-
-			if (hiddenLineCount > 0) {
-				statusParts.push(theme.fg("dim", `… ${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})`));
-			}
-
-			if (this.#truncation) {
-				statusParts.push(theme.fg("warning", formatTruncationMetaNotice(this.#truncation)));
-			}
-
-			if (statusParts.length > 0) {
-				this.#contentContainer.addChild(new Text(`\n${statusParts.join("\n")}`, 1, 0));
-			}
+			const footer = buildStatusFooter({
+				status: this.#status,
+				exitCode: this.#exitCode,
+				truncation: this.#truncation,
+				hiddenLineCount,
+			});
+			if (footer) this.#contentContainer.addChild(footer);
 		}
 	}
 

package/src/modes/components/execution-shared.ts

@@ -0,0 +1,102 @@
+/**
+ * Shared rendering primitives for bash/eval execution components.
+ *
+ * Each helper isolates a piece of structure both components share verbatim
+ * (frame layout, collapsed preview, post-run status line). Differences in
+ * how each component prepares its header, output lines, or sixel masking
+ * stay in their respective files.
+ */
+
+import { type Component, Container, Loader, Spacer, Text, type TUI } from "@oh-my-pi/pi-tui";
+import { getSymbolTheme, theme } from "../../modes/theme/theme";
+import { formatTruncationMetaNotice, type TruncationMeta } from "../../tools/output-meta";
+import { DynamicBorder } from "./dynamic-border";
+import { truncateToVisualLines } from "./visual-truncate";
+
+export type ExecutionStatus = "running" | "complete" | "cancelled" | "error";
+
+/** Theme color keys valid for an execution frame. */
+export type ExecutionColorKey = "dim" | "bashMode" | "pythonMode";
+
+/**
+ * Build the spacer + top border + content container + bottom border scaffold
+ * that bash and eval execution components share. The caller appends the
+ * header (command vs `>>>` prompt) and the returned loader to
+ * `contentContainer` so per-mode order is preserved.
+ */
+export function buildExecutionFrame(
+	parent: Container,
+	ui: TUI,
+	colorKey: ExecutionColorKey,
+): { contentContainer: Container; loader: Loader } {
+	const borderColor = (str: string) => theme.fg(colorKey, str);
+
+	parent.addChild(new Spacer(1));
+	parent.addChild(new DynamicBorder(borderColor));
+
+	const contentContainer = new Container();
+	parent.addChild(contentContainer);
+
+	const loader = new Loader(
+		ui,
+		spinner => theme.fg(colorKey, spinner),
+		text => theme.fg("muted", text),
+		`Running… (esc to cancel)`,
+		getSymbolTheme().spinnerFrames,
+	);
+
+	parent.addChild(new DynamicBorder(borderColor));
+	return { contentContainer, loader };
+}
+
+/**
+ * Wrap a styled preview block in a render-time visual-line truncator.
+ * Recomputed per render width so wrapping stays in sync with terminal size.
+ */
+export function createCollapsedPreview(previewText: string, previewLines: number): Component {
+	return {
+		render: (width: number) => truncateToVisualLines(previewText, previewLines, width, 1).visualLines,
+		invalidate: () => {},
+	};
+}
+
+/**
+ * Build the post-run status block (hidden-line hint, exit/cancel marker,
+ * truncation notice). Returns undefined when there is nothing to display so
+ * callers can skip appending a stray Text child.
+ */
+export function buildStatusFooter(opts: {
+	status: ExecutionStatus;
+	exitCode: number | undefined;
+	truncation: TruncationMeta | undefined;
+	hiddenLineCount: number;
+	/** Suppress the "… N more lines" hint (used when sixel passthrough renders the full output). */
+	suppressHiddenCount?: boolean;
+}): Text | undefined {
+	const parts: string[] = [];
+
+	if (opts.hiddenLineCount > 0 && !opts.suppressHiddenCount) {
+		parts.push(theme.fg("dim", `… ${opts.hiddenLineCount} more lines (ctrl+o to expand)`));
+	}
+	if (opts.status === "cancelled") {
+		parts.push(theme.fg("warning", "(cancelled)"));
+	} else if (opts.status === "error") {
+		parts.push(theme.fg("error", `(exit ${opts.exitCode})`));
+	}
+	if (opts.truncation) {
+		parts.push(theme.fg("warning", formatTruncationMetaNotice(opts.truncation)));
+	}
+
+	if (parts.length === 0) return undefined;
+	return new Text(`\n${parts.join("\n")}`, 1, 0);
+}
+
+/**
+ * Derive the post-run status from an exit code + cancellation flag using the
+ * same precedence both execution components apply.
+ */
+export function resolveExecutionStatus(exitCode: number | undefined, cancelled: boolean): ExecutionStatus {
+	if (cancelled) return "cancelled";
+	if (exitCode !== 0 && exitCode !== undefined && exitCode !== null) return "error";
+	return "complete";
+}

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

@@ -1,9 +1,12 @@
-import type { TextContent } from "@oh-my-pi/pi-ai";
 import type { Component } from "@oh-my-pi/pi-tui";
-import { Box, Container, Markdown, Spacer, Text } from "@oh-my-pi/pi-tui";
+import { Box, Container, Spacer } from "@oh-my-pi/pi-tui";
 import type { HookMessageRenderer } from "../../extensibility/hooks/types";
-import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import { theme } from "../../modes/theme/theme";
 import type { HookMessage } from "../../session/messages";
+import { renderFramedMessage } from "./message-frame";
+
+/** Lines of default markdown body shown before the "…" fold when collapsed. */
+const HOOK_COLLAPSED_LINES = 5;
 
 /**
  * Component that renders a custom message entry from hooks.
@@ -41,60 +44,25 @@ export class HookMessageComponent extends Container {
 	}
 
 	#rebuild(): void {
-		// Remove previous content component
 		if (this.#customComponent) {
 			this.removeChild(this.#customComponent);
 			this.#customComponent = undefined;
 		}
 		this.removeChild(this.#box);
 
-		// Try custom renderer first - it handles its own styling
-		if (this.customRenderer) {
-			try {
-				const component = this.customRenderer(this.message, { expanded: this.#expanded }, theme);
-				if (component) {
-					// Custom renderer provides its own styled component
-					this.#customComponent = component;
-					this.addChild(component);
-					return;
-				}
-			} catch {
-				// Fall through to default rendering
-			}
-		}
-
-		// Default rendering uses our box
-		this.addChild(this.#box);
-		this.#box.clear();
-
-		// Default rendering: label + content
-		const label = theme.fg("customMessageLabel", theme.bold(`[${this.message.customType}]`));
-		this.#box.addChild(new Text(label, 0, 0));
-		this.#box.addChild(new Spacer(1));
+		const custom = renderFramedMessage({
+			message: this.message,
+			box: this.#box,
+			expanded: this.#expanded,
+			customRenderer: this.customRenderer,
+			collapseAfterLines: HOOK_COLLAPSED_LINES,
+		});
 
-		// Extract text content
-		let text: string;
-		if (typeof this.message.content === "string") {
-			text = this.message.content;
+		if (custom) {
+			this.#customComponent = custom;
+			this.addChild(custom);
 		} else {
-			text = this.message.content
-				.filter((c): c is TextContent => c.type === "text")
-				.map(c => c.text)
-				.join("\n");
+			this.addChild(this.#box);
 		}
-
-		// Limit lines when collapsed
-		if (!this.#expanded) {
-			const lines = text.split("\n");
-			if (lines.length > 5) {
-				text = `${lines.slice(0, 5).join("\n")}\n…`;
-			}
-		}
-
-		this.#box.addChild(
-			new Markdown(text, 0, 0, getMarkdownTheme(), {
-				color: (text: string) => theme.fg("customMessageText", text),
-			}),
-		);
 	}
 }

package/src/modes/components/mcp-add-wizard.ts

@@ -47,6 +47,18 @@ type WizardStep =
 	| "scope"
 	| "confirm";
 
+/**
+ * Result of the wizard's OAuth callback. `credentialId` is mandatory;
+ * `clientId`/`clientSecret` are populated when the OAuth provider performed
+ * dynamic client registration (or when the caller pre-supplied them) so the
+ * wizard can fold them into the final `mcp.json` entry for refresh.
+ */
+export interface MCPAddWizardOAuthResult {
+	credentialId: string;
+	clientId?: string;
+	clientSecret?: string;
+}
+
 interface WizardState {
 	name: string;
 	transport: TransportType | null;
@@ -104,7 +116,13 @@ export class MCPAddWizard extends Container {
 	#onCompleteCallback: (name: string, config: MCPServerConfig, scope: Scope) => void;
 	#onCancelCallback: () => void;
 	#onOAuthCallback:
-		| ((authUrl: string, tokenUrl: string, clientId: string, clientSecret: string, scopes: string) => Promise<string>)
+		| ((
+				authUrl: string,
+				tokenUrl: string,
+				clientId: string,
+				clientSecret: string,
+				scopes: string,
+		  ) => Promise<MCPAddWizardOAuthResult>)
 		| null = null;
 	#onTestConnectionCallback: ((config: MCPServerConfig) => Promise<void>) | null = null;
 	#onRenderCallback: (() => void) | null = null;
@@ -118,7 +136,7 @@ export class MCPAddWizard extends Container {
 			clientId: string,
 			clientSecret: string,
 			scopes: string,
-		) => Promise<string>,
+		) => Promise<MCPAddWizardOAuthResult>,
 		onTestConnection?: (config: MCPServerConfig) => Promise<void>,
 		onRender?: () => void,
 		initialName?: string,
@@ -1120,7 +1138,7 @@ export class MCPAddWizard extends Container {
 
 		try {
 			// Call OAuth handler
-			const credentialId = await this.#onOAuthCallback(
+			const oauthResult = await this.#onOAuthCallback(
 				this.#state.oauthAuthUrl,
 				this.#state.oauthTokenUrl,
 				this.#state.oauthClientId,
@@ -1128,8 +1146,11 @@ export class MCPAddWizard extends Container {
 				this.#state.oauthScopes,
 			);
 
-			// Store credential ID
-			this.#state.oauthCredentialId = credentialId;
+			// Store credential ID + any dynamically-registered client credentials,
+			// so the final mcp.json entry persists everything needed for refresh.
+			this.#state.oauthCredentialId = oauthResult.credentialId;
+			if (oauthResult.clientId) this.#state.oauthClientId = oauthResult.clientId;
+			if (oauthResult.clientSecret) this.#state.oauthClientSecret = oauthResult.clientSecret;
 
 			// Show success message
 			this.#contentContainer.clear();