Claude Slash Menu

1"use client";
2 
3import * as React from "react";
4import { ClaudePrompt } from "@/registry/brainless/claude/claude-prompt";
5import { cn } from "@/lib/utils";
6 
7/**
8 * ClaudeSlashMenu — Claude Code's slash-command palette.
9 *
10 * The command list sits above the real ClaudePrompt composer. Typing after
11 * `/` in that input filters by command-name prefix; arrow keys move the
12 * active option. Active rows are light blue; inactive rows are gray. Both
13 * keep the same fixed-width name column so selection never shifts text.
14 */
15export type SlashCommand = { name: string; description: string };
16 
17const DEFAULT: SlashCommand[] = [
18  { name: "/agents", description: "Manage subagents for specialized tasks" },
19  { name: "/clear", description: "Clear conversation history and free up context" },
20  { name: "/compact", description: "Summarize the conversation to save context" },
21  { name: "/init", description: "Initialize a CLAUDE.md with codebase docs" },
22  { name: "/model", description: "Change the model for this session" },
23  { name: "/review", description: "Review a pull request" },
24];
25 
26const ACTIVE = "#afd7ff"; // 38;5;153
27const INACTIVE = "#949494"; // 38;5;246
28const NAME_COLS = 37; // matches Claude Code's padded name column
29 
30export function ClaudeSlashMenu({
31  commands = DEFAULT,
32  className,
33}: {
34  commands?: SlashCommand[];
35  className?: string;
36}) {
37  const [value, setValue] = React.useState("/");
38  const [active, setActive] = React.useState(0);
39 
40  const query = value.startsWith("/") ? value.slice(1) : value;
41  const list = commands.filter((c) =>
42    c.name.slice(1).toLowerCase().startsWith(query.toLowerCase()),
43  );
44  const clampedActive = list.length
45    ? Math.min(active, list.length - 1)
46    : 0;
47 
48  function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
49    if (!list.length) return;
50    if (e.key === "ArrowDown") {
51      e.preventDefault();
52      setActive((a) => (a + 1) % list.length);
53    } else if (e.key === "ArrowUp") {
54      e.preventDefault();
55      setActive((a) => (a - 1 + list.length) % list.length);
56    }
57  }
58 
59  return (
60    <div className={cn("font-mono text-[13px] leading-[1.6]", className)}>
61      <ul
62        role="listbox"
63        aria-label="Slash commands"
64        aria-activedescendant={
65          list.length ? `slash-${clampedActive}` : undefined
66        }
67        className="mb-2 space-y-0.5"
68      >
69        {list.map((c, i) => {
70          const activeRow = i === clampedActive;
71          return (
72            <li
73// … truncated