feat(cli): enhance tool confirmation UI and selection layout (#24376)

This commit is contained in:
Gal Zahavi
2026-04-03 18:32:35 -07:00
committed by GitHub
parent 21a3925f99
commit 7311e242ec
24 changed files with 2435 additions and 1953 deletions
@@ -26,6 +26,7 @@ export interface MaxSizedBoxProps {
maxHeight?: number;
overflowDirection?: 'top' | 'bottom';
additionalHiddenLinesCount?: number;
paddingX?: number;
}
/**
@@ -38,6 +39,7 @@ export const MaxSizedBox: React.FC<MaxSizedBoxProps> = ({
maxHeight,
overflowDirection = 'top',
additionalHiddenLinesCount = 0,
paddingX = 0,
}) => {
const id = useId();
const { addOverflowingId, removeOverflowingId } = useOverflowActions() || {};
@@ -132,11 +134,13 @@ export const MaxSizedBox: React.FC<MaxSizedBoxProps> = ({
flexShrink={0}
>
{totalHiddenLines > 0 && overflowDirection === 'top' && (
<Text color={theme.text.secondary} wrap="truncate">
{isNarrow
? `... ${totalHiddenLines} hidden (${showMoreKey}) ...`
: `... first ${totalHiddenLines} line${totalHiddenLines === 1 ? '' : 's'} hidden (${showMoreKey} to show) ...`}
</Text>
<Box paddingX={paddingX}>
<Text color={theme.text.secondary} wrap="truncate">
{isNarrow
? `... ${totalHiddenLines} hidden (${showMoreKey}) ...`
: `... first ${totalHiddenLines} line${totalHiddenLines === 1 ? '' : 's'} hidden (${showMoreKey} to show) ...`}
</Text>
</Box>
)}
<Box
flexDirection="column"
@@ -154,11 +158,13 @@ export const MaxSizedBox: React.FC<MaxSizedBoxProps> = ({
</Box>
</Box>
{totalHiddenLines > 0 && overflowDirection === 'bottom' && (
<Text color={theme.text.secondary} wrap="truncate">
{isNarrow
? `... ${totalHiddenLines} hidden (${showMoreKey}) ...`
: `... last ${totalHiddenLines} line${totalHiddenLines === 1 ? '' : 's'} hidden (${showMoreKey} to show) ...`}
</Text>
<Box paddingX={paddingX}>
<Text color={theme.text.secondary} wrap="truncate">
{isNarrow
? `... ${totalHiddenLines} hidden (${showMoreKey}) ...`
: `... last ${totalHiddenLines} line${totalHiddenLines === 1 ? '' : 's'} hidden (${showMoreKey} to show) ...`}
</Text>
</Box>
)}
</Box>
);