@esso0428/pi-subagents 0.15.14 → 0.15.16

package/src/ui/conversation-timeline.ts

@@ -29,10 +29,15 @@ export interface TimelineRenderLine {
   railable?: boolean;
 }
 
-export interface TimelineToolSpan {
-  toolCallId: string;
+export interface TimelineBlockSpan {
+  /** Index into the snapshot's messageBlocks array, not the source block array. */
+  blockIndex: number;
   startLine: number;
   height: number;
+}
+
+export interface TimelineToolSpan extends TimelineBlockSpan {
+  toolCallId: string;
   /** The only row that opens a collapsed card with a single click. */
   clickStartLine?: number;
   clickHeight?: number;
@@ -43,13 +48,32 @@ export interface ConversationTimelineSnapshot {
   messageStarts: number[];
   messageBlocks: ConversationBlock[];
   interactiveToolIds: string[];
+  blockSpans: TimelineBlockSpan[];
   toolSpans: TimelineToolSpan[];
 }
 
+export interface ConversationTimelineMouseResult {
+  handled?: boolean;
+  capture?: boolean;
+  render?: boolean;
+  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 {
@@ -81,7 +105,7 @@ function fallbackToolLines(block: ConversationBlock, width: number, expanded = f
     const clipped = truncateToWidth(line, width, "");
     if (!hovered || expanded || !theme) return clipped;
     const plain = stripAnsi(clipped);
-    const marker = plain.includes(showMoreHintText()) ? showMoreHintText() : plain.includes("Enter to expand") ? "Enter to expand" : "";
+    const marker = plain.includes(showMoreHintText()) ? showMoreHintText() : "";
     if (!marker) return clipped;
     const markerIndex = plain.indexOf(marker);
     return theme.fg("dim", plain.slice(0, markerIndex)) + theme.fg("text", marker) + theme.fg("dim", plain.slice(markerIndex + marker.length));
@@ -144,8 +168,8 @@ 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;
-  /** The last tool clicked; used to make only clickCount=2 collapse it. */
   private lastClickedToolCallId: string | undefined;
   private lastClickedPoint: { x: number; y: number } | undefined;
   private toolComponents = new Map<string, Component & { handleMouse?: (event: TuiMouseEvent) => unknown }>();
@@ -154,6 +178,7 @@ export class ConversationTimeline implements Component {
     messageStarts: [],
     messageBlocks: [],
     interactiveToolIds: [],
+    blockSpans: [],
     toolSpans: [],
   };
   private lastWidth = 0;
@@ -169,15 +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.hoveredIoView && typeof this.hoveredIoView.setHoveredSection === "function") {
-      this.hoveredIoView.setHoveredSection(null);
+    if (this.hoveredIoToolCallId && !ids.has(this.hoveredIoToolCallId)) {
+      this.hoveredIoView?.setHoveredSection?.(null);
       this.hoveredIoView = undefined;
+      this.hoveredIoToolCallId = undefined;
       this.hoveredIoSection = null;
     }
-    if (this.lastClickedToolCallId && !ids.has(this.lastClickedToolCallId)) {
-      this.lastClickedToolCallId = undefined;
-      this.lastClickedPoint = undefined;
-    }
     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();
@@ -189,13 +211,10 @@ export class ConversationTimeline implements Component {
     if (!show) {
       this.focusedToolCallId = undefined;
       this.hoveredToolCallId = undefined;
-      if (this.hoveredIoView && typeof this.hoveredIoView.setHoveredSection === "function") {
-        this.hoveredIoView.setHoveredSection(null);
-      }
+      this.hoveredIoView?.setHoveredSection?.(null);
       this.hoveredIoView = undefined;
+      this.hoveredIoToolCallId = undefined;
       this.hoveredIoSection = null;
-      this.lastClickedToolCallId = undefined;
-      this.lastClickedPoint = undefined;
     }
     this.invalidate();
   }
@@ -205,18 +224,16 @@ 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 {
     return this.focusedToolCallId;
   }
 
-  getHoveredToolCallId(): string | undefined {
-    return this.hoveredToolCallId;
-  }
-
   getSnapshot(): ConversationTimelineSnapshot {
     if (this.lastWidth <= 0) this.render(80);
     return this.snapshot;
@@ -230,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;
   }
 
@@ -241,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;
   }
 
@@ -251,20 +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 });
@@ -272,6 +292,7 @@ export class ConversationTimeline implements Component {
 
       const hasRoleHeader = block.role === "user" || block.role === "assistant";
       const blockStartLine = lines.length;
+      const snapshotBlockIndex = messageBlocks.length;
       messageStarts.push(blockStartLine);
       messageBlocks.push(block);
       if (hasRoleHeader) {
@@ -282,60 +303,22 @@ 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 {
-          // Pi's interactive theme is a capability, not a viewer dependency;
-          // test hosts and older Pi versions can lack its initialized theme.
-          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 startLine = blockStartLine;
-          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({
+            blockIndex: snapshotBlockIndex,
             toolCallId: id,
-            startLine,
-            height: lines.length - startLine,
-            ...(hintLine >= 0 ? { clickStartLine: startLine + (hasRoleHeader ? 1 : 0) + hintLine, clickHeight: 1 } : {}),
+            startLine: blockStartLine,
+            height: blockHeight,
+            ...(hintLine >= 0 ? { clickStartLine: blockStartLine + (hasRoleHeader ? 1 : 0) + hintLine, clickHeight: 1 } : {}),
           });
+        } else {
+          blockSpans.push({ blockIndex: snapshotBlockIndex, startLine: blockStartLine, height: lines.length - blockStartLine });
         }
         continue;
       }
@@ -358,14 +341,88 @@ export class ConversationTimeline implements Component {
           }
         }
       }
+      blockSpans.push({ blockIndex: snapshotBlockIndex, startLine: blockStartLine, height: lines.length - blockStartLine });
     }
 
     this.lastWidth = requestedWidth;
