@esso0428/pi-subagents 0.15.14 → 0.15.15

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,9 +48,17 @@ 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 ConversationTimelineOptions {
   cwd?: string;
   record?: AgentRecord;
@@ -81,7 +94,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));
@@ -145,7 +158,6 @@ export class ConversationTimeline implements Component {
   private hoveredToolCallId: string | undefined;
   private hoveredIoView: any;
   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 +166,7 @@ export class ConversationTimeline implements Component {
     messageStarts: [],
     messageBlocks: [],
     interactiveToolIds: [],
+    blockSpans: [],
     toolSpans: [],
   };
   private lastWidth = 0;
@@ -169,15 +182,6 @@ 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);
-      this.hoveredIoView = 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 +193,6 @@ 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 = undefined;
-      this.hoveredIoSection = null;
-      this.lastClickedToolCallId = undefined;
-      this.lastClickedPoint = undefined;
     }
     this.invalidate();
   }
@@ -213,10 +210,6 @@ export class ConversationTimeline implements Component {
     return this.focusedToolCallId;
   }
 
-  getHoveredToolCallId(): string | undefined {
-    return this.hoveredToolCallId;
-  }
-
   getSnapshot(): ConversationTimelineSnapshot {
     if (this.lastWidth <= 0) this.render(80);
     return this.snapshot;
@@ -255,6 +248,7 @@ export class ConversationTimeline implements Component {
     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");
 
@@ -272,6 +266,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) {
@@ -309,8 +304,6 @@ export class ConversationTimeline implements Component {
             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,
@@ -323,19 +316,23 @@ export class ConversationTimeline implements Component {
           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 +355,15 @@ 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 {
+  handleMouse(event: TuiMouseEvent): ConversationTimelineMouseResult | undefined {
     if (event.type === "move") {
       const hovered = this.snapshot.toolSpans.find((span) =>
         span.clickStartLine !== undefined &&
@@ -389,8 +387,7 @@ 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);
@@ -404,63 +401,70 @@ export class ConversationTimeline implements Component {
       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.
+        }
+      }
+      this.invalidate();
+      this.options.onChange?.();
+      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.
-    }
+    // 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.invalidate();
     this.options.onChange?.();
-    return { handled: true, render: true };
+    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: [] };
   }
 }