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 │