fix(webui): animate reasoning drawer transitions (#5143)

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",
+            "inline-flex shrink-0 transition-transform [transition-duration:600ms] ease-out",
-            "group-hover:text-muted-foreground motion-reduce:transition-none",
+            "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",

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