Fix bottom border color

Author: jacob314

packages/cli/src/ui/App.test.tsx

@@ -216,8 +216,18 @@ describe('App', () => {
 
     const stateWithConfirmingTool = {
       ...mockUIState,
-      pendingHistoryItems: [{ type: 'tool_group', tools: toolCalls }],
-      pendingGeminiHistoryItems: [{ type: 'tool_group', tools: toolCalls }],
+      pendingHistoryItems: [
+        {
+          type: 'tool_group',
+          tools: toolCalls,
+        },
+      ],
+      pendingGeminiHistoryItems: [
+        {
+          type: 'tool_group',
+          tools: toolCalls,
+        },
+      ],
     } as UIState;
 
     const configWithExperiment = makeFakeConfig();

packages/cli/src/ui/components/HistoryItemDisplay.tsx

@@ -47,6 +47,8 @@ interface HistoryItemDisplayProps {
   activeShellPtyId?: number | null;
   embeddedShellFocused?: boolean;
   availableTerminalHeightGemini?: number;
+  borderColor?: string;
+  borderDimColor?: boolean;
 }
 
 export const HistoryItemDisplay: React.FC<HistoryItemDisplayProps> = ({
@@ -58,6 +60,8 @@ export const HistoryItemDisplay: React.FC<HistoryItemDisplayProps> = ({
   activeShellPtyId,
   embeddedShellFocused,
   availableTerminalHeightGemini,
+  borderColor,
+  borderDimColor,
 }) => {
   const settings = useSettings();
   const inlineThinkingMode = getInlineThinkingMode(settings);
@@ -181,6 +185,8 @@ export const HistoryItemDisplay: React.FC<HistoryItemDisplayProps> = ({
           embeddedShellFocused={embeddedShellFocused}
           borderTop={itemForDisplay.borderTop}
           borderBottom={itemForDisplay.borderBottom}
+          borderColor={borderColor ?? ''}
+          borderDimColor={borderDimColor ?? false}
         />
       )}
       {itemForDisplay.type === 'compression' && (

packages/cli/src/ui/components/MainContent.test.tsx

@@ -6,7 +6,7 @@
 
 import { renderWithProviders } from '../../test-utils/render.js';
 import { waitFor } from '../../test-utils/async.js';
-import { MainContent } from './MainContent.js';
+import { MainContent, getToolGroupBorderAppearance } from './MainContent.js';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { Box, Text } from 'ink';
 import { act, useState, type JSX } from 'react';
@@ -18,6 +18,7 @@ import {
   type UIState,
 } from '../contexts/UIStateContext.js';
 import { CoreToolCallStatus } from '@google/gemini-cli-core';
+import { type IndividualToolCallDisplay } from '../types.js';
 
 // Mock dependencies
 vi.mock('../contexts/SettingsContext.js', async () => {
@@ -76,6 +77,208 @@ vi.mock('./shared/ScrollableList.js', () => ({
   SCROLL_TO_ITEM_END: 0,
 }));
 
+import { theme } from '../semantic-colors.js';
+import { type BackgroundShell } from '../hooks/shellReducer.js';
+
+describe('getToolGroupBorderAppearance', () => {
+  const mockBackgroundShells = new Map<number, BackgroundShell>();
+  const activeShellPtyId = 123;
+
+  it('returns default empty values for non-tool_group items', () => {
+    const item = { type: 'user' as const, text: 'Hello', id: 1 };
+    const result = getToolGroupBorderAppearance(
+      item,
+      null,
+      false,
+      [],
+      mockBackgroundShells,
+    );
+    expect(result).toEqual({ borderColor: '', borderDimColor: false });
+  });
+
+  it('inspects only the last pending tool_group item if current has no tools', () => {
+    const item = { type: 'tool_group' as const, tools: [], id: 1 };
+    const pendingItems = [
+      {
+        type: 'tool_group' as const,
+        tools: [
+          {
+            callId: '1',
+            name: 'some_tool',
+            description: '',
+            status: CoreToolCallStatus.Executing,
+            ptyId: undefined,
+            resultDisplay: undefined,
+            confirmationDetails: undefined,
+          } as IndividualToolCallDisplay,
+        ],
+      },
+      {
+        type: 'tool_group' as const,
+        tools: [
+          {
+            callId: '2',
+            name: 'other_tool',
+            description: '',
+            status: CoreToolCallStatus.Success,
+            ptyId: undefined,
+            resultDisplay: undefined,
+            confirmationDetails: undefined,
+          } as IndividualToolCallDisplay,
+        ],
+      },
+    ];
+
+    // Only the last item (Success) should be inspected, so hasPending = false.
+    // The previous item was Executing (pending) but it shouldn't be counted.
+    const result = getToolGroupBorderAppearance(
+      item,
+      null,
+      false,
+      pendingItems,
+      mockBackgroundShells,
+    );
+    expect(result).toEqual({
+      borderColor: theme.border.default,
+      borderDimColor: false,
+    });
+  });
+
+  it('returns default border for completed normal tools', () => {
+    const item = {
+      type: 'tool_group' as const,
+      tools: [
+        {
+          callId: '1',
+          name: 'some_tool',
+          description: '',
+          status: CoreToolCallStatus.Success,
+          ptyId: undefined,
+          resultDisplay: undefined,
+          confirmationDetails: undefined,
+        } as IndividualToolCallDisplay,
+      ],
+      id: 1,
+    };
+    const result = getToolGroupBorderAppearance(
+      item,
+      null,
+      false,
+      [],
+      mockBackgroundShells,
+    );
+    expect(result).toEqual({
+      borderColor: theme.border.default,
+      borderDimColor: false,
+    });
+  });
+
+  it('returns warning border for pending normal tools', () => {
+    const item = {
+      type: 'tool_group' as const,
+      tools: [
+        {
+          callId: '1',
+          name: 'some_tool',
+          description: '',
+          status: CoreToolCallStatus.Executing,
+          ptyId: undefined,
+          resultDisplay: undefined,
+          confirmationDetails: undefined,
+        } as IndividualToolCallDisplay,
+      ],
+      id: 1,
+    };
+    const result = getToolGroupBorderAppearance(
+      item,
+      null,
+      false,
+      [],
+      mockBackgroundShells,
+    );
+    expect(result).toEqual({
+      borderColor: theme.status.warning,
+      borderDimColor: true,
+    });
+  });
+
+  it('returns symbol border for 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,
+    };
+    // While executing shell commands, it's dim false, border symbol
+    const result = getToolGroupBorderAppearance(
+      item,
+      activeShellPtyId,
+      true,
+      [],
+      mockBackgroundShells,
+    );
+    expect(result).toEqual({
+      borderColor: theme.ui.symbol,
+      borderDimColor: false,
+    });
+  });
+
+  it('returns symbol border and dims color for background executing shell command when another shell is active', () => {
+    const item = {
+      type: 'tool_group' as const,
+      tools: [
+        {
+          callId: '1',
+          name: SHELL_COMMAND_NAME,
+          description: '',
+          status: CoreToolCallStatus.Executing,
+          ptyId: 456, // Different ptyId, not active
+          resultDisplay: undefined,
+          confirmationDetails: undefined,
+        } as IndividualToolCallDisplay,
+      ],
+      id: 1,
+    };
+    const result = getToolGroupBorderAppearance(
+      item,
+      activeShellPtyId,
+      false,
+      [],
+      mockBackgroundShells,
+    );
+    expect(result).toEqual({
+      borderColor: theme.ui.symbol,
+      borderDimColor: true,
+    });
+  });
+
+  it('handles empty tools with active shell turn (isCurrentlyInShellTurn)', () => {
+    const item = { type: 'tool_group' as const, tools: [], id: 1 };
+
+    // active shell turn
+    const result = getToolGroupBorderAppearance(
+      item,
+      activeShellPtyId,
+      true,
+      [],
+      mockBackgroundShells,
+    );
+    // 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);
+    // It shouldn't be dim because there are no tools to say it isEmbeddedShellFocused = false
+  });
+});
+
 describe('MainContent', () => {
   const defaultMockUiState = {
     history: [
@@ -258,7 +461,7 @@ describe('MainContent', () => {
           history: [],
           pendingHistoryItems: [
             {
-              type: 'tool_group' as const,
+              type: 'tool_group',
               id: 1,
               tools: [
                 {