@quandev104/pi-style 0.1.1

package/extension-src/pi-style/features/tools/boxed/index.ts

@@ -0,0 +1,64 @@
+// Boxed tool renderer dispatcher.
+//
+// Maps Pi tool names to their boxed call/result renderers and falls back to a
+// boxed generic renderer for unknown tools. The dispatcher is invoked from the
+// tool decoration owner when tools.style === "compact-box".
+
+import type { Component } from "@earendil-works/pi-tui";
+import type { BoxTheme } from "../../../shared/box.js";
+import { bashTool } from "./bash.js";
+import { editTool } from "./edit.js";
+import { renderFallbackCall, renderFallbackResult } from "./fallback.js";
+import { findTool } from "./find.js";
+import { grepTool } from "./grep.js";
+import { lsTool } from "./ls.js";
+import { getQuickEditToolConfig, quickEditTool } from "./quick-edit.js";
+import { readTool } from "./read.js";
+import type { BoxedToolContext, BoxedToolDefinition } from "./shared.js";
+import { writeTool } from "./write.js";
+
+function quickEditToolFor(toolName: string): BoxedToolDefinition {
+	const config = getQuickEditToolConfig(toolName);
+	if (!config) throw new Error(`missing quick-edit config for ${toolName}`);
+	return quickEditTool(config);
+}
+
+const REGISTRY: Readonly<Record<string, BoxedToolDefinition>> = {
+	read: readTool,
+	write: writeTool,
+	edit: editTool,
+	bash: bashTool,
+	ls: lsTool,
+	find: findTool,
+	grep: grepTool,
+	quick_edit: quickEditToolFor("quick_edit"),
+	substitute_edit: quickEditToolFor("substitute_edit"),
+	target_edit: quickEditToolFor("target_edit"),
+};
+
+export function hasBoxedRenderer(toolName: unknown): boolean {
+	return typeof toolName === "string" && Object.hasOwn(REGISTRY, toolName);
+}
+
+export function renderBoxedToolCall(
+	toolName: unknown,
+	args: Record<string, unknown>,
+	theme: BoxTheme,
+	context: BoxedToolContext,
+): Component {
+	const tool = typeof toolName === "string" ? REGISTRY[toolName] : undefined;
+	if (tool) return tool.call(args, theme, context);
+	return renderFallbackCall(toolName, args, theme, context);
+}
+
+export function renderBoxedToolResult(
+	toolName: unknown,
+	result: { content?: readonly unknown[]; details?: unknown },
+	options: { expanded: boolean; isPartial: boolean },
+	theme: BoxTheme,
+	context: BoxedToolContext,
+): Component {
+	const tool = typeof toolName === "string" ? REGISTRY[toolName] : undefined;
+	if (tool) return tool.result(result, options, theme, context);
+	return renderFallbackResult(toolName, result, options, theme, context);
+}

package/extension-src/pi-style/features/tools/boxed/ls.ts

