feat(ui): improve discoverability of MCP slash commands (#6080)

Co-authored-by: Rinil Kunhiraman <rinilkunhiraman@users.noreply.github.com>
Co-authored-by: Allen Hutchison <adh@google.com>
This commit is contained in:
Rinil Kunhiraman
2025-09-05 20:15:40 -07:00
committed by GitHub
parent a027010097
commit d2b5b4f129
4 changed files with 231 additions and 509 deletions
+30 -21
View File
@@ -7,7 +7,7 @@
import type React from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import type { SlashCommand } from '../commands/types.js';
import { type SlashCommand, CommandKind } from '../commands/types.js';
interface Help {
commands: readonly SlashCommand[];
@@ -64,27 +64,32 @@ export const Help: React.FC<Help> = ({ commands }) => (
<Text bold color={Colors.Foreground}>
Commands:
</Text>
{commands.map((command: SlashCommand) => (
<Box key={command.name} flexDirection="column">
<Text color={Colors.Foreground}>
<Text bold color={Colors.AccentPurple}>
{' '}
/{command.name}
</Text>
{command.description && ' - ' + command.description}
</Text>
{command.subCommands &&
command.subCommands.map((subCommand) => (
<Text key={subCommand.name} color={Colors.Foreground}>
<Text bold color={Colors.AccentPurple}>
{' '}
{subCommand.name}
</Text>
{subCommand.description && ' - ' + subCommand.description}
{commands
.filter((command) => command.description)
.map((command: SlashCommand) => (
<Box key={command.name} flexDirection="column">
<Text color={Colors.Foreground}>
<Text bold color={Colors.AccentPurple}>
{' '}
/{command.name}
</Text>
))}
</Box>
))}
{command.kind === CommandKind.MCP_PROMPT && (
<Text color={Colors.Gray}> [MCP]</Text>
)}
{command.description && ' - ' + command.description}
</Text>
{command.subCommands &&
command.subCommands.map((subCommand) => (
<Text key={subCommand.name} color={Colors.Foreground}>
<Text bold color={Colors.AccentPurple}>
{' '}
{subCommand.name}
</Text>
{subCommand.description && ' - ' + subCommand.description}
</Text>
))}
</Box>
))}
<Text color={Colors.Foreground}>
<Text bold color={Colors.AccentPurple}>
{' '}
@@ -92,6 +97,10 @@ export const Help: React.FC<Help> = ({ commands }) => (
</Text>
- shell command
</Text>
<Text color={Colors.Foreground}>
<Text color={Colors.Gray}>[MCP]</Text> - Model Context Protocol command
(from external servers)
</Text>
<Box height={1} />