From 4cb7555c49ce5683e08c3f751a4107addc932c48 Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Thu, 4 Dec 2025 14:59:34 +1000
Subject: [PATCH] feat: display tool execution errors in chat UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add error message rendering to MessageBubble component so users can see
detailed error messages when tools fail (e.g., missing API keys).

Previously only showed "output-error" badge without the actual error text.
Now displays the error message in a red-tinted box below the tool call.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../playground/src/components/chat/MessageBubble.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/apps/playground/src/components/chat/MessageBubble.tsx b/apps/playground/src/components/chat/MessageBubble.tsx
index 8e85993..3fdf0f9 100644
--- a/apps/playground/src/components/chat/MessageBubble.tsx
+++ b/apps/playground/src/components/chat/MessageBubble.tsx
@@ -92,6 +92,18 @@ export function MessageBubble({
                           </pre>
                         </div>
                       )}
+
+                      {/* Tool Error */}
+                      {toolPart.error && (
+                        <div>
+                          <div className="mb-1 text-xs font-semibold text-red-500">Error:</div>
+                          <pre className="overflow-x-auto rounded bg-red-500/10 p-2 text-xs text-red-400">
+                            {typeof toolPart.error === 'string'
+                              ? toolPart.error
+                              : JSON.stringify(toolPart.error, null, 2)}
+                          </pre>
+                        </div>
+                      )}
                     </div>
                   );
                 }