@@ -0,0 +1,65 @@
+// Boxed ls tool renderer.
+
+import { stripAnsi } from "../../../shared/ansi.js";
+import {
+	boxedToolWidthKey,
+	countLines,
+	getTextOutput,
+	renderBoxedToolResult,
+	shortenPath,
+	stripTrailingNotice,
+} from "../../../shared/box.js";
+import {
+	type BoxedToolDefinition,
+	clearFooterState,
+	compactCall,
+	compactFooterWithState,
+	noteExecutionStart,
+	resultFooterLines,
+	truncationOutputLines,
+} from "./shared.js";
+
+function displayPath(rawPath: string): string {
+	const path = String(rawPath ?? ".");
+	if (path === "." || path === "") return "current directory";
+	return shortenPath(path);
+}
+
+export const lsTool: BoxedToolDefinition = {
+	call(args, theme, context) {
+		noteExecutionStart(context);
+		const detail = displayPath(String(args?.path ?? "."));
+		return compactCall(theme, "List", `${theme.fg("dim", "Path: ")}${detail}`, {
+			detailKey: detail,
+			context,
+		});
+	},
+	result(result, options, theme, context) {
+		clearFooterState(context);
+		const output = stripAnsi(getTextOutput(result)).trimEnd();
+		const detail = displayPath(String(context?.args?.path ?? "."));
+		const widthKey = boxedToolWidthKey("List", detail);
+
+		if (context.isError) {
+			return renderBoxedToolResult(theme, () => [theme.fg("error", output || "Error")], {
+				widthKey,
+				footerLines: resultFooterLines(theme, result, context),
+				isError: true,
+			});
+		}
+
+		if (!options.expanded) return compactFooterWithState(theme, result, context);
+
+		let itemCount = 0;
+		if (output && output !== "(empty directory)") {
+			const stripped = stripTrailingNotice(output);
+			itemCount = truncationOutputLines(result) ?? countLines(stripped);
+		}
+
+		const summary = `↳ Listed ${itemCount} ${itemCount === 1 ? "item" : "items"}.`;
+		return renderBoxedToolResult(theme, () => [theme.fg("dim", summary)], {
+			widthKey,
+			footerLines: resultFooterLines(theme, result, context),
+		});
+	},
+};

package/extension-src/pi-style/features/tools/boxed/quick-edit.ts

