fix(ui): constrain shell output width to prevent box overflow (#2857)

* fix(ui): constrain shell output width to prevent box overflow

When shell commands produce wide table output (e.g., gh run list),
the text would overflow the bordered box container in the TUI because
AnsiOutputText didn't apply any width constraint.

This fix:
1. Adds maxWidth prop to AnsiOutputText component
2. Wraps output in MaxSizedBox for proper width/height constraints
3. Adds wrap=truncate to individual text tokens
4. Passes childWidth from ToolMessage (matching other renderers)

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

* fix(ui): address review feedback on AnsiOutput MaxSizedBox wrapping

MaxSizedBox requires its direct children to be row <Box> elements;
wrapping the rows in an extra <Box flexDirection="column"> broke the
layout contract and caused shell output to render as empty content.
Remove the wrapper so each line is a direct <Box> child of MaxSizedBox.

Update the "handles empty lines and empty tokens" test: with row
<Box> elements in place, empty AnsiLines are now correctly preserved
as blank output rows (matching the source terminal) instead of being
silently collapsed by the former <Text>-per-row rendering.

* test(ui): cover multi-token wide-line truncation in AnsiOutputText

The existing truncation test used a single 100-char token, which takes
the straightforward MaxSizedBox single-segment path. Real-world shell
output like `gh run list` is a single logical row composed of many
styled-column tokens whose combined width exceeds the box — that path
relies on per-token wrap="truncate" plus ink's flex layout for the
final crop, not MaxSizedBox itself. Cover that shape so future
regressions in either half of the mechanism are caught.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

---------

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
euxaristia 2026-04-19 03:42:52 -04:00 committed by GitHub
parent eae247b50e
commit 9174c11cee
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 92 additions and 29 deletions

View file

@ -403,6 +403,7 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
<AnsiOutputText
data={effectiveDisplayRenderer.data}
availableTerminalHeight={availableHeight}
maxWidth={innerWidth}
/>
)}
{effectiveDisplayRenderer.type === 'string' && (