@esso0428/pi-subagents 0.15.15 → 0.15.17

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/deferred-ui-refresh.ts

@@ -0,0 +1,72 @@
+/** Coalesced, deferred render requests for structural UI changes. */
+
+const DEFAULT_DELAY_MS = 50;
+const DEFAULT_MAX_WAIT_MS = 200;
+
+export interface DeferredUiRefresh {
+  /** Schedule one render request after the debounce/max-wait window. */
+  schedule(): void;
+  /** Cancel the current pending render request, if any. */
+  cancel(): void;
+  /** Cancel and permanently disable this scheduler. */
+  dispose(): void;
+}
+
+export function createDeferredUiRefresh(
+  requestRender: () => void,
+  options: {
+    delayMs?: number;
+    maxWaitMs?: number;
+    now?: () => number;
+  } = {},
+): DeferredUiRefresh {
+  const delayMs = Math.max(0, options.delayMs ?? DEFAULT_DELAY_MS);
+  const maxWaitMs = Math.max(0, options.maxWaitMs ?? DEFAULT_MAX_WAIT_MS);
+  const now = options.now ?? Date.now;
+
+  let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+  let firstScheduledAt: number | undefined;
+  let disposed = false;
+
+  const clearPendingTimer = () => {
+    if (debounceTimer !== undefined) {
+      clearTimeout(debounceTimer);
+      debounceTimer = undefined;
+    }
+  };
+
+  const flush = () => {
+    // Clear all state before invoking user code. A render callback may schedule
+    // another refresh, which should begin a fresh debounce window.
+    clearPendingTimer();
+    firstScheduledAt = undefined;
+    if (disposed) return;
+    requestRender();
+  };
+
+  const schedule = () => {
+    if (disposed) return;
+
+    const current = now();
+    if (firstScheduledAt === undefined) firstScheduledAt = current;
+
+    clearPendingTimer();
+    const maxDeadline = firstScheduledAt + maxWaitMs;
+    const remainingMaxWait = Math.max(0, maxDeadline - current);
+    const wait = Math.min(delayMs, remainingMaxWait);
+    debounceTimer = setTimeout(flush, wait);
+  };
+
+  const cancel = () => {
+    clearPendingTimer();
+    firstScheduledAt = undefined;
+  };
+
+  const dispose = () => {
+    if (disposed) return;
+    cancel();
+    disposed = true;
+  };
+
+  return { schedule, cancel, dispose };
+}