@bastani/atomic 0.8.10 → 0.8.12-0

package/dist/builtin/subagents/src/tui/render.ts

@@ -30,11 +30,7 @@ import {
   formatToolCall,
   shortenPath,
 } from "../shared/formatters.ts";
-import {
-  getDisplayItems,
-  getLastActivity,
-  getSingleResultOutput,
-} from "../shared/utils.ts";
+import { getDisplayItems, getSingleResultOutput } from "../shared/utils.ts";
 import { flatToLogicalStepIndex } from "../runs/background/parallel-groups.ts";
 import {
   aggregateStepStatus,
@@ -45,6 +41,14 @@ import {
 
 type Theme = ExtensionContext["ui"]["theme"];
 
+type RenderRequestingContext = ExtensionContext & {
+  ui: ExtensionContext["ui"] & { requestRender?: () => void };
+};
+
+function requestRender(ctx: ExtensionContext): void {
+  (ctx as RenderRequestingContext).ui.requestRender?.();
+}
+
 function getTermWidth(): number {
   return process.stdout.columns || 120;
 }
@@ -107,9 +111,12 @@ 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 = "●";
+const RUNNING_ANIMATION_MS = 80;
+const STALE_EXTENSION_CONTEXT_MESSAGE = "This extension ctx is stale after session replacement or reload";
 
+let runningAnimationFrame = 0;
 let widgetTimer: ReturnType<typeof setInterval> | undefined;
 let latestWidgetCtx: ExtensionContext | undefined;
 let latestWidgetJobs: AsyncJobState[] = [];
@@ -118,40 +125,71 @@ 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";
+
+type ProgressSeedSource = Partial<
+  Pick<
+    AgentProgress,
+    | "index"
+    | "toolCount"
+    | "tokens"
+    | "durationMs"
+    | "lastActivityAt"
+    | "currentToolStartedAt"
+    | "turnCount"
+  >
+>;
+
+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 runningGlyph(seed?: number): string {
+  const animatedSeed = runningSeed(seed, runningAnimationFrame);
+  if (animatedSeed === undefined) return STATIC_RUNNING_GLYPH;
+  return RUNNING_FRAMES[Math.abs(animatedSeed) % RUNNING_FRAMES.length]!;
+}
+
+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,
+  );
+}
 
 interface ResultAnimationContext {
   state: { subagentResultAnimationTimer?: ReturnType<typeof setInterval> };
   invalidate: () => void;
 }
 
