@esso0428/pi-subagents 0.15.15 → 0.15.16

package/CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.15.16] - 2026-09-13
+
+### Added
+- **Live panel rendering now coalesces refreshes and avoids rebuilding unchanged rows**, keeping FleetView, the conversation timeline, and tool hover interactions responsive during frequent agent updates.
+
+### Fixed
+- Same-name tool results remain paired with their originating tool calls when a conversation is refreshed.
+
 ## [0.15.15] - 2026-09-13
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esso0428/pi-subagents",
-  "version": "0.15.15",
+  "version": "0.15.16",
   "description": "A pi extension that brings smart Claude Code-style autonomous sub-agents to pi, with npm:pi-subagents-style JSON agent overrides.",
   "author": "ESSO0428",
   "repository": {

package/src/ui/agent-widget.ts

@@ -240,6 +240,8 @@ export class AgentWidget {
   private tui: any | undefined;
   /** Last status bar text, used to avoid redundant setStatus calls. */
   private lastStatusText: string | undefined;
+  /** Snapshot of the state used for the last widget registration/render request. */
+  private lastRenderKey: string | undefined;
 
   constructor(
     private manager: AgentManager,
@@ -281,6 +283,7 @@ export class AgentWidget {
       this.widgetRegistered = false;
       this.tui = undefined;
       this.lastStatusText = undefined;
+      this.lastRenderKey = undefined;
     }
   }
 
@@ -297,10 +300,20 @@ export class AgentWidget {
     this.update();
   }
 
-  /** Ensure the widget update timer is running. */
+  /** Keep the spinner/elapsed-time timer alive only while a visible agent runs. */
   ensureTimer() {
+    if (!this.uiCtx || !this.widgetAgents().some(a => a.status === "running")) return;
     if (!this.widgetInterval) {
-      this.widgetInterval = setInterval(() => this.update(), 80);
+      this.widgetInterval = setInterval(() => this.update(true), 80);
+    }
+  }
+
+  private syncTimer(shouldRun: boolean): void {
+    if (shouldRun) {
+      this.ensureTimer();
+    } else if (this.widgetInterval) {
+      clearInterval(this.widgetInterval);
+      this.widgetInterval = undefined;
     }
   }
 
@@ -505,8 +518,43 @@ export class AgentWidget {
     return lines;
   }
 
-  /** Force an immediate widget update. */
-  update() {
+  /** Build a render-relevant snapshot without capturing mutable records. */
+  private renderKey(allAgents: ReturnType<AgentManager["listAgents"]>): string {
+    const activities = allAgents.map(a => {
+      const activity = this.agentActivity.get(a.id);
+      return activity ? {
+        id: a.id,
+        activeTools: [...activity.activeTools.entries()],
+        toolUses: activity.toolUses,
+        responseText: activity.responseText,
+        turnCount: activity.turnCount,
+        maxTurns: activity.maxTurns,
+        lifetimeUsage: activity.lifetimeUsage,
+        contextPercent: getSessionContextPercent(activity.session),
+      } : undefined;
+    });
+    return JSON.stringify({
+      frame: this.widgetFrame,
+      agents: allAgents.map(a => ({
+        id: a.id,
+        type: a.type,
+        description: a.description,
+        status: a.status,
+        toolUses: a.toolUses,
+        startedAt: a.startedAt,
+        completedAt: a.completedAt,
+        error: a.error,
+        lifetimeUsage: a.lifetimeUsage,
+        compactionCount: a.compactionCount,
+        isBackground: a.isBackground,
+      })),
+      activities,
+      finishedTurnAge: [...this.finishedTurnAge.entries()],
+    });
+  }
+
+  /** Force an immediate widget update. `advanceSpinner` is reserved for the timer. */
+  update(advanceSpinner = false) {
     if (!this.uiCtx) return;
     const allAgents = this.widgetAgents();
 
@@ -532,7 +580,8 @@ export class AgentWidget {
         this.uiCtx.setStatus("subagents", undefined);
         this.lastStatusText = undefined;
       }
-      if (this.widgetInterval) { clearInterval(this.widgetInterval); this.widgetInterval = undefined; }
+      this.lastRenderKey = undefined;
+      this.syncTimer(false);
       // Clean up stale entries
       for (const [id] of this.finishedTurnAge) {
         if (!allAgents.some(a => a.id === id)) this.finishedTurnAge.delete(id);
@@ -554,7 +603,12 @@ export class AgentWidget {
       this.lastStatusText = newStatusText;
     }
 
-    this.widgetFrame++;
+    // Spinner animation is driven only by the timer while a visible running
+    // agent exists. Event-driven updates refresh changed stats without making
+    // an otherwise idle widget advance.
+    if (advanceSpinner && runningCount > 0) this.widgetFrame++;
+    this.syncTimer(runningCount > 0);
+    const renderKey = this.renderKey(allAgents);
 
     // Register widget callback once; subsequent updates use requestRender()
     // which re-invokes render() without replacing the component (avoids layout thrashing).
@@ -567,14 +621,17 @@ export class AgentWidget {
             // Theme changed — force re-registration so factory captures fresh theme.
             this.widgetRegistered = false;
             this.tui = undefined;
+            this.lastRenderKey = undefined;
           },
         };
       }, { placement: "aboveEditor" });
       this.widgetRegistered = true;
-    } else {
-      // Widget already registered — just request a re-render of existing components.
+    } else if (renderKey !== this.lastRenderKey) {
+      // Widget already registered — request a re-render only when visible state
+      // changed (or the spinner timer advanced).
       this.tui?.requestRender();
     }
+    this.lastRenderKey = renderKey;
   }
 
   dispose() {
@@ -589,5 +646,8 @@ export class AgentWidget {
     this.widgetRegistered = false;
     this.tui = undefined;
     this.lastStatusText = undefined;
+    this.lastRenderKey = undefined;
+    this.uiCtx = undefined;
+    this.finishedTurnAge.clear();
   }
 }

