feat(cli): implement dense tool rendering and UI refinements

- Add DenseToolMessage component for single-line tool output.
- Update ToolGroupMessage to support dense layout and conditional borders.
- Improve padding and layout in ShellToolMessage and ToolMessage.
- Add padding to ShowMoreLines and update UI snapshots.
This commit is contained in:
Jarrod Whelan
2026-02-10 00:41:37 -08:00
parent e88d4ffe97
commit 5f99cbe560
6 changed files with 332 additions and 273 deletions
@@ -25,6 +25,7 @@ export const DenseToolMessage: React.FC<DenseToolMessageProps> = ({
description,
status,
resultDisplay,
outputFile,
}) => {
let denseResult: string | undefined;
@@ -54,22 +55,31 @@ export const DenseToolMessage: React.FC<DenseToolMessageProps> = ({
}
return (
<Box marginLeft={3} flexDirection="row" flexWrap="wrap">
<ToolStatusIndicator status={status} name={name} />
<Box maxWidth={25} flexShrink={1} flexGrow={0}>
<Text color={theme.text.primary} bold wrap="truncate-end">
{name}
</Text>
<Box flexDirection="column">
<Box marginLeft={3} flexDirection="row" flexWrap="wrap">
<ToolStatusIndicator status={status} name={name} />
<Box maxWidth={25} flexShrink={1} flexGrow={0}>
<Text color={theme.text.primary} bold wrap="truncate-end">
{name}
</Text>
</Box>
<Box marginLeft={1} flexShrink={1} flexGrow={0}>
<Text color={theme.text.secondary} wrap="truncate-end">
{description}
</Text>
</Box>
{denseResult && (
<Box marginLeft={1} flexGrow={1}>
<Text color={theme.text.accent} wrap="wrap">
{denseResult}
</Text>
</Box>
)}
</Box>
<Box marginLeft={1} flexShrink={1} flexGrow={0}>
<Text color={theme.text.secondary} wrap="truncate-end">
{description}
</Text>
</Box>
{denseResult && (
<Box marginLeft={1} flexGrow={1}>
<Text color={theme.text.accent} wrap="wrap">
{denseResult}
{outputFile && (
<Box marginLeft={6}>
<Text color={theme.text.secondary}>
(Output saved to: {outputFile})
</Text>
</Box>
)}