Fimeg/letta-code
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: extend approval dialog horizontal lines to full terminal width (#696)

Browse Source 
Co-authored-by: Letta <noreply@letta.com>
This commit is contained in:
Charles Packer
2026-01-26 21:00:15 -08:00
committed by GitHub
parent aa0f440657
commit 57f99b906b
10 changed files with 24 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/cli/components/ApprovalPreview.tsx
View File

@@ -113,8 +113,8 @@ export const ApprovalPreview = memo(
toolCallId,
}: Props) => {
const columns = useTerminalWidth();
const solidLine = SOLID_LINE.repeat(Math.max(columns - 2, 10));
const dottedLine = DOTTED_LINE.repeat(Math.max(columns - 2, 10));
const solidLine = SOLID_LINE.repeat(Math.max(columns, 10));
const dottedLine = DOTTED_LINE.repeat(Math.max(columns, 10));
// ExitPlanMode: Use PlanPreview component
if (toolName === "ExitPlanMode" && planContent) {

2
src/cli/components/InlineBashApproval.tsx
View File

@@ -116,7 +116,7 @@ export const InlineBashApproval = memo(
{ isActive: isFocused },
);
const solidLine = SOLID_LINE.repeat(Math.max(columns - 2, 10));
const solidLine = SOLID_LINE.repeat(Math.max(columns, 10));
// Memoize the static command content so it doesn't re-render on keystroke
// This prevents flicker when typing feedback in the custom input field

2
src/cli/components/InlineEnterPlanModeApproval.tsx
View File

@@ -89,7 +89,7 @@ export const InlineEnterPlanModeApproval = memo(
);
// Generate horizontal line
const solidLine = SOLID_LINE.repeat(Math.max(columns - 2, 10));
const solidLine = SOLID_LINE.repeat(Math.max(columns, 10));
return (
<Box flexDirection="column">

4
src/cli/components/InlineFileEditApproval.tsx
View File

@@ -279,8 +279,8 @@ export const InlineFileEditApproval = memo(
);
// Generate horizontal lines
const solidLine = SOLID_LINE.repeat(Math.max(columns - 2, 10));
const dottedLine = DOTTED_LINE.repeat(Math.max(columns - 2, 10));
const solidLine = SOLID_LINE.repeat(Math.max(columns, 10));
const dottedLine = DOTTED_LINE.repeat(Math.max(columns, 10));
const headerText = getHeaderText(fileEdit);
const diffKind = getDiffKind(fileEdit.toolName);

2
src/cli/components/InlineGenericApproval.tsx
View File

@@ -130,7 +130,7 @@ export const InlineGenericApproval = memo(
);
// Generate horizontal line
const solidLine = SOLID_LINE.repeat(Math.max(columns - 2, 10));
const solidLine = SOLID_LINE.repeat(Math.max(columns, 10));
const formattedArgs = formatArgs(toolArgs);
// Memoize the static tool content so it doesn't re-render on keystroke

11
src/cli/components/InlinePlanApproval.tsx
View File

@@ -107,8 +107,8 @@ export const InlinePlanApproval = memo(
);
// Generate horizontal lines
const solidLine = SOLID_LINE.repeat(Math.max(columns - 2, 10));
const dottedLine = DOTTED_LINE.repeat(Math.max(columns - 2, 10));
const solidLine = SOLID_LINE.repeat(Math.max(columns, 10));
const dottedLine = DOTTED_LINE.repeat(Math.max(columns, 10));
// Memoize the static plan content so it doesn't re-render on keystroke
// This prevents flicker when typing feedback in the custom input field
@@ -127,13 +127,16 @@ export const InlinePlanApproval = memo(
<Text dimColor>{dottedLine}</Text>
{/* Plan content - no indentation, just like Claude Code */}
<MarkdownDisplay text={plan} />
{/* Box with explicit width enables proper word-level wrapping */}
<Box width={columns}>
<MarkdownDisplay text={plan} />
</Box>
{/* Dotted separator after plan content */}
<Text dimColor>{dottedLine}</Text>
</>
),
[plan, solidLine, dottedLine],
[plan, solidLine, dottedLine, columns],
);
// Hint text based on state

2
src/cli/components/InlineQuestionApproval.tsx
View File

@@ -256,7 +256,7 @@ export const InlineQuestionApproval = memo(
);
// Generate horizontal line
const solidLine = SOLID_LINE.repeat(Math.max(columns - 2, 10));
const solidLine = SOLID_LINE.repeat(Math.max(columns, 10));
// Memoize the static header content so it doesn't re-render on keystroke
// This prevents flicker when typing in the custom input field

2
src/cli/components/InlineTaskApproval.tsx
View File

@@ -122,7 +122,7 @@ export const InlineTaskApproval = memo(
);
// Generate horizontal line
const solidLine = SOLID_LINE.repeat(Math.max(columns - 2, 10));
const solidLine = SOLID_LINE.repeat(Math.max(columns, 10));
const contentWidth = Math.max(0, columns - 4); // 2 padding on each side
// Memoize the static task content so it doesn't re-render on keystroke

2
src/cli/components/previews/BashPreview.tsx
View File

@@ -19,7 +19,7 @@ type Props = {
*/
export const BashPreview = memo(({ command, description }: Props) => {
const columns = useTerminalWidth();
const solidLine = SOLID_LINE.repeat(Math.max(columns - 2, 10));
const solidLine = SOLID_LINE.repeat(Math.max(columns, 10));
return (
<>

12
src/cli/components/previews/PlanPreview.tsx
View File

@@ -1,4 +1,4 @@
import { Text } from "ink";
import { Box, Text } from "ink";
import { memo } from "react";
import { useTerminalWidth } from "../../hooks/useTerminalWidth";
import { colors } from "../colors";
@@ -20,8 +20,8 @@ type Props = {
*/
export const PlanPreview = memo(({ plan }: Props) => {
const columns = useTerminalWidth();
const solidLine = SOLID_LINE.repeat(Math.max(columns - 2, 10));
const dottedLine = DOTTED_LINE.repeat(Math.max(columns - 2, 10));
const solidLine = SOLID_LINE.repeat(Math.max(columns, 10));
const dottedLine = DOTTED_LINE.repeat(Math.max(columns, 10));
return (
<>
@@ -36,8 +36,10 @@ export const PlanPreview = memo(({ plan }: Props) => {
{/* Dotted separator before plan content */}
<Text dimColor>{dottedLine}</Text>
{/* Plan content */}
<MarkdownDisplay text={plan} />
{/* Plan content - Box with explicit width enables proper word-level wrapping */}
<Box width={columns}>
<MarkdownDisplay text={plan} />
</Box>
{/* Dotted separator after plan content */}
<Text dimColor>{dottedLine}</Text>