Don't accept input until slash commands are loaded (#11162)

packages/cli/src/ui/hooks/slashCommandProcessor.test.ts

@@ -342,6 +342,8 @@ describe('useSlashCommandProcessor', () => {
         setMockIsProcessing,
       );
 
+      await waitFor(() => expect(result.current.slashCommands).toBeDefined());
+
       await act(async () => {
         await result.current.handleSlashCommand('/fail');
       });

packages/cli/src/ui/hooks/slashCommandProcessor.ts

@@ -74,7 +74,9 @@ export const useSlashCommandProcessor = (
   isConfigInitialized: boolean,
 ) => {
   const session = useSessionStats();
-  const [commands, setCommands] = useState<readonly SlashCommand[]>([]);
+  const [commands, setCommands] = useState<readonly SlashCommand[] | undefined>(
+    undefined,
+  );
   const [reloadTrigger, setReloadTrigger] = useState(0);
 
   const reloadCommands = useCallback(() => {
@@ -257,20 +259,18 @@ export const useSlashCommandProcessor = (
 
   useEffect(() => {
     const controller = new AbortController();
-    const load = async () => {
-      const loaders = [
-        new McpPromptLoader(config),
-        new BuiltinCommandLoader(config),
-        new FileCommandLoader(config),
-      ];
+
+    (async () => {
       const commandService = await CommandService.create(
-        loaders,
+        [
+          new McpPromptLoader(config),
+          new BuiltinCommandLoader(config),
+          new FileCommandLoader(config),
+        ],
         controller.signal,
       );
       setCommands(commandService.getCommands());
-    };
-
-    load();
+    })();
 
     return () => {
       controller.abort();
@@ -283,6 +283,9 @@ export const useSlashCommandProcessor = (
       oneTimeShellAllowlist?: Set<string>,
       overwriteConfirmed?: boolean,
     ): Promise<SlashCommandProcessorResult | false> => {
+      if (!commands) {
+        return false;
+      }
       if (typeof rawQuery !== 'string') {
         return false;
       }