fix(ui): load system command completions asynchronously

Author: im10furry

apps/cli/src/ui/hooks/useUnifiedCompletion/useSystemCommands.test.ts

@@ -0,0 +1,33 @@
+import { afterEach, describe, expect, test } from 'bun:test'
+import { chmod, mkdtemp, rm, writeFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { __loadCommandsFromPathForTests } from './useSystemCommands'
+
+const tmpDirs: string[] = []
+
+afterEach(async () => {
+  await Promise.all(tmpDirs.splice(0).map(dir => rm(dir, { recursive: true })))
+})
+
+describe('loadCommandsFromPath', () => {
+  test('loads essential commands and executable PATH entries asynchronously', async () => {
+    const dir = await mkdtemp(join(tmpdir(), 'kode-commands-'))
+    tmpDirs.push(dir)
+
+    const commandName =
+      process.platform === 'win32'
+        ? 'kode-test-command.cmd'
+        : 'kode-test-command'
+    const commandPath = join(dir, commandName)
+    await writeFile(commandPath, '#!/bin/sh\necho ok\n', 'utf8')
+    if (process.platform !== 'win32') {
+      await chmod(commandPath, 0o755)
+    }
+
+    const commands = await __loadCommandsFromPathForTests(dir)
+
+    expect(commands).toContain('git')
+    expect(commands).toContain(commandName)
+  })
+})

apps/cli/src/ui/hooks/useUnifiedCompletion/useSystemCommands.ts

@@ -1,4 +1,6 @@
-import { useCallback, useEffect, useState } from 'react'
+import { readdir, stat } from 'node:fs/promises'
+import { delimiter, join } from 'node:path'
+import { useEffect, useState } from 'react'
 
 import { debug as debugLogger } from '#core/utils/debugLogger'
 import { logError } from '#core/utils/log'
@@ -7,61 +9,114 @@ import {
   getMinimalFallbackCommands,
 } from '#cli-utils/completion/commonUnixCommands'
 
+const COMMAND_SCAN_BATCH_SIZE = 64
+type CommandDirent = {
+  name: string | Buffer
+  isFile(): boolean
+  isSymbolicLink(): boolean
+}
+
+async function yieldToEventLoop(): Promise<void> {
+  await new Promise(resolve => setTimeout(resolve, 0))
+}
+
+async function loadCommandsFromPath(
+  pathValue: string,
+  shouldStop: () => boolean = () => false,
+): Promise<string[]> {
+  const pathDirs = Array.from(
+    new Set(
+      pathValue
+        .split(delimiter)
+        .map(dir => dir.trim())
+        .filter(Boolean),
+    ),
+  )
+  const commandSet = new Set<string>(getEssentialCommands())
+
+  for (const dir of pathDirs) {
+    if (shouldStop()) break
+
+    let entries: CommandDirent[]
+    try {
+      entries = (await readdir(dir, {
+        withFileTypes: true,
+      })) as CommandDirent[]
+    } catch {
+      continue
+    }
+
+    for (let i = 0; i < entries.length; i += COMMAND_SCAN_BATCH_SIZE) {
+      if (shouldStop()) break
+
+      const batch = entries.slice(i, i + COMMAND_SCAN_BATCH_SIZE)
+      const commandNames = await Promise.all(
+        batch.map(async entry => {
+          try {
+            if (!entry.isFile() && !entry.isSymbolicLink()) return null
+
+            const entryName = String(entry.name)
+            const fullPath = join(dir, entryName)
+            const stats = await stat(fullPath)
+            const isExecutable =
+              process.platform === 'win32' || (stats.mode & 0o111) !== 0
+            return stats.isFile() && isExecutable ? entryName : null
+          } catch {
+            return null
+          }
+        }),
+      )
+
+      for (const commandName of commandNames) {
+        if (commandName) commandSet.add(commandName)
+      }
+
+      await yieldToEventLoop()
+    }
+  }
+
+  return Array.from(commandSet).sort()
+}
+
 export function useSystemCommands(): {
   systemCommands: string[]
   isLoadingCommands: boolean
 } {
-  const [systemCommands, setSystemCommands] = useState<string[]>([])
+  const [systemCommands, setSystemCommands] = useState<string[]>(() =>
+    getEssentialCommands(),
+  )
   const [isLoadingCommands, setIsLoadingCommands] = useState(false)
 
-  const loadSystemCommands = useCallback(async () => {
-    if (systemCommands.length > 0 || isLoadingCommands) return
+  useEffect(() => {
+    let cancelled = false
+    const shouldStop = () => cancelled
 
-    setIsLoadingCommands(true)
-    try {
-      const { readdirSync, statSync } = await import('fs')
-      const pathDirs = (process.env.PATH || '').split(':').filter(Boolean)
-      const commandSet = new Set<string>()
-
-      getEssentialCommands().forEach(cmd => commandSet.add(cmd))
-
-      for (const dir of pathDirs) {
-        try {
-          if (readdirSync && statSync) {
-            const entries = readdirSync(dir)
-            for (const entry of entries) {
-              try {
-                const fullPath = `${dir}/${entry}`
-                const stats = statSync(fullPath)
-                if (stats.isFile() && (stats.mode & 0o111) !== 0) {
-                  commandSet.add(entry)
-                }
-              } catch {
-                // Skip files we can't stat
-              }
-            }
-          }
-        } catch {
-          // Skip directories we can't read
-        }
+    async function loadSystemCommands(): Promise<void> {
+      setIsLoadingCommands(true)
+      try {
+        const next = await loadCommandsFromPath(
+          process.env.PATH || '',
+          shouldStop,
+        )
+        if (!shouldStop()) setSystemCommands(next)
+      } catch (error) {
+        logError(error)
+        debugLogger.warn('UNIFIED_COMPLETION_SYSTEM_COMMANDS_LOAD_FAILED', {
+          error: error instanceof Error ? error.message : String(error),
+        })
+        if (!shouldStop()) setSystemCommands(getMinimalFallbackCommands())
+      } finally {
+        if (!shouldStop()) setIsLoadingCommands(false)
       }
-
-      const next = Array.from(commandSet).sort()
-      setSystemCommands(next)
-    } catch (error) {
-      logError(error)
-      debugLogger.warn('UNIFIED_COMPLETION_SYSTEM_COMMANDS_LOAD_FAILED', {
-        error: error instanceof Error ? error.message : String(error),
-      })
-      setSystemCommands(getMinimalFallbackCommands())
-    } finally {
-      setIsLoadingCommands(false)
     }
-  }, [systemCommands.length, isLoadingCommands])
 
-  useEffect(() => {
-    loadSystemCommands()
-  }, [loadSystemCommands])
+    void loadSystemCommands()
+    return () => {
+      cancelled = true
+    }
+  }, [])
 
   return { systemCommands, isLoadingCommands }
 }
+
+export const __loadCommandsFromPathForTests = loadCommandsFromPath

apps/cli/src/utils/completion/unixCommandSuggestions.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, test } from 'bun:test'
+import { getEssentialCommands } from './commonUnixCommands'
+import { generateUnixCommandSuggestions } from './unixCommandSuggestions'
+
+describe('generateUnixCommandSuggestions', () => {
+  test('shows fallback command matches while full command scan is loading', () => {
+    const suggestions = generateUnixCommandSuggestions({
+      prefix: 'gi',
+      systemCommands: getEssentialCommands(),
+      isLoadingCommands: true,
+    })
+
+    expect(suggestions.map(s => s.value)).toContain('git')
+    expect(suggestions.some(s => s.metadata?.isLoading)).toBe(false)
+  })
+
+  test('shows loading only when loading has no command match', () => {
+    const suggestions = generateUnixCommandSuggestions({
+      prefix: 'zzzz-no-match',
+      systemCommands: getEssentialCommands(),
+      isLoadingCommands: true,
+    })
+
+    expect(suggestions).toHaveLength(1)
+    expect(suggestions[0]?.metadata?.isLoading).toBe(true)
+  })
+})

apps/cli/src/utils/completion/unixCommandSuggestions.ts

@@ -5,26 +5,10 @@ import {
 } from './commonUnixCommands'
 import type { UnifiedSuggestion } from './types'
 
-export function generateUnixCommandSuggestions(args: {
-  prefix: string
-  systemCommands: string[]
-  isLoadingCommands: boolean
-}): UnifiedSuggestion[] {
-  const { prefix, systemCommands, isLoadingCommands } = args
-  if (!prefix) return []
-
-  if (isLoadingCommands) {
-    return [
-      {
-        value: 'loading...',
-        displayValue: `⏳ Loading system commands...`,
-        type: 'file' as const,
-        score: 0,
-        metadata: { isLoading: true },
-      },
-    ]
-  }
-
+function buildCommandSuggestions(
+  prefix: string,
+  systemCommands: string[],
+): UnifiedSuggestion[] {
   const commonCommands = getCommonSystemCommands(systemCommands)
   const uniqueCommands = Array.from(new Set(commonCommands))
   const matches = matchCommands(uniqueCommands, prefix)
@@ -59,3 +43,29 @@ export function generateUnixCommandSuggestions(args: {
     metadata: { isUnixCommand: true },
   }))
 }
+
+function loadingSuggestion(): UnifiedSuggestion {
+  return {
+    value: 'loading...',
+    displayValue: 'Loading system commands...',
+    type: 'file' as const,
+    score: 0,
+    metadata: { isLoading: true },
+  }
+}
+
+export function generateUnixCommandSuggestions(args: {
+  prefix: string
+  systemCommands: string[]
+  isLoadingCommands: boolean
+}): UnifiedSuggestion[] {
+  const { prefix, systemCommands, isLoadingCommands } = args
+  if (!prefix) return []
+
+  const commandSuggestions = buildCommandSuggestions(prefix, systemCommands)
+  if (commandSuggestions.length > 0) return commandSuggestions
+
+  if (isLoadingCommands) return [loadingSuggestion()]
+
+  return []
+}