diff --git a/packages/cli/src/ui/components/NewAgentsNotification.test.tsx b/packages/cli/src/ui/components/NewAgentsNotification.test.tsx index 23bb64c9c92..c837be91ead 100644 --- a/packages/cli/src/ui/components/NewAgentsNotification.test.tsx +++ b/packages/cli/src/ui/components/NewAgentsNotification.test.tsx @@ -7,6 +7,8 @@ import { describe, it, expect, vi } from 'vitest'; import { renderWithProviders as render } from '../../test-utils/render.js'; import { NewAgentsNotification } from './NewAgentsNotification.js'; +import { waitFor } from '../../test-utils/async.js'; +import { act } from 'react'; describe('NewAgentsNotification', () => { const mockAgents = [ @@ -54,4 +56,28 @@ describe('NewAgentsNotification', () => { expect(frame).toMatchSnapshot(); unmount(); }); + + it('shows processing state when an option is selected', async () => { + const asyncOnSelect = vi.fn( + () => + new Promise(() => { + // Never resolve + }), + ); + + const { lastFrame, stdin, unmount } = render( + , + ); + + // Press Enter to select the first option + await act(async () => { + stdin.write('\r'); + }); + + await waitFor(() => { + expect(lastFrame()).toContain('Processing...'); + }); + + unmount(); + }); }); diff --git a/packages/cli/src/ui/components/NewAgentsNotification.tsx b/packages/cli/src/ui/components/NewAgentsNotification.tsx index 05edae484c2..e7aa8be5100 100644 --- a/packages/cli/src/ui/components/NewAgentsNotification.tsx +++ b/packages/cli/src/ui/components/NewAgentsNotification.tsx @@ -4,6 +4,7 @@ * SPDX-License-Identifier: Apache-2.0 */ +import { useState } from 'react'; import { Box, Text } from 'ink'; import { type AgentDefinition } from '@google/gemini-cli-core'; import { theme } from '../semantic-colors.js'; @@ -11,6 +12,7 @@ import { RadioButtonSelect, type RadioSelectItem, } from './shared/RadioButtonSelect.js'; +import { CliSpinner } from './CliSpinner.js'; export enum NewAgentsChoice { ACKNOWLEDGE = 'acknowledge', @@ -19,13 +21,15 @@ export enum NewAgentsChoice { interface NewAgentsNotificationProps { agents: AgentDefinition[]; - onSelect: (choice: NewAgentsChoice) => void; + onSelect: (choice: NewAgentsChoice) => void | Promise; } export const NewAgentsNotification = ({ agents, onSelect, }: NewAgentsNotificationProps) => { + const [isProcessing, setIsProcessing] = useState(false); + const options: Array> = [ { label: 'Acknowledge and Enable', @@ -39,6 +43,15 @@ export const NewAgentsNotification = ({ }, ]; + const handleSelect = async (choice: NewAgentsChoice) => { + setIsProcessing(true); + try { + await onSelect(choice); + } finally { + setIsProcessing(false); + } + }; + // Limit display to 5 agents to avoid overflow, show count for rest const MAX_DISPLAYED_AGENTS = 5; const displayAgents = agents.slice(0, MAX_DISPLAYED_AGENTS); @@ -85,11 +98,18 @@ export const NewAgentsNotification = ({ - + {isProcessing ? ( + + + Processing... + + ) : ( + + )} );