🤖 Fix tool error display and WRITE DENIED collapse

Two fixes:

1. Tool error display: GenericToolCall now properly detects and displays
   tool errors in both formats ({ error: '...' } from AI SDK and
   { success: false, error: '...' } from tool implementations). Status
   is correctly shown as 'failed' instead of 'completed' for errors.

2. WRITE DENIED collapse: FileEditToolCall now uses useEffect to collapse
   when WRITE DENIED result arrives, fixing issue where initial render
   (before result available) would expand the tool call.

Both formats are now consistently handled across all tool types.

Author: ammar-agent

src/components/tools/FileEditToolCall.tsx

@@ -103,9 +103,17 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
   const isWriteDenied = result && !result.success && result.error?.startsWith(WRITE_DENIED_PREFIX);
   const initialExpanded = !isWriteDenied;
 
-  const { expanded, toggleExpanded } = useToolExpansion(initialExpanded);
+  const { expanded, setExpanded, toggleExpanded } = useToolExpansion(initialExpanded);
   const [showRaw, setShowRaw] = React.useState(false);
 
+  // Update expanded state when result changes from undefined to WRITE DENIED
+  // This handles the case where the component renders before the result is available
+  React.useEffect(() => {
+    if (result && !result.success && result.error?.startsWith(WRITE_DENIED_PREFIX)) {
+      setExpanded(false);
+    }
+  }, [result, setExpanded]);
+
   const filePath = "file_path" in args ? args.file_path : undefined;
 
   // Copy to clipboard with feedback

src/components/tools/GenericToolCall.tsx

@@ -33,6 +33,18 @@ export const GenericToolCall: React.FC<GenericToolCallProps> = ({
 }) => {
   const { expanded, toggleExpanded } = useToolExpansion();
 
+  // Check if result contains an error
+  // Handles two formats:
+  // 1. Tool implementation errors: { success: false, error: "..." }
+  // 2. AI SDK tool-error events: { error: "..." }
+  const hasError =
+    result &&
+    typeof result === "object" &&
+    "error" in result &&
+    typeof result.error === "string" &&
+    result.error.length > 0 &&
+    (!("success" in result) || result.success === false);
+
   const hasDetails = args !== undefined || result !== undefined;
 
   return (
@@ -52,7 +64,16 @@ export const GenericToolCall: React.FC<GenericToolCallProps> = ({
             </DetailSection>
           )}
 
-          {result !== undefined && (
+          {hasError ? (
+            <DetailSection>
+              <DetailLabel>Error</DetailLabel>
+              <div className="text-danger bg-danger-overlay border-danger rounded border-l-2 px-2 py-1.5 text-[11px]">
+                {String((result as { error: string }).error)}
+              </div>
+            </DetailSection>
+          ) : null}
+
+          {result !== undefined && !hasError && (
             <DetailSection>
               <DetailLabel>Result</DetailLabel>
               <DetailContent>{formatValue(result)}</DetailContent>

src/utils/messages/StreamingMessageAggregator.ts

@@ -805,9 +805,11 @@ export class StreamingMessageAggregator {
               });
             } else if (isDynamicToolPart(part)) {
               // Determine status based on part state and result
+              // hasFailureResult now checks both error formats:
+              // 1. Tool implementation errors: { success: false, error: "..." }
+              // 2. AI SDK tool-error events: { error: "..." }
               let status: "pending" | "executing" | "completed" | "failed" | "interrupted";
               if (part.state === "output-available") {
-                // Check if result indicates failure (for tools that return { success: boolean })
                 status = hasFailureResult(part.output) ? "failed" : "completed";
               } else if (part.state === "input-available" && message.metadata?.partial) {
                 status = "interrupted";