@esso0428/pi-subagents 0.15.13 → 0.15.14

package/src/ui/conversation-timeline.ts

@@ -143,6 +143,8 @@ export class ConversationTimeline implements Component {
   private focusedToolCallId: string | undefined;
   private expandedTools = new Set<string>();
   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;
@@ -167,6 +169,11 @@ 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;
@@ -182,6 +189,11 @@ 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;
     }
@@ -360,8 +372,33 @@ export class ConversationTimeline implements Component {
         event.y >= span.clickStartLine &&
         event.y < span.clickStartLine + (span.clickHeight ?? 1),
       )?.toolCallId;
-      if (hovered === this.hoveredToolCallId) return undefined;
+      const fullSpan = this.snapshot.toolSpans.find((span) =>
+        event.y >= span.startLine && event.y < span.startLine + span.height,
+      );
+      let nextIoView: any;
+      let nextIoSection: "input" | "output" | null = null;
+      if (fullSpan) {
+        const component = this.toolComponents.get(fullSpan.toolCallId) as any;
+        const view = component?.resultRendererComponent;
+        const localRow = event.y - fullSpan.startLine;
+        if (view && typeof view.sectionAtLine === "function" && typeof view.showMoreLine === "function" && typeof view.setHoveredSection === "function") {
+          const section = view.sectionAtLine(localRow);
+          if (section && view.showMoreLine(section) === localRow) {
+            nextIoView = view;
+            nextIoSection = section;
+          }
+        }
+      }
+      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);
+      }
       this.hoveredToolCallId = hovered;
+      this.hoveredIoView = nextIoView;
+      this.hoveredIoSection = nextIoSection;
+      if (nextIoView) nextIoView.setHoveredSection(nextIoSection);
       this.invalidate();
       this.options.onChange?.();
       return { handled: true, render: true };

package/src/ui/conversation-viewer.ts

@@ -7,7 +7,7 @@
 
 import type { ExtensionAPI, ExtensionContext, AgentSession } from "@earendil-works/pi-coding-agent";
 import { copyToClipboard } from "@earendil-works/pi-coding-agent";
-import { Text, type Component, Input, Key, matchesKey, type TUI, type TuiMouseEvent, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { type Component, Input, Key, matchesKey, type TUI, type TuiMouseEvent, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import type { AgentRecord } from "../types.js";
 import { getLifetimeTotal, getSessionContextPercent } from "../usage.js";
 import type { Theme } from "./agent-widget.js";
@@ -18,14 +18,14 @@ 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";
 import { createViewerKeys, type ViewerKeybindings, type ViewerKeys } from "./viewer-keys.js";
-import { formatToolInputArgs, textFromResult } from "./ccstyle/tool-result.js";
+import { createViewerCcstyleResult } from "./ccstyle/tool-result.js";
 
 /** Base lines consumed by the overlay: borders, header, separator and footer. */
 const CHROME_LINES_BASE = 6;
 const FULL_TOOL_PREVIEW_MAX_CHARS = 500_000;
 
 class FullToolPreview implements Component {
-  private readonly text: Text;
+  private readonly body: Component;
   private scrollOffset = 0;
   private pageSize = 1;
   private totalLines = 1;
@@ -35,10 +35,10 @@ class FullToolPreview implements Component {
     private readonly tui: TUI,
     private readonly theme: Theme,
     private readonly title: string,
-    content: string,
+    body: Component,
     private readonly done: (result: undefined) => void,
   ) {
-    this.text = new Text(content || "(empty)", 0, 0);
+    this.body = body;
   }
 
   handleInput(data: string): void {
@@ -81,7 +81,7 @@ class FullToolPreview implements Component {
     const bodyWidth = Math.max(1, inner - 1);
     const terminalRows = Math.max(1, this.tui.terminal.rows);
     const viewport = Math.max(1, Math.min(30, Math.floor(terminalRows * 0.8), terminalRows - 6));
-    const wrapped = this.text.render(bodyWidth);
+    const wrapped = this.body.render(bodyWidth);
     this.totalLines = wrapped.length;
     this.pageSize = viewport;
     this.scrollOffset = Math.min(this.scrollOffset, Math.max(0, this.totalLines - this.pageSize));
@@ -106,7 +106,7 @@ class FullToolPreview implements Component {
   }
 
   invalidate(): void {
-    this.text.invalidate();
+    this.body.invalidate();
   }
 
   private scrollTo(offset: number): void {
@@ -676,24 +676,25 @@ export class ConversationViewer implements Component {
     const custom = this.operations?.ctx?.ui?.custom;
     if (block?.kind !== "tool" || typeof custom !== "function") return;
 
-    const input = formatToolInputArgs(block.args ?? block.toolArguments, FULL_TOOL_PREVIEW_MAX_CHARS);
-    const result = block.toolResult ?? block.result;
-    const output = result
-      ? textFromResult(result, true, FULL_TOOL_PREVIEW_MAX_CHARS)
-      : "(no result yet)";
-    const content = [
-      "Input",
-      "=====",
-      input || "(empty)",
-      "",
-      "Output",
-      "======",
-      output || "(empty)",
-    ].join("\n");
-    const title = `${block.toolName || "Tool"} · full preview`;
-
-    void custom.call(this.operations!.ctx.ui, (tui, overlayTheme, _keybindings, done) =>
-      new FullToolPreview(tui, overlayTheme as Theme, title, content, done), {
+    const toolName = block.toolName || "tool";
+    const args = block.args ?? block.toolArguments;
+    const result = block.toolResult ?? block.result ?? { content: [] };
+    const title = `${toolName} · full preview`;
+
+    void custom.call(this.operations!.ctx.ui, (tui, overlayTheme, _keybindings, done) => {
+      const body = createViewerCcstyleResult(
+        toolName,
+        result,
+        { expanded: true, isError: result.isError === true },
+        overlayTheme,
+        {
+          args,
+          maxChars: FULL_TOOL_PREVIEW_MAX_CHARS,
+          diffConfig: { expandedPreviewMaxLines: Number.MAX_SAFE_INTEGER },
+        },
+      );
+      return new FullToolPreview(tui, overlayTheme as Theme, title, body, done);
+    }, {
         overlay: true,
         overlayOptions: {
           anchor: "center",

package/test/ui/conversation-diff.test.ts

@@ -66,6 +66,25 @@ describe("viewer-local ccstyle diff renderer", () => {
     expect(rendered).not.toContain("later");
   });
 
+  it("matches the pi-cc Input/Output tree style and hover affordance", () => {
+    const component = createViewerCcstyleResult("read", {
+      content: [{ type: "text", text: "one\ntwo\nthree" }],
+    }, { expanded: true }, theme, {
+      args: { path: "file.txt", offset: 2 },
+      diffConfig: { expandedPreviewMaxLines: 2 },
+    }) as any;
+
+    const initial = component.render(100).join("\n");
+    expect(initial).toContain("<accent><bold>Input</bold></accent>");
+    expect(initial).toContain("<dim>path: </dim><muted>file.txt</muted>");
+    expect(initial).toContain("<accent><bold>Output</bold></accent>");
+    expect(initial).toContain("click to show more");
+    const outputHintLine = component.showMoreLine("output");
+    expect(outputHintLine).toEqual(expect.any(Number));
+    component.setHoveredSection("output");
+    expect(component.render(100).join("\n")).toContain("<text> click to show more</text>");
+  });
+
   it("reads tool-hint hover state at render time", () => {
     let hovered = false;
     const component = createViewerCcstyleResult("read", {