Add configurable hotkey for editor autocomplete trigger (#350)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

src-web/components/Settings/SettingsHotkeys.tsx

@@ -1,7 +1,8 @@
 import { patchModel, settingsAtom } from '@yaakapp-internal/models';
 import classNames from 'classnames';
+import { fuzzyMatch } from 'fuzzbunny';
 import { useAtomValue } from 'jotai';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   defaultHotkeys,
   formatHotkeyString,
@@ -19,11 +20,19 @@ import { Heading } from '../core/Heading';
 import { HotkeyRaw } from '../core/Hotkey';
 import { Icon } from '../core/Icon';
 import { IconButton } from '../core/IconButton';
+import { PlainInput } from '../core/PlainInput';
 import { HStack, VStack } from '../core/Stacks';
 import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '../core/Table';
 
 const HOLD_KEYS = ['Shift', 'Control', 'Alt', 'Meta'];
-const LAYOUT_INSENSITIVE_KEYS = ['Equal', 'Minus', 'BracketLeft', 'BracketRight', 'Backquote'];
+const LAYOUT_INSENSITIVE_KEYS = [
+  'Equal',
+  'Minus',
+  'BracketLeft',
+  'BracketRight',
+  'Backquote',
+  'Space',
+];
 
 /** Convert a KeyboardEvent to a hotkey string like "Meta+Shift+k" or "Control+Shift+k" */
 function eventToHotkeyString(e: KeyboardEvent): string | null {
@@ -58,6 +67,19 @@ function eventToHotkeyString(e: KeyboardEvent): string | null {
 export function SettingsHotkeys() {
   const settings = useAtomValue(settingsAtom);
   const hotkeys = useAtomValue(hotkeysAtom);
+  const [filter, setFilter] = useState('');
+
+  const filteredActions = useMemo(() => {
+    if (!filter.trim()) {
+      return hotkeyActions;
+    }
+    return hotkeyActions.filter((action) => {
+      const scope = getHotkeyScope(action).replace(/_/g, ' ');
+      const label = action.replace(/[_.]/g, ' ');
+      const searchText = `${scope} ${label}`;
+      return fuzzyMatch(searchText, filter) != null;
+    });
+  }, [filter]);
 
   if (settings == null) {
     return null;
@@ -71,6 +93,14 @@ export function SettingsHotkeys() {
           Click the menu button to add, remove, or reset keyboard shortcuts.
         </p>
       </div>
+      <PlainInput
+        label="Filter"
+        placeholder="Filter shortcuts..."
+        defaultValue={filter}
+        onChange={setFilter}
+        hideLabel
+        containerClassName="max-w-xs"
+      />
       <Table>
         <TableHead>
           <TableRow>
@@ -80,8 +110,9 @@ export function SettingsHotkeys() {
             <TableHeaderCell></TableHeaderCell>
           </TableRow>
         </TableHead>
-        <TableBody>
-          {hotkeyActions.map((action) => (
+        {/* key={filter} forces re-render on filter change to fix Safari table rendering bug */}
+        <TableBody key={filter}>
+          {filteredActions.map((action) => (
             <HotkeyRow
               key={action}
               action={action}

src-web/components/core/Editor/Editor.tsx

@@ -1,3 +1,4 @@
+import { startCompletion } from '@codemirror/autocomplete';
 import { defaultKeymap, historyField, indentWithTab } from '@codemirror/commands';
 import { foldState, forceParsing } from '@codemirror/language';
 import type { EditorStateConfig, Extension } from '@codemirror/state';
@@ -28,6 +29,7 @@ import {
 import { activeEnvironmentAtom } from '../../../hooks/useActiveEnvironment';
 import type { WrappedEnvironmentVariable } from '../../../hooks/useEnvironmentVariables';
 import { useEnvironmentVariables } from '../../../hooks/useEnvironmentVariables';
+import { eventMatchesHotkey } from '../../../hooks/useHotKey';
 import { useRequestEditor } from '../../../hooks/useRequestEditor';
 import { useTemplateFunctionCompletionOptions } from '../../../hooks/useTemplateFunctions';
 import { editEnvironment } from '../../../lib/editEnvironment';
@@ -580,7 +582,13 @@ function getExtensions({
       blur: () => {
         onBlur.current?.();
       },
-      keydown: (e) => {
+      keydown: (e, view) => {
+        // Check if the hotkey matches the editor.autocomplete action
+        if (eventMatchesHotkey(e, 'editor.autocomplete')) {
+          e.preventDefault();
+          startCompletion(view);
+          return true;
+        }
         onKeyDown.current?.(e);
       },
       paste: (e, v) => {

src-web/components/core/Editor/extensions.ts

@@ -184,6 +184,16 @@ export function getLanguageExtension({
   });
 }
 
+// Filter out autocomplete start triggers from completionKeymap since we handle it via configurable hotkeys.
+// Keep navigation keys (ArrowUp/Down, Enter, Escape, etc.) but remove startCompletion bindings.
+const filteredCompletionKeymap = completionKeymap.filter((binding) => {
+  const key = binding.key?.toLowerCase() ?? '';
+  const mac = (binding as { mac?: string }).mac?.toLowerCase() ?? '';
+  // Filter out Ctrl-Space and Mac-specific autocomplete triggers (Alt-`, Alt-i)
+  const isStartTrigger = key.includes('space') || mac.includes('alt-') || mac.includes('`');
+  return !isStartTrigger;
+});
+
 export const baseExtensions = [
   highlightSpecialChars(),
   history(),
@@ -192,6 +202,7 @@ export const baseExtensions = [
   autocompletion({
     tooltipClass: () => 'x-theme-menu',
     closeOnBlur: true, // Set to `false` for debugging in devtools without closing it
+    defaultKeymap: false, // We handle the trigger via configurable hotkeys
     compareCompletions: (a, b) => {
       // Don't sort completions at all, only on boost
       return (a.boost ?? 0) - (b.boost ?? 0);
@@ -199,7 +210,7 @@ export const baseExtensions = [
   }),
   syntaxHighlighting(syntaxHighlightStyle),
   syntaxTheme,
-  keymap.of([...historyKeymap, ...completionKeymap]),
+  keymap.of([...historyKeymap, ...filteredCompletionKeymap]),
 ];
 
 export const readonlyExtensions = [