fix(ui): fix flickering on small terminal heights (#21416)

Co-authored-by: Jacob Richman <jacob314@gmail.com>
This commit is contained in:
Dev Randalpura
2026-03-18 17:28:21 -04:00
committed by GitHub
parent d68100e6bc
commit 34f271504a
7 changed files with 237 additions and 16 deletions

View File

@@ -35,7 +35,11 @@ export const AnsiOutputText: React.FC<AnsiOutputProps> = ({
? Math.min(availableHeightLimit, maxLines)
: (availableHeightLimit ?? maxLines ?? DEFAULT_HEIGHT);
const lastLines = disableTruncation ? data : data.slice(-numLinesRetained);
const lastLines = disableTruncation
? data
: numLinesRetained === 0
? []
: data.slice(-numLinesRetained);
return (
<Box flexDirection="column" width={width} flexShrink={0} overflow="hidden">
{lastLines.map((line: AnsiLine, lineIndex: number) => (

View File

@@ -48,6 +48,7 @@ export const MainContent = () => {
pendingHistoryItems,
mainAreaWidth,
staticAreaMaxItemHeight,
availableTerminalHeight,
cleanUiDetailsVisible,
} = uiState;
const showHeaderDetails = cleanUiDetailsVisible;
@@ -141,7 +142,7 @@ export const MainContent = () => {
<HistoryItemDisplay
key={i}
availableTerminalHeight={
uiState.constrainHeight ? staticAreaMaxItemHeight : undefined
uiState.constrainHeight ? availableTerminalHeight : undefined
}
terminalWidth={mainAreaWidth}
item={{ ...item, id: 0 }}
@@ -160,7 +161,7 @@ export const MainContent = () => {
[
pendingHistoryItems,
uiState.constrainHeight,
staticAreaMaxItemHeight,
availableTerminalHeight,
mainAreaWidth,
showConfirmationQueue,
confirmingTool,

View File

@@ -6,11 +6,12 @@ AppHeader(full)
╭──────────────────────────────────────────────────────────────────────────────────────────────╮
│ ⊶ Shell Command Running a long command... │
│ │
│ Line 9 │
│ Line 10 │
│ Line 11 │
│ Line 12 │
│ Line 13 │
│ Line 14
│ Line 14
│ Line 15 █ │
│ Line 16 █ │
│ Line 17 █ │
@@ -27,11 +28,12 @@ AppHeader(full)
╭──────────────────────────────────────────────────────────────────────────────────────────────╮
│ ⊶ Shell Command Running a long command... │
│ │
│ Line 9 │
│ Line 10 │
│ Line 11 │
│ Line 12 │
│ Line 13 │
│ Line 14
│ Line 14
│ Line 15 █ │
│ Line 16 █ │
│ Line 17 █ │
@@ -47,7 +49,9 @@ exports[`MainContent > MainContent Tool Output Height Logic > 'Normal mode - Con
╭──────────────────────────────────────────────────────────────────────────────────────────────╮
│ ⊶ Shell Command Running a long command... │
│ │
│ ... first 11 lines hidden (Ctrl+O to show) ... │
│ ... first 9 lines hidden (Ctrl+O to show) ...
│ Line 10 │
│ Line 11 │
│ Line 12 │
│ Line 13 │
│ Line 14 │

View File

@@ -199,7 +199,7 @@ describe('<ShellToolMessage />', () => {
[
'uses full availableTerminalHeight when focused in alternate buffer mode',
100,
98, // 100 - 2
98,
true,
false,
],

View File

@@ -46,7 +46,7 @@ export function SlicingMaxSizedBox<T>({
text = '...' + text.slice(-MAXIMUM_RESULT_DISPLAY_CHARACTERS);
}
}
if (maxLines) {
if (maxLines !== undefined) {
const hasTrailingNewline = text.endsWith('\n');
const contentText = hasTrailingNewline ? text.slice(0, -1) : text;
const lines = contentText.split('\n');
@@ -71,7 +71,7 @@ export function SlicingMaxSizedBox<T>({
};
}
if (Array.isArray(data) && !isAlternateBuffer && maxLines) {
if (Array.isArray(data) && !isAlternateBuffer && maxLines !== undefined) {
if (data.length > maxLines) {
// We will have a label from MaxSizedBox. Reserve space for it.
const targetLines = Math.max(1, maxLines - 1);