pi-compact-tools 0.11.2 → 0.13.0

package/extensions/compact-tools-palette.ts

@@ -1,10 +1,18 @@
-import type { ExtensionAPI, Theme } from "@earendil-works/pi-coding-agent";
-import { indicatorGlyph, indicatorStrength, indicatorTone, type RowStatus } from "./compact-tools-core.ts";
+import type { ExtensionAPI, Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
+import {
+	indicatorGlyph,
+	indicatorStrength,
+	indicatorTone,
+	RUNNING_INDICATOR_FRAME_COUNT,
+	type RowStatus,
+} from "./compact-tools-core.ts";
 import {
 	colorizeRgb,
 	interpolateRgb,
 	liftContrast,
 	neutralizeRgb,
+	paletteOf,
+	rgbPainter,
 	themeColorRgb,
 	withContrast,
 	type Rgb,
@@ -24,9 +32,7 @@ import {
  * background the moves invert, and standing out means going darker.
  */
 
-type ThemeForeground = Parameters<Theme["getFgAnsi"]>[0];
-
-type ContrastBand = { color: ThemeForeground; keepHue: number; minimum: number; maximum: number };
+type ContrastBand = { color: ThemeColor; keepHue: number; minimum: number; maximum: number };
 
 /** A band with no color attached, for a derivation that supplies its own source. */
 type ContrastRange = { minimum: number; maximum: number };
@@ -63,32 +69,40 @@ const THINKING_LEVEL_COLOR = {
 	high: "thinkingHigh",
 	xhigh: "thinkingXhigh",
 	max: "thinkingMax",
-} as const satisfies Record<ThinkingLevel, ThemeForeground>;
+} as const satisfies Record<ThinkingLevel, ThemeColor>;
 
 /** The theme color a thinking level is painted with. */
-function thinkingLevelColor(level: ThinkingLevel): ThemeForeground {
+export function thinkingLevelColor(level: ThinkingLevel): ThemeColor {
 	return THINKING_LEVEL_COLOR[level] ?? "thinkingMedium";
 }
 
 /**
- * Derivation is deliberately not cached against the Theme: `/theme` can swap a palette behind
- * the same instance, and a stale entry would outlive the switch. Callers that redraw per line
- * hold the derived value themselves instead.
+ * Derived colors, kept for as long as the palette they came from. `/theme` swaps the
+ * palette behind the same Theme, so the palette rather than the Theme is the key: a
+ * switch misses the cache by itself, and every frame in between is a lookup.
  */
+const derivedByPalette = new WeakMap<object, Map<string, unknown>>();
+
+export function perPalette<T>(theme: Theme, key: string, derive: () => T): T {
+	const palette = paletteOf(theme);
+	let cache = derivedByPalette.get(palette);
+	if (!cache) derivedByPalette.set(palette, cache = new Map());
+	if (!cache.has(key)) cache.set(key, derive());
+	return cache.get(key) as T;
+}
+
 function bandedRgb(theme: Theme, band: ContrastBand): Rgb | undefined {
 	const rgb = themeColorRgb(theme, band.color);
 	if (!rgb) return undefined;
 	return withContrast(theme, neutralizeRgb(rgb, band.keepHue), band.minimum, band.maximum);
 }
 
-/**
- * A chrome painter bound to one theme. Deriving the tone costs a parse and a dozen floating
- * point operations, and the frame is drawn once per line of tool output or thinking detail,
- * so callers in a loop take a painter once and callers with a single rail use `paintChrome`.
- */
+/** A painter for the chrome tone, derived once per palette however many rails a frame draws. */
 export function chromePainter(theme: Theme): (text: string) => string {
-	const chrome = bandedRgb(theme, CHROME);
-	return chrome ? (text) => colorizeRgb(theme, chrome, text) : (text) => theme.fg("dim", text);
+	return perPalette(theme, "chrome", () => {
+		const chrome = bandedRgb(theme, CHROME);
+		return chrome ? rgbPainter(theme, chrome) : (text: string) => theme.fg("dim", text);
+	});
 }
 
 /** Paint one rail, connector, or status line in the chrome tone. */
@@ -104,18 +118,27 @@ function ramp(theme: Theme, low: ContrastBand, high: ContrastBand): ColorRamp |
 	return from && to ? { from, to } : undefined;
 }
 
-/** Fade endpoints for the running tool indicator, or undefined when the theme resolves no RGB. */
-export function indicatorPulse(theme: Theme): ColorRamp | undefined {
-	return ramp(theme, PULSE_LOW, PULSE_HIGH);
+/**
+ * A row's status dot; a running one pulses between the theme's endpoints as frames advance.
+ * Every running row repaints its dot on every frame, so the pulse is painted once per palette.
+ */
+export function paintIndicator(theme: Theme, status: RowStatus, frame: number): string {
+	if (status !== "running") return theme.fg(indicatorTone(status), indicatorGlyph(status));
+	const pulse = runningPulse(theme);
+	return pulse[((frame % pulse.length) + pulse.length) % pulse.length]!;
 }
 
-/** A row's status dot; a running one pulses between the theme's endpoints as frames advance. */
-export function paintIndicator(theme: Theme, status: RowStatus, frame: number): string {
-	const glyph = indicatorGlyph(status, frame);
-	const pulse = status === "running" ? indicatorPulse(theme) : undefined;
-	return pulse
-		? colorizeRgb(theme, interpolateRgb(pulse.from, pulse.to, indicatorStrength(status, frame)), glyph)
-		: theme.fg(indicatorTone(status, frame), glyph);
+/** Every step of the running dot's pulse, painted once per palette. */
+function runningPulse(theme: Theme): readonly string[] {
+	return perPalette(theme, "running-pulse", () => {
+		const pulse = ramp(theme, PULSE_LOW, PULSE_HIGH);
+		return Array.from({ length: RUNNING_INDICATOR_FRAME_COUNT }, (_, step) => {
+			const glyph = indicatorGlyph("running", step);
+			return pulse
+				? colorizeRgb(theme, interpolateRgb(pulse.from, pulse.to, indicatorStrength("running", step)), glyph)
+				: theme.fg(indicatorTone("running", step), glyph);
+		});
+	});
 }
 
 /** How far the brightest activity dot moves from the level's color toward the label's crest. */
@@ -129,17 +152,21 @@ const ACTIVITY_UNLIT = 0.05;
  * label's full crest washes every level toward the same near-white.
  */
 export function activityGlow(theme: Theme, level: ThinkingLevel): ColorRamp | undefined {
-	const glow = progressGlow(theme, level);
-	if (!glow) return undefined;
-	const lit = interpolateRgb(glow.from, glow.to, ACTIVITY_CREST_MIX);
-	return { from: withContrast(theme, lit, ACTIVITY_UNLIT, ACTIVITY_UNLIT), to: lit };
+	return perPalette(theme, `activity:${level}`, () => {
+		const glow = progressGlow(theme, level);
+		if (!glow) return undefined;
+		const lit = interpolateRgb(glow.from, glow.to, ACTIVITY_CREST_MIX);
+		return { from: withContrast(theme, lit, ACTIVITY_UNLIT, ACTIVITY_UNLIT), to: lit };
+	});
 }
 
 /** Sweep endpoints for the working label at a thinking level, resting color to crest. */
 export function progressGlow(theme: Theme, level: ThinkingLevel): ColorRamp | undefined {
-	const raw = themeColorRgb(theme, thinkingLevelColor(level));
-	if (!raw) return undefined;
-	const lifted = liftContrast(theme, raw, GLOW_REST_LIFT);
-	const from = withContrast(theme, lifted, GLOW_FLOOR.minimum, GLOW_FLOOR.maximum);
-	return { from, to: liftContrast(theme, from, GLOW_CREST_LIFT) };
+	return perPalette(theme, `progress:${level}`, () => {
+		const raw = themeColorRgb(theme, thinkingLevelColor(level));
+		if (!raw) return undefined;
+		const lifted = liftContrast(theme, raw, GLOW_REST_LIFT);
+		const from = withContrast(theme, lifted, GLOW_FLOOR.minimum, GLOW_FLOOR.maximum);
+		return { from, to: liftContrast(theme, from, GLOW_CREST_LIFT) };
+	});
 }

package/extensions/compact-tools-progress.ts

@@ -1,7 +1,7 @@
 import type { ExtensionAPI, ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
 import { stripTerminalSequences, truncateToWidth } from "@earendil-works/pi-tui";
 import { onTick } from "./compact-tools-clock.ts";
-import { colorizeRgb, interpolateRgb } from "./compact-tools-color.ts";
+import { colorizeRgb, interpolateRgb, paletteOf } from "./compact-tools-color.ts";
 import { progressGlow, type ColorRamp, type ThinkingLevel } from "./compact-tools-palette.ts";
 import type { ToolArgs } from "./compact-tools-types.ts";
 
@@ -88,6 +88,8 @@ export class ProgressController {
 	private readonly activeTools = new Map<string, string>();
 	private message: string | undefined;
 	private frames: string[] = [];
+	/** The palette `frames` were painted with. */
+	private paintedFor: object | undefined;
 	private frame = 0;
 	/** Stops this label's share of the animation clock. */
 	private stopTicking: (() => void) | undefined;
@@ -134,7 +136,7 @@ export class ProgressController {
 			if (!this.context || event.level === this.level) return;
 			this.level = event.level;
 			// Recolor in place: the label and its animation phase are unchanged.
-			this.frames = createGlowFrames(this.message ?? "", this.context.ui.theme, this.level);
+			this.frames = [];
 			this.renderMessage();
 		});
 	}
@@ -169,7 +171,7 @@ export class ProgressController {
 	private setMessage(message: string): void {
 		if (!this.context || (this.message === message && this.stopTicking)) return;
 		this.message = message;
-		this.frames = createGlowFrames(message, this.context.ui.theme, this.level);
+		this.frames = [];
 		this.frame = 0;
 		this.renderMessage();
 		if (this.stopTicking) return;
@@ -180,7 +182,15 @@ export class ProgressController {
 	}
 
 	private renderMessage(): void {
-		if (!this.message || !this.context || this.frames.length === 0) return;
+		if (!this.message || !this.context) return;
+		// Painted once per label, level, and palette: a theme switch, or the system theme
+		// following the terminal from dark to light, repaints on the next frame.
+		const theme = this.context.ui.theme;
+		const palette = paletteOf(theme);
+		if (this.frames.length === 0 || this.paintedFor !== palette) {
+			this.frames = createGlowFrames(this.message, theme, this.level);
+			this.paintedFor = palette;
+		}
 		this.context.ui.setWorkingMessage(this.frames[this.frame % this.frames.length]);
 	}
 

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,26 @@ 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>();
+	/**
+	 * Calls a tool is making through `ctx.executeTool()`, as codemode scripts do. They
+	 * never get a row of their own, so nothing is timed or remembered for them.
+	 */
+	private readonly nestedCalls = 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 +84,85 @@ 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.nestedCalls.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);
+	}
+
+	/** A call another tool made began (`running`) or finished; Pi says so with `parentToolCallId`. */
+	noteNestedCall(toolCallId: string, running: boolean): void {
+		if (running) this.nestedCalls.add(toolCallId);
+		else this.nestedCalls.delete(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 +181,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);
@@ -132,7 +218,7 @@ export class ToolRuntime {
 	createTimedExecute(definition: BuiltInDefinition): TimedExecute {
 		const execute = definition.execute as TimedExecute;
 		return async (...args: any[]) => {
-			const toolCallId = typeof args[0] === "string" ? args[0] : undefined;
+			const toolCallId = typeof args[0] === "string" && !this.nestedCalls.has(args[0]) ? args[0] : undefined;
 			const startedAt = (toolCallId ? this.executionTimings.get(toolCallId)?.startedAt : undefined) ?? Date.now();
 			if (toolCallId && !this.executionTimings.has(toolCallId)) {
 				this.executionTimings.set(toolCallId, { startedAt });
@@ -146,9 +232,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 +262,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 +282,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-silent.ts

@@ -1,5 +1,7 @@
 import {
 	AssistantMessageComponent,
+	BranchSummaryMessageComponent,
+	CompactionSummaryMessageComponent,
 	CustomMessageComponent,
 	DynamicBorder,
 	ToolExecutionComponent,
@@ -118,12 +120,25 @@ export function renderAnswerOnly(component: AssistantLike, width: number, render
 	}
 }
 
+/**
+ * A summary Pi writes into the chat of its own accord: the context it compacted
+ * away, or the /tree branch it left behind. Both are bookkeeping rather than a
+ * prompt or an answer, and compaction arrives mid-turn, where a visible row
+ * would come between the animating activity line and the editor below it.
+ * Read through `typeof` so an older Pi without the export keeps its own rows.
+ */
+function isSummary(child: unknown): boolean {
+	return (typeof CompactionSummaryMessageComponent === "function" && isKind(child, CompactionSummaryMessageComponent))
+		|| (typeof BranchSummaryMessageComponent === "function" && isKind(child, BranchSummaryMessageComponent));
+}
+
 /**
  * A row Pi (or this extension) adds to the chat directly rather than as a message:
- * status lines are Text, and "What's New" blocks add borders and Markdown too.
+ * status lines are Text, "What's New" blocks add borders and Markdown too, and
+ * compaction and branch summaries come as components of their own.
  */
 function isNotice(child: unknown): boolean {
-	return isKind(child, Text) || isKind(child, DynamicBorder) || isKind(child, Markdown);
+	return isKind(child, Text) || isKind(child, DynamicBorder) || isKind(child, Markdown) || isSummary(child);
 }
 
 /**

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, state.expanded === true);
-		const title = `${renderIndicator(theme, ctx, state)} ${theme.fg("toolTitle", theme.bold(label))}`
+		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.
-		container.addChild(renderToolCall(title, undefined, theme));
+		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;
@@ -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,14 +566,28 @@ export default function compactTools(pi: ExtensionAPI): void {
 			groups.dispose();
 		}
 	});
-	pi.on("tool_execution_start", (event) => runtime.noteExecutionStart(event.toolCallId));
-	pi.on("tool_execution_end", (event) => runtime.noteExecutionEnd(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) => {
+		if (event.parentToolCallId) return runtime.noteNestedCall(event.toolCallId, true);
+		runtime.noteCall(event.toolCallId);
+		runtime.noteExecutionStart(event.toolCallId);
+	});
+	pi.on("tool_execution_end", (event) => {
+		if (event.parentToolCallId) return runtime.noteNestedCall(event.toolCallId, false);
+		runtime.noteExecutionEnd(event.toolCallId);
+	});
 	pi.on("session_shutdown", (event) => {
 		thinkingCycle.dispose();
 		progress.dispose();
 		silent.dispose();
 		groups.dispose();
 		viewport.dispose();
+		unbindRenderer(renderContext);
+		renderContext = undefined;
 		runtime.reset(event.reason !== "reload");
 	});
 }