From f6ad54e400ac67fb83b805bd6b0ed60812551fcc Mon Sep 17 00:00:00 2001 From: Abhijit Balaji Date: Mon, 30 Mar 2026 18:13:22 -0700 Subject: [PATCH] fix(cli): allow topic summary to wrap in UI to prevent truncation --- .../messages/ToolGroupMessage.test.tsx | 30 +++++++++++++++++++ .../ui/components/messages/TopicMessage.tsx | 7 +++-- .../ToolGroupMessage.test.tsx.snap | 14 +++++++++ 3 files changed, 48 insertions(+), 3 deletions(-) diff --git a/packages/cli/src/ui/components/messages/ToolGroupMessage.test.tsx b/packages/cli/src/ui/components/messages/ToolGroupMessage.test.tsx index 47b41dceb8..97c02a877f 100644 --- a/packages/cli/src/ui/components/messages/ToolGroupMessage.test.tsx +++ b/packages/cli/src/ui/components/messages/ToolGroupMessage.test.tsx @@ -307,6 +307,36 @@ describe('', () => { const output = lastFrame(); expect(output).toContain('Testing Topic'); expect(output).toContain('— This is the summary'); + expect(output).toMatchSnapshot('update_topic_with_summary'); + unmount(); + }); + + it('renders update_topic with a very long summary that wraps', async () => { + const toolCalls = [ + createToolCall({ + callId: 'topic-tool-long-summary', + name: UPDATE_TOPIC_TOOL_NAME, + args: { + [TOPIC_PARAM_TITLE]: 'Testing Topic', + [TOPIC_PARAM_SUMMARY]: + 'This is a very long summary that is designed to exceed the typical terminal width and force the UI to wrap the text across multiple lines instead of truncating it. We want to ensure that all strategic information is visible to the user at all times.', + }, + }), + ]; + const item = createItem(toolCalls); + + const { lastFrame, unmount } = await renderWithProviders( + , + { + config: baseMockConfig, + settings: fullVerbositySettings, + }, + ); + + const output = lastFrame(); + expect(output).toContain('Testing Topic'); + expect(output).toContain('— This is a very long summary'); + expect(output).toMatchSnapshot('update_topic_long_summary'); unmount(); }); diff --git a/packages/cli/src/ui/components/messages/TopicMessage.tsx b/packages/cli/src/ui/components/messages/TopicMessage.tsx index 4fd8663ba1..2550751c5a 100644 --- a/packages/cli/src/ui/components/messages/TopicMessage.tsx +++ b/packages/cli/src/ui/components/messages/TopicMessage.tsx @@ -30,15 +30,16 @@ export const TopicMessage: React.FC = ({ args }) => { // Use summary as a fallback subtitle if title is present, // or use it as the main text if title is missing. + // We allow the summary to wrap naturally to avoid truncation. return ( - + {title || 'Topic'} {summary && ( - + {' — '} - {summary.length > 80 ? `${summary.substring(0, 80)}...` : summary} + {summary} )} diff --git a/packages/cli/src/ui/components/messages/__snapshots__/ToolGroupMessage.test.tsx.snap b/packages/cli/src/ui/components/messages/__snapshots__/ToolGroupMessage.test.tsx.snap index 61ffb78568..f0cd9f369a 100644 --- a/packages/cli/src/ui/components/messages/__snapshots__/ToolGroupMessage.test.tsx.snap +++ b/packages/cli/src/ui/components/messages/__snapshots__/ToolGroupMessage.test.tsx.snap @@ -145,6 +145,20 @@ exports[` > Golden Snapshots > renders update_topic tool cal " `; +exports[` > Golden Snapshots > renders update_topic tool call with summary > update_topic_with_summary 1`] = ` +" Testing Topic — This is the summary +" +`; + +exports[` > Golden Snapshots > renders update_topic with a very long summary that wraps > update_topic_long_summary 1`] = ` +" Testing Topic + — This is a very long summary that is designed to exceed the typical + terminal width and force the UI to wrap the text across multiple lines + instead of truncating it. We want to ensure that all strategic information + is visible to the user at all times. +" +`; + exports[` > Golden Snapshots > renders with limited terminal height 1`] = ` "╭──────────────────────────────────────────────────────────────────────────╮ │ ✓ tool-with-result Tool with output │