@heyhuynhgiabuu/pi-pretty 0.6.31 → 0.7.0

package/src/index.ts

@@ -21,6 +21,12 @@ import type {
 } from "@earendil-works/pi-coding-agent";
 import * as hostSdk from "@earendil-works/pi-coding-agent";
 import { createFffAutocompleteProvider } from "./autocomplete.js";
+import {
+	installClaudeChatGrouping,
+	installClaudeExternalToolRenderers,
+	setClaudeStyleTheme,
+	withClaudeToolStyleApi,
+} from "./claude-style.js";
 import {
 	applyConfig,
 	getDefaultAgentDir,
@@ -45,6 +51,7 @@ import {
 	type PerRowThinkingLabels,
 	resolveThinkingIndicatorSettings,
 	resolveWorkingIndicatorSettings,
+	setClaudeThinkingLabels,
 	type ThinkingTimer,
 	thinkingBlockActive,
 	WORKING_INTERVAL_MS,
@@ -76,10 +83,15 @@ export type { PiPrettyDeps };
 export default async function piPrettyExtension(pi: ExtensionAPI, deps?: PiPrettyDeps): Promise<void> {
 	const config = loadConfig();
 	applyConfig(config);
-	pi.registerMarkdownTransformer?.((markdown, context) => {
-		if (context.messageType !== "user" || markdown.trim() === "") return markdown;
-		return ` ${USER_MESSAGE_ICON} ${markdown}`;
-	});
+	const claudeStyle = config.toolStyle === "claudecode";
+	setClaudeThinkingLabels(claudeStyle);
+	// claudecode style keeps user messages plain; the default style prefixes them with a prompt icon.
+	if (!claudeStyle) {
+		pi.registerMarkdownTransformer?.((markdown, context) => {
+			if (context.messageType !== "user" || markdown.trim() === "") return markdown;
+			return ` ${USER_MESSAGE_ICON} ${markdown}`;
+		});
+	}
 	pi.registerFlag?.("pretty-fff-home-scan", {
 		description: "Allow FFF to index the home directory when Pi starts there",
 		type: "boolean",
@@ -214,12 +226,16 @@ export default async function piPrettyExtension(pi: ExtensionAPI, deps?: PiPrett
 		const editorUi = ctx.ui as unknown as EditorUiCompatibility;
 		if (typeof editorUi.setEditorComponent !== "function") return;
 		previousEditorFactory = editorUi.getEditorComponent?.();
-		const PromptEditor = createPromptEditorClass(hostCustomEditor, (icon) => {
-			const theme = ctx.ui.theme;
-			return typeof theme.getThinkingBorderColor === "function"
-				? theme.getThinkingBorderColor(ctx.thinkingLevel ?? "off")(icon)
-				: theme.fg("thinkingText", icon);
-		});
+		const PromptEditor = createPromptEditorClass(
+			hostCustomEditor,
+			(icon) => {
+				const theme = ctx.ui.theme;
+				return typeof theme.getThinkingBorderColor === "function"
+					? theme.getThinkingBorderColor(ctx.thinkingLevel ?? "off")(icon)
+					: theme.fg("thinkingText", icon);
+			},
+			!claudeStyle,
+		);
 		editorUi.setEditorComponent((tui, theme, keybindings) => new PromptEditor(tui, theme, keybindings));
 		promptEditorInstalled = true;
 	};
@@ -294,6 +310,9 @@ export default async function piPrettyExtension(pi: ExtensionAPI, deps?: PiPrett
 
 	pi.on("session_start", async (_event: unknown, ctx: ExtensionContext) => {
 		if (ctx.mode === "tui") {
+			setClaudeStyleTheme(ctx.ui.theme);
+			installClaudeChatGrouping(claudeStyle);
+			installClaudeExternalToolRenderers(hostSdk.ToolExecutionComponent, claudeStyle);
 			installPromptEditor(ctx);
 			ctx.ui.setToolsExpanded(false);
 			// Per-row hidden-thinking labels: intercept the host's label fan-out so
@@ -536,19 +555,20 @@ export default async function piPrettyExtension(pi: ExtensionAPI, deps?: PiPrett
 	// Tool registration
 	// ------------------------------------------------------------------
 
+	const toolPi = claudeStyle ? withClaudeToolStyleApi(pi) : pi;
 	if (isToolEnabled("read") && createReadTool) {
-		registerReadTool(pi, cwd, null, createReadTool(cwd), TextComp);
+		registerReadTool(toolPi, cwd, null, createReadTool(cwd), TextComp);
 	}
 	if (isToolEnabled("bash") && createBashTool) {
-		registerBashTool(pi, cwd, null, createBashTool(cwd), TextComp);
+		registerBashTool(toolPi, cwd, null, createBashTool(cwd), TextComp);
 	}
 	if (isToolEnabled("ls") && createLsTool) {
-		registerLsTool(pi, cwd, null, createLsTool(cwd), TextComp);
+		registerLsTool(toolPi, cwd, null, createLsTool(cwd), TextComp);
 	}
 	if (isToolEnabled("find") && createFindTool) {
-		registerFindTool(pi, cwd, fffService, createFindTool(cwd), TextComp);
+		registerFindTool(toolPi, cwd, fffService, createFindTool(cwd), TextComp);
 	}
 	if (isToolEnabled("grep") && createGrepTool) {
-		registerGrepTool(pi, cwd, fffService, createGrepTool(cwd), TextComp);
+		registerGrepTool(toolPi, cwd, fffService, createGrepTool(cwd), TextComp);
 	}
 }

package/src/prompt-editor.ts

@@ -7,15 +7,20 @@ export type CustomEditorConstructor = new (...args: ConstructorParameters<typeof
 type PromptColor = (text: string) => string;
 
 const PROMPT_ICON = "❯";
-const PROMPT_WIDTH = 3; // one space on either side of the icon
+const BOXED_PROMPT_WIDTH = 3; // one space on either side of the icon
+const UNBOXED_PROMPT_WIDTH = 2; // icon flush left, one space after
 
 /**
  * Build a CustomEditor subclass that reserves room for, and renders, the
  * user-message prompt. The host still owns all editing and app keybindings.
+ * With `boxed: false` the host's plain horizontal rules are kept as-is (no rounded
+ * corners, no side bars) and the prompt sits flush left: `❯ text`, ignoring the
+ * host's horizontal padding.
  */
 export function createPromptEditorClass(
 	Base: CustomEditorConstructor,
 	colorPrompt: PromptColor,
+	boxed = true,
 ): CustomEditorConstructor {
 	const basePrototype = Base.prototype as unknown as {
 		renderTopBorder?: unknown;
@@ -33,13 +38,19 @@ export function createPromptEditorClass(
 			const [tui, theme, keybindings, options] = args;
 			super(tui, theme, keybindings, { ...(options ?? {}), embedWorkingStatus: true });
 			this.userPaddingX = super.getPaddingX();
-			super.setPaddingX(this.userPaddingX + this.promptWidth());
+			super.setPaddingX(this.reservedPadding());
 		}
 
 		private promptWidth(): number {
+			if (!boxed) return UNBOXED_PROMPT_WIDTH;
 			// At zero user padding, reserve one extra column so the border leaves
 			// the same visible gap before the icon as padded editors.
-			return PROMPT_WIDTH + (supportsBorderHooks && this.userPaddingX === 0 ? 1 : 0);
+			return BOXED_PROMPT_WIDTH + (supportsBorderHooks && this.userPaddingX === 0 ? 1 : 0);
+		}
+
+		/** Columns the host must reserve left of the input: user padding plus the prompt slot. */
+		private reservedPadding(): number {
+			return (boxed ? this.userPaddingX : 0) + this.promptWidth();
 		}
 
 		override getPaddingX(): number {
@@ -48,16 +59,19 @@ export function createPromptEditorClass(
 
 		override setPaddingX(padding: number): void {
 			this.userPaddingX = Math.max(0, padding);
-			super.setPaddingX(this.userPaddingX + this.promptWidth());
+			super.setPaddingX(this.reservedPadding());
 		}
 
 		protected override renderTopBorder(width: number, hiddenLineCount: number): string {
 			this.isScrolled = hiddenLineCount > 0;
-			return this.roundBorder(super.renderTopBorder(width, hiddenLineCount), width, "╭", "╮");
+			const border = super.renderTopBorder(width, hiddenLineCount);
+			return boxed ? this.roundBorder(border, width, "╭", "╮") : border;
 		}
 
 		protected override renderBottomBorder(width: number, hiddenLineCount: number): string {
-			this.bottomBorderLine = this.roundBorder(super.renderBottomBorder(width, hiddenLineCount), width, "╰", "╯");
+			const border = super.renderBottomBorder(width, hiddenLineCount);
+			if (!boxed) return border;
+			this.bottomBorderLine = this.roundBorder(border, width, "╰", "╯");
 			return this.bottomBorderLine;
 		}
 
@@ -75,16 +89,17 @@ export function createPromptEditorClass(
 				const firstContentLine = lines[1];
 				if (firstContentLine) {
 					const maxPadding = Math.max(0, Math.floor((width - 1) / 2));
-					const promptPadding = Math.min(this.userPaddingX + this.promptWidth(), maxPadding);
-					if (promptPadding >= PROMPT_WIDTH && firstContentLine.startsWith(" ".repeat(promptPadding))) {
-						const promptStart = promptPadding - PROMPT_WIDTH;
-						const prompt = ` ${colorPrompt(PROMPT_ICON)} `;
+					const promptPadding = Math.min(this.reservedPadding(), maxPadding);
+					const slot = boxed ? BOXED_PROMPT_WIDTH : UNBOXED_PROMPT_WIDTH;
+					if (promptPadding >= slot && firstContentLine.startsWith(" ".repeat(promptPadding))) {
+						const promptStart = promptPadding - slot;
+						const prompt = boxed ? ` ${colorPrompt(PROMPT_ICON)} ` : `${colorPrompt(PROMPT_ICON)} `;
 						lines[1] = `${firstContentLine.slice(0, promptStart)}${prompt}${firstContentLine.slice(promptPadding)}`;
 					}
 				}
 			}
 
-			if (!supportsBorderHooks || !this.bottomBorderLine) return lines;
+			if (!boxed || !supportsBorderHooks || !this.bottomBorderLine) return lines;
 
 			const bottomBorderIndex = lines.lastIndexOf(this.bottomBorderLine);
 			const contentEnd = bottomBorderIndex > 0 ? bottomBorderIndex : lines.length - 1;

package/src/types.ts

@@ -34,6 +34,11 @@ export interface RenderCtxLike {
 	isError?: boolean;
 	state: Record<string, unknown>;
 	expanded?: boolean;
+	/** Tool call arguments as streamed so far. */
+	args?: Record<string, unknown>;
+	isPartial?: boolean;
+	/** False while the tool call is still streaming its arguments. */
+	executionStarted?: boolean;
 	invalidate?: () => void;
 	/** Host horizontal padding (pi >= 1.1). Absent on older hosts; renderers fall back to 1. */
 	outputPad?: number;

package/src/working-indicator.ts

@@ -14,6 +14,7 @@
  * phase. The extension adds no interrupt hint or token-count suffix.
  */
 
+import { keyText } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth } from "@earendil-works/pi-tui";
 import { FG_BLUE, FG_DIM, FG_MUTED, type ThinkingIndicatorConfig, type WorkingIndicatorConfig } from "./config.js";
 import { dimAccentHex, hexToAnsiFg, sessionAccentHex } from "./session-color.js";
@@ -539,7 +540,7 @@ export function installPerRowThinkingLabels(componentClass: unknown): PerRowThin
 			if (typeof ts !== "number") return incoming;
 			if (ts === state.activeTs) return incoming;
 			const ms = state.completed.get(ts);
-			return ms === undefined ? THINKING_LABEL : `${THOUGHT_LABEL} ${formatThinkingDuration(ms)}`;
+			return ms === undefined ? thinkingLabel() : thoughtLabel(ms);
 		} catch {
 			return incoming;
 		}
@@ -588,9 +589,20 @@ export interface ThinkingTimer {
 	restore(): void;
 }
 
-const THINKING_LABEL = " Thinking...";
-const THOUGHT_LABEL = " Thought for";
-const padThinkingLabel = (label: string): string => (label.startsWith(" ") ? label : ` ${label}`);
+let claudeThinkingLabels = false;
+/** claudecode tool style: flush-left `thinking` / `thought 3s` instead of ` Thinking...` / ` Thought for 3s`. */
+export function setClaudeThinkingLabels(enabled: boolean): void {
+	claudeThinkingLabels = enabled;
+}
+const thinkingLabel = (): string => (claudeThinkingLabels ? "thinking" : " Thinking...");
+const padThinkingLabel = (label: string): string =>
+	claudeThinkingLabels || label.startsWith(" ") ? label : ` ${label}`;
+/** Settled label for a finished thinking run; claudecode style appends the toggle hint when bound. */
+const thoughtLabel = (ms: number): string => {
+	if (!claudeThinkingLabels) return ` Thought for ${formatThinkingDuration(ms)}`;
+	const key = keyText("app.thinking.toggle");
+	return `thought ${formatThinkingDuration(ms)}${key ? ` (${key} to expand)` : ""}`;
+};
 
 /** Format sub-second elapsed time as milliseconds, then use compact whole seconds. */
 export function formatThinkingDuration(elapsedMs: number): string {
@@ -626,13 +638,13 @@ export function createThinkingTimer(
 	return {
 		tick(): void {
 			if (terminal) return;
-			animator.tick(`${THINKING_LABEL} ${duration()}`);
+			animator.tick(`${thinkingLabel()} ${duration()}`);
 		},
 		complete(): number | undefined {
 			if (terminal) return undefined;
 			terminal = true;
 			const ms = elapsed();
-			animator.show(`${THOUGHT_LABEL} ${formatThinkingDuration(ms)}`);
+			animator.show(thoughtLabel(ms));
 			return ms;
 		},
 		restore(): void {
@@ -702,7 +714,7 @@ export function createThinkingLabelAnimator(
 		}).frames.map((frame) => `${leftPadding}${frame}`);
 	};
 
-	let currentLabel = THINKING_LABEL;
+	let currentLabel = thinkingLabel();
 	let frames = buildLabelFrames(currentLabel);
 
 	let index = 0;
@@ -711,7 +723,7 @@ export function createThinkingLabelAnimator(
 		get frames(): readonly string[] {
 			return frames;
 		},
-		tick(label = THINKING_LABEL): void {
+		tick(label = thinkingLabel()): void {
 			const paddedLabel = padThinkingLabel(label);
 			if (paddedLabel !== currentLabel) {
 				frames = buildLabelFrames(paddedLabel);