diff --git a/ui/src/components/chat/hooks/useChatComposerState.ts b/ui/src/components/chat/hooks/useChatComposerState.ts
index 13acbf3d..b6433eb3 100644
--- a/ui/src/components/chat/hooks/useChatComposerState.ts
+++ b/ui/src/components/chat/hooks/useChatComposerState.ts
@@ -519,9 +519,7 @@ export function useChatComposerState({
     input,
     setInput,
     textareaRef,
-    onExecuteCommand: executeCommand,
     inputValueRef,
-    handleSubmitRef,
   });
 
   const {
diff --git a/ui/src/components/chat/hooks/useSlashCommands.ts b/ui/src/components/chat/hooks/useSlashCommands.ts
index d6927de5..58f59433 100644
--- a/ui/src/components/chat/hooks/useSlashCommands.ts
+++ b/ui/src/components/chat/hooks/useSlashCommands.ts
@@ -23,9 +23,7 @@ interface UseSlashCommandsOptions {
   input: string;
   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}`;
@@ -48,17 +46,56 @@ const saveCommandHistory = (projectName: string, history: Record<string, number>
   safeLocalStorage.setItem(getCommandHistoryKey(projectName), JSON.stringify(history));
 };
 
-const isPromiseLike = (value: unknown): value is Promise<unknown> =>
-  Boolean(value) && typeof (value as Promise<unknown>).then === 'function';
+const getCommandKey = (command: SlashCommand) =>
+  `${command.name}::${command.namespace || command.type || 'other'}::${command.path || ''}`;
+
+const getCommandNamespace = (command: SlashCommand) =>
+  command.namespace || command.type || 'other';
+
+const groupCommandsForDisplay = (
+  commands: SlashCommand[],
+  frequentCommands: SlashCommand[],
+): SlashCommand[] => {
+  const preferredOrder = frequentCommands.length > 0
+    ? ['pinned', 'frequent', 'builtin', 'project', 'user', 'other']
+    : ['pinned', 'builtin', 'project', 'user', 'other'];
+  const groups = new Map<string, SlashCommand[]>();
+  const frequentCommandKeys = new Set(frequentCommands.map(getCommandKey));
+
+  for (const command of commands) {
+    if (frequentCommandKeys.has(getCommandKey(command))) {
+      continue;
+    }
+    const namespace = getCommandNamespace(command);
+    const group = groups.get(namespace) || [];
+    group.push(command);
+    groups.set(namespace, group);
+  }
+
+  if (frequentCommands.length > 0) {
+    groups.set(
+      'frequent',
+      frequentCommands.map((command) => ({
+        ...command,
+        namespace: 'frequent',
+      })),
+    );
+  }
+
+  const extraNamespaces = [...groups.keys()].filter(
+    (namespace) => !preferredOrder.includes(namespace),
+  );
+  return [...preferredOrder, ...extraNamespaces].flatMap(
+    (namespace) => groups.get(namespace) || [],
+  );
+};
 
 export function useSlashCommands({
   selectedProject,
   input,
   setInput,
   textareaRef,
-  onExecuteCommand,
   inputValueRef: externalInputValueRef,
-  handleSubmitRef: externalHandleSubmitRef,
 }: UseSlashCommandsOptions) {
   const [slashCommands, setSlashCommands] = useState<SlashCommand[]>([]);
   const [filteredCommands, setFilteredCommands] = useState<SlashCommand[]>([]);
@@ -223,6 +260,29 @@ export function useSlashCommands({
       .slice(0, 5);
   }, [selectedProject, slashCommands]);
 
+  const displayedCommands = useMemo(() => {
+    return groupCommandsForDisplay(
+      filteredCommands,
+      commandQuery ? [] : frequentCommands,
+    );
+  }, [commandQuery, filteredCommands, frequentCommands]);
+
+  useEffect(() => {
+    if (!showCommandMenu) {
+      return;
+    }
+
+    setSelectedCommandIndex((previousIndex) => {
+      if (displayedCommands.length === 0) {
+        return -1;
+      }
+      if (previousIndex >= displayedCommands.length) {
+        return displayedCommands.length - 1;
+      }
+      return previousIndex;
+    });
+  }, [displayedCommands.length, showCommandMenu]);
+
   const trackCommandUsage = useCallback(
     (command: SlashCommand) => {
       if (!selectedProject) {
@@ -236,34 +296,10 @@ export function useSlashCommands({
     [selectedProject],
   );
 
-  const shouldAutoExecute = useCallback((command: SlashCommand): boolean => {
-    const type = command.metadata?.type as string | undefined;
-    const hasArgHint = Boolean(command.metadata?.argumentHint);
-    return !hasArgHint && (type === 'skill' || type === 'bundled-skill');
-  }, []);
-
-  const autoExecuteCommand = useCallback(
-    (command: SlashCommand) => {
-      trackCommandUsage(command);
-      resetCommandMenuState();
-      const commandText = command.name;
-      setInput(commandText);
-      if (externalInputValueRef) {
-        externalInputValueRef.current = commandText;
-      }
-      setTimeout(() => {
-        if (externalHandleSubmitRef?.current) {
-          externalHandleSubmitRef.current({ preventDefault: () => {} });
-        }
-      }, 0);
-    },
-    [trackCommandUsage, resetCommandMenuState, setInput, externalInputValueRef, externalHandleSubmitRef],
-  );
-
   // Insert the picked command name into the textarea and leave the caret right
   // after `<command> `. We DO NOT auto-submit — the user reviews/edits args
   // and presses Enter themselves, mirroring how the TUI behaves and avoiding
-  // surprise sends (e.g. /add-project with no path runs blindly).
+  // surprise sends from slash suggestions that still need arguments.
   //
   // The replacement spans from the active `/` to the next whitespace so a
   // partial query like `hello /skill_inst` becomes `hello /skill_install ` and
@@ -282,6 +318,9 @@ export function useSlashCommands({
       const newInput = `${head}${textAfterQuery}`;
 
       setInput(newInput);
+      if (externalInputValueRef) {
+        externalInputValueRef.current = newInput;
+      }
       resetCommandMenuState();
 
       // Defer focus + caret placement until after React commits the new input
@@ -298,18 +337,15 @@ export function useSlashCommands({
         }
       }, 0);
     },
-    [input, slashPosition, setInput, resetCommandMenuState, textareaRef],
+    [externalInputValueRef, input, slashPosition, setInput, resetCommandMenuState, textareaRef],
   );
 
   const selectCommandFromKeyboard = useCallback(
     (command: SlashCommand) => {
-      if (shouldAutoExecute(command)) {
-        autoExecuteCommand(command);
-        return;
-      }
+      trackCommandUsage(command);
       insertCommandIntoInput(command);
     },
-    [shouldAutoExecute, autoExecuteCommand, insertCommandIntoInput],
+    [trackCommandUsage, insertCommandIntoInput],
   );
 
   const handleCommandSelect = useCallback(
@@ -324,13 +360,9 @@ export function useSlashCommands({
       }
 
       trackCommandUsage(command);
-      if (shouldAutoExecute(command)) {
-        autoExecuteCommand(command);
-        return;
-      }
       insertCommandIntoInput(command);
     },
-    [selectedProject, trackCommandUsage, shouldAutoExecute, autoExecuteCommand, insertCommandIntoInput],
+    [selectedProject, trackCommandUsage, insertCommandIntoInput],
   );
 
   const handleToggleCommandMenu = useCallback(() => {
@@ -382,7 +414,7 @@ export function useSlashCommands({
         return false;
       }
 
-      if (!filteredCommands.length) {
+      if (!displayedCommands.length) {
         if (event.key === 'Escape') {
           event.preventDefault();
           resetCommandMenuState();
@@ -394,7 +426,7 @@ export function useSlashCommands({
       if (event.key === 'ArrowDown') {
         event.preventDefault();
         setSelectedCommandIndex((previousIndex) =>
-          previousIndex < filteredCommands.length - 1 ? previousIndex + 1 : 0,
+          previousIndex < displayedCommands.length - 1 ? previousIndex + 1 : 0,
         );
         return true;
       }
@@ -402,7 +434,7 @@ export function useSlashCommands({
       if (event.key === 'ArrowUp') {
         event.preventDefault();
         setSelectedCommandIndex((previousIndex) =>
-          previousIndex > 0 ? previousIndex - 1 : filteredCommands.length - 1,
+          previousIndex > 0 ? previousIndex - 1 : displayedCommands.length - 1,
         );
         return true;
       }
@@ -413,9 +445,9 @@ export function useSlashCommands({
         }
         event.preventDefault();
         if (selectedCommandIndex >= 0) {
-          selectCommandFromKeyboard(filteredCommands[selectedCommandIndex]);
-        } else if (filteredCommands.length > 0) {
-          selectCommandFromKeyboard(filteredCommands[0]);
+          selectCommandFromKeyboard(displayedCommands[selectedCommandIndex]);
+        } else if (displayedCommands.length > 0) {
+          selectCommandFromKeyboard(displayedCommands[0]);
         }
         return true;
       }
@@ -428,7 +460,14 @@ export function useSlashCommands({
 
       return false;
     },
-    [showCommandMenu, filteredCommands, dismissCommandMenu, selectCommandFromKeyboard, selectedCommandIndex],
+    [
+      showCommandMenu,
+      displayedCommands,
+      resetCommandMenuState,
+      dismissCommandMenu,
+      selectCommandFromKeyboard,
+      selectedCommandIndex,
+    ],
   );
 
   useEffect(
@@ -441,7 +480,7 @@ export function useSlashCommands({
   return {
     slashCommands,
     slashCommandsCount: slashCommands.length,
-    filteredCommands,
+    filteredCommands: displayedCommands,
     frequentCommands,
     commandQuery,
     showCommandMenu,
diff --git a/ui/src/components/chat/view/subcomponents/CommandMenu.tsx b/ui/src/components/chat/view/subcomponents/CommandMenu.tsx
index 67243580..072c8c4b 100644
--- a/ui/src/components/chat/view/subcomponents/CommandMenu.tsx
+++ b/ui/src/components/chat/view/subcomponents/CommandMenu.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { Fragment, useEffect, useRef } from 'react';
 import type { CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -51,6 +51,9 @@ const getCommandKey = (command: CommandMenuCommand) =>
 const getNamespace = (command: CommandMenuCommand) =>
   command.namespace || command.type || 'other';
 
+const getNamespaceLabel = (namespace: string) =>
+  namespace.charAt(0).toUpperCase() + namespace.slice(1);
+
 // Anchor the menu to the textarea: above on desktop, full-bleed bottom sheet on
 // mobile. Returns inline styles so we can mix calculated coords with Tailwind
 // classes for visual treatment.
@@ -83,7 +86,6 @@ export default function CommandMenu({
   onClose,
   position = { top: 0, left: 0 },
   isOpen = false,
-  frequentCommands = [],
 }: CommandMenuProps) {
   const { t } = useTranslation('chat');
   const menuRef = useRef<HTMLDivElement | null>(null);
@@ -138,42 +140,7 @@ export default function CommandMenu({
     );
   }
 
-  const hasFrequentCommands = frequentCommands.length > 0;
-  const frequentCommandKeys = new Set(frequentCommands.map(getCommandKey));
-  const groupedCommands = commands.reduce<Record<string, CommandMenuCommand[]>>((groups, command) => {
-    if (hasFrequentCommands && frequentCommandKeys.has(getCommandKey(command))) {
-      return groups;
-    }
-    const namespace = getNamespace(command);
-    if (!groups[namespace]) {
-      groups[namespace] = [];
-    }
-    groups[namespace].push(command);
-    return groups;
-  }, {});
-  if (hasFrequentCommands) {
-    groupedCommands.frequent = frequentCommands;
-  }
-
-  const preferredOrder = hasFrequentCommands
-    ? ['pinned', 'frequent', 'builtin', 'project', 'user', 'other']
-    : ['pinned', 'builtin', 'project', 'user', 'other'];
-  const extraNamespaces = Object.keys(groupedCommands).filter(
-    (namespace) => !preferredOrder.includes(namespace),
-  );
-  const orderedNamespaces = [...preferredOrder, ...extraNamespaces].filter(
-    (namespace) => groupedCommands[namespace],
-  );
-
-  const commandIndexByKey = new Map<string, number>();
-  commands.forEach((command, index) => {
-    const key = getCommandKey(command);
-    if (!commandIndexByKey.has(key)) {
-      commandIndexByKey.set(key, index);
-    }
-  });
-
-  const showGroupHeaders = orderedNamespaces.length > 1;
+  const showGroupHeaders = new Set(commands.map(getNamespace)).size > 1;
 
   return (
     <div
@@ -183,79 +150,69 @@ export default function CommandMenu({
       className={cn(containerClass, 'p-1')}
       style={{ ...menuPosition, zIndex: 1000 }}
     >
-      {orderedNamespaces.map((namespace, groupIdx) => {
+      {commands.map((command, commandIndex) => {
+        const namespace = getNamespace(command);
+        const previousNamespace = commandIndex > 0 ? getNamespace(commands[commandIndex - 1]) : null;
+        const showHeader = showGroupHeaders && namespace !== previousNamespace;
         const Icon = namespaceIcons[namespace] || namespaceIcons.other;
+        const isSelected = commandIndex === selectedIndex;
         return (
-          <div
-            key={namespace}
-            className={cn(
-              'pb-1',
-              groupIdx > 0 && showGroupHeaders && 'mt-1 border-t border-neutral-100 pt-2 dark:border-neutral-800',
-            )}
-          >
-            {showGroupHeaders ? (
-              <div className="px-2 pb-1 pt-1.5 text-[11px] font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
+          <Fragment key={getCommandKey(command)}>
+            {showHeader ? (
+              <div
+                className={cn(
+                  'px-2 pb-1 pt-1.5 text-[11px] font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400',
+                  commandIndex > 0 && 'mt-1 border-t border-neutral-100 pt-2 dark:border-neutral-800',
+                )}
+              >
                 {t(`commandMenu.groups.${namespace}`, {
-                  defaultValue: namespace.charAt(0).toUpperCase() + namespace.slice(1),
+                  defaultValue: getNamespaceLabel(namespace),
                 })}
               </div>
             ) : null}
-
-            {(groupedCommands[namespace] || []).map((command) => {
-              const commandKey = getCommandKey(command);
-              const commandIndex = commandIndexByKey.get(commandKey) ?? -1;
-              const isSelected = commandIndex === selectedIndex;
-              return (
-                <div
-                  key={`${namespace}-${command.name}-${command.path || ''}`}
-                  ref={isSelected ? selectedItemRef : null}
-                  role="option"
-                  aria-selected={isSelected}
-                  className={cn(
-                    'group relative flex cursor-pointer items-start gap-2.5 rounded-md px-2 py-2 transition-colors',
-                    isSelected
-                      ? 'bg-neutral-100 dark:bg-neutral-800'
-                      : 'hover:bg-neutral-50 dark:hover:bg-neutral-800/60',
-                  )}
-                  onMouseEnter={() =>
-                    onSelect && commandIndex >= 0 && onSelect(command, commandIndex, true)
-                  }
-                  onClick={() =>
-                    onSelect && commandIndex >= 0 && onSelect(command, commandIndex, false)
-                  }
-                  onMouseDown={(event) => event.preventDefault()}
-                >
-                  <Icon
-                    className="mt-0.5 h-3.5 w-3.5 shrink-0 text-neutral-500 dark:text-neutral-400"
-                    strokeWidth={1.75}
-                  />
-                  <div className="min-w-0 flex-1">
-                    <div className="flex items-center gap-2">
-                      <span className="font-mono text-[13px] font-medium text-neutral-900 dark:text-neutral-100">
-                        {command.name}
-                      </span>
-                      {command.metadata?.type ? (
-                        <span className="rounded bg-neutral-100 px-1.5 py-0.5 text-[10px] font-medium text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400">
-                          {command.metadata.type}
-                        </span>
-                      ) : null}
-                    </div>
-                    {command.description ? (
-                      <div className="mt-0.5 truncate text-[12px] text-neutral-500 dark:text-neutral-400">
-                        {command.description}
-                      </div>
-                    ) : null}
-                  </div>
-                  {isSelected ? (
-                    <ChevronRight
-                      className="mt-0.5 h-3.5 w-3.5 shrink-0 text-neutral-400 dark:text-neutral-500"
-                      strokeWidth={2}
-                    />
+            <div
+              ref={isSelected ? selectedItemRef : null}
+              role="option"
+              aria-selected={isSelected}
+              className={cn(
+                'group relative flex cursor-pointer items-start gap-2.5 rounded-md px-2 py-2 transition-colors',
+                isSelected
+                  ? 'bg-neutral-100 dark:bg-neutral-800'
+                  : 'hover:bg-neutral-50 dark:hover:bg-neutral-800/60',
+              )}
+              onMouseEnter={() => onSelect?.(command, commandIndex, true)}
+              onClick={() => onSelect?.(command, commandIndex, false)}
+              onMouseDown={(event) => event.preventDefault()}
+            >
+              <Icon
+                className="mt-0.5 h-3.5 w-3.5 shrink-0 text-neutral-500 dark:text-neutral-400"
+                strokeWidth={1.75}
+              />
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="font-mono text-[13px] font-medium text-neutral-900 dark:text-neutral-100">
+                    {command.name}
+                  </span>
+                  {command.metadata?.type ? (
+                    <span className="rounded bg-neutral-100 px-1.5 py-0.5 text-[10px] font-medium text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400">
+                      {command.metadata.type}
+                    </span>
                   ) : null}
                 </div>
-              );
-            })}
-          </div>
+                {command.description ? (
+                  <div className="mt-0.5 truncate text-[12px] text-neutral-500 dark:text-neutral-400">
+                    {command.description}
+                  </div>
+                ) : null}
+              </div>
+              {isSelected ? (
+                <ChevronRight
+                  className="mt-0.5 h-3.5 w-3.5 shrink-0 text-neutral-400 dark:text-neutral-500"
+                  strokeWidth={2}
+                />
+              ) : null}
+            </div>
+          </Fragment>
         );
       })}
     </div>