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 && (
-
- {liveItems.map((ln) => (
-
- {ln.kind === "user" ? (
-
- ) : ln.kind === "reasoning" ? (
-
- ) : ln.kind === "assistant" ? (
-
- ) : ln.kind === "tool_call" ? (
-
- ) : ln.kind === "error" ? (
-
- ) : (
-
- )}
-
- ))}
-
- )}
+ {liveItems.length > 0 &&
+ !pendingApproval &&
+ !planApprovalPending && (
+
+ {liveItems.map((ln) => (
+
+ {ln.kind === "user" ? (
+
+ ) : ln.kind === "reasoning" ? (
+
+ ) : ln.kind === "assistant" ? (
+
+ ) : ln.kind === "tool_call" ? (
+
+ ) : ln.kind === "error" ? (
+
+ ) : (
+
+ )}
+
+ ))}
+
+ )}
{/* Ensure 1 blank line above input when there are no live items */}
{liveItems.length === 0 && }
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 = ({
);
};
-export function ApprovalDialog({
+export const ApprovalDialog = memo(function ApprovalDialog({
approvalRequest,
approvalContext,
onApprove,
@@ -403,7 +403,9 @@ export function ApprovalDialog({
);
-}
+});
+
+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) {