From 57f99b906b33099e8e9f3e9e8e9e56f439658f25 Mon Sep 17 00:00:00 2001 From: Charles Packer Date: Mon, 26 Jan 2026 21:00:15 -0800 Subject: [PATCH] fix: extend approval dialog horizontal lines to full terminal width (#696) Co-authored-by: Letta --- src/cli/components/ApprovalPreview.tsx | 4 ++-- src/cli/components/InlineBashApproval.tsx | 2 +- src/cli/components/InlineEnterPlanModeApproval.tsx | 2 +- src/cli/components/InlineFileEditApproval.tsx | 4 ++-- src/cli/components/InlineGenericApproval.tsx | 2 +- src/cli/components/InlinePlanApproval.tsx | 11 +++++++---- src/cli/components/InlineQuestionApproval.tsx | 2 +- src/cli/components/InlineTaskApproval.tsx | 2 +- src/cli/components/previews/BashPreview.tsx | 2 +- src/cli/components/previews/PlanPreview.tsx | 12 +++++++----- 10 files changed, 24 insertions(+), 19 deletions(-) diff --git a/src/cli/components/ApprovalPreview.tsx b/src/cli/components/ApprovalPreview.tsx index 1b1c3f6..8ffe90d 100644 --- a/src/cli/components/ApprovalPreview.tsx +++ b/src/cli/components/ApprovalPreview.tsx @@ -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) { diff --git a/src/cli/components/InlineBashApproval.tsx b/src/cli/components/InlineBashApproval.tsx index a2cf70f..a1b5b2b 100644 --- a/src/cli/components/InlineBashApproval.tsx +++ b/src/cli/components/InlineBashApproval.tsx @@ -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 diff --git a/src/cli/components/InlineEnterPlanModeApproval.tsx b/src/cli/components/InlineEnterPlanModeApproval.tsx index ae47603..1d7f21f 100644 --- a/src/cli/components/InlineEnterPlanModeApproval.tsx +++ b/src/cli/components/InlineEnterPlanModeApproval.tsx @@ -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 ( diff --git a/src/cli/components/InlineFileEditApproval.tsx b/src/cli/components/InlineFileEditApproval.tsx index 78d9d9f..79e0005 100644 --- a/src/cli/components/InlineFileEditApproval.tsx +++ b/src/cli/components/InlineFileEditApproval.tsx @@ -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); diff --git a/src/cli/components/InlineGenericApproval.tsx b/src/cli/components/InlineGenericApproval.tsx index e637c5e..6393315 100644 --- a/src/cli/components/InlineGenericApproval.tsx +++ b/src/cli/components/InlineGenericApproval.tsx @@ -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 diff --git a/src/cli/components/InlinePlanApproval.tsx b/src/cli/components/InlinePlanApproval.tsx index 256a9ee..7c9cb51 100644 --- a/src/cli/components/InlinePlanApproval.tsx +++ b/src/cli/components/InlinePlanApproval.tsx @@ -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( {dottedLine} {/* Plan content - no indentation, just like Claude Code */} - + {/* Box with explicit width enables proper word-level wrapping */} + + + {/* Dotted separator after plan content */} {dottedLine} ), - [plan, solidLine, dottedLine], + [plan, solidLine, dottedLine, columns], ); // Hint text based on state diff --git a/src/cli/components/InlineQuestionApproval.tsx b/src/cli/components/InlineQuestionApproval.tsx index b9cb87d..f36321a 100644 --- a/src/cli/components/InlineQuestionApproval.tsx +++ b/src/cli/components/InlineQuestionApproval.tsx @@ -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 diff --git a/src/cli/components/InlineTaskApproval.tsx b/src/cli/components/InlineTaskApproval.tsx index 37cdeec..6d5d57b 100644 --- a/src/cli/components/InlineTaskApproval.tsx +++ b/src/cli/components/InlineTaskApproval.tsx @@ -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 diff --git a/src/cli/components/previews/BashPreview.tsx b/src/cli/components/previews/BashPreview.tsx index a8cf6ef..06e8da1 100644 --- a/src/cli/components/previews/BashPreview.tsx +++ b/src/cli/components/previews/BashPreview.tsx @@ -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 ( <> diff --git a/src/cli/components/previews/PlanPreview.tsx b/src/cli/components/previews/PlanPreview.tsx index 613ed2f..2fa770e 100644 --- a/src/cli/components/previews/PlanPreview.tsx +++ b/src/cli/components/previews/PlanPreview.tsx @@ -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 */} {dottedLine} - {/* Plan content */} - + {/* Plan content - Box with explicit width enables proper word-level wrapping */} + + + {/* Dotted separator after plan content */} {dottedLine}