pi-compact-tools 0.11.1 → 0.12.0

package/README.md

@@ -18,7 +18,7 @@ Pick a style. Silent mode works on top of either.
 
 | | Setting | Shows | How |
 |---|---|---|---|
-| **Compact** | Style | every tool call, one short row each | `"style": "compact"` (default) |
+| **Compact** | Style | every tool call as its own compact, expandable row | `"style": "compact"` (default) |
 | **Claude** | Style | reads and searches folded into one line, like Claude Code | `"style": "claude"` |
 | **Silent** | Mode | only your prompts and the answers | `Ctrl+'` or `/silent` |
 
@@ -26,9 +26,9 @@ Set `"style"` in the config below, then `/reload`. `"style": "off"` restores Pi'
 
 ### Style: Compact
 
-![Compact style: searches, reads, a test run, and an edit with its diff, one row each](https://raw.githubusercontent.com/nedleeds/pi-compact-tools/main/assets/compact-workflow.gif)
+![Compact style: searches, reads, a test run, and an edit with its diff, each call with its status](https://raw.githubusercontent.com/nedleeds/pi-compact-tools/main/assets/compact-workflow.gif)
 
-- One row per call: status, duration, and line count.
+- Each call: what it ran, then its status, duration, and line count.
 - Edits show a highlighted diff with `(+3 -1)`; reads and writes show numbered code.
 
 ### Style: Claude

package/extensions/compact-tools-activity.ts

@@ -3,7 +3,7 @@ import type { TUI } from "@earendil-works/pi-tui";
 import { onTick } from "./compact-tools-clock.ts";
 import { colorizeRgb, interpolateRgb, type Rgb } from "./compact-tools-color.ts";
 import { hookMethod } from "./compact-tools-hook.ts";
-import { activityGlow, type ColorRamp, type ThinkingLevel } from "./compact-tools-palette.ts";
+import { activityGlow, thinkingLevelColor, type ColorRamp, type ThinkingLevel } from "./compact-tools-palette.ts";
 
 const WIDGET_KEY = "compact-tools-silent-activity-render";
 const ACTIVITY_STATE = Symbol.for("pi-compact-tools.silent.activity.state");
@@ -109,17 +109,22 @@ export function frameChanges(frame: number): boolean {
 	return FRAME_CHANGED[frameIndex(frame)]!;
 }
 
-// Resolving a ramp walks the theme's colors; it only changes with the theme or the level.
-const glowCache = new WeakMap<Theme, Map<ThinkingLevel, ColorRamp | null>>();
+/**
+ * Resolving a ramp walks the theme's colors, so each level keeps its last one.
+ * It is kept against the colors it is made from, the level's and the text's, not
+ * against the theme: Pi's theme is one object whose palette /theme swaps.
+ */
+const glowCache = new Map<ThinkingLevel, { colors: string; glow: ColorRamp | undefined }>();
 
 function cachedGlow(theme: Theme, level: ThinkingLevel): ColorRamp | undefined {
-	let byLevel = glowCache.get(theme);
-	if (!byLevel) {
-		byLevel = new Map();
-		glowCache.set(theme, byLevel);
-	}
-	if (!byLevel.has(level)) byLevel.set(level, activityGlow(theme, level) ?? null);
-	return byLevel.get(level) ?? undefined;
+	const colors = typeof theme.getFgAnsi === "function"
+		? theme.getFgAnsi(thinkingLevelColor(level)) + theme.getFgAnsi("text")
+		: "";
+	const cached = glowCache.get(level);
+	if (cached && cached.colors === colors) return cached.glow;
+	const glow = activityGlow(theme, level);
+	glowCache.set(level, { colors, glow });
+	return glow;
 }
 
 function toneColor(glow: ColorRamp, intensity: number): Rgb {

package/extensions/compact-tools-claude.ts

@@ -51,10 +51,28 @@ function commandOf(args: ToolArgs): string {
 	return typeof args.command === "string" ? args.command : "";
 }
 
+/** Claude Code shortens a collapsed command only past two lines or 160 characters. */
+export const CLAUDE_COMMAND_LINES = 2;
+export const CLAUDE_COMMAND_CHARS = 160;
+
+/**
+ * A command as Claude Code titles it: whole when opened, and collapsed cut only
+ * past its line and character limits, with an ellipsis. Within them it is never
+ * cut to fit the row; the title wraps instead.
+ */
+export function claudeCommand(command: string, expanded: boolean): string {
+	const text = normalizeLineEndings(stripTerminalSequences(command)).trim();
+	if (expanded) return text;
+	const lines = text.split("\n");
+	let shown = lines.length > CLAUDE_COMMAND_LINES ? lines.slice(0, CLAUDE_COMMAND_LINES).join("\n") : text;
+	if (shown.length > CLAUDE_COMMAND_CHARS) shown = shown.slice(0, CLAUDE_COMMAND_CHARS);
+	return shown === text ? text : `${shown.trim()}…`;
+}
+
 /** What goes between the parentheses: `Bash(npm test)`, `Search(pattern: "x", path: "src")`. */
-export function claudeArgument(name: string, args: ToolArgs): string {
+export function claudeArgument(name: string, args: ToolArgs, expanded = false): string {
 	const path = pathOf(args);
-	if (name === "bash" || name === "powershell") return oneLine(commandOf(args));
+	if (name === "bash" || name === "powershell") return claudeCommand(commandOf(args), expanded);
 	if (name === "grep" || name === "find") {
 		const pattern = typeof args.pattern === "string" ? oneLine(args.pattern) : "";
 		// Arguments stream in; until the pattern arrives there is nothing to name.
@@ -85,8 +103,8 @@ export function formatArguments(args: ToolArgs): string {
 	return parts.length > 0 ? parts.join(", ") : summarizeCustomArguments(args);
 }
 
-export function claudeTitle(name: string, args: ToolArgs): { label: string; argument: string } {
-	return { label: claudeLabel(name), argument: claudeArgument(name, args) };
+export function claudeTitle(name: string, args: ToolArgs, expanded = false): { label: string; argument: string } {
+	return { label: claudeLabel(name), argument: claudeArgument(name, args, expanded) };
 }
 
 // Claude Code's own lists: a command made only of these only looks around, so it

package/extensions/compact-tools-grouping.ts

@@ -3,6 +3,7 @@ import {
 	ToolExecutionComponent,
 	type AgentToolResult,
 	type ExtensionContext,
+	type Theme,
 } from "@earendil-works/pi-coding-agent";
 import { Container, Spacer, Text, truncateToWidth, type Component } from "@earendil-works/pi-tui";
 import { claudeFailure, lookHint, lookKind, pathOf, type LookKind } from "./compact-tools-claude.ts";
@@ -39,8 +40,18 @@ export interface ToolRowLike {
 	invalidate(): void;
 }
 
-export function memberStatus(row: ToolRowLike): RowStatus {
-	if (!row.result || row.isPartial) return "running";
+/** Whether a call without its result can still get one; the row itself answers the same way. */
+export type CanRun = (row: ToolRowLike) => boolean;
+
+const ALWAYS_RUNS: CanRun = () => true;
+
+/**
+ * A call with no result yet runs, unless it can no longer get one: restored from
+ * the session without it, or left without it when its run ended. Then it waits,
+ * as its row shows.
+ */
+export function memberStatus(row: ToolRowLike, canRun: CanRun = ALWAYS_RUNS): RowStatus {
+	if (!row.result || row.isPartial) return canRun(row) ? "running" : "pending";
 	return row.result.isError ? "error" : "success";
 }
 
@@ -60,9 +71,9 @@ function kindOf(row: ToolRowLike): LookKind | undefined {
 	return kind;
 }
 
-function lastRunning(rows: readonly ToolRowLike[]): ToolRowLike | undefined {
+function lastRunning(rows: readonly ToolRowLike[], canRun: CanRun): ToolRowLike | undefined {
 	for (let index = rows.length - 1; index >= 0; index--) {
-		if (memberStatus(rows[index]!) === "running") return rows[index];
+		if (memberStatus(rows[index]!, canRun) === "running") return rows[index];
 	}
 	return undefined;
 }
@@ -89,9 +100,13 @@ export function countGroup(rows: readonly ToolRowLike[]): Record<LookKind, numbe
  * "Searched for 2 patterns, read 3 files". While any call in the group still runs,
  * every verb reads in progress. `bold` marks the counts, as Claude Code does.
  */
-export function summarizeGroup(rows: readonly ToolRowLike[], bold: (text: string) => string = (text) => text): string {
+export function summarizeGroup(
+	rows: readonly ToolRowLike[],
+	bold: (text: string) => string = (text) => text,
+	canRun: CanRun = ALWAYS_RUNS,
+): string {
 	const counts = countGroup(rows);
-	const running = lastRunning(rows) !== undefined;
+	const running = lastRunning(rows, canRun) !== undefined;
 	const text = PHRASES.filter((phrase) => counts[phrase.kind] > 0)
 		.map((phrase) => {
 			const count = counts[phrase.kind];
@@ -102,8 +117,8 @@ export function summarizeGroup(rows: readonly ToolRowLike[], bold: (text: string
 }
 
 /** While a call runs, the line under its group names what it looks at. */
-export function groupHint(rows: readonly ToolRowLike[]): string | undefined {
-	const running = lastRunning(rows);
+export function groupHint(rows: readonly ToolRowLike[], canRun: CanRun = ALWAYS_RUNS): string | undefined {
+	const running = lastRunning(rows, canRun);
 	if (!running) return undefined;
 	return lookHint(running.toolName, argsOf(running)) || undefined;
 }
@@ -114,7 +129,33 @@ export function groupFailures(rows: readonly ToolRowLike[]): string[] {
 		.map((row) => claudeFailure(row.toolName, getTextResult(row.result!)).headline);
 }
 
-type GroupState = { expanded: boolean; lastHostExpanded: boolean };
+/**
+ * A finished group's lines, and everything they were drawn from. Only a group with
+ * no running row is kept, so every row in it has its final result.
+ */
+type HeaderCache = {
+	paint: string;
+	width: number;
+	expanded: boolean;
+	rows: readonly ToolRowLike[];
+	args: unknown[];
+	results: unknown[];
+	lines: string[];
+};
+
+type GroupState = { expanded: boolean; lastHostExpanded: boolean; header?: HeaderCache };
+
+/** The colors a group line is drawn in, resolved once per frame rather than once per group. */
+type Paint = { theme: Theme; chrome: (text: string) => string; key: string };
+
+/** Theme colors a group line uses; a theme that changes any of them draws the lines anew. */
+const PAINT_COLORS = ["toolTitle", "error", "success", "muted", "dim", "text", "borderMuted"] as const;
+
+function headerStill(cache: HeaderCache, rows: readonly ToolRowLike[], paint: string, width: number, expanded: boolean): boolean {
+	if (cache.paint !== paint || cache.width !== width || cache.expanded !== expanded || cache.rows.length !== rows.length) return false;
+	return rows.every((row, index) => row === cache.rows[index] && row.args === cache.args[index]
+		&& row.result === cache.results[index]);
+}
 
 /** A run of tool rows drawn as one summary line, which a click or Ctrl+O opens into the rows themselves. */
 export class ToolGroupComponent extends Container {
@@ -212,6 +253,10 @@ export function groupChildren(
 export class ToolGroupController {
 	private context: ExtensionContext | undefined;
 	private readonly states = new WeakMap<object, GroupState>();
+	/** This frame's colors, set as the chat starts drawing. */
+	private paint: Paint | undefined;
+	/** Asks the runtime, which knows which run each call belongs to, as the call's own row does. */
+	private readonly canRun: CanRun = (row) => this.runtime.canRun(row.toolCallId);
 
 	constructor(private readonly runtime: ToolRuntime) {}
 
@@ -225,11 +270,13 @@ export class ToolGroupController {
 				hookMethod(chat, "render", "claude.groups", (self, args, original) => {
 					if (!this.context || isSilent() || this.runtime.config.style !== "claude") return original.apply(self, args);
 					const children = self.children as unknown[];
+					this.paint = this.resolvePaint();
 					self.children = groupChildren(children, (rows, members) => this.makeGroup(rows, members, tui));
 					try {
 						return original.apply(self, args);
 					} finally {
 						self.children = children;
+						this.paint = undefined;
 					}
 				});
 			}
@@ -249,8 +296,40 @@ export class ToolGroupController {
 			state = { expanded: key.expanded, lastHostExpanded: key.expanded };
 			this.states.set(key, state);
 		}
-		return new ToolGroupComponent(rows, members, state, (group, width, expanded) => this.draw(group, width, expanded),
-			() => tui.requestRender());
+		const groupState = state;
+		return new ToolGroupComponent(rows, members, state,
+			(group, width, expanded) => this.drawCached(group, width, expanded, groupState), () => tui.requestRender());
+	}
+
+	private resolvePaint(): Paint | undefined {
+		const theme = this.context?.ui.theme;
+		if (!theme) return undefined;
+		const chrome = chromePainter(theme);
+		const key = PAINT_COLORS.map((color) => theme.fg(color, "x")).join("") + theme.bold("x") + chrome("x");
+		return { theme, chrome, key };
+	}
+
+	/**
+	 * A finished group draws the same lines until one of its rows, the width, the
+	 * expansion, or the theme changes, so those lines are kept. A running group's
+	 * line pulses and counts time, so it is drawn every frame.
+	 */
+	private drawCached(rows: readonly ToolRowLike[], width: number, expanded: boolean, state: GroupState): string[] {
+		const paint = this.paint ?? this.resolvePaint();
+		if (!paint) return [];
+		if (lastRunning(rows, this.canRun)) return this.draw(rows, width, expanded, paint);
+		if (state.header && headerStill(state.header, rows, paint.key, width, expanded)) return state.header.lines;
+		const lines = this.draw(rows, width, expanded, paint);
+		state.header = {
+			paint: paint.key,
+			width,
+			expanded,
+			rows: [...rows],
+			args: rows.map((row) => row.args),
+			results: rows.map((row) => row.result),
+			lines,
+		};
+		return lines;
 	}
 
 	/**
@@ -258,23 +337,26 @@ export class ToolGroupController {
 	 * the title style. While it runs the dot pulses and the line below names what it
 	 * looks at.
 	 */
-	private draw(rows: readonly ToolRowLike[], width: number, expanded: boolean): string[] {
-		const theme = this.context?.ui.theme;
-		if (!theme) return [];
-		const chrome = chromePainter(theme);
+	private draw(rows: readonly ToolRowLike[], width: number, expanded: boolean, paint: Paint): string[] {
+		const { theme, chrome } = paint;
 		const fit = (line: string) => truncateToWidth(line, Math.max(1, width), "…");
-		const running = lastRunning(rows);
-		const failed = rows.some((row) => memberStatus(row) === "error");
-		const status: RowStatus = running ? "running" : failed ? "error" : "success";
-		let title = `${paintIndicator(theme, status, this.runtime.frame)} ${theme.fg("toolTitle", theme.bold(summarizeGroup(rows)))}`;
+		const running = lastRunning(rows, this.canRun);
+		const statuses = rows.map((row) => memberStatus(row, this.canRun));
+		// A call that waits for a result it will never get leaves the group waiting too.
+		const status: RowStatus = running ? "running" : statuses.includes("error") ? "error"
+			: statuses.includes("pending") ? "pending" : "success";
+		const summary = summarizeGroup(rows, undefined, this.canRun);
+		let title = `${paintIndicator(theme, status, this.runtime.frame)} ${theme.fg("toolTitle", theme.bold(summary))}`;
 		if (running) {
+			// The folded row is not drawn, so the line that pulses for it keeps the clock going.
+			this.runtime.keepAnimating(running.toolCallId);
 			const started = this.runtime.timing(running.toolCallId)?.startedAt;
 			const elapsed = started === undefined ? 0 : Date.now() - started;
 			title += `${elapsed >= 2000 ? chrome(` · ${formatDurationMs(elapsed)}`) : ""}…`;
 		}
 		if (!expanded) title += chrome(` ${EXPAND_HINT}`);
 		const lines = ["", fit(` ${title}`)];
-		const hintText = groupHint(rows);
+		const hintText = groupHint(rows, this.canRun);
 		if (hintText) lines.push(fit(chrome(` └ ${hintText}`)));
 		if (!expanded) for (const failure of groupFailures(rows)) lines.push(fit(chrome(" └ ") + theme.fg("error", failure)));
 		return lines;

package/extensions/compact-tools-layout.ts

@@ -39,13 +39,24 @@ class CachedComponent implements Component {
 	}
 }
 
-/** A Container that does not re-copy all child lines on every fullscreen scroll frame. */
+/**
+ * A Container that does not re-copy all child lines on every fullscreen scroll
+ * frame. Its lines are kept for a width, and for whatever else `cacheKey()`
+ * says they depend on, until a child is added, removed, or invalidated.
+ */
 export class CachedContainer extends Container {
 	private cachedWidth?: number;
+	private cachedKey?: unknown;
 	private cachedLines?: string[];
 
+	/** What besides the width the lines depend on, read as each frame is drawn. */
+	protected cacheKey(): unknown {
+		return undefined;
+	}
+
 	private clearRenderCache(): void {
 		this.cachedWidth = undefined;
+		this.cachedKey = undefined;
 		this.cachedLines = undefined;
 	}
 
@@ -65,8 +76,10 @@ export class CachedContainer extends Container {
 	}
 
 	override render(width: number): string[] {
-		if (this.cachedWidth !== width || !this.cachedLines) {
+		const key = this.cacheKey();
+		if (this.cachedWidth !== width || this.cachedKey !== key || !this.cachedLines) {
 			this.cachedWidth = width;
+			this.cachedKey = key;
 			this.cachedLines = super.render(width);
 		}
 		return this.cachedLines;
@@ -78,6 +91,49 @@ export class CachedContainer extends Container {
 	}
 }
 
+/**
+ * A call line whose status dot is painted when the row is drawn rather than when
+ * it was built. The dot follows the row's state and the animation frame without
+ * Pi rebuilding the row, and a line is laid out once for each dot it has shown.
+ */
+export class LiveCallContainer extends CachedContainer {
+	private readonly titles = new Map<string, Component>();
+	private indicator = "";
+	private readonly titleLine: Component = {
+		render: (width) => this.title().render(width),
+		invalidate: () => this.titles.clear(),
+	};
+
+	constructor(
+		private readonly paintIndicator: () => string,
+		private readonly renderTitle: (indicator: string) => Component,
+	) {
+		super();
+		super.addChild(this.titleLine);
+	}
+
+	/** Clearing removes what was added beneath the call line; the line itself stays. */
+	override clear(): void {
+		super.clear();
+		super.addChild(this.titleLine);
+	}
+
+	/** The dot, painted now; the title drawn beneath it follows. */
+	protected override cacheKey(): string {
+		this.indicator = this.paintIndicator();
+		return this.indicator;
+	}
+
+	private title(): Component {
+		let title = this.titles.get(this.indicator);
+		if (!title) {
+			title = this.renderTitle(this.indicator);
+			this.titles.set(this.indicator, title);
+		}
+		return title;
+	}
+}
+
 export function prefixedText(text: string, firstPrefix: string, continuationPrefix = firstPrefix): Component {
 	const prefixWidth = Math.max(visibleWidth(firstPrefix), visibleWidth(continuationPrefix));
 	const normalized = text.replace(/\t/g, "   ");

package/extensions/compact-tools-palette.ts

@@ -66,7 +66,7 @@ const THINKING_LEVEL_COLOR = {
 } as const satisfies Record<ThinkingLevel, ThemeForeground>;
 
 /** The theme color a thinking level is painted with. */
-function thinkingLevelColor(level: ThinkingLevel): ThemeForeground {
+export function thinkingLevelColor(level: ThinkingLevel): ThemeForeground {
 	return THINKING_LEVEL_COLOR[level] ?? "thinkingMedium";
 }
 

package/extensions/compact-tools-runtime.ts

@@ -12,9 +12,16 @@ import {
 
 const MAX_TRACKED_ROWS = 2_000;
 const INDICATOR_INTERVAL_MS = 45;
+/**
+ * How long a running row may go undrawn before it stops asking for frames. Pi draws
+ * every row it shows on every frame, so only a row that left the transcript, or
+ * never got its result, goes this long; it asks again the next time it is drawn.
+ */
+const UNDRAWN_ROW_MS = 1_500;
 const EXECUTION_TIMINGS_KEY = Symbol.for("pi.compact-tools.execution-timings");
 
 type ExecutionTiming = { startedAt: number; endedAt?: number };
+type Indicator = { invalidate: () => void; drawnAt: number };
 type TimedExecute = (...args: any[]) => Promise<AgentToolResult<unknown>>;
 type SharedState = typeof globalThis & {
 	[EXECUTION_TIMINGS_KEY]?: Map<string, ExecutionTiming>;
@@ -24,11 +31,21 @@ export class ToolRuntime {
 	private configValue = DEFAULT_CONFIG;
 	private configRevision: object = {};
 	private readonly executionTimings: Map<string, ExecutionTiming>;
-	private readonly indicatorInvalidators = new Map<string, () => void>();
+	private readonly indicators = new Map<string, Indicator>();
 	private indicatorFrame = 0;
 	private indicatorTimer: ReturnType<typeof setInterval> | undefined;
+	/** Pi's frame request, once bound to its terminal; rows then repaint without being rebuilt. */
+	private requestRender: (() => void) | undefined;
+	/** Whether the agent is working; undefined until the host says, which counts as working. */
+	private busy: boolean | undefined;
+	/**
+	 * The calls Pi announced in the run going on. Only these can be running, so
+	 * nothing about earlier calls has to be remembered, and the set never holds
+	 * more than one run's calls.
+	 */
+	private readonly currentCalls = new Set<string>();
 
-	constructor() {
+	constructor(private readonly clock: () => number = () => performance.now()) {
 		const shared = globalThis as SharedState;
 		this.executionTimings = shared[EXECUTION_TIMINGS_KEY] ?? new Map<string, ExecutionTiming>();
 		shared[EXECUTION_TIMINGS_KEY] = this.executionTimings;
@@ -62,24 +79,76 @@ export class ToolRuntime {
 		if (clearTimings) this.clearTimings();
 	}
 
+	/**
+	 * Bind the animation to Pi's frame requests. A running dot is painted when its
+	 * row is drawn, so a frame only has to be asked for, once, however many rows
+	 * run. Unbound, each running row is rebuilt to repaint, as Pi does on its own.
+	 */
+	bindRenderer(requestRender: (() => void) | undefined): void {
+		this.requestRender = requestRender;
+	}
+
+	/**
+	 * The agent started or stopped working. Once it stops nothing can still be
+	 * running, so a row that never got its result stops pulsing and waits instead.
+	 */
+	setBusy(busy: boolean): void {
+		if (busy && this.busy !== true) this.currentCalls.clear();
+		this.busy = busy;
+		if (busy) return;
+		const animating = this.indicators.size > 0;
+		this.stopIndicators();
+		if (animating) this.requestRender?.();
+	}
+
+	/**
+	 * Pi announced a call of the run going on: its arguments began to stream, or it
+	 * began to run. Pi tells extensions before it makes the call's row. The set is
+	 * emptied as each run starts, so it holds one run's calls at most.
+	 */
+	noteCall(toolCallId: string): void {
+		this.currentCalls.add(toolCallId);
+	}
+
+	/**
+	 * Whether a call can be running: only one Pi announced in the run going on. A
+	 * row restored from the session, one left without a result when its run ended,
+	 * and one Pi made again for an old call when it rebuilt the transcript were
+	 * never announced in this run; whatever they did is over. Until the host says
+	 * whether the agent works, every call can run, as before.
+	 */
+	canRun(toolCallId: string): boolean {
+		return this.busy === undefined || (this.busy && this.currentCalls.has(toolCallId));
+	}
+
 	syncIndicator(toolCallId: string, running: boolean, invalidate: () => void): number {
 		if (!running) {
 			this.removeIndicator(toolCallId);
 			return 0;
 		}
-		this.indicatorInvalidators.set(toolCallId, invalidate);
+		const indicator = this.indicators.get(toolCallId);
+		if (indicator) {
+			indicator.invalidate = invalidate;
+			indicator.drawnAt = this.clock();
+		} else {
+			this.indicators.set(toolCallId, { invalidate, drawnAt: this.clock() });
+		}
 		if (!this.indicatorTimer) {
-			this.indicatorTimer = setInterval(() => {
-				this.indicatorFrame++;
-				// Silent mode hides tool rows; repainting the screen for them would be pure cost.
-				if (isSilent()) return;
-				for (const requestRender of this.indicatorInvalidators.values()) requestRender();
-			}, INDICATOR_INTERVAL_MS);
+			this.indicatorTimer = setInterval(() => this.tick(), INDICATOR_INTERVAL_MS);
 			this.indicatorTimer.unref?.();
 		}
 		return this.indicatorFrame;
 	}
 
+	/**
+	 * A running row that is out of sight but still counts, such as one folded into
+	 * a group whose line pulses for it, keeps the animation going.
+	 */
+	keepAnimating(toolCallId: string): void {
+		const indicator = this.indicators.get(toolCallId);
+		if (indicator) indicator.drawnAt = this.clock();
+	}
+
 	syncExpansion(state: RowState, hostExpanded: boolean, name: string): boolean {
 		const initialized = this.initializeExpansion(state, name, hostExpanded);
 		if (!initialized && state.lastHostExpanded !== hostExpanded) {
@@ -98,15 +167,18 @@ export class ToolRuntime {
 		state.hasResult = available;
 	}
 
-	syncRow(
-		ctx: RenderContext,
-		running = ctx.executionStarted && ctx.state.endedAt === undefined,
-		finished = false,
-	): RowState {
+	syncRow(ctx: RenderContext, finished = false): RowState {
 		const state = ctx.state;
-		if (this.restoreTiming(state, ctx.toolCallId)) running = false;
-		const started = !ctx.argsComplete || ctx.executionStarted || running;
+		// Pi can rebuild the transcript mid-run, making new rows for old calls; a call
+		// keeps the run its first row was made in.
+		this.restoreTiming(state, ctx.toolCallId);
+		// A row is timed from when it runs, as Pi times its own: the model writing the
+		// arguments is not the tool's time. A restored row never ran in front of the
+		// reader, so it has no time to measure unless this process timed it before a
+		// /reload, and a call that never ran has none either.
+		const started = this.canRun(ctx.toolCallId) && ctx.executionStarted;
 		if (started && state.startedAt === undefined) state.startedAt = Date.now();
+		if (finished) state.finished = true;
 		if (finished && state.startedAt !== undefined && state.endedAt === undefined) state.endedAt = Date.now();
 		if (finished) this.removeIndicator(ctx.toolCallId);
 		this.persistTiming(state, ctx.toolCallId);
@@ -146,9 +218,28 @@ export class ToolRuntime {
 		};
 	}
 
+	private tick(): void {
+		this.indicatorFrame++;
+		const requestRender = this.requestRender;
+		if (requestRender) {
+			const oldest = this.clock() - UNDRAWN_ROW_MS;
+			for (const [toolCallId, indicator] of this.indicators) {
+				if (indicator.drawnAt < oldest) this.removeIndicator(toolCallId);
+			}
+			if (this.indicators.size === 0) return;
+		}
+		// Silent mode hides tool rows; repainting the screen for them would be pure cost.
+		if (isSilent()) return;
+		if (requestRender) {
+			requestRender();
+			return;
+		}
+		for (const { invalidate } of this.indicators.values()) invalidate();
+	}
+
 	private removeIndicator(toolCallId: string): void {
-		this.indicatorInvalidators.delete(toolCallId);
-		if (this.indicatorInvalidators.size > 0 || !this.indicatorTimer) return;
+		this.indicators.delete(toolCallId);
+		if (this.indicators.size > 0 || !this.indicatorTimer) return;
 		clearInterval(this.indicatorTimer);
 		this.indicatorTimer = undefined;
 		this.indicatorFrame = 0;
@@ -157,7 +248,7 @@ export class ToolRuntime {
 	private stopIndicators(): void {
 		if (this.indicatorTimer) clearInterval(this.indicatorTimer);
 		this.indicatorTimer = undefined;
-		this.indicatorInvalidators.clear();
+		this.indicators.clear();
 		this.indicatorFrame = 0;
 	}
 
@@ -177,12 +268,11 @@ export class ToolRuntime {
 		return true;
 	}
 
-	private restoreTiming(state: RowState, toolCallId: string): boolean {
+	private restoreTiming(state: RowState, toolCallId: string): void {
 		const timing = this.executionTimings.get(toolCallId);
-		if (!timing) return false;
+		if (!timing) return;
 		state.startedAt = timing.startedAt;
 		state.endedAt = timing.endedAt;
-		return timing.endedAt !== undefined;
 	}
 
 	private persistTiming(state: RowState, toolCallId: string): void {

package/extensions/compact-tools-types.ts

@@ -37,6 +37,8 @@ export interface RowState {
 	hasResult?: boolean;
 	lastHostExpanded?: boolean;
 	configRevision?: object;
+	/** The row has its final result, whether or not it was timed. */
+	finished?: boolean;
 	startedAt?: number;
 	endedAt?: number;
 	resultLineSummary?: string;

package/extensions/compact-tools.ts

@@ -1,6 +1,7 @@
 import type {
 	AgentToolResult,
 	ExtensionAPI,
+	ExtensionContext,
 	Theme,
 	ToolDefinition,
 	ToolRenderResultOptions,
@@ -37,6 +38,7 @@ import {
 import {
 	CachedContainer,
 	claudeRows,
+	LiveCallContainer,
 	limitComponentLines,
 	prefixedLines,
 	prefixedText,
@@ -72,6 +74,7 @@ const PREVIEW_DIFF_CONTEXT_LINES = 1;
 const CLAUDE_INDENT = "   ";
 
 const runtime = new ToolRuntime();
+const RENDER_WIDGET_KEY = "compact-tools-render";
 const registeredTools = new Set<CompactToolName>();
 let registeredConfiguration: string | undefined;
 
@@ -95,13 +98,25 @@ function callStatus(ctx: RenderContext, state: RowState): RowStatus {
 	// write/edit arguments can stream for much longer than their eventual filesystem
 	// operation. Treat that active tool-call phase as running so every built-in row
 	// animates consistently instead of waiting for execute() to begin.
-	const active = ctx.executionStarted || !ctx.argsComplete;
-	return classifyCallStatus(ctx.isError, active, state.endedAt !== undefined);
+	const active = runtime.canRun(ctx.toolCallId) && (ctx.executionStarted || !ctx.argsComplete);
+	return classifyCallStatus(ctx.isError, active, state.finished === true || state.endedAt !== undefined);
 }
 
-function renderIndicator(theme: Theme, ctx: RenderContext, state: RowState): string {
-	const status = callStatus(ctx, state);
-	return paintIndicator(theme, status, runtime.syncIndicator(ctx.toolCallId, status === "running", () => ctx.invalidate()));
+/**
+ * The status dot, painted each time the row is drawn. Pi draws a call before its
+ * result, so a dot painted with the call would miss the result that arrived with
+ * it; reading the row's state at draw time sees it. A settled dot never changes.
+ */
+function liveIndicator(theme: Theme, ctx: RenderContext, state: RowState): () => string {
+	let settled: string | undefined;
+	return () => {
+		if (settled !== undefined) return settled;
+		const status = callStatus(ctx, state);
+		const indicator = paintIndicator(theme, status,
+			runtime.syncIndicator(ctx.toolCallId, status === "running", () => ctx.invalidate()));
+		if (status === "success" || status === "error") settled = indicator;
+		return indicator;
+	};
 }
 
 function formatDuration(state: RowState): string | undefined {
@@ -170,22 +185,24 @@ function hasNestedArguments(args: ToolArgs): boolean {
 
 /** The call line: a status dot, the tool, and what it was asked, then any arguments the line leaves out. */
 function renderRowCall(name: string, args: ToolArgs, theme: Theme, ctx: RenderContext): Component {
-	const state = runtime.syncRow(ctx, ctx.state.endedAt === undefined);
+	const state = runtime.syncRow(ctx);
 	runtime.syncExpansion(state, ctx.expanded, name);
 	const kind = rowKind(name);
-	const container = new CachedContainer();
+	const indicator = liveIndicator(theme, ctx, state);
+	// Painted once now as well, so a row that starts running starts the animation clock.
+	indicator();
 	if (isClaude()) {
 		// Claude Code's call line: `⦁ Bash(npm test)`, `⦁ Update(src/app.ts)`.
-		const { label, argument } = claudeTitle(name, args);
-		const title = `${renderIndicator(theme, ctx, state)} ${theme.fg("toolTitle", theme.bold(label))}`
-			+ (argument ? theme.fg("toolOutput", `(${argument})`) : "");
-		// Collapsed, a long command keeps to one row; opened, it shows in full.
-		container.addChild(state.expanded ? renderToolCall(title, undefined, theme) : prefixedLines(title, " ", " ", true));
+		const { label, argument } = claudeTitle(name, args, state.expanded === true);
+		const title = ` ${theme.fg("toolTitle", theme.bold(label))}`
+			+ (argument ? styleMultiline(`(${argument})`, (line) => theme.fg("toolOutput", line)) : "");
+		// The title wraps rather than being cut to the row; only a very long command is shortened.
+		const container = new LiveCallContainer(indicator, (dot) => renderToolCall(dot + title, undefined, theme));
 		// The title already lists plain arguments; only nested ones need the full view.
 		if (kind === "custom" && state.expanded && hasNestedArguments(args)) container.addChild(renderArguments(args, theme));
 		return container;
 	}
-	const title = `${renderIndicator(theme, ctx, state)} ${theme.fg("toolTitle", theme.bold(name))}`;
+	const title = ` ${theme.fg("toolTitle", theme.bold(name))}`;
 	let details: string | undefined;
 	if (kind === "shell") {
 		const command = normalizeLineEndings(typeof args.command === "string" ? args.command : "");
@@ -196,7 +213,7 @@ function renderRowCall(name: string, args: ToolArgs, theme: Theme, ctx: RenderCo
 		const summary = kind === "file" ? getCallDetails(name, args) : summarizeCustomArguments(args);
 		details = summary ? styleMultiline(summary, (line) => theme.fg("toolOutput", line)) : undefined;
 	}
-	container.addChild(renderToolCall(title, details, theme));
+	const container = new LiveCallContainer(indicator, (dot) => renderToolCall(dot + title, details, theme));
 	const extra = kind === "file" ? getArgumentDetails(name, args) : kind === "custom" && state.expanded ? args : {};
 	if (Object.keys(extra).length > 0) container.addChild(renderArguments(extra, theme));
 	return container;
@@ -313,8 +330,8 @@ function renderClaudeResult(
 ): Component {
 	const chrome = chromePainter(theme);
 	const container = new CachedContainer();
-	// One line under the call; collapsed it keeps to one row.
-	const line = (text: string) => prefixedLines(text, chrome(" └ "), CLAUDE_INDENT, !expanded);
+	// One line under the call, wrapped rather than cut to the row.
+	const line = (text: string) => prefixedLines(text, chrome(" └ "), CLAUDE_INDENT, false);
 	if (options.isPartial) {
 		container.addChild(line(chrome("Running…")));
 		return container;
@@ -357,7 +374,7 @@ function renderRowResult(
 	ctx: RenderContext,
 	author?: AuthorResultRenderer,
 ): Component {
-	const state = runtime.syncRow(ctx, options.isPartial, !options.isPartial);
+	const state = runtime.syncRow(ctx, !options.isPartial);
 	runtime.syncExpansion(state, ctx.expanded, name);
 	if (canReuseResult(state, result, options, ctx)) return ctx.lastComponent;
 	const kind = rowKind(name);
@@ -474,6 +491,31 @@ function configure(pi: ExtensionAPI, cwd?: string, projectTrusted = false): void
 	registeredConfiguration = signature;
 }
 
+/** Note the calls an assistant message makes, as Pi reads them to make their rows. */
+function noteCalls(message: unknown): void {
+	// Only a run's own updates announce calls; the check is cheap enough for every update.
+	const content = (message as { role?: string; content?: unknown }).role === "assistant"
+		? (message as { content?: unknown }).content
+		: undefined;
+	if (!Array.isArray(content)) return;
+	for (const block of content) {
+		if (block?.type === "toolCall" && typeof block.id === "string") runtime.noteCall(block.id);
+	}
+}
+
+/** Hand the animation Pi's frame request, reached through an invisible widget as the extension API allows. */
+function bindRenderer(ctx: ExtensionContext): void {
+	ctx.ui.setWidget(RENDER_WIDGET_KEY, (tui) => {
+		runtime.bindRenderer(() => tui.requestRender());
+		return { render: () => [], invalidate() {} };
+	}, { placement: "belowEditor" });
+}
+
+function unbindRenderer(ctx: ExtensionContext | undefined): void {
+	runtime.bindRenderer(undefined);
+	ctx?.ui.setWidget(RENDER_WIDGET_KEY, undefined, { placement: "belowEditor" });
+}
+
 export default function compactTools(pi: ExtensionAPI): void {
 	// Pi caches this factory and re-invokes it with a fresh `pi` for every session
 	// replacement (/resume, /new, /fork) as well as /reload, each time starting from
@@ -491,13 +533,20 @@ export default function compactTools(pi: ExtensionAPI): void {
 	const customRowsAvailable = installToolRowPatch();
 	setRowResolver(resolveCustomRow);
 	let customRowsWarned = false;
+	let renderContext: ExtensionContext | undefined;
 	// Register once while the extension runtime is being built. In particular, this
 	// makes the overrides available before Pi restores the active tool set on /reload.
 	configure(pi, process.cwd());
 	pi.on("session_start", (event, ctx) => {
 		if (event.reason !== "reload") runtime.clearTimings();
+		// Rows restored from the session are drawn next; while idle none of them is running.
+		if (typeof ctx.isIdle === "function") runtime.setBusy(!ctx.isIdle());
 		configure(pi, ctx.cwd, ctx.isProjectTrusted());
+		unbindRenderer(renderContext);
+		renderContext = undefined;
 		if (ctx.mode === "tui" && runtime.config.style !== "off") {
+			renderContext = ctx;
+			bindRenderer(ctx);
 			// First, so its input listener sees relayout keys before the thinking controller consumes them.
 			viewport.bind(ctx);
 			progress.bind(ctx);
@@ -517,7 +566,15 @@ export default function compactTools(pi: ExtensionAPI): void {
 			groups.dispose();
 		}
 	});
-	pi.on("tool_execution_start", (event) => runtime.noteExecutionStart(event.toolCallId));
+	pi.on("agent_start", () => runtime.setBusy(true));
+	pi.on("agent_end", () => runtime.setBusy(false));
+	// The calls of the run going on, read from each update as Pi reads them to make
+	// their rows, and told to extensions before Pi makes them.
+	pi.on("message_update", (event) => noteCalls(event.message));
+	pi.on("tool_execution_start", (event) => {
+		runtime.noteCall(event.toolCallId);
+		runtime.noteExecutionStart(event.toolCallId);
+	});
 	pi.on("tool_execution_end", (event) => runtime.noteExecutionEnd(event.toolCallId));
 	pi.on("session_shutdown", (event) => {
 		thinkingCycle.dispose();
@@ -525,6 +582,8 @@ export default function compactTools(pi: ExtensionAPI): void {
 		silent.dispose();
 		groups.dispose();
 		viewport.dispose();
+		unbindRenderer(renderContext);
+		renderContext = undefined;
 		runtime.reset(event.reason !== "reload");
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-compact-tools",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "Compact, expandable tool rows for Pi in its own compact style or Claude Code's, with a silent mode and a GitHub Dark theme.",
   "type": "module",
   "license": "MIT",

package/release-notes.json

@@ -1,4 +1,14 @@
 {
+  "0.12.0": [
+    "Running rows animate without being rebuilt: one repaint per frame, however many tools run",
+    "A tool's time counts from when it runs, not from when the model began writing its call",
+    "Rows restored from a session show no made-up time, and a call left without a result waits instead of pulsing on",
+    "Claude style: groups draw about ten times faster in long sessions, and wait along with their calls",
+    "Silent mode's activity line follows a theme switch"
+  ],
+  "0.11.2": [
+    "Claude style no longer cuts commands to one row; long ones wrap, and only past two lines or 160 characters are shortened"
+  ],
   "0.11.1": [],
   "0.11.0": [
     "Claude style: set \"style\": \"claude\" to see tool calls the way Claude Code shows them",