feat: show advanced diffs in tool returns (#396)
Co-authored-by: Letta <noreply@letta.com>
This commit is contained in:
Charles Packer
@@ -2,6 +2,7 @@ import { Box, Text } from "ink";
|
||||
import { memo } from "react";
|
||||
import { INTERRUPTED_BY_USER } from "../../constants";
|
||||
import { clipToolReturn } from "../../tools/manager.js";
|
||||
import type { AdvancedDiffSuccess } from "../helpers/diff";
|
||||
import {
|
||||
formatArgsDisplay,
|
||||
parsePatchInput,
|
||||
@@ -18,6 +19,7 @@ import {
|
||||
isTodoTool,
|
||||
} from "../helpers/toolNameMapping.js";
|
||||
import { useTerminalWidth } from "../hooks/useTerminalWidth";
|
||||
import { AdvancedDiffRenderer } from "./AdvancedDiffRenderer";
|
||||
import { BlinkDot } from "./BlinkDot.js";
|
||||
import { colors } from "./colors.js";
|
||||
import {
|
||||
@@ -51,417 +53,509 @@ type ToolCallLine = {
|
||||
* - Blinking dots for pending/running states
|
||||
* - Result shown with ⎿ prefix underneath
|
||||
*/
|
||||
export const ToolCallMessage = memo(({ line }: { line: ToolCallLine }) => {
|
||||
const columns = useTerminalWidth();
|
||||
export const ToolCallMessage = memo(
|
||||
({
|
||||
line,
|
||||
precomputedDiffs,
|
||||
}: {
|
||||
line: ToolCallLine;
|
||||
precomputedDiffs?: Map<string, AdvancedDiffSuccess>;
|
||||
}) => {
|
||||
const columns = useTerminalWidth();
|
||||
|
||||
// Parse and format the tool call
|
||||
const rawName = line.name ?? "?";
|
||||
const argsText = line.argsText ?? "...";
|
||||
// Parse and format the tool call
|
||||
const rawName = line.name ?? "?";
|
||||
const argsText = line.argsText ?? "...";
|
||||
|
||||
// Task tool - handled by SubagentGroupDisplay, don't render here
|
||||
// Exception: Cancelled/rejected Task tools should be rendered inline
|
||||
// since they won't appear in SubagentGroupDisplay
|
||||
if (isTaskTool(rawName)) {
|
||||
const isCancelledOrRejected =
|
||||
line.phase === "finished" && line.resultOk === false;
|
||||
if (!isCancelledOrRejected) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply tool name remapping
|
||||
let displayName = getDisplayToolName(rawName);
|
||||
|
||||
// For Patch tools, override display name based on patch content
|
||||
// (Add → Write, Update → Update, Delete → Delete)
|
||||
if (isPatchTool(rawName)) {
|
||||
try {
|
||||
const parsedArgs = JSON.parse(argsText);
|
||||
if (parsedArgs.input) {
|
||||
const patchInfo = parsePatchInput(parsedArgs.input);
|
||||
if (patchInfo) {
|
||||
if (patchInfo.kind === "add") displayName = "Write";
|
||||
else if (patchInfo.kind === "update") displayName = "Update";
|
||||
else if (patchInfo.kind === "delete") displayName = "Delete";
|
||||
}
|
||||
// Task tool - handled by SubagentGroupDisplay, don't render here
|
||||
// Exception: Cancelled/rejected Task tools should be rendered inline
|
||||
// since they won't appear in SubagentGroupDisplay
|
||||
if (isTaskTool(rawName)) {
|
||||
const isCancelledOrRejected =
|
||||
line.phase === "finished" && line.resultOk === false;
|
||||
if (!isCancelledOrRejected) {
|
||||
return null;
|
||||
}
|
||||
} catch {
|
||||
// Keep default "Patch" name if parsing fails
|
||||
}
|
||||
}
|
||||
|
||||
// Format arguments for display using the old formatting logic
|
||||
// Pass rawName to enable special formatting for file tools
|
||||
const formatted = formatArgsDisplay(argsText, rawName);
|
||||
const args = `(${formatted.display})`;
|
||||
|
||||
const rightWidth = Math.max(0, columns - 2); // gutter is 2 cols
|
||||
|
||||
// If name exceeds available width, fall back to simple wrapped rendering
|
||||
const fallback = displayName.length >= rightWidth;
|
||||
|
||||
// Determine dot state based on phase
|
||||
const getDotElement = () => {
|
||||
switch (line.phase) {
|
||||
case "streaming":
|
||||
return <Text color={colors.tool.streaming}>●</Text>;
|
||||
case "ready":
|
||||
return <BlinkDot color={colors.tool.pending} />;
|
||||
case "running":
|
||||
return <BlinkDot color={colors.tool.running} />;
|
||||
case "finished":
|
||||
if (line.resultOk === false) {
|
||||
return <Text color={colors.tool.error}>●</Text>;
|
||||
}
|
||||
return <Text color={colors.tool.completed}>●</Text>;
|
||||
default:
|
||||
return <Text>●</Text>;
|
||||
}
|
||||
};
|
||||
|
||||
// Format result for display
|
||||
const getResultElement = () => {
|
||||
if (!line.resultText) return null;
|
||||
|
||||
const prefix = ` ⎿ `; // Match old format: 2 spaces, glyph, 2 spaces
|
||||
const prefixWidth = 5; // Total width of prefix
|
||||
const contentWidth = Math.max(0, columns - prefixWidth);
|
||||
|
||||
// Special cases from old ToolReturnBlock (check before truncation)
|
||||
if (line.resultText === "Running...") {
|
||||
return (
|
||||
<Box flexDirection="row">
|
||||
<Box width={prefixWidth} flexShrink={0}>
|
||||
<Text>{prefix}</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1} width={contentWidth}>
|
||||
<Text dimColor>Running...</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (line.resultText === INTERRUPTED_BY_USER) {
|
||||
return (
|
||||
<Box flexDirection="row">
|
||||
<Box width={prefixWidth} flexShrink={0}>
|
||||
<Text>{prefix}</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1} width={contentWidth}>
|
||||
<Text color={colors.status.interrupt}>{INTERRUPTED_BY_USER}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
// Apply tool name remapping
|
||||
let displayName = getDisplayToolName(rawName);
|
||||
|
||||
// Truncate the result text for display (UI only, API gets full response)
|
||||
// Strip trailing newlines to avoid extra visual spacing (e.g., from bash echo)
|
||||
const displayResultText = clipToolReturn(line.resultText).replace(
|
||||
/\n+$/,
|
||||
"",
|
||||
);
|
||||
|
||||
// Helper to check if a value is a record
|
||||
const isRecord = (v: unknown): v is Record<string, unknown> =>
|
||||
typeof v === "object" && v !== null;
|
||||
|
||||
// Check if this is a todo_write tool with successful result
|
||||
if (
|
||||
isTodoTool(rawName, displayName) &&
|
||||
line.resultOk !== false &&
|
||||
line.argsText
|
||||
) {
|
||||
// For Patch tools, override display name based on patch content
|
||||
// (Add → Write, Update → Update, Delete → Delete)
|
||||
if (isPatchTool(rawName)) {
|
||||
try {
|
||||
const parsedArgs = JSON.parse(line.argsText);
|
||||
if (parsedArgs.todos && Array.isArray(parsedArgs.todos)) {
|
||||
// Convert todos to safe format for TodoRenderer
|
||||
// Note: Anthropic/Codex use "content", Gemini uses "description"
|
||||
const safeTodos = parsedArgs.todos.map((t: unknown, i: number) => {
|
||||
const rec = isRecord(t) ? t : {};
|
||||
const status: "pending" | "in_progress" | "completed" =
|
||||
rec.status === "completed"
|
||||
? "completed"
|
||||
: rec.status === "in_progress"
|
||||
? "in_progress"
|
||||
: "pending";
|
||||
const id = typeof rec.id === "string" ? rec.id : String(i);
|
||||
// Handle both "content" (Anthropic/Codex) and "description" (Gemini) fields
|
||||
const content =
|
||||
typeof rec.content === "string"
|
||||
? rec.content
|
||||
: typeof rec.description === "string"
|
||||
? rec.description
|
||||
: JSON.stringify(t);
|
||||
const priority: "high" | "medium" | "low" | undefined =
|
||||
rec.priority === "high"
|
||||
? "high"
|
||||
: rec.priority === "medium"
|
||||
? "medium"
|
||||
: rec.priority === "low"
|
||||
? "low"
|
||||
: undefined;
|
||||
return { content, status, id, priority };
|
||||
});
|
||||
|
||||
// Return TodoRenderer directly - it has its own prefix
|
||||
return <TodoRenderer todos={safeTodos} />;
|
||||
}
|
||||
} catch {
|
||||
// If parsing fails, fall through to regular handling
|
||||
}
|
||||
}
|
||||
|
||||
// Check if this is an update_plan tool with successful result
|
||||
if (
|
||||
isPlanTool(rawName, displayName) &&
|
||||
line.resultOk !== false &&
|
||||
line.argsText
|
||||
) {
|
||||
try {
|
||||
const parsedArgs = JSON.parse(line.argsText);
|
||||
if (parsedArgs.plan && Array.isArray(parsedArgs.plan)) {
|
||||
// Convert plan items to safe format for PlanRenderer
|
||||
const safePlan = parsedArgs.plan.map((item: unknown) => {
|
||||
const rec = isRecord(item) ? item : {};
|
||||
const status: "pending" | "in_progress" | "completed" =
|
||||
rec.status === "completed"
|
||||
? "completed"
|
||||
: rec.status === "in_progress"
|
||||
? "in_progress"
|
||||
: "pending";
|
||||
const step =
|
||||
typeof rec.step === "string" ? rec.step : JSON.stringify(item);
|
||||
return { step, status };
|
||||
});
|
||||
|
||||
const explanation =
|
||||
typeof parsedArgs.explanation === "string"
|
||||
? parsedArgs.explanation
|
||||
: undefined;
|
||||
|
||||
// Return PlanRenderer directly - it has its own prefix
|
||||
return <PlanRenderer plan={safePlan} explanation={explanation} />;
|
||||
}
|
||||
} catch {
|
||||
// If parsing fails, fall through to regular handling
|
||||
}
|
||||
}
|
||||
|
||||
// Check if this is a memory tool - show diff instead of raw result
|
||||
if (isMemoryTool(rawName) && line.resultOk !== false && line.argsText) {
|
||||
const memoryDiff = (
|
||||
<MemoryDiffRenderer argsText={line.argsText} toolName={rawName} />
|
||||
);
|
||||
if (memoryDiff) {
|
||||
return memoryDiff;
|
||||
}
|
||||
// If MemoryDiffRenderer returns null, fall through to regular handling
|
||||
}
|
||||
|
||||
// Check if this is a file edit tool - show diff instead of success message
|
||||
if (isFileEditTool(rawName) && line.resultOk !== false && line.argsText) {
|
||||
try {
|
||||
const parsedArgs = JSON.parse(line.argsText);
|
||||
const filePath = parsedArgs.file_path || "";
|
||||
|
||||
// Multi-edit: has edits array
|
||||
if (parsedArgs.edits && Array.isArray(parsedArgs.edits)) {
|
||||
const edits = parsedArgs.edits.map(
|
||||
(e: { old_string?: string; new_string?: string }) => ({
|
||||
old_string: e.old_string || "",
|
||||
new_string: e.new_string || "",
|
||||
}),
|
||||
);
|
||||
return (
|
||||
<MultiEditRenderer
|
||||
filePath={filePath}
|
||||
edits={edits}
|
||||
showLineNumbers={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Single edit: has old_string/new_string
|
||||
if (parsedArgs.old_string !== undefined) {
|
||||
return (
|
||||
<EditRenderer
|
||||
filePath={filePath}
|
||||
oldString={parsedArgs.old_string || ""}
|
||||
newString={parsedArgs.new_string || ""}
|
||||
showLineNumbers={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
} catch {
|
||||
// If parsing fails, fall through to regular handling
|
||||
}
|
||||
}
|
||||
|
||||
// Check if this is a file write tool - show written content
|
||||
if (isFileWriteTool(rawName) && line.resultOk !== false && line.argsText) {
|
||||
try {
|
||||
const parsedArgs = JSON.parse(line.argsText);
|
||||
const filePath = parsedArgs.file_path || "";
|
||||
const content = parsedArgs.content || "";
|
||||
|
||||
if (filePath && content) {
|
||||
return <WriteRenderer filePath={filePath} content={content} />;
|
||||
}
|
||||
} catch {
|
||||
// If parsing fails, fall through to regular handling
|
||||
}
|
||||
}
|
||||
|
||||
// Check if this is a patch tool - show diff/content based on operation type
|
||||
if (isPatchTool(rawName) && line.resultOk !== false && line.argsText) {
|
||||
try {
|
||||
const parsedArgs = JSON.parse(line.argsText);
|
||||
const parsedArgs = JSON.parse(argsText);
|
||||
if (parsedArgs.input) {
|
||||
const operations = parsePatchOperations(parsedArgs.input);
|
||||
|
||||
if (operations.length > 0) {
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
{operations.map((op) => {
|
||||
if (op.kind === "add") {
|
||||
return (
|
||||
<WriteRenderer
|
||||
key={`patch-add-${op.path}`}
|
||||
filePath={op.path}
|
||||
content={op.content}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (op.kind === "update") {
|
||||
return (
|
||||
<EditRenderer
|
||||
key={`patch-update-${op.path}`}
|
||||
filePath={op.path}
|
||||
oldString={op.oldString}
|
||||
newString={op.newString}
|
||||
showLineNumbers={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (op.kind === "delete") {
|
||||
const gutterWidth = 4;
|
||||
return (
|
||||
<Box key={`patch-delete-${op.path}`} flexDirection="row">
|
||||
<Box width={gutterWidth} flexShrink={0}>
|
||||
<Text>
|
||||
{" "}
|
||||
<Text dimColor>⎿</Text>
|
||||
</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Text wrap="wrap">
|
||||
Deleted <Text bold>{op.path}</Text>
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
</Box>
|
||||
);
|
||||
const patchInfo = parsePatchInput(parsedArgs.input);
|
||||
if (patchInfo) {
|
||||
if (patchInfo.kind === "add") displayName = "Write";
|
||||
else if (patchInfo.kind === "update") displayName = "Update";
|
||||
else if (patchInfo.kind === "delete") displayName = "Delete";
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// If parsing fails, fall through to regular handling
|
||||
// Keep default "Patch" name if parsing fails
|
||||
}
|
||||
}
|
||||
|
||||
// Regular result handling
|
||||
const isError = line.resultOk === false;
|
||||
// Format arguments for display using the old formatting logic
|
||||
// Pass rawName to enable special formatting for file tools
|
||||
const formatted = formatArgsDisplay(argsText, rawName);
|
||||
const args = `(${formatted.display})`;
|
||||
|
||||
// Try to parse JSON for cleaner error display
|
||||
let displayText = displayResultText;
|
||||
try {
|
||||
const parsed = JSON.parse(displayResultText);
|
||||
if (parsed.error && typeof parsed.error === "string") {
|
||||
displayText = parsed.error;
|
||||
const rightWidth = Math.max(0, columns - 2); // gutter is 2 cols
|
||||
|
||||
// If name exceeds available width, fall back to simple wrapped rendering
|
||||
const fallback = displayName.length >= rightWidth;
|
||||
|
||||
// Determine dot state based on phase
|
||||
const getDotElement = () => {
|
||||
switch (line.phase) {
|
||||
case "streaming":
|
||||
return <Text color={colors.tool.streaming}>●</Text>;
|
||||
case "ready":
|
||||
return <BlinkDot color={colors.tool.pending} />;
|
||||
case "running":
|
||||
return <BlinkDot color={colors.tool.running} />;
|
||||
case "finished":
|
||||
if (line.resultOk === false) {
|
||||
return <Text color={colors.tool.error}>●</Text>;
|
||||
}
|
||||
return <Text color={colors.tool.completed}>●</Text>;
|
||||
default:
|
||||
return <Text>●</Text>;
|
||||
}
|
||||
} catch {
|
||||
// Not JSON, use raw text
|
||||
}
|
||||
};
|
||||
|
||||
// Format tool denial errors more user-friendly
|
||||
if (isError && displayText.includes("request to call tool denied")) {
|
||||
// Use [\s\S]+ to match multiline reasons
|
||||
const match = displayText.match(/User reason: ([\s\S]+)$/);
|
||||
const reason = match?.[1]?.trim() || "(empty)";
|
||||
displayText = `User rejected the tool call with reason: ${reason}`;
|
||||
}
|
||||
// Format result for display
|
||||
const getResultElement = () => {
|
||||
if (!line.resultText) return null;
|
||||
|
||||
const prefix = ` ⎿ `; // Match old format: 2 spaces, glyph, 2 spaces
|
||||
const prefixWidth = 5; // Total width of prefix
|
||||
const contentWidth = Math.max(0, columns - prefixWidth);
|
||||
|
||||
// Special cases from old ToolReturnBlock (check before truncation)
|
||||
if (line.resultText === "Running...") {
|
||||
return (
|
||||
<Box flexDirection="row">
|
||||
<Box width={prefixWidth} flexShrink={0}>
|
||||
<Text>{prefix}</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1} width={contentWidth}>
|
||||
<Text dimColor>Running...</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (line.resultText === INTERRUPTED_BY_USER) {
|
||||
return (
|
||||
<Box flexDirection="row">
|
||||
<Box width={prefixWidth} flexShrink={0}>
|
||||
<Text>{prefix}</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1} width={contentWidth}>
|
||||
<Text color={colors.status.interrupt}>{INTERRUPTED_BY_USER}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Truncate the result text for display (UI only, API gets full response)
|
||||
// Strip trailing newlines to avoid extra visual spacing (e.g., from bash echo)
|
||||
const displayResultText = clipToolReturn(line.resultText).replace(
|
||||
/\n+$/,
|
||||
"",
|
||||
);
|
||||
|
||||
// Helper to check if a value is a record
|
||||
const isRecord = (v: unknown): v is Record<string, unknown> =>
|
||||
typeof v === "object" && v !== null;
|
||||
|
||||
// Check if this is a todo_write tool with successful result
|
||||
if (
|
||||
isTodoTool(rawName, displayName) &&
|
||||
line.resultOk !== false &&
|
||||
line.argsText
|
||||
) {
|
||||
try {
|
||||
const parsedArgs = JSON.parse(line.argsText);
|
||||
if (parsedArgs.todos && Array.isArray(parsedArgs.todos)) {
|
||||
// Convert todos to safe format for TodoRenderer
|
||||
// Note: Anthropic/Codex use "content", Gemini uses "description"
|
||||
const safeTodos = parsedArgs.todos.map((t: unknown, i: number) => {
|
||||
const rec = isRecord(t) ? t : {};
|
||||
const status: "pending" | "in_progress" | "completed" =
|
||||
rec.status === "completed"
|
||||
? "completed"
|
||||
: rec.status === "in_progress"
|
||||
? "in_progress"
|
||||
: "pending";
|
||||
const id = typeof rec.id === "string" ? rec.id : String(i);
|
||||
// Handle both "content" (Anthropic/Codex) and "description" (Gemini) fields
|
||||
const content =
|
||||
typeof rec.content === "string"
|
||||
? rec.content
|
||||
: typeof rec.description === "string"
|
||||
? rec.description
|
||||
: JSON.stringify(t);
|
||||
const priority: "high" | "medium" | "low" | undefined =
|
||||
rec.priority === "high"
|
||||
? "high"
|
||||
: rec.priority === "medium"
|
||||
? "medium"
|
||||
: rec.priority === "low"
|
||||
? "low"
|
||||
: undefined;
|
||||
return { content, status, id, priority };
|
||||
});
|
||||
|
||||
// Return TodoRenderer directly - it has its own prefix
|
||||
return <TodoRenderer todos={safeTodos} />;
|
||||
}
|
||||
} catch {
|
||||
// If parsing fails, fall through to regular handling
|
||||
}
|
||||
}
|
||||
|
||||
// Check if this is an update_plan tool with successful result
|
||||
if (
|
||||
isPlanTool(rawName, displayName) &&
|
||||
line.resultOk !== false &&
|
||||
line.argsText
|
||||
) {
|
||||
try {
|
||||
const parsedArgs = JSON.parse(line.argsText);
|
||||
if (parsedArgs.plan && Array.isArray(parsedArgs.plan)) {
|
||||
// Convert plan items to safe format for PlanRenderer
|
||||
const safePlan = parsedArgs.plan.map((item: unknown) => {
|
||||
const rec = isRecord(item) ? item : {};
|
||||
const status: "pending" | "in_progress" | "completed" =
|
||||
rec.status === "completed"
|
||||
? "completed"
|
||||
: rec.status === "in_progress"
|
||||
? "in_progress"
|
||||
: "pending";
|
||||
const step =
|
||||
typeof rec.step === "string" ? rec.step : JSON.stringify(item);
|
||||
return { step, status };
|
||||
});
|
||||
|
||||
const explanation =
|
||||
typeof parsedArgs.explanation === "string"
|
||||
? parsedArgs.explanation
|
||||
: undefined;
|
||||
|
||||
// Return PlanRenderer directly - it has its own prefix
|
||||
return <PlanRenderer plan={safePlan} explanation={explanation} />;
|
||||
}
|
||||
} catch {
|
||||
// If parsing fails, fall through to regular handling
|
||||
}
|
||||
}
|
||||
|
||||
// Check if this is a memory tool - show diff instead of raw result
|
||||
if (isMemoryTool(rawName) && line.resultOk !== false && line.argsText) {
|
||||
const memoryDiff = (
|
||||
<MemoryDiffRenderer argsText={line.argsText} toolName={rawName} />
|
||||
);
|
||||
if (memoryDiff) {
|
||||
return memoryDiff;
|
||||
}
|
||||
// If MemoryDiffRenderer returns null, fall through to regular handling
|
||||
}
|
||||
|
||||
// Check if this is a file edit tool - show diff instead of success message
|
||||
if (isFileEditTool(rawName) && line.resultOk !== false && line.argsText) {
|
||||
const diff = line.toolCallId
|
||||
? precomputedDiffs?.get(line.toolCallId)
|
||||
: undefined;
|
||||
|
||||
try {
|
||||
const parsedArgs = JSON.parse(line.argsText);
|
||||
const filePath = parsedArgs.file_path || "";
|
||||
|
||||
// Use AdvancedDiffRenderer if we have a precomputed diff
|
||||
if (diff) {
|
||||
// Multi-edit: has edits array
|
||||
if (parsedArgs.edits && Array.isArray(parsedArgs.edits)) {
|
||||
const edits = parsedArgs.edits.map(
|
||||
(e: {
|
||||
old_string?: string;
|
||||
new_string?: string;
|
||||
replace_all?: boolean;
|
||||
}) => ({
|
||||
old_string: e.old_string || "",
|
||||
new_string: e.new_string || "",
|
||||
replace_all: e.replace_all,
|
||||
}),
|
||||
);
|
||||
return (
|
||||
<AdvancedDiffRenderer
|
||||
precomputed={diff}
|
||||
kind="multi_edit"
|
||||
filePath={filePath}
|
||||
edits={edits}
|
||||
/>
|
||||
);
|
||||
}
|
||||
// Single edit
|
||||
return (
|
||||
<AdvancedDiffRenderer
|
||||
precomputed={diff}
|
||||
kind="edit"
|
||||
filePath={filePath}
|
||||
oldString={parsedArgs.old_string || ""}
|
||||
newString={parsedArgs.new_string || ""}
|
||||
replaceAll={parsedArgs.replace_all}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Fallback to simple renderers when no precomputed diff
|
||||
// Multi-edit: has edits array
|
||||
if (parsedArgs.edits && Array.isArray(parsedArgs.edits)) {
|
||||
const edits = parsedArgs.edits.map(
|
||||
(e: { old_string?: string; new_string?: string }) => ({
|
||||
old_string: e.old_string || "",
|
||||
new_string: e.new_string || "",
|
||||
}),
|
||||
);
|
||||
return (
|
||||
<MultiEditRenderer
|
||||
filePath={filePath}
|
||||
edits={edits}
|
||||
showLineNumbers={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Single edit: has old_string/new_string
|
||||
if (parsedArgs.old_string !== undefined) {
|
||||
return (
|
||||
<EditRenderer
|
||||
filePath={filePath}
|
||||
oldString={parsedArgs.old_string || ""}
|
||||
newString={parsedArgs.new_string || ""}
|
||||
showLineNumbers={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
} catch {
|
||||
// If parsing fails, fall through to regular handling
|
||||
}
|
||||
}
|
||||
|
||||
// Check if this is a file write tool - show written content
|
||||
if (
|
||||
isFileWriteTool(rawName) &&
|
||||
line.resultOk !== false &&
|
||||
line.argsText
|
||||
) {
|
||||
const diff = line.toolCallId
|
||||
? precomputedDiffs?.get(line.toolCallId)
|
||||
: undefined;
|
||||
|
||||
try {
|
||||
const parsedArgs = JSON.parse(line.argsText);
|
||||
const filePath = parsedArgs.file_path || "";
|
||||
const content = parsedArgs.content || "";
|
||||
|
||||
if (filePath && content) {
|
||||
if (diff) {
|
||||
return (
|
||||
<AdvancedDiffRenderer
|
||||
precomputed={diff}
|
||||
kind="write"
|
||||
filePath={filePath}
|
||||
content={content}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return <WriteRenderer filePath={filePath} content={content} />;
|
||||
}
|
||||
} catch {
|
||||
// If parsing fails, fall through to regular handling
|
||||
}
|
||||
}
|
||||
|
||||
// Check if this is a patch tool - show diff/content based on operation type
|
||||
if (isPatchTool(rawName) && line.resultOk !== false && line.argsText) {
|
||||
try {
|
||||
const parsedArgs = JSON.parse(line.argsText);
|
||||
if (parsedArgs.input) {
|
||||
const operations = parsePatchOperations(parsedArgs.input);
|
||||
|
||||
if (operations.length > 0) {
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
{operations.map((op) => {
|
||||
// Look up precomputed diff using compound key
|
||||
const key = `${line.toolCallId}:${op.path}`;
|
||||
const diff = precomputedDiffs?.get(key);
|
||||
|
||||
if (op.kind === "add") {
|
||||
return diff ? (
|
||||
<AdvancedDiffRenderer
|
||||
key={`patch-add-${op.path}`}
|
||||
precomputed={diff}
|
||||
kind="write"
|
||||
filePath={op.path}
|
||||
content={op.content}
|
||||
/>
|
||||
) : (
|
||||
<WriteRenderer
|
||||
key={`patch-add-${op.path}`}
|
||||
filePath={op.path}
|
||||
content={op.content}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (op.kind === "update") {
|
||||
return diff ? (
|
||||
<AdvancedDiffRenderer
|
||||
key={`patch-update-${op.path}`}
|
||||
precomputed={diff}
|
||||
kind="edit"
|
||||
filePath={op.path}
|
||||
oldString={op.oldString}
|
||||
newString={op.newString}
|
||||
/>
|
||||
) : (
|
||||
<EditRenderer
|
||||
key={`patch-update-${op.path}`}
|
||||
filePath={op.path}
|
||||
oldString={op.oldString}
|
||||
newString={op.newString}
|
||||
showLineNumbers={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (op.kind === "delete") {
|
||||
const gutterWidth = 4;
|
||||
return (
|
||||
<Box
|
||||
key={`patch-delete-${op.path}`}
|
||||
flexDirection="row"
|
||||
>
|
||||
<Box width={gutterWidth} flexShrink={0}>
|
||||
<Text>
|
||||
{" "}
|
||||
<Text dimColor>⎿</Text>
|
||||
</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Text wrap="wrap">
|
||||
Deleted <Text bold>{op.path}</Text>
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// If parsing fails, fall through to regular handling
|
||||
}
|
||||
}
|
||||
|
||||
// Regular result handling
|
||||
const isError = line.resultOk === false;
|
||||
|
||||
// Try to parse JSON for cleaner error display
|
||||
let displayText = displayResultText;
|
||||
try {
|
||||
const parsed = JSON.parse(displayResultText);
|
||||
if (parsed.error && typeof parsed.error === "string") {
|
||||
displayText = parsed.error;
|
||||
}
|
||||
} catch {
|
||||
// Not JSON, use raw text
|
||||
}
|
||||
|
||||
// Format tool denial errors more user-friendly
|
||||
if (isError && displayText.includes("request to call tool denied")) {
|
||||
// Use [\s\S]+ to match multiline reasons
|
||||
const match = displayText.match(/User reason: ([\s\S]+)$/);
|
||||
const reason = match?.[1]?.trim() || "(empty)";
|
||||
displayText = `User rejected the tool call with reason: ${reason}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box flexDirection="row">
|
||||
<Box width={prefixWidth} flexShrink={0}>
|
||||
<Text>{prefix}</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1} width={contentWidth}>
|
||||
{isError ? (
|
||||
<Text color={colors.status.error}>{displayText}</Text>
|
||||
) : (
|
||||
<MarkdownDisplay text={displayText} />
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box flexDirection="row">
|
||||
<Box width={prefixWidth} flexShrink={0}>
|
||||
<Text>{prefix}</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1} width={contentWidth}>
|
||||
{isError ? (
|
||||
<Text color={colors.status.error}>{displayText}</Text>
|
||||
) : (
|
||||
<MarkdownDisplay text={displayText} />
|
||||
)}
|
||||
<Box flexDirection="column">
|
||||
{/* Tool call with exact wrapping logic from old codebase */}
|
||||
<Box flexDirection="row">
|
||||
<Box width={2} flexShrink={0}>
|
||||
{getDotElement()}
|
||||
<Text></Text>
|
||||
</Box>
|
||||
<Box flexGrow={1} width={rightWidth}>
|
||||
{fallback ? (
|
||||
<Text wrap="wrap">
|
||||
{isMemoryTool(rawName) ? (
|
||||
<>
|
||||
<Text bold color={colors.tool.memoryName}>
|
||||
{displayName}
|
||||
</Text>
|
||||
{args}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Text bold>{displayName}</Text>
|
||||
{args}
|
||||
</>
|
||||
)}
|
||||
</Text>
|
||||
) : (
|
||||
<Box flexDirection="row">
|
||||
<Text
|
||||
bold
|
||||
color={
|
||||
isMemoryTool(rawName) ? colors.tool.memoryName : undefined
|
||||
}
|
||||
>
|
||||
{displayName}
|
||||
</Text>
|
||||
{args ? (
|
||||
<Box
|
||||
flexGrow={1}
|
||||
width={Math.max(0, rightWidth - displayName.length)}
|
||||
>
|
||||
<Text wrap="wrap">{args}</Text>
|
||||
</Box>
|
||||
) : null}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Tool result (if present) */}
|
||||
{getResultElement()}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
{/* Tool call with exact wrapping logic from old codebase */}
|
||||
<Box flexDirection="row">
|
||||
<Box width={2} flexShrink={0}>
|
||||
{getDotElement()}
|
||||
<Text></Text>
|
||||
</Box>
|
||||
<Box flexGrow={1} width={rightWidth}>
|
||||
{fallback ? (
|
||||
<Text wrap="wrap">
|
||||
{isMemoryTool(rawName) ? (
|
||||
<>
|
||||
<Text bold color={colors.tool.memoryName}>
|
||||
{displayName}
|
||||
</Text>
|
||||
{args}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Text bold>{displayName}</Text>
|
||||
{args}
|
||||
</>
|
||||
)}
|
||||
</Text>
|
||||
) : (
|
||||
<Box flexDirection="row">
|
||||
<Text
|
||||
bold
|
||||
color={
|
||||
isMemoryTool(rawName) ? colors.tool.memoryName : undefined
|
||||
}
|
||||
>
|
||||
{displayName}
|
||||
</Text>
|
||||
{args ? (
|
||||
<Box
|
||||
flexGrow={1}
|
||||
width={Math.max(0, rightWidth - displayName.length)}
|
||||
>
|
||||
<Text wrap="wrap">{args}</Text>
|
||||
</Box>
|
||||
) : null}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Tool result (if present) */}
|
||||
{getResultElement()}
|
||||
</Box>
|
||||
);
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
ToolCallMessage.displayName = "ToolCallMessage";
|
||||
|
||||
Reference in New Issue
Block a user