From 7fe4d97fd0cd55ef3fbf6d6388c5f2c4d0969e11 Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Wed, 13 May 2026 17:05:34 +0100
Subject: [PATCH] fix(site): align streaming thinking spacing (#25291)

---
 .../ChatConversation/StreamingOutput.stories.tsx  | 15 +++++++++++++--
 .../ChatConversation/StreamingOutput.tsx          |  2 +-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/site/src/pages/AgentsPage/components/ChatConversation/StreamingOutput.stories.tsx b/site/src/pages/AgentsPage/components/ChatConversation/StreamingOutput.stories.tsx
index 461c4c7803..ee6984291b 100644
--- a/site/src/pages/AgentsPage/components/ChatConversation/StreamingOutput.stories.tsx
+++ b/site/src/pages/AgentsPage/components/ChatConversation/StreamingOutput.stories.tsx
@@ -268,13 +268,24 @@ export const ThinkingDuringStreamingWithToolCalls: Story = {
 				tool_call_id: "tc-1",
 				args: { command: "ls -la" },
 			},
+			{
+				type: "tool-call",
+				tool_name: "read_file",
+				tool_call_id: "tc-2",
+				args: { path: "README.md" },
+			},
 		]),
 	},
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		// "Thinking" should still be visible during streaming
-		// when only tool-call blocks have arrived.
+		// Tool-only stream chunks can otherwise clear the activity indicator before text arrives.
 		const matches = canvas.getAllByText("Thinking");
 		expect(matches.length).toBeGreaterThanOrEqual(1);
+
+		const thinkingBlock = matches[0].parentElement;
+		expect(thinkingBlock).toBeInstanceOf(HTMLElement);
+		expect(getComputedStyle(thinkingBlock as HTMLElement).marginTop).toBe(
+			"8px",
+		);
 	},
 };
diff --git a/site/src/pages/AgentsPage/components/ChatConversation/StreamingOutput.tsx b/site/src/pages/AgentsPage/components/ChatConversation/StreamingOutput.tsx
index 135b0a6c37..822e7cfab7 100644
--- a/site/src/pages/AgentsPage/components/ChatConversation/StreamingOutput.tsx
+++ b/site/src/pages/AgentsPage/components/ChatConversation/StreamingOutput.tsx
@@ -92,7 +92,7 @@ export const StreamingOutput: FC<{
 		<ConversationItem {...conversationItemProps}>
 			<Message className="w-full">
 				<MessageContent className="whitespace-normal">
-					<div className="space-y-3">
+					<div className="space-y-2">
 						{shouldShowBlocks && (
 							<BlockList
 								blocks={blocks}