Command execution component tweaks (#3059)

This commit is contained in:
Chris Estreich 2025-04-30 01:00:46 -07:00 committed by GitHub
parent 1d7569b14c
commit e975e30bd5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 28 additions and 21 deletions

View file

@ -60,7 +60,7 @@ export class ExecaTerminalProcess extends BaseTerminalProcess {
} catch (error) {
if (error instanceof ExecaError) {
console.error(`[ExecaTerminalProcess] shell execution error: ${error.message}`)
this.emit("shell_execution_complete", { exitCode: error.exitCode ?? 1, signalName: error.signal })
this.emit("shell_execution_complete", { exitCode: error.exitCode ?? 0, signalName: error.signal })
} else {
this.emit("shell_execution_complete", { exitCode: 1 })
}

View file

@ -28,7 +28,10 @@ export const CommandExecution = forwardRef<HTMLDivElement, CommandExecutionProps
const [status, setStatus] = useState<CommandExecutionStatus | null>(null)
const lines = useMemo(() => output.split("\n").filter((line) => line.trim() !== ""), [output])
const lines = useMemo(
() => [`$ ${command}`, ...output.split("\n").filter((line) => line.trim() !== "")],
[command, output],
)
const onMessage = useCallback(
(event: MessageEvent) => {
@ -61,14 +64,14 @@ export const CommandExecution = forwardRef<HTMLDivElement, CommandExecutionProps
return (
<div ref={ref} className="w-full p-2 rounded-xs bg-vscode-editor-background">
<div className="flex flex-row justify-between">
<Line>{command}</Line>
<div>
<div className="flex flex-row items-center justify-between gap-2 px-1">
<Line className="text-sm whitespace-nowrap overflow-hidden text-ellipsis">{command}</Line>
<div className="flex flex-row items-center gap-1">
{status?.status === "running" && (
<div className="flex flex-row items-center gap-2 shrink-0 font-mono text-sm">
<div className="flex flex-row items-center gap-2 font-mono text-xs">
<div className="rounded-full size-1.5 bg-lime-400" />
<div>Running</div>
{status.pid && <div>(PID: {status.pid})</div>}
{status.pid && <div className="whitespace-nowrap">(PID: {status.pid})</div>}
<Button
variant="ghost"
size="icon"
@ -80,26 +83,30 @@ export const CommandExecution = forwardRef<HTMLDivElement, CommandExecutionProps
</div>
)}
{status?.status === "exited" && (
<div className="flex flex-row items-center gap-2 shrink-0 font-mono text-sm">
<div className="rounded-full size-1.5 bg-red-400" />
<div>Exited ({status.exitCode})</div>
<div className="flex flex-row items-center gap-2 font-mono text-xs">
<div
className={cn(
"rounded-full size-1.5",
status.exitCode === 0 ? "bg-lime-400" : "bg-red-400",
)}
/>
<div className="whitespace-nowrap">Exited ({status.exitCode})</div>
</div>
)}
{lines.length > 0 && (
<div className="flex flex-row items-center justify-end gap-2">
<Button variant="ghost" size="sm" onClick={() => setIsExpanded(!isExpanded)}>
<div>Output</div>
<ChevronDown
className={cn("size-4 transition-transform duration-300", {
"rotate-180": isExpanded,
})}
/>
</Button>
</div>
<Button variant="ghost" size="icon" onClick={() => setIsExpanded(!isExpanded)}>
<ChevronDown
className={cn("size-4 transition-transform duration-300", {
"rotate-180": isExpanded,
})}
/>
</Button>
)}
</div>
</div>
<div className={cn("h-[200px] mt-1 pt-1 border-t border-border/25", { hidden: !isExpanded })}>
<div
className={cn("mt-1 pt-1 border-t border-border/25", { hidden: !isExpanded })}
style={{ height: Math.min((lines.length + 1) * 16, 200) }}>
{lines.length > 0 && (
<Virtuoso
className="h-full"