Multiline editor (#302)

Co-authored-by: Taylor Mullen <[email protected]>

1 files changed, 28 insertions, 16 deletions

diff --git a/packages/cli/src/ui/App.tsx b/packages/cli/src/ui/App.tsx
index a32902e5..7b81ada1 100644
--- a/packages/cli/src/ui/App.tsx
+++ b/packages/cli/src/ui/App.tsx
@@ -13,7 +13,7 @@ import { useInputHistory } from './hooks/useInputHistory.js';
 import { useThemeCommand } from './hooks/useThemeCommand.js';
 import { Header } from './components/Header.js';
 import { LoadingIndicator } from './components/LoadingIndicator.js';
-import { InputPrompt } from './components/InputPrompt.js';
+import { EditorState, InputPrompt } from './components/InputPrompt.js';
 import { Footer } from './components/Footer.js';
 import { ThemeDialog } from './components/ThemeDialog.js';
 import { useStartupWarnings } from './hooks/useAppEffects.js';
@@ -97,8 +97,22 @@ export const App = ({ config, settings, cliVersion }: AppProps) => {
 
   const isInputActive = streamingState === StreamingState.Idle && !initError;
 
-  // query and setQuery are now managed by useState here
   const [query, setQuery] = useState('');
+  const [editorState, setEditorState] = useState<EditorState>({
+    key: 0,
+    initialCursorOffset: undefined,
+  });
+
+  const onChangeAndMoveCursor = useCallback(
+    (value: string) => {
+      setQuery(value);
+      setEditorState((s) => ({
+        key: s.key + 1,
+        initialCursorOffset: value.length,
+      }));
+    },
+    [setQuery, setEditorState],
+  );
 
   const completion = useCompletion(
     query,
@@ -107,20 +121,16 @@ export const App = ({ config, settings, cliVersion }: AppProps) => {
     slashCommands,
   );
 
-  const {
-    handleSubmit: handleHistorySubmit,
-    inputKey,
-    setInputKey,
-  } = useInputHistory({
+  const inputHistory = useInputHistory({
     userMessages,
     onSubmit: (value) => {
       // Adapt onSubmit to use the lifted setQuery
       handleFinalSubmit(value);
-      setQuery(''); // Clear query from the App's state
+      onChangeAndMoveCursor('');
     },
     isActive: isInputActive && !completion.showSuggestions,
-    query,
-    setQuery,
+    currentQuery: query,
+    onChangeAndMoveCursor,
   });
 
   // --- Render Logic ---
@@ -223,15 +233,17 @@ export const App = ({ config, settings, cliVersion }: AppProps) => {
 
               <InputPrompt
                 query={query}
-                setQuery={setQuery}
-                inputKey={inputKey}
-                setInputKey={setInputKey}
-                onSubmit={handleHistorySubmit}
+                onChange={setQuery}
+                onChangeAndMoveCursor={onChangeAndMoveCursor}
+                editorState={editorState}
+                onSubmit={inputHistory.handleSubmit}
                 showSuggestions={completion.showSuggestions}
                 suggestions={completion.suggestions}
                 activeSuggestionIndex={completion.activeSuggestionIndex}
-                navigateUp={completion.navigateUp}
-                navigateDown={completion.navigateDown}
+                navigateHistoryUp={inputHistory.navigateUp}
+                navigateHistoryDown={inputHistory.navigateDown}
+                navigateSuggestionUp={completion.navigateUp}
+                navigateSuggestionDown={completion.navigateDown}
                 resetCompletion={completion.resetCompletionState}
               />
               {completion.showSuggestions && (