MediaMetz/gemini-cli
1
0
Fork 0
mirror of https://github.com/google-gemini/gemini-cli.git synced 2026-04-22 11:04:42 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): improve user message visibility and refine focus hints

Browse Source
This commit is contained in:
Keith Guerin
2026-03-01 01:56:57 -08:00
parent e5eac6597f
commit 716266d91d
35 changed files with 183 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/cli/src/ui/auth/ApiAuthDialog.tsx
+1 -1
View File
@@ -98,7 +98,7 @@ export function ApiAuthDialog({
return (
<Box
borderStyle="round"
borderColor={theme.border.focused}
borderColor={theme.ui.focus}
flexDirection="column"
padding={1}
width="100%"
packages/cli/src/ui/auth/AuthDialog.tsx
+2 -2
View File
@@ -193,7 +193,7 @@ export function AuthDialog({
return (
<Box
borderStyle="round"
borderColor={theme.border.focused}
borderColor={theme.ui.focus}
flexDirection="row"
padding={1}
width="100%"
@@ -209,7 +209,7 @@ export function AuthDialog({
return (
<Box
borderStyle="round"
borderColor={theme.border.focused}
borderColor={theme.ui.focus}
flexDirection="row"
padding={1}
width="100%"
packages/cli/src/ui/components/BackgroundShellDisplay.tsx
+2 -2
View File
@@ -427,7 +427,7 @@ export const BackgroundShellDisplay = ({
height="100%"
width="100%"
borderStyle="single"
borderColor={isFocused ? theme.border.focused : undefined}
borderColor={isFocused ? theme.ui.focus : undefined}
>
<Box
flexDirection="row"
@@ -438,7 +438,7 @@ export const BackgroundShellDisplay = ({
borderRight={false}
borderTop={false}
paddingX={1}
borderColor={isFocused ? theme.border.focused : undefined}
borderColor={isFocused ? theme.ui.focus : undefined}
>
<Box flexDirection="row">
{renderTabs()}
packages/cli/src/ui/components/ColorsDisplay.test.tsx
+3 -2
View File
@@ -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: {
packages/cli/src/ui/components/ColorsDisplay.tsx
+3 -2
View File
@@ -46,11 +46,12 @@ const COLOR_DESCRIPTIONS: Record<string, string> = {
'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',
packages/cli/src/ui/components/Header.test.tsx
+1 -1
View File
@@ -103,11 +103,11 @@ describe('<Header />', () => {
},
border: {
default: '',
focused: '',
},
ui: {
comment: '',
symbol: '',
active: '',
dark: '',
focus: '',
gradient: undefined,
packages/cli/src/ui/components/InputPrompt.tsx
+1 -1
View File
@@ -1427,7 +1427,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
const borderColor =
isShellFocused && !isEmbeddedShellFocused
? (statusColor ?? theme.border.focused)
? (statusColor ?? theme.ui.focus)
: theme.border.default;
return (
packages/cli/src/ui/components/LoadingIndicator.tsx
+24 -8
View File
@@ -79,10 +79,18 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
/>
</Box>
{primaryText && (
<Text color={theme.text.primary} italic wrap="truncate-end">
{thinkingIndicator}
{primaryText}
</Text>
<Box flexShrink={1}>
<Text color={theme.text.primary} italic wrap="truncate-end">
{thinkingIndicator}
{primaryText}
</Text>
{primaryText === INTERACTIVE_SHELL_WAITING_PHRASE && (
<Text color={theme.ui.active} italic>
{' '}
(press tab to focus)
</Text>
)}
</Box>
)}
{cancelAndTimerContent && (
<>
@@ -113,10 +121,18 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
/>
</Box>
{primaryText && (
<Text color={theme.text.primary} italic wrap="truncate-end">
{thinkingIndicator}
{primaryText}
</Text>
<Box flexShrink={1}>
<Text color={theme.text.primary} italic wrap="truncate-end">
{thinkingIndicator}
{primaryText}
</Text>
{primaryText === INTERACTIVE_SHELL_WAITING_PHRASE && (
<Text color={theme.ui.active} italic>
{' '}
(press tab to focus)
</Text>
)}
</Box>
)}
{!isNarrow && cancelAndTimerContent && (
<>
packages/cli/src/ui/components/LogoutConfirmationDialog.tsx
+1 -1
View File
@@ -53,7 +53,7 @@ export const LogoutConfirmationDialog: React.FC<
<Box
flexDirection="column"
borderStyle="round"
borderColor={theme.border.focused}
borderColor={theme.ui.focus}
padding={1}
flexGrow={1}
marginLeft={1}
packages/cli/src/ui/components/MainContent.test.tsx
+36 -6
View File
@@ -203,7 +203,7 @@ describe('getToolGroupBorderAppearance', () => {
});
});
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);
});
packages/cli/src/ui/components/__snapshots__/LoadingIndicator.test.tsx.snap
+1 -1
View File
@@ -1,7 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`<LoadingIndicator /> > 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)
"
`;
packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Initial-Rendering-should-render-settings-list-with-visual-indicators.snap.svg
+4 -4
View File
@@ -13,17 +13,17 @@
<text x="0" y="53" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="53" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="70" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="70" fill="#89b4fa" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="18" y="70" fill="#a6e3a1" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="891" y="70" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="87" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="87" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="87" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="36" y="85" width="9" height="17" fill="#ffffff" />
<text x="36" y="87" fill="#000000" textLength="9" lengthAdjust="spacingAndGlyphs">S</text>
<text x="45" y="87" fill="#6c7086" textLength="135" lengthAdjust="spacingAndGlyphs">earch to filter</text>
<text x="873" y="87" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="873" y="87" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="87" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="104" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="104" fill="#89b4fa" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
<text x="18" y="104" fill="#a6e3a1" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
<text x="891" y="104" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="121" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="121" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-accessibility-settings-enabled-correctly.snap.svg
+4 -4
View File
@@ -13,17 +13,17 @@
<text x="0" y="53" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="53" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="70" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="70" fill="#89b4fa" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="18" y="70" fill="#a6e3a1" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="891" y="70" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="87" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="87" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="87" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="36" y="85" width="9" height="17" fill="#ffffff" />
<text x="36" y="87" fill="#000000" textLength="9" lengthAdjust="spacingAndGlyphs">S</text>
<text x="45" y="87" fill="#6c7086" textLength="135" lengthAdjust="spacingAndGlyphs">earch to filter</text>
<text x="873" y="87" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="873" y="87" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="87" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="104" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="104" fill="#89b4fa" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
<text x="18" y="104" fill="#a6e3a1" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
<text x="891" y="104" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="121" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="121" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-all-boolean-settings-disabled-correctly.snap.svg
+4 -4
View File
@@ -13,17 +13,17 @@
<text x="0" y="53" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="53" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="70" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="70" fill="#89b4fa" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="18" y="70" fill="#a6e3a1" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="891" y="70" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="87" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="87" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="87" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="36" y="85" width="9" height="17" fill="#ffffff" />
<text x="36" y="87" fill="#000000" textLength="9" lengthAdjust="spacingAndGlyphs">S</text>
<text x="45" y="87" fill="#6c7086" textLength="135" lengthAdjust="spacingAndGlyphs">earch to filter</text>
<text x="873" y="87" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="873" y="87" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="87" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="104" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="104" fill="#89b4fa" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
<text x="18" y="104" fill="#a6e3a1" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
<text x="891" y="104" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="121" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="121" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-default-state-correctly.snap.svg
+4 -4
View File
@@ -13,17 +13,17 @@
<text x="0" y="53" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="53" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="70" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="70" fill="#89b4fa" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="18" y="70" fill="#a6e3a1" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="891" y="70" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="87" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="87" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="87" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="36" y="85" width="9" height="17" fill="#ffffff" />
<text x="36" y="87" fill="#000000" textLength="9" lengthAdjust="spacingAndGlyphs">S</text>
<text x="45" y="87" fill="#6c7086" textLength="135" lengthAdjust="spacingAndGlyphs">earch to filter</text>
<text x="873" y="87" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="873" y="87" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="87" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="104" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="104" fill="#89b4fa" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
<text x="18" y="104" fill="#a6e3a1" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
<text x="891" y="104" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="121" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="121" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-file-filtering-settings-configured-correctly.snap.svg
+4 -4
View File
@@ -13,17 +13,17 @@
<text x="0" y="53" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="53" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="70" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="70" fill="#89b4fa" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="18" y="70" fill="#a6e3a1" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="891" y="70" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="87" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="87" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="87" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="36" y="85" width="9" height="17" fill="#ffffff" />
<text x="36" y="87" fill="#000000" textLength="9" lengthAdjust="spacingAndGlyphs">S</text>
<text x="45" y="87" fill="#6c7086" textLength="135" lengthAdjust="spacingAndGlyphs">earch to filter</text>
<text x="873" y="87" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="873" y="87" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="87" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="104" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="104" fill="#89b4fa" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
<text x="18" y="104" fill="#a6e3a1" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
<text x="891" y="104" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="121" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="121" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-mixed-boolean-and-number-settings-correctly.snap.svg
+4 -4
View File
@@ -13,17 +13,17 @@
<text x="0" y="53" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="53" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="70" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="70" fill="#89b4fa" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="18" y="70" fill="#a6e3a1" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="891" y="70" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="87" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="87" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="87" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="36" y="85" width="9" height="17" fill="#ffffff" />
<text x="36" y="87" fill="#000000" textLength="9" lengthAdjust="spacingAndGlyphs">S</text>
<text x="45" y="87" fill="#6c7086" textLength="135" lengthAdjust="spacingAndGlyphs">earch to filter</text>
<text x="873" y="87" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="873" y="87" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="87" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="104" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="104" fill="#89b4fa" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
<text x="18" y="104" fill="#a6e3a1" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
<text x="891" y="104" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="121" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="121" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-tools-and-security-settings-correctly.snap.svg
+4 -4
View File
@@ -13,17 +13,17 @@
<text x="0" y="53" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="53" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="70" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="70" fill="#89b4fa" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="18" y="70" fill="#a6e3a1" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="891" y="70" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="87" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="87" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="87" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="36" y="85" width="9" height="17" fill="#ffffff" />
<text x="36" y="87" fill="#000000" textLength="9" lengthAdjust="spacingAndGlyphs">S</text>
<text x="45" y="87" fill="#6c7086" textLength="135" lengthAdjust="spacingAndGlyphs">earch to filter</text>
<text x="873" y="87" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="873" y="87" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="87" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="104" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="104" fill="#89b4fa" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
<text x="18" y="104" fill="#a6e3a1" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
<text x="891" y="104" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="121" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="121" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-various-boolean-settings-enabled-correctly.snap.svg
+4 -4
View File
@@ -13,17 +13,17 @@
<text x="0" y="53" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="53" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="70" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="70" fill="#89b4fa" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="18" y="70" fill="#a6e3a1" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="891" y="70" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="87" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="87" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="87" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="36" y="85" width="9" height="17" fill="#ffffff" />
<text x="36" y="87" fill="#000000" textLength="9" lengthAdjust="spacingAndGlyphs">S</text>
<text x="45" y="87" fill="#6c7086" textLength="135" lengthAdjust="spacingAndGlyphs">earch to filter</text>
<text x="873" y="87" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="873" y="87" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="87" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="104" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="104" fill="#89b4fa" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
<text x="18" y="104" fill="#a6e3a1" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
<text x="891" y="104" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="121" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="121" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap
+24 -24
View File
@@ -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 │ │
packages/cli/src/ui/components/messages/ToolShared.tsx
+1 -1
View File
@@ -123,7 +123,7 @@ export const FocusHint: React.FC<{
return (
<Box marginLeft={1} flexShrink={0}>
<Text color={theme.text.accent}>
<Text color={isThisShellFocused ? theme.ui.focus : theme.ui.active}>
{isThisShellFocused
? `(${formatCommand(Command.UNFOCUS_SHELL_INPUT)} to unfocus)`
: `(${formatCommand(Command.FOCUS_SHELL_INPUT)} to focus)`}
packages/cli/src/ui/components/messages/UserMessage.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({ 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;
packages/cli/src/ui/components/shared/BaseSelectionList.test.tsx
-2
View File
@@ -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' },
},
packages/cli/src/ui/components/shared/BaseSettingsDialog.tsx
+1 -1
View File
@@ -451,7 +451,7 @@ export function BaseSettingsDialog({
editingKey
? theme.border.default
: focusSection === 'settings'
? theme.border.focused
? theme.ui.focus
: theme.border.default
}
paddingX={1}
packages/cli/src/ui/hooks/__snapshots__/usePhraseCycler.test.tsx.snap
+2 -2
View File
@@ -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..."`;
packages/cli/src/ui/hooks/usePhraseCycler.ts
+1 -1
View File
@@ -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.
packages/cli/src/ui/themes/no-color.ts
+1 -1
View File
@@ -49,11 +49,11 @@ const noColorSemanticColors: SemanticColors = {
},
border: {
default: '',
focused: '',
},
ui: {
comment: '',
symbol: '',
active: '',
dark: '',
focus: '',
gradient: [],
packages/cli/src/ui/themes/semantic-tokens.ts
+3 -3
View File
@@ -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,
packages/cli/src/ui/themes/solarized-dark.ts
+1 -1
View File
@@ -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'],
packages/cli/src/ui/themes/solarized-light.ts
+1 -1
View File
@@ -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'],
packages/cli/src/ui/themes/theme.ts
+6 -7
View File
@@ -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,
packages/cli/src/ui/utils/__snapshots__/borderStyles-MainContent-tool-group-border-SVG-snapshots-should-render-SVG-snapshot-for-a-shell-tool.snap.svg
+8 -8
View File
@@ -109,15 +109,15 @@
<text x="162" y="138" fill="#ac6e9c" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="171" y="138" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="180" y="138" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="0" y="172" fill="#6c7086" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="0" y="189" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="172" fill="#89b4fa" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="0" y="189" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="9" y="189" fill="#ffffff" textLength="846" lengthAdjust="spacingAndGlyphs"> ⊷ run_shell_command </text>
<text x="855" y="189" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="206" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="855" y="206" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="223" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="855" y="189" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="206" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="855" y="206" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="223" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="9" y="223" fill="#ffffff" textLength="846" lengthAdjust="spacingAndGlyphs"> Running command... </text>
<text x="855" y="223" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="240" fill="#6c7086" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
<text x="855" y="223" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="240" fill="#89b4fa" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

packages/cli/src/ui/utils/borderStyles.test.tsx
+21 -2
View File
@@ -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', () => {
packages/cli/src/ui/utils/borderStyles.ts
+4 -3
View File
@@ -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;