@miphamai/cli 0.5.7 → 0.5.9

package/src/ui/input.tsx

@@ -1,7 +1,9 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef, useMemo } from 'react'
 import { Box, Text, useInput } from 'ink'
 import TextInput from 'ink-text-input'
 import { VimMotionEngine, type VimMode } from './vim-motions.js'
+import { getCommandList, type CommandEntry } from './commands.js'
+import { CommandPicker } from './command-picker.js'
 
 interface InputBarProps {
   onSubmit: (input: string) => void
@@ -111,6 +113,15 @@ export function InputBar({ onSubmit, isLoading }: InputBarProps) {
   const [completionVerb, setCompletionVerb] = useState<string | null>(null)
   const prevLoading = useRef(isLoading)
 
+  // ── Slash command hints ──
+  const allCommands = useMemo(() => getCommandList(), [])
+  const slashHints = useMemo(() => {
+    if (!value.startsWith('/')) return []
+    const filter = value.slice(1).toLowerCase()
+    if (!filter) return allCommands.slice(0, 12) // show first 12 when just "/"
+    return allCommands.filter((c) => c.name.toLowerCase().includes(filter)).slice(0, 8)
+  }, [value, allCommands])
+
   // Rotate gerunds while loading
   useEffect(() => {
     if (!isLoading) return
@@ -242,39 +253,97 @@ export function InputBar({ onSubmit, isLoading }: InputBarProps) {
     // The cursor hint is informational only; the user repositions manually.
   })
 
+  // ── Command picker state ──
+  const [pickerActive, setPickerActive] = useState(false)
+  const prevValueRef = useRef(value)
+
+  // Auto-activate picker when user types "/"
+  useEffect(() => {
+    if (value.startsWith('/') && !prevValueRef.current.startsWith('/') && vimMode === 'insert') {
+      setPickerActive(true)
+    }
+    // Dismiss picker when user clears the / prefix
+    if (!value.startsWith('/') && pickerActive) {
+      setPickerActive(false)
+    }
+    prevValueRef.current = value
+  }, [value, vimMode])
+
   const handleSubmit = (val: string) => {
     if (!val.trim() || isLoading) return
     onSubmit(val)
     setValue('')
+    setPickerActive(false)
+  }
+
+  // ── Picker mode: CommandPicker overlay ──
+  if (pickerActive && vimMode === 'insert') {
+    return (
+      <Box flexDirection="column" marginTop={1}>
+        <CommandPicker
+          initialFilter={value}
+          onSelect={(cmdName) => {
+            // Fill the command name and submit
+            onSubmit(cmdName)
+            setValue('')
+            setPickerActive(false)
+          }}
+          onClose={() => {
+            setPickerActive(false)
+            // Keep the current typed text so user can continue
+          }}
+        />
+      </Box>
+    )
   }
 
   return (
-    <Box marginTop={1}>
-      <Box marginRight={1}>
-        <Text color={vimMode === 'normal' ? 'magenta' : isLoading ? 'yellow' : 'cyan'}>
-          {vimMode === 'normal' ? ':' : '>'}
-        </Text>
+    <Box flexDirection="column" marginTop={1}>
+      <Box>
+        <Box marginRight={1}>
+          <Text color={vimMode === 'normal' ? 'magenta' : isLoading ? 'yellow' : 'cyan'}>
+            {vimMode === 'normal' ? ':' : '>'}
+          </Text>
+        </Box>
+        <TextInput
+          value={value}
+          onChange={(val) => {
+            // Block text changes during search mode — keys go to search query
+            if (searchMode) return
+            setValue(val)
+          }}
+          onSubmit={handleSubmit}
+          placeholder={
+            searchMode
+              ? `/${searchQuery}`
+              : vimMode === 'normal'
+                ? '[NORMAL] h/j/k/l w/b 0/$ dd yy p u / (Esc to insert)'
+                : isLoading
+                  ? `${verb}...`
+                  : completionVerb
+                    ? completionVerb
+                    : 'Type a message (Esc to cancel)...'
+          }
+        />
       </Box>
-      <TextInput
-        value={value}
-        onChange={(val) => {
-          // Block text changes during search mode — keys go to search query
-          if (searchMode) return
-          setValue(val)
-        }}
-        onSubmit={handleSubmit}
-        placeholder={
-          searchMode
-            ? `/${searchQuery}`
-            : vimMode === 'normal'
-              ? '[NORMAL] h/j/k/l w/b 0/$ dd yy p u / (Esc to insert)'
-              : isLoading
-                ? `${verb}...`
-                : completionVerb
-                  ? completionVerb
-                  : 'Type a message (Esc to cancel)...'
-        }
-      />
+      {/* Slash command hints — shown when typing / in INSERT mode (only when picker is NOT active) */}
+      {slashHints.length > 0 && vimMode === 'insert' && !pickerActive && (
+        <Box marginTop={1} flexDirection="column" gap={1}>
+          <Text dimColor>Commands: </Text>
+          {slashHints.map((cmd, i) => (
+            <Text key={cmd.name} color="cyan">
+              {cmd.name}
+            </Text>
+          ))}
+          <Text dimColor>
+            (
+            {slashHints.length === allCommands.length
+              ? 'all'
+              : `${slashHints.length} of ${allCommands.length}`}
+            )
+          </Text>
+        </Box>
+      )}
     </Box>
   )
 }