Add Intro text with list of /commands

1 files changed, 25 insertions, 18 deletions

diff --git a/packages/cli/src/ui/components/Intro.tsx b/packages/cli/src/ui/components/Intro.tsx
index 04dac134..d99e5993 100644
--- a/packages/cli/src/ui/components/Intro.tsx
+++ b/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 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}>  * 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>
-    <Text color={Colors.SubtleComment}>
-      <Text bold color={Colors.AccentPurple}>  /clear</Text>
-      {' '}- clear the screen
+    <Text bold color={Colors.Foreground}>
+      Abilities:
     </Text>
-    <Text color={Colors.SubtleComment}>
-      <Text bold color={Colors.AccentPurple}>  /exit</Text>
+    <Text color={Colors.Foreground}> * Use tools to read and write files</Text>
+    <Text color={Colors.Foreground}>
+      {' '}
+      * Semantically search and explain code
     </Text>
-    <Text color={Colors.SubtleComment}>
-      <Text bold color={Colors.AccentPurple}>  /quit</Text>
+    <Text color={Colors.Foreground}> * Execute bash commands</Text>
+    <Newline />
+    <Text bold color={Colors.Foreground}>
+      Commands:
     </Text>
+    {commands.map((command: SlashCommand) => (
+      <Text key={command.name} color={Colors.SubtleComment}>
+        <Text bold color={Colors.AccentPurple}>
+          {' '}
+          /{command.name}
+        </Text>
+        {command.description && ' - ' + command.description}
+      </Text>
+    ))}
   </Box>
 );