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

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

src/cli/components/StaticPlanApproval.tsx

@@ -1,6 +1,7 @@
 import { Box, Text, useInput } from "ink";
 import { memo, useState } from "react";
 import { useTerminalWidth } from "../hooks/useTerminalWidth";
+import { useTextInputCursor } from "../hooks/useTextInputCursor";
 import { colors } from "./colors";
 
 type Props = {
@@ -29,7 +30,12 @@ export const StaticPlanApproval = memo(
     isFocused = true,
   }: Props) => {
     const [selectedOption, setSelectedOption] = useState(0);
-    const [customReason, setCustomReason] = useState("");
+    const {
+      text: customReason,
+      cursorPos,
+      handleKey,
+      clear,
+    } = useTextInputCursor();
     const columns = useTerminalWidth();
 
     const customOptionIndex = 2;
@@ -68,20 +74,14 @@ export const StaticPlanApproval = memo(
           }
           if (key.escape) {
             if (customReason) {
-              setCustomReason("");
+              clear();
             } else {
               onKeepPlanning("User cancelled");
             }
             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
@@ -174,8 +174,9 @@ export const StaticPlanApproval = 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>