feat: add terminal title and progress indicator for approval screens (#499)

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

src/cli/components/EnterPlanModeDialog.tsx

@@ -1,5 +1,6 @@
 import { Box, Text, useInput } from "ink";
 import { memo, useState } from "react";
+import { useProgressIndicator } from "../hooks/useProgressIndicator";
 import { colors } from "./colors";
 
 type Props = {
@@ -9,6 +10,7 @@ type Props = {
 
 export const EnterPlanModeDialog = memo(({ onApprove, onReject }: Props) => {
   const [selectedOption, setSelectedOption] = useState(0);
+  useProgressIndicator();
 
   const options = [
     { label: "Yes, enter plan mode", action: onApprove },

src/cli/components/InlineBashApproval.tsx

@@ -1,5 +1,6 @@
 import { Box, Text, useInput } from "ink";
 import { memo, useMemo, useState } from "react";
+import { useProgressIndicator } from "../hooks/useProgressIndicator";
 import { useTerminalWidth } from "../hooks/useTerminalWidth";
 import { useTextInputCursor } from "../hooks/useTextInputCursor";
 import { colors } from "./colors";
@@ -49,6 +50,7 @@ export const InlineBashApproval = memo(
       clear,
     } = useTextInputCursor();
     const columns = useTerminalWidth();
+    useProgressIndicator();
 
     // Custom option index depends on whether "always" option is shown
     const customOptionIndex = allowPersistence ? 2 : 1;

src/cli/components/InlineEnterPlanModeApproval.tsx

@@ -1,5 +1,6 @@
 import { Box, Text, useInput } from "ink";
 import { memo, useState } from "react";
+import { useProgressIndicator } from "../hooks/useProgressIndicator";
 import { useTerminalWidth } from "../hooks/useTerminalWidth";
 import { colors } from "./colors";
 
@@ -49,6 +50,7 @@ export const InlineEnterPlanModeApproval = memo(
   ({ onApprove, onReject, isFocused = true }: Props) => {
     const [selectedOption, setSelectedOption] = useState(0);
     const columns = useTerminalWidth();
+    useProgressIndicator();
 
     const options = [
       { label: "Yes, enter plan mode", action: onApprove },

src/cli/components/InlineFileEditApproval.tsx

@@ -3,6 +3,7 @@ import { memo, useMemo, useState } from "react";
 import type { AdvancedDiffSuccess } from "../helpers/diff";
 import { parsePatchToAdvancedDiff } from "../helpers/diff";
 import { parsePatchOperations } from "../helpers/formatArgsDisplay";
+import { useProgressIndicator } from "../hooks/useProgressIndicator";
 import { useTerminalWidth } from "../hooks/useTerminalWidth";
 import { useTextInputCursor } from "../hooks/useTextInputCursor";
 import { AdvancedDiffRenderer } from "./AdvancedDiffRenderer";
@@ -165,6 +166,7 @@ export const InlineFileEditApproval = memo(
       clear,
     } = useTextInputCursor();
     const columns = useTerminalWidth();
+    useProgressIndicator();
 
     // Custom option index depends on whether "always" option is shown
     const customOptionIndex = allowPersistence ? 2 : 1;

src/cli/components/InlineGenericApproval.tsx

@@ -1,5 +1,6 @@
 import { Box, Text, useInput } from "ink";
 import { memo, useMemo, useState } from "react";
+import { useProgressIndicator } from "../hooks/useProgressIndicator";
 import { useTerminalWidth } from "../hooks/useTerminalWidth";
 import { useTextInputCursor } from "../hooks/useTextInputCursor";
 import { colors } from "./colors";
@@ -63,6 +64,7 @@ export const InlineGenericApproval = memo(
       clear,
     } = useTextInputCursor();
     const columns = useTerminalWidth();
+    useProgressIndicator();
 
     // Custom option index depends on whether "always" option is shown
     const customOptionIndex = allowPersistence ? 2 : 1;

src/cli/components/InlinePlanApproval.tsx

@@ -1,5 +1,6 @@
 import { Box, Text, useInput } from "ink";
 import { memo, useMemo, useState } from "react";
+import { useProgressIndicator } from "../hooks/useProgressIndicator";
 import { useTerminalWidth } from "../hooks/useTerminalWidth";
 import { useTextInputCursor } from "../hooks/useTextInputCursor";
 import { colors } from "./colors";
@@ -41,6 +42,7 @@ export const InlinePlanApproval = memo(
       clear,
     } = useTextInputCursor();
     const columns = useTerminalWidth();
+    useProgressIndicator();
 
     const customOptionIndex = 2;
     const maxOptionIndex = customOptionIndex;

src/cli/components/InlineQuestionApproval.tsx

@@ -1,5 +1,6 @@
 import { Box, Text, useInput } from "ink";
 import { Fragment, memo, useMemo, useState } from "react";
+import { useProgressIndicator } from "../hooks/useProgressIndicator";
 import { useTerminalWidth } from "../hooks/useTerminalWidth";
 import { useTextInputCursor } from "../hooks/useTextInputCursor";
 import { colors } from "./colors";
@@ -41,6 +42,7 @@ export const InlineQuestionApproval = memo(
     } = useTextInputCursor();
     const [selectedMulti, setSelectedMulti] = useState<Set<number>>(new Set());
     const columns = useTerminalWidth();
+    useProgressIndicator();
 
     const currentQuestion = questions[currentQuestionIndex];
 

src/cli/components/InlineTaskApproval.tsx

@@ -1,5 +1,6 @@
 import { Box, Text, useInput } from "ink";
 import { memo, useMemo, useState } from "react";
+import { useProgressIndicator } from "../hooks/useProgressIndicator";
 import { useTerminalWidth } from "../hooks/useTerminalWidth";
 import { useTextInputCursor } from "../hooks/useTextInputCursor";
 import { colors } from "./colors";
@@ -55,6 +56,7 @@ export const InlineTaskApproval = memo(
       clear,
     } = useTextInputCursor();
     const columns = useTerminalWidth();
+    useProgressIndicator();
 
     // Custom option index depends on whether "always" option is shown
     const customOptionIndex = allowPersistence ? 2 : 1;

src/cli/components/PlanModeDialog.tsx

@@ -1,6 +1,7 @@
 import { Box, Text, useInput } from "ink";
 import { memo, useState } from "react";
 import { resolvePlaceholders } from "../helpers/pasteRegistry";
+import { useProgressIndicator } from "../hooks/useProgressIndicator";
 import { colors } from "./colors";
 import { MarkdownDisplay } from "./MarkdownDisplay";
 import { PasteAwareTextInput } from "./PasteAwareTextInput";
@@ -45,6 +46,7 @@ export const PlanModeDialog = memo(
     const [selectedOption, setSelectedOption] = useState(0);
     const [isEnteringReason, setIsEnteringReason] = useState(false);
     const [denyReason, setDenyReason] = useState("");
+    useProgressIndicator();
 
     const options = [
       { label: "Yes, and auto-accept edits", action: onApproveAndAcceptEdits },

src/cli/components/StaticPlanApproval.tsx

@@ -1,5 +1,6 @@
 import { Box, Text, useInput } from "ink";
 import { memo, useState } from "react";
+import { useProgressIndicator } from "../hooks/useProgressIndicator";
 import { useTerminalWidth } from "../hooks/useTerminalWidth";
 import { useTextInputCursor } from "../hooks/useTextInputCursor";
 import { colors } from "./colors";
@@ -37,6 +38,7 @@ export const StaticPlanApproval = memo(
       clear,
     } = useTextInputCursor();
     const columns = useTerminalWidth();
+    useProgressIndicator();
 
     const customOptionIndex = 2;
     const maxOptionIndex = customOptionIndex;