fix(ui): move margin from top to bottom in ToolGroupMessage (#17198)

This commit is contained in:
imadraude
2026-02-18 23:51:03 +02:00
committed by GitHub
parent f961e0d6b1
commit e7f97dfa44
7 changed files with 55 additions and 53 deletions
@@ -100,10 +100,11 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
displayStatus !== ToolCallStatus.Confirming
);
}),
[toolCalls],
);
const staticHeight = /* border */ 2 + /* marginBottom */ 1;
const staticHeight = /* border */ 2;
// If all tools are filtered out (e.g., in-progress AskUser tools, confirming tools),
// only render if we need to close a border from previous
@@ -147,6 +148,7 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
*/
width={terminalWidth}
paddingRight={TOOL_MESSAGE_HORIZONTAL_MARGIN}
marginBottom={1}
>
{visibleToolCalls.map((tool, index) => {
const isFirst = index === 0;
@@ -5,7 +5,8 @@ exports[`<ToolGroupMessage /> > Ask User Filtering > filtering logic for status=
│ x Ask User │
│ │
│ error message │
╰──────────────────────────────────────────────────────────────────────────╯"
╰──────────────────────────────────────────────────────────────────────────╯
"
`;
exports[`<ToolGroupMessage /> > Ask User Filtering > filtering logic for status='success' and hasResult='test result' 1`] = `
@@ -13,7 +14,8 @@ exports[`<ToolGroupMessage /> > Ask User Filtering > filtering logic for status=
│ ✓ Ask User │
│ │
│ test result │
╰──────────────────────────────────────────────────────────────────────────╯"
╰──────────────────────────────────────────────────────────────────────────╯
"
`;
exports[`<ToolGroupMessage /> > Ask User Filtering > shows other tools when ask_user is filtered out 1`] = `
@@ -21,7 +23,8 @@ exports[`<ToolGroupMessage /> > Ask User Filtering > shows other tools when ask_
│ ✓ other-tool A tool for testing │
│ │
│ Test result │
╰──────────────────────────────────────────────────────────────────────────╯"
╰──────────────────────────────────────────────────────────────────────────╯
"
`;
exports[`<ToolGroupMessage /> > Border Color Logic > uses gray border when all tools are successful and no shell commands 1`] = `
@@ -33,7 +36,8 @@ exports[`<ToolGroupMessage /> > Border Color Logic > uses gray border when all t
│ ✓ another-tool A tool for testing │
│ │
│ Test result │
╰──────────────────────────────────────────────────────────────────────────╯"
╰──────────────────────────────────────────────────────────────────────────╯
"
`;
exports[`<ToolGroupMessage /> > Border Color Logic > uses yellow border for shell commands even when successful 1`] = `
@@ -41,7 +45,8 @@ exports[`<ToolGroupMessage /> > Border Color Logic > uses yellow border for shel
│ ✓ run_shell_command A tool for testing │
│ │
│ Test result │
╰──────────────────────────────────────────────────────────────────────────╯"
╰──────────────────────────────────────────────────────────────────────────╯
"
`;
exports[`<ToolGroupMessage /> > Golden Snapshots > renders empty tool calls array 1`] = `""`;
@@ -50,13 +55,13 @@ exports[`<ToolGroupMessage /> > Golden Snapshots > renders header when scrolled
"╭──────────────────────────────────────────────────────────────────────────╮
│ ✓ tool-1 Description 1. This is a long description that will need to b… │
│──────────────────────────────────────────────────────────────────────────│
line5
│ │ █
│ ✓ tool-2 Description 2 │ █
│ │ █
│ line1 │ █
│ line2 │ █
╰──────────────────────────────────────────────────────────────────────────╯ █"
╰──────────────────────────────────────────────────────────────────────────╯ █
█"
`;
exports[`<ToolGroupMessage /> > Golden Snapshots > renders mixed tool calls including shell command 1`] = `
@@ -68,7 +73,8 @@ exports[`<ToolGroupMessage /> > Golden Snapshots > renders mixed tool calls incl
│ ⊷ run_shell_command Run command │
│ │
│ Test result │
╰──────────────────────────────────────────────────────────────────────────╯"
╰──────────────────────────────────────────────────────────────────────────╯
"
`;
exports[`<ToolGroupMessage /> > Golden Snapshots > renders multiple tool calls with different statuses (only visible ones) 1`] = `
@@ -80,7 +86,8 @@ exports[`<ToolGroupMessage /> > Golden Snapshots > renders multiple tool calls w
│ x error-tool This tool failed │
│ │
│ Test result │
╰──────────────────────────────────────────────────────────────────────────╯"
╰──────────────────────────────────────────────────────────────────────────╯
"
`;
exports[`<ToolGroupMessage /> > Golden Snapshots > renders single successful tool call 1`] = `
@@ -88,7 +95,8 @@ exports[`<ToolGroupMessage /> > Golden Snapshots > renders single successful too
│ ✓ test-tool A tool for testing │
│ │
│ Test result │
╰──────────────────────────────────────────────────────────────────────────╯"
╰──────────────────────────────────────────────────────────────────────────╯
"
`;
exports[`<ToolGroupMessage /> > Golden Snapshots > renders tool call with outputFile 1`] = `
@@ -97,16 +105,17 @@ exports[`<ToolGroupMessage /> > Golden Snapshots > renders tool call with output
│ │
│ Test result │
│ Output too long and was saved to: /path/to/output.txt │
╰──────────────────────────────────────────────────────────────────────────╯"
╰──────────────────────────────────────────────────────────────────────────╯
"
`;
exports[`<ToolGroupMessage /> > Golden Snapshots > renders two tool groups where only the last line of the previous group is visible 1`] = `
"──────────────────────────────────────────────────────────────────────────
╭──────────────────────────────────────────────────────────────────────────╮
"──────────────────────────────────────────────────────────────────────────
│ ✓ tool-2 Description 2 │
│ │
│ line1 │
╰──────────────────────────────────────────────────────────────────────────╯ █"
│ │
│ line1 │
╰──────────────────────────────────────────────────────────────────────────╯ █
█"
`;
exports[`<ToolGroupMessage /> > Golden Snapshots > renders with limited terminal height 1`] = `
@@ -118,7 +127,8 @@ exports[`<ToolGroupMessage /> > Golden Snapshots > renders with limited terminal
│ ✓ another-tool Another tool │
│ │
│ More output here │
╰──────────────────────────────────────────────────────────────────────────╯"
╰──────────────────────────────────────────────────────────────────────────╯
"
`;
exports[`<ToolGroupMessage /> > Golden Snapshots > renders with narrow terminal width 1`] = `
@@ -126,7 +136,8 @@ exports[`<ToolGroupMessage /> > Golden Snapshots > renders with narrow terminal
│ ✓ very-long-tool-name-that-mig… │
│ │
│ Test result │
╰──────────────────────────────────╯"
╰──────────────────────────────────╯
"
`;
exports[`<ToolGroupMessage /> > Height Calculation > calculates available height correctly with multiple tools with results 1`] = `
@@ -141,5 +152,6 @@ exports[`<ToolGroupMessage /> > Height Calculation > calculates available height
│ │
│ ✓ test-tool A tool for testing │
│ │
╰──────────────────────────────────────────────────────────────────────────╯"
╰──────────────────────────────────────────────────────────────────────────╯
"
`;
@@ -4,11 +4,13 @@ exports[`ToolResultDisplay Overflow > should display "press ctrl-o" hint when co
"╭──────────────────────────────────────────────────────────────────────────╮
│ ✓ test-tool a test tool │
│ │
│ ... first 46 lines hidden ... │
│ ... first 45 lines hidden ... │
│ line 46 │
│ line 47 │
│ line 48 │
│ line 49 │
│ line 50 │
╰──────────────────────────────────────────────────────────────────────────╯
Press ctrl-o to show more lines"
Press ctrl-o to show more lines
"
`;
@@ -2,7 +2,7 @@
exports[`ToolMessage Sticky Header Regression > verifies that ShellToolMessage in a ToolGroupMessage in a ScrollableList has sticky headers 1`] = `
"╭────────────────────────────────────────────────────────────────────────╮ █
│ ✓ Shell Command Description for Shell Command │
│ ✓ Shell Command Description for Shell Command │
│ │
│ shell-01 │
│ shell-02 │"
@@ -10,7 +10,7 @@ exports[`ToolMessage Sticky Header Regression > verifies that ShellToolMessage i
exports[`ToolMessage Sticky Header Regression > verifies that ShellToolMessage in a ToolGroupMessage in a ScrollableList has sticky headers 2`] = `
"╭────────────────────────────────────────────────────────────────────────╮
│ ✓ Shell Command Description for Shell Command │
│ ✓ Shell Command Description for Shell Command │
│────────────────────────────────────────────────────────────────────────│ █
│ shell-06 │ ▀
│ shell-07 │"