feat(keybinds): add custom keybind management with --global flag

al4xdev · al4xdev · commit fb745d67a7d2 · 2026-06-30T22:52:59.000-03:00
- Add /keybind slash command with add, remove, list subcommands
- Auto-complete partial matches (/key -&gt; /keybind)
- Show usage hint on bare /keybind instead of opening view
- /keybind list opens KeybindsView showing all configured keybinds
- --global flag forces operations on user-level settings
- Cross-level duplicate detection (merged keybind lookup)
- KeybindsView shows [global]/[local] origin indicator
- Custom keybind matchers trigger slash actions on shortcut press
- Status message timeout increased to 8s for readability
diff --git a/packages/cli/src/ui/views/App.tsx b/packages/cli/src/ui/views/App.tsx
@@ -13,6 +13,7 @@ import { findExpandedThinkingId } from "../core/thinking-state";
 import { WelcomeScreen } from "./WelcomeScreen";
 import { AskUserQuestionPrompt } from "./AskUserQuestionPrompt";
 import { McpStatusList } from "./McpStatusList";
+import { KeybindsView } from "./KeybindsView";
 import { ProcessStdoutView } from "./ProcessStdoutView";
 import {
   type AskUserQuestionAnswers,
@@ -50,7 +51,7 @@ import { SessionManager } from "@vegamo/deepcode-core";
 import { getCompactPromptTokenThreshold } from "@vegamo/deepcode-core";
 import { writeStdout, writeStdoutLine } from "../../utils/stdio-helpers";
 
-type View = "chat" | "session-list" | "undo" | "mcp-status";
+type View = "chat" | "session-list" | "undo" | "keybinds" | "mcp-status";
 
 const STATUS_SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 
@@ -361,6 +362,10 @@ function App({ projectRoot, initialPrompt, resumeSessionId, onRestart }: AppProp
         navigateToSubView("mcp-status");
         return;
       }
+      if (submission.command === "keybind") {
+        navigateToSubView("keybinds");
+        return;
+      }
 
       const prompt: UserPromptContent = {
         text: submission.text,
@@ -945,6 +950,8 @@ function App({ projectRoot, initialPrompt, resumeSessionId, onRestart }: AppProp
             setView("chat");
           }}
         />
+      ) : view === "keybinds" ? (
+        <KeybindsView keybinds={resolvedSettings.keybinds} projectRoot={projectRoot} onCancel={() => setView("chat")} />
       ) : view === "mcp-status" ? (
         <McpStatusList
           statuses={mcpStatuses}
diff --git a/packages/cli/src/ui/views/KeybindsView.tsx b/packages/cli/src/ui/views/KeybindsView.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import { readSettings, readProjectSettings } from "@vegamo/deepcode-core";
+import type { KeybindMap, DeepcodingSettings } from "@vegamo/deepcode-core";
+
+type Props = {
+  keybinds: KeybindMap;
+  projectRoot: string;
+  onCancel: () => void;
+};
+
+function getKeybindLevel(
+  shortcut: string,
+  userSettings: DeepcodingSettings | null,
+  projectSettings: DeepcodingSettings | null
+): "local" | "global" {
+  if (projectSettings?.keybinds?.[shortcut] !== undefined) return "local";
+  if (userSettings?.keybinds?.[shortcut] !== undefined) return "global";
+  return "global";
+}
+
+export function KeybindsView({ keybinds, projectRoot, onCancel }: Props): React.ReactElement {
+  const entries = Object.entries(keybinds);
+  const userSettings = readSettings();
+  const projectSettings = readProjectSettings(projectRoot);
+
+  useInput((_input, key) => {
+    if (key.escape) {
+      onCancel();
+    }
+  });
+
+  return (
+    <Box flexDirection="column" marginLeft={1} paddingX={1} gap={1} borderStyle="round" borderDimColor>
+      <Box>
+        <Text color="#229ac3" bold>
+          /keybind
+        </Text>
+      </Box>
+
+      {entries.length === 0 ? (
+        <Box>
+          <Text dimColor>(no keybinds configured)</Text>
+        </Box>
+      ) : (
+        <Box flexDirection="column">
+          {entries.map(([shortcut, action]) => {
+            const level = getKeybindLevel(shortcut, userSettings, projectSettings);
+            return (
+              <Box key={shortcut} gap={1}>
+                <Text>{shortcut}</Text>
+                <Text dimColor>→ /{action}</Text>
+                <Text color={level === "local" ? "yellow" : "blue"} dimColor>
+                  [{level}]
+                </Text>
+              </Box>
+            );
+          })}
+        </Box>
+      )}
+
+      <Box flexDirection="column">
+        <Text dimColor>/keybind add &lt;shortcut&gt; &lt;action&gt; to add</Text>
+        <Text dimColor>/keybind --global add &lt;shortcut&gt; &lt;action&gt; (user-level)</Text>
+        <Text dimColor>/keybind remove &lt;shortcut&gt; to remove</Text>
+        <Text dimColor>/keybind --global remove &lt;shortcut&gt; (user-level)</Text>
+      </Box>
+
+      <Text dimColor>Esc to close</Text>
+    </Box>
+  );
+}
diff --git a/packages/cli/src/ui/views/PromptInput.tsx b/packages/cli/src/ui/views/PromptInput.tsx
@@ -74,7 +74,7 @@ export type PromptSubmission = {
   selectedSkills?: SkillInfo[];
   permissions?: UserToolPermission[];
   alwaysAllows?: PermissionScope[];
-  command?: "new" | "resume" | "continue" | "undo" | "mcp" | "exit";
+  command?: "new" | "resume" | "continue" | "undo" | "mcp" | "keybind" | "exit";
 };
 
 export type PromptDraft = {
@@ -293,7 +293,7 @@ export const PromptInput = React.memo(function PromptInput({
     if (!statusMessage) {
       return;
     }
-    const timer = setTimeout(() => setStatusMessage(null), 2500);
+    const timer = setTimeout(() => setStatusMessage(null), 8000);
     return () => clearTimeout(timer);
   }, [statusMessage]);
 
@@ -738,7 +738,18 @@ export const PromptInput = React.memo(function PromptInput({
       return;
     }
     if (item.kind === "keybind") {
-      handleKeybindCommand();
+      const parts = buffer.text.trim().split(/\s+/);
+      if (parts.length > 1) {
+        // Has args: process add/remove/list subcommand
+        handleKeybindCommand();
+      } else if (parts[0] && parts[0] !== "/keybind") {
+        // Partial match from menu (e.g. /key): auto-complete to /keybind
+        setBuffer({ text: "/keybind ", cursor: "/keybind ".length });
+        clearUndoRedoStacks();
+      } else {
+        // Exact match with no args: show usage hint
+        setStatusMessage("Usage: /keybind add <shortcut> <action> | remove <shortcut> | list");
+      }
       return;
     }
     if (item.kind === "exit") {
@@ -750,20 +761,19 @@ export const PromptInput = React.memo(function PromptInput({
   }
 
   function handleKeybindCommand(): void {
-    const parts = buffer.text.trim().split(/\s+/);
+    const rawParts = buffer.text.trim().split(/\s+/);
+    const isGlobal = rawParts.includes("--global");
+    const parts = rawParts.filter((p) => p !== "--global");
     const subcommand = parts[1] ?? "list";
     const existingProjectSettings = readProjectSettings(projectRoot);
+    const useProject = existingProjectSettings !== null;
+    const userSettings = readSettings();
+    const kbs = keybinds ?? {};
+    const levelLabel = isGlobal ? " (global)" : useProject ? " (project)" : " (global)";
 
     if (subcommand === "list") {
-      clearSlashToken();
-      const kbs = keybinds ?? {};
-      const entries = Object.entries(kbs);
-      if (entries.length === 0) {
-        setStatusMessage("No custom keybinds configured. Use /keybind add <shortcut> <action>");
-      } else {
-        const lines = entries.map(([shortcut, action]) => `  ${shortcut} → /${action}`);
-        setStatusMessage(`Keybinds:\n${lines.join("\n")}`);
-      }
+      onSubmit({ text: "/keybind list", imageUrls: [], command: "keybind" });
+      resetPromptInput();
       return;
     }
 
@@ -786,52 +796,76 @@ export const PromptInput = React.memo(function PromptInput({
       // Validate action is a known slash command or skill
       const knownNames = new Set(slashItems.map((s) => s.name));
       if (!knownNames.has(action)) {
-        setStatusMessage(`Unknown action "/${action}". Use a slash command or skill name.`);
+        const available = slashItems
+          .filter((s) => s.kind !== "skill")
+          .map((s) => s.name)
+          .slice(0, 10)
+          .join(", ");
+        setStatusMessage(`Unknown action "/${action}". Available: ${available}…`);
         clearSlashToken();
         return;
       }
 
-      const useProject = existingProjectSettings !== null;
-      const rawSettings = useProject ? existingProjectSettings : readSettings();
+      // Check duplicates across all levels (merged)
+      const existingMerged = kbs[shortcut];
+      if (existingMerged === action) {
+        setStatusMessage(`Keybind already set: ${shortcut} → /${action}`);
+        clearSlashToken();
+        return;
+      }
+
+      // Determine write target
+      const rawSettings = isGlobal ? userSettings : useProject ? existingProjectSettings : userSettings;
       const current: Record<string, string> = { ...(rawSettings?.keybinds ?? {}) };
       current[shortcut] = action;
       const updated = { ...(rawSettings ?? {}), keybinds: current };
-      if (useProject) {
-        writeProjectSettings(updated, projectRoot);
-      } else {
+      if (isGlobal || !useProject) {
         writeSettings(updated);
+      } else {
+        writeProjectSettings(updated, projectRoot);
       }
       onKeybindsChanged?.();
-      setStatusMessage(`Keybind added: ${shortcut} → /${action}`);
+      if (existingMerged) {
+        setStatusMessage(`Keybind updated: ${shortcut} → /${action} (was /${existingMerged})${levelLabel}`);
+      } else {
+        setStatusMessage(`Keybind added: ${shortcut} → /${action}${levelLabel}`);
+      }
       clearSlashToken();
       return;
     }
 
     if (subcommand === "remove") {
       const shortcut = parts[2];
+      const rawSettings = isGlobal ? userSettings : useProject ? existingProjectSettings : userSettings;
+      const current: Record<string, string> = { ...(rawSettings?.keybinds ?? {}) };
+      const existingShortcuts = Object.keys(kbs);
       if (!shortcut) {
-        setStatusMessage("Usage: /keybind remove <shortcut>");
+        if (existingShortcuts.length === 0) {
+          setStatusMessage("No custom keybinds to remove.");
+        } else {
+          const list = existingShortcuts.map((s) => `${s} → /${kbs[s]}`).join(", ");
+          setStatusMessage(`Usage: /keybind remove <shortcut>\nExisting: ${list}`);
+        }
         clearSlashToken();
         return;
       }
 
-      const useProject = existingProjectSettings !== null;
-      const rawSettings = useProject ? existingProjectSettings : readSettings();
-      const current: Record<string, string> = { ...(rawSettings?.keybinds ?? {}) };
       if (!(shortcut in current)) {
-        setStatusMessage(`Keybind "${shortcut}" not found.`);
+        const list =
+          existingShortcuts.length > 0 ? existingShortcuts.map((s) => `${s} → /${kbs[s]}`).join(", ") : "(none)";
+        setStatusMessage(`Keybind "${shortcut}" not found${levelLabel}.\nExisting: ${list}`);
         clearSlashToken();
         return;
       }
       delete current[shortcut];
       const updated = { ...(rawSettings ?? {}), keybinds: current };
-      if (useProject) {
-        writeProjectSettings(updated, projectRoot);
-      } else {
+      if (isGlobal || !useProject) {
         writeSettings(updated);
+      } else {
+        writeProjectSettings(updated, projectRoot);
       }
       onKeybindsChanged?.();
-      setStatusMessage(`Keybind removed: ${shortcut}`);
+      setStatusMessage(`Keybind removed: ${shortcut}${levelLabel}`);
       clearSlashToken();
       return;
     }
