From 0b9c14f6de6305dfb631d6ec95918215fb57c0b3 Mon Sep 17 00:00:00 2001
From: cpacker <packercharles@gmail.com>
Date: Sun, 26 Oct 2025 18:41:16 -0700
Subject: [PATCH] fix: allow scrollback on approval screens

---
 src/cli/App.tsx                           | 44 ++++++++++++-----------
 src/cli/components/ApprovalDialogRich.tsx |  6 ++--
 src/cli/components/InputRich.tsx          |  4 +--
 3 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/cli/App.tsx b/src/cli/App.tsx
index e9a729f..e865ef2 100644
--- a/src/cli/App.tsx
+++ b/src/cli/App.tsx
@@ -1167,27 +1167,29 @@ export default function App({
         {loadingState === "ready" && (
           <>
             {/* Transcript */}
-            {liveItems.length > 0 && (
-              <Box flexDirection="column">
-                {liveItems.map((ln) => (
-                  <Box key={ln.id} marginTop={1}>
-                    {ln.kind === "user" ? (
-                      <UserMessage line={ln} />
-                    ) : ln.kind === "reasoning" ? (
-                      <ReasoningMessage line={ln} />
-                    ) : ln.kind === "assistant" ? (
-                      <AssistantMessage line={ln} />
-                    ) : ln.kind === "tool_call" ? (
-                      <ToolCallMessage line={ln} />
-                    ) : ln.kind === "error" ? (
-                      <ErrorMessage line={ln} />
-                    ) : (
-                      <CommandMessage line={ln} />
-                    )}
-                  </Box>
-                ))}
-              </Box>
-            )}
+            {liveItems.length > 0 &&
+              !pendingApproval &&
+              !planApprovalPending && (
+                <Box flexDirection="column">
+                  {liveItems.map((ln) => (
+                    <Box key={ln.id} marginTop={1}>
+                      {ln.kind === "user" ? (
+                        <UserMessage line={ln} />
+                      ) : ln.kind === "reasoning" ? (
+                        <ReasoningMessage line={ln} />
+                      ) : ln.kind === "assistant" ? (
+                        <AssistantMessage line={ln} />
+                      ) : ln.kind === "tool_call" ? (
+                        <ToolCallMessage line={ln} />
+                      ) : ln.kind === "error" ? (
+                        <ErrorMessage line={ln} />
+                      ) : (
+                        <CommandMessage line={ln} />
+                      )}
+                    </Box>
+                  ))}
+                </Box>
+              )}
 
             {/* Ensure 1 blank line above input when there are no live items */}
             {liveItems.length === 0 && <Box height={1} />}
diff --git a/src/cli/components/ApprovalDialogRich.tsx b/src/cli/components/ApprovalDialogRich.tsx
index 8cec968..410a4d7 100644
--- a/src/cli/components/ApprovalDialogRich.tsx
+++ b/src/cli/components/ApprovalDialogRich.tsx
@@ -205,7 +205,7 @@ const DynamicPreview: React.FC<DynamicPreviewProps> = ({
   );
 };
 
-export function ApprovalDialog({
+export const ApprovalDialog = memo(function ApprovalDialog({
   approvalRequest,
   approvalContext,
   onApprove,
@@ -403,7 +403,9 @@ export function ApprovalDialog({
       <Box height={1} />
     </Box>
   );
-}
+});
+
+ApprovalDialog.displayName = "ApprovalDialog";
 
 // Helper functions for tool name mapping
 function getHeaderLabel(toolName: string): string {
diff --git a/src/cli/components/InputRich.tsx b/src/cli/components/InputRich.tsx
index 6af407a..1d2325e 100644
--- a/src/cli/components/InputRich.tsx
+++ b/src/cli/components/InputRich.tsx
@@ -158,7 +158,7 @@ export function Input({
 
   // Shimmer animation effect
   useEffect(() => {
-    if (!streaming) return;
+    if (!streaming || !visible) return;
 
     const id = setInterval(() => {
       setShimmerOffset((prev) => {
@@ -169,7 +169,7 @@ export function Input({
     }, 120); // Speed of shimmer animation
 
     return () => clearInterval(id);
-  }, [streaming, thinkingMessage]);
+  }, [streaming, thinkingMessage, visible]);
 
   const handleSubmit = async () => {
     if (streaming || commandRunning) {