-    this.snapshot = { lines, messageStarts, messageBlocks, interactiveToolIds, toolSpans };
+    this.snapshot = { lines, messageStarts, messageBlocks, interactiveToolIds, blockSpans, toolSpans };
     return lines.map((line) => line.text);
   }
 
-  handleMouse(event: TuiMouseEvent): { handled?: boolean; capture?: boolean; render?: boolean } | undefined {
+  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) =>
         span.clickStartLine !== undefined &&
@@ -389,78 +446,110 @@ export class ConversationTimeline implements Component {
           }
         }
       }
-      const unchanged = hovered === this.hoveredToolCallId &&
-        nextIoView === this.hoveredIoView && nextIoSection === this.hoveredIoSection;
+      const unchanged = hovered === this.hoveredToolCallId && nextIoView === this.hoveredIoView && nextIoSection === this.hoveredIoSection;
       if (unchanged) return undefined;
       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 };
     }
 
-    // The TUI sends a click only when a component claims the preceding press.
-    // Claim only the collapsed hint (or the last expanded card's hit area for
-    // a possible second click); never change expansion on press or release.
     if (event.type !== "click" && event.type !== "press") return undefined;
     if (event.button !== "left") return undefined;
-    const clickCount = event.clickCount ?? 1;
+
+    // Keep the hint ahead of the full tool span. Its row has a distinct action.
     const hintSpan = this.snapshot.toolSpans.find((candidate) =>
       candidate.clickStartLine !== undefined &&
       event.y >= candidate.clickStartLine &&
       event.y < candidate.clickStartLine + (candidate.clickHeight ?? 1),
     );
     const fullSpan = this.snapshot.toolSpans.find((candidate) =>
-      event.y >= candidate.startLine &&
-      event.y < candidate.startLine + candidate.height,
+      event.y >= candidate.startLine && event.y < candidate.startLine + candidate.height,
     );
-    const lastSpan = this.lastClickedToolCallId
-      ? this.snapshot.toolSpans.find((candidate) => candidate.toolCallId === this.lastClickedToolCallId)
-      : undefined;
-    const sameLastPoint = this.lastClickedPoint !== undefined
-      && event.screenX === this.lastClickedPoint.x
-      && event.screenY === this.lastClickedPoint.y;
-    const span = event.type === "click" && clickCount === 2 && lastSpan
-      ? lastSpan
-      : hintSpan ?? (sameLastPoint ? lastSpan : undefined);
-    if (!span) return undefined;
+    const blockSpan = this.snapshot.blockSpans.find((candidate) =>
+      event.y >= candidate.startLine && event.y < candidate.startLine + candidate.height,
+    );
+    const target = hintSpan ?? fullSpan ?? blockSpan;
+    if (!target) return undefined;
     if (event.type === "press") return { handled: true, capture: true, render: false };
 
