From 19cb2e42bca9e98fcab7527880825a27afa43371 Mon Sep 17 00:00:00 2001
From: gongzhiyong <gongzhiyong@gongzhiyongdeMacBook-Air.local>
Date: Sat, 11 Apr 2026 22:34:59 +0800
Subject: [PATCH] fix(ui): fix ToolCallStatus duplicate label + add fade-in to
 standalone cards

- Fix ToolCallStatus label duplication: label span was shown twice when
  failed/done; consolidate into a single span with correct copy
- Add animate-in fade-in duration-300 wrapper to standalone Gen-UI cards
  and streaming orphan cards in main.tsx (already present in ToolCallStatus
  expanded view)

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 langgraph/src/components/ToolCallStatus.tsx |  3 +-
 langgraph/src/main.tsx                      | 34 +++++++++++----------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/langgraph/src/components/ToolCallStatus.tsx b/langgraph/src/components/ToolCallStatus.tsx
index 0653068..49c634c 100644
--- a/langgraph/src/components/ToolCallStatus.tsx
+++ b/langgraph/src/components/ToolCallStatus.tsx
@@ -101,8 +101,7 @@ function ToolCallRow({
         ) : (
           <Loader2 className="size-3.5 animate-spin shrink-0" />
         )}
-        <span>{label}</span>
-        <span>{isFailed ? `失败 · ${label}` : isDone ? (canExpand ? (expanded ? "收起" : "查看结果") : `已完成 · ${label}`) : (tc.name ? (TOOL_LOADING_MAP[tc.name] ?? `正在${label}...`) : "思考中...")}</span>
+        <span>{isFailed ? `${label} · 失败` : isDone ? (canExpand ? `${label} · ${expanded ? "收起" : "查看结果"}` : `${label} · 已完成`) : (tc.name ? (TOOL_LOADING_MAP[tc.name] ?? `正在${label}...`) : "思考中...")}</span>
       </button>
       {expanded && uiItem && stream && components && (
         <div className="mt-2 ml-7">
diff --git a/langgraph/src/main.tsx b/langgraph/src/main.tsx
index d4eaa95..1db36d8 100644
--- a/langgraph/src/main.tsx
+++ b/langgraph/src/main.tsx
@@ -538,14 +538,15 @@ function App() {
                       return tc.name && ui.name === nameMap[tc.name];
                     }))
                     .map((ui: UIMsgLocal) => (
-                      <LoadExternalComponent
-                        key={ui.id}
-                        stream={thread}
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        message={ui as any}
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        components={ComponentMap as any}
-                      />
+                      <div key={ui.id} className="animate-in fade-in duration-300">
+                        <LoadExternalComponent
+                          stream={thread}
+                          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                          message={ui as any}
+                          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                          components={ComponentMap as any}
+                        />
+                      </div>
                     ))}
 
                   {/* Text reply */}
@@ -593,14 +594,15 @@ function App() {
               })
             )
               .map((ui: UIMsgLocal) => (
-                <LoadExternalComponent
-                  key={ui.id}
-                  stream={thread}
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  message={ui as any}
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  components={ComponentMap as any}
-                />
+                <div key={ui.id} className="animate-in fade-in duration-300">
+                  <LoadExternalComponent
+                    stream={thread}
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    message={ui as any}
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    components={ComponentMap as any}
+                  />
+                </div>
               ))}
 
           <div ref={bottomRef} />