pi-subagents 0.24.2 → 0.24.4

package/src/tui/render.ts

@@ -15,8 +15,8 @@ import {
 	MAX_WIDGET_JOBS,
 	WIDGET_KEY,
 } from "../shared/types.ts";
-import { formatTokens, formatUsage, formatDuration, formatToolCall, shortenPath } from "../shared/formatters.ts";
-import { getDisplayItems, getLastActivity, getSingleResultOutput } from "../shared/utils.ts";
+import { formatTokens, formatUsage, formatDuration, formatModelThinking, formatToolCall, shortenPath } from "../shared/formatters.ts";
+import { getDisplayItems, getSingleResultOutput } from "../shared/utils.ts";
 import { flatToLogicalStepIndex } from "../runs/background/parallel-groups.ts";
 import { aggregateStepStatus, formatActivityLabel, formatAgentRunningLabel, formatParallelOutcome } from "../shared/status-format.ts";
 
@@ -84,64 +84,49 @@ function truncLine(text: string, maxWidth: number): string {
 	return result + activeStyles.join("") + "…";
 }
 
-const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-const WIDGET_ANIMATION_MS = 80;
+const RUNNING_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const STATIC_RUNNING_GLYPH = "●";
 
-let widgetTimer: ReturnType<typeof setInterval> | undefined;
-let latestWidgetCtx: ExtensionContext | undefined;
-let latestWidgetJobs: AsyncJobState[] = [];
+type ProgressSeedSource = Partial<Pick<AgentProgress, "index" | "toolCount" | "tokens" | "durationMs" | "lastActivityAt" | "currentToolStartedAt" | "turnCount">>;
 
