clone/gemini-cli
1
0
Fork 0
mirror of https://github.com/google-gemini/gemini-cli.git synced 2026-06-01 19:03:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(cli): refine tool display aesthetics for legacy UI parity

Browse Source
This commit is contained in:
Michael Bleigh
2026-04-14 00:05:45 -07:00
parent de9a98c6b5
commit af5dfc445a
3 changed files with 29 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/cli/src/ui/components/messages/ToolGroupDisplay.tsx
View File

@@ -149,11 +149,17 @@ const ToolDisplayMessage: React.FC<ToolDisplayMessageProps> = ({ tool }) => {
}
if (format === 'notice') {
// If the name is part of the description (typical for topic updates),
// suppress the bold name to avoid redundancy and match legacy UI.
const isRedundant = !!(name && description?.includes(`"${name}"`));
return (
<Box paddingLeft={2} flexDirection="column">
<Text color={theme.text.primary} bold wrap="truncate-end">
{name || 'Topic'}:
</Text>
{name && !isRedundant && (
<Text color={theme.text.primary} bold wrap="truncate-end">
{name}:
</Text>
)}
{description && (
<Text color={theme.text.secondary} wrap="wrap">
{description}
@@ -190,8 +196,8 @@ const ToolDisplayMessage: React.FC<ToolDisplayMessageProps> = ({ tool }) => {
// Box format (full)
return (
<Box flexDirection="column" paddingLeft={2} marginBottom={1}>
<Box flexDirection="row">
<Box flexDirection="column" paddingLeft={0}>
<Box flexDirection="row" paddingLeft={1}>
<ToolStatusIndicator
status={status}
name={name || tool.originalRequestName || ''}
@@ -203,12 +209,12 @@ const ToolDisplayMessage: React.FC<ToolDisplayMessageProps> = ({ tool }) => {
{description && <Text color={theme.text.secondary}>{description}</Text>}
</Box>
{resultSummary && !result && (
<Box paddingLeft={2}>
<Text color={theme.text.accent}>→ {resultSummary}</Text>
<Box paddingLeft={1} marginTop={1}>
<Text color={theme.text.primary}>{resultSummary}</Text>
</Box>
)}
{result && (
<Box paddingLeft={2} marginTop={0}>
<Box paddingLeft={1} marginTop={1}>
<ToolResultDisplayContent content={result} summary={resultSummary} />
</Box>
)}
@@ -231,10 +237,10 @@ const ToolResultDisplayContent: React.FC<ToolResultDisplayContentProps> = ({
case 'text':
return (
<Box flexDirection="column">
<Text color={theme.text.secondary}>{content.text}</Text>
<Text color={theme.text.primary}>{content.text}</Text>
{summary && (
<Box marginTop={1}>
<Text color={theme.text.secondary}>{summary}</Text>
<Box marginTop={0}>
<Text color={theme.text.primary}>{summary}</Text>
</Box>
)}
</Box>
@@ -243,7 +249,7 @@ const ToolResultDisplayContent: React.FC<ToolResultDisplayContentProps> = ({
// Simplified diff display for now
return (
<Box flexDirection="column">
{summary && <Text color={theme.text.accent}>{summary}</Text>}
{summary && <Text color={theme.text.primary}>{summary}</Text>}
<Text color={theme.text.secondary}>
{`[Diff Display: ${content.beforeText.length} -> ${content.afterText.length} chars]`}
</Text>

20
packages/cli/src/ui/components/messages/__snapshots__/ToolGroupDisplay.test.tsx.snap
View File

@@ -10,8 +10,7 @@ exports[`<ToolGroupDisplay /> > Border & Margin Logic > forces top border on box
Test description
╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✓ Tool in Box Test description │
│ │
│ ✓ Tool in Box Test description │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
"
`;
@@ -24,8 +23,7 @@ exports[`<ToolGroupDisplay /> > Golden Snapshots > renders error message when di
exports[`<ToolGroupDisplay /> > Golden Snapshots > renders in boxed mode (full verbosity) 1`] = `
"
╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✓ Tool A Test description │
│ │
│ ✓ Tool A Test description │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
"
`;
@@ -42,8 +40,7 @@ exports[`<ToolGroupDisplay /> > Golden Snapshots > renders notices at the top (h
New Topic
╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✓ Tool A Test description │
│ │
│ ✓ Tool A Test description │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
"
`;
@@ -63,9 +60,9 @@ exports[`<ToolGroupDisplay /> > Result Formatting > renders compact tools with s
exports[`<ToolGroupDisplay /> > Result Formatting > renders placeholder for diff results 1`] = `
"
╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✓ test-tool Test description │
│ [Diff Display: 3 -> 3 chars] │
│ ✓ test-tool Test description │
│ │
│ [Diff Display: 3 -> 3 chars] │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
"
`;
@@ -73,11 +70,10 @@ exports[`<ToolGroupDisplay /> > Result Formatting > renders placeholder for diff
exports[`<ToolGroupDisplay /> > Result Formatting > renders text results with summary below 1`] = `
"
╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✓ test-tool Test description │
│ Detailed output │
│ │
│ Short summary │
│ ✓ test-tool Test description │
│ │
│ Detailed output │
│ Short summary │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
"
`;

5
packages/core/src/tools/shell.ts
View File

@@ -934,13 +934,14 @@ export class ShellToolInvocation extends BaseToolInvocation<
return {
llmContent,
display: {
name: this.getDisplayTitle(),
name: this._toolDisplayName,
description: this.getDescription(),
resultSummary: displayResultSummary,
result:
typeof returnDisplay === 'string'
? { type: 'text', text: returnDisplay }
: undefined,
: // TODO: Add support for terminal display type (AnsiOutput)
undefined,
},
returnDisplay,
data,