From 43139a5ef0b7ebd225e7983352c4d3012dbb966d Mon Sep 17 00:00:00 2001
From: "dayuan.jiang" <jdy.toh@gmail.com>
Date: Sun, 14 Dec 2025 10:47:18 +0900
Subject: [PATCH] fix: show friendly message and yellow badge for truncated
 output

- Add yellow 'Truncated' badge in UI instead of red 'Error' when XML is incomplete
- Show friendly error message for toolUse.input is invalid errors
- Built on top of append_diagram continuation feature
---
 components/chat-message-display.tsx | 45 ++++++++++++++++++++++-------
 components/chat-panel.tsx           |  6 ++++
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/components/chat-message-display.tsx b/components/chat-message-display.tsx
index 1429c31..81c80e7 100644
--- a/components/chat-message-display.tsx
+++ b/components/chat-message-display.tsx
@@ -451,11 +451,24 @@ export function ChatMessageDisplay({
                                 Complete
                             </span>
                         )}
-                        {state === "output-error" && (
-                            <span className="text-xs font-medium text-red-600 bg-red-50 px-2 py-0.5 rounded-full">
-                                Error
-                            </span>
-                        )}
+                        {state === "output-error" &&
+                            (() => {
+                                // Check if this is a truncation (incomplete XML) vs real error
+                                const isTruncated =
+                                    (toolName === "display_diagram" ||
+                                        toolName === "append_diagram") &&
+                                    (!input?.xml ||
+                                        !input.xml.includes("</root>"))
+                                return isTruncated ? (
+                                    <span className="text-xs font-medium text-yellow-600 bg-yellow-50 px-2 py-0.5 rounded-full">
+                                        Truncated
+                                    </span>
+                                ) : (
+                                    <span className="text-xs font-medium text-red-600 bg-red-50 px-2 py-0.5 rounded-full">
+                                        Error
+                                    </span>
+                                )
+                            })()}
                         {input && Object.keys(input).length > 0 && (
                             <button
                                 type="button"
@@ -488,11 +501,23 @@ export function ChatMessageDisplay({
                         ) : null}
                     </div>
                 )}
-                {output && state === "output-error" && (
-                    <div className="px-4 py-3 border-t border-border/40 text-sm text-red-600">
-                        {output}
-                    </div>
-                )}
+                {output &&
+                    state === "output-error" &&
+                    (() => {
+                        const isTruncated =
+                            (toolName === "display_diagram" ||
+                                toolName === "append_diagram") &&
+                            (!input?.xml || !input.xml.includes("</root>"))
+                        return (
+                            <div
+                                className={`px-4 py-3 border-t border-border/40 text-sm ${isTruncated ? "text-yellow-600" : "text-red-600"}`}
+                            >
+                                {isTruncated
+                                    ? "Output truncated due to length limits. Try a simpler request or increase the maxOutputLength."
+                                    : output}
+                            </div>
+                        )
+                    })()}
             </div>
         )
     }
diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
index 20eddee..f93450d 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -566,6 +566,12 @@ Continue from EXACTLY where you stopped.`,
                 friendlyMessage = "Network error. Please check your connection."
             }
 
+            // Truncated tool input error (model output limit too low)
+            if (friendlyMessage.includes("toolUse.input is invalid")) {
+                friendlyMessage =
+                    "Output was truncated before the diagram could be generated. Try a simpler request or increase the maxOutputLength."
+            }
+
             // Translate image not supported error
             if (friendlyMessage.includes("image content block")) {
                 friendlyMessage = "This model doesn't support image input."