Support escaping spaces in file paths. (#241)

2 files changed, 9 insertions, 5 deletions

diff --git a/packages/cli/src/ui/components/InputPrompt.tsx b/packages/cli/src/ui/components/InputPrompt.tsx
index 67727fd2..fbf84766 100644
--- a/packages/cli/src/ui/components/InputPrompt.tsx
+++ b/packages/cli/src/ui/components/InputPrompt.tsx
@@ -8,6 +8,7 @@ import React, { useCallback } from 'react';
 import { Text, Box, useInput, useFocus, Key } from 'ink';
 import TextInput from 'ink-text-input';
 import { Colors } from '../colors.js';
+import { Suggestion } from './SuggestionsDisplay.js';
 
 interface InputPromptProps {
   query: string;
@@ -16,7 +17,7 @@ interface InputPromptProps {
   setInputKey: React.Dispatch<React.SetStateAction<number>>;
   onSubmit: (value: string) => void;
   showSuggestions: boolean;
-  suggestions: string[];
+  suggestions: Suggestion[]; // Changed to Suggestion[]
   activeSuggestionIndex: number;
   navigateUp: () => void;
   navigateDown: () => void;
@@ -63,7 +64,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
       base = query.substring(0, atIndex + 1 + lastSlashIndexInPath + 1);
     }
 
-    const newValue = base + selectedSuggestion;
+    const newValue = base + selectedSuggestion.value;
     setQuery(newValue);
     resetCompletion(); // Hide suggestions after selection
     setInputKey((k) => k + 1); // Increment key to force re-render and cursor reset
diff --git a/packages/cli/src/ui/components/SuggestionsDisplay.tsx b/packages/cli/src/ui/components/SuggestionsDisplay.tsx
index a9d24003..8c9cf377 100644
--- a/packages/cli/src/ui/components/SuggestionsDisplay.tsx
+++ b/packages/cli/src/ui/components/SuggestionsDisplay.tsx
@@ -6,9 +6,12 @@
 
 import React from 'react';
 import { Box, Text } from 'ink';
-
+export interface Suggestion {
+  label: string;
+  value: string;
+}
 interface SuggestionsDisplayProps {
-  suggestions: string[];
+  suggestions: Suggestion[];
   activeIndex: number;
   isLoading: boolean;
   width: number;
@@ -62,7 +65,7 @@ export function SuggestionsDisplay({
             color={isActive ? 'black' : 'white'}
             backgroundColor={isActive ? 'blue' : undefined}
           >
-            {suggestion}
+            {suggestion.label}
           </Text>
         );
       })}