🤖 Fix tool error display and WRITE DENIED collapse

src/components/tools/FileEditToolCall.tsx

@@ -102,10 +102,18 @@ 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);
   const [copied, setCopied] = 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;
 
   const handleCopyPatch = async () => {

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

@@ -673,8 +673,22 @@ export class StreamingMessageAggregator {
                 timestamp: part.timestamp ?? baseTimestamp,
               });
             } else if (isDynamicToolPart(part)) {
-              const status =
-                part.state === "output-available"
+              // Check if output contains an error
+              // Handles two formats:
+              // 1. Tool implementation errors: { success: false, error: "..." }
+              // 2. AI SDK tool-error events: { error: "..." }
+              const hasError =
+                part.state === "output-available" &&
+                part.output &&
+                typeof part.output === "object" &&
+                "error" in part.output &&
+                typeof part.output.error === "string" &&
+                part.output.error.length > 0 &&
+                (!("success" in part.output) || part.output.success === false);
+
+              const status = hasError
+                ? "failed"
+                : part.state === "output-available"
                   ? "completed"
                   : part.state === "input-available" && message.metadata?.partial
                     ? "interrupted"