packages/cli/src/ui/utils/borderStyles.test.tsx

/**
 * @license
 * Copyright 2026 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

import { describe, expect, it, vi } from 'vitest';
import { getToolGroupBorderAppearance } from './borderStyles.js';
import { CoreToolCallStatus, makeFakeConfig } 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 { createMockSettings } from '../../test-utils/settings.js';
import { MainContent } from '../components/MainContent.js';
import { Text } from 'ink';

vi.mock('../components/CliSpinner.js', () => ({
  CliSpinner: () => <Text>⊶</Text>,
}));

const altBufferOptions = {
  config: makeFakeConfig({ useAlternateBuffer: true }),
  settings: createMockSettings({ ui: { useAlternateBuffer: true } }),
};

describe('getToolGroupBorderAppearance', () => {
  it('should use warning color for pending non-shell tools', () => {
    const item = {
      type: 'tool_group' as const,
      tools: [
        {
          name: 'google_web_search',
          status: CoreToolCallStatus.Executing,
          resultDisplay: '',
          callId: 'call-1',
        },
      ] as IndividualToolCallDisplay[],
    };
    const appearance = getToolGroupBorderAppearance(item, undefined, false, []);
    expect(appearance.borderColor).toBe(theme.status.warning);
    expect(appearance.borderDimColor).toBe(true);
  });

  it('should use correct color for empty slice by looking at pending items', () => {
    const pendingItem = {
      type: 'tool_group' as const,
      tools: [
        {
          name: 'google_web_search',
          status: CoreToolCallStatus.Executing,
          resultDisplay: '',
          callId: 'call-1',
        },
      ] as IndividualToolCallDisplay[],
    };
    const sliceItem = {
      type: 'tool_group' as const,
      tools: [] as IndividualToolCallDisplay[],
    };
    const allPendingItems = [pendingItem, sliceItem];

    const appearance = getToolGroupBorderAppearance(
      sliceItem,
      undefined,
      false,
      allPendingItems,
    );

    // It should match the pendingItem appearance
    expect(appearance.borderColor).toBe(theme.status.warning);
    expect(appearance.borderDimColor).toBe(true);
  });

  it('should use active color for shell tools', () => {
    const item = {
      type: 'tool_group' as const,
      tools: [
        {
          name: 'run_shell_command',
          status: CoreToolCallStatus.Executing,
          resultDisplay: '',
          callId: 'call-1',
        },
      ] as IndividualToolCallDisplay[],
    };
    const appearance = getToolGroupBorderAppearance(item, undefined, false, []);
    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', () => {
  it('should render SVG snapshot for a pending search dialog (google_web_search)', async () => {
    const renderResult = await renderWithProviders(<MainContent />, {
      ...altBufferOptions,
      uiState: {
        history: [],
        pendingHistoryItems: [
          {
            type: 'tool_group',
            tools: [
              {
                name: 'google_web_search',
                status: CoreToolCallStatus.Executing,
                resultDisplay: 'Searching...',
                callId: 'call-1',
              } as unknown as IndividualToolCallDisplay,
            ],
          },
        ],
      },
    });

    await renderResult.waitUntilReady();
    await expect(renderResult).toMatchSvgSnapshot();
  });

  it('should render SVG snapshot for an empty slice following a search tool', async () => {
    const renderResult = await renderWithProviders(<MainContent />, {
      ...altBufferOptions,
      uiState: {
        history: [],
        pendingHistoryItems: [
          {
            type: 'tool_group',
            tools: [
              {
                name: 'google_web_search',
                status: CoreToolCallStatus.Executing,
                resultDisplay: 'Searching...',
                callId: 'call-1',
              } as unknown as IndividualToolCallDisplay,
            ],
          },
          {
            type: 'tool_group',
            tools: [],
          },
        ],
      },
    });

    await renderResult.waitUntilReady();
    await expect(renderResult).toMatchSvgSnapshot();
  });

  it('should render SVG snapshot for a shell tool', async () => {
    const renderResult = await renderWithProviders(<MainContent />, {
      ...altBufferOptions,
      uiState: {
        history: [],
        pendingHistoryItems: [
          {
            type: 'tool_group',
            tools: [
              {
                name: 'run_shell_command',
                status: CoreToolCallStatus.Executing,
                resultDisplay: 'Running command...',
                callId: 'call-1',
              } as unknown as IndividualToolCallDisplay,
            ],
          },
        ],
      },
    });

    await renderResult.waitUntilReady();
    await expect(renderResult).toMatchSvgSnapshot();
  });
});