From 321c565ec490573550cfbc4bef2a66a20df28778 Mon Sep 17 00:00:00 2001
From: Xubin Ren <xubinrencs@gmail.com>
Date: Wed, 13 May 2026 08:12:44 +0000
Subject: [PATCH] fix(webui): normalize thinking trace row box model

Thinking and Used tools are both auxiliary rows, but Thinking still carried
an internal mb-2 even when it was standalone. That made collapsed Thinking
rows visually taller than tool trace rows despite the shared thread spacing.

Only add the extra bottom margin when a Thinking bubble has answer content
below it in the same assistant message. Standalone Thinking rows now share
the same outer box model as Used tools. Tests lock both standalone and
answer-backed cases.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 webui/src/components/MessageBubble.tsx  | 12 +++++++++---
 webui/src/tests/message-bubble.test.tsx |  2 ++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/webui/src/components/MessageBubble.tsx b/webui/src/components/MessageBubble.tsx
index abf85f663..bd1d8c93b 100644
--- a/webui/src/components/MessageBubble.tsx
+++ b/webui/src/components/MessageBubble.tsx
@@ -92,7 +92,7 @@ export function MessageBubble({ message }: MessageBubbleProps) {
   return (
     <div className={cn("w-full text-[15px]", baseAnim)} style={{ lineHeight: "var(--cjk-line-height)" }}>
       {hasReasoning ? (
-        <ReasoningBubble text={reasoning} streaming={reasoningStreaming} />
+        <ReasoningBubble text={reasoning} streaming={reasoningStreaming} hasBodyBelow={!empty} />
       ) : null}
       {empty && message.isStreaming && !hasReasoning ? (
         <TypingDots />
@@ -443,6 +443,7 @@ function TraceGroup({ message, animClass }: TraceGroupProps) {
 interface ReasoningBubbleProps {
   text: string;
   streaming: boolean;
+  hasBodyBelow: boolean;
 }
 
 /**
@@ -456,7 +457,7 @@ interface ReasoningBubbleProps {
  *     the user can re-expand to inspect the chain of thought. The local
  *     toggle persists once the user interacts.
  */
-function ReasoningBubble({ text, streaming }: ReasoningBubbleProps) {
+function ReasoningBubble({ text, streaming, hasBodyBelow }: ReasoningBubbleProps) {
   const { t } = useTranslation();
   const [userToggled, setUserToggled] = useState(false);
   const [openLocal, setOpenLocal] = useState(true);
@@ -466,7 +467,12 @@ function ReasoningBubble({ text, streaming }: ReasoningBubbleProps) {
     setOpenLocal((v) => (userToggled ? !v : !open));
   };
   return (
-    <div className="mb-2 w-full animate-in fade-in-0 slide-in-from-top-1 duration-200">
+    <div
+      className={cn(
+        "w-full animate-in fade-in-0 slide-in-from-top-1 duration-200",
+        hasBodyBelow && "mb-2",
+      )}
+    >
       <button
         type="button"
         onClick={onToggle}
diff --git a/webui/src/tests/message-bubble.test.tsx b/webui/src/tests/message-bubble.test.tsx
index 33b7ac05f..4f5d504dd 100644
--- a/webui/src/tests/message-bubble.test.tsx
+++ b/webui/src/tests/message-bubble.test.tsx
@@ -119,6 +119,7 @@ describe("MessageBubble", () => {
     expect(screen.getByText("Thinking…")).toBeInTheDocument();
     expect(screen.getByText(/Step 1: parse intent\./)).toBeInTheDocument();
     expect(container.querySelector(".reasoning-shimmer")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /thinking/i }).parentElement).not.toHaveClass("mb-2");
   });
 
   it("collapses the reasoning section by default once streaming ends", () => {
@@ -136,6 +137,7 @@ describe("MessageBubble", () => {
     expect(screen.getByText("Thinking")).toBeInTheDocument();
     expect(screen.getByText("The answer is 42.")).toBeInTheDocument();
     expect(screen.queryByText("hidden until expanded")).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /thinking/i }).parentElement).toHaveClass("mb-2");
 
     fireEvent.click(screen.getByRole("button", { name: /thinking/i }));
     expect(screen.getByText("hidden until expanded")).toBeInTheDocument();