Allow for slash commands to opt-out of autocompletion and /help discovery. (#7847)

packages/cli/src/ui/components/Help.test.tsx

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/** @vitest-environment jsdom */
+
+import { render } from 'ink-testing-library';
+import { describe, it, expect } from 'vitest';
+import { Help } from './Help.js';
+import type { SlashCommand } from '../commands/types.js';
+import { CommandKind } from '../commands/types.js';
+
+const mockCommands: readonly SlashCommand[] = [
+  {
+    name: 'test',
+    description: 'A test command',
+    kind: CommandKind.BUILT_IN,
+  },
+  {
+    name: 'hidden',
+    description: 'A hidden command',
+    hidden: true,
+    kind: CommandKind.BUILT_IN,
+  },
+  {
+    name: 'parent',
+    description: 'A parent command',
+    kind: CommandKind.BUILT_IN,
+    subCommands: [
+      {
+        name: 'visible-child',
+        description: 'A visible child command',
+        kind: CommandKind.BUILT_IN,
+      },
+      {
+        name: 'hidden-child',
+        description: 'A hidden child command',
+        hidden: true,
+        kind: CommandKind.BUILT_IN,
+      },
+    ],
+  },
+];
+
+describe('Help Component', () => {
+  it('should not render hidden commands', () => {
+    const { lastFrame } = render(<Help commands={mockCommands} />);
+    const output = lastFrame();
+
+    expect(output).toContain('/test');
+    expect(output).not.toContain('/hidden');
+  });
+
+  it('should not render hidden subcommands', () => {
+    const { lastFrame } = render(<Help commands={mockCommands} />);
+    const output = lastFrame();
+
+    expect(output).toContain('visible-child');
+    expect(output).not.toContain('hidden-child');
+  });
+});

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

@@ -65,7 +65,7 @@ export const Help: React.FC<Help> = ({ commands }) => (
       Commands:
     </Text>
     {commands
-      .filter((command) => command.description)
+      .filter((command) => command.description && !command.hidden)
       .map((command: SlashCommand) => (
         <Box key={command.name} flexDirection="column">
           <Text color={Colors.Foreground}>
@@ -79,15 +79,17 @@ export const Help: React.FC<Help> = ({ commands }) => (
             {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}
+            command.subCommands
+              .filter((subCommand) => !subCommand.hidden)
+              .map((subCommand) => (
+                <Text key={subCommand.name} color={Colors.Foreground}>
+                  <Text bold color={Colors.AccentPurple}>
+                    {'   '}
+                    {subCommand.name}
+                  </Text>
+                  {subCommand.description && ' - ' + subCommand.description}
                 </Text>
-                {subCommand.description && ' - ' + subCommand.description}
-              </Text>
-            ))}
+              ))}
         </Box>
       ))}
     <Text color={Colors.Foreground}>