fix(tui): align streaming shell output

This commit is contained in:
Kit Langton 2026-07-15 17:13:20 -04:00
commit befd29212c

View file

@ -2386,9 +2386,14 @@ function Shell(props: ToolProps) {
const input = createMemo(() => (command() ? `${isRunning() ? "" : "$ "}${command()}` : ""))
const content = createMemo(() => [input(), output()].filter(Boolean).join("\n\n"))
const collapsed = createMemo(() => collapseToolOutput(content(), maxLines, maxChars()))
const limited = createMemo(() => {
if (expanded() || !collapsed().overflow) return content()
return collapsed().output
const visible = createMemo(() => {
const command = input()
if (expanded()) return { input: command, output: output() }
const preview = collapsed().overflow ? collapsed().output : content()
return {
input: preview.slice(0, command.length),
output: preview.slice(command.length).replace(/^\n+/, ""),
}
})
const expandable = createMemo(() => Boolean(shellID()) || collapsed().overflow)
const toggle = () => {
@ -2413,18 +2418,17 @@ function Shell(props: ToolProps) {
<Show
when={isRunning()}
fallback={
<text>
<span style={{ fg: themeV2.text() }}>{limited().slice(0, input().length)}</span>
<span style={{ fg: themeV2.text.subdued() }}>{limited().slice(input().length)}</span>
</text>
<text fg={themeV2.text()}>{visible().input}</text>
}
>
<Spinner color={color()}>
<span style={{ fg: themeV2.text() }}>{limited().slice(0, input().length)}</span>
<span style={{ fg: themeV2.text.subdued() }}>{limited().slice(input().length)}</span>
<span style={{ fg: themeV2.text() }}>{visible().input}</span>
</Spinner>
</Show>
</Show>
<Show when={visible().output}>
{(value) => <text fg={themeV2.text.subdued()}>{value()}</text>}
</Show>
<Show when={shellID()}>
<StatusBadge>Background</StatusBadge>
</Show>