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

Co-authored-by: jacob314 <jacob314@gmail.com>

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', () => {