feat(ui): display user tier in about command (#17400)

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

@@ -39,6 +39,7 @@ describe('aboutCommand', () => {
         config: {
           getModel: vi.fn(),
           getIdeMode: vi.fn().mockReturnValue(true),
+          getUserTierName: vi.fn().mockReturnValue(undefined),
         },
         settings: {
           merged: {
@@ -97,6 +98,7 @@ describe('aboutCommand', () => {
       gcpProject: 'test-gcp-project',
       ideClient: 'test-ide',
       userEmail: 'test-email@example.com',
+      tier: undefined,
     });
   });
 
@@ -156,4 +158,21 @@ describe('aboutCommand', () => {
       }),
     );
   });
+
+  it('should display the tier when getUserTierName returns a value', async () => {
+    vi.mocked(mockContext.services.config!.getUserTierName).mockReturnValue(
+      'Enterprise Tier',
+    );
+    if (!aboutCommand.action) {
+      throw new Error('The about command must have an action.');
+    }
+
+    await aboutCommand.action(mockContext, '');
+
+    expect(mockContext.ui.addItem).toHaveBeenCalledWith(
+      expect.objectContaining({
+        tier: 'Enterprise Tier',
+      }),
+    );
+  });
 });

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

@@ -44,6 +44,8 @@ export const aboutCommand: SlashCommand = {
     });
     const userEmail = cachedAccount ?? undefined;
 
+    const tier = context.services.config?.getUserTierName();
+
     const aboutItem: Omit<HistoryItemAbout, 'id'> = {
       type: MessageType.ABOUT,
       cliVersion,
@@ -54,6 +56,7 @@ export const aboutCommand: SlashCommand = {
       gcpProject,
       ideClient,
       userEmail,
+      tier,
     };
 
     context.ui.addItem(aboutItem);

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

@@ -33,13 +33,13 @@ describe('AboutBox', () => {
     expect(output).toContain('gemini-pro');
     expect(output).toContain('default');
     expect(output).toContain('macOS');
-    expect(output).toContain('OAuth');
+    expect(output).toContain('Logged in with Google');
   });
 
   it.each([
-    ['userEmail', 'test@example.com', 'User Email'],
     ['gcpProject', 'my-project', 'GCP Project'],
     ['ideClient', 'vscode', 'IDE Client'],
+    ['tier', 'Enterprise', 'Tier'],
   ])('renders optional prop %s', (prop, value, label) => {
     const props = { ...defaultProps, [prop]: value };
     const { lastFrame } = render(<AboutBox {...props} />);
@@ -48,6 +48,13 @@ describe('AboutBox', () => {
     expect(output).toContain(value);
   });
 
+  it('renders Auth Method with email when userEmail is provided', () => {
+    const props = { ...defaultProps, userEmail: 'test@example.com' };
+    const { lastFrame } = render(<AboutBox {...props} />);
+    const output = lastFrame();
+    expect(output).toContain('Logged in with Google (test@example.com)');
+  });
+
   it('renders Auth Method correctly when not oauth', () => {
     const props = { ...defaultProps, selectedAuthType: 'api-key' };
     const { lastFrame } = render(<AboutBox {...props} />);

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

@@ -18,6 +18,7 @@ interface AboutBoxProps {
   gcpProject: string;
   ideClient: string;
   userEmail?: string;
+  tier?: string;
 }
 
 export const AboutBox: React.FC<AboutBoxProps> = ({
@@ -29,6 +30,7 @@ export const AboutBox: React.FC<AboutBoxProps> = ({
   gcpProject,
   ideClient,
   userEmail,
+  tier,
 }) => (
   <Box
     borderStyle="round"
@@ -103,19 +105,23 @@ export const AboutBox: React.FC<AboutBoxProps> = ({
       </Box>
       <Box>
         <Text color={theme.text.primary}>
-          {selectedAuthType.startsWith('oauth') ? 'OAuth' : selectedAuthType}
+          {selectedAuthType.startsWith('oauth')
+            ? userEmail
+              ? `Logged in with Google (${userEmail})`
+              : 'Logged in with Google'
+            : selectedAuthType}
         </Text>
       </Box>
     </Box>
-    {userEmail && (
+    {tier && (
       <Box flexDirection="row">
         <Box width="35%">
           <Text bold color={theme.text.link}>
-            User Email
+            Tier
           </Text>
         </Box>
         <Box>
-          <Text color={theme.text.primary}>{userEmail}</Text>
+          <Text color={theme.text.primary}>{tier}</Text>
         </Box>
       </Box>
     )}

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

@@ -112,6 +112,7 @@ export const HistoryItemDisplay: React.FC<HistoryItemDisplayProps> = ({
           gcpProject={itemForDisplay.gcpProject}
           ideClient={itemForDisplay.ideClient}
           userEmail={itemForDisplay.userEmail}
+          tier={itemForDisplay.tier}
         />
       )}
       {itemForDisplay.type === 'help' && commands && (

packages/cli/src/ui/types.ts

@@ -145,6 +145,7 @@ export type HistoryItemAbout = HistoryItemBase & {
   gcpProject: string;
   ideClient: string;
   userEmail?: string;
+  tier?: string;
 };
 
 export type HistoryItemHelp = HistoryItemBase & {