From ce436d0ee23de9bc0378944096bf5556cf38c081 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Mon, 8 Dec 2025 14:07:59 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20fix:=20add=20padding=20to=20bash?=
 =?UTF-8?q?=20tool=20SCRIPT=20section?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added px-2 py-1.5 padding specifically to the Script DetailContent in
BashToolCall (not globally to DetailContent, which would affect
GenericToolCall's JSON display).

Also added createBashTool mockFactory helper and WithBashTool story
that expands a bash tool to visually validate the fix.

_Generated with mux_
---
 src/browser/components/tools/BashToolCall.tsx |  2 +-
 src/browser/stories/App.chat.stories.tsx      | 71 +++++++++++++++++++
 src/browser/stories/mockFactory.ts            | 18 +++++
 3 files changed, 90 insertions(+), 1 deletion(-)

diff --git a/src/browser/components/tools/BashToolCall.tsx b/src/browser/components/tools/BashToolCall.tsx
index ae4717766a..e59f0a2fb2 100644
--- a/src/browser/components/tools/BashToolCall.tsx
+++ b/src/browser/components/tools/BashToolCall.tsx
@@ -104,7 +104,7 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
         <ToolDetails>
           <DetailSection>
             <DetailLabel>Script</DetailLabel>
-            <DetailContent>{args.script}</DetailContent>
+            <DetailContent className="px-2 py-1.5">{args.script}</DetailContent>
           </DetailSection>
 
           {result && (
diff --git a/src/browser/stories/App.chat.stories.tsx b/src/browser/stories/App.chat.stories.tsx
index b3fbfe402c..fd69e78305 100644
--- a/src/browser/stories/App.chat.stories.tsx
+++ b/src/browser/stories/App.chat.stories.tsx
@@ -10,6 +10,7 @@ import {
   createCompactionRequestMessage,
   createFileReadTool,
   createFileEditTool,
+  createBashTool,
   createTerminalTool,
   createStatusTool,
   createGenericTool,
@@ -180,6 +181,76 @@ export const WithTerminal: AppStory = {
   ),
 };
 
+/** Bash tool with expanded script and output sections */
+export const WithBashTool: AppStory = {
+  render: () => (
+    <AppWithMocks
+      setup={() =>
+        setupSimpleChatStory({
+          workspaceId: "ws-bash",
+          messages: [
+            createUserMessage("msg-1", "Check project status", {
+              historySequence: 1,
+              timestamp: STABLE_TIMESTAMP - 100000,
+            }),
+            createAssistantMessage("msg-2", "Let me check the git status and run tests:", {
+              historySequence: 2,
+              timestamp: STABLE_TIMESTAMP - 90000,
+              toolCalls: [
+                createBashTool(
+                  "call-1",
+                  `#!/bin/bash
+set -e
+
+# Check git status
+echo "=== Git Status ==="
+git status --short
+
+# Run tests
+echo "=== Running Tests ==="
+npm test 2>&1 | head -20`,
+                  [
+                    "=== Git Status ===",
+                    " M src/api/users.ts",
+                    " M src/auth/jwt.ts",
+                    "?? src/api/users.test.ts",
+                    "",
+                    "=== Running Tests ===",
+                    "PASS src/api/users.test.ts",
+                    "  ✓ should authenticate (24ms)",
+                    "  ✓ should reject invalid tokens (18ms)",
+                    "",
+                    "Tests: 2 passed, 2 total",
+                  ].join("\n"),
+                  0,
+                  10,
+                  1250
+                ),
+              ],
+            }),
+          ],
+        })
+      }
+    />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Bash tool showing multi-line script in expanded view with proper padding.",
+      },
+    },
+  },
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+
+    // Expand the bash tool to show Script section with padding
+    await waitFor(async () => {
+      const toolHeader = canvas.getByText(/set -e/);
+      await userEvent.click(toolHeader);
+    });
+  },
+};
+
 /** Chat with agent status indicator */
 export const WithAgentStatus: AppStory = {
   render: () => (
diff --git a/src/browser/stories/mockFactory.ts b/src/browser/stories/mockFactory.ts
index 3c36c55b9c..3643623767 100644
--- a/src/browser/stories/mockFactory.ts
+++ b/src/browser/stories/mockFactory.ts
@@ -255,6 +255,24 @@ export function createFileEditTool(toolCallId: string, filePath: string, diff: s
   };
 }
 
+export function createBashTool(
+  toolCallId: string,
+  script: string,
+  output: string,
+  exitCode = 0,
+  timeoutSecs = 3,
+  durationMs = 50
+): MuxPart {
+  return {
+    type: "dynamic-tool",
+    toolCallId,
+    toolName: "bash",
+    state: "output-available",
+    input: { script, run_in_background: false, timeout_secs: timeoutSecs },
+    output: { success: exitCode === 0, output, exitCode, wall_duration_ms: durationMs },
+  };
+}
+
 export function createTerminalTool(
   toolCallId: string,
   command: string,