-function spinnerFrame(): string {
-  return SPINNER[
-    Math.floor(Date.now() / WIDGET_ANIMATION_MS) % SPINNER.length
-  ]!;
+interface LegacyResultAnimationContext {
+  state: { subagentResultAnimationTimer?: ReturnType<typeof setInterval> };
 }
 
 function isStaleExtensionContextError(error: unknown): boolean {
-  if (!(error instanceof Error)) return false;
-  return error.message.includes(STALE_EXTENSION_CONTEXT_MESSAGE);
+  return error instanceof Error && error.message.includes(STALE_EXTENSION_CONTEXT_MESSAGE);
 }
 
 function resultIsRunning(result: AgentToolResult<Details>): boolean {
-  return (
+  return Boolean(
     result.details?.progress?.some((entry) => entry.status === "running") ||
-    result.details?.results.some(
-      (entry) => entry.progress?.status === "running",
-    ) ||
-    false
+      result.details?.results.some((entry) => entry.progress?.status === "running"),
   );
 }
 
-function stopResultAnimation(context: ResultAnimationContext): void {
+function stopResultAnimation(context: LegacyResultAnimationContext): void {
   const timer = context.state.subagentResultAnimationTimer;
   if (!timer) return;
   clearInterval(timer);
@@ -159,6 +197,12 @@ function stopResultAnimation(context: ResultAnimationContext): void {
   context.state.subagentResultAnimationTimer = undefined;
 }
 
+export function clearLegacyResultAnimationTimer(
+  context: LegacyResultAnimationContext,
+): void {
+  stopResultAnimation(context);
+}
+
 export function syncResultAnimation(
   result: AgentToolResult<Details>,
   context: ResultAnimationContext,
@@ -169,18 +213,27 @@ export function syncResultAnimation(
   }
   if (context.state.subagentResultAnimationTimer) return;
   const timer = setInterval(() => {
+    runningAnimationFrame = (runningAnimationFrame + 1) % RUNNING_FRAMES.length;
     try {
       context.invalidate();
     } catch (error) {
       if (!isStaleExtensionContextError(error)) throw error;
       stopResultAnimation(context);
     }
-  }, WIDGET_ANIMATION_MS);
+  }, RUNNING_ANIMATION_MS);
   timer.unref?.();
   context.state.subagentResultAnimationTimer = timer;
   resultAnimationTimers.set(timer, context.state);
 }
 
+export function stopResultAnimations(): void {
+  for (const [timer, state] of resultAnimationTimers) {
+    clearInterval(timer);
+    state.subagentResultAnimationTimer = undefined;
+  }
+  resultAnimationTimers.clear();
+}
+
 function extractOutputTarget(task: string): string | undefined {
   const writeToMatch = task.match(/\[Write to:\s*([^\]\n]+)\]/i);
   if (writeToMatch?.[1]?.trim()) return writeToMatch[1].trim();
@@ -223,6 +276,20 @@ function getToolCallLines(
   );
 }
 
+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,
@@ -230,6 +297,7 @@ function formatCurrentToolLine(
   >,
   availableWidth: number,
   expanded: boolean,
+  snapshotNow?: number,
 ): string | undefined {
   if (!progress.currentTool) return undefined;
   const maxToolArgsLen = Math.max(50, availableWidth - 20);
@@ -239,8 +307,8 @@ function formatCurrentToolLine(
       : `${progress.currentToolArgs.slice(0, maxToolArgsLen)}...`
     : "";
   const durationSuffix =
-    progress.currentToolStartedAt !== undefined
-      ? ` | ${formatDuration(Math.max(0, Date.now() - progress.currentToolStartedAt))}`
+    progress.currentToolStartedAt !== undefined && snapshotNow !== undefined
+      ? ` | ${formatDuration(Math.max(0, snapshotNow - progress.currentToolStartedAt))}`
       : "";
   return toolArgsPreview
     ? `${progress.currentTool}: ${toolArgsPreview}${durationSuffix}`
@@ -249,8 +317,19 @@ function formatCurrentToolLine(
 
 function buildLiveStatusLine(
   progress: Pick<AgentProgress, "activityState" | "lastActivityAt">,
+  snapshotNow?: number,
 ): string | undefined {
-  return formatActivityLabel(progress.lastActivityAt, progress.activityState);
+  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 {
@@ -318,8 +397,9 @@ function resultGlyph(
   output: string,
   theme: Theme,
   running = result.progress?.status === "running",
+  seed = progressRunningSeed(result.progress ?? result.progressSummary),
 ): string {
-  if (running) return theme.fg("accent", spinnerFrame());
+  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", "✗");
@@ -329,15 +409,39 @@ function resultGlyph(
 }
 
 function compactCurrentActivity(progress: AgentProgress): string {
+  const snapshotNow = snapshotNowForProgress(progress);
   return (
-    formatCurrentToolLine(progress, getTermWidth() - 4, false) ??
-    buildLiveStatusLine(progress) ??
+    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 {
@@ -357,29 +461,21 @@ 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)
+  if (
+    job.currentTool &&
+    job.currentToolStartedAt !== undefined &&
+    job.updatedAt !== undefined
+  )
     facts.push(
-      `${job.currentTool} ${formatDuration(Math.max(0, Date.now() - job.currentToolStartedAt))}`,
+      `${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(" · ");
@@ -390,16 +486,66 @@ 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", "✗");
@@ -421,18 +567,23 @@ function widgetStepStatus(
 
 function widgetStepActivity(
   step: NonNullable<AsyncJobState["steps"]>[number],
+  snapshotNow?: number,
 ): string {
   const facts: string[] = [];
-  if (step.currentTool && step.currentToolStartedAt !== undefined)
+  if (
+    step.currentTool &&
+    step.currentToolStartedAt !== undefined &&
+    snapshotNow !== undefined
+  )
     facts.push(
-      `${step.currentTool} ${formatDuration(Math.max(0, Date.now() - step.currentToolStartedAt))}`,
+      `${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(" · ");
@@ -456,7 +607,7 @@ function widgetChainDetails(
     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))}`,
+        `  ${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;
     }
@@ -498,11 +649,11 @@ function widgetParallelAgentDetails(
   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";
     const modelDisplay = modelThinkingBadge(theme, step.model, step.thinking);
-    return `  ${theme.fg("dim", `${marker} ${widgetStepGlyph(step.status, theme)} ${itemTitle} ${index + 1}/${total}: ${step.agent} · ${widgetStepStatus(step.status, theme)}${modelDisplay}${activity ? ` · ${activity}` : ""}`)}`;
+    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}` : ""}`)}`;
   });
 }
 
@@ -843,14 +994,8 @@ 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);
 }
 
@@ -879,10 +1024,11 @@ function widgetStepActivityLine(
   step: NonNullable<AsyncJobState["steps"]>[number],
   width: number,
   expanded: boolean,
+  snapshotNow?: number,
 ): string {
-  const toolLine = formatCurrentToolLine(step, width, expanded);
+  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 "";
@@ -910,9 +1056,9 @@ function foregroundStyleWidgetStepLines(
   const stats = widgetStepStats(theme, step);
   const modelDisplay = modelThinkingBadge(theme, step.model, step.thinking);
   const lines = [
-    `  ${widgetStepGlyph(step.status, theme)} ${itemTitle} ${index}/${total}: ${themeBold(theme, step.agent)} ${theme.fg("dim", "·")} ${status}${modelDisplay}${stats ? ` ${theme.fg("dim", "·")} ${stats}` : ""}`,
+    `  ${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);
+  const activity = widgetStepActivityLine(step, width, expanded, job.updatedAt);
   if (activity) lines.push(`    ${theme.fg("dim", `⎿  ${activity}`)}`);
   if (step.status === "running") {
     if (!expanded)
@@ -921,7 +1067,7 @@ function foregroundStyleWidgetStepLines(
     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) ?? []) {
@@ -1016,14 +1162,14 @@ function compactSingleWidgetLines(
   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)}`
       : "";
     const modelDisplay = modelThinkingBadge(theme, step.model, step.thinking);
     lines.push(
-      `  ${widgetStepGlyph(step.status, theme)} ${itemTitle} ${index + 1}/${total}: ${themeBold(theme, step.agent)} ${theme.fg("dim", "·")} ${status}${modelDisplay}${activitySuffix}${stepStats ? ` ${theme.fg("dim", "·")} ${stepStats}` : ""}`,
+      `  ${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"))
@@ -1046,29 +1192,78 @@ function fitWidgetLineBudget(
   const hiddenCount = lines.length - visibleLines;
   const hint = expanded
     ? `… ${hiddenCount} live-detail lines hidden`
-    : `… ${hiddenCount} lines hidden · Ctrl+O expands`;
+    : `… ${hiddenCount} lines hidden · ctrl+o expands`;
   return [
     ...lines.slice(0, visibleLines),
     truncLine(theme.fg("dim", hint), width),
   ];
 }
 
-function buildWidgetComponent(
-  jobs: AsyncJobState[],
-  expanded: boolean,
-): (_tui: unknown, theme: Theme) => Component {
-  return (_tui, theme) => {
-    const width = getTermWidth();
+class LiveWidgetComponent implements Component {
+  constructor(
+    private readonly jobs: AsyncJobState[],
+    private readonly theme: Theme,
+    private readonly getExpanded: () => boolean,
+  ) {}
+
+  render(width: number): string[] {
+    const termWidth = Math.min(width, getTermWidth());
+    const expanded = this.getExpanded();
     const lines = expanded
-      ? buildWidgetLines(jobs, theme, width, true)
-      : jobs.length === 1
-        ? compactSingleWidgetLines(jobs[0]!, theme, width)
-        : buildWidgetLines(jobs, theme, width, false);
+      ? buildWidgetLines(this.jobs, this.theme, termWidth, true)
+      : this.jobs.length === 1
+        ? compactSingleWidgetLines(this.jobs[0]!, this.theme, termWidth)
+        : buildWidgetLines(this.jobs, this.theme, termWidth, false);
     const container = new Container();
-    for (const line of fitWidgetLineBudget(lines, theme, width, expanded))
+    for (const line of fitWidgetLineBudget(lines, this.theme, termWidth, expanded))
       container.addChild(new Text(line, 1, 0));
-    return container;
-  };
+    return container.render(termWidth);
+  }
+
+  invalidate(): void {}
+}
+
+function buildWidgetComponent(
+  jobs: AsyncJobState[],
+  getExpanded: () => boolean,
+): (_tui: unknown, theme: Theme) => Component {
+  return (_tui, theme) => new LiveWidgetComponent(jobs, theme, getExpanded);
+}
+
+function hasAnimatedWidgetJobs(jobs: AsyncJobState[]): boolean {
+  return jobs.some((job) => job.status === "running");
+}
+
+function refreshAnimatedWidget(): void {
+  if (!latestWidgetCtx?.hasUI) return;
+  runningAnimationFrame = (runningAnimationFrame + 1) % RUNNING_FRAMES.length;
+  try {
+    requestRender(latestWidgetCtx);
+  } catch (error) {
+    if (!isStaleExtensionContextError(error)) throw error;
+    stopWidgetAnimation();
+  }
+}
+
+function ensureWidgetAnimation(): void {
+  if (widgetTimer) return;
+  widgetTimer = setInterval(() => {
+    if (!hasAnimatedWidgetJobs(latestWidgetJobs)) {
+      stopWidgetAnimation();
+      return;
+    }
+    refreshAnimatedWidget();
+  }, RUNNING_ANIMATION_MS);
+  widgetTimer.unref?.();
+}
+
+export function stopWidgetAnimation(): void {
+  if (widgetTimer) {
+    clearInterval(widgetTimer);
+    widgetTimer = undefined;
+  }
+  latestWidgetCtx = undefined;
+  latestWidgetJobs = [];
 }
 
 export function buildWidgetLines(
@@ -1088,9 +1283,15 @@ export function buildWidgetLines(
 
   const lines: string[] = [];
   const hasActive = running.length > 0 || queued.length > 0;
+  const headerGlyph =
+    running.length > 0
+      ? runningGlyph(widgetJobsRunningSeed(running))
+      : hasActive
+        ? "●"
+        : "○";
   lines.push(
     truncLine(
-      `${theme.fg(hasActive ? "accent" : "dim", hasActive ? "●" : "○")} ${theme.fg(hasActive ? "accent" : "dim", "Async agents")} ${theme.fg("dim", "· background")}`,
+      `${theme.fg(hasActive ? "accent" : "dim", headerGlyph)} ${theme.fg(hasActive ? "accent" : "dim", "Async agents")} ${theme.fg("dim", "· background")}`,
       width,
     ),
   );
@@ -1164,53 +1365,6 @@ export function buildWidgetLines(
   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
  */
@@ -1229,10 +1383,9 @@ export function renderWidget(
   }
   latestWidgetCtx = ctx;
   latestWidgetJobs = [...jobs];
-
   ctx.ui.setWidget(
     WIDGET_KEY,
-    buildWidgetComponent(jobs, ctx.ui.getToolsExpanded?.() ?? false),
+    buildWidgetComponent(jobs, () => ctx.ui.getToolsExpanded?.() ?? false),
   );
   if (hasAnimatedWidgetJobs(jobs)) ensureWidgetAnimation();
   else stopWidgetAnimation();
@@ -1267,11 +1420,12 @@ function renderSingleCompact(
   );
 
   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),
@@ -1393,7 +1547,12 @@ function renderMultiCompact(d: Details, theme: Theme): Component {
     formatProgressStats(theme, totalSummary),
   ]);
   const glyph = hasRunning
-    ? theme.fg("accent", spinnerFrame())
+    ? theme.fg(
+        "accent",
+        runningGlyph(
+          runningSeed(progressRunningSeed(totalSummary), d.currentStepIndex),
+        ),
+      )
     : failed
       ? theme.fg("error", "✗")
       : paused
@@ -1453,9 +1612,10 @@ function renderMultiCompact(d: Details, theme: Theme): Component {
     const progressFromArray =
       d.progress?.find((p) => p.index === i) ||
       d.progress?.find((p) => p.agent === r.agent && p.status === "running");
-    const rProg = r.progress || progressFromArray || r.progressSummary;
-    const rRunning = rProg && "status" in rProg && rProg.status === "running";
-    const rPending = rProg && "status" in rProg && rProg.status === "pending";
+    const liveProgress = r.progress || progressFromArray;
+    const rProg = liveProgress || r.progressSummary;
+    const rRunning = liveProgress?.status === "running";
+    const rPending = liveProgress?.status === "pending";
     const stepNumber =
       r.progress?.index !== undefined
         ? r.progress.index + 1
@@ -1465,13 +1625,13 @@ function renderMultiCompact(d: Details, theme: Theme): Component {
     const stepStats = formatProgressStats(theme, rProg);
     const glyph = rPending
       ? theme.fg("dim", "◦")
-      : resultGlyph(r, output, theme, rRunning);
+      : 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}`;
     c.addChild(new Text(truncLine(`  ${line}`, width), 0, 0));
-    if (rRunning && rProg && "status" in rProg) {
-      const activity = compactCurrentActivity(rProg);
+    if (rRunning && liveProgress) {
+      const activity = compactCurrentActivity(liveProgress);
       c.addChild(
         new Text(truncLine(theme.fg("dim", `    ⎿  ${activity}`), width), 0, 0),
       );
@@ -1613,11 +1773,20 @@ 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));
       }
@@ -1865,10 +2034,11 @@ export function renderSubagentResult(
     const progressFromArray =
       d.progress?.find((p) => p.index === i) ||
       d.progress?.find((p) => p.agent === r.agent && p.status === "running");
-    const rProg = r.progress || progressFromArray || r.progressSummary;
-    const rRunning = rProg?.status === "running";
+    const liveProgress = r.progress || progressFromArray;
+    const rProg = liveProgress || r.progressSummary;
+    const rRunning = liveProgress?.status === "running";
     const stepNumber =
-      typeof rProg?.index === "number" ? rProg.index + 1 : i + 1;
+      typeof liveProgress?.index === "number" ? liveProgress.index + 1 : i + 1;
 
     const resultOutput = getSingleResultOutput(r);
     const statusIcon = rRunning
@@ -1935,23 +2105,37 @@ export function renderSubagentResult(
       );
     }
 
-    if (rRunning && rProg) {
-      if (rProg.skills?.length) {
+    if (rRunning && liveProgress) {
+      if (liveProgress.skills?.length) {
         c.addChild(
           new Text(
-            fit(theme.fg("accent", `    skills: ${rProg.skills.join(", ")}`)),
+            fit(
+              theme.fg(
+                "accent",
+                `    skills: ${liveProgress.skills.join(", ")}`,
+              ),
+            ),
             0,
             0,
           ),
         );
       }
-      const toolLine = formatCurrentToolLine(rProg, w, expanded);
+      const progressSnapshotNow = snapshotNowForProgress(liveProgress);
+      const toolLine = formatCurrentToolLine(
+        liveProgress,
+        w,
+        expanded,
+        progressSnapshotNow,
+      );
       if (toolLine) {
         c.addChild(
           new Text(fit(theme.fg("warning", `    > ${toolLine}`)), 0, 0),
         );
       }
-      const liveStatusLine = buildLiveStatusLine(rProg);
+      const liveStatusLine = buildLiveStatusLine(
+        liveProgress,
+        progressSnapshotNow,
+      );
       if (liveStatusLine) {
         c.addChild(
           new Text(fit(theme.fg("accent", `    ${liveStatusLine}`)), 0, 0),
@@ -1978,8 +2162,8 @@ export function renderSubagentResult(
           ),
         );
       }
-      if (rProg.recentTools?.length) {
-        for (const t of rProg.recentTools.slice(-3)) {
+      if (liveProgress.recentTools?.length) {
+        for (const t of liveProgress.recentTools.slice(-3)) {
           const maxArgsLen = Math.max(40, w - 30);
           const argsPreview =
             expanded || t.args.length <= maxArgsLen
@@ -1994,7 +2178,7 @@ export function renderSubagentResult(
           );
         }
       }
-      const recentLines = (rProg.recentOutput ?? []).slice(-5);
+      const recentLines = (liveProgress.recentOutput ?? []).slice(-5);
       for (const line of recentLines) {
         c.addChild(new Text(fit(theme.fg("dim", `      ${line}`)), 0, 0));
       }