adam/open-swe
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/open-swe.git synced 2026-10-03 15:03:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(ui): soften bash tool output scroll indicator to a fade (#1532)

Browse source 
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>
This commit is contained in:
Caroline di Vittorio 2026-06-15 13:39:52 -07:00 • committed by GitHub
parent 147a393ed0
commit dc70ca1f2f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
ui/src/components/agents/ported/ShellCommand.tsx
View file

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