From dc70ca1f2f83ea15ab340de1d94f4c8201679483 Mon Sep 17 00:00:00 2001
From: Caroline di Vittorio
 <43390382+carolinedivittorio@users.noreply.github.com>
Date: Mon, 15 Jun 2026 13:39:52 -0700
Subject: [PATCH] feat(ui): soften bash tool output scroll indicator to a fade
 (#1532)

Replace the hard inset box-shadow scroll indicators on bash/shell tool
output with a mask-image gradient so the output softly fades at the
scroll edges, matching the user message bubble treatment.

Co-authored-by: open-swe[bot] <open-swe@users.noreply.github.com>
---
 .../components/agents/ported/ShellCommand.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/agents/ported/ShellCommand.tsx b/ui/src/components/agents/ported/ShellCommand.tsx
index ce11eda0..0a5e20de 100644
--- a/ui/src/components/agents/ported/ShellCommand.tsx
+++ b/ui/src/components/agents/ported/ShellCommand.tsx
@@ -38,12 +38,14 @@ export const ShellCommand = memo(function ShellCommand({
     handleOutputScroll();
   }, [handleOutputScroll, output, expanded]);
 
-  const outputEdgeShadows = [
-    scrolledFromTop ? "inset 0 12px 10px -10px rgba(42, 63, 95, 0.95)" : "",
-    scrolledFromBottom ? "inset 0 -12px 10px -10px rgba(42, 63, 95, 0.95)" : "",
-  ]
-    .filter(Boolean)
-    .join(", ");
+  const topStop = scrolledFromTop ? "transparent 0, black 24px" : "black 0";
+  const bottomStop = scrolledFromBottom
+    ? "black calc(100% - 24px), transparent 100%"
+    : "black 100%";
+  const outputEdgeMask =
+    scrolledFromTop || scrolledFromBottom
+      ? `linear-gradient(to bottom, ${topStop}, ${bottomStop})`
+      : undefined;
 
   return (
     <div className="my-1">
@@ -93,7 +95,10 @@ export const ShellCommand = memo(function ShellCommand({
               ref={outputRef}
               onScroll={handleOutputScroll}
               className="min-h-0 flex-1 overflow-auto px-3 pb-2"
-              style={{ boxShadow: outputEdgeShadows || "none" }}
+              style={{
+                maskImage: outputEdgeMask,
+                WebkitMaskImage: outputEdgeMask,
+              }}
             >
               <pre className="mt-1 text-[color:var(--ui-text-muted)] whitespace-pre font-mono text-xs w-max min-w-full">
                 {output}