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

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

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2025 Google LLC
+ * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 
@@ -15,30 +15,26 @@ interface TipsProps {
 
 export const Tips: React.FC<TipsProps> = ({ config }) => {
   const geminiMdFileCount = config.getGeminiMdFileCount();
+
   return (
-    <Box flexDirection="column">
+    <Box flexDirection="column" marginTop={1}>
       <Text color={theme.text.primary}>Tips for getting started:</Text>
-      <Text color={theme.text.primary}>
-        1. Ask questions, edit files, or run commands.
-      </Text>
-      <Text color={theme.text.primary}>
-        2. Be specific for the best results.
-      </Text>
       {geminiMdFileCount === 0 && (
         <Text color={theme.text.primary}>
-          3. Create{' '}
-          <Text bold color={theme.text.accent}>
-            GEMINI.md
-          </Text>{' '}
-          files to customize your interactions with Gemini.
+          1. Create <Text bold>GEMINI.md</Text> files to customize your
+          interactions
         </Text>
       )}
       <Text color={theme.text.primary}>
-        {geminiMdFileCount === 0 ? '4.' : '3.'}{' '}
-        <Text bold color={theme.text.accent}>
-          /help
-        </Text>{' '}
-        for more information.
+        {geminiMdFileCount === 0 ? '2.' : '1.'}{' '}
+        <Text color={theme.text.secondary}>/help</Text> for more information
+      </Text>
+      <Text color={theme.text.primary}>
+        {geminiMdFileCount === 0 ? '3.' : '2.'} Ask coding questions, edit code
+        or run commands
+      </Text>
+      <Text color={theme.text.primary}>
+        {geminiMdFileCount === 0 ? '4.' : '3.'} Be specific for the best results
       </Text>
     </Box>
   );