feat(ui): standardize semantic focus colors and enhance history visibility (#20745)

Co-authored-by: jacob314 <jacob314@gmail.com>
2026-04-08 20:30:53 -07:00 · 2026-03-03 16:10:09 -08:00
parent 75737c1b44
commit d25088956d
70 changed files with 1427 additions and 406 deletions
--- a/packages/cli/src/ui/utils/snapshots/borderStyles-MainContent-tool-group-border-SVG-snapshots-should-render-SVG-snapshot-for-a-pending-search-dialog-google_web_search-.snap.svg
+++ b/packages/cli/src/ui/utils/snapshots/borderStyles-MainContent-tool-group-border-SVG-snapshots-should-render-SVG-snapshot-for-a-pending-search-dialog-google_web_search-.snap.svg
@@ -19,7 +19,7 @@
    <text x="27" y="70" fill="#6688d9" textLength="9" lengthAdjust="spacingAndGlyphs">▀</text>
    <text x="0" y="104" fill="#f9e2af" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
    <text x="0" y="121" fill="#f9e2af" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
-    <text x="9" y="121" fill="#ffffff" textLength="36" lengthAdjust="spacingAndGlyphs"> ⊷  </text>
+    <text x="18" y="121" fill="#f9e2af" textLength="9" lengthAdjust="spacingAndGlyphs">⊶</text>
    <text x="45" y="121" fill="#ffffff" textLength="153" lengthAdjust="spacingAndGlyphs" font-weight="bold">google_web_search</text>
    <text x="855" y="121" fill="#f9e2af" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
    <text x="0" y="138" fill="#f9e2af" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
--- 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
@@ -17,16 +17,16 @@
    <text x="45" y="53" fill="#a471a7" textLength="9" lengthAdjust="spacingAndGlyphs">▀</text>
    <text x="18" y="70" fill="#4796e4" textLength="9" lengthAdjust="spacingAndGlyphs">▝</text>
    <text x="27" y="70" fill="#6688d9" textLength="9" lengthAdjust="spacingAndGlyphs">▀</text>
-    <text x="0" y="104" fill="#6c7086" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
-    <text x="0" y="121" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
-    <text x="9" y="121" fill="#ffffff" textLength="36" lengthAdjust="spacingAndGlyphs"> ⊷  </text>
+    <text x="0" y="104" fill="#89b4fa" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
+    <text x="0" y="121" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="121" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">⊶</text>
    <text x="45" y="121" fill="#ffffff" textLength="153" lengthAdjust="spacingAndGlyphs" font-weight="bold">run_shell_command</text>
-    <text x="855" y="121" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
-    <text x="0" y="138" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
-    <text x="855" y="138" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
-    <text x="0" y="155" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="855" y="121" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="138" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="855" y="138" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="155" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
    <text x="9" y="155" fill="#ffffff" textLength="846" lengthAdjust="spacingAndGlyphs"> Running command...                                                                           </text>
-    <text x="855" y="155" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
-    <text x="0" y="172" fill="#6c7086" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
+    <text x="855" y="155" fill="#89b4fa" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="172" fill="#89b4fa" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
  </g>
 </svg>
--- a/packages/cli/src/ui/utils/snapshots/borderStyles-MainContent-tool-group-border-SVG-snapshots-should-render-SVG-snapshot-for-an-empty-slice-following-a-search-tool.snap.svg
+++ b/packages/cli/src/ui/utils/snapshots/borderStyles-MainContent-tool-group-border-SVG-snapshots-should-render-SVG-snapshot-for-an-empty-slice-following-a-search-tool.snap.svg
@@ -19,7 +19,7 @@
    <text x="27" y="70" fill="#6688d9" textLength="9" lengthAdjust="spacingAndGlyphs">▀</text>
    <text x="0" y="104" fill="#f9e2af" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
    <text x="0" y="121" fill="#f9e2af" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
-    <text x="9" y="121" fill="#ffffff" textLength="36" lengthAdjust="spacingAndGlyphs"> ⊷  </text>
+    <text x="18" y="121" fill="#f9e2af" textLength="9" lengthAdjust="spacingAndGlyphs">⊶</text>
    <text x="45" y="121" fill="#ffffff" textLength="153" lengthAdjust="spacingAndGlyphs" font-weight="bold">google_web_search</text>
    <text x="855" y="121" fill="#f9e2af" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
    <text x="0" y="138" fill="#f9e2af" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
--- a/packages/cli/src/ui/utils/snapshots/borderStyles.test.tsx.snap
+++ b/packages/cli/src/ui/utils/snapshots/borderStyles.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`MainContent tool group border SVG snapshots > should render SVG snapsho
  ▝▀    

 ╭──────────────────────────────────────────────────────────────────────────────────────────────╮
-│ ⊷  google_web_search                                                                         │
+│ ⊶  google_web_search                                                                         │
 │                                                                                              │
 │ Searching...                                                                                 │
 ╰──────────────────────────────────────────────────────────────────────────────────────────────╯"
@@ -22,7 +22,7 @@ exports[`MainContent tool group border SVG snapshots > should render SVG snapsho
  ▝▀    

 ╭──────────────────────────────────────────────────────────────────────────────────────────────╮
-│ ⊷  run_shell_command                                                                         │
+│ ⊶  run_shell_command                                                                         │
 │                                                                                              │
 │ Running command...                                                                           │
 ╰──────────────────────────────────────────────────────────────────────────────────────────────╯"
@@ -36,7 +36,7 @@ exports[`MainContent tool group border SVG snapshots > should render SVG snapsho
  ▝▀    

 ╭──────────────────────────────────────────────────────────────────────────────────────────────╮
-│ ⊷  google_web_search                                                                         │
+│ ⊶  google_web_search                                                                         │
 │                                                                                              │
 │ Searching...                                                                                 │
 ╰──────────────────────────────────────────────────────────────────────────────────────────────╯"
--- a/packages/cli/src/ui/utils/borderStyles.test.tsx
+++ b/packages/cli/src/ui/utils/borderStyles.test.tsx
@@ -4,13 +4,18 @@
 * SPDX-License-Identifier: Apache-2.0
 */

-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { getToolGroupBorderAppearance } from './borderStyles.js';
 import { CoreToolCallStatus } from '@google/gemini-cli-core';
 import { theme } from '../semantic-colors.js';
 import type { IndividualToolCallDisplay } from '../types.js';
 import { renderWithProviders } from '../../test-utils/render.js';
 import { MainContent } from '../components/MainContent.js';
+import { Text } from 'ink';
+
+vi.mock('../components/CliSpinner.js', () => ({
+  CliSpinner: () => <Text>⊶</Text>,
+}));

 describe('getToolGroupBorderAppearance', () => {
  it('should use warning color for pending non-shell tools', () => {
@@ -60,7 +65,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 +78,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', () => {
--- 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;
--- a/packages/cli/src/ui/utils/markdownParsingUtils.test.ts
+++ b/packages/cli/src/ui/utils/markdownParsingUtils.test.ts
@@ -17,6 +17,9 @@ vi.mock('../semantic-colors.js', () => ({
      accent: 'cyan',
      link: 'blue',
    },
+    ui: {
+      focus: 'green',
+    },
  },
 }));