-    const previousClickedToolCallId = this.lastClickedToolCallId;
-    this.focusedToolCallId = span.toolCallId;
-    this.lastClickedToolCallId = span.toolCallId;
-    this.lastClickedPoint = { x: event.screenX, y: event.screenY };
-    const isExpanded = this.expandedTools.has(span.toolCallId);
-    const shouldCollapse = isExpanded && clickCount === 2 && span.toolCallId === previousClickedToolCallId;
-    if (!isExpanded && hintSpan?.toolCallId === span.toolCallId) {
-      this.expandedTools.add(span.toolCallId);
-    } else if (shouldCollapse) {
-      this.expandedTools.delete(span.toolCallId);
-    } else if (!isExpanded) {
-      return { handled: true, render: false };
+    if (hintSpan || fullSpan) {
+      const span = hintSpan ?? fullSpan!;
+      const clickCount = event.clickCount ?? 1;
+      const previousClickedToolCallId = this.lastClickedToolCallId;
+      const lastSpan = this.lastClickedToolCallId
+        ? this.snapshot.toolSpans.find((candidate) => candidate.toolCallId === this.lastClickedToolCallId)
+        : undefined;
+      const sameLastPoint = this.lastClickedPoint !== undefined &&
+        event.screenX === this.lastClickedPoint.x && event.screenY === this.lastClickedPoint.y;
+      const sameLastSpan = sameLastPoint && span.toolCallId === lastSpan?.toolCallId;
+      const isExpanded = this.expandedTools.has(span.toolCallId);
+      const shouldExpand = !isExpanded && hintSpan?.toolCallId === span.toolCallId;
+      const shouldCollapse = isExpanded && clickCount === 2 && sameLastSpan && span.toolCallId === previousClickedToolCallId;
+
+      this.focusedToolCallId = span.toolCallId;
+      this.lastClickedToolCallId = span.toolCallId;
+      this.lastClickedPoint = { x: event.screenX, y: event.screenY };
+      if (shouldExpand) this.expandedTools.add(span.toolCallId);
+      else if (shouldCollapse) this.expandedTools.delete(span.toolCallId);
+
+      if (shouldExpand || shouldCollapse) {
+        const component = this.toolComponents.get(span.toolCallId);
+        try {
+          component?.handleMouse?.({ ...event, y: event.y - span.startLine, height: span.height });
+        } catch {
+          // A missing/older Pi mouse implementation must not break the viewer.
+        }
+      }
+      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 };
     }
 
-    const component = this.toolComponents.get(span.toolCallId);
-    try {
-      // Keep Pi's normalized mouse contract in the component tree. The local
-      // role header occupies the first row; ToolExecutionComponent receives
-      // the remaining card-relative coordinate.
-      component?.handleMouse?.({ ...event, y: event.y - span.startLine, height: span.height });
-    } catch {
-      // A missing/older Pi mouse implementation must not break the viewer.
-    }
-    this.invalidate();
-    this.options.onChange?.();
-    return { handled: true, render: true };
+    // A message click intentionally drops any stale tool focus so Enter cannot
+    // toggle a tool that is no longer the selected block.
+    this.focusedToolCallId = undefined;
+    this.lastClickedToolCallId = undefined;
+    this.lastClickedPoint = undefined;
+    this.options.onChange?.({ kind: "interaction" });
+    return { handled: true, render: true, focusedBlockIndex: target.blockIndex };
   }
 
   invalidate(): void {
     this.lastWidth = 0;
-    this.snapshot = { lines: [], messageStarts: [], messageBlocks: [], interactiveToolIds: [], toolSpans: [] };
+    this.snapshot = { lines: [], messageStarts: [], messageBlocks: [], interactiveToolIds: [], blockSpans: [], toolSpans: [] };
   }
 }