feat(about): Add the IDE Client's display name to `/about` (#6311)

Co-authored-by: Bryan Morgan <bryanmorgan@google.com>

packages/cli/src/ui/commands/aboutCommand.test.ts

@@ -11,6 +11,8 @@ import { createMockCommandContext } from '../../test-utils/mockCommandContext.js
 import * as versionUtils from '../../utils/version.js';
 import { MessageType } from '../types.js';
 
+import { IdeClient } from '../../../../core/src/ide/ide-client.js';
+
 vi.mock('../../utils/version.js', () => ({
   getCliVersion: vi.fn(),
 }));
@@ -25,6 +27,7 @@ describe('aboutCommand', () => {
       services: {
         config: {
           getModel: vi.fn(),
+          getIdeClient: vi.fn(),
         },
         settings: {
           merged: {
@@ -45,6 +48,9 @@ describe('aboutCommand', () => {
     Object.defineProperty(process, 'platform', {
       value: 'test-os',
     });
+    vi.spyOn(mockContext.services.config!, 'getIdeClient').mockReturnValue({
+      getDetectedIdeDisplayName: vi.fn().mockReturnValue('test-ide'),
+    } as Partial<IdeClient> as IdeClient);
   });
 
   afterEach(() => {
@@ -78,6 +84,7 @@ describe('aboutCommand', () => {
         modelVersion: 'test-model',
         selectedAuthType: 'test-auth',
         gcpProject: 'test-gcp-project',
+        ideClient: 'test-ide',
       },
       expect.any(Number),
     );
@@ -115,4 +122,31 @@ describe('aboutCommand', () => {
       expect.any(Number),
     );
   });
+
+  it('should not show ide client when it is not detected', async () => {
+    vi.spyOn(mockContext.services.config!, 'getIdeClient').mockReturnValue({
+      getDetectedIdeDisplayName: vi.fn().mockReturnValue(undefined),
+    } as Partial<IdeClient> as IdeClient);
+
+    process.env.SANDBOX = '';
+    if (!aboutCommand.action) {
+      throw new Error('The about command must have an action.');
+    }
+
+    await aboutCommand.action(mockContext, '');
+
+    expect(mockContext.ui.addItem).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: MessageType.ABOUT,
+        cliVersion: 'test-version',
+        osVersion: 'test-os',
+        sandboxEnv: 'no sandbox',
+        modelVersion: 'test-model',
+        selectedAuthType: 'test-auth',
+        gcpProject: 'test-gcp-project',
+        ideClient: '',
+      }),
+      expect.any(Number),
+    );
+  });
 });

packages/cli/src/ui/commands/aboutCommand.ts

@@ -28,6 +28,9 @@ export const aboutCommand: SlashCommand = {
     const selectedAuthType =
       context.services.settings.merged.selectedAuthType || '';
     const gcpProject = process.env.GOOGLE_CLOUD_PROJECT || '';
+    const ideClient =
+      context.services.config?.getIdeClient()?.getDetectedIdeDisplayName() ||
+      '';
 
     const aboutItem: Omit<HistoryItemAbout, 'id'> = {
       type: MessageType.ABOUT,
@@ -37,6 +40,7 @@ export const aboutCommand: SlashCommand = {
       modelVersion,
       selectedAuthType,
       gcpProject,
+      ideClient,
     };
 
     context.ui.addItem(aboutItem, Date.now());

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

@@ -16,6 +16,7 @@ interface AboutBoxProps {
   modelVersion: string;
   selectedAuthType: string;
   gcpProject: string;
+  ideClient: string;
 }
 
 export const AboutBox: React.FC<AboutBoxProps> = ({
@@ -25,6 +26,7 @@ export const AboutBox: React.FC<AboutBoxProps> = ({
   modelVersion,
   selectedAuthType,
   gcpProject,
+  ideClient,
 }) => (
   <Box
     borderStyle="round"
@@ -115,5 +117,17 @@ export const AboutBox: React.FC<AboutBoxProps> = ({
         </Box>
       </Box>
     )}
+    {ideClient && (
+      <Box flexDirection="row">
+        <Box width="35%">
+          <Text bold color={Colors.LightBlue}>
+            IDE Client
+          </Text>
+        </Box>
+        <Box>
+          <Text>{ideClient}</Text>
+        </Box>
+      </Box>
+    )}
   </Box>
 );

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

@@ -71,6 +71,7 @@ describe('<HistoryItemDisplay />', () => {
       modelVersion: 'test-model',
       selectedAuthType: 'test-auth',
       gcpProject: 'test-project',
+      ideClient: 'test-ide',
     };
     const { lastFrame } = render(
       <HistoryItemDisplay {...baseItem} item={item} />,

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

@@ -73,6 +73,7 @@ export const HistoryItemDisplay: React.FC<HistoryItemDisplayProps> = ({
         modelVersion={item.modelVersion}
         selectedAuthType={item.selectedAuthType}
         gcpProject={item.gcpProject}
+        ideClient={item.ideClient}
       />
     )}
     {item.type === 'help' && commands && <Help commands={commands} />}

packages/cli/src/ui/hooks/slashCommandProcessor.ts

@@ -116,6 +116,7 @@ export const useSlashCommandProcessor = (
           modelVersion: message.modelVersion,
           selectedAuthType: message.selectedAuthType,
           gcpProject: message.gcpProject,
+          ideClient: message.ideClient,
         };
       } else if (message.type === MessageType.HELP) {
         historyItemContent = {

packages/cli/src/ui/types.ts

@@ -95,6 +95,7 @@ export type HistoryItemAbout = HistoryItemBase & {
   modelVersion: string;
   selectedAuthType: string;
   gcpProject: string;
+  ideClient: string;
 };
 
 export type HistoryItemHelp = HistoryItemBase & {
@@ -188,6 +189,7 @@ export type Message =
       modelVersion: string;
       selectedAuthType: string;
       gcpProject: string;
+      ideClient: string;
       content?: string; // Optional content, not really used for ABOUT
     }
   | {