pi-compact-tools 0.11.2 → 0.13.0

package/extensions/compact-tools-activity.ts

@@ -1,9 +1,9 @@
 import { UserMessageComponent, type ExtensionAPI, type ExtensionContext, type Theme } from "@earendil-works/pi-coding-agent";
 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 { colorizeRgb, interpolateRgb } 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, perPalette, 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,21 +109,25 @@ 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>>();
+type PaintedBreath = readonly (readonly string[])[];
 
-function cachedGlow(theme: Theme, level: ThinkingLevel): ColorRamp | undefined {
-	let byLevel = glowCache.get(theme);
-	if (!byLevel) {
-		byLevel = new Map();
-		glowCache.set(theme, byLevel);
+/**
+ * Every dot of every frame of a breath at a level, painted once per palette. A breath
+ * has a fixed number of frames, so each frame the line draws after that is a lookup.
+ */
+function paintedBreath(theme: Theme, level: ThinkingLevel): PaintedBreath {
+	const byLevel = perPalette(theme, "activity-breath", () => new Map<ThinkingLevel, PaintedBreath>());
+	let breath = byLevel.get(level);
+	if (!breath) {
+		const glow = activityGlow(theme, level);
+		const paint = (intensity: number) => glow
+			? colorizeRgb(theme, interpolateRgb(glow.from, glow.to, intensity ** TONE_GAMMA), DOT)
+			// Reached only when the theme's colors did not resolve.
+			: theme.fg(intensity > 0.5 ? "text" : "dim", DOT);
+		breath = FRAMES.map((cells) => cells.map(paint));
+		byLevel.set(level, breath);
 	}
-	if (!byLevel.has(level)) byLevel.set(level, activityGlow(theme, level) ?? null);
-	return byLevel.get(level) ?? undefined;
-}
-
-function toneColor(glow: ColorRamp, intensity: number): Rgb {
-	return interpolateRgb(glow.from, glow.to, intensity ** TONE_GAMMA);
+	return breath;
 }
 
 /** A line the light runs along with a fading afterimage, in the thinking level's color, fitted to the width. */
@@ -137,12 +141,7 @@ export function renderActivityDots(
 	if (width <= 0) return [];
 	const indent = Math.max(0, Math.min(column, width - 1));
 	const fitting = Math.min(DOT_COUNT, width - indent);
-	const glow = cachedGlow(theme, level);
-	const dots = FRAMES[frameIndex(frame)]!.slice(0, fitting).map((intensity) => glow
-		? colorizeRgb(theme, toneColor(glow, intensity), DOT)
-		// Reached only when the theme's colors did not resolve.
-		: theme.fg(intensity > 0.5 ? "text" : "dim", DOT));
-	return [" ".repeat(indent) + dots.join("")];
+	return [" ".repeat(indent) + paintedBreath(theme, level)[frameIndex(frame)]!.slice(0, fitting).join("")];
 }
 
 /** Add the activity row directly beneath the prompt, keeping Pi's padding inside its box. */

package/extensions/compact-tools-color.ts

@@ -1,72 +1,148 @@
-import type { Theme } from "@earendil-works/pi-coding-agent";
+import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
+// A namespace import: Pi before 0.99 has no color functions, and a named import of one would fail to load.
+import * as tui from "@earendil-works/pi-tui";
 
+/** Plain channels, 0-255, so the math below stays arithmetic on three numbers. */
 export type Rgb = { r: number; g: number; b: number };
-type ThemeForeground = Parameters<Theme["getFgAnsi"]>[0];
 
-const ANSI_BASIC_RGB: readonly Rgb[] = [
+/**
+ * What Pi 0.99 added to its Theme for extensions. Older Pi has none of it, so each
+ * piece is read as optional and the few lines below stand in when it is missing.
+ */
+type HostTheme = Theme & {
+	colors?: Readonly<Record<string, tui.Color | undefined>>;
+	appearance?: "dark" | "light";
+};
+const colorToRgb = (tui as Partial<typeof tui>).colorToRgb;
+
+/**
+ * A theme token's concrete color. Pi 0.99 resolves every token, including one set
+ * to the terminal's own color and one it renders faint; older Pi only writes an
+ * escape sequence, which is read back. A token Pi does not know resolves to
+ * nothing rather than throwing, since callers compute names from host state.
+ */
+export function themeColorRgb(theme: Theme, color: ThemeColor): Rgb | undefined {
+	const { colors } = theme as HostTheme;
+	if (colors && colorToRgb) {
+		const concrete = colors[color];
+		if (!concrete) return undefined;
+		const { r, g, b } = colorToRgb(concrete);
+		// Rounded as Pi rounds a color it writes out, so derived shades start from what the terminal shows.
+		return { r: Math.round(r), g: Math.round(g), b: Math.round(b) };
+	}
+	return escapeColorRgb(theme, color);
+}
+
+/** Pi before 0.99: the color inside the token's escape sequence. */
+function escapeColorRgb(theme: Theme, color: ThemeColor): Rgb | undefined {
+	let ansi: string;
+	try {
+		ansi = theme.getFgAnsi(color);
+	} catch {
+		return undefined;
+	}
+	const trueColor = ansi.match(/\[38;2;(\d+);(\d+);(\d+)m/u);
+	if (trueColor) return { r: Number(trueColor[1]), g: Number(trueColor[2]), b: Number(trueColor[3]) };
+	const indexed = ansi.match(/\[38;5;(\d+)m/u);
+	return indexed ? indexedRgb(Number(indexed[1])) : undefined;
+}
+
+const BASIC_RGB: readonly Rgb[] = [
 	{ r: 0, g: 0, b: 0 }, { r: 128, g: 0, b: 0 }, { r: 0, g: 128, b: 0 }, { r: 128, g: 128, b: 0 },
 	{ r: 0, g: 0, b: 128 }, { r: 128, g: 0, b: 128 }, { r: 0, g: 128, b: 128 }, { r: 192, g: 192, b: 192 },
 	{ r: 128, g: 128, b: 128 }, { r: 255, g: 0, b: 0 }, { r: 0, g: 255, b: 0 }, { r: 255, g: 255, b: 0 },
 	{ r: 0, g: 0, b: 255 }, { r: 255, g: 0, b: 255 }, { r: 0, g: 255, b: 255 }, { r: 255, g: 255, b: 255 },
 ];
+/** The 256-color cube's channel values and its gray ramp, as xterm and Pi define them. */
+const CUBE = [0, 95, 135, 175, 215, 255];
+const GRAYS = Array.from({ length: 24 }, (_, index) => 8 + index * 10);
 
-function ansi256ToRgb(index: number): Rgb {
-	if (index < 16) return ANSI_BASIC_RGB[index] ?? { r: 192, g: 192, b: 192 };
+function indexedRgb(index: number): Rgb {
+	if (index < 16) return BASIC_RGB[index] ?? BASIC_RGB[7]!;
 	if (index < 232) {
-		const value = index - 16;
-		const channel = (part: number) => part === 0 ? 0 : 55 + part * 40;
-		return {
-			r: channel(Math.floor(value / 36)),
-			g: channel(Math.floor((value % 36) / 6)),
-			b: channel(value % 6),
-		};
+		const cube = index - 16;
+		return { r: CUBE[Math.floor(cube / 36)]!, g: CUBE[Math.floor((cube % 36) / 6)]!, b: CUBE[cube % 6]! };
 	}
-	const gray = 8 + Math.min(23, index - 232) * 10;
+	const gray = GRAYS[Math.min(23, index - 232)]!;
 	return { r: gray, g: gray, b: gray };
 }
 
-const ANSI_256_RGB: readonly Rgb[] = Array.from({ length: 256 }, (_, index) => ansi256ToRgb(index));
+function nearest(values: readonly number[], target: number): number {
+	let best = 0;
+	for (let index = 1; index < values.length; index++) {
+		if (Math.abs(target - values[index]!) < Math.abs(target - values[best]!)) best = index;
+	}
+	return best;
+}
 
 /**
- * The nearest-color search runs per character on 256-color terminals, so both the
- * palette and the answers are kept. Callers interpolate between a handful of theme
- * colors, so the memo holds tens of entries rather than growing with output size.
+ * The 256-color entry Pi 0.99 picks for a color: the nearest cube or gray step, never
+ * the first sixteen, which are whatever the terminal makes of them. Written here so
+ * every Pi this extension runs on draws a derived color the same way.
  */
-const ansi256ByRgb = new Map<number, number>();
-
-function rgbToAnsi256(rgb: Rgb): number {
-	const key = (rgb.r << 16) | (rgb.g << 8) | rgb.b;
-	const memoized = ansi256ByRgb.get(key);
-	if (memoized !== undefined) return memoized;
-	let bestIndex = 0;
-	let bestDistance = Number.POSITIVE_INFINITY;
-	for (let index = 0; index < 256; index++) {
-		const candidate = ANSI_256_RGB[index]!;
-		const distance = (rgb.r - candidate.r) ** 2 + (rgb.g - candidate.g) ** 2 + (rgb.b - candidate.b) ** 2;
-		if (distance >= bestDistance) continue;
-		bestIndex = index;
-		bestDistance = distance;
-	}
-	ansi256ByRgb.set(key, bestIndex);
-	return bestIndex;
+function ansi256(rgb: Rgb): number {
+	const [r, g, b] = [nearest(CUBE, rgb.r), nearest(CUBE, rgb.g), nearest(CUBE, rgb.b)];
+	const cube = { r: CUBE[r]!, g: CUBE[g]!, b: CUBE[b]! };
+	const grayIndex = nearest(GRAYS, Math.round(luminanceRgb(rgb)));
+	const gray = GRAYS[grayIndex]!;
+	const distance = (to: Rgb) => (rgb.r - to.r) ** 2 * 0.299 + (rgb.g - to.g) ** 2 * 0.587 + (rgb.b - to.b) ** 2 * 0.114;
+	const spread = Math.max(rgb.r, rgb.g, rgb.b) - Math.min(rgb.r, rgb.g, rgb.b);
+	return spread < 10 && distance({ r: gray, g: gray, b: gray }) < distance(cube) ? 232 + grayIndex : 16 + 36 * r + 6 * g + b;
 }
 
-export function themeColorRgb(theme: Theme, color: ThemeForeground): Rgb | undefined {
-	if (typeof theme.getFgAnsi !== "function") return undefined;
-	// Pi throws on a color it does not know, and callers reach this with names computed from
-	// host state — a thinking level Pi adds later would otherwise take down a render.
-	let ansi: string;
-	try {
-		ansi = theme.getFgAnsi(color);
-	} catch {
-		return undefined;
+/** The opening escape sequence for a color, foreground (38) or background (48), in the terminal's color mode. */
+function openColor(theme: Theme, color: Rgb, set: 38 | 48): string {
+	return theme.getColorMode?.() === "256color"
+		? `\x1b[${set};5;${ansi256(color)}m`
+		: `\x1b[${set};2;${Math.round(color.r)};${Math.round(color.g)};${Math.round(color.b)}m`;
+}
+
+export function colorizeRgb(theme: Theme, color: Rgb, text: string): string {
+	return `${openColor(theme, color, 38)}${text}\x1b[39m`;
+}
+
+export function fillRgb(theme: Theme, color: Rgb, text: string): string {
+	return `${openColor(theme, color, 48)}${text}\x1b[49m`;
+}
+
+/** A painter for one color, its escape sequence written once for every text it paints. */
+export function rgbPainter(theme: Theme, color: Rgb): (text: string) => string {
+	const open = openColor(theme, color, 38);
+	return (text) => `${open}${text}\x1b[39m`;
+}
+
+/**
+ * The palette a theme draws with right now, as an object to key derived colors by.
+ * Pi 0.99 hands out a new `theme.colors` whenever the theme or the terminal's colors
+ * change. Pi 0.85 to 0.87 give every theme its own map of escape sequences, reached
+ * through the same Theme object, which `/theme` points at another theme. A host with
+ * neither is told apart by the escape sequences of the colors derived from.
+ */
+export function paletteOf(theme: Theme): object {
+	const { colors, fgColors } = theme as HostTheme & { fgColors?: unknown };
+	if (colors) return colors;
+	if (fgColors instanceof Map) return fgColors;
+	let key = theme.getColorMode?.() ?? "";
+	for (const token of PALETTE_TOKENS) {
+		try {
+			key += theme.getFgAnsi(token);
+		} catch {
+			key += "?";
+		}
 	}
-	const trueColor = ansi.match(/\[38;2;(\d+);(\d+);(\d+)m/u);
-	if (trueColor) return { r: Number(trueColor[1]), g: Number(trueColor[2]), b: Number(trueColor[3]) };
-	const indexed = ansi.match(/\[38;5;(\d+)m/u);
-	return indexed ? ansi256ToRgb(Number(indexed[1])) : undefined;
+	let palette = escapePalettes.get(key);
+	if (!palette) escapePalettes.set(key, palette = {});
+	return palette;
 }
 
+/** Every token the derived colors are made from. */
+const PALETTE_TOKENS: readonly ThemeColor[] = [
+	"text", "dim", "muted", "toolDiffAdded", "toolDiffRemoved",
+	"thinkingOff", "thinkingMinimal", "thinkingLow", "thinkingMedium", "thinkingHigh", "thinkingXhigh",
+];
+/** One object per palette seen; a session switches among a handful of themes at most. */
+const escapePalettes = new Map<string, object>();
+
 export function interpolateRgb(from: Rgb, to: Rgb, amount: number): Rgb {
 	const bounded = Math.max(0, Math.min(1, amount));
 	const channel = (start: number, end: number) => Math.round(start + (end - start) * bounded);
@@ -77,34 +153,23 @@ export function interpolateRgb(from: Rgb, to: Rgb, amount: number): Rgb {
 	};
 }
 
-/** Shared by the foreground (38/39) and background (48/49) SGR pairs. */
-function paintRgb(theme: Theme, color: Rgb, text: string, set: 38 | 48): string {
-	const reset = set === 38 ? 39 : 49;
-	if (typeof theme.getColorMode === "function" && theme.getColorMode() === "256color") {
-		return `\x1b[${set};5;${rgbToAnsi256(color)}m${text}\x1b[${reset}m`;
-	}
-	return `\x1b[${set};2;${color.r};${color.g};${color.b}m${text}\x1b[${reset}m`;
-}
-
-export function colorizeRgb(theme: Theme, color: Rgb, text: string): string {
-	return paintRgb(theme, color, text, 38);
-}
-
 /** Perceived brightness on the same 0-255 scale as the channels, and linear under interpolation. */
 function luminanceRgb(rgb: Rgb): number {
 	return rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114;
 }
 
-function isDarkTheme(theme: Theme): boolean {
-	const text = themeColorRgb(theme, "text");
-	if (!text) return true;
-	return luminanceRgb(text) > 128;
-}
-
-/** Themes never expose their terminal background, so the poles stand in for it. */
+/** The poles stand in for the terminal background: standing out means moving away from the theme's own. */
 const BLACK: Rgb = { r: 0, g: 0, b: 0 };
 const WHITE: Rgb = { r: 255, g: 255, b: 255 };
 
+/** The theme's declared appearance; before Pi 0.99, a theme with light text is a dark one. */
+function isDark(theme: Theme): boolean {
+	const { appearance } = theme as HostTheme;
+	if (appearance) return appearance === "dark";
+	const text = themeColorRgb(theme, "text");
+	return !text || luminanceRgb(text) > 128;
+}
+
 /** Mix a color toward its own gray so a vivid theme hue cannot turn chrome into a highlight. */
 export function neutralizeRgb(rgb: Rgb, keepHue: number): Rgb {
 	const gray = Math.round(luminanceRgb(rgb));
@@ -128,40 +193,40 @@ function atBrightness(rgb: Rgb, target: number): Rgb {
 	return reached >= target - 0.5 ? rounded : interpolateRgb(rounded, WHITE, (target - reached) / (255 - reached));
 }
 
+/** How far a color stands off the background: 0 for invisible, 1 for the opposite pole. */
+function contrastLevel(dark: boolean, rgb: Rgb): number {
+	const brightness = luminanceRgb(rgb) / 255;
+	return dark ? brightness : 1 - brightness;
+}
+
+function atContrast(dark: boolean, rgb: Rgb, level: number): Rgb {
+	return atBrightness(rgb, (dark ? level : 1 - level) * 255);
+}
+
 /** Lift a color part of the way to maximum contrast, keeping its hue for as long as it can. */
 export function liftContrast(theme: Theme, rgb: Rgb, amount: number): Rgb {
-	const dark = isDarkTheme(theme);
-	const brightness = luminanceRgb(rgb) / 255;
-	const level = dark ? brightness : 1 - brightness;
-	const target = level + (1 - level) * amount;
-	return atBrightness(rgb, (dark ? target : 1 - target) * 255);
+	const dark = isDark(theme);
+	const level = contrastLevel(dark, rgb);
+	return atContrast(dark, rgb, level + (1 - level) * amount);
 }
 
 /**
- * Move a color until how far it stands off the theme background — 0 for invisible, 1 for
- * the opposite pole — lands inside the band. A color already inside is returned untouched,
- * so a theme's own choice survives wherever it is legible to begin with.
+ * Move a color until its contrast against the background lands inside the band. A color
+ * already inside is returned untouched, so a theme's own choice survives wherever it is
+ * legible to begin with.
  */
 export function withContrast(theme: Theme, rgb: Rgb, minimum: number, maximum: number): Rgb {
-	const dark = isDarkTheme(theme);
-	const brightness = luminanceRgb(rgb) / 255;
-	const level = dark ? brightness : 1 - brightness;
-	const target = level > maximum ? maximum : level < minimum ? minimum : level;
-	if (target === level) return rgb;
-	return atBrightness(rgb, (dark ? target : 1 - target) * 255);
+	const dark = isDark(theme);
+	const level = contrastLevel(dark, rgb);
+	const target = Math.min(maximum, Math.max(minimum, level));
+	return target === level ? rgb : atContrast(dark, rgb, target);
 }
 
 /**
  * Diff rows need a tint that reads on the terminal background without hijacking `toolSuccessBg`
  * and `toolErrorBg`, which Pi paints across the whole tool row.
  */
-export function diffTintRgb(theme: Theme, color: ThemeForeground, amount = 0.17): Rgb | undefined {
+export function diffTintRgb(theme: Theme, color: ThemeColor, amount = 0.17): Rgb | undefined {
 	const rgb = themeColorRgb(theme, color);
-	if (!rgb) return undefined;
-	const base = isDarkTheme(theme) ? BLACK : WHITE;
-	return interpolateRgb(base, rgb, amount);
-}
-
-export function fillRgb(theme: Theme, color: Rgb, text: string): string {
-	return paintRgb(theme, color, text, 48);
+	return rgb && interpolateRgb(isDark(theme) ? BLACK : WHITE, rgb, amount);
 }

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, "   ");