Codex Slash Menu

1"use client";
2 
3import * as React from "react";
4import { CodexPrompt } from "@/registry/brainless/codex/codex-prompt";
5import { cn } from "@/lib/utils";
6 
7/**
8 * CodexSlashMenu — Codex CLI's slash-command palette.
9 *
10 * Flat list under the `›` composer: padded command name + description.
11 * Type after `/` to filter; arrow keys move the active row.
12 */
13export type CodexSlashCommand = { name: string; description: string };
14 
15const DEFAULT: CodexSlashCommand[] = [
16  { name: "/model", description: "choose what model and reasoning effort to use" },
17  { name: "/permissions", description: "choose what Codex is allowed to do" },
18  { name: "/diff", description: "show the unified diff for this session" },
19  { name: "/review", description: "review a pull request or local changes" },
20  { name: "/status", description: "show model, limits, and session info" },
21  { name: "/compact", description: "summarize the conversation to save context" },
22];
23 
24const ACTIVE = "#ededed";
25const INACTIVE = "#7a7a7a";
26const NAME_COLS = 16;
27 
28export function CodexSlashMenu({
29  commands = DEFAULT,
30  className,
31}: {
32  commands?: CodexSlashCommand[];
33  className?: string;
34}) {
35  const [value, setValue] = React.useState("/");
36  const [active, setActive] = React.useState(0);
37 
38  const query = value.startsWith("/") ? value.slice(1) : value;
39  const list = commands.filter((c) =>
40    c.name.slice(1).toLowerCase().startsWith(query.toLowerCase()),
41  );
42  const clampedActive = list.length ? Math.min(active, list.length - 1) : 0;
43 
44  function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
45    if (!list.length) return;
46    if (e.key === "ArrowDown") {
47      e.preventDefault();
48      setActive((a) => (a + 1) % list.length);
49    } else if (e.key === "ArrowUp") {
50      e.preventDefault();
51      setActive((a) => (a - 1 + list.length) % list.length);
52    }
53  }
54 
55  return (
56    <div className={cn("font-mono text-[13px] leading-[1.6]", className)}>
57      <CodexPrompt
58        value={value}
59        onChange={(e) => {
60          setValue(e.target.value);
61          setActive(0);
62        }}
63        onKeyDown={onKeyDown}
64        placeholder=""
65        mode="default"
66      />
67 
68      <ul
69        role="listbox"
70        aria-label="Slash commands"
71        aria-activedescendant={
72          list.length ? `codex-slash-${clampedActive}` : undefined
73        }
74        className="mt-2 space-y-0.5 pl-[2ch]"
75      >
76        {list.map((c, i) => {
77          const activeRow = i === clampedActive;
78          return (
79// … truncated