diff --git a/packages/cli/src/ui/auth/ApiAuthDialog.tsx b/packages/cli/src/ui/auth/ApiAuthDialog.tsx index c5ac742955..2caad6fd27 100644 --- a/packages/cli/src/ui/auth/ApiAuthDialog.tsx +++ b/packages/cli/src/ui/auth/ApiAuthDialog.tsx @@ -98,7 +98,7 @@ export function ApiAuthDialog({ return ( {renderTabs()} diff --git a/packages/cli/src/ui/components/ColorsDisplay.test.tsx b/packages/cli/src/ui/components/ColorsDisplay.test.tsx index a3855c99f6..ec44bd6406 100644 --- a/packages/cli/src/ui/components/ColorsDisplay.test.tsx +++ b/packages/cli/src/ui/components/ColorsDisplay.test.tsx @@ -33,11 +33,11 @@ describe('ColorsDisplay', () => { }, border: { default: '#555555', - focused: '#0000ff', }, ui: { comment: '#666666', symbol: '#cccccc', + active: '#0000ff', dark: '#333333', focus: '#0000ff', gradient: undefined, @@ -72,12 +72,13 @@ describe('ColorsDisplay', () => { }, border: { default: '#555555', - focused: '#0000ff', }, ui: { comment: '#666666', symbol: '#cccccc', + active: '#0000ff', dark: '#333333', + focus: '#0000ff', gradient: undefined, }, status: { diff --git a/packages/cli/src/ui/components/ColorsDisplay.tsx b/packages/cli/src/ui/components/ColorsDisplay.tsx index 08ca0f7a3d..96b98bf540 100644 --- a/packages/cli/src/ui/components/ColorsDisplay.tsx +++ b/packages/cli/src/ui/components/ColorsDisplay.tsx @@ -46,11 +46,12 @@ const COLOR_DESCRIPTIONS: Record = { 'background.diff.added': 'Background for added lines in diffs', 'background.diff.removed': 'Background for removed lines in diffs', 'border.default': 'Standard border color', - 'border.focused': 'Border color when an element is focused', 'ui.comment': 'Color for code comments and metadata', 'ui.symbol': 'Color for technical symbols and UI icons', + 'ui.active': 'Border color for active or running elements', 'ui.dark': 'Deeply dimmed color for subtle UI elements', - 'ui.focus': 'Color for focused or selected UI elements (e.g. menu items)', + 'ui.focus': + 'Color for focused elements (e.g. selected menu items, focused borders)', 'status.error': 'Color for error messages and critical status', 'status.success': 'Color for success messages and positive status', 'status.warning': 'Color for warnings and cautionary status', diff --git a/packages/cli/src/ui/components/Header.test.tsx b/packages/cli/src/ui/components/Header.test.tsx index 46710c5302..46cdaf5ba0 100644 --- a/packages/cli/src/ui/components/Header.test.tsx +++ b/packages/cli/src/ui/components/Header.test.tsx @@ -103,11 +103,11 @@ describe('
', () => { }, border: { default: '', - focused: '', }, ui: { comment: '', symbol: '', + active: '', dark: '', focus: '', gradient: undefined, diff --git a/packages/cli/src/ui/components/InputPrompt.tsx b/packages/cli/src/ui/components/InputPrompt.tsx index 38b62ad927..e8a01fa716 100644 --- a/packages/cli/src/ui/components/InputPrompt.tsx +++ b/packages/cli/src/ui/components/InputPrompt.tsx @@ -1427,7 +1427,7 @@ export const InputPrompt: React.FC = ({ const borderColor = isShellFocused && !isEmbeddedShellFocused - ? (statusColor ?? theme.border.focused) + ? (statusColor ?? theme.ui.focus) : theme.border.default; return ( diff --git a/packages/cli/src/ui/components/LoadingIndicator.tsx b/packages/cli/src/ui/components/LoadingIndicator.tsx index 2d603ebbdd..f9fff9fa9b 100644 --- a/packages/cli/src/ui/components/LoadingIndicator.tsx +++ b/packages/cli/src/ui/components/LoadingIndicator.tsx @@ -79,10 +79,18 @@ export const LoadingIndicator: React.FC = ({ /> {primaryText && ( - - {thinkingIndicator} - {primaryText} - + + + {thinkingIndicator} + {primaryText} + + {primaryText === INTERACTIVE_SHELL_WAITING_PHRASE && ( + + {' '} + (press tab to focus) + + )} + )} {cancelAndTimerContent && ( <> @@ -113,10 +121,18 @@ export const LoadingIndicator: React.FC = ({ /> {primaryText && ( - - {thinkingIndicator} - {primaryText} - + + + {thinkingIndicator} + {primaryText} + + {primaryText === INTERACTIVE_SHELL_WAITING_PHRASE && ( + + {' '} + (press tab to focus) + + )} + )} {!isNarrow && cancelAndTimerContent && ( <> diff --git a/packages/cli/src/ui/components/LogoutConfirmationDialog.tsx b/packages/cli/src/ui/components/LogoutConfirmationDialog.tsx index e50d7ef568..3bcb4a9f35 100644 --- a/packages/cli/src/ui/components/LogoutConfirmationDialog.tsx +++ b/packages/cli/src/ui/components/LogoutConfirmationDialog.tsx @@ -53,7 +53,7 @@ export const LogoutConfirmationDialog: React.FC< { }); }); - it('returns symbol border for executing shell commands', () => { + it('returns active border for executing shell commands', () => { const item = { type: 'tool_group' as const, tools: [ @@ -219,7 +219,37 @@ describe('getToolGroupBorderAppearance', () => { ], id: 1, }; - // While executing shell commands, it's dim false, border symbol + // While executing shell commands, it's dim false, border active + const result = getToolGroupBorderAppearance( + item, + activeShellPtyId, + false, + [], + mockBackgroundShells, + ); + expect(result).toEqual({ + borderColor: theme.ui.active, + borderDimColor: true, + }); + }); + + it('returns focus border for focused executing shell commands', () => { + const item = { + type: 'tool_group' as const, + tools: [ + { + callId: '1', + name: SHELL_COMMAND_NAME, + description: '', + status: CoreToolCallStatus.Executing, + ptyId: activeShellPtyId, + resultDisplay: undefined, + confirmationDetails: undefined, + } as IndividualToolCallDisplay, + ], + id: 1, + }; + // When focused, it's dim false, border focus const result = getToolGroupBorderAppearance( item, activeShellPtyId, @@ -228,12 +258,12 @@ describe('getToolGroupBorderAppearance', () => { mockBackgroundShells, ); expect(result).toEqual({ - borderColor: theme.ui.symbol, + borderColor: theme.ui.focus, borderDimColor: false, }); }); - it('returns symbol border and dims color for background executing shell command when another shell is active', () => { + it('returns active border and dims color for background executing shell command when another shell is active', () => { const item = { type: 'tool_group' as const, tools: [ @@ -257,7 +287,7 @@ describe('getToolGroupBorderAppearance', () => { mockBackgroundShells, ); expect(result).toEqual({ - borderColor: theme.ui.symbol, + borderColor: theme.ui.active, borderDimColor: true, }); }); @@ -275,7 +305,7 @@ describe('getToolGroupBorderAppearance', () => { ); // Since there are no tools to inspect, it falls back to empty pending, but isCurrentlyInShellTurn=true // so it counts as pending shell. - expect(result.borderColor).toEqual(theme.ui.symbol); + expect(result.borderColor).toEqual(theme.ui.focus); // It shouldn't be dim because there are no tools to say it isEmbeddedShellFocused = false expect(result.borderDimColor).toBe(false); }); diff --git a/packages/cli/src/ui/components/__snapshots__/LoadingIndicator.test.tsx.snap b/packages/cli/src/ui/components/__snapshots__/LoadingIndicator.test.tsx.snap index d70a278827..666525e720 100644 --- a/packages/cli/src/ui/components/__snapshots__/LoadingIndicator.test.tsx.snap +++ b/packages/cli/src/ui/components/__snapshots__/LoadingIndicator.test.tsx.snap @@ -1,7 +1,7 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[` > should truncate long primary text instead of wrapping 1`] = ` -"MockRespondin This is an extremely long loading phrase that shoul… (esc to +"MockRespondin This is an extremely long loading phrase that shoul…(esc to gSpinner cancel, 5s) " `; diff --git a/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Initial-Rendering-should-render-settings-list-with-visual-indicators.snap.svg b/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Initial-Rendering-should-render-settings-list-with-visual-indicators.snap.svg index 18fa114a3e..3fb2949e3f 100644 --- a/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Initial-Rendering-should-render-settings-list-with-visual-indicators.snap.svg +++ b/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Initial-Rendering-should-render-settings-list-with-visual-indicators.snap.svg @@ -13,17 +13,17 @@ │ │ │ - ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ + ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ │ │ - │ + │ S earch to filter - │ + │ │ │ - ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ + ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │ │ │ diff --git a/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-accessibility-settings-enabled-correctly.snap.svg b/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-accessibility-settings-enabled-correctly.snap.svg index ba5175de12..fef7d89d86 100644 --- a/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-accessibility-settings-enabled-correctly.snap.svg +++ b/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-accessibility-settings-enabled-correctly.snap.svg @@ -13,17 +13,17 @@ │ │ │ - ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ + ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ │ │ - │ + │ S earch to filter - │ + │ │ │ - ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ + ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │ │ │ diff --git a/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-all-boolean-settings-disabled-correctly.snap.svg b/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-all-boolean-settings-disabled-correctly.snap.svg index ba1aa443f7..ae50c5cdef 100644 --- a/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-all-boolean-settings-disabled-correctly.snap.svg +++ b/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-all-boolean-settings-disabled-correctly.snap.svg @@ -13,17 +13,17 @@ │ │ │ - ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ + ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ │ │ - │ + │ S earch to filter - │ + │ │ │ - ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ + ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │ │ │ diff --git a/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-default-state-correctly.snap.svg b/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-default-state-correctly.snap.svg index 18fa114a3e..3fb2949e3f 100644 --- a/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-default-state-correctly.snap.svg +++ b/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-default-state-correctly.snap.svg @@ -13,17 +13,17 @@ │ │ │ - ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ + ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ │ │ - │ + │ S earch to filter - │ + │ │ │ - ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ + ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │ │ │ diff --git a/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-file-filtering-settings-configured-correctly.snap.svg b/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-file-filtering-settings-configured-correctly.snap.svg index 18fa114a3e..3fb2949e3f 100644 --- a/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-file-filtering-settings-configured-correctly.snap.svg +++ b/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-file-filtering-settings-configured-correctly.snap.svg @@ -13,17 +13,17 @@ │ │ │ - ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ + ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ │ │ - │ + │ S earch to filter - │ + │ │ │ - ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ + ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │ │ │ diff --git a/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-mixed-boolean-and-number-settings-correctly.snap.svg b/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-mixed-boolean-and-number-settings-correctly.snap.svg index ad6b79cc28..a91a27869d 100644 --- a/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-mixed-boolean-and-number-settings-correctly.snap.svg +++ b/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-mixed-boolean-and-number-settings-correctly.snap.svg @@ -13,17 +13,17 @@ │ │ │ - ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ + ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ │ │ - │ + │ S earch to filter - │ + │ │ │ - ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ + ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │ │ │ diff --git a/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-tools-and-security-settings-correctly.snap.svg b/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-tools-and-security-settings-correctly.snap.svg index 18fa114a3e..3fb2949e3f 100644 --- a/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-tools-and-security-settings-correctly.snap.svg +++ b/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-tools-and-security-settings-correctly.snap.svg @@ -13,17 +13,17 @@ │ │ │ - ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ + ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ │ │ - │ + │ S earch to filter - │ + │ │ │ - ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ + ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │ │ │ diff --git a/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-various-boolean-settings-enabled-correctly.snap.svg b/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-various-boolean-settings-enabled-correctly.snap.svg index d20034290c..681c8a4cf4 100644 --- a/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-various-boolean-settings-enabled-correctly.snap.svg +++ b/packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-various-boolean-settings-enabled-correctly.snap.svg @@ -13,17 +13,17 @@ │ │ │ - ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ + ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ │ │ - │ + │ S earch to filter - │ + │ │ │ - ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ + ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │ │ │ diff --git a/packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap b/packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap index 4b2a5aa341..c0e2d8893c 100644 --- a/packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap +++ b/packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap @@ -34,7 +34,7 @@ exports[`Initial Theme Selection > should default to a dark theme when terminal │ │ Value Name │ │ │ │ #1E1E… backgroun Main terminal background │ │ │ │ d.primary color │ │ -│ │ #2a2… backgroun Subtle background for │ │ +│ │ #313… backgroun Subtle background for │ │ │ │ d.message message blocks │ │ │ │ #313… backgroun Background for the input │ │ │ │ d.input prompt │ │ @@ -59,17 +59,17 @@ exports[`Initial Theme Selection > should default to a dark theme when terminal │ │ if blank) │ │ │ │ #3d3f51 border.def Standard border color │ │ │ │ ault │ │ -│ │ #89B4FAborder.fo Border color when an │ │ -│ │ cused element is focused │ │ │ │ #6C7086ui.comme Color for code comments and │ │ │ │ nt metadata │ │ │ │ #89DCE ui.symbol Color for technical symbols │ │ │ │ B and UI icons │ │ +│ │ #89B4F ui.active Border color for active or │ │ +│ │ A running elements │ │ │ │ #3d3f5 ui.dark Deeply dimmed color for │ │ │ │ 1 subtle UI elements │ │ -│ │ #A6E3A ui.focus Color for focused or │ │ -│ │ 1 selected UI elements (e.g. │ │ -│ │ menu items) │ │ +│ │ #A6E3A ui.focus Color for focused elements │ │ +│ │ 1 (e.g. selected menu items, │ │ +│ │ focused borders) │ │ │ │ #F38BA8status.err Color for error messages │ │ │ │ or and critical status │ │ │ │ #A6E3A1status.suc Color for success messages │ │ @@ -121,7 +121,7 @@ exports[`Initial Theme Selection > should default to a light theme when terminal │ │ Value Name │ │ │ │ #FAFA… backgroun Main terminal background │ │ │ │ d.primary color │ │ -│ │ #eae… backgroun Subtle background for │ │ +│ │ #e2e… backgroun Subtle background for │ │ │ │ d.message message blocks │ │ │ │ #e2e… backgroun Background for the input │ │ │ │ d.input prompt │ │ @@ -146,17 +146,17 @@ exports[`Initial Theme Selection > should default to a light theme when terminal │ │ if blank) │ │ │ │ #d2d6dc border.def Standard border color │ │ │ │ ault │ │ -│ │ #3B82F6border.fo Border color when an │ │ -│ │ cused element is focused │ │ │ │ #97a0b0ui.comme Color for code comments and │ │ │ │ nt metadata │ │ │ │ #06B6D ui.symbol Color for technical symbols │ │ │ │ 4 and UI icons │ │ +│ │ #3B82F ui.active Border color for active or │ │ +│ │ 6 running elements │ │ │ │ #d2d6d ui.dark Deeply dimmed color for │ │ │ │ c subtle UI elements │ │ -│ │ #3CA84 ui.focus Color for focused or │ │ -│ │ B selected UI elements (e.g. │ │ -│ │ menu items) │ │ +│ │ #3CA84 ui.focus Color for focused elements │ │ +│ │ B (e.g. selected menu items, │ │ +│ │ focused borders) │ │ │ │ #DD4C4Cstatus.err Color for error messages │ │ │ │ or and critical status │ │ │ │ #3CA84Bstatus.suc Color for success messages │ │ @@ -208,7 +208,7 @@ exports[`Initial Theme Selection > should use the theme from settings even if te │ │ Value Name │ │ │ │ #1E1E… backgroun Main terminal background │ │ │ │ d.primary color │ │ -│ │ #2a2… backgroun Subtle background for │ │ +│ │ #313… backgroun Subtle background for │ │ │ │ d.message message blocks │ │ │ │ #313… backgroun Background for the input │ │ │ │ d.input prompt │ │ @@ -233,17 +233,17 @@ exports[`Initial Theme Selection > should use the theme from settings even if te │ │ if blank) │ │ │ │ #3d3f51 border.def Standard border color │ │ │ │ ault │ │ -│ │ #89B4FAborder.fo Border color when an │ │ -│ │ cused element is focused │ │ │ │ #6C7086ui.comme Color for code comments and │ │ │ │ nt metadata │ │ │ │ #89DCE ui.symbol Color for technical symbols │ │ │ │ B and UI icons │ │ +│ │ #89B4F ui.active Border color for active or │ │ +│ │ A running elements │ │ │ │ #3d3f5 ui.dark Deeply dimmed color for │ │ │ │ 1 subtle UI elements │ │ -│ │ #A6E3A ui.focus Color for focused or │ │ -│ │ 1 selected UI elements (e.g. │ │ -│ │ menu items) │ │ +│ │ #A6E3A ui.focus Color for focused elements │ │ +│ │ 1 (e.g. selected menu items, │ │ +│ │ focused borders) │ │ │ │ #F38BA8status.err Color for error messages │ │ │ │ or and critical status │ │ │ │ #A6E3A1status.suc Color for success messages │ │ @@ -309,7 +309,7 @@ exports[`ThemeDialog Snapshots > should render correctly in theme selection mode │ │ Value Name │ │ │ │ #1E1E… backgroun Main terminal background │ │ │ │ d.primary color │ │ -│ │ #2a2… backgroun Subtle background for │ │ +│ │ #313… backgroun Subtle background for │ │ │ │ d.message message blocks │ │ │ │ #313… backgroun Background for the input │ │ │ │ d.input prompt │ │ @@ -334,17 +334,17 @@ exports[`ThemeDialog Snapshots > should render correctly in theme selection mode │ │ if blank) │ │ │ │ #3d3f51 border.def Standard border color │ │ │ │ ault │ │ -│ │ #89B4FAborder.fo Border color when an │ │ -│ │ cused element is focused │ │ │ │ #6C7086ui.comme Color for code comments and │ │ │ │ nt metadata │ │ │ │ #6C708 ui.symbol Color for technical symbols │ │ │ │ 6 and UI icons │ │ +│ │ #89B4F ui.active Border color for active or │ │ +│ │ A running elements │ │ │ │ #3d3f5 ui.dark Deeply dimmed color for │ │ │ │ 1 subtle UI elements │ │ -│ │ #A6E3A ui.focus Color for focused or │ │ -│ │ 1 selected UI elements (e.g. │ │ -│ │ menu items) │ │ +│ │ #A6E3A ui.focus Color for focused elements │ │ +│ │ 1 (e.g. selected menu items, │ │ +│ │ focused borders) │ │ │ │ #F38BA8status.err Color for error messages │ │ │ │ or and critical status │ │ │ │ #A6E3A1status.suc Color for success messages │ │ diff --git a/packages/cli/src/ui/components/messages/ToolShared.tsx b/packages/cli/src/ui/components/messages/ToolShared.tsx index 4831e07279..21f15f70df 100644 --- a/packages/cli/src/ui/components/messages/ToolShared.tsx +++ b/packages/cli/src/ui/components/messages/ToolShared.tsx @@ -123,7 +123,7 @@ export const FocusHint: React.FC<{ return ( - + {isThisShellFocused ? `(${formatCommand(Command.UNFOCUS_SHELL_INPUT)} to unfocus)` : `(${formatCommand(Command.FOCUS_SHELL_INPUT)} to focus)`} diff --git a/packages/cli/src/ui/components/messages/UserMessage.tsx b/packages/cli/src/ui/components/messages/UserMessage.tsx index 6453ab94c1..6609a7d1c4 100644 --- a/packages/cli/src/ui/components/messages/UserMessage.tsx +++ b/packages/cli/src/ui/components/messages/UserMessage.tsx @@ -29,7 +29,7 @@ export const UserMessage: React.FC = ({ text, width }) => { const config = useConfig(); const useBackgroundColor = config.getUseBackgroundColor(); - const textColor = isSlashCommand ? theme.text.accent : theme.text.secondary; + const textColor = isSlashCommand ? theme.text.accent : theme.text.primary; const displayText = useMemo(() => { if (!text) return text; diff --git a/packages/cli/src/ui/components/shared/BaseSelectionList.test.tsx b/packages/cli/src/ui/components/shared/BaseSelectionList.test.tsx index 7a89531890..8fffd4c5fc 100644 --- a/packages/cli/src/ui/components/shared/BaseSelectionList.test.tsx +++ b/packages/cli/src/ui/components/shared/BaseSelectionList.test.tsx @@ -19,7 +19,6 @@ vi.mock('../../hooks/useSelectionList.js'); const mockTheme = { text: { primary: 'COLOR_PRIMARY', secondary: 'COLOR_SECONDARY' }, - status: { success: 'COLOR_SUCCESS' }, ui: { focus: 'COLOR_FOCUS' }, background: { focus: 'COLOR_FOCUS_BG' }, } as typeof theme; @@ -27,7 +26,6 @@ const mockTheme = { vi.mock('../../semantic-colors.js', () => ({ theme: { text: { primary: 'COLOR_PRIMARY', secondary: 'COLOR_SECONDARY' }, - status: { success: 'COLOR_SUCCESS' }, ui: { focus: 'COLOR_FOCUS' }, background: { focus: 'COLOR_FOCUS_BG' }, }, diff --git a/packages/cli/src/ui/components/shared/BaseSettingsDialog.tsx b/packages/cli/src/ui/components/shared/BaseSettingsDialog.tsx index 455d4e3e7d..69d435a261 100644 --- a/packages/cli/src/ui/components/shared/BaseSettingsDialog.tsx +++ b/packages/cli/src/ui/components/shared/BaseSettingsDialog.tsx @@ -451,7 +451,7 @@ export function BaseSettingsDialog({ editingKey ? theme.border.default : focusSection === 'settings' - ? theme.border.focused + ? theme.ui.focus : theme.border.default } paddingX={1} diff --git a/packages/cli/src/ui/hooks/__snapshots__/usePhraseCycler.test.tsx.snap b/packages/cli/src/ui/hooks/__snapshots__/usePhraseCycler.test.tsx.snap index 77d028caa7..ad600c78da 100644 --- a/packages/cli/src/ui/hooks/__snapshots__/usePhraseCycler.test.tsx.snap +++ b/packages/cli/src/ui/hooks/__snapshots__/usePhraseCycler.test.tsx.snap @@ -2,10 +2,10 @@ exports[`usePhraseCycler > should prioritize interactive shell waiting over normal waiting immediately 1`] = `"Waiting for user confirmation..."`; -exports[`usePhraseCycler > should prioritize interactive shell waiting over normal waiting immediately 2`] = `"Interactive shell awaiting input... press tab to focus shell"`; +exports[`usePhraseCycler > should prioritize interactive shell waiting over normal waiting immediately 2`] = `"Interactive shell awaiting input..."`; exports[`usePhraseCycler > should reset phrase when transitioning from waiting to active 1`] = `"Waiting for user confirmation..."`; exports[`usePhraseCycler > should show "Waiting for user confirmation..." when isWaiting is true 1`] = `"Waiting for user confirmation..."`; -exports[`usePhraseCycler > should show interactive shell waiting message immediately when isInteractiveShellWaiting is true 1`] = `"Interactive shell awaiting input... press tab to focus shell"`; +exports[`usePhraseCycler > should show interactive shell waiting message immediately when isInteractiveShellWaiting is true 1`] = `"Interactive shell awaiting input..."`; diff --git a/packages/cli/src/ui/hooks/usePhraseCycler.ts b/packages/cli/src/ui/hooks/usePhraseCycler.ts index 8ddab6eef9..1be49e8baa 100644 --- a/packages/cli/src/ui/hooks/usePhraseCycler.ts +++ b/packages/cli/src/ui/hooks/usePhraseCycler.ts @@ -11,7 +11,7 @@ import type { LoadingPhrasesMode } from '../../config/settings.js'; export const PHRASE_CHANGE_INTERVAL_MS = 15000; export const INTERACTIVE_SHELL_WAITING_PHRASE = - 'Interactive shell awaiting input... press tab to focus shell'; + 'Interactive shell awaiting input...'; /** * Custom hook to manage cycling through loading phrases. diff --git a/packages/cli/src/ui/themes/no-color.ts b/packages/cli/src/ui/themes/no-color.ts index 2d24c75f4d..28b2a4e858 100644 --- a/packages/cli/src/ui/themes/no-color.ts +++ b/packages/cli/src/ui/themes/no-color.ts @@ -49,11 +49,11 @@ const noColorSemanticColors: SemanticColors = { }, border: { default: '', - focused: '', }, ui: { comment: '', symbol: '', + active: '', dark: '', focus: '', gradient: [], diff --git a/packages/cli/src/ui/themes/semantic-tokens.ts b/packages/cli/src/ui/themes/semantic-tokens.ts index a6fb8819cf..b5e9140156 100644 --- a/packages/cli/src/ui/themes/semantic-tokens.ts +++ b/packages/cli/src/ui/themes/semantic-tokens.ts @@ -26,11 +26,11 @@ export interface SemanticColors { }; border: { default: string; - focused: string; }; ui: { comment: string; symbol: string; + active: string; dark: string; focus: string; gradient: string[] | undefined; @@ -62,11 +62,11 @@ export const lightSemanticColors: SemanticColors = { }, border: { default: lightTheme.DarkGray, - focused: lightTheme.AccentBlue, }, ui: { comment: lightTheme.Comment, symbol: lightTheme.Gray, + active: lightTheme.AccentBlue, dark: lightTheme.DarkGray, focus: lightTheme.AccentGreen, gradient: lightTheme.GradientColors, @@ -98,11 +98,11 @@ export const darkSemanticColors: SemanticColors = { }, border: { default: darkTheme.DarkGray, - focused: darkTheme.AccentBlue, }, ui: { comment: darkTheme.Comment, symbol: darkTheme.Gray, + active: darkTheme.AccentBlue, dark: darkTheme.DarkGray, focus: darkTheme.AccentGreen, gradient: darkTheme.GradientColors, diff --git a/packages/cli/src/ui/themes/solarized-dark.ts b/packages/cli/src/ui/themes/solarized-dark.ts index e5a14d80f2..cef9fd9d22 100644 --- a/packages/cli/src/ui/themes/solarized-dark.ts +++ b/packages/cli/src/ui/themes/solarized-dark.ts @@ -47,11 +47,11 @@ const semanticColors: SemanticColors = { }, border: { default: '#073642', - focused: '#586e75', }, ui: { comment: '#586e75', symbol: '#93a1a1', + active: '#268bd2', dark: '#073642', focus: '#859900', gradient: ['#268bd2', '#2aa198', '#859900'], diff --git a/packages/cli/src/ui/themes/solarized-light.ts b/packages/cli/src/ui/themes/solarized-light.ts index 866ec3f035..b9ba313b1b 100644 --- a/packages/cli/src/ui/themes/solarized-light.ts +++ b/packages/cli/src/ui/themes/solarized-light.ts @@ -47,11 +47,11 @@ const semanticColors: SemanticColors = { }, border: { default: '#eee8d5', - focused: '#93a1a1', }, ui: { comment: '#93a1a1', symbol: '#586e75', + active: '#268bd2', dark: '#eee8d5', focus: '#859900', gradient: ['#268bd2', '#2aa198', '#859900'], diff --git a/packages/cli/src/ui/themes/theme.ts b/packages/cli/src/ui/themes/theme.ts index 55edcb8018..7785e9bda0 100644 --- a/packages/cli/src/ui/themes/theme.ts +++ b/packages/cli/src/ui/themes/theme.ts @@ -10,7 +10,6 @@ import type { SemanticColors } from './semantic-tokens.js'; import type { CustomTheme } from '@google/gemini-cli-core'; import { - DEFAULT_BACKGROUND_OPACITY, DEFAULT_INPUT_BACKGROUND_OPACITY, DEFAULT_SELECTION_OPACITY, DEFAULT_BORDER_OPACITY, @@ -208,7 +207,7 @@ export const lightTheme: ColorsTheme = { MessageBackground: interpolateColor( '#FAFAFA', '#97a0b0', - DEFAULT_BACKGROUND_OPACITY, + DEFAULT_INPUT_BACKGROUND_OPACITY, ), FocusBackground: interpolateColor( '#FAFAFA', @@ -242,7 +241,7 @@ export const darkTheme: ColorsTheme = { MessageBackground: interpolateColor( '#1E1E2E', '#6C7086', - DEFAULT_BACKGROUND_OPACITY, + DEFAULT_INPUT_BACKGROUND_OPACITY, ), FocusBackground: interpolateColor( '#1E1E2E', @@ -313,7 +312,7 @@ export class Theme { interpolateColor( this.colors.Background, this.colors.Gray, - DEFAULT_BACKGROUND_OPACITY, + DEFAULT_INPUT_BACKGROUND_OPACITY, ), input: this.colors.InputBackground ?? @@ -336,11 +335,11 @@ export class Theme { }, border: { default: this.colors.DarkGray, - focused: this.colors.AccentBlue, }, ui: { comment: this.colors.Gray, symbol: this.colors.AccentCyan, + active: this.colors.AccentBlue, dark: this.colors.DarkGray, focus: this.colors.FocusColor ?? this.colors.AccentGreen, gradient: this.colors.GradientColors, @@ -449,7 +448,7 @@ export function createCustomTheme(customTheme: CustomTheme): Theme { MessageBackground: interpolateColor( customTheme.background?.primary ?? customTheme.Background ?? '', customTheme.text?.secondary ?? customTheme.Gray ?? '', - DEFAULT_BACKGROUND_OPACITY, + DEFAULT_INPUT_BACKGROUND_OPACITY, ), FocusBackground: interpolateColor( customTheme.background?.primary ?? customTheme.Background ?? '', @@ -621,11 +620,11 @@ export function createCustomTheme(customTheme: CustomTheme): Theme { }, border: { default: colors.DarkGray, - focused: customTheme.border?.focused ?? colors.AccentBlue, }, ui: { comment: customTheme.ui?.comment ?? colors.Comment, symbol: customTheme.ui?.symbol ?? colors.Gray, + active: customTheme.ui?.active ?? colors.AccentBlue, dark: colors.DarkGray, focus: colors.FocusColor ?? colors.AccentGreen, gradient: customTheme.ui?.gradient ?? colors.GradientColors, diff --git a/packages/cli/src/ui/utils/__snapshots__/borderStyles-MainContent-tool-group-border-SVG-snapshots-should-render-SVG-snapshot-for-a-shell-tool.snap.svg b/packages/cli/src/ui/utils/__snapshots__/borderStyles-MainContent-tool-group-border-SVG-snapshots-should-render-SVG-snapshot-for-a-shell-tool.snap.svg index 0ba0125a62..e374b5ab31 100644 --- a/packages/cli/src/ui/utils/__snapshots__/borderStyles-MainContent-tool-group-border-SVG-snapshots-should-render-SVG-snapshot-for-a-shell-tool.snap.svg +++ b/packages/cli/src/ui/utils/__snapshots__/borderStyles-MainContent-tool-group-border-SVG-snapshots-should-render-SVG-snapshot-for-a-shell-tool.snap.svg @@ -109,15 +109,15 @@ ░ ░ ░ - ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ - │ + ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ + │ ⊷ run_shell_command - │ - │ - │ - │ + │ + │ + │ + │ Running command... - │ - ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ + │ + ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ \ No newline at end of file diff --git a/packages/cli/src/ui/utils/borderStyles.test.tsx b/packages/cli/src/ui/utils/borderStyles.test.tsx index 91b2497f7f..bf39962e2a 100644 --- a/packages/cli/src/ui/utils/borderStyles.test.tsx +++ b/packages/cli/src/ui/utils/borderStyles.test.tsx @@ -60,7 +60,7 @@ describe('getToolGroupBorderAppearance', () => { expect(appearance.borderDimColor).toBe(true); }); - it('should use symbol color for shell tools', () => { + it('should use active color for shell tools', () => { const item = { type: 'tool_group' as const, tools: [ @@ -73,9 +73,28 @@ describe('getToolGroupBorderAppearance', () => { ] as IndividualToolCallDisplay[], }; const appearance = getToolGroupBorderAppearance(item, undefined, false, []); - expect(appearance.borderColor).toBe(theme.ui.symbol); + expect(appearance.borderColor).toBe(theme.ui.active); expect(appearance.borderDimColor).toBe(true); }); + + it('should use focus color for focused shell tools', () => { + const ptyId = 123; + const item = { + type: 'tool_group' as const, + tools: [ + { + name: 'run_shell_command', + status: CoreToolCallStatus.Executing, + resultDisplay: '', + callId: 'call-1', + ptyId, + }, + ] as IndividualToolCallDisplay[], + }; + const appearance = getToolGroupBorderAppearance(item, ptyId, true, []); + expect(appearance.borderColor).toBe(theme.ui.focus); + expect(appearance.borderDimColor).toBe(false); + }); }); describe('MainContent tool group border SVG snapshots', () => { diff --git a/packages/cli/src/ui/utils/borderStyles.ts b/packages/cli/src/ui/utils/borderStyles.ts index 276d4a2502..7b7b767734 100644 --- a/packages/cli/src/ui/utils/borderStyles.ts +++ b/packages/cli/src/ui/utils/borderStyles.ts @@ -113,9 +113,10 @@ export function getToolGroupBorderAppearance( isCurrentlyInShellTurn && !!embeddedShellFocused); - const borderColor = - (isShell && isPending) || isEffectivelyFocused - ? theme.ui.symbol + const borderColor = isEffectivelyFocused + ? theme.ui.focus + : isShell && isPending + ? theme.ui.active : isPending ? theme.status.warning : theme.border.default; diff --git a/packages/core/src/config/config.ts b/packages/core/src/config/config.ts index 13ddde499d..c663df3d02 100644 --- a/packages/core/src/config/config.ts +++ b/packages/core/src/config/config.ts @@ -250,11 +250,11 @@ export interface CustomTheme { }; border?: { default?: string; - focused?: string; }; ui?: { comment?: string; symbol?: string; + active?: string; focus?: string; gradient?: string[]; };