gsd-pi 2.79.0-dev.ece5fd8ba → 2.80.0-dev.0aaa4fc17

package/packages/pi-coding-agent/dist/modes/interactive/components/tool-execution.js

@@ -1,4 +1,5 @@
-import { Box, Container, getCapabilities, Image, imageFallback, Spacer, Text, truncateToWidth, visibleWidth, } from "@gsd/pi-tui";
+// GSD-2 Interactive Tool Execution Rendering
+import { Box, Container, getCapabilities, Image, imageFallback, Spacer, style, Text, truncateToWidth, visibleWidth, } from "@gsd/pi-tui";
 import stripAnsi from "strip-ansi";
 import { computeEditDiff } from "../../../core/tools/edit-diff.js";
 import { allTools } from "../../../core/tools/index.js";
@@ -79,12 +80,11 @@ function trimOuterBlankLines(lines) {
 function renderToolFrame(contentLines, width, opts) {
     const outerWidth = Math.max(20, width);
     const contentWidth = Math.max(1, outerWidth - 2); // "│ " + content
-    const borderColor = opts.tone === "error" ? "error" : "toolTitle";
-    const topColor = opts.tone === "error" ? "error" : "toolTitle";
-    const labelColor = opts.tone === "error" ? "error" : "toolTitle";
-    const statusColor = opts.tone === "error" ? "error" : opts.tone === "pending" ? "warning" : "success";
-    const border = (s) => theme.fg(borderColor, s);
-    const leftStyled = theme.fg(labelColor, theme.bold(`• ${opts.label}`));
+    const borderColor = opts.tone === "error" ? "toolError" : opts.tone === "pending" ? "toolRunning" : "toolSuccess";
+    const topColor = borderColor;
+    const labelColor = opts.tone === "error" ? "toolError" : opts.tone === "pending" ? "toolRunning" : "toolSuccess";
+    const statusColor = opts.tone === "error" ? "toolError" : opts.tone === "pending" ? "toolRunning" : "toolSuccess";
+    const leftStyled = theme.fg(labelColor, theme.bold(opts.label));
     const rightStyled = theme.fg(statusColor, opts.status);
     const gap = Math.max(1, outerWidth - visibleWidth(leftStyled) - visibleWidth(rightStyled));
     const headerRow = `${leftStyled}${" ".repeat(gap)}${rightStyled}`;
@@ -92,17 +92,37 @@ function renderToolFrame(contentLines, width, opts) {
     const sourceLines = trimOuterBlankLines(contentLines);
     const bodyLines = (sourceLines.length > 0 ? sourceLines : [""]).map((line) => {
         const clipped = truncateToWidth(line, contentWidth, "");
-        return border("│ ") + clipped;
+        return clipped;
     });
-    return [
-        theme.fg(topColor, "─".repeat(outerWidth)),
-        headerRow + " ".repeat(headerPad),
-        ...bodyLines,
-    ];
+    return style()
+        .border("rule")
+        .borderColor((line) => theme.fg(line.startsWith("─") ? topColor : borderColor, line))
+        .title(headerRow + " ".repeat(headerPad))
+        .render(bodyLines, outerWidth);
+}
+function renderCollapsedToolRow(label, status, width, tone) {
+    const outerWidth = Math.max(20, width);
+    const contentWidth = Math.max(1, outerWidth - 2);
+    const statusColor = tone === "success" ? "toolSuccess" : "toolMuted";
+    const labelStyled = theme.fg(statusColor, label);
+    const statusStyled = theme.fg(statusColor, status);
+    const labelWidth = Math.max(1, contentWidth - visibleWidth(statusStyled) - 1);
+    const clippedLabel = truncateToWidth(labelStyled, labelWidth, "");
+    const gap = Math.max(1, contentWidth - visibleWidth(clippedLabel) - visibleWidth(statusStyled));
+    const line = `${clippedLabel}${" ".repeat(gap)}${statusStyled}`;
+    return style()
+        .border("minimal")
+        .borderColor((text) => theme.fg(statusColor, text))
+        .render([line], outerWidth);
 }
 const COMPACT_ARG_VALUE_LIMIT = 60;
 const GENERIC_OUTPUT_PREVIEW_LINES = 10;
 const GENERIC_ARGS_JSON_PREVIEW_LINES = 10;
+function formatElapsed(ms) {
+    if (ms < 1000)
+        return `${ms}ms`;
+    return `${Math.max(1, Math.round(ms / 1000))}s`;
+}
 /**
  * Format tool args for the generic-renderer fallback. Produces a one-line
  * `k=v, k=v` summary when every value is a primitive that fits inline; falls
@@ -155,6 +175,7 @@ export class ToolExecutionComponent extends Container {
         this.imageSpacers = [];
         this.expanded = false;
         this.isPartial = true;
+        this.startedAt = Date.now();
         // Cached converted images for Kitty protocol (which requires PNG), keyed by index
         this.convertedImages = new Map();
         // Cached resolved image dimensions to avoid re-triggering async parsing
@@ -331,6 +352,9 @@ export class ToolExecutionComponent extends Container {
     updateResult(result, isPartial = false) {
         this.result = result;
         this.isPartial = isPartial;
+        if (!isPartial) {
+            this.endedAt = this.endedAt ?? Date.now();
+        }
         if (this.normalizedToolName === "write" && !isPartial) {
             const rawPath = str(this.args?.file_path ?? this.args?.path);
             const fileContent = str(this.args?.content);
@@ -353,6 +377,7 @@ export class ToolExecutionComponent extends Container {
         if (this.result)
             return; // real result already set, nothing to do
         this.isPartial = false;
+        this.endedAt = this.endedAt ?? Date.now();
         this.result = {
             content: [],
             isError: false,
@@ -364,6 +389,7 @@ export class ToolExecutionComponent extends Container {
      */
     completeWithError(message) {
         this.isPartial = false;
+        this.endedAt = this.endedAt ?? Date.now();
         if (this.result) {
             let content = this.result.content;
             if (message) {
@@ -432,13 +458,17 @@ export class ToolExecutionComponent extends Container {
         }
         const frameWidth = Math.max(20, width);
         const contentWidth = Math.max(1, frameWidth - 4);
-        const lines = super.render(contentWidth);
         const frameTone = this.result?.isError ? "error" : this.isPartial || !this.result ? "pending" : "success";
-        const frameStatus = this.isPartial || !this.result ? "Running" : this.result.isError ? "Error" : "Done";
+        const elapsed = formatElapsed((this.endedAt ?? Date.now()) - this.startedAt);
+        const frameStatus = `${this.isPartial || !this.result ? "running" : this.result.isError ? "failed" : "success"} · ${elapsed}`;
         const parsed = parseMcpToolName(this.toolName);
         const frameLabel = parsed
-            ? `Tool ${parsed.server}·${parsed.tool}`
-            : `Tool ${prettifyToolName(this.toolName, this.toolDefinition?.label) || "unknown"}`;
+            ? `${parsed.server}·${parsed.tool}`
+            : prettifyToolName(this.toolName, this.toolDefinition?.label) || "unknown";
+        if (this.shouldRenderCompactSuccess()) {
+            return ["", ...renderCollapsedToolRow(this.getCompactSummary(frameLabel), frameStatus, frameWidth, "success")];
+        }
+        const lines = super.render(contentWidth);
         const framed = renderToolFrame(lines, frameWidth, {
             label: frameLabel,
             status: frameStatus,
@@ -446,6 +476,46 @@ export class ToolExecutionComponent extends Container {
         });
         return framed.length > 0 ? ["", ...framed] : framed;
     }
+    shouldRenderCompactSuccess() {
+        if (this.expanded || this.isPartial || !this.result || this.result.isError)
+            return false;
+        const hasImages = this.result.content?.some((block) => block.type === "image") ?? false;
+        return !hasImages;
+    }
+    getRollupPhase() {
+        if (!this.shouldRenderCompactSuccess())
+            return null;
+        const label = this.getPhaseLabel();
+        const endedAt = this.endedAt ?? Date.now();
+        return {
+            label,
+            count: 1,
+            durationMs: Math.max(0, endedAt - this.startedAt),
+        };
+    }
+    getPhaseLabel() {
+        const name = this.normalizedToolName;
+        const displayName = prettifyToolName(this.toolName, this.toolDefinition?.label);
+        if (name === "bash")
+            return "Setup / shell";
+        if (name === "read" || name === "ls" || name === "find" || name === "grep")
+            return "Context reads";
+        if (name === "write" || name === "edit")
+            return "File changes";
+        if (name === "web_search" || displayName === "ToolSearch")
+            return "Discovery";
+        if (displayName === "Memory Query" || displayName === "Memory Capture" || displayName === "Gsd Graph") {
+            return "Memory lookups";
+        }
+        if (displayName === "Update Requirement" || displayName === "Save Requirement")
+            return "Requirement writes";
+        if (displayName.startsWith("Complete "))
+            return "Finalization";
+        return "Other tool actions";
+    }
+    getCompactSummary(frameLabel) {
+        return frameLabel;
+    }
     updateDisplay() {
         // Tool body now uses transparent background; status is conveyed in the frame header.
         const bgFn = (text) => text;
@@ -493,7 +563,12 @@ export class ToolExecutionComponent extends Container {
             // Render result component if we have a result
             if (this.result && this.toolDefinition.renderResult) {
                 try {
-                    const resultComponent = this.toolDefinition.renderResult({ content: this.result.content, details: this.result.details }, { expanded: this.expanded, isPartial: this.isPartial }, theme);
+                    const rendererResult = {
+                        content: this.result.content,
+                        details: this.result.details,
+                        isError: this.result.isError,
+                    };
+                    const resultComponent = this.toolDefinition.renderResult(rendererResult, { expanded: this.expanded, isPartial: this.isPartial }, theme);
                     if (resultComponent !== undefined) {
                         this.contentBox.addChild(resultComponent);
                         customRendererHasContent = true;
@@ -1012,4 +1087,23 @@ export class ToolExecutionComponent extends Container {
         return text;
     }
 }
+export class ToolPhaseSummaryComponent extends Container {
+    constructor(phases) {
+        super();
+        this.phases = phases;
+    }
+    render(width) {
+        const frameWidth = Math.max(20, width);
+        const rows = this.phases.map((phase) => {
+            const left = `${phase.label} ${phase.count} ${phase.count === 1 ? "action" : "actions"}`;
+            const right = `success · ${formatElapsed(phase.durationMs)}`;
+            const contentWidth = Math.max(1, frameWidth - 2);
+            const leftWidth = Math.max(1, contentWidth - visibleWidth(right) - 1);
+            const leftText = truncateToWidth(left, leftWidth, "");
+            const gap = Math.max(1, contentWidth - visibleWidth(leftText) - visibleWidth(right));
+            return `${theme.fg("toolSuccess", leftText)}${" ".repeat(gap)}${theme.fg("toolSuccess", right)}`;
+        });
+        return ["", ...style().border("minimal").borderColor((text) => theme.fg("toolSuccess", text)).render(rows, frameWidth)];
+    }
+}
 //# sourceMappingURL=tool-execution.js.map