feat(cli): add interactive keybind menu for /keybind without args

When /keybind is selected from the slash menu (no extra args),
show an inline menu listing all configured keybinds with hints
for add/remove subcommands. Matches the pattern used by /skills
and /model dropdowns.

Typing /keybind add/remove with explicit args still processes
the subcommand directly.

Author: al4xdev

packages/cli/src/ui/views/PromptInput.tsx

@@ -153,6 +153,7 @@ export const PromptInput = React.memo(function PromptInput({
   const [showSkillsDropdown, setShowSkillsDropdown] = useState(false);
   const [openRawModelDropdown, setOpenRawModelDropdown] = useState(false);
   const [showModelDropdown, setShowModelDropdown] = useState(false);
+  const [showKeybindMenu, setShowKeybindMenu] = useState(false);
   const [fileMentionItems, setFileMentionItems] = useState<FileMentionItem[]>(() => scanFileMentionItems(projectRoot));
   const [dismissedFileMentionKey, setDismissedFileMentionKey] = useState<string | null>(null);
   const [hasTerminalFocus, setHasTerminalFocus] = useState(true);
@@ -182,6 +183,7 @@ export const PromptInput = React.memo(function PromptInput({
     !showSkillsDropdown &&
     !showModelDropdown &&
     !openRawModelDropdown &&
+    !showKeybindMenu &&
     fileMentionToken !== null &&
     fileMentionKey !== dismissedFileMentionKey;
   const slashItems = React.useMemo(() => buildSlashCommands(skills), [skills]);
@@ -192,12 +194,20 @@ export const PromptInput = React.memo(function PromptInput({
   const slashToken = getCurrentSlashToken(buffer);
   const slashMenu = React.useMemo(
     () =>
-      showSkillsDropdown || showModelDropdown || openRawModelDropdown || showFileMentionMenu
+      showSkillsDropdown || showModelDropdown || openRawModelDropdown || showFileMentionMenu || showKeybindMenu
         ? []
         : slashToken
           ? filterSlashCommands(slashItems, slashToken)
           : [],
-    [showSkillsDropdown, showModelDropdown, openRawModelDropdown, showFileMentionMenu, slashToken, slashItems]
+    [
+      showSkillsDropdown,
+      showModelDropdown,
+      openRawModelDropdown,
+      showFileMentionMenu,
+      showKeybindMenu,
+      slashToken,
+      slashItems,
+    ]
   );
   const showMenu = slashMenu.length > 0;
   const promptHistoryKey = React.useMemo(() => promptHistory.join("\0"), [promptHistory]);
@@ -219,8 +229,14 @@ export const PromptInput = React.memo(function PromptInput({
       ? busyStatusText
       : `enter send · shift+enter newline · @ files · ctrl+v image · / commands · ctrl+d exit${processOrPasteHint}`;
   const showFooterText = useMemo(
-    () => showMenu || showSkillsDropdown || openRawModelDropdown || showModelDropdown || showFileMentionMenu,
-    [showMenu, showSkillsDropdown, showModelDropdown, openRawModelDropdown, showFileMentionMenu]
+    () =>
+      showMenu ||
+      showSkillsDropdown ||
+      openRawModelDropdown ||
+      showModelDropdown ||
+      showFileMentionMenu ||
+      showKeybindMenu,
+    [showMenu, showSkillsDropdown, showModelDropdown, openRawModelDropdown, showFileMentionMenu, showKeybindMenu]
   );
   const inputContentWidth = Math.max(1, screenWidth - PROMPT_PREFIX_WIDTH);
 
@@ -333,7 +349,14 @@ export const PromptInput = React.memo(function PromptInput({
 
       // Check custom keybinds before hardcoded shortcuts.
       // Only match when no dropdown/menu is open to avoid conflicts.
-      if (!openRawModelDropdown && !showSkillsDropdown && !showModelDropdown && !showMenu && !showFileMentionMenu) {
+      if (
+        !openRawModelDropdown &&
+        !showSkillsDropdown &&
+        !showModelDropdown &&
+        !showMenu &&
+        !showFileMentionMenu &&
+        !showKeybindMenu
+      ) {
         for (const { match, action } of keybindMatchers) {
           if (match(input, key)) {
             const item = slashItems.find((s) => s.name === action);
@@ -352,6 +375,10 @@ export const PromptInput = React.memo(function PromptInput({
         if (showFileMentionMenu) {
           return;
         }
+        if (showKeybindMenu) {
+          setShowKeybindMenu(false);
+          return;
+        }
         if (busy) {
           onInterrupt();
           setStatusMessage("Interrupting…");
@@ -409,7 +436,7 @@ export const PromptInput = React.memo(function PromptInput({
         setPendingExit(false);
       }
 
-      if (openRawModelDropdown || showSkillsDropdown || showModelDropdown) {
+      if (openRawModelDropdown || showSkillsDropdown || showModelDropdown || showKeybindMenu) {
         return;
       }
 
@@ -675,6 +702,7 @@ export const PromptInput = React.memo(function PromptInput({
     setImageUrls([]);
     setSelectedSkills([]);
     setShowSkillsDropdown(false);
+    setShowKeybindMenu(false);
     exitHistoryBrowsing();
     resetPastes();
   }
@@ -738,7 +766,15 @@ export const PromptInput = React.memo(function PromptInput({
       return;
     }
     if (item.kind === "keybind") {
-      handleKeybindCommand();
+      const parts = buffer.text.trim().split(/\s+/);
+      // If the user typed extra args (add/remove), process as subcommand.
+      // Otherwise open the interactive menu.
+      if (parts.length > 1) {
+        handleKeybindCommand();
+      } else {
+        clearSlashToken();
+        setShowKeybindMenu(true);
+      }
       return;
     }
     if (item.kind === "exit") {
@@ -946,6 +982,31 @@ export const PromptInput = React.memo(function PromptInput({
         onModelConfigChange={onModelConfigChange}
         onStatusMessage={setStatusMessage}
       />
+      {showKeybindMenu ? (
+        <Box flexDirection="column" marginBottom={1} width={screenWidth}>
+          <Box marginLeft={2}>
+            <Text bold>Keybinds</Text>
+          </Box>
+          {(keybinds && Object.keys(keybinds).length > 0
+            ? Object.entries(keybinds).map(([shortcut, action]) => (
+                <Box key={shortcut} marginLeft={4}>
+                  <Text>{shortcut}</Text>
+                  <Text dimColor> → /{action}</Text>
+                </Box>
+              ))
+            : null) || (
+            <Box marginLeft={4}>
+              <Text dimColor>(no keybinds configured)</Text>
+            </Box>
+          )}
+          <Box marginLeft={2} marginTop={1}>
+            <Text dimColor>/keybind add &lt;shortcut&gt; &lt;action&gt; to add</Text>
+          </Box>
+          <Box marginLeft={2}>
+            <Text dimColor>/keybind remove &lt;shortcut&gt; to remove</Text>
+          </Box>
+        </Box>
+      ) : null}
       <FileMentionMenu
         open={showFileMentionMenu}
         width={screenWidth}