Align command suggestions with file suggestions and support command arguments

Author: chriswritescode-dev

frontend/src/components/command/CommandSuggestions.tsx

@@ -18,26 +18,34 @@ export function CommandSuggestions({
   query,
   commands,
   onSelect,
+  onClose,
   selectedIndex = 0
 }: CommandSuggestionsProps) {
-  const containerRef = useRef<HTMLDivElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
 
   const filteredCommands = commands.filter(command =>
-    command.name.toLowerCase().includes(query.toLowerCase()) ||
-    command.description?.toLowerCase().includes(query.toLowerCase())
+    command.name.toLowerCase().includes(query.toLowerCase())
   )
 
-  
+  useEffect(() => {
+    if (!isOpen) return
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (listRef.current && !listRef.current.contains(e.target as Node)) {
+        onClose()
+      }
+    }
 
-  
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [isOpen, onClose])
 
-  // Scroll selected item into view
   useEffect(() => {
-    if (!isOpen || !containerRef.current) return
+    if (!isOpen || !listRef.current) return
 
-    const selectedItem = containerRef.current.querySelector(`[data-selected="true"]`) as HTMLElement
+    const selectedItem = listRef.current.children[selectedIndex] as HTMLElement
     if (selectedItem) {
-      selectedItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+      selectedItem.scrollIntoView({ block: 'nearest' })
     }
   }, [selectedIndex, isOpen])
 
@@ -47,45 +55,33 @@ export function CommandSuggestions({
 
   return (
     <div
-      ref={containerRef}
-      className="absolute bottom-full left-0 right-0 mb-2 z-50 bg-background border border-border rounded-lg shadow-lg max-h-64 overflow-y-auto"
+      ref={listRef}
+      className="absolute bottom-full left-0 right-0 mb-2 z-50 bg-background border border-border rounded-lg shadow-xl max-h-[30vh] md:max-h-[40vh] lg:max-h-[50vh] overflow-y-auto"
     >
-      <div className="p-1">
-        {filteredCommands.map((command, index) => {
-          const isSelected = index === selectedIndex
-          const displayName = `/${command.name}`
-          
-          return (
-            <div
-              key={command.name}
-              data-selected={isSelected}
-              className={`px-3 py-2 cursor-pointer rounded-md transition-colors flex items-center gap-2 ${
-                isSelected 
-                  ? 'bg-primary/20 text-foreground' 
-                  : 'hover:bg-muted text-muted-foreground'
-              }`}
-              onClick={() => onSelect(command)}
-              
-            >
-              <Command className="h-4 w-4 text-muted-foreground flex-shrink-0" />
-              <div className="flex-1 min-w-0">
-                <div className="font-medium text-sm truncate">{displayName}</div>
-                {command.description && (
-                  <div className="text-xs text-muted-foreground truncate">{command.description}</div>
-                )}
-              </div>
+      {filteredCommands.map((command, index) => {
+        const isSelected = index === selectedIndex
+        const displayName = `/${command.name}`
+
+        return (
+          <button
+            key={command.name}
+            onClick={() => onSelect(command)}
+            className={`w-full px-3 py-2 text-left transition-colors flex items-center gap-2 ${
+              isSelected
+                ? 'bg-primary text-primary-foreground'
+                : 'hover:bg-muted text-foreground'
+            }`}
+          >
+            <Command className={`h-4 w-4 flex-shrink-0 ${isSelected ? 'opacity-90' : 'opacity-70'}`} />
+            <div className="flex-1 min-w-0">
+              <div className="font-mono text-sm font-medium truncate">{displayName}</div>
+              {command.description && (
+                <div className="text-xs opacity-70 mt-0.5 truncate">{command.description}</div>
+              )}
             </div>
-          )
-        })}
-      </div>
-      
-      <div className="px-3 py-2 border-t border-border text-xs text-muted-foreground">
-        <div className="flex items-center gap-4">
-          <span>↑↓ Navigate</span>
-          <span>↵ Select</span>
-          <span>Esc Close</span>
-        </div>
-      </div>
+          </button>
+        )
+      })}
     </div>
   )
 }

frontend/src/components/message/PromptInput.tsx

@@ -109,12 +109,11 @@ export function PromptInput({
 
     const commandMatch = prompt.match(/^\/([a-zA-Z0-9_-]+)(?:\s+(.*))?$/)
     if (commandMatch) {
-      const [, commandName] = commandMatch
+      const [, commandName, commandArgs] = commandMatch
       const command = filterCommands(commandName)[0]
 
       if (command) {
-        
-        executeCommand(command)
+        executeCommand(command, commandArgs?.trim() || '')
         setPrompt('')
         if (textareaRef.current) {
           textareaRef.current.style.height = 'auto'
@@ -149,23 +148,41 @@ export function PromptInput({
     setShowSuggestions(false)
     setSuggestionQuery('')
 
-    const cursorPosition = textareaRef.current.selectionStart
-    const commandMatch = prompt.slice(0, cursorPosition).match(/(^|\s)\/([a-zA-Z0-9_-]*)$/)
-    
-    if (commandMatch) {
-      const beforeCommand = prompt.slice(0, commandMatch.index)
-      const afterCommand = prompt.slice(cursorPosition)
-      const newPrompt = beforeCommand + '/' + command.name + ' ' + afterCommand
+    if (command.template) {
+      const cleanedTemplate = command.template
+        .replace(/\$ARGUMENTS/g, '')
+        .replace(/\$\d+/g, '')
+        .trim()
 
-      setPrompt(newPrompt)
+      setPrompt(cleanedTemplate)
 
       setTimeout(() => {
         if (textareaRef.current) {
-          const newCursorPos = beforeCommand.length + command.name.length + 2
           textareaRef.current.focus()
-          textareaRef.current.setSelectionRange(newCursorPos, newCursorPos)
+          textareaRef.current.setSelectionRange(cleanedTemplate.length, cleanedTemplate.length)
+          textareaRef.current.style.height = 'auto'
+          textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`
         }
       }, 0)
+    } else {
+      const cursorPosition = textareaRef.current.selectionStart
+      const commandMatch = prompt.slice(0, cursorPosition).match(/(^|\s)\/([a-zA-Z0-9_-]*)$/)
+      
+      if (commandMatch) {
+        const beforeCommand = prompt.slice(0, commandMatch.index)
+        const afterCommand = prompt.slice(cursorPosition)
+        const newPrompt = beforeCommand + '/' + command.name + ' ' + afterCommand
+        
+        setPrompt(newPrompt)
+        
+        setTimeout(() => {
+          if (textareaRef.current) {
+            const newCursorPos = beforeCommand.length + command.name.length + 2
+            textareaRef.current.focus()
+            textareaRef.current.setSelectionRange(newCursorPos, newCursorPos)
+          }
+        }, 0)
+      }
     }
   }
 

frontend/src/hooks/useCommandHandler.ts

@@ -27,15 +27,14 @@ export function useCommandHandler({
   const createSession = useCreateSession(opcodeUrl, directory)
   const [loading, setLoading] = useState(false)
 
-  const executeCommand = useCallback(async (command: CommandType) => {
+  const executeCommand = useCallback(async (command: CommandType, args: string = '') => {
     if (!opcodeUrl) return
 
     setLoading(true)
 
     try {
       const client = createOpenCodeClient(opcodeUrl, directory)
 
-      // Handle special commands that need UI interaction
       switch (command.name) {
         case 'sessions':
         case 'resume':
@@ -48,35 +47,30 @@ export function useCommandHandler({
           break
 
         case 'themes':
-          // Themes command will be sent to server and appear as message
           await client.sendCommand(sessionID, {
             command: command.name,
-            arguments: ''
+            arguments: args
           })
           break
 
         case 'help':
           onShowHelpDialog?.()
           break
 
-case 'new':
+        case 'new':
         case 'clear':
-          // Create a new session and navigate to it
           try {
             const newSession = await createSession.mutateAsync({
               agent: undefined
             })
             if (newSession?.id) {
-              // Navigate to the correct repo session URL pattern
-              // We need to get the current repo ID from the URL
               const currentPath = window.location.pathname
               const repoMatch = currentPath.match(/\/repos\/(\d+)\/sessions\//)
               if (repoMatch) {
                 const repoId = repoMatch[1]
                 const newPath = `/repos/${repoId}/sessions/${newSession.id}`
                 navigate(newPath)
               } else {
-                // Fallback: try to navigate to session directly if route exists
                 navigate(`/session/${newSession.id}`)
               }
             }
@@ -95,18 +89,16 @@ case 'new':
         case 'details':
         case 'editor':
         case 'init':
-          // These commands will be sent to the server and appear as messages
           await client.sendCommand(sessionID, {
             command: command.name,
-            arguments: ''
+            arguments: args
           })
           break
 
         default:
-          // Send custom commands to server
           await client.sendCommand(sessionID, {
             command: command.name,
-            arguments: ''
+            arguments: args
           })
       }
     } catch (error) {

frontend/src/hooks/useCommands.ts

@@ -189,8 +189,7 @@ export function useCommands(opcodeUrl: string | null) {
 
     const searchTerm = query.toLowerCase()
     return commands.filter(command =>
-      command.name.toLowerCase().includes(searchTerm) ||
-      command.description?.toLowerCase().includes(searchTerm)
+      command.name.toLowerCase().includes(searchTerm)
     )
   }