Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
devr0306 merged 15 commits into from
Mar 18, 2026
Merged

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
3e786aa
Changed max height
devr0306 Mar 6, 2026
c6f29d3
Updated tool heights to be compatible with changes
devr0306 Mar 6, 2026
0752221
Updated tests for ShellToolMessage
devr0306 Mar 6, 2026
5edc5a6
Merge branch 'main' into file-path-flickering
devr0306 Mar 6, 2026
18b6482
Revert changed comment
devr0306 Mar 6, 2026
d2e5ae7
Made tool calls take the entire terminal height
devr0306 Mar 12, 2026
558f1c9
Addressed case with 0 terminal height
devr0306 Mar 12, 2026
f96621a
Merge branch 'main' into file-path-flickering
devr0306 Mar 12, 2026
4c09d08
Addressed issues with toolLayoutUtils
devr0306 Mar 12, 2026
d21a686
Addressed nit improvements
devr0306 Mar 12, 2026
cb06803
Undid shell height changes
devr0306 Mar 13, 2026
52f7dab
Updated snapshot for one of the tests
devr0306 Mar 13, 2026
5c0b692
Merge branch 'main' into file-path-flickering
jacob314 Mar 17, 2026
4e1ac4e
Reverted changes to MainContent
devr0306 Mar 18, 2026
f9bd3fb
Fixed failing tests
devr0306 Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 13 additions & 6 deletions packages/cli/src/ui/components/MainContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export const MainContent = () => {
pendingHistoryItems,
mainAreaWidth,
staticAreaMaxItemHeight,
availableTerminalHeight,
cleanUiDetailsVisible,
} = uiState;
const showHeaderDetails = cleanUiDetailsVisible;
Expand All @@ -70,9 +71,11 @@ export const MainContent = () => {
<MemoizedHistoryItemDisplay
terminalWidth={mainAreaWidth}
availableTerminalHeight={
uiState.constrainHeight || !isExpandable
!isExpandable
? staticAreaMaxItemHeight
: undefined
: uiState.constrainHeight
? availableTerminalHeight

@jacob314 jacob314 Mar 17, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why did we make this change? this is truncating items more than they should be. With this change we are now strangely truncating items that have isExpandable == true more than ones where it is false.

: undefined
}
availableTerminalHeightGemini={MAX_GEMINI_MESSAGE_LINES}
key={h.id}
Expand All @@ -87,6 +90,7 @@ export const MainContent = () => {
uiState.history,
mainAreaWidth,
staticAreaMaxItemHeight,
availableTerminalHeight,
uiState.slashCommands,
uiState.constrainHeight,
lastUserPromptIndex,
Expand All @@ -110,7 +114,7 @@ export const MainContent = () => {
<HistoryItemDisplay
key={i}
availableTerminalHeight={
uiState.constrainHeight ? staticAreaMaxItemHeight : undefined
uiState.constrainHeight ? availableTerminalHeight : undefined
}
terminalWidth={mainAreaWidth}
item={{ ...item, id: 0 }}
Expand All @@ -126,7 +130,7 @@ export const MainContent = () => {
[
pendingHistoryItems,
uiState.constrainHeight,
staticAreaMaxItemHeight,
availableTerminalHeight,
mainAreaWidth,
showConfirmationQueue,
confirmingTool,
Expand Down Expand Up @@ -161,9 +165,11 @@ export const MainContent = () => {
<MemoizedHistoryItemDisplay
terminalWidth={mainAreaWidth}
availableTerminalHeight={
uiState.constrainHeight || !item.isExpandable
!item.isExpandable
? staticAreaMaxItemHeight
: undefined
: uiState.constrainHeight
? availableTerminalHeight
: undefined
}
availableTerminalHeightGemini={MAX_GEMINI_MESSAGE_LINES}
key={item.item.id}
Expand All @@ -185,6 +191,7 @@ export const MainContent = () => {
pendingItems,
uiState.constrainHeight,
staticAreaMaxItemHeight,
availableTerminalHeight,
],
);

Expand Down
35 changes: 24 additions & 11 deletions packages/cli/src/ui/components/__snapshots__/MainContent.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,15 @@ AppHeader(full)
╭──────────────────────────────────────────────────────────────────────────────────────────────╮
│ ⊶ Shell Command Running a long command... │
│ │
│ Line 10 │
│ Line 11 │
│ Line 12 │
│ Line 13 │
│ Line 14 │
│ Line 6 │
│ Line 7 │
│ Line 8 │
│ Line 9 ▄ │
│ Line 10 █ │
│ Line 11 █ │
│ Line 12 █ │
│ Line 13 █ │
│ Line 14 █ │
│ Line 15 █ │
│ Line 16 █ │
│ Line 17 █ │
Expand All @@ -28,11 +32,15 @@ AppHeader(full)
╭──────────────────────────────────────────────────────────────────────────────────────────────╮
│ ⊶ Shell Command Running a long command... │
│ │
│ Line 10 │
│ Line 11 │
│ Line 12 │
│ Line 13 │
│ Line 14 │
│ Line 6 │
│ Line 7 │
│ Line 8 │
│ Line 9 ▄ │
│ Line 10 █ │
│ Line 11 █ │
│ Line 12 █ │
│ Line 13 █ │
│ Line 14 █ │
│ Line 15 █ │
│ Line 16 █ │
│ Line 17 █ │
Expand All @@ -49,7 +57,12 @@ 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 6 lines hidden (Ctrl+O to show) ... │
│ Line 7 │
│ Line 8 │
│ Line 9 │
│ Line 10 │
│ Line 11 │
│ Line 12 │
│ Line 13 │
│ Line 14 │
Expand Down
4 changes: 2 additions & 2 deletions packages/cli/src/ui/components/messages/ShellToolMessage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ describe('<ShellToolMessage />', () => {
[
'respects availableTerminalHeight when it is smaller than ACTIVE_SHELL_MAX_LINES',
10,
8,
3, // 10 - 1 (static) - 6 (ASB reserved) = 3
false,
],
[
Expand All @@ -201,7 +201,7 @@ describe('<ShellToolMessage />', () => {
[
'uses full availableTerminalHeight when focused in alternate buffer mode',
100,
98, // 100 - 2
93, // 100 - 1 (static) - 6 (ASB reserved) = 93
true,
],
[
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
maxLinesLimit: maxLines,
});

if (!contentMaxLines) return false;
if (contentMaxLines === undefined) return false;

if (typeof tool.resultDisplay === 'string') {
const text = tool.resultDisplay;
Expand Down
20 changes: 14 additions & 6 deletions packages/cli/src/ui/components/messages/ToolResultDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,10 @@ import { Scrollable } from '../shared/Scrollable.js';
import { ScrollableList } from '../shared/ScrollableList.js';
import { SCROLL_TO_ITEM_END } from '../shared/VirtualizedList.js';
import { ACTIVE_SHELL_MAX_LINES } from '../../constants.js';
import { calculateToolContentMaxLines } from '../../utils/toolLayoutUtils.js';
import {
calculateToolContentMaxLines,
TOOL_RESULT_MIN_LINES_SHOWN,
} from '../../utils/toolLayoutUtils.js';
import { SubagentProgressDisplay } from './SubagentProgressDisplay.js';

// Large threshold to ensure we don't cause performance issues for very large
Expand Down Expand Up @@ -61,6 +64,11 @@ export const ToolResultDisplay: React.FC<ToolResultDisplayProps> = ({
maxLinesLimit: maxLines,
});

const effectiveMaxHeight =
availableHeight !== undefined
? Math.max(TOOL_RESULT_MIN_LINES_SHOWN, availableHeight)
: undefined;

const combinedPaddingAndBorderWidth = 4;
const childWidth = terminalWidth - combinedPaddingAndBorderWidth;

Expand Down Expand Up @@ -132,7 +140,7 @@ export const ToolResultDisplay: React.FC<ToolResultDisplayProps> = ({
if (isAlternateBuffer && Array.isArray(truncatedResultDisplay)) {
// If availableHeight is undefined, fallback to a safe default to prevents infinite loop
// where Container grows -> List renders more -> Container grows.
const limit = maxLines ?? availableHeight ?? ACTIVE_SHELL_MAX_LINES;
const limit = maxLines ?? effectiveMaxHeight ?? ACTIVE_SHELL_MAX_LINES;
const listHeight = Math.min(
// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
(truncatedResultDisplay as AnsiOutput).length,
Expand Down Expand Up @@ -205,7 +213,7 @@ export const ToolResultDisplay: React.FC<ToolResultDisplayProps> = ({
diffContent={(truncatedResultDisplay as FileDiffResult).fileDiff}
// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
filename={(truncatedResultDisplay as FileDiffResult).fileName}
availableTerminalHeight={availableHeight}
availableTerminalHeight={effectiveMaxHeight}
terminalWidth={childWidth}
/>
);
Expand All @@ -219,7 +227,7 @@ export const ToolResultDisplay: React.FC<ToolResultDisplayProps> = ({
// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
data={truncatedResultDisplay as AnsiOutput}
availableTerminalHeight={
isAlternateBuffer ? undefined : availableHeight
isAlternateBuffer ? undefined : effectiveMaxHeight
}
width={childWidth}
maxLines={isAlternateBuffer ? undefined : maxLines}
Expand All @@ -233,7 +241,7 @@ export const ToolResultDisplay: React.FC<ToolResultDisplayProps> = ({
return (
<Scrollable
width={childWidth}
maxHeight={maxLines ?? availableHeight}
maxHeight={maxLines ?? effectiveMaxHeight}
hasFocus={hasFocus} // Allow scrolling via keyboard (Shift+Up/Down)
scrollToBottom={true}
>
Expand All @@ -245,7 +253,7 @@ export const ToolResultDisplay: React.FC<ToolResultDisplayProps> = ({
return (
<Box width={childWidth} flexDirection="column">
<MaxSizedBox
maxHeight={availableHeight}
maxHeight={effectiveMaxHeight}
maxWidth={childWidth}
additionalHiddenLinesCount={hiddenLinesCount}
>
Expand Down
24 changes: 7 additions & 17 deletions packages/cli/src/ui/components/messages/__snapshots__/ShellToolMessage.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,11 +133,6 @@ exports[`<ShellToolMessage /> > Height Constraints > respects availableTerminalH
"╭──────────────────────────────────────────────────────────────────────────────╮
│ ⊶ Shell Command A shell command │
│ │
│ Line 93 │
│ Line 94 │
│ Line 95 │
│ Line 96 │
│ Line 97 │
│ Line 98 │
│ Line 99 │
│ Line 100 █ │
Expand Down Expand Up @@ -192,18 +187,13 @@ exports[`<ShellToolMessage /> > Height Constraints > uses full availableTerminal
"╭──────────────────────────────────────────────────────────────────────────────╮
│ ⊶ Shell Command A shell command (Shift+Tab to unfocus) │
│ │
│ Line 3 │
│ Line 4 │
│ Line 5 █ │
│ Line 6 █ │
│ Line 7 █ │
│ Line 8 █ │
│ Line 9 █ │
│ Line 10 █ │
│ Line 11 █ │
│ Line 12 █ │
│ Line 13 █ │
│ Line 14 █ │
│ Line 8 │
│ Line 9 │
│ Line 10 │
│ Line 11 │
│ Line 12 │
│ Line 13 │
│ Line 14 ▄ │
│ Line 15 █ │
│ Line 16 █ │
│ Line 17 █ │
Expand Down
Loading
Loading