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

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 && (