-const resultAnimationTimers = new Map<ReturnType<typeof setInterval>, ResultAnimationContext["state"]>();
-const outputActivityCache = new Map<string, { checkedAt: number; text: string }>();
-const STALE_EXTENSION_CONTEXT_MESSAGE = "This extension ctx is stale after session replacement or reload";
-
-interface ResultAnimationContext {
-	state: { subagentResultAnimationTimer?: ReturnType<typeof setInterval> };
-	invalidate: () => void;
+function runningSeed(...values: Array<number | undefined>): number | undefined {
+	let seed: number | undefined;
+	for (const value of values) {
+		if (value === undefined || !Number.isFinite(value)) continue;
+		seed = (seed ?? 0) + Math.trunc(value);
+	}
+	return seed;
 }
 
-function spinnerFrame(): string {
-	return SPINNER[Math.floor(Date.now() / WIDGET_ANIMATION_MS) % SPINNER.length]!;
+function runningGlyph(seed?: number): string {
+	if (seed === undefined) return STATIC_RUNNING_GLYPH;
+	return RUNNING_FRAMES[Math.abs(seed) % RUNNING_FRAMES.length]!;
 }
 
-function isStaleExtensionContextError(error: unknown): boolean {
-	if (!(error instanceof Error)) return false;
-	return error.message.includes(STALE_EXTENSION_CONTEXT_MESSAGE);
+function progressRunningSeed(progress: ProgressSeedSource | undefined): number | undefined {
+	if (!progress) return undefined;
+	return runningSeed(
+		progress.index,
+		progress.toolCount,
+		progress.tokens,
+		progress.durationMs,
+		progress.lastActivityAt,
+		progress.currentToolStartedAt,
+		progress.turnCount,
+	);
 }
 
-function resultIsRunning(result: AgentToolResult<Details>): boolean {
-	return result.details?.progress?.some((entry) => entry.status === "running")
-		|| result.details?.results.some((entry) => entry.progress?.status === "running")
-		|| false;
+interface LegacyResultAnimationContext {
+	state: { subagentResultAnimationTimer?: ReturnType<typeof setInterval> };
 }
 
-function stopResultAnimation(context: ResultAnimationContext): void {
+export function clearLegacyResultAnimationTimer(context: LegacyResultAnimationContext): void {
 	const timer = context.state.subagentResultAnimationTimer;
 	if (!timer) return;
 	clearInterval(timer);
-	resultAnimationTimers.delete(timer);
 	context.state.subagentResultAnimationTimer = undefined;
 }
 
-export function syncResultAnimation(result: AgentToolResult<Details>, context: ResultAnimationContext): void {
-	if (!resultIsRunning(result)) {
-		stopResultAnimation(context);
-		return;
-	}
-	if (context.state.subagentResultAnimationTimer) return;
-	const timer = setInterval(() => {
-		try {
-			context.invalidate();
-		} catch (error) {
-			if (!isStaleExtensionContextError(error)) throw error;
-			stopResultAnimation(context);
-		}
-	}, WIDGET_ANIMATION_MS);
-	timer.unref?.();
-	context.state.subagentResultAnimationTimer = timer;
-	resultAnimationTimers.set(timer, context.state);
-}
-
 function extractOutputTarget(task: string): string | undefined {
 	const writeToMatch = task.match(/\[Write to:\s*([^\]\n]+)\]/i);
 	if (writeToMatch?.[1]?.trim()) return writeToMatch[1].trim();
@@ -170,7 +155,17 @@ function getToolCallLines(
 }
 
 
-function formatCurrentToolLine(progress: Pick<AgentProgress, "currentTool" | "currentToolArgs" | "currentToolStartedAt">, availableWidth: number, expanded: boolean): string | undefined {
+function snapshotNowForProgress(progress: Pick<AgentProgress, "currentToolStartedAt" | "durationMs" | "lastActivityAt">): number | undefined {
+	if (progress.currentToolStartedAt !== undefined && progress.durationMs !== undefined) return progress.currentToolStartedAt + progress.durationMs;
+	return progress.lastActivityAt;
+}
+
+function formatCurrentToolLine(
+	progress: Pick<AgentProgress, "currentTool" | "currentToolArgs" | "currentToolStartedAt">,
+	availableWidth: number,
+	expanded: boolean,
+	snapshotNow?: number,
+): string | undefined {
 	if (!progress.currentTool) return undefined;
 	const maxToolArgsLen = Math.max(50, availableWidth - 20);
 	const toolArgsPreview = progress.currentToolArgs
@@ -178,16 +173,20 @@ function formatCurrentToolLine(progress: Pick<AgentProgress, "currentTool" | "cu
 			? progress.currentToolArgs
 			: `${progress.currentToolArgs.slice(0, maxToolArgsLen)}...`)
 		: "";
-	const durationSuffix = progress.currentToolStartedAt !== undefined
-		? ` | ${formatDuration(Math.max(0, Date.now() - progress.currentToolStartedAt))}`
+	const durationSuffix = progress.currentToolStartedAt !== undefined && snapshotNow !== undefined
+		? ` | ${formatDuration(Math.max(0, snapshotNow - progress.currentToolStartedAt))}`
 		: "";
 	return toolArgsPreview
 		? `${progress.currentTool}: ${toolArgsPreview}${durationSuffix}`
 		: `${progress.currentTool}${durationSuffix}`;
 }
 
-function buildLiveStatusLine(progress: Pick<AgentProgress, "activityState" | "lastActivityAt">): string | undefined {
-	return formatActivityLabel(progress.lastActivityAt, progress.activityState);
+function buildLiveStatusLine(progress: Pick<AgentProgress, "activityState" | "lastActivityAt">, snapshotNow?: number): string | undefined {
+	if (progress.lastActivityAt !== undefined && snapshotNow !== undefined) return formatActivityLabel(progress.lastActivityAt, progress.activityState, snapshotNow);
+	if (progress.activityState === "needs_attention") return "needs attention";
+	if (progress.activityState === "active_long_running") return "active but long-running";
+	if (progress.lastActivityAt !== undefined) return "active";
+	return undefined;
 }
 
 function themeBold(theme: Theme, text: string): string {
@@ -227,8 +226,8 @@ function resultStatusLine(result: Details["results"][number], output: string): s
 	return "Done";
 }
 
-function resultGlyph(result: Details["results"][number], output: string, theme: Theme, running = result.progress?.status === "running"): string {
-	if (running) return theme.fg("accent", spinnerFrame());
+function resultGlyph(result: Details["results"][number], output: string, theme: Theme, running = result.progress?.status === "running", seed = progressRunningSeed(result.progress ?? result.progressSummary)): string {
+	if (running) return theme.fg("accent", runningGlyph(seed));
 	if (result.detached) return theme.fg("warning", "■");
 	if (result.interrupted) return theme.fg("warning", "■");
 	if (result.exitCode !== 0) return theme.fg("error", "✗");
@@ -237,11 +236,35 @@ function resultGlyph(result: Details["results"][number], output: string, theme:
 }
 
 function compactCurrentActivity(progress: AgentProgress): string {
-	return formatCurrentToolLine(progress, getTermWidth() - 4, false) ?? buildLiveStatusLine(progress) ?? "thinking…";
+	const snapshotNow = snapshotNowForProgress(progress);
+	return formatCurrentToolLine(progress, getTermWidth() - 4, false, snapshotNow) ?? buildLiveStatusLine(progress, snapshotNow) ?? "thinking…";
 }
 
-function hasAnimatedWidgetJobs(jobs: AsyncJobState[]): boolean {
-	return jobs.some((job) => job.status === "running");
+export function widgetRenderKey(job: AsyncJobState): string {
+	return JSON.stringify({
+		asyncDir: job.asyncDir,
+		status: job.status,
+		activityState: job.activityState,
+		lastActivityAt: job.lastActivityAt,
+		currentTool: job.currentTool,
+		currentToolStartedAt: job.currentToolStartedAt,
+		currentPath: job.currentPath,
+		turnCount: job.turnCount,
+		toolCount: job.toolCount,
+		mode: job.mode,
+		agents: job.agents,
+		currentStep: job.currentStep,
+		chainStepCount: job.chainStepCount,
+		parallelGroups: job.parallelGroups,
+		steps: job.steps,
+		stepsTotal: job.stepsTotal,
+		runningSteps: job.runningSteps,
+		completedSteps: job.completedSteps,
+		activeParallelGroup: job.activeParallelGroup,
+		startedAt: job.startedAt,
+		updatedAt: job.updatedAt,
+		totalTokens: job.totalTokens,
+	});
 }
 
 function formatWidgetAgents(agents: string[]): string {
@@ -259,25 +282,14 @@ function widgetJobName(job: AsyncJobState): string {
 	return job.mode ?? "subagent";
 }
 
-function getCachedLastActivity(outputFile: string | undefined): string {
-	if (!outputFile) return "";
-	const now = Date.now();
-	const cached = outputActivityCache.get(outputFile);
-	if (cached && now - cached.checkedAt < 1000) return cached.text;
-	const text = getLastActivity(outputFile);
-	outputActivityCache.set(outputFile, { checkedAt: now, text });
-	return text;
-}
-
 function widgetActivity(job: AsyncJobState): string {
 	const facts: string[] = [];
-	if (job.currentTool && job.currentToolStartedAt !== undefined) facts.push(`${job.currentTool} ${formatDuration(Math.max(0, Date.now() - job.currentToolStartedAt))}`);
+	if (job.currentTool && job.currentToolStartedAt !== undefined && job.updatedAt !== undefined) facts.push(`${job.currentTool} ${formatDuration(Math.max(0, job.updatedAt - job.currentToolStartedAt))}`);
 	else if (job.currentTool) facts.push(job.currentTool);
 	if (job.currentPath) facts.push(shortenPath(job.currentPath));
 	if (job.turnCount !== undefined) facts.push(`${job.turnCount} turns`);
 	if (job.toolCount !== undefined) facts.push(`${job.toolCount} tools`);
-	const activity = formatActivityLabel(job.lastActivityAt, job.activityState)
-		?? (job.status === "running" ? getCachedLastActivity(job.outputFile) : "");
+	const activity = buildLiveStatusLine(job, job.updatedAt);
 	if (activity && facts.length) return `${activity} · ${facts.join(" · ")}`;
 	if (activity) return activity;
 	if (facts.length) return facts.join(" · ");
@@ -288,16 +300,55 @@ function widgetActivity(job: AsyncJobState): string {
 	return "Done";
 }
 
+function widgetStepRunningSeed(step: NonNullable<AsyncJobState["steps"]>[number], fallbackIndex?: number): number | undefined {
+	return runningSeed(
+		fallbackIndex,
+		step.index,
+		step.toolCount,
+		step.turnCount,
+		step.tokens?.total,
+		step.lastActivityAt,
+		step.currentToolStartedAt,
+		step.durationMs,
+	);
+}
+
+function widgetStepsRunningSeed(steps: Array<NonNullable<AsyncJobState["steps"]>[number]> | undefined): number | undefined {
+	let seed: number | undefined;
+	for (const [index, step] of (steps ?? []).entries()) seed = runningSeed(seed, widgetStepRunningSeed(step, index));
+	return seed;
+}
+
+function widgetJobRunningSeed(job: AsyncJobState): number | undefined {
+	return runningSeed(
+		job.updatedAt,
+		job.lastActivityAt,
+		job.toolCount,
+		job.turnCount,
+		job.totalTokens?.total,
+		job.currentStep,
+		job.runningSteps,
+		job.completedSteps,
+		widgetStepsRunningSeed(job.steps),
+	);
+}
+
+function widgetJobsRunningSeed(jobs: AsyncJobState[]): number | undefined {
+	let seed: number | undefined;
+	for (const job of jobs) seed = runningSeed(seed, widgetJobRunningSeed(job));
+	return seed;
+}
+
 function widgetStatusGlyph(job: AsyncJobState, theme: Theme): string {
-	if (job.status === "running") return theme.fg("accent", spinnerFrame());
+	if (job.status === "running") return theme.fg("accent", runningGlyph(widgetJobRunningSeed(job)));
 	if (job.status === "queued") return theme.fg("muted", "◦");
 	if (job.status === "complete") return theme.fg("success", "✓");
 	if (job.status === "paused") return theme.fg("warning", "■");
 	return theme.fg("error", "✗");
 }
 
-function widgetStepGlyph(status: AsyncJobStep["status"], theme: Theme): string {
-	if (status === "running") return theme.fg("accent", spinnerFrame());
+function widgetStepGlyph(status: AsyncJobStep["status"], theme: Theme, seed?: number): string {
+	if (status === "running") return theme.fg("accent", runningGlyph(seed));
 	if (status === "complete" || status === "completed") return theme.fg("success", "✓");
 	if (status === "failed") return theme.fg("error", "✗");
 	if (status === "paused") return theme.fg("warning", "■");
@@ -312,15 +363,15 @@ function widgetStepStatus(status: AsyncJobStep["status"], theme: Theme): string
 	return theme.fg("dim", status);
 }
 
-function widgetStepActivity(step: NonNullable<AsyncJobState["steps"]>[number]): string {
+function widgetStepActivity(step: NonNullable<AsyncJobState["steps"]>[number], snapshotNow?: number): string {
 	const facts: string[] = [];
-	if (step.currentTool && step.currentToolStartedAt !== undefined) facts.push(`${step.currentTool} ${formatDuration(Math.max(0, Date.now() - step.currentToolStartedAt))}`);
+	if (step.currentTool && step.currentToolStartedAt !== undefined && snapshotNow !== undefined) facts.push(`${step.currentTool} ${formatDuration(Math.max(0, snapshotNow - step.currentToolStartedAt))}`);
 	else if (step.currentTool) facts.push(step.currentTool);
 	if (step.currentPath) facts.push(shortenPath(step.currentPath));
 	if (step.turnCount !== undefined) facts.push(`${step.turnCount} turns`);
 	if (step.toolCount !== undefined) facts.push(`${step.toolCount} tools`);
 	if (step.tokens?.total) facts.push(formatTokenStat(step.tokens.total));
-	const activity = formatActivityLabel(step.lastActivityAt, step.activityState);
+	const activity = buildLiveStatusLine(step, snapshotNow);
 	if (activity && facts.length) return `${activity} · ${facts.join(" · ")}`;
 	if (activity) return activity;
 	return facts.join(" · ");
@@ -335,7 +386,7 @@ function widgetChainDetails(job: AsyncJobState, theme: Theme, expanded = false,
 		const steps = job.steps.slice(span.start, span.start + span.count);
 		if (span.isParallel) {
 			const status = aggregateStepStatus(steps);
-			lines.push(`  ${widgetStepGlyph(status, theme)} Step ${span.stepIndex + 1}/${total}: ${themeBold(theme, "parallel group")} ${theme.fg("dim", "·")} ${theme.fg("dim", formatParallelOutcome(steps, span.count))}`);
+			lines.push(`  ${widgetStepGlyph(status, theme, widgetStepsRunningSeed(steps))} Step ${span.stepIndex + 1}/${total}: ${themeBold(theme, "parallel group")} ${theme.fg("dim", "·")} ${theme.fg("dim", formatParallelOutcome(steps, span.count))}`);
 			continue;
 		}
 		const step = steps[0];
@@ -355,9 +406,10 @@ function widgetParallelAgentDetails(job: AsyncJobState, theme: Theme): string[]
 	const total = job.stepsTotal ?? job.steps.length;
 	return job.steps.map((step, index) => {
 		const marker = index === job.steps!.length - 1 ? "└" : "├";
-		const activity = widgetStepActivity(step);
+		const activity = widgetStepActivity(step, job.updatedAt);
 		const itemTitle = job.mode === "parallel" || job.activeParallelGroup ? "Agent" : "Step";
-		return `  ${theme.fg("dim", `${marker} ${widgetStepGlyph(step.status, theme)} ${itemTitle} ${index + 1}/${total}: ${step.agent} · ${widgetStepStatus(step.status, theme)}${activity ? ` · ${activity}` : ""}`)}`;
+		const modelDisplay = modelThinkingBadge(theme, step.model, step.thinking);
+		return `  ${theme.fg("dim", `${marker} ${widgetStepGlyph(step.status, theme, widgetStepRunningSeed(step, index))} ${itemTitle} ${index + 1}/${total}: ${step.agent} · ${widgetStepStatus(step.status, theme)}${modelDisplay}${activity ? ` · ${activity}` : ""}`)}`;
 	});
 }
 
@@ -562,8 +614,7 @@ function widgetStats(job: AsyncJobState, theme: Theme): string {
 	}
 	if (job.toolCount !== undefined) parts.push(formatToolUseStat(job.toolCount));
 	if (job.totalTokens?.total) parts.push(formatTokenStat(job.totalTokens.total));
-	const endTime = job.status === "complete" || job.status === "failed" || job.status === "paused" ? (job.updatedAt ?? Date.now()) : Date.now();
-	if (job.startedAt) parts.push(formatDuration(Math.max(0, endTime - job.startedAt)));
+	if (job.startedAt !== undefined && job.updatedAt !== undefined) parts.push(formatDuration(Math.max(0, job.updatedAt - job.startedAt)));
 	return statJoin(theme, parts);
 }
 
@@ -576,10 +627,15 @@ function widgetStepStats(theme: Theme, step: NonNullable<AsyncJobState["steps"]>
 	]);
 }
 
-function widgetStepActivityLine(step: NonNullable<AsyncJobState["steps"]>[number], width: number, expanded: boolean): string {
-	const toolLine = formatCurrentToolLine(step, width, expanded);
+function modelThinkingBadge(theme: Theme, model?: string, thinking?: string): string {
+	const label = formatModelThinking(model, thinking);
+	return label ? theme.fg("dim", ` (${label})`) : "";
+}
+
+function widgetStepActivityLine(step: NonNullable<AsyncJobState["steps"]>[number], width: number, expanded: boolean, snapshotNow?: number): string {
+	const toolLine = formatCurrentToolLine(step, width, expanded, snapshotNow);
 	if (toolLine) return toolLine;
-	const activity = formatActivityLabel(step.lastActivityAt, step.activityState);
+	const activity = buildLiveStatusLine(step, snapshotNow);
 	if (activity) return activity;
 	if (step.status === "running") return "thinking…";
 	return "";
@@ -602,15 +658,16 @@ function foregroundStyleWidgetStepLines(
 ): string[] {
 	const status = widgetStepStatus(step.status, theme);
 	const stats = widgetStepStats(theme, step);
-	const lines = [`  ${widgetStepGlyph(step.status, theme)} ${itemTitle} ${index}/${total}: ${themeBold(theme, step.agent)} ${theme.fg("dim", "·")} ${status}${stats ? ` ${theme.fg("dim", "·")} ${stats}` : ""}`];
-	const activity = widgetStepActivityLine(step, width, expanded);
+	const modelDisplay = modelThinkingBadge(theme, step.model, step.thinking);
+	const lines = [`  ${widgetStepGlyph(step.status, theme, widgetStepRunningSeed(step, index - 1))} ${itemTitle} ${index}/${total}: ${themeBold(theme, step.agent)} ${theme.fg("dim", "·")} ${status}${modelDisplay}${stats ? ` ${theme.fg("dim", "·")} ${stats}` : ""}`];
+	const activity = widgetStepActivityLine(step, width, expanded, job.updatedAt);
 	if (activity) lines.push(`    ${theme.fg("dim", `⎿  ${activity}`)}`);
 	if (step.status === "running") {
 		if (!expanded) lines.push(`    ${theme.fg("accent", "Press Ctrl+O for live detail")}`);
 		const output = widgetOutputPath(job, step);
 		if (output) lines.push(`    ${theme.fg("dim", `output: ${shortenPath(output)}`)}`);
 		if (expanded) {
-			const liveStatus = buildLiveStatusLine(step);
+			const liveStatus = buildLiveStatusLine(step, job.updatedAt);
 			if (liveStatus && liveStatus !== activity) lines.push(`    ${theme.fg("accent", liveStatus)}`);
 			for (const tool of step.recentTools?.slice(-3) ?? []) {
 				const maxArgsLen = Math.max(40, width - 30);
@@ -658,10 +715,11 @@ function compactSingleWidgetLines(job: AsyncJobState, theme: Theme, width: numbe
 	const lines = fullLines.slice(0, 2);
 	for (const [index, step] of job.steps.entries()) {
 		const status = widgetStepStatus(step.status, theme);
-		const activity = widgetStepActivityLine(step, width, false);
+		const activity = widgetStepActivityLine(step, width, false, job.updatedAt);
 		const stepStats = widgetStepStats(theme, step);
 		const activitySuffix = activity ? ` ${theme.fg("dim", "·")} ${theme.fg("dim", activity)}` : "";
-		lines.push(`  ${widgetStepGlyph(step.status, theme)} ${itemTitle} ${index + 1}/${total}: ${themeBold(theme, step.agent)} ${theme.fg("dim", "·")} ${status}${activitySuffix}${stepStats ? ` ${theme.fg("dim", "·")} ${stepStats}` : ""}`);
+		const modelDisplay = modelThinkingBadge(theme, step.model, step.thinking);
+		lines.push(`  ${widgetStepGlyph(step.status, theme, widgetStepRunningSeed(step, index))} ${itemTitle} ${index + 1}/${total}: ${themeBold(theme, step.agent)} ${theme.fg("dim", "·")} ${status}${modelDisplay}${activitySuffix}${stepStats ? ` ${theme.fg("dim", "·")} ${stepStats}` : ""}`);
 	}
 	if (job.steps.some((step) => step.status === "running")) lines.push(theme.fg("accent", "  Press Ctrl+O for live detail"));
 	return lines.map((line) => truncLine(line, width));
@@ -704,7 +762,8 @@ export function buildWidgetLines(jobs: AsyncJobState[], theme: Theme, width = ge
 
 	const lines: string[] = [];
 	const hasActive = running.length > 0 || queued.length > 0;
-	lines.push(truncLine(`${theme.fg(hasActive ? "accent" : "dim", hasActive ? "●" : "○")} ${theme.fg(hasActive ? "accent" : "dim", "Async agents")} ${theme.fg("dim", "· background")}`, width));
+	const headerGlyph = running.length > 0 ? runningGlyph(widgetJobsRunningSeed(running)) : hasActive ? "●" : "○";
+	lines.push(truncLine(`${theme.fg(hasActive ? "accent" : "dim", headerGlyph)} ${theme.fg(hasActive ? "accent" : "dim", "Async agents")} ${theme.fg("dim", "· background")}`, width));
 
 	const items: string[][] = [];
 	let hiddenRunning = 0;
@@ -764,66 +823,16 @@ export function buildWidgetLines(jobs: AsyncJobState[], theme: Theme, width = ge
 	return lines;
 }
 
-function refreshAnimatedWidget(): void {
-	try {
-		if (!latestWidgetCtx?.hasUI || latestWidgetJobs.length === 0) return;
-		latestWidgetCtx.ui.setWidget(WIDGET_KEY, buildWidgetComponent(latestWidgetJobs, latestWidgetCtx.ui.getToolsExpanded?.() ?? false));
-		latestWidgetCtx.ui.requestRender?.();
-	} catch (error) {
-		if (!isStaleExtensionContextError(error)) throw error;
-		stopWidgetAnimation();
-	}
-}
-
-function ensureWidgetAnimation(): void {
-	if (widgetTimer) return;
-	widgetTimer = setInterval(() => {
-		if (!hasAnimatedWidgetJobs(latestWidgetJobs)) {
-			stopWidgetAnimation();
-			return;
-		}
-		refreshAnimatedWidget();
-	}, WIDGET_ANIMATION_MS);
-	widgetTimer.unref?.();
-}
-
-export function stopWidgetAnimation(): void {
-	if (widgetTimer) {
-		clearInterval(widgetTimer);
-		widgetTimer = undefined;
-	}
-	latestWidgetCtx = undefined;
-	latestWidgetJobs = [];
-	outputActivityCache.clear();
-}
-
-export function stopResultAnimations(): void {
-	for (const [timer, state] of resultAnimationTimers) {
-		clearInterval(timer);
-		state.subagentResultAnimationTimer = undefined;
-	}
-	resultAnimationTimers.clear();
-}
-
 /**
  * Render the async jobs widget
  */
 export function renderWidget(ctx: ExtensionContext, jobs: AsyncJobState[]): void {
 	if (jobs.length === 0) {
-		stopWidgetAnimation();
 		if (ctx.hasUI) ctx.ui.setWidget(WIDGET_KEY, undefined);
 		return;
 	}
-	if (!ctx.hasUI) {
-		stopWidgetAnimation();
-		return;
-	}
-	latestWidgetCtx = ctx;
-	latestWidgetJobs = [...jobs];
-
+	if (!ctx.hasUI) return;
 	ctx.ui.setWidget(WIDGET_KEY, buildWidgetComponent(jobs, ctx.ui.getToolsExpanded?.() ?? false));
-	if (hasAnimatedWidgetJobs(jobs)) ensureWidgetAnimation();
-	else stopWidgetAnimation();
 }
 
 function renderSingleCompact(d: Details, r: Details["results"][number], theme: Theme): Component {
@@ -837,12 +846,14 @@ function renderSingleCompact(d: Details, r: Details["results"][number], theme: T
 	]);
 	const c = new Container();
 	const width = getTermWidth() - 4;
-	c.addChild(new Text(truncLine(`${resultGlyph(r, output, theme, isRunning)} ${theme.fg("toolTitle", theme.bold(r.agent))}${contextBadge}${stats ? ` ${theme.fg("dim", "·")} ${stats}` : ""}`, width), 0, 0));
+	const modelDisplay = modelThinkingBadge(theme, r.model);
+	c.addChild(new Text(truncLine(`${resultGlyph(r, output, theme, isRunning)} ${theme.fg("toolTitle", theme.bold(r.agent))}${modelDisplay}${contextBadge}${stats ? ` ${theme.fg("dim", "·")} ${stats}` : ""}`, width), 0, 0));
 
 	if (isRunning && r.progress) {
+		const progressSnapshotNow = snapshotNowForProgress(r.progress);
 		const activity = compactCurrentActivity(r.progress);
 		c.addChild(new Text(truncLine(theme.fg("dim", `  ⎿  ${activity}`), width), 0, 0));
-		const liveStatus = buildLiveStatusLine(r.progress);
+		const liveStatus = buildLiveStatusLine(r.progress, progressSnapshotNow);
 		if (liveStatus && liveStatus !== activity) c.addChild(new Text(truncLine(theme.fg("dim", `     ${liveStatus}`), width), 0, 0));
 		c.addChild(new Text(truncLine(theme.fg("accent", "  Press Ctrl+O for live detail"), width), 0, 0));
 		if (r.artifactPaths) c.addChild(new Text(truncLine(theme.fg("dim", `  output: ${shortenPath(r.artifactPaths.outputPath)}`), width), 0, 0));
@@ -883,7 +894,7 @@ function renderMultiCompact(d: Details, theme: Theme): Component {
 	const itemTitle = multiLabel.itemTitle;
 	const stats = statJoin(theme, [multiLabel.headerLabel, formatProgressStats(theme, totalSummary)]);
 	const glyph = hasRunning
-		? theme.fg("accent", spinnerFrame())
+		? theme.fg("accent", runningGlyph(runningSeed(progressRunningSeed(totalSummary), d.currentStepIndex)))
 		: failed
 			? theme.fg("error", "✗")
 			: paused
@@ -913,7 +924,7 @@ function renderMultiCompact(d: Details, theme: Theme): Component {
 		const rPending = rProg && "status" in rProg && rProg.status === "pending";
 		const stepNumber = r.progress?.index !== undefined ? r.progress.index + 1 : progressFromArray?.index !== undefined ? progressFromArray.index + 1 : i + 1;
 		const stepStats = formatProgressStats(theme, rProg);
-		const glyph = rPending ? theme.fg("dim", "◦") : resultGlyph(r, output, theme, rRunning);
+		const glyph = rPending ? theme.fg("dim", "◦") : resultGlyph(r, output, theme, rRunning, progressRunningSeed(rProg));
 		const pendingLabel = rPending ? ` ${theme.fg("dim", "· pending")}` : "";
 		const stepLabel = resultRowLabel(d, multiLabel, i, stepNumber);
 		const line = `${glyph} ${stepLabel}: ${themeBold(theme, agentName)}${stepStats ? ` ${theme.fg("dim", "·")} ${stepStats}` : ""}${pendingLabel}`;
@@ -988,11 +999,12 @@ export function renderSubagentResult(
 		c.addChild(new Spacer(1));
 
 		if (isRunning && r.progress) {
-			const toolLine = formatCurrentToolLine(r.progress, w, expanded);
+			const progressSnapshotNow = snapshotNowForProgress(r.progress);
+			const toolLine = formatCurrentToolLine(r.progress, w, expanded, progressSnapshotNow);
 			if (toolLine) {
 				c.addChild(new Text(fit(theme.fg("warning", `> ${toolLine}`)), 0, 0));
 			}
-			const liveStatusLine = buildLiveStatusLine(r.progress);
+			const liveStatusLine = buildLiveStatusLine(r.progress, progressSnapshotNow);
 			if (liveStatusLine) {
 				c.addChild(new Text(fit(theme.fg("accent", liveStatusLine)), 0, 0));
 			}
@@ -1166,7 +1178,7 @@ export function renderSubagentResult(
 					? theme.fg("warning", "warning")
 					: theme.fg("success", "done");
 		const stats = rProg ? ` | ${rProg.toolCount} tools, ${formatDuration(rProg.durationMs)}` : "";
-		const modelDisplay = r.model ? theme.fg("dim", ` (${r.model})`) : "";
+		const modelDisplay = modelThinkingBadge(theme, r.model);
 		const stepLabel = resultRowLabel(d, multiLabel, i, stepNumber);
 		const stepHeader = rRunning
 			? `${statusIcon} ${stepLabel}: ${theme.bold(theme.fg("warning", r.agent))}${modelDisplay}${stats}`
@@ -1199,11 +1211,12 @@ export function renderSubagentResult(
 			if (rProg.skills?.length) {
 				c.addChild(new Text(fit(theme.fg("accent", `    skills: ${rProg.skills.join(", ")}`)), 0, 0));
 			}
-			const toolLine = formatCurrentToolLine(rProg, w, expanded);
+			const progressSnapshotNow = snapshotNowForProgress(rProg);
+			const toolLine = formatCurrentToolLine(rProg, w, expanded, progressSnapshotNow);
 			if (toolLine) {
 				c.addChild(new Text(fit(theme.fg("warning", `    > ${toolLine}`)), 0, 0));
 			}
-			const liveStatusLine = buildLiveStatusLine(rProg);
+			const liveStatusLine = buildLiveStatusLine(rProg, progressSnapshotNow);
 			if (liveStatusLine) {
 				c.addChild(new Text(fit(theme.fg("accent", `    ${liveStatusLine}`)), 0, 0));
 			}