@@ -0,0 +1,190 @@
+// Boxed quick-edit / substitute-edit / target-edit renderer.
+
+import { getLanguageFromPath } from "@earendil-works/pi-coding-agent";
+import { Text } from "@earendil-works/pi-tui";
+import { stripAnsi } from "../../../shared/ansi.js";
+import type { BoxTheme } from "../../../shared/box.js";
+import {
+	formatBoxedFooterFromValues,
+	getTextOutput,
+	renderBoxedToolCall,
+	renderBoxedToolResult,
+} from "../../../shared/box.js";
+import { buildSplitRows, countDiffStats, renderDiffMeter, SplitDiffComponent } from "../../../shared/split-diff.js";
+import { getStateElapsedMs } from "./session-config.js";
+import { type BoxedToolContext, type BoxedToolDefinition, displayPath, noteExecutionStart } from "./shared.js";
+
+const MAX_HIGHLIGHT_DIFF_CHARS = 12000;
+const MAX_HIGHLIGHT_DIFF_ROWS = 120;
+
+interface QuickEditToolConfig {
+	toolLabel: string;
+	applyingLabel: string;
+	fallbackLabel: string;
+}
+
+const QUICK_EDIT_TOOLS: Readonly<Record<string, QuickEditToolConfig>> = {
+	quick_edit: {
+		toolLabel: "Quick Edit",
+		applyingLabel: "quick-edit",
+		fallbackLabel: "Quick edit applied",
+	},
+	substitute_edit: {
+		toolLabel: "Substitute Edit",
+		applyingLabel: "substitute-edit",
+		fallbackLabel: "Substitute edit applied",
+	},
+	target_edit: {
+		toolLabel: "Target Edit",
+		applyingLabel: "target-edit",
+		fallbackLabel: "Target edit applied",
+	},
+};
+
+export function getQuickEditToolConfig(toolName: unknown): QuickEditToolConfig | undefined {
+	return typeof toolName === "string" ? QUICK_EDIT_TOOLS[toolName] : undefined;
+}
+
+function extractQuickEditDiff(text: string): string | undefined {
+	const lines = stripAnsi(text).replace(/\r/g, "").split("\n");
+	const start = lines.indexOf("── diff ──");
+	if (start < 0) return undefined;
+
+	const diffLines: string[] = [];
+	let cumulativeDelta = 0;
+	let oldLine: number | undefined;
+	let newLine: number | undefined;
+	let chunkAdditions = 0;
+	let chunkRemovals = 0;
+
+	const finishChunk = () => {
+		cumulativeDelta += chunkAdditions - chunkRemovals;
+		oldLine = undefined;
+		newLine = undefined;
+		chunkAdditions = 0;
+		chunkRemovals = 0;
+	};
+
+	for (const line of lines.slice(start + 1)) {
+		if (line === "") {
+			finishChunk();
+			continue;
+		}
+
+		const headerMatch = line.match(/^:(\d+)(?:-\d+)?$/);
+		if (headerMatch) {
+			finishChunk();
+			const startLine = Number.parseInt(headerMatch[1] ?? "", 10);
+			oldLine = startLine;
+			newLine = startLine + cumulativeDelta;
+			continue;
+		}
+
+		const match = line.match(/^([+-]) (.*)$/);
+		if (match) {
+			const [, sign, content = ""] = match;
+			let gutter = "";
+			if (sign === "-" && oldLine !== undefined) gutter = String(oldLine++);
+			if (sign === "+" && newLine !== undefined) gutter = String(newLine++);
+			if (!gutter) continue;
+			if (sign === "-") chunkRemovals++;
+			if (sign === "+") chunkAdditions++;
+			diffLines.push(`${sign} ${gutter} ${content}`);
+			continue;
+		}
+
+		if (line === "---") break;
+	}
+
+	return diffLines.length > 0 ? diffLines.join("\n") : undefined;
+}
+
+function quickEditFooter(theme: BoxTheme, context: BoxedToolContext, output = ""): string {
+	return formatBoxedFooterFromValues(theme, getStateElapsedMs(context.state), output);
+}
+
+function renderQuickEditResult(
+	_toolName: string,
+	result: { content?: readonly unknown[]; details?: unknown },
+	options: { expanded: boolean; isPartial: boolean },
+	theme: BoxTheme,
+	context: BoxedToolContext,
+	config: QuickEditToolConfig,
+) {
+	if (options.isPartial) {
+		return renderBoxedToolResult(
+			theme,
+			() => [`${theme.fg("dim", "↳")} ${theme.fg("muted", `Applying ${config.applyingLabel}...`)}`],
+			{ isPartial: true },
+		);
+	}
+
+	const output = getTextOutput(result);
+	if (context.isError) {
+		return renderBoxedToolResult(theme, () => [theme.fg("error", stripAnsi(output).trim() || "Error")], {
+			footerLines: [quickEditFooter(theme, context, output)],
+			isError: true,
+		});
+	}
+
+	const diff = extractQuickEditDiff(output);
+	if (!diff) {
+		const fallback = stripAnsi(output).trim() || config.fallbackLabel;
+		return renderBoxedToolResult(theme, () => [`${theme.fg("dim", "↳")} ${theme.fg("muted", fallback)}`], {
+			footerLines: [quickEditFooter(theme, context, output)],
+		});
+	}
+
+	const rows = buildSplitRows(diff);
+	const expanded = options.expanded;
+	const argPath = String(context?.args?.path ?? "");
+	const language = argPath ? getLanguageFromPath(argPath) : undefined;
+	const shouldHighlight =
+		Boolean(language) && diff.length <= MAX_HIGHLIGHT_DIFF_CHARS && rows.length <= MAX_HIGHLIGHT_DIFF_ROWS;
+
+	const { additions, removals } = countDiffStats(diff);
+	const meter = renderDiffMeter(theme, additions, removals);
+	const summary =
+		`${theme.fg("dim", "↳")} ${theme.fg("muted", "diff")}` +
+		` ${theme.fg("toolDiffAdded", `+${additions}`)}` +
+		` ${theme.fg("toolDiffRemoved", `-${removals}`)}` +
+		` ${theme.fg("muted", "split")}` +
+		(meter ? ` ${meter}` : "");
+
+	const maxRows = expanded ? 160 : 36;
+	const split = new SplitDiffComponent(theme, rows, maxRows, shouldHighlight ? language : undefined);
+
+	return renderBoxedToolResult(
+		theme,
+		{
+			render(width: number): string[] {
+				const safeWidth = Math.max(20, width);
+				const headerLines = new Text(summary, 0, 0).render(safeWidth);
+				return [...headerLines, ...split.render(safeWidth)];
+			},
+			invalidate(): void {
+				split.invalidate();
+			},
+		},
+		{
+			footerLines: [quickEditFooter(theme, context, output)],
+		},
+	);
+}
+
+export function quickEditTool(config: QuickEditToolConfig): BoxedToolDefinition {
+	return {
+		call(args, theme, context) {
+			noteExecutionStart(context);
+			const detail = displayPath(String(args?.path ?? ""), context);
+			return renderBoxedToolCall(theme, config.toolLabel, [`${theme.fg("dim", "Path: ")}${detail}`], {
+				isError: Boolean(context.isError),
+				isPartial: Boolean(context.isPartial),
+				isPending: Boolean(context.isPartial),
+			});
+		},
+		result(result, options, theme, context) {
+			return renderQuickEditResult(config.toolLabel, result, options, theme, context, config);
+		},
+	};
+}

