Add Intro text with list of /commands

packages/cli/src/ui/App.tsx

@@ -32,8 +32,13 @@ interface AppProps {
 export const App = ({ config, cliVersion }: AppProps) => {
   const [history, setHistory] = useState<HistoryItem[]>([]);
   const [startupWarnings, setStartupWarnings] = useState<string[]>([]);
-  const { streamingState, submitQuery, initError, debugMessage } =
-    useGeminiStream(setHistory, config);
+  const {
+    streamingState,
+    submitQuery,
+    initError,
+    debugMessage,
+    slashCommands,
+  } = useGeminiStream(setHistory, config);
   const { elapsedTime, currentLoadingPhrase } =
     useLoadingIndicator(streamingState);
 
@@ -104,7 +109,7 @@ export const App = ({ config, cliVersion }: AppProps) => {
               <Box flexDirection="column" key={'header-' + index}>
                 <Header />
                 <Tips />
-                <Intro />
+                <Intro commands={slashCommands} />
               </Box>
             );
           }

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

@@ -7,28 +7,35 @@
 import React from 'react';
 import { Box, Newline, Text } from 'ink';
 import { Colors } from '../colors.js';
+import { SlashCommand } from '../hooks/slashCommandProcessor.js';
 
-export const Intro: React.FC = () => (
+interface Intro {
+  commands: SlashCommand[];
+}
+
+export const Intro: React.FC<Intro> = ({ commands }) => (
   <Box flexDirection="column" marginBottom={1}>
-    <Text bold color={Colors.Foreground}>Abilities:</Text>
+    <Text bold color={Colors.Foreground}>
+      Abilities:
+    </Text>
     <Text color={Colors.Foreground}> * Use tools to read and write files</Text>
-    <Text color={Colors.Foreground}>  * Semantically search and understand code</Text>
+    <Text color={Colors.Foreground}>
+      {' '}
+      * Semantically search and explain code
+    </Text>
     <Text color={Colors.Foreground}> * Execute bash commands</Text>
     <Newline />
-    <Text bold color={Colors.Foreground}>Commands:</Text>
-    <Text color={Colors.SubtleComment}>
-      <Text bold color={Colors.AccentPurple}>  /help</Text>
-      {' '}- prints this help
+    <Text bold color={Colors.Foreground}>
+      Commands:
     </Text>
-    <Text color={Colors.SubtleComment}>
-      <Text bold color={Colors.AccentPurple}>  /clear</Text>
-      {' '}- clear the screen
+    {commands.map((command: SlashCommand) => (
+      <Text key={command.name} color={Colors.SubtleComment}>
+        <Text bold color={Colors.AccentPurple}>
+          {' '}
+          /{command.name}
         </Text>
-    <Text color={Colors.SubtleComment}>
-      <Text bold color={Colors.AccentPurple}>  /exit</Text>
-    </Text>
-    <Text color={Colors.SubtleComment}>
-      <Text bold color={Colors.AccentPurple}>  /quit</Text>
+        {command.description && ' - ' + command.description}
       </Text>
+    ))}
   </Box>
 );

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

@@ -9,7 +9,7 @@ import { type PartListUnion } from '@google/genai';
 import { HistoryItem } from '../types.js';
 import { isSlashCommand } from '../utils/commandUtils.js';
 
-interface SlashCommand {
+export interface SlashCommand {
   name: string; // slash command
   description: string; // flavor text in UI
   action: (value: PartListUnion) => void;
@@ -43,7 +43,7 @@ export const useSlashCommandProcessor = (
     },
     {
       name: 'help',
-      description: '/help for help on gemini-code',
+      description: 'for help on gemini-code',
       action: (_value: PartListUnion) => {
         const helpText =
           'I am an interactive CLI tool assistant designed to ' +
@@ -58,7 +58,7 @@ export const useSlashCommandProcessor = (
     },
     {
       name: 'exit',
-      description: 'Exit gemini-code',
+      description: '',
       action: (_value: PartListUnion) => {
         setDebugMessage('Exiting. Good-bye.');
         const timestamp = getNextMessageId(Date.now());
@@ -73,7 +73,7 @@ export const useSlashCommandProcessor = (
     {
       // TODO: dedup with exit by adding altName or cmdRegex.
       name: 'quit',
-      description: 'Quit gemini-code',
+      description: '',
       action: (_value: PartListUnion) => {
         setDebugMessage('Quitting. Good-bye.');
         const timestamp = getNextMessageId(Date.now());
@@ -121,5 +121,5 @@ export const useSlashCommandProcessor = (
     [setDebugMessage, setHistory, getNextMessageId, slashCommands],
   );
 
-  return { handleSlashCommand };
+  return { handleSlashCommand, slashCommands };
 };

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

@@ -69,7 +69,7 @@ export const useGeminiStream = (
   }, []);
 
   // Instantiate command processors
-  const { handleSlashCommand } = useSlashCommandProcessor(
+  const { handleSlashCommand, slashCommands } = useSlashCommandProcessor(
     setHistory,
     setDebugMessage,
     getNextMessageId,
@@ -532,5 +532,11 @@ export const useGeminiStream = (
     ],
   );
 
-  return { streamingState, submitQuery, initError, debugMessage };
+  return {
+    streamingState,
+    submitQuery,
+    initError,
+    debugMessage,
+    slashCommands,
+  };
 };