feat(ui): render CommandMenu in ComposerV2 and detect slash input

- Import and render CommandMenu component in ComposerV2 (was previously
  unused — all command menu props were prefixed with _ and ignored)
- Implement slash detection in handleCommandInputChange: typing / at the
  start of input or after whitespace opens the command menu with fuzzy
  filtering
- Auto-execute skills on menu selection: skills without argumentHint
  trigger immediate submit (equivalent to typing /skill + Enter),
  while commands needing args still insert into the input field
- Pass inputValueRef and handleSubmitRef to useSlashCommands for direct
  submit triggering from the auto-execute path

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: Mingwwww

ui/src/components/chat-v2/ComposerV2.tsx

@@ -27,6 +27,7 @@ import {
 import type { ChatRunMode, PendingPermissionRequest, PermissionMode } from '../chat/types/types';
 import PermissionRequestsBanner from '../chat/view/subcomponents/PermissionRequestsBanner';
 import ImageAttachment from '../chat/view/subcomponents/ImageAttachment';
+import CommandMenu from '../chat/view/subcomponents/CommandMenu';
 import { cn } from '../../lib/utils.js';
 
 interface MentionableFile {
@@ -264,12 +265,12 @@ export default function ComposerV2({
   filteredFiles,
   selectedFileIndex,
   onSelectFile,
-  filteredCommands: _filteredCommands,
-  selectedCommandIndex: _selectedCommandIndex,
-  onCommandSelect: _onCommandSelect,
-  onCloseCommandMenu: _onCloseCommandMenu,
-  isCommandMenuOpen: _isCommandMenuOpen,
-  frequentCommands: _frequentCommands,
+  filteredCommands,
+  selectedCommandIndex,
+  onCommandSelect,
+  onCloseCommandMenu,
+  isCommandMenuOpen,
+  frequentCommands,
   onToggleCommandMenu: _onToggleCommandMenu,
   onInsertMention,
   getRootProps,
@@ -418,6 +419,21 @@ export default function ComposerV2({
             >
               <input {...getInputProps()} />
 
+              <CommandMenu
+                commands={filteredCommands}
+                selectedIndex={selectedCommandIndex}
+                onSelect={onCommandSelect}
+                onClose={onCloseCommandMenu}
+                isOpen={isCommandMenuOpen}
+                frequentCommands={frequentCommands}
+                position={(() => {
+                  const ta = textareaRef?.current;
+                  if (!ta) return { top: 0, left: 0, bottom: 90 };
+                  const rect = ta.getBoundingClientRect();
+                  return { top: rect.top - 8, left: rect.left, bottom: window.innerHeight - rect.top + 8 };
+                })()}
+              />
+
               <div className="relative">
                 <div
                   ref={inputHighlightRef}

ui/src/components/chat/hooks/useChatComposerState.ts

@@ -518,6 +518,8 @@ export function useChatComposerState({
     setInput,
     textareaRef,
     onExecuteCommand: executeCommand,
+    inputValueRef,
+    handleSubmitRef,
   });
 
   const {

ui/src/components/chat/hooks/useSlashCommands.ts

@@ -24,6 +24,8 @@ interface UseSlashCommandsOptions {
   setInput: Dispatch<SetStateAction<string>>;
   textareaRef: RefObject<HTMLTextAreaElement>;
   onExecuteCommand: (command: SlashCommand, rawInput?: string) => void | Promise<void>;
+  inputValueRef?: { current: string };
+  handleSubmitRef?: { current: ((event: any) => Promise<void>) | null };
 }
 
 const getCommandHistoryKey = (projectName: string) => `command_history_${projectName}`;
@@ -55,6 +57,8 @@ export function useSlashCommands({
   setInput,
   textareaRef,
   onExecuteCommand,
+  inputValueRef: externalInputValueRef,
+  handleSubmitRef: externalHandleSubmitRef,
 }: UseSlashCommandsOptions) {
   const [slashCommands, setSlashCommands] = useState<SlashCommand[]>([]);
   const [filteredCommands, setFilteredCommands] = useState<SlashCommand[]>([]);
@@ -240,11 +244,20 @@ export function useSlashCommands({
 
   const autoExecuteCommand = useCallback(
     (command: SlashCommand) => {
+      trackCommandUsage(command);
       resetCommandMenuState();
-      setInput('');
-      onExecuteCommand(command, command.name);
+      const commandText = command.name;
+      setInput(commandText);
+      if (externalInputValueRef) {
+        externalInputValueRef.current = commandText;
+      }
+      setTimeout(() => {
+        if (externalHandleSubmitRef?.current) {
+          externalHandleSubmitRef.current({ preventDefault: () => {} });
+        }
+      }, 0);
     },
-    [resetCommandMenuState, setInput, onExecuteCommand],
+    [trackCommandUsage, resetCommandMenuState, setInput, externalInputValueRef, externalHandleSubmitRef],
   );
 
   // Insert the picked command name into the textarea and leave the caret right
@@ -334,10 +347,33 @@ export function useSlashCommands({
   }, [showCommandMenu, slashCommands, textareaRef]);
 
   const handleCommandInputChange = useCallback(
-    () => {
-      resetCommandMenuState();
+    (value?: string, cursorPos?: number) => {
+      if (value === undefined || cursorPos === undefined) {
+        resetCommandMenuState();
+        return;
+      }
+
+      const textBeforeCursor = value.slice(0, cursorPos);
+      const slashMatch = textBeforeCursor.match(/(^|\s)(\/)(\S*)$/);
+
+      if (!slashMatch) {
+        resetCommandMenuState();
+        return;
+      }
+
+      const slashIdx = textBeforeCursor.lastIndexOf('/');
+      const query = slashMatch[3] || '';
+
+      setSlashPosition(slashIdx);
+      setShowCommandMenu(true);
+      setSelectedCommandIndex(query ? -1 : 0);
+
+      clearCommandQueryTimer();
+      commandQueryTimerRef.current = window.setTimeout(() => {
+        setCommandQuery(query);
+      }, COMMAND_QUERY_DEBOUNCE_MS);
     },
-    [resetCommandMenuState],
+    [resetCommandMenuState, clearCommandQueryTimer],
   );
 
   const handleCommandMenuKeyDown = useCallback(