package/src/ui/conversation-blocks.ts

@@ -300,23 +300,25 @@ export function formatConversationMessages(
   const blocks: ConversationBlock[] = [];
   const usedBlockIds = new Set<string>();
   const callsById = new Map<string, ConversationBlock>();
-  const callsByName = new Map<string, ConversationBlock[]>();
+  const callsByName = new Map<string, { blocks: ConversationBlock[]; next: number }>();
 
   const registerCall = (name: string, block: ConversationBlock) => {
     callsById.set(block.toolCallId!, block);
     const nameKey = name.toLowerCase();
-    const candidates = callsByName.get(nameKey) ?? [];
-    candidates.push(block);
-    callsByName.set(nameKey, candidates);
+    const queue = callsByName.get(nameKey) ?? { blocks: [], next: 0 };
+    queue.blocks.push(block);
+    callsByName.set(nameKey, queue);
   };
   const unregisterCall = (block: ConversationBlock) => {
+    // Calls remain in their name queue as tombstones. Advancing its cursor is
+    // amortized O(1), unlike removing from the middle of a same-name array.
     if (block.toolCallId) callsById.delete(block.toolCallId);
-    const nameKey = (block.toolName ?? "tool").toLowerCase();
-    const candidates = callsByName.get(nameKey);
-    if (!candidates) return;
-    const index = candidates.indexOf(block);
-    if (index >= 0) candidates.splice(index, 1);
-    if (candidates.length === 0) callsByName.delete(nameKey);
+  };
+  const nextCallByName = (name: string): ConversationBlock | undefined => {
+    const queue = callsByName.get(name.toLowerCase());
+    if (!queue) return undefined;
+    while (queue.next < queue.blocks.length && queue.blocks[queue.next]?.toolStatus !== "pending") queue.next++;
+    return queue.blocks[queue.next];
   };
 
   for (let messageIndex = 0; messageIndex < messages.length; messageIndex++) {
@@ -368,7 +370,7 @@ export function formatConversationMessages(
       const direct = result.toolCallId ? callsById.get(result.toolCallId) : undefined;
       let match = direct;
       if (!match && result.toolName) {
-        match = callsByName.get(result.toolName.toLowerCase())?.[0];
+        match = nextCallByName(result.toolName);
       }
       if (match) {
         applyToolResult(match, result, maxToolResultChars);

package/src/ui/conversation-timeline.ts

@@ -59,10 +59,21 @@ export interface ConversationTimelineMouseResult {
   focusedBlockIndex?: number;
 }
 
+export interface ConversationTimelineLineRange {
+  startLine: number;
+  height: number;
+}
+
+export interface ConversationTimelineChange {
+  kind: "content" | "interaction";
+  /** Lines patched in-place for an interaction-only change such as hover. */
+  changedRanges?: readonly ConversationTimelineLineRange[];
+}
+
 export interface ConversationTimelineOptions {
   cwd?: string;
   record?: AgentRecord;
-  onChange?: () => void;
+  onChange?: (change: ConversationTimelineChange) => void;
 }
 
 function safeWidth(width: number): number {
@@ -157,6 +168,7 @@ export class ConversationTimeline implements Component {
   private expandedTools = new Set<string>();
   private hoveredToolCallId: string | undefined;
   private hoveredIoView: any;
+  private hoveredIoToolCallId: string | undefined;
   private hoveredIoSection: "input" | "output" | null = null;
   private lastClickedToolCallId: string | undefined;
   private lastClickedPoint: { x: number; y: number } | undefined;
@@ -182,6 +194,12 @@ export class ConversationTimeline implements Component {
     const ids = new Set(this.blocks.filter((block) => block.kind === "tool" && block.toolCallId).map((block) => block.toolCallId!));
     if (this.focusedToolCallId && !ids.has(this.focusedToolCallId)) this.focusedToolCallId = undefined;
     if (this.hoveredToolCallId && !ids.has(this.hoveredToolCallId)) this.hoveredToolCallId = undefined;
+    if (this.hoveredIoToolCallId && !ids.has(this.hoveredIoToolCallId)) {
+      this.hoveredIoView?.setHoveredSection?.(null);
+      this.hoveredIoView = undefined;
+      this.hoveredIoToolCallId = undefined;
+      this.hoveredIoSection = null;
+    }
     for (const id of this.expandedTools) if (!ids.has(id)) this.expandedTools.delete(id);
     for (const id of this.toolComponents.keys()) if (!ids.has(id)) this.toolComponents.delete(id);
     this.invalidate();
@@ -193,6 +211,10 @@ export class ConversationTimeline implements Component {
     if (!show) {
       this.focusedToolCallId = undefined;
       this.hoveredToolCallId = undefined;
+      this.hoveredIoView?.setHoveredSection?.(null);
+      this.hoveredIoView = undefined;
+      this.hoveredIoToolCallId = undefined;
+      this.hoveredIoSection = null;
     }
     this.invalidate();
   }
@@ -202,8 +224,10 @@ export class ConversationTimeline implements Component {
   }
 
   setFocusedToolCallId(id: string | undefined): void {
+    // Focus changes are view state. The rendered rows do not change, so keep
+    // the snapshot and its Markdown/tool output cache intact.
+    if (this.focusedToolCallId === id) return;
     this.focusedToolCallId = id;
-    this.invalidate();
   }
 
   getFocusedToolCallId(): string | undefined {
@@ -223,8 +247,7 @@ export class ConversationTimeline implements Component {
       ? direction > 0 ? 0 : ids.length - 1
       : (current + direction + ids.length) % ids.length;
     this.focusedToolCallId = ids[next];
-    this.invalidate();
-    this.options.onChange?.();
+    this.options.onChange?.({ kind: "interaction" });
     return true;
   }
 
@@ -234,7 +257,7 @@ export class ConversationTimeline implements Component {
     if (this.expandedTools.has(id)) this.expandedTools.delete(id);
     else this.expandedTools.add(id);
     this.invalidate();
-    this.options.onChange?.();
+    this.options.onChange?.({ kind: "content" });
     return true;
   }
 
@@ -244,21 +267,24 @@ export class ConversationTimeline implements Component {
 
   render(width: number): string[] {
     const requestedWidth = safeWidth(width);
+    if (this.lastWidth === requestedWidth) return this.snapshot.lines.map((line) => line.text);
+
     const lines: TimelineRenderLine[] = [];
     const messageStarts: number[] = [];
     const messageBlocks: ConversationBlock[] = [];
     const interactiveToolIds: string[] = [];
     const blockSpans: TimelineBlockSpan[] = [];
     const toolSpans: TimelineToolSpan[] = [];
-    const visibleBlocks = this.blocks.filter((block) => this.showTools || block.kind !== "tool");
 
-    if (visibleBlocks.length === 0) {
+    if (this.blocks.length === 0 || (!this.showTools && this.blocks.every((block) => block.kind === "tool"))) {
       const text = this.blocks.length === 0 ? "(waiting for first message...)" : "(tools hidden)";
       lines.push({ text: this.theme.fg("dim", text), plain: text, blockIndex: -1 });
     }
 
-    for (const block of visibleBlocks) {
-      const blockIndex = this.blocks.indexOf(block);
+    for (let sourceBlockIndex = 0; sourceBlockIndex < this.blocks.length; sourceBlockIndex++) {
+      const block = this.blocks[sourceBlockIndex]!;
+      if (!this.showTools && block.kind === "tool") continue;
+      const blockIndex = sourceBlockIndex;
       if (lines.length > 0) {
         const separator = this.theme.fg("border", "   " + "─ ".repeat(Math.max(1, Math.floor((requestedWidth - 6) / 2))).trimEnd());
         lines.push({ text: truncateToWidth(separator, requestedWidth), plain: stripAnsi(separator), blockIndex });
@@ -277,51 +303,11 @@ export class ConversationTimeline implements Component {
       if (block.kind === "tool") {
         const id = block.toolCallId;
         if (id) interactiveToolIds.push(id);
-        let component: (Component & { handleMouse?: (event: TuiMouseEvent) => unknown }) | undefined;
-        if (id) {
-          const existing = this.toolComponents.get(id);
-          if (existing) {
-            applyToolComponentState(existing, block, this.expandedTools.has(id));
-            component = existing;
-          } else {
-            component = createToolComponent(
-              block,
-              this.tui,
-              this.options.cwd ?? process.cwd(),
-              this.expandedTools.has(id),
-              () => this.hoveredToolCallId === id,
-            ) as (Component & { handleMouse?: (event: TuiMouseEvent) => unknown }) | undefined;
-            if (component) this.toolComponents.set(id, component);
-          }
-        }
-        let rendered: string[];
-        try {
-          rendered = component?.render(requestedWidth) ?? fallbackToolLines(
-            block,
-            requestedWidth,
-            id ? this.expandedTools.has(id) : false,
-            id ? this.hoveredToolCallId === id : false,
-            this.theme,
-          );
-        } catch {
-          rendered = fallbackToolLines(
-            block,
-            requestedWidth,
-            id ? this.expandedTools.has(id) : false,
-            id ? this.hoveredToolCallId === id : false,
-            this.theme,
-          );
-        }
+        const { rendered, hintLine } = this.renderToolLines(block, requestedWidth);
         for (const line of rendered) {
           lines.push({ text: truncateToWidth(line, requestedWidth), plain: stripAnsi(line), blockIndex, railable: true });
         }
         if (id) {
-          const hintLine = !this.expandedTools.has(id)
-            ? rendered.findIndex((line) => {
-                const plain = stripAnsi(line);
-                return plain.includes(showMoreHintText()) || plain.includes("Enter to expand");
-              })
-            : -1;
           const blockHeight = lines.length - blockStartLine;
           blockSpans.push({ blockIndex: snapshotBlockIndex, startLine: blockStartLine, height: blockHeight });
           toolSpans.push({
@@ -363,6 +349,79 @@ export class ConversationTimeline implements Component {
     return lines.map((line) => line.text);
   }
 
+  private renderToolLines(block: ConversationBlock, width: number): { rendered: string[]; hintLine: number } {
+    const id = block.toolCallId;
+    let component: (Component & { handleMouse?: (event: TuiMouseEvent) => unknown }) | undefined;
+    if (id) {
+      const existing = this.toolComponents.get(id);
+      if (existing) {
+        applyToolComponentState(existing, block, this.expandedTools.has(id));
+        component = existing;
+      } else {
+        component = createToolComponent(
+          block,
+          this.tui,
+          this.options.cwd ?? process.cwd(),
+          this.expandedTools.has(id),
+          () => this.hoveredToolCallId === id,
+        ) as (Component & { handleMouse?: (event: TuiMouseEvent) => unknown }) | undefined;
+        if (component) this.toolComponents.set(id, component);
+      }
+    }
+
+    let rendered: string[];
+    try {
+      rendered = component?.render(width) ?? fallbackToolLines(
+        block,
+        width,
+        id ? this.expandedTools.has(id) : false,
+        id ? this.hoveredToolCallId === id : false,
+        this.theme,
+      );
+    } catch {
+      rendered = fallbackToolLines(
+        block,
+        width,
+        id ? this.expandedTools.has(id) : false,
+        id ? this.hoveredToolCallId === id : false,
+        this.theme,
+      );
+    }
+    const hintLine = id && !this.expandedTools.has(id)
+      ? rendered.findIndex((line) => {
+          const plain = stripAnsi(line);
+          return plain.includes(showMoreHintText()) || plain.includes("Enter to expand");
+        })
+      : -1;
+    return { rendered, hintLine };
+  }
+
+  /**
+   * Hover only changes styling in a tool card. Re-render those rows in place
+   * and leave the Markdown rows and their spans untouched.
+   */
+  private refreshToolSpan(span: TimelineToolSpan): boolean {
+    const block = this.snapshot.messageBlocks[span.blockIndex];
+    if (!block || block.kind !== "tool") return false;
+    const { rendered, hintLine } = this.renderToolLines(block, this.lastWidth);
+    if (rendered.length + (block.role === "user" || block.role === "assistant" ? 1 : 0) !== span.height) return false;
+
+    const headerOffset = block.role === "user" || block.role === "assistant" ? 1 : 0;
+    const sourceBlockIndex = this.snapshot.lines[span.startLine]?.blockIndex ?? -1;
+    for (let index = 0; index < rendered.length; index++) {
+      const line = rendered[index];
+      this.snapshot.lines[span.startLine + headerOffset + index] = {
+        text: truncateToWidth(line, this.lastWidth),
+        plain: stripAnsi(line),
+        blockIndex: sourceBlockIndex,
+        railable: true,
+      };
+    }
+    span.clickStartLine = hintLine >= 0 ? span.startLine + headerOffset + hintLine : undefined;
+    span.clickHeight = hintLine >= 0 ? 1 : undefined;
+    return true;
+  }
+
   handleMouse(event: TuiMouseEvent): ConversationTimelineMouseResult | undefined {
     if (event.type === "move") {
       const hovered = this.snapshot.toolSpans.find((span) =>
@@ -392,12 +451,35 @@ export class ConversationTimeline implements Component {
       if (this.hoveredIoView && this.hoveredIoView !== nextIoView && typeof this.hoveredIoView.setHoveredSection === "function") {
         this.hoveredIoView.setHoveredSection(null);
       }
+      const previousHoveredToolCallId = this.hoveredToolCallId;
+      const previousIoToolCallId = this.hoveredIoToolCallId;
+      const nextIoToolCallId = nextIoView ? fullSpan?.toolCallId : undefined;
       this.hoveredToolCallId = hovered;
       this.hoveredIoView = nextIoView;
+      this.hoveredIoToolCallId = nextIoToolCallId;
       this.hoveredIoSection = nextIoSection;
       if (nextIoView) nextIoView.setHoveredSection(nextIoSection);
-      this.invalidate();
-      this.options.onChange?.();
+
+      const changedIds = new Set(
+        [previousHoveredToolCallId, hovered, previousIoToolCallId, nextIoToolCallId]
+          .filter((id): id is string => id !== undefined),
+      );
+      const changedRanges: ConversationTimelineLineRange[] = [];
+      let patched = true;
+      for (const id of changedIds) {
+        const span = this.snapshot.toolSpans.find((candidate) => candidate.toolCallId === id);
+        if (!span || !this.refreshToolSpan(span)) {
+          patched = false;
+          break;
+        }
+        changedRanges.push({ startLine: span.startLine, height: span.height });
+      }
+      if (!patched) {
+        this.invalidate();
+        this.options.onChange?.({ kind: "content" });
+      } else {
+        this.options.onChange?.({ kind: "interaction", changedRanges });
+      }
       return { handled: true, render: true };
     }
 
@@ -448,8 +530,12 @@ export class ConversationTimeline implements Component {
           // A missing/older Pi mouse implementation must not break the viewer.
         }
       }
-      this.invalidate();
-      this.options.onChange?.();
+      if (shouldExpand || shouldCollapse) {
+        this.invalidate();
+        this.options.onChange?.({ kind: "content" });
+      } else {
+        this.options.onChange?.({ kind: "interaction" });
+      }
       return { handled: true, render: shouldExpand || shouldCollapse, focusedBlockIndex: span.blockIndex };
     }
 
@@ -458,8 +544,7 @@ export class ConversationTimeline implements Component {
     this.focusedToolCallId = undefined;
     this.lastClickedToolCallId = undefined;
     this.lastClickedPoint = undefined;
-    this.invalidate();
-    this.options.onChange?.();
+    this.options.onChange?.({ kind: "interaction" });
     return { handled: true, render: true, focusedBlockIndex: target.blockIndex };
   }
 

package/src/ui/conversation-viewer.ts

@@ -13,7 +13,7 @@ import { getLifetimeTotal, getSessionContextPercent } from "../usage.js";
 import type { Theme } from "./agent-widget.js";
 import { type AgentActivity, buildInvocationTags, describeActivity, fgPreservingNestedStyles, formatDuration, formatSessionTokens, getDisplayName, getPromptModeLabel } from "./agent-widget.js";
 import { formatConversationMessages, type ConversationBlock } from "./conversation-blocks.js";
-import { ConversationTimeline, type TimelineRenderLine } from "./conversation-timeline.js";
+import { ConversationTimeline, type ConversationTimelineChange, type TimelineRenderLine } from "./conversation-timeline.js";
 import { renderConversationRoleHeader } from "./conversation-role.js";
 import { editLiveAssistantBlockInNvim, viewConversationBlockInNvim } from "./conversation-nvim.js";
 import { findConversationMatches, highlightConversationLine, nearestConversationMatchAfter, nearestConversationMatchBefore, stripAnsi, type ConversationMatch } from "./conversation-search.js";
@@ -156,6 +156,8 @@ export class ConversationViewer implements Component {
   private cachedMessageBlocks: ConversationBlock[] = [];
   private cacheVersion = 0;
   private cachedVersion = -1;
+  private sessionRefreshQueued = false;
+  private selectedBlockId: string | undefined;
   private scrollOffset = 0;
   private autoScroll = true;
   private unsubscribe: (() => void) | undefined;
@@ -192,21 +194,10 @@ export class ConversationViewer implements Component {
     this.timeline = new ConversationTimeline(tui, theme, {
       cwd: operations?.ctx.cwd,
       record,
-      onChange: () => {
-        this.cacheVersion++;
-        this.invalidate();
-        this.tui.requestRender();
-      },
+      onChange: (change) => this.handleTimelineChange(change),
     });
     this.timeline.setBlocks(this.blocks);
-    this.unsubscribe = session.subscribe(() => {
-      if (this.closed) return;
-      this.blocks = formatConversationMessages(this.session.messages);
-      this.timeline.setBlocks(this.blocks);
-      this.cacheVersion++;
-      this.invalidate();
-      this.tui.requestRender();
-    });
+    this.unsubscribe = session.subscribe(() => this.scheduleSessionRefresh());
   }
 
   handleInput(data: string): void {
@@ -365,7 +356,6 @@ export class ConversationViewer implements Component {
         this.setFocusFromMessageIndex(selected);
         this.autoScroll = false;
         this.scrollTargetIntoView(selected);
-        this.invalidate();
         this.tui.requestRender();
       }
     }
@@ -504,6 +494,39 @@ export class ConversationViewer implements Component {
     this.cachedVersion = -1;
   }
 
+  private scheduleSessionRefresh(): void {
+    if (this.closed || this.sessionRefreshQueued) return;
+    this.sessionRefreshQueued = true;
+    queueMicrotask(() => {
+      this.sessionRefreshQueued = false;
+      if (this.closed) return;
+      if (this.hasFocusedBlock) this.selectedBlockId = this.currentBlock()?.id;
+      this.blocks = formatConversationMessages(this.session.messages);
+      this.timeline.setBlocks(this.blocks);
+      this.cacheVersion++;
+      this.invalidate();
+      this.tui.requestRender();
+    });
+  }
+
+  private handleTimelineChange(change: ConversationTimelineChange): void {
+    if (change.kind === "content") {
+      this.cacheVersion++;
+      this.invalidate();
+    } else if (change.changedRanges && this.cachedWidth > 0 && this.cachedVersion === this.cacheVersion) {
+      const snapshotLines = this.timeline.getSnapshot().lines;
+      for (const range of change.changedRanges) {
+        const start = Math.max(0, range.startLine);
+        const end = Math.min(this.cachedLines.length, start + Math.max(0, range.height));
+        for (let index = start; index < end; index++) {
+          const line = snapshotLines[index];
+          if (line) this.cachedLines[index] = { ...line };
+        }
+      }
+    }
+    this.tui.requestRender();
+  }
+
   dispose(): void {
     this.closed = true;
     this.unsubscribe?.();
@@ -549,6 +572,19 @@ export class ConversationViewer implements Component {
     const lines: RenderLine[] = timelineSnapshot.lines.map((line) => ({ ...line }));
     this.cachedMessageStarts = [...timelineSnapshot.messageStarts];
     this.cachedMessageBlocks = [...timelineSnapshot.messageBlocks];
+    if (this.hasFocusedBlock) {
+      const selectedIndex = this.selectedBlockId
+        ? this.cachedMessageBlocks.findIndex((block) => block.id === this.selectedBlockId)
+        : -1;
+      const focusedToolIndex = this.timeline.getFocusedToolCallId()
+        ? this.cachedMessageBlocks.findIndex((block) => block.toolCallId === this.timeline.getFocusedToolCallId())
+        : -1;
+      const restoredIndex = selectedIndex >= 0 ? selectedIndex : focusedToolIndex;
+      if (restoredIndex >= 0) {
+        this.selectedMessageIdx = restoredIndex;
+        this.selectedBlockId = this.cachedMessageBlocks[restoredIndex]?.id;
+      }
+    }
     if (this.record.status === "running" && this.activity) {
       const act = describeActivity(this.activity.activeTools, this.activity.responseText);
       const text = `▍ ${act}`;
@@ -571,6 +607,7 @@ export class ConversationViewer implements Component {
     this.selectedMessageIdx = index;
     this.hasFocusedBlock = true;
     const block = this.cachedMessageBlocks[index];
+    this.selectedBlockId = block.id;
     this.timeline.setFocusedToolCallId(block.kind === "tool" ? block.toolCallId : undefined);
     return true;
   }
@@ -617,7 +654,6 @@ export class ConversationViewer implements Component {
     this.setFocusFromMessageIndex(target);
     this.scrollOffset = Math.min(this.cachedMessageStarts[target], Math.max(0, this.cachedLines.length - this.viewportHeight()));
     this.autoScroll = false;
-    this.invalidate();
     this.tui.requestRender();
   }
 
@@ -631,7 +667,6 @@ export class ConversationViewer implements Component {
       this.autoScroll = false;
       this.scrollTargetIntoView(index);
     }
-    this.invalidate();
     this.tui.requestRender();
   }
 
@@ -653,7 +688,6 @@ export class ConversationViewer implements Component {
     this.setFocusFromMessageIndex(resolvedTarget);
     this.autoScroll = false;
     this.scrollTargetIntoView(resolvedTarget);
-    this.invalidate();
     this.tui.requestRender();
   }
 
@@ -701,7 +735,6 @@ export class ConversationViewer implements Component {
     const selected = this.messageIndexForOffset(this.scrollOffset);
     this.setFocusFromMessageIndex(selected);
     this.autoScroll = this.scrollOffset >= max;
-    this.invalidate();
     this.tui.requestRender();
   }
 
@@ -709,7 +742,6 @@ export class ConversationViewer implements Component {
     this.scrollOffset = 0;
     this.setFocusFromMessageIndex(0);
     this.autoScroll = false;
-    this.invalidate();
     this.tui.requestRender();
   }
 
@@ -717,7 +749,6 @@ export class ConversationViewer implements Component {
     this.scrollOffset = Math.max(0, this.cachedLines.length - this.viewportHeight());
     this.setFocusFromMessageIndex(Math.max(0, this.cachedMessageStarts.length - 1));
     this.autoScroll = true;
-    this.invalidate();
     this.tui.requestRender();
   }
 
@@ -769,7 +800,6 @@ export class ConversationViewer implements Component {
     this.scrollOffset = Math.max(0, Math.min(max, match.lineIdx - Math.floor(this.viewportHeight() / 2)));
     this.setFocusFromMessageIndex(this.messageIndexForOffset(this.scrollOffset));
     this.autoScroll = false;
-    this.invalidate();
   }
 
   private async copyCurrentMessage(): Promise<void> {

package/src/ui/fleet-list.ts

@@ -107,6 +107,7 @@ export class FleetList {
   private inputUnsub: (() => void) | undefined;
   private widgetRegistered = false;
   private lastRosterKey: string | undefined;
+  private lastRenderKey: string | undefined;
   private timer: ReturnType<typeof setInterval> | undefined;
 
   private enabled = true;
@@ -142,6 +143,7 @@ export class FleetList {
     this.ui = ui;
     this.widgetRegistered = false;
     this.lastRosterKey = undefined;
+    this.lastRenderKey = undefined;
     this.tui = undefined;
     this.inputUnsub = ui.onTerminalInput(data => this.handleKey(data));
   }
@@ -168,6 +170,7 @@ export class FleetList {
     if (this.ui && this.widgetRegistered) this.ui.setWidget(FLEET_KEY, undefined);
     this.widgetRegistered = false;
     this.lastRosterKey = undefined;
+    this.lastRenderKey = undefined;
     this.tui = undefined;
     this.active = false;
     // Null last so a `viewerClose()` microtask above can't re-register the widget.
@@ -193,11 +196,13 @@ export class FleetList {
       this.active = false;
       this.selectedIndex = 0;
       this.lastRosterKey = undefined;
+      this.lastRenderKey = undefined;
       return;
     }
 
     this.clampSelection();
     this.ensureTimer(); // keep stats ticking whenever the list is shown (e.g. after a re-enable)
+    const renderKey = this.renderKey(records);
 
     if (!this.widgetRegistered) {
       this.ui.setWidget(FLEET_KEY, (tui, theme) => {
@@ -208,9 +213,37 @@ export class FleetList {
         };
       }, { placement: "belowEditor" });
       this.widgetRegistered = true;
-    } else {
+    } else if (renderKey !== this.lastRenderKey) {
+      // The timer runs more frequently than elapsed time is displayed. Avoid
+      // waking the TUI when the visible FleetView snapshot is unchanged, but
+      // preserve a forced redraw when rows were added/removed.
       this.tui?.requestRender(rosterChanged);
     }
+    this.lastRenderKey = renderKey;
+  }
+
+  /**
+   * Return only values that affect `renderBar()`. Elapsed time is rendered in
+   * whole seconds, so the 200ms timer can skip four out of five updates while
+   * still refreshing the row at the visible cadence.
+   */
+  private renderKey(records: AgentRecord[]): string {
+    const now = Date.now();
+    const agentState = records.map(record => {
+      const activity = this.agentActivity.get(record.id);
+      const usage = activity?.lifetimeUsage ?? record.lifetimeUsage;
+      return [
+        record.id,
+        record.type,
+        record.description,
+        record.status,
+        record.startedAt,
+        record.completedAt ?? "",
+        getLifetimeTotal(usage),
+        Math.round(((record.completedAt ?? now) - record.startedAt) / 1000),
+      ].join("\u001f");
+    });
+    return [this.enabled ? "1" : "0", this.active ? "1" : "0", String(this.selectedIndex), ...agentState].join("\u001e");
   }
 
   // ---- Roster ----

package/test/ui/agent-widget.test.ts

@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { AgentManager } from "../../src/agent-manager.js";
 import {
   AgentWidget,
@@ -48,6 +48,25 @@ function renderWidget(
   return { render, widget };
 }
 
+function createWidgetHarness(records: AgentRecord[]) {
+  const manager = { listAgents: () => records } as unknown as AgentManager;
+  let factory: ((tui: any, theme: Theme) => { render(): string[]; invalidate(): void }) | undefined;
+  const tui = {
+    terminal: { columns: 120, rows: 24 },
+    requestRender: vi.fn(),
+  };
+  const ui = {
+    setStatus: vi.fn(),
+    setWidget: vi.fn((_key: string, content: any) => { factory = content; }),
+  };
+  const widget = new AgentWidget(manager, new Map(), () => "all");
+  widget.setUICtx(ui);
+  widget.update();
+  factory?.(tui, theme).render();
+  tui.requestRender.mockClear();
+  return { records, tui, ui, widget, render: () => factory?.(tui, theme).render() ?? [] };
+}
+
 describe("AgentWidget live records", () => {
   it("keeps restored history in the live widget and manager history", () => {
     const manager = new AgentManager();
@@ -120,4 +139,23 @@ describe("AgentWidget live records", () => {
     expect(getWidgetLineBudget(9)).toBe(5);
     expect(getWidgetLineBudget(100)).toBe(MAX_WIDGET_LINES);
   });
+
+  it("does not request a render when a live snapshot is unchanged", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(10_000);
+    try {
+      const running = makeRecord({ id: "running", status: "running", completedAt: undefined });
+      const { widget, tui } = createWidgetHarness([running]);
+
+      widget.update();
+      expect(tui.requestRender).not.toHaveBeenCalled();
+
+      running.description = "changed description";
+      widget.update();
+      expect(tui.requestRender).toHaveBeenCalledTimes(1);
+      widget.dispose();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
 });

package/test/ui/fleet-list.test.ts

@@ -114,12 +114,16 @@ describe("FleetList bounded window", () => {
     expect(last.some(line => /↓ \d+ more/.test(line))).toBe(false);
   });
 
-  it("forces a full render once when the active roster changes", () => {
+  it("skips unchanged timer updates but redraws once when the active roster changes", () => {
     const { manager, fleet, tui } = createFleetHarness(makeAgents(5));
     tui.requestRender.mockClear();
+    fleet.update();
+    expect(tui.requestRender).not.toHaveBeenCalled();
+
     manager.records.pop();
     fleet.update();
     expect(tui.requestRender).toHaveBeenCalledWith(true);
+    fleet.dispose();
   });
 
   it("clears the widget when the active roster becomes empty", () => {