fix: add left/right arrow key cursor navigation in approval text inputs (#489)

Co-authored-by: Letta <noreply@letta.com>

src/cli/components/InlineFileEditApproval.tsx

@@ -4,6 +4,7 @@ import type { AdvancedDiffSuccess } from "../helpers/diff";
 import { parsePatchToAdvancedDiff } from "../helpers/diff";
 import { parsePatchOperations } from "../helpers/formatArgsDisplay";
 import { useTerminalWidth } from "../hooks/useTerminalWidth";
+import { useTextInputCursor } from "../hooks/useTextInputCursor";
 import { AdvancedDiffRenderer } from "./AdvancedDiffRenderer";
 import { colors } from "./colors";
 
@@ -157,7 +158,12 @@ export const InlineFileEditApproval = memo(
     allowPersistence = true,
   }: Props) => {
     const [selectedOption, setSelectedOption] = useState(0);
-    const [customReason, setCustomReason] = useState("");
+    const {
+      text: customReason,
+      cursorPos,
+      handleKey,
+      clear,
+    } = useTextInputCursor();
     const columns = useTerminalWidth();
 
     // Custom option index depends on whether "always" option is shown
@@ -241,20 +247,14 @@ export const InlineFileEditApproval = memo(
           }
           if (key.escape) {
             if (customReason) {
-              setCustomReason("");
+              clear();
             } else {
               onCancel?.();
             }
             return;
           }
-          if (key.backspace || key.delete) {
-            setCustomReason((prev) => prev.slice(0, -1));
-            return;
-          }
-          if (input && !key.ctrl && !key.meta && input.length === 1) {
-            setCustomReason((prev) => prev + input);
-          }
-          return;
+          // Handle text input (arrows, backspace, typing)
+          if (handleKey(input, key)) return;
         }
 
         // When on regular options
@@ -494,8 +494,9 @@ export const InlineFileEditApproval = memo(
             <Box flexGrow={1} width={Math.max(0, columns - 5)}>
               {customReason ? (
                 <Text wrap="wrap">
-                  {customReason}
+                  {customReason.slice(0, cursorPos)}
                   {isOnCustomOption && "█"}
+                  {customReason.slice(cursorPos)}
                 </Text>
               ) : (
                 <Text wrap="wrap" dimColor>