pi-compact-tools 0.6.3 → 0.7.8

package/extensions/compact-tools-progress.ts

@@ -0,0 +1,158 @@
+import type { ExtensionAPI, ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
+import { stripTerminalSequences, truncateToWidth } from "@earendil-works/pi-tui";
+import { colorizeRgb, interpolateRgb, themeColorRgb, type Rgb } from "./compact-tools-color.ts";
+import type { ToolArgs } from "./compact-tools-types.ts";
+
+const GLOW_INTERVAL_MS = 80;
+const WHITE: Rgb = { r: 255, g: 255, b: 255 };
+
+const TOOL_PROGRESS_MESSAGES: Readonly<Record<string, string>> = {
+	read: "Reading file…",
+	write: "Writing file…",
+	edit: "Editing file…",
+	bash: "Running command…",
+	powershell: "Running command…",
+	grep: "Searching text…",
+	find: "Finding files…",
+	ls: "Listing files…",
+};
+
+function humanizeToolName(toolName: string, args: ToolArgs): string {
+	const routedName = (toolName === "mcp" || toolName.startsWith("mcp__")) && typeof args.tool === "string"
+		? args.tool
+		: toolName;
+	const readableName = stripTerminalSequences(routedName)
+		.replace(/[\u0000-\u001f\u007f]/gu, " ")
+		.replace(/^mcp__/iu, "")
+		.replace(/[_-]mcp$/iu, "")
+		.replace(/([A-Z]+)([A-Z][a-z])/gu, "$1 $2")
+		.replace(/([a-z\d])([A-Z])/gu, "$1 $2")
+		.replace(/[_-]+/gu, " ")
+		.replace(/\s+/gu, " ")
+		.trim();
+	return truncateToWidth(readableName, 40, "…");
+}
+
+/** Keep the working row calm and private; invocation details remain in the tool card. */
+export function formatToolProgress(toolName: string, args: ToolArgs): string {
+	const builtInMessage = TOOL_PROGRESS_MESSAGES[toolName];
+	if (builtInMessage) return builtInMessage;
+	const displayName = humanizeToolName(toolName, args);
+	return displayName ? `Using ${displayName}…` : "Running tool…";
+}
+
+function glowRadius(length: number): number {
+	return Math.max(2, Math.min(8, Math.ceil(length / 4)));
+}
+
+/** Render a thinking-summary-colored label with a proportional white highlight sweeping left to right. */
+export function glowProgressMessage(message: string, frame: number, theme: Theme): string {
+	const characters = [...message];
+	if (characters.length === 0) return "";
+	const radius = glowRadius(characters.length);
+	const center = frame % (characters.length + radius * 2) - radius;
+	const base = themeColorRgb(theme, "thinkingMax");
+	if (!base) {
+		return characters.map((character, index) =>
+			theme.fg(Math.abs(index - center) < radius ? "mdHeading" : "thinkingMax", character)).join("");
+	}
+	return characters.map((character, index) => {
+		const distance = Math.abs(index - center);
+		const strength = Math.max(0, 1 - distance / radius);
+		return colorizeRgb(theme, interpolateRgb(base, WHITE, strength), character);
+	}).join("");
+}
+
+function createGlowFrames(message: string, theme: Theme): string[] {
+	const length = [...message].length;
+	if (length === 0) return [""];
+	return Array.from({ length: length + glowRadius(length) * 2 }, (_, frame) =>
+		glowProgressMessage(message, frame, theme));
+}
+
+/** Owns Pi's single working row so animation remains continuous across thinking and tool execution. */
+export class ProgressController {
+	private context: ExtensionContext | undefined;
+	private readonly activeTools = new Map<string, string>();
+	private message: string | undefined;
+	private frames: string[] = [];
+	private frame = 0;
+	private timer: ReturnType<typeof setInterval> | undefined;
+
+	constructor(pi: ExtensionAPI) {
+		pi.on("agent_start", () => this.setMessage("Thinking…"));
+		pi.on("message_update", (event) => {
+			const type = event.assistantMessageEvent.type;
+			if (type === "thinking_start" || type === "thinking_delta") this.setMessage("Thinking…");
+			else if (type === "text_start" || type === "text_delta") this.setMessage("Responding…");
+			else if (type === "toolcall_start" || type === "toolcall_delta") this.setMessage("Preparing tools…");
+		});
+		pi.on("tool_execution_start", (event) => {
+			const message = formatToolProgress(event.toolName, event.args ?? {});
+			this.activeTools.set(event.toolCallId, message);
+			this.setMessage(message);
+		});
+		pi.on("tool_execution_end", (event) => {
+			this.activeTools.delete(event.toolCallId);
+			const remaining = [...this.activeTools.values()].at(-1);
+			this.setMessage(remaining ?? "Processing results…");
+		});
+		pi.on("agent_end", () => {
+			this.activeTools.clear();
+			this.clearMessage();
+		});
+	}
+
+	bind(ctx: ExtensionContext): void {
+		this.stopAnimation();
+		this.context = ctx;
+		this.activeTools.clear();
+		this.message = undefined;
+		this.frames = [];
+		this.frame = 0;
+		ctx.ui.setWorkingVisible(true);
+		ctx.ui.setWorkingIndicator({ frames: [] });
+	}
+
+	dispose(): void {
+		this.stopAnimation();
+		this.activeTools.clear();
+		this.context?.ui.setWorkingMessage();
+		this.context?.ui.setWorkingIndicator();
+		this.message = undefined;
+		this.frames = [];
+		this.context = undefined;
+	}
+
+	private setMessage(message: string): void {
+		if (!this.context || (this.message === message && this.timer)) return;
+		this.message = message;
+		this.frames = createGlowFrames(message, this.context.ui.theme);
+		this.frame = 0;
+		this.renderMessage();
+		if (this.timer) return;
+		this.timer = setInterval(() => {
+			this.frame++;
+			this.renderMessage();
+		}, GLOW_INTERVAL_MS);
+		this.timer.unref?.();
+	}
+
+	private renderMessage(): void {
+		if (!this.message || !this.context || this.frames.length === 0) return;
+		this.context.ui.setWorkingMessage(this.frames[this.frame % this.frames.length]);
+	}
+
+	private clearMessage(): void {
+		this.stopAnimation();
+		this.message = undefined;
+		this.frames = [];
+		this.frame = 0;
+		this.context?.ui.setWorkingMessage();
+	}
+
+	private stopAnimation(): void {
+		if (this.timer) clearInterval(this.timer);
+		this.timer = undefined;
+	}
+}

package/extensions/compact-tools-runtime.ts

@@ -9,32 +9,26 @@ import type {
 } from "./compact-tools-types.ts";
 
 const MAX_TRACKED_ROWS = 2_000;
-const SPINNING_ROWS_KEY = Symbol.for("pi.compact-tools.spinning-rows");
+const INDICATOR_INTERVAL_MS = 45;
 const EXECUTION_TIMINGS_KEY = Symbol.for("pi.compact-tools.execution-timings");
 
 type ExecutionTiming = { startedAt: number; endedAt?: number };
-type TrackedRow = { state: RowState; name: CompactToolName; invalidate: () => void };
 type TimedExecute = (...args: any[]) => Promise<AgentToolResult<unknown>>;
 type SharedState = typeof globalThis & {
-	[SPINNING_ROWS_KEY]?: Set<RowState>;
 	[EXECUTION_TIMINGS_KEY]?: Map<string, ExecutionTiming>;
 };
 
 export class ToolRuntime {
 	private configValue = DEFAULT_CONFIG;
 	private configRevision: object = {};
-	private animateRows = false;
-	private readonly spinningRows = new Set<RowState>();
 	private readonly executionTimings: Map<string, ExecutionTiming>;
-	private readonly trackedRows = new Map<string, TrackedRow>();
+	private readonly indicatorInvalidators = new Map<string, () => void>();
+	private indicatorFrame = 0;
+	private indicatorTimer: ReturnType<typeof setInterval> | undefined;
 
 	constructor() {
 		const shared = globalThis as SharedState;
-		for (const state of shared[SPINNING_ROWS_KEY] ?? []) {
-			if (state.timer) clearInterval(state.timer);
-		}
 		this.executionTimings = shared[EXECUTION_TIMINGS_KEY] ?? new Map<string, ExecutionTiming>();
-		shared[SPINNING_ROWS_KEY] = this.spinningRows;
 		shared[EXECUTION_TIMINGS_KEY] = this.executionTimings;
 	}
 
@@ -42,14 +36,8 @@ export class ToolRuntime {
 		return this.configValue;
 	}
 
-	get animatesRows(): boolean {
-		return this.animateRows;
-	}
-
-	configure(config: CompactToolsConfig, animateRows: boolean): void {
-		this.reset(false);
+	configure(config: CompactToolsConfig): void {
 		this.configValue = config;
-		this.animateRows = animateRows;
 		this.configRevision = {};
 	}
 
@@ -58,40 +46,35 @@ export class ToolRuntime {
 	}
 
 	reset(clearTimings: boolean): void {
-		for (const state of this.spinningRows) this.stopSpinner(state);
-		this.trackedRows.clear();
+		this.stopIndicators();
 		if (clearTimings) this.clearTimings();
 	}
 
-	track(ctx: RenderContext, name: CompactToolName, state: RowState): void {
-		this.trackedRows.delete(ctx.toolCallId);
-		this.trackedRows.set(ctx.toolCallId, { state, name, invalidate: ctx.invalidate });
-		if (this.trackedRows.size <= MAX_TRACKED_ROWS) return;
-		const oldest = this.trackedRows.keys().next().value;
-		if (oldest !== undefined) this.trackedRows.delete(oldest);
-	}
-
-	toggleTrackedRows(): "expanded" | "collapsed" | undefined {
-		const rows: TrackedRow[] = [];
-		for (const row of this.trackedRows.values()) {
-			if (this.configValue.auto_compact[row.name] && row.state.hasResult) rows.push(row);
+	syncIndicator(toolCallId: string, running: boolean, invalidate: () => void): number {
+		if (!running) {
+			this.removeIndicator(toolCallId);
+			return 0;
 		}
-		if (rows.length === 0) return undefined;
-		const expand = rows.some(({ state }) => !state.expanded);
-		for (const { state, invalidate } of rows) {
-			state.expanded = expand;
-			invalidate();
+		this.indicatorInvalidators.set(toolCallId, invalidate);
+		if (!this.indicatorTimer) {
+			this.indicatorTimer = setInterval(() => {
+				this.indicatorFrame++;
+				for (const requestRender of this.indicatorInvalidators.values()) requestRender();
+			}, INDICATOR_INTERVAL_MS);
+			this.indicatorTimer.unref?.();
 		}
-		return expand ? "expanded" : "collapsed";
+		return this.indicatorFrame;
 	}
 
 	syncExpansion(state: RowState, hostExpanded: boolean, name: CompactToolName): boolean {
-		const initialized = this.initializeExpansion(state, name);
-		if (initialized || state.lastHostExpanded === undefined) {
-			state.lastHostExpanded = hostExpanded;
-		} else if (state.lastHostExpanded !== hostExpanded) {
+		const initialized = this.initializeExpansion(state, name, hostExpanded);
+		if (!initialized && state.lastHostExpanded !== hostExpanded) {
 			state.lastHostExpanded = hostExpanded;
-			state.expanded = !state.expanded;
+			state.expanded = hostExpanded;
+			// A non-auto-compacted row collapses back to its bounded preview. Hiding it
+			// here removes the clicked row from under the pointer, so the next click can
+			// accidentally hit the Thinking block that moved into the same coordinates.
+			state.preview = !hostExpanded && !this.configValue.auto_compact[name];
 		}
 		return state.expanded ?? false;
 	}
@@ -111,8 +94,8 @@ export class ToolRuntime {
 		const started = !ctx.argsComplete || ctx.executionStarted || running;
 		if (started && state.startedAt === undefined) state.startedAt = Date.now();
 		if (finished && state.startedAt !== undefined && state.endedAt === undefined) state.endedAt = Date.now();
+		if (finished) this.removeIndicator(ctx.toolCallId);
 		this.persistTiming(state, ctx.toolCallId);
-		this.syncSpinner(state, running, ctx.invalidate);
 		return state;
 	}
 
@@ -133,37 +116,28 @@ export class ToolRuntime {
 		};
 	}
 
-	private initializeExpansion(state: RowState, name: CompactToolName): boolean {
-		if (state.configRevision === this.configRevision) return false;
-		state.configRevision = this.configRevision;
-		state.expanded = !this.configValue.auto_compact[name];
-		return true;
+	private removeIndicator(toolCallId: string): void {
+		this.indicatorInvalidators.delete(toolCallId);
+		if (this.indicatorInvalidators.size > 0 || !this.indicatorTimer) return;
+		clearInterval(this.indicatorTimer);
+		this.indicatorTimer = undefined;
+		this.indicatorFrame = 0;
 	}
 
-	private stopSpinner(state: RowState): void {
-		if (state.timer) clearInterval(state.timer);
-		state.timer = undefined;
-		this.spinningRows.delete(state);
+	private stopIndicators(): void {
+		if (this.indicatorTimer) clearInterval(this.indicatorTimer);
+		this.indicatorTimer = undefined;
+		this.indicatorInvalidators.clear();
+		this.indicatorFrame = 0;
 	}
 
-	private syncSpinner(state: RowState, running: boolean, invalidate: () => void): void {
-		const spinner = this.configValue.spinner;
-		if (!running || !this.animateRows || spinner.frames.length < 2) {
-			this.stopSpinner(state);
-			return;
-		}
-		if (state.timer) return;
-		state.frame ??= 0;
-		state.timer = setInterval(() => {
-			state.frame = ((state.frame ?? 0) + 1) % spinner.frames.length;
-			try {
-				invalidate();
-			} catch {
-				this.stopSpinner(state);
-			}
-		}, spinner.intervalMs);
-		state.timer.unref?.();
-		this.spinningRows.add(state);
+	private initializeExpansion(state: RowState, name: CompactToolName, hostExpanded = false): boolean {
+		if (state.configRevision === this.configRevision) return false;
+		state.configRevision = this.configRevision;
+		state.lastHostExpanded = hostExpanded;
+		state.expanded = hostExpanded;
+		state.preview = !hostExpanded && !this.configValue.auto_compact[name];
+		return true;
 	}
 
 	private restoreTiming(state: RowState, toolCallId: string): boolean {