gsd-pi 2.80.0 → 2.81.0-dev.3cddbbba2

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

@@ -1,4 +1,6 @@
-import { Box, Container, getCapabilities, Image, imageFallback, Spacer, Text, truncateToWidth, visibleWidth, } from "@gsd/pi-tui";
+// Project/App: GSD-2
+// File Purpose: Interactive terminal tool execution renderer for commands, tool calls, diffs, images, and summaries.
+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";
@@ -9,6 +11,7 @@ import { getLanguageFromPath, highlightCode, theme } from "../theme/theme.js";
 import { shortenPath } from "../utils/shorten-path.js";
 import { renderDiff } from "./diff.js";
 import { keyHint } from "./keybinding-hints.js";
+import { renderCommandCard, renderToolLineCard, renderTranscriptCard } from "./transcript-design.js";
 import { truncateToVisualLines } from "./visual-truncate.js";
 // Preview line limit for bash when not expanded
 const BASH_PREVIEW_LINES = 5;
@@ -67,42 +70,141 @@ function prettifyToolName(name, label) {
         .map((word) => (word.length === 0 ? word : word[0].toUpperCase() + word.slice(1)))
         .join(" ");
 }
-function trimOuterBlankLines(lines) {
-    let start = 0;
-    let end = lines.length;
-    while (start < end && lines[start].trim().length === 0)
-        start++;
-    while (end > start && lines[end - 1].trim().length === 0)
-        end--;
-    return lines.slice(start, end);
-}
-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 rightStyled = theme.fg(statusColor, opts.status);
-    const gap = Math.max(1, outerWidth - visibleWidth(leftStyled) - visibleWidth(rightStyled));
-    const headerRow = `${leftStyled}${" ".repeat(gap)}${rightStyled}`;
-    const headerPad = Math.max(0, outerWidth - visibleWidth(headerRow));
-    const sourceLines = trimOuterBlankLines(contentLines);
-    const bodyLines = (sourceLines.length > 0 ? sourceLines : [""]).map((line) => {
-        const clipped = truncateToWidth(line, contentWidth, "");
-        return border("│ ") + clipped;
-    });
-    return [
-        theme.fg(topColor, "─".repeat(outerWidth)),
-        headerRow + " ".repeat(headerPad),
-        ...bodyLines,
-    ];
-}
 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`;
+}
+function formatCommandPreview(command) {
+    return truncateToWidth(command.replace(/\s+/g, " ").trim(), 64, "");
+}
+function appendLineOrRange(displayPath, target) {
+    if (!displayPath)
+        return undefined;
+    if (typeof target.line === "number" && Number.isFinite(target.line)) {
+        return `${displayPath}:${target.line}`;
+    }
+    const start = target.range?.start;
+    if (typeof start === "number" && Number.isFinite(start)) {
+        const end = target.range?.end;
+        const suffix = typeof end === "number" && Number.isFinite(end) && end !== start
+            ? `${start}-${end}`
+            : `${start}`;
+        return `${displayPath}:${suffix}`;
+    }
+    return displayPath;
+}
+function formatToolTarget(target) {
+    const path = target.resolvedPath || target.inputPath;
+    const displayPath = path ? shortenPath(path) : undefined;
+    if (target.kind === "search") {
+        const searchTarget = displayPath ?? target.inputPath ?? ".";
+        const label = target.pattern ? `${target.pattern} in ${searchTarget}` : searchTarget;
+        return target.glob ? `${label} (${target.glob})` : label;
+    }
+    return appendLineOrRange(displayPath, target);
+}
+function directDetailsTarget(details, action) {
+    if (!details || typeof details !== "object")
+        return undefined;
+    const record = details;
+    const rawPath = record.resolvedPath ?? record.inputPath ?? record.file_path ?? record.path;
+    if (typeof rawPath !== "string" || rawPath.trim().length === 0)
+        return undefined;
+    const target = {
+        kind: "file",
+        action,
+        resolvedPath: typeof record.resolvedPath === "string" ? record.resolvedPath : rawPath,
+        inputPath: typeof record.inputPath === "string" ? record.inputPath : rawPath,
+    };
+    if (typeof record.line === "number") {
+        target.line = record.line;
+    }
+    const range = record.range;
+    if (range && typeof range === "object") {
+        const rangeRecord = range;
+        target.range = {
+            start: typeof rangeRecord.start === "number" ? rangeRecord.start : undefined,
+            end: typeof rangeRecord.end === "number" ? rangeRecord.end : undefined,
+        };
+    }
+    return target;
+}
+function firstStringArg(args, keys) {
+    for (const key of keys) {
+        const value = str(args[key]);
+        if (value === null)
+            continue;
+        if (value)
+            return value;
+    }
+    return "";
+}
+function formatArgsPathTarget(path, args) {
+    if (!path)
+        return undefined;
+    const start = typeof args.offset === "number" ? args.offset : undefined;
+    const limit = typeof args.limit === "number" ? args.limit : undefined;
+    const range = start !== undefined || limit !== undefined
+        ? {
+            start: start ?? 1,
+            end: limit !== undefined ? (start ?? 1) + Math.max(0, limit - 1) : undefined,
+        }
+        : undefined;
+    return appendLineOrRange(shortenPath(path), { range });
+}
+function stripLineSuffix(target) {
+    return target.replace(/:\d+(?:-\d+)?$/, "");
+}
+function uniqueTargets(targets) {
+    const seen = new Set();
+    const unique = [];
+    for (const target of targets ?? []) {
+        if (!target || seen.has(target))
+            continue;
+        seen.add(target);
+        unique.push(target);
+    }
+    return unique;
+}
+function summarizePhaseLabel(phase) {
+    const phaseTargets = uniqueTargets(phase.targets);
+    const baseTargets = uniqueTargets(phaseTargets.map(stripLineSuffix));
+    if (phase.label === "File changes" && baseTargets.length > 0) {
+        const fileWord = baseTargets.length === 1 ? "file" : "files";
+        const actionWord = phase.actionLabel === "write"
+            ? phase.count === 1
+                ? "write"
+                : "writes"
+            : phase.actionLabel === undefined
+                ? phase.count === 1
+                    ? "action"
+                    : "actions"
+                : phase.count === 1
+                    ? "edit"
+                    : "edits";
+        return `${phase.label} · ${baseTargets.length} ${fileWord}, ${phase.count} ${actionWord}`;
+    }
+    if (phase.label === "Context reads" && baseTargets.length > 0) {
+        const fileWord = baseTargets.length === 1 ? "file" : "files";
+        return `${phase.label} · ${baseTargets.length} ${fileWord}`;
+    }
+    if (phase.label === "Setup / shell" && phaseTargets.length > 0) {
+        return `${phase.label} · ${phase.count} ${phase.count === 1 ? "command" : "commands"}`;
+    }
+    return `${phase.label} ${phase.count} ${phase.count === 1 ? "action" : "actions"}`;
+}
+function summarizePhaseTargets(phase, width) {
+    const phaseTargets = uniqueTargets(phase.targets);
+    if (phaseTargets.length === 0)
+        return undefined;
+    const shown = phaseTargets.slice(0, 3);
+    const suffix = phaseTargets.length > shown.length ? ` +${phaseTargets.length - shown.length} more` : "";
+    return truncateToWidth(shown.join(" · ") + suffix, width, "");
+}
 /**
  * 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 +257,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 +434,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 +459,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 +471,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,20 +540,132 @@ 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 statusWord = this.isPartial || !this.result ? "running" : this.result.isError ? "failed" : "success";
+        const frameStatus = `${statusWord} · ${elapsed}`;
         const parsed = parseMcpToolName(this.toolName);
         const frameLabel = parsed
-            ? `Tool ${parsed.server}·${parsed.tool}`
-            : `Tool ${prettifyToolName(this.toolName, this.toolDefinition?.label) || "unknown"}`;
-        const framed = renderToolFrame(lines, frameWidth, {
-            label: frameLabel,
-            status: frameStatus,
-            tone: frameTone,
+            ? `${parsed.server}·${parsed.tool}`
+            : prettifyToolName(this.toolName, this.toolDefinition?.label) || "unknown";
+        const recommendedTone = frameTone === "pending" ? "running" : frameTone === "error" ? "error" : "success";
+        if (this.normalizedToolName === "bash" && !this.expanded && !this.result?.isError) {
+            const command = str(this.args?.command);
+            return [
+                "",
+                ...renderCommandCard(command && command.length > 0 ? formatCommandPreview(command) : frameLabel, frameWidth, {
+                    status: frameStatus,
+                    tone: recommendedTone,
+                }),
+            ];
+        }
+        const hasImages = this.result?.content?.some((block) => block.type === "image") ?? false;
+        if (!this.expanded && !this.result?.isError && !hasImages) {
+            const compactTarget = this.getCompactTarget();
+            return [
+                "",
+                ...renderToolLineCard(frameLabel, compactTarget, frameWidth, {
+                    status: frameStatus,
+                    tone: recommendedTone,
+                    hidden: !this.isPartial && !!this.result,
+                }),
+            ];
+        }
+        const lines = super.render(contentWidth);
+        const framed = renderTranscriptCard(lines, frameWidth, {
+            title: frameLabel,
+            right: frameStatus,
+            tone: recommendedTone,
+            footerLeft: this.expanded ? "output expanded" : undefined,
+            footerRight: this.expanded ? "ctrl+o collapse" : undefined,
         });
         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();
+        const target = this.getCompactTarget();
+        return {
+            label,
+            count: 1,
+            durationMs: Math.max(0, endedAt - this.startedAt),
+            targets: target ? [target] : undefined,
+            actionLabel: this.getCompactAction(),
+        };
+    }
+    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";
+    }
+    getCompactAction() {
+        const target = this.getTargetMetadata();
+        if (target?.action)
+            return target.action === "list" ? "ls" : target.action;
+        return this.normalizedToolName;
+    }
+    getTargetMetadata() {
+        const target = this.result?.details?.target;
+        if (target && typeof target === "object")
+            return target;
+        return directDetailsTarget(this.result?.details, this.normalizedToolName);
+    }
+    getCompactTarget() {
+        const metadata = this.getTargetMetadata();
+        const metadataTarget = metadata ? formatToolTarget(metadata) : undefined;
+        if (metadataTarget)
+            return metadataTarget;
+        const path = firstStringArg(this.args ?? {}, ["file_path", "path", "notebook_path"]);
+        if (path === null)
+            return undefined;
+        if (this.normalizedToolName === "read" || this.normalizedToolName === "hashline_read") {
+            return formatArgsPathTarget(path, this.args);
+        }
+        if (this.normalizedToolName === "write" || this.normalizedToolName === "edit") {
+            return path ? shortenPath(path) : undefined;
+        }
+        if (this.normalizedToolName === "ls") {
+            return path ? shortenPath(path) : undefined;
+        }
+        if (this.normalizedToolName === "find") {
+            const pattern = str(this.args?.pattern);
+            if (pattern)
+                return path ? `${pattern} in ${shortenPath(path)}` : pattern;
+            return path ? shortenPath(path) : undefined;
+        }
+        if (this.normalizedToolName === "grep") {
+            const pattern = str(this.args?.pattern);
+            const glob = str(this.args?.glob);
+            const label = pattern ? (path ? `${pattern} in ${shortenPath(path)}` : pattern) : path ? shortenPath(path) : undefined;
+            if (!label)
+                return glob || undefined;
+            return glob ? `${label} (${glob})` : label;
+        }
+        return undefined;
+    }
     updateDisplay() {
         // Tool body now uses transparent background; status is conveyed in the frame header.
         const bgFn = (text) => text;
@@ -493,7 +713,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;
@@ -628,6 +853,10 @@ export class ToolExecutionComponent extends Container {
             // Truncation warnings
             const truncation = this.result.details?.truncation;
             const fullOutputPath = this.result.details?.fullOutputPath;
+            const cwd = this.result.details?.cwd;
+            if (this.expanded && typeof cwd === "string" && cwd.length > 0) {
+                this.contentBox.addChild(new Text(`\n${theme.fg("muted", `cwd ${shortenPath(cwd)}`)}`, 0, 0));
+            }
             if (truncation?.truncated || fullOutputPath) {
                 const warnings = [];
                 if (fullOutputPath) {
@@ -976,23 +1205,15 @@ export class ToolExecutionComponent extends Container {
         }
         else {
             // Generic tool / MCP tool without a registered renderer.
-            // MCP tool names from Claude Code arrive as `mcp__<server>__<tool>`;
-            // render the server prefix in muted style so the tool name reads
-            // cleanly. GSD-registered MCP tools have already had their prefix
-            // stripped upstream in partial-builder.ts and won't reach this branch.
-            const parsed = parseMcpToolName(this.toolName);
-            const displayName = parsed
-                ? parsed.tool
-                : prettifyToolName(this.toolName, this.toolDefinition?.label);
-            const serverPrefix = parsed ? theme.fg("muted", `${parsed.server}\u00b7`) : "";
-            text = serverPrefix + theme.fg("toolTitle", theme.bold(displayName));
+            // The frame header already contains the tool identity, so the body
+            // should show only arguments and output.
             const argsText = formatCompactArgs(this.args, this.expanded);
             if (argsText) {
                 if (argsText.includes("\n")) {
-                    text += `\n\n${theme.fg("toolOutput", argsText)}`;
+                    text = theme.fg("toolOutput", argsText);
                 }
                 else {
-                    text += " " + theme.fg("toolOutput", argsText);
+                    text = theme.fg("toolOutput", argsText);
                 }
             }
             if (this.result) {
@@ -1002,7 +1223,8 @@ export class ToolExecutionComponent extends Container {
                     const maxLines = this.expanded ? lines.length : GENERIC_OUTPUT_PREVIEW_LINES;
                     const displayLines = lines.slice(0, maxLines);
                     const remaining = lines.length - maxLines;
-                    text += `\n\n${displayLines.map((line) => theme.fg("toolOutput", line)).join("\n")}`;
+                    const outputText = displayLines.map((line) => theme.fg("toolOutput", line)).join("\n");
+                    text += `${text ? "\n\n" : ""}${outputText}`;
                     if (remaining > 0) {
                         text += `${theme.fg("muted", `\n... (${remaining} more lines,`)} ${keyHint("expandTools", "to expand")})`;
                     }
@@ -1012,4 +1234,28 @@ export class ToolExecutionComponent extends Container {
         return text;
     }
 }
+export class ToolPhaseSummaryComponent extends Container {
+    constructor(phases) {
+        super();
+        this.phases = phases;
+    }
+    getPhases() {
+        return this.phases.map((phase) => ({ ...phase, targets: phase.targets ? [...phase.targets] : undefined }));
+    }
+    render(width) {
+        const frameWidth = Math.max(20, width);
+        const rows = this.phases.flatMap((phase) => {
+            const left = summarizePhaseLabel(phase);
+            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));
+            const summaryRow = `${theme.fg("toolSuccess", leftText)}${" ".repeat(gap)}${theme.fg("toolSuccess", right)}`;
+            const targetRow = summarizePhaseTargets(phase, contentWidth);
+            return targetRow ? [summaryRow, theme.fg("muted", targetRow)] : [summaryRow];
+        });
+        return ["", ...style().border("minimal").borderColor((text) => theme.fg("toolSuccess", text)).render(rows, frameWidth)];
+    }
+}
 //# sourceMappingURL=tool-execution.js.map