fix(cli): prevent flicker on tall approval dialogs, refactor logic out from plan into other inlines (#777)

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

src/cli/components/ApprovalSwitch.tsx

@@ -67,6 +67,7 @@ type Props = {
   isFocused?: boolean;
   approveAlwaysText?: string;
   allowPersistence?: boolean;
+  showPreview?: boolean;
 
   // Special handlers for ExitPlanMode
   onPlanApprove?: (acceptEdits: boolean) => void;
@@ -209,6 +210,7 @@ export const ApprovalSwitch = memo(
     onEnterPlanModeReject,
     precomputedDiff,
     allDiffs,
+    showPreview = true,
   }: Props) => {
     const toolName = approval.toolName;
 
@@ -245,6 +247,7 @@ export const ApprovalSwitch = memo(
             isFocused={isFocused}
             approveAlwaysText={approveAlwaysText}
             allowPersistence={allowPersistence}
+            showPreview={showPreview}
           />
         );
       }
@@ -264,6 +267,7 @@ export const ApprovalSwitch = memo(
             isFocused={isFocused}
             approveAlwaysText={approveAlwaysText}
             allowPersistence={allowPersistence}
+            showPreview={showPreview}
           />
         );
       }
@@ -328,6 +332,7 @@ export const ApprovalSwitch = memo(
         isFocused={isFocused}
         approveAlwaysText={approveAlwaysText}
         allowPersistence={allowPersistence}
+        showPreview={showPreview}
       />
     );
   },

src/cli/components/InlineBashApproval.tsx

@@ -21,6 +21,7 @@ type Props = {
   isFocused?: boolean;
   approveAlwaysText?: string;
   allowPersistence?: boolean;
+  showPreview?: boolean;
 };
 
 // Horizontal line character for Claude Code style
@@ -42,6 +43,7 @@ export const InlineBashApproval = memo(
     isFocused = true,
     approveAlwaysText,
     allowPersistence = true,
+    showPreview = true,
   }: Props) => {
     const [selectedOption, setSelectedOption] = useState(0);
     const {
@@ -153,13 +155,15 @@ export const InlineBashApproval = memo(
         : "Type reason · Esc to cancel"
       : "Enter to select · Esc to cancel";
 
+    const optionsMarginTop = showPreview ? 1 : 0;
+
     return (
       <Box flexDirection="column">
         {/* Static command content - memoized to prevent re-render on keystroke */}
-        {memoizedCommandContent}
+        {showPreview && memoizedCommandContent}
 
         {/* Options */}
-        <Box marginTop={1} flexDirection="column">
+        <Box marginTop={optionsMarginTop} flexDirection="column">
           {/* Option 1: Yes */}
           <Box flexDirection="row">
             <Box width={5} flexShrink={0}>

src/cli/components/InlineFileEditApproval.tsx

@@ -44,6 +44,7 @@ type Props = {
   isFocused?: boolean;
   approveAlwaysText?: string;
   allowPersistence?: boolean;
+  showPreview?: boolean;
 };
 
 // Horizontal line characters for Claude Code style
@@ -158,6 +159,7 @@ export const InlineFileEditApproval = memo(
     isFocused = true,
     approveAlwaysText,
     allowPersistence = true,
+    showPreview = true,
   }: Props) => {
     const [selectedOption, setSelectedOption] = useState(0);
     const {
@@ -429,13 +431,15 @@ export const InlineFileEditApproval = memo(
         : "Type reason · Esc to cancel"
       : "Enter to select · Esc to cancel";
 
+    const optionsMarginTop = showPreview ? 1 : 0;
+
     return (
       <Box flexDirection="column">
         {/* Static diff content - memoized to prevent re-render on keystroke */}
-        {memoizedDiffContent}
+        {showPreview && memoizedDiffContent}
 
         {/* Options */}
-        <Box marginTop={1} flexDirection="column">
+        <Box marginTop={optionsMarginTop} flexDirection="column">
           {/* Option 1: Yes */}
           <Box flexDirection="row">
             <Box width={5} flexShrink={0}>

src/cli/components/InlineGenericApproval.tsx

@@ -16,6 +16,7 @@ type Props = {
   isFocused?: boolean;
   approveAlwaysText?: string;
   allowPersistence?: boolean;
+  showPreview?: boolean;
 };
 
 // Horizontal line character for Claude Code style
@@ -56,6 +57,7 @@ export const InlineGenericApproval = memo(
     isFocused = true,
     approveAlwaysText,
     allowPersistence = true,
+    showPreview = true,
   }: Props) => {
     const [selectedOption, setSelectedOption] = useState(0);
     const {
@@ -165,13 +167,15 @@ export const InlineGenericApproval = memo(
         : "Type reason · Esc to cancel"
       : "Enter to select · Esc to cancel";
 
+    const optionsMarginTop = showPreview ? 1 : 0;
+
     return (
       <Box flexDirection="column">
         {/* Static tool content - memoized to prevent re-render on keystroke */}
-        {memoizedToolContent}
+        {showPreview && memoizedToolContent}
 
         {/* Options */}
-        <Box marginTop={1} flexDirection="column">
+        <Box marginTop={optionsMarginTop} flexDirection="column">
           {/* Option 1: Yes */}
           <Box flexDirection="row">
             <Box width={5} flexShrink={0}>