From 2d40a40c577094c92e7602466ce72228f69e165f Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Wed, 27 May 2026 16:57:05 +0100
Subject: [PATCH] fix(site): tighten execute tool duration spacing (#25739)

---
 .../ChatElements/tools/ExecuteTool.tsx        | 21 ++++++++-----------
 .../ChatElements/tools/Tool.stories.tsx       |  6 +++---
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/ExecuteTool.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/ExecuteTool.tsx
index 0a7c54d252..6f0a3b18f0 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/ExecuteTool.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/ExecuteTool.tsx
@@ -189,23 +189,20 @@ const ShellCommandLine: React.FC<{
 			? summarizeParsedCommands(parsedCommands)
 			: "";
 	const commandDisplay = summary || command;
+	const commandLabel = intentLabel
+		? `${intentLabel} using ${commandDisplay}`
+		: `Ran ${commandDisplay}`;
+	const durationSuffix = durationLabel ? ` for ${durationLabel}` : "";
+
 	return (
 		<>
 			<ToolIcon name="execute" isError={false} />
-			<span className="block min-w-0 truncate text-[13px] font-normal leading-6 text-current">
-				{intentLabel ? (
-					<>
-						{intentLabel} using {commandDisplay}
-					</>
-				) : (
-					<>Ran {commandDisplay}</>
+			<span className="min-w-0 truncate text-[13px] font-normal leading-6 text-current">
+				{commandLabel}
+				{durationSuffix && (
+					<span className="text-content-secondary">{durationSuffix}</span>
 				)}
 			</span>
-			{durationLabel && (
-				<span className="shrink-0 text-[13px] font-normal text-content-secondary">
-					{intentLabel ? ` for ${durationLabel}` : durationLabel}
-				</span>
-			)}
 			{expanded !== undefined && (
 				<ChevronDownIcon
 					className={cn(
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/Tool.stories.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/Tool.stories.tsx
index 65965d07d0..66552b1d6f 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/Tool.stories.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/Tool.stories.tsx
@@ -340,7 +340,7 @@ export const ExecuteModelIntentLeadingUsing: Story = {
 		const commandButton = canvas.getByRole("button", {
 			name: "Expand command",
 		});
-		expect(commandButton).toHaveTextContent(`Ran ${executeCommand}2.3s`);
+		expect(commandButton).toHaveTextContent(`Ran ${executeCommand} for 2.3s`);
 		expect(commandButton).not.toHaveTextContent("using git fetch origin using");
 	},
 };
@@ -363,7 +363,7 @@ export const ExecuteSuccess: Story = {
 		expect(
 			canvas.queryByRole("img", { name: "Running in background" }),
 		).not.toBeInTheDocument();
-		expect(canvas.getByText("47.2s")).toBeVisible();
+		expect(canvas.getByText(/for 47\.2s/)).toBeVisible();
 		expect(canvas.queryByText("2 lines")).not.toBeInTheDocument();
 	},
 };
@@ -474,7 +474,7 @@ export const ExecuteLongCommandCollapsed: Story = {
 		expect(commandButton).toHaveTextContent(`Ran ${longExecuteCommand}`);
 		expect(commandButton).toHaveAttribute("aria-expanded", "false");
 		expect(canvas.queryByText("exit 0")).not.toBeInTheDocument();
-		expect(canvas.getByText("47.2s")).toBeVisible();
+		expect(canvas.getByText(/for 47\.2s/)).toBeVisible();
 		expect(canvas.queryByText("61 lines")).not.toBeInTheDocument();
 	},
 };