feat: redesign header to be compact with ASCII icon (#18713)

Co-authored-by: Jacob Richman <jacob314@gmail.com>

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

@@ -1,11 +1,11 @@
 /**
  * @license
- * Copyright 2025 Google LLC
+ * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 
 import type React from 'react';
-import { useMemo } from 'react';
+import { useMemo, useEffect, useState } from 'react';
 import { Box, Text } from 'ink';
 import { theme } from '../semantic-colors.js';
 import {
@@ -20,42 +20,45 @@ interface UserIdentityProps {
 
 export const UserIdentity: React.FC<UserIdentityProps> = ({ config }) => {
   const authType = config.getContentGeneratorConfig()?.authType;
+  const [email, setEmail] = useState<string | undefined>();
 
-  const { email, tierName } = useMemo(() => {
-    if (!authType) {
-      return { email: undefined, tierName: undefined };
+  useEffect(() => {
+    if (authType) {
+      const userAccountManager = new UserAccountManager();
+      setEmail(userAccountManager.getCachedGoogleAccount() ?? undefined);
     }
-    const userAccountManager = new UserAccountManager();
-    return {
-      email: userAccountManager.getCachedGoogleAccount(),
-      tierName: config.getUserTierName(),
-    };
-  }, [config, authType]);
+  }, [authType]);
+
+  const tierName = useMemo(
+    () => (authType ? config.getUserTierName() : undefined),
+    [config, authType],
+  );
 
   if (!authType) {
     return null;
   }
 
   return (
-    <Box marginTop={1} flexDirection="column">
+    <Box flexDirection="column">
+      {/* User Email /auth */}
       <Box>
-        <Text color={theme.text.primary}>
+        <Text color={theme.text.primary} wrap="truncate-end">
           {authType === AuthType.LOGIN_WITH_GOOGLE ? (
-            <Text>
-              <Text bold>Logged in with Google{email ? ':' : ''}</Text>
-              {email ? ` ${email}` : ''}
-            </Text>
+            <Text>{email ?? 'Logged in with Google'}</Text>
           ) : (
             `Authenticated with ${authType}`
           )}
         </Text>
         <Text color={theme.text.secondary}> /auth</Text>
       </Box>
-      {tierName && (
-        <Text color={theme.text.primary}>
-          <Text bold>Plan:</Text> {tierName}
+
+      {/* Tier Name /upgrade */}
+      <Box>
+        <Text color={theme.text.primary} wrap="truncate-end">
+          {tierName ?? 'Gemini Code Assist for individuals'}
         </Text>
-      )}
+        <Text color={theme.text.secondary}> /upgrade</Text>
+      </Box>
     </Box>
   );
 };