From 810b33fd93e890ff545a229af0d1fa8abc3c3b94 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Mon, 8 Dec 2025 22:48:23 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20fix:=20add=20consistent=20paddin?=
 =?UTF-8?q?g=20to=20bash=20tool=20waiting=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add px-2 py-1.5 padding to 'Waiting for result' section in BashToolCall
- Add WithBashToolWaiting story to demonstrate the executing state

_Generated with mux_
---
 src/browser/components/tools/BashToolCall.tsx |  2 +-
 src/browser/stories/App.chat.stories.tsx      | 49 +++++++++++++++++++
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/src/browser/components/tools/BashToolCall.tsx b/src/browser/components/tools/BashToolCall.tsx
index 6cad2fb0c6..c23d6bdd8f 100644
--- a/src/browser/components/tools/BashToolCall.tsx
+++ b/src/browser/components/tools/BashToolCall.tsx
@@ -136,7 +136,7 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
 
           {status === "executing" && !result && (
             <DetailSection>
-              <DetailContent>
+              <DetailContent className="px-2 py-1.5">
                 Waiting for result
                 <LoadingDots />
               </DetailContent>
diff --git a/src/browser/stories/App.chat.stories.tsx b/src/browser/stories/App.chat.stories.tsx
index fd69e78305..bf2bc12121 100644
--- a/src/browser/stories/App.chat.stories.tsx
+++ b/src/browser/stories/App.chat.stories.tsx
@@ -14,6 +14,7 @@ import {
   createTerminalTool,
   createStatusTool,
   createGenericTool,
+  createPendingTool,
 } from "./mockFactory";
 import { setupSimpleChatStory, setupStreamingChatStory } from "./storyHelpers";
 import { within, userEvent, waitFor } from "@storybook/test";
@@ -251,6 +252,54 @@ npm test 2>&1 | head -20`,
   },
 };
 
+/** Bash tool in executing state showing "Waiting for result" */
+export const WithBashToolWaiting: AppStory = {
+  render: () => (
+    <AppWithMocks
+      setup={() =>
+        setupSimpleChatStory({
+          workspaceId: "ws-bash-waiting",
+          messages: [
+            createUserMessage("msg-1", "Run the tests", {
+              historySequence: 1,
+              timestamp: STABLE_TIMESTAMP - 100000,
+            }),
+            createAssistantMessage("msg-2", "Running the test suite:", {
+              historySequence: 2,
+              timestamp: STABLE_TIMESTAMP - 90000,
+              toolCalls: [
+                createPendingTool("call-1", "bash", {
+                  script: "npm test",
+                  run_in_background: false,
+                  display_name: "Test Runner",
+                  timeout_secs: 30,
+                }),
+              ],
+            }),
+          ],
+        })
+      }
+    />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Bash tool in executing state with 'Waiting for result...' showing consistent padding.",
+      },
+    },
+  },
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+
+    // Expand the bash tool to show "Waiting for result" section
+    await waitFor(async () => {
+      const toolHeader = canvas.getByText(/npm test/);
+      await userEvent.click(toolHeader);
+    });
+  },
+};
+
 /** Chat with agent status indicator */
 export const WithAgentStatus: AppStory = {
   render: () => (