package/extension-src/pi-style/features/tools/boxed/read.ts

@@ -0,0 +1,204 @@
+// Boxed read tool renderer
+// (renderCall/renderResult only; no tool re-registration).
+
+import { getLanguageFromPath, highlightCode } from "@earendil-works/pi-coding-agent";
+import { stripAnsi } from "../../../shared/ansi.js";
+import type { BoxTheme } from "../../../shared/box.js";
+import {
+	boxedToolWidthKey,
+	countLines,
+	extractTrailingNotice,
+	getTextOutput,
+	renderBoxedToolResult,
+	stripTrailingNotice,
+} from "../../../shared/box.js";
+import { safeTruncateToWidth } from "../../../shared/render-budget.js";
+import { getToolsRenderConfig } from "./session-config.js";
+import {
+	type BoxedToolDefinition,
+	clearFooterState,
+	compactCall,
+	compactFooterWithState,
+	noteExecutionStart,
+	pathRangeDetail,
+	resultFooterLines,
+	truncationOutputLines,
+} from "./shared.js";
+
+const MAX_HIGHLIGHT_OUTPUT_CHARS = 12000;
+const MAX_HIGHLIGHT_OUTPUT_LINES = 300;
+
+type NumberedReadLine = {
+	lineNumber: string;
+	content: string;
+};
+
+type ParsedReadOutput = {
+	fileHash: string | undefined;
+	numberedLines?: NumberedReadLine[];
+	body: string;
+};
+
+function parseReadOutput(text: string): ParsedReadOutput {
+	const fileHashMatch = text.match(/^fileHash: ([^\n]+)\n\n/);
+	const body = fileHashMatch ? text.slice(fileHashMatch[0].length) : text;
+	const rawLines = body ? body.split("\n") : [];
+	const numberedLines = rawLines.map((line) => line.match(/^\s*(\d+)\| ?(.*)$/));
+
+	if (numberedLines.length > 0 && numberedLines.every(Boolean)) {
+		return {
+			fileHash: fileHashMatch?.[1],
+			body: numberedLines.map((match) => match?.[2] ?? "").join("\n"),
+			numberedLines: numberedLines.map((match) => ({
+				lineNumber: match?.[1] ?? "",
+				content: match?.[2] ?? "",
+			})),
+		};
+	}
+
+	return { fileHash: fileHashMatch?.[1], body };
+}
+
+function renderReadBody(
+	theme: BoxTheme,
+	options: { expanded: boolean },
+	parsed: ParsedReadOutput,
+	output: string,
+	truncationNotice: string | null,
+): { render(width: number): string[]; invalidate(): void } {
+	let cacheKey = "";
+	let cacheLines: string[] | null = null;
+	return {
+		invalidate() {
+			cacheKey = "";
+			cacheLines = null;
+		},
+		render(width: number): string[] {
+			const renderWidth = Math.max(1, width);
+			const cfg = getToolsRenderConfig();
+			const maxLines = cfg.maxExpandedLines;
+			const expanded = Boolean(options.expanded);
+			const cacheId = `${renderWidth}|${expanded ? 1 : 0}|${maxLines}|${cfg.dimOutput ? 1 : 0}`;
+			if (cacheLines && cacheKey === cacheId) return cacheLines;
+
+			const linesRead = parsed.numberedLines?.length ?? countLines(parsed.body);
+			const summary = theme.fg("dim", `↳ Read ${linesRead} ${linesRead === 1 ? "line" : "lines"}.`);
+			const footer: string[] = [];
+			if (truncationNotice) footer.push(theme.fg("warning", truncationNotice));
+			footer.push("", summary);
+			const budget = maxLines > 0 ? maxLines - footer.length : 0;
+			const renderPlain = (text: string): string[] => {
+				const out: string[] = [];
+				for (const line of text.split("\n")) {
+					out.push(safeTruncateToWidth(theme.fg("toolOutput", line), renderWidth, "…"));
+				}
+				return out;
+			};
+			const lineCount = parsed.numberedLines?.length ?? countLines(parsed.body);
+			const shouldHighlight =
+				expanded &&
+				Boolean(getLanguageFromPath(output)) &&
+				parsed.body.length <= MAX_HIGHLIGHT_OUTPUT_CHARS &&
+				lineCount <= MAX_HIGHLIGHT_OUTPUT_LINES;
+
+			const renderBody = (): string[] => {
+				if (!parsed.numberedLines)
+					return renderPlain(parsed.fileHash ? `fileHash: ${parsed.fileHash}\n\n${parsed.body}` : parsed.body);
+
+				let bodyLines = parsed.body.split("\n").map((line) => theme.fg("toolOutput", line));
+				const lang = getLanguageFromPath(output);
+				if (shouldHighlight && lang) {
+					try {
+						bodyLines = highlightCode(parsed.body, lang);
+					} catch {
+						bodyLines = parsed.body.split("\n").map((line) => theme.fg("toolOutput", line));
+					}
+				}
+
+				const out: string[] = [];
+				if (parsed.fileHash) out.push(theme.fg("muted", `fileHash: ${parsed.fileHash}`), "");
+
+				const numberWidth = Math.max(...parsed.numberedLines.map((line) => line.lineNumber.length));
+				const gutterWidth = numberWidth + 3;
+				const contentWidth = Math.max(1, renderWidth - gutterWidth);
+				for (let i = 0; i < parsed.numberedLines.length; i++) {
+					const numberedLine = parsed.numberedLines[i] ?? { lineNumber: "", content: "" };
+					const bodyLine = safeTruncateToWidth(bodyLines[i] ?? "", contentWidth, "…");
+					const gutter = theme.fg("dim", `${numberedLine.lineNumber.padStart(numberWidth)} │ `);
+					out.push(`${gutter}${bodyLine}`);
+				}
+				return out;
+			};
+
+			const highlighted = renderBody();
+			if (maxLines > 0 && highlighted.length > budget) {
+				const truncated = highlighted.slice(0, budget);
+				const remaining = highlighted.length - budget;
+				truncated.push(theme.fg("dim", `… ${remaining} more lines`));
+				truncated.push(...footer);
+				cacheKey = cacheId;
+				cacheLines = truncated;
+				return cacheLines;
+			}
+			highlighted.push(...footer);
+			cacheKey = cacheId;
+			cacheLines = highlighted;
+			return cacheLines;
+		},
+	};
+}
+
+export const readTool: BoxedToolDefinition = {
+	call(args, theme, context) {
+		noteExecutionStart(context);
+		const rawPath = String(args?.path ?? args?.file_path ?? "");
+		const detail = pathRangeDetail(rawPath, args?.offset, args?.limit, context);
+		return compactCall(theme, "Read", `${theme.fg("dim", "Path: ")}${detail}`, {
+			detailKey: detail,
+			context,
+		});
+	},
+	result(result, options, theme, context) {
+		clearFooterState(context);
+		const output = stripAnsi(getTextOutput(result)).trimEnd();
+		const rawPath = String(context?.args?.path ?? context?.args?.file_path ?? "");
+		const detail = pathRangeDetail(rawPath, context?.args?.offset, context?.args?.limit, context);
+		const widthKey = boxedToolWidthKey("Read", detail);
+
+		if (context.isError) {
+			return renderBoxedToolResult(theme, () => [theme.fg("error", output || "Error")], {
+				widthKey,
+				footerLines: resultFooterLines(theme, result, context),
+				isError: true,
+			});
+		}
+
+		const imageCount = Array.isArray(result.content)
+			? result.content.filter((contentBlock) => {
+					if (!contentBlock || typeof contentBlock !== "object") return false;
+					return (contentBlock as { type?: unknown }).type === "image";
+				}).length
+			: 0;
+		if (imageCount > 0) {
+			if (!options.expanded) return compactFooterWithState(theme, result, context);
+			const summary = `↳ Read ${imageCount} ${imageCount === 1 ? "image" : "images"}.`;
+			return renderBoxedToolResult(theme, () => [theme.fg("dim", summary)], {
+				widthKey,
+				footerLines: resultFooterLines(theme, result, context),
+			});
+		}
+
+		const stripped = stripTrailingNotice(output);
+		const parsed = parseReadOutput(stripped);
+		const truncationNotice = extractTrailingNotice(output);
+		const _linesRead = truncationOutputLines(result) ?? parsed.numberedLines?.length ?? countLines(parsed.body);
+
+		if (!options.expanded) return compactFooterWithState(theme, result, context);
+
+		const body = renderReadBody(theme, options, parsed, output, truncationNotice);
+		return renderBoxedToolResult(theme, body, {
+			widthKey,
+			footerLines: resultFooterLines(theme, result, context),
+		});
+	},
+};

