pi-open-tui 0.4.0 → 0.4.2

package/extensions/open-tui/tool-view.ts

@@ -1,9 +1,11 @@
 import { homedir } from "node:os";
 import { isAbsolute, relative, sep } from "node:path";
 import type { ExtensionAPI, Theme, ThemeColor, ToolRenderers } from "@earendil-works/pi-coding-agent";
-import { Box, type Component, Spacer, stripTerminalSequences, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { Box, type Component, Spacer, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import type { ToolViewMode } from "./config.ts";
 import type { IconGlyphs } from "./icons.ts";
+import { codeLines, prepareToolPreview } from "./tool-preview.ts";
+import { sanitizeStatus, stripAnsi } from "./utils.ts";
 
 type RenderCall = NonNullable<ToolRenderers["renderCall"]>;
 type RenderResult = NonNullable<ToolRenderers["renderResult"]>;
@@ -32,6 +34,14 @@ interface RowState {
 	callCardBottom?: Spacer;
 	resultCard?: Box;
 	startedAt?: number;
+	pulse?: ReturnType<typeof setInterval>;
+	pulseBright?: boolean;
+	preview?: {
+		source: string;
+		path: string;
+		colors: Theme["colors"];
+		render: ReturnType<typeof prepareToolPreview>;
+	};
 }
 
 const str = (value: unknown): string => (typeof value === "string" ? value : "");
@@ -45,7 +55,7 @@ function plural(count: number, one: string, many = `${one}s`): string {
  * and keep only the text after a lone `\r` so progress bars show their latest frame.
  */
 function cleanOutput(text: string): string {
-	return stripTerminalSequences(text)
+	return stripAnsi(text)
 		.replace(/\r\n/g, "\n")
 		.split("\n")
 		.map((line) => {
@@ -60,9 +70,26 @@ export function textOutput(result: ToolResult): string {
 	return cleanOutput(result.content.map((block) => (block.type === "text" ? block.text : "")).join("\n"));
 }
 
-/** Drops Pi's trailing `[...]` notice (truncation, limits, continuation hints) and the blank line before it. */
-export function stripNotice(text: string): string {
-	return text.replace(/\n\n\[[^\n]*\]\s*$/, "").replace(/\n+$/, "");
+const NOTICE_SIZE = String.raw`\d+(?:\.\d+)?(?:B|KB|MB)`;
+const BYTE_LIMIT_NOTICE = `${NOTICE_SIZE} limit reached`;
+const GREP_LINES_NOTICE = String.raw`Some lines truncated to \d+ chars\. Use read tool to see full lines`;
+const SHOWN_LINES_NOTICE = String.raw`Showing lines \d+-\d+ of \d+(?: \(${NOTICE_SIZE} limit\))?`;
+// Pi 1.2–1.4 appends these tool-specific notices, not arbitrary bracketed output.
+const TOOL_NOTICES: Record<string, RegExp> = {
+	read: new RegExp(String.raw`^(?:${SHOWN_LINES_NOTICE}\. Use offset=\d+ to continue\.|\d+ more lines in file\. Use offset=\d+ to continue\.)$`),
+	bash: new RegExp(String.raw`^(?:${SHOWN_LINES_NOTICE}|Showing last ${NOTICE_SIZE} of line \d+ \(line is ${NOTICE_SIZE}\))\. Full output: [^\n]+$`),
+	grep: new RegExp(String.raw`^(?:\d+ matches limit reached\. Use limit=\d+ for more, or refine pattern(?:\. ${BYTE_LIMIT_NOTICE})?(?:\. ${GREP_LINES_NOTICE})?|${BYTE_LIMIT_NOTICE}(?:\. ${GREP_LINES_NOTICE})?|${GREP_LINES_NOTICE})$`),
+	find: new RegExp(String.raw`^(?:\d+ results limit reached(?:\. Use limit=\d+ for more, or refine pattern)?(?:\. ${BYTE_LIMIT_NOTICE})?|${BYTE_LIMIT_NOTICE})$`),
+	ls: new RegExp(String.raw`^(?:\d+ entries limit reached\. Use limit=\d+ for more(?:\. ${BYTE_LIMIT_NOTICE})?|${BYTE_LIMIT_NOTICE})$`),
+};
+
+/** Drop only a recognized notice for this tool, preserving bracketed content and errors. */
+export function stripNotice(toolName: string, text: string): string {
+	const notice = /\n\n\[([^\n]+)\]\s*$/.exec(text);
+	if (notice && TOOL_NOTICES[toolName === "powershell" ? "bash" : toolName]?.test(notice[1]!)) {
+		text = text.slice(0, notice.index);
+	}
+	return text.replace(/\n+$/, "");
 }
 
 function countLines(text: string): number {
@@ -154,7 +181,8 @@ function truncation(result: ToolResult): { truncated: boolean; totalLines?: numb
 function incomplete(result: ToolResult): string {
 	const info = details(result);
 	const limit = ["matchLimitReached", "resultLimitReached", "entryLimitReached"].some((key) => info[key] !== undefined);
-	return (limit ? " · limit reached" : "") + (truncation(result).truncated ? " · truncated" : "");
+	return (limit ? " · limit reached" : "")
+		+ (truncation(result).truncated || info.linesTruncated === true ? " · truncated" : "");
 }
 
 /** Line count of shell output plus any incomplete-result hint. */
@@ -167,12 +195,12 @@ function shellLines(output: string, result: ToolResult): string {
 /** One-line result summary for a finished, successful call. */
 export function summarizeResult(toolName: string, result: ToolResult, args: Args): string {
 	const raw = textOutput(result);
-	const text = stripNotice(raw);
+	const text = stripNotice(toolName, raw);
 	switch (toolName) {
 		case "read": {
 			if (result.content.some((block) => block.type === "image")) return "image";
 			// An explicit `limit` that stops early adds this notice without setting details.truncation.
-			const more = /\n\n\[\d+ more lines in file\.[^\n]*\]\s*$/.test(raw) ? " · more" : "";
+			const more = /\n\n\[\d+ more lines in file\. Use offset=\d+ to continue\.\]\s*$/.test(raw) ? " · more" : "";
 			return plural(countLines(text), "line") + incomplete(result) + more;
 		}
 		case "bash":
@@ -185,7 +213,7 @@ export function summarizeResult(toolName: string, result: ToolResult, args: Args
 			return `+${added} −${removed}`;
 		}
 		case "write":
-			return `${plural(countLines(str(args.content).replace(/\n$/, "")), "line")} written`;
+			return `${plural(codeLines(str(args.content)).length, "line")} written`;
 		case "grep": {
 			if (text === "No matches found") return "No matches";
 			const files = new Set<string>();
@@ -217,7 +245,7 @@ export function summarizeError(toolName: string, result: ToolResult, duration =
 	const status = toolName === "bash" || toolName === "powershell" ? /(?:^|\n\n)Command ([^\n]+)$/.exec(text) : null;
 	if (status) {
 		const reason = status[1]!;
-		const output = stripNotice(text.slice(0, status.index));
+		const output = stripNotice(toolName, text.slice(0, status.index));
 		// The last output line usually names the failure; it goes last so narrow rows cut it first.
 		const last = tailLines(output, 1)[0]?.trim();
 		const tail = last && last !== "(no output)" ? ` · ${last}` : "";
@@ -230,11 +258,25 @@ function formatElapsed(ms: number): string {
 	return ms < 1000 ? `${Math.round(ms)}ms` : `${(ms / 1000).toFixed(1)}s`;
 }
 
-/** Lines truncated to the render width; rebuilt on every render call. */
-function lines(build: (width: number) => string[]): Component {
+/** Stable rows reuse their final lines until width, theme, icons, or invalidation changes them. */
+function lines(
+	build: (width: number, icons: IconGlyphs) => string[],
+	theme: Theme,
+	glyphs: () => IconGlyphs,
+	cacheable = true,
+): Component {
+	let cache: { width: number; colors: Theme["colors"]; toolCall: string; toolResult: string; lines: string[] } | undefined;
 	return {
-		render: (width) => build(width).map((line) => truncateToWidth(line, Math.max(1, width), "…")),
-		invalidate() {},
+		render(width) {
+			const icons = glyphs();
+			const colors = theme.colors;
+			if (cacheable && cache && cache.width === width && cache.colors === colors
+				&& cache.toolCall === icons.toolCall && cache.toolResult === icons.toolResult) return cache.lines;
+			const rendered = build(width, icons).map((line) => truncateToWidth(line, Math.max(0, width), "…"));
+			if (cacheable) cache = { width, colors, toolCall: icons.toolCall, toolResult: icons.toolResult, lines: rendered };
+			return rendered;
+		},
+		invalidate() { cache = undefined; },
 	};
 }
 
@@ -253,10 +295,16 @@ function statusBg(theme: Theme, context: RenderContext): (text: string) => strin
 	return (text) => theme.bg(bg, text);
 }
 
+function stopPulse(row: RowState): void {
+	if (row.pulse) clearInterval(row.pulse);
+	row.pulse = undefined;
+}
+
 export function createCompactRenderers(
 	toolName: string,
 	native: ToolRenderers,
 	glyphs: () => IconGlyphs,
+	running?: Map<string, RowState | undefined>,
 ): ToolRenderers {
 	const label = TOOL_LABELS[toolName] ?? toolName;
 	const isShell = toolName === "bash" || toolName === "powershell";
@@ -267,9 +315,26 @@ export function createCompactRenderers(
 		renderShell: "self",
 		renderCall(args, theme, context) {
 			const row = rowState(context);
-			// Always run the native renderer so its own state (timers, edit preview) stays current.
-			row.nativeCall = native.renderCall?.(args, theme, nativeContext(context, row, row.nativeCall));
+			// Keep native timers/edit state current; write rebuilds its full highlight cache only on expansion.
+			if (toolName !== "write" || context.expanded) {
+				row.nativeCall = native.renderCall?.(args, theme, nativeContext(context, row, row.nativeCall));
+			}
 			if (context.executionStarted) row.startedAt ??= Date.now();
+			const live = context.executionStarted && context.isPartial && !context.isError;
+			// Actual execution events exclude history rebuilding and HTML export's partial call context.
+			if (live && !context.expanded && running?.has(context.toolCallId)) {
+				running.set(context.toolCallId, row);
+				if (!row.pulse) {
+					row.pulseBright = true;
+					row.pulse = setInterval(() => {
+						row.pulseBright = !row.pulseBright;
+						context.invalidate();
+					}, 1000);
+					row.pulse.unref();
+				}
+			} else {
+				stopPulse(row);
+			}
 			if (showNative(context) && row.nativeCall) {
 				if (native.renderShell === "self") return row.nativeCall;
 				// Recreate Pi's default card: top padding, call, then result (or bottom padding while pending).
@@ -283,17 +348,21 @@ export function createCompactRenderers(
 				row.callCard.addChild(row.callCardBottom);
 				return row.callCard;
 			}
-			const color: ThemeColor = context.isError ? "error" : context.isPartial ? "warning" : "success";
-			const detail = callDetail(toolName, (args ?? {}) as Args, context.cwd);
+			const color: ThemeColor = context.isError ? "error" : context.isPartial
+				? live && row.pulseBright !== false ? "accent" : "dim"
+				: "success";
+			const titleColor = context.isPartial || context.isError ? "toolTitle" : "dim";
+			const detail = sanitizeStatus(callDetail(toolName, (args ?? {}) as Args, context.cwd));
 			const pad = " ".repeat(context.outputPad);
-			return lines(() => [
-				pad + theme.fg(color, glyphs().toolCall) + " " + theme.fg("toolTitle", theme.bold(label))
-					+ (detail ? theme.fg("muted", `(${detail})`) : ""),
-			]);
+			return lines((_width, icons) => [
+				pad + theme.fg(color, icons.toolCall) + " " + theme.fg(titleColor, titleColor === "dim" ? label : theme.bold(label))
+					+ (detail ? theme.fg(context.isPartial || context.isError ? "muted" : "dim", `(${detail})`) : ""),
+			], theme, glyphs, !context.isPartial);
 		},
 
 		renderResult(result, options, theme, context) {
 			const row = rowState(context);
+			if (!options.isPartial || context.isError) stopPulse(row);
 			row.nativeResult = native.renderResult?.(result, options, theme, nativeContext(context, row, row.nativeResult));
 			if (showNative(context) && row.nativeResult) {
 				if (native.renderShell === "self") return row.nativeResult;
@@ -309,26 +378,30 @@ export function createCompactRenderers(
 			}
 			const pad = " ".repeat(context.outputPad);
 			const args = (context.args ?? {}) as Args;
-			return lines(() => {
-				const { toolResult } = glyphs();
+			if (!options.isPartial && !context.isError && (toolName === "edit" || toolName === "write")) {
+				const source = toolName === "edit" ? str(details(result).diff) : str(args.content);
+				const path = str(args.file_path ?? args.path);
+				if (!row.preview || row.preview.source !== source || row.preview.path !== path || row.preview.colors !== theme.colors) {
+					row.preview = { source, path, colors: theme.colors, render: prepareToolPreview(toolName, source, path, theme) };
+				}
+			}
+			const duration = isShell && context.durationMs !== undefined ? ` · ${formatElapsed(context.durationMs)}` : "";
+			const summary = options.isPartial ? "" : context.isError
+				? summarizeError(toolName, result, duration)
+				: summarizeResult(toolName, result, args) + duration;
+			const tail = options.isPartial && isShell ? tailLines(textOutput(result), LIVE_TAIL_LINES) : [];
+			return lines((width, { toolResult }) => {
 				const gutter = `${pad}  ${theme.fg("dim", toolResult)}  `;
 				const indent = `${pad}  ${" ".repeat(visibleWidth(toolResult))}  `;
 				if (options.isPartial) {
 					if (!isShell) return [gutter + theme.fg("warning", "Running…")];
-					const tail = tailLines(textOutput(result), LIVE_TAIL_LINES).map((line) => theme.fg("toolOutput", line));
 					const elapsed = row.startedAt === undefined ? "" : ` ${formatElapsed(Date.now() - row.startedAt)}`;
-					return [...tail, theme.fg("warning", `Running…${elapsed}`)]
+					return [...tail.map((line) => theme.fg("toolOutput", line)), theme.fg("warning", `Running…${elapsed}`)]
 						.map((line, index) => (index === 0 ? gutter : indent) + line);
 				}
-				const duration = isShell && context.durationMs !== undefined ? ` · ${formatElapsed(context.durationMs)}` : "";
-				if (context.isError) return [gutter + theme.fg("error", summarizeError(toolName, result, duration))];
-				const summary = summarizeResult(toolName, result, args);
-				if (toolName === "edit" && /^\+\d+ −\d+$/.test(summary)) {
-					const [added, removed] = summary.split(" ");
-					return [gutter + theme.fg("toolDiffAdded", added!) + " " + theme.fg("toolDiffRemoved", removed!)];
-				}
-				return [gutter + theme.fg("muted", summary + duration)];
-			});
+				if (context.isError) return [gutter + theme.fg("error", summary)];
+				return [gutter + theme.fg("dim", summary), ...(row.preview?.render(width, indent) ?? [])];
+			}, theme, glyphs, !options.isPartial);
 		},
 	};
 }
@@ -340,9 +413,21 @@ const OWNED_TOOLS = new Set(Object.keys(TOOL_LABELS));
  * when Pi builds a row, so switching it affects new rows only.
  */
 export function registerToolView(pi: ExtensionAPI, getMode: () => ToolViewMode, glyphs: () => IconGlyphs): void {
+	const running = new Map<string, RowState | undefined>();
+	pi.on("tool_execution_start", (event) => { running.set(event.toolCallId, undefined); });
+	pi.on("tool_execution_end", (event) => {
+		const row = running.get(event.toolCallId);
+		if (row) stopPulse(row);
+		running.delete(event.toolCallId);
+	});
+	pi.on("session_shutdown", () => {
+		for (const row of running.values()) if (row) stopPulse(row);
+		running.clear();
+	});
 	pi.registerToolRenderer((toolName, next) => {
 		const native = next();
 		if (!native || !OWNED_TOOLS.has(toolName) || getMode() !== "compact") return native;
-		return createCompactRenderers(toolName, native, glyphs);
+		if (pi.getAllTools().find((tool) => tool.name === toolName)?.sourceInfo?.source !== "builtin") return native;
+		return createCompactRenderers(toolName, native, glyphs, running);
 	});
 }

package/extensions/open-tui/utils.ts

@@ -135,8 +135,8 @@ export type PrioritizedSegment = {
 
 /**
  * Pack segments into maxWidth: compact segments first, then shrink/drop the
- * lowest-priority segments (higher priority = survives longer). Returns the
- * surviving segment texts in original order, space-joined.
+ * lowest-priority segments (higher priority = survives longer). Returns one
+ * text per input segment, preserving positions with empty strings for dropped items.
  */
 export function fitSegmentsByPriority(
 	segs: readonly PrioritizedSegment[],
@@ -205,7 +205,7 @@ export function fitSegmentsByPriority(
 			break;
 		}
 	}
-	return items.filter((it) => it.text !== "").map((it) => it.text);
+	return items.map((it) => it.text);
 }
 
 export function stressColor(value: number, warn = 70, danger = 90): ThemeColor {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pi-open-tui",
-  "version": "0.4.0",
-  "description": "A polished TUI for Pi coding agent: animated logo header, Starship-style footer, rounded editor with model metadata, and prompt-box user messages.",
+  "version": "0.4.2",
+  "description": "A polished TUI for Pi coding agent: branded header, responsive footer, framed editor, thinking preview, and compact tool views.",
   "type": "module",
   "repository": {
     "type": "git",
@@ -20,12 +20,13 @@
   "files": [
     "extensions/",
     "assets/",
+    "CHANGELOG.md",
     "README.md",
     "README.zh-CN.md",
     "LICENSE"
   ],
   "scripts": {
-    "test": "node --test tests/settings-command.test.ts tests/footer.test.ts tests/editor.test.ts tests/telemetry.test.ts tests/peek.test.ts tests/tool-view.test.ts",
+    "test": "node --test tests/settings-command.test.ts tests/footer.test.ts tests/editor.test.ts tests/telemetry.test.ts tests/peek.test.ts tests/tool-view.test.ts tests/copy-buttons.test.ts",
     "typecheck": "tsc --noEmit"
   },
   "pi": {
@@ -35,8 +36,8 @@
     "image": "https://raw.githubusercontent.com/OldSuns/pi-open-tui/main/assets/preview_dashboard_1.png"
   },
   "peerDependencies": {
-    "@earendil-works/pi-coding-agent": ">=1.2.0",
     "@earendil-works/pi-ai": ">=1.2.0",
+    "@earendil-works/pi-coding-agent": ">=1.2.0",
     "@earendil-works/pi-tui": ">=1.2.0"
   },
   "peerDependenciesMeta": {
@@ -51,17 +52,13 @@
     }
   },
   "devDependencies": {
-    "@earendil-works/pi-coding-agent": "^1.2.0",
     "@earendil-works/pi-ai": "^1.2.0",
+    "@earendil-works/pi-coding-agent": "^1.2.0",
     "@earendil-works/pi-tui": "^1.2.0",
     "@types/node": "^22.0.0",
     "typescript": "^5.5.0"
   },
-  "allowScripts": {
-    "protobufjs@7.6.5": true,
-    "protobufjs@7.6.4": true,
-    "@google/genai@1.52.0": true,
-    "koffi@2.16.2": true,
-    "tree-sitter-bash@0.25.1": true
+  "dependencies": {
+    "diff": "^9.0.0"
   }
 }