aevgarik/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine collapsed command failure styling

Browse Source 
Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
2026-03-11 13:21:58 -05:00
parent 487c86f58e
commit f594edd39f
1 changed files with 21 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
ui/src/components/transcript/RunTranscriptView.tsx
View File

@@ -666,12 +666,13 @@ function TranscriptCommandGroup({
block: Extract<TranscriptBlock, { type: "command_group" }>; block: Extract<TranscriptBlock, { type: "command_group" }>;
density: TranscriptDensity; density: TranscriptDensity;
}) { }) {
const [open, setOpen] = useState(block.items.some((item) => item.status === "error")); const [open, setOpen] = useState(false);
const compact = density === "compact"; const compact = density === "compact";
const runningItem = [...block.items].reverse().find((item) => item.status === "running"); const runningItem = [...block.items].reverse().find((item) => item.status === "running");
const latestItem = block.items[block.items.length - 1] ?? null; const latestItem = block.items[block.items.length - 1] ?? null;
const hasError = block.items.some((item) => item.status === "error"); const hasError = block.items.some((item) => item.status === "error");
const isRunning = Boolean(runningItem); const isRunning = Boolean(runningItem);
const showExpandedErrorState = open && hasError;
const title = isRunning const title = isRunning
? "Executing command" ? "Executing command"
: block.items.length === 1 : block.items.length === 1
@@ -680,14 +681,12 @@ function TranscriptCommandGroup({
const subtitle = runningItem const subtitle = runningItem
? summarizeToolInput("command_execution", runningItem.input, density) ? summarizeToolInput("command_execution", runningItem.input, density)
: null; : null;
const statusTone = hasError const statusTone = isRunning
? "text-red-700 dark:text-red-300"
: isRunning
? "text-cyan-700 dark:text-cyan-300" ? "text-cyan-700 dark:text-cyan-300"
: "text-foreground/70"; : "text-foreground/70";
return ( return (
<div className={cn(hasError && "rounded-xl border border-red-500/20 bg-red-500/[0.04] p-3")}> <div className={cn(showExpandedErrorState && "rounded-xl border border-red-500/20 bg-red-500/[0.04] p-3")}>
<div <div
role="button" role="button"
tabIndex={0} tabIndex={0}
@@ -705,19 +704,19 @@ function TranscriptCommandGroup({
> >
<div className="mt-0.5 flex shrink-0 items-center"> <div className="mt-0.5 flex shrink-0 items-center">
{block.items.slice(0, Math.min(block.items.length, 3)).map((_, index) => ( {block.items.slice(0, Math.min(block.items.length, 3)).map((_, index) => (
<TerminalSquare <span
key={index} key={index}
className={cn( className={cn(
"h-3.5 w-3.5", "inline-flex h-6 w-6 items-center justify-center rounded-full border shadow-sm",
index > 0 && "-ml-1.5", index > 0 && "-ml-1.5",
hasError isRunning
? "text-red-600 dark:text-red-300" ? "border-cyan-500/25 bg-cyan-500/[0.08] text-cyan-600 dark:text-cyan-300"
: isRunning : "border-border/70 bg-background text-foreground/55",
? "text-cyan-600 dark:text-cyan-300"
: "text-foreground/55",
isRunning && "animate-pulse", isRunning && "animate-pulse",
)} )}
/> >
<TerminalSquare className="h-3.5 w-3.5" />
</span>
))} ))}
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
@@ -729,7 +728,7 @@ function TranscriptCommandGroup({
{subtitle} {subtitle}
</div> </div>
)} )}
{!subtitle && latestItem?.status === "error" && ( {!subtitle && latestItem?.status === "error" && open && (
<div className={cn("mt-1", compact ? "text-xs" : "text-sm", statusTone)}> <div className={cn("mt-1", compact ? "text-xs" : "text-sm", statusTone)}>
Command failed Command failed
</div> </div>
@@ -752,14 +751,16 @@ function TranscriptCommandGroup({
{block.items.map((item, index) => ( {block.items.map((item, index) => (
<div key={`${item.ts}-${index}`} className="space-y-2"> <div key={`${item.ts}-${index}`} className="space-y-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<TerminalSquare className={cn( <span className={cn(
"h-3.5 w-3.5", "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border",
item.status === "error" item.status === "error"
? "text-red-600 dark:text-red-300" ? "border-red-500/25 bg-red-500/[0.08] text-red-600 dark:text-red-300"
: item.status === "running" : item.status === "running"
? "text-cyan-600 dark:text-cyan-300" ? "border-cyan-500/25 bg-cyan-500/[0.08] text-cyan-600 dark:text-cyan-300"
: "text-foreground/55", : "border-border/70 bg-background text-foreground/55",
)} /> )}>
<TerminalSquare className="h-3 w-3" />
</span>
<span className={cn("font-mono break-all", compact ? "text-[11px]" : "text-xs")}> <span className={cn("font-mono break-all", compact ? "text-[11px]" : "text-xs")}>
{summarizeToolInput("command_execution", item.input, density)} {summarizeToolInput("command_execution", item.input, density)}
</span> </span>