package/extension-src/pi-style/features/tools/boxed/session-config.ts

@@ -0,0 +1,45 @@
+// Per-session render configuration for boxed tool presentation.
+//
+// Set once per session by the compatibility coordinator; read inside renderers.
+// Kept out of the render path (no filesystem/config reads during render).
+
+export interface ToolsRenderConfig {
+	maxCollapsedLines: number;
+	maxExpandedLines: number;
+	dimOutput: boolean;
+	showElapsed: boolean;
+}
+
+let sessionToolsConfig: ToolsRenderConfig = {
+	maxCollapsedLines: 10,
+	maxExpandedLines: 50,
+	dimOutput: false,
+	showElapsed: true,
+};
+
+export function setToolsRenderConfig(config: Partial<ToolsRenderConfig>): void {
+	sessionToolsConfig = { ...sessionToolsConfig, ...config };
+}
+
+export function getToolsRenderConfig(): ToolsRenderConfig {
+	return sessionToolsConfig;
+}
+
+// Wall-clock elapsed tracking through the renderer context state (no tool
+// re-registration, so result.details has no execution timing).
+
+const STARTED_AT_KEY = "__piStyleStartedAt";
+const ELAPSED_MS_KEY = "__piStyleElapsedMs";
+
+export function recordExecutionStarted(state: Record<string, unknown> | undefined, executionStarted: boolean): void {
+	if (!executionStarted || !state || typeof state !== "object") return;
+	if (typeof state[STARTED_AT_KEY] !== "number") state[STARTED_AT_KEY] = performance.now();
+}
+
+export function getStateElapsedMs(state: Record<string, unknown> | undefined): number | undefined {
+	if (!state || typeof state !== "object") return undefined;
+	if (typeof state[ELAPSED_MS_KEY] !== "number" && typeof state[STARTED_AT_KEY] === "number") {
+		state[ELAPSED_MS_KEY] = performance.now() - state[STARTED_AT_KEY];
+	}
+	return typeof state[ELAPSED_MS_KEY] === "number" ? state[ELAPSED_MS_KEY] : undefined;
+}