From 019d7816a732c21ff7b9b10b7fd0e5d608967d7d Mon Sep 17 00:00:00 2001
From: chengyongru <61816729+chengyongru@users.noreply.github.com>
Date: Tue, 28 Jul 2026 19:13:16 +0800
Subject: [PATCH] fix(webui): animate reasoning drawer transitions (#5143)

---
 .../activity/ThinkingReasoningShell.tsx       | 21 ++++++++++------
 .../src/tests/agent-activity-cluster.test.tsx | 25 +++++++++++++++++++
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/webui/src/components/thread/activity/ThinkingReasoningShell.tsx b/webui/src/components/thread/activity/ThinkingReasoningShell.tsx
index 977859053..2efcd9a85 100644
--- a/webui/src/components/thread/activity/ThinkingReasoningShell.tsx
+++ b/webui/src/components/thread/activity/ThinkingReasoningShell.tsx
@@ -45,20 +45,27 @@ export function ThinkingReasoningShell({
         >
           {label}
         </span>
-        <ChevronDown
+        <span
           className={cn(
-            "h-3 w-3 shrink-0 text-muted-foreground/60 transition-[transform,color] duration-200",
-            "group-hover:text-muted-foreground motion-reduce:transition-none",
+            "inline-flex shrink-0 transition-transform [transition-duration:600ms] ease-out",
+            "motion-reduce:[transition-duration:220ms]",
             expanded && "rotate-180",
           )}
-          strokeWidth={1.8}
-          aria-hidden
-        />
+        >
+          <ChevronDown
+            className={cn(
+              "h-3 w-3 text-muted-foreground/60 transition-colors duration-200",
+              "group-hover:text-muted-foreground motion-reduce:transition-none",
+            )}
+            strokeWidth={1.8}
+            aria-hidden
+          />
+        </span>
       </button>
 
       <div
         className={cn(
-          "grid transition-[grid-template-rows,opacity] duration-300 motion-reduce:transition-none",
+          "grid transition-[grid-template-rows,opacity] [transition-duration:600ms] ease-out motion-reduce:[transition-duration:220ms]",
           expanded
             ? "grid-rows-[1fr] opacity-100"
             : "pointer-events-none grid-rows-[0fr] opacity-0",
diff --git a/webui/src/tests/agent-activity-cluster.test.tsx b/webui/src/tests/agent-activity-cluster.test.tsx
index 2ad1117db..820677cc8 100644
--- a/webui/src/tests/agent-activity-cluster.test.tsx
+++ b/webui/src/tests/agent-activity-cluster.test.tsx
@@ -350,6 +350,31 @@ describe("AgentActivityCluster", () => {
     }
   });
 
+  it("keeps chevron color feedback faster than the drawer rotation", () => {
+    render(
+      <AgentActivityCluster
+        messages={[{
+          id: "r-motion",
+          role: "assistant",
+          content: "",
+          reasoning: "checking motion",
+          createdAt: 1,
+        }]}
+        isTurnStreaming={false}
+        hasBodyBelow
+      />,
+    );
+
+    const button = screen.getByRole("button", { name: "Thought" });
+    const chevron = button.querySelector("svg");
+    expect(chevron).toBeInTheDocument();
+    expect(chevron).toHaveClass("transition-colors", "duration-200");
+    expect(chevron?.parentElement).toHaveClass(
+      "transition-transform",
+      "[transition-duration:600ms]",
+    );
+  });
+
   it("uses persisted turn latency for completed history instead of replay timestamps", () => {
     render(
       <AgentActivityCluster