gsd-pi 2.80.0-dev.fbe7c8c6f → 2.81.0-dev.3cddbbba2

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

@@ -1,4 +1,5 @@
-// GSD-2 Interactive Tool Execution Rendering
+// 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";
@@ -10,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;
@@ -68,53 +70,6 @@ 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" ? "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}`;
-    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 clipped;
-    });
-    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;
@@ -123,6 +78,133 @@ function formatElapsed(ms) {
         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
@@ -460,19 +542,42 @@ export class ToolExecutionComponent extends Container {
         const contentWidth = Math.max(1, frameWidth - 4);
         const frameTone = this.result?.isError ? "error" : this.isPartial || !this.result ? "pending" : "success";
         const elapsed = formatElapsed((this.endedAt ?? Date.now()) - this.startedAt);
-        const frameStatus = `${this.isPartial || !this.result ? "running" : this.result.isError ? "failed" : "success"} · ${elapsed}`;
+        const statusWord = this.isPartial || !this.result ? "running" : this.result.isError ? "failed" : "success";
+        const frameStatus = `${statusWord} · ${elapsed}`;
         const parsed = parseMcpToolName(this.toolName);
         const frameLabel = parsed
             ? `${parsed.server}·${parsed.tool}`
             : prettifyToolName(this.toolName, this.toolDefinition?.label) || "unknown";
-        if (this.shouldRenderCompactSuccess()) {
-            return ["", ...renderCollapsedToolRow(this.getCompactSummary(frameLabel), frameStatus, frameWidth, "success")];
+        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 = renderToolFrame(lines, frameWidth, {
-            label: frameLabel,
-            status: frameStatus,
-            tone: frameTone,
+        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;
     }
@@ -487,10 +592,13 @@ export class ToolExecutionComponent extends Container {
             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() {
@@ -513,8 +621,50 @@ export class ToolExecutionComponent extends Container {
             return "Finalization";
         return "Other tool actions";
     }
-    getCompactSummary(frameLabel) {
-        return frameLabel;
+    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.
@@ -703,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) {
@@ -1051,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) {
@@ -1077,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")})`;
                     }
@@ -1092,16 +1239,21 @@ export class ToolPhaseSummaryComponent extends Container {
         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.map((phase) => {
-            const left = `${phase.label} ${phase.count} ${phase.count === 1 ? "action" : "actions"}`;
+        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));
-            return `${theme.fg("toolSuccess", leftText)}${" ".repeat(gap)}${theme.fg("toolSuccess", 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)];
     }