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

@@ -451,11 +451,24 @@ export function ChatMessageDisplay({
                                 Complete
                             </span>
                         )}
-                        {state === "output-error" && (
+                        {state === "output-error" &&
-                            <span className="text-xs font-medium text-red-600 bg-red-50 px-2 py-0.5 rounded-full">
+                            (() => {
-                                Error
+                                // Check if this is a truncation (incomplete XML) vs real error
-                            </span>
+                                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" && (
+                {output &&
-                    <div className="px-4 py-3 border-t border-border/40 text-sm text-red-600">
+                    state === "output-error" &&
-                        {output}
+                    (() => {
-                    </div>
+                        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>
         )
     }

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."