fix: patch approval rendering to reduce churn (#453)

Co-authored-by: Letta <noreply@letta.com>
This commit is contained in:
Charles Packer
2026-01-02 17:22:28 -08:00
committed by GitHub
parent cd28bab41a
commit d2e0fc3bc5
5 changed files with 265 additions and 173 deletions

View File

@@ -1,5 +1,5 @@
import { Box, Text, useInput } from "ink";
import { memo, useState } from "react";
import { memo, useMemo, useState } from "react";
import { useTerminalWidth } from "../hooks/useTerminalWidth";
import { colors } from "./colors";
@@ -131,6 +131,30 @@ export const InlineGenericApproval = memo(
const solidLine = SOLID_LINE.repeat(Math.max(columns - 2, 10));
const formattedArgs = formatArgs(toolArgs);
// Memoize the static tool content so it doesn't re-render on keystroke
// This prevents flicker when typing feedback in the custom input field
const memoizedToolContent = useMemo(
() => (
<>
{/* Top solid line */}
<Text dimColor>{solidLine}</Text>
{/* Header */}
<Text bold color={colors.approval.header}>
Run {toolName}?
</Text>
<Box height={1} />
{/* Arguments preview */}
<Box paddingLeft={2} flexDirection="column">
<Text dimColor>{formattedArgs}</Text>
</Box>
</>
),
[toolName, formattedArgs, solidLine],
);
// Hint text based on state
const hintText = isOnCustomOption
? customReason
@@ -140,20 +164,8 @@ export const InlineGenericApproval = memo(
return (
<Box flexDirection="column">
{/* Top solid line */}
<Text dimColor>{solidLine}</Text>
{/* Header */}
<Text bold color={colors.approval.header}>
Run {toolName}?
</Text>
<Box height={1} />
{/* Arguments preview */}
<Box paddingLeft={2} flexDirection="column">
<Text dimColor>{formattedArgs}</Text>
</Box>
{/* Static tool content - memoized to prevent re-render on keystroke */}
{memoizedToolContent}
{/* Options */}
<Box marginTop={1} flexDirection="column">