fix(cli): allow topic summary to wrap in UI to prevent truncation

packages/cli/src/ui/components/messages/ToolGroupMessage.test.tsx

@@ -307,6 +307,36 @@ describe('<ToolGroupMessage />', () => {
       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(
+        <ToolGroupMessage {...baseProps} item={item} toolCalls={toolCalls} />,
+        {
+          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();
     });
 

packages/cli/src/ui/components/messages/TopicMessage.tsx

@@ -30,15 +30,16 @@ export const TopicMessage: React.FC<TopicMessageProps> = ({ 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 (
-    <Box flexDirection="row" marginLeft={2}>
+    <Box flexDirection="row" marginLeft={2} flexWrap="wrap">
       <Text color={theme.text.primary} bold>
         {title || 'Topic'}
       </Text>
       {summary && (
-        <Text color={theme.text.secondary} wrap="truncate-end">
+        <Text color={theme.text.secondary}>
           {' — '}
-          {summary.length > 80 ? `${summary.substring(0, 80)}...` : summary}
+          {summary}
         </Text>
       )}
     </Box>

packages/cli/src/ui/components/messages/__snapshots__/ToolGroupMessage.test.tsx.snap

@@ -145,6 +145,20 @@ exports[`<ToolGroupMessage /> > Golden Snapshots > renders update_topic tool cal
 "
 `;
 
+exports[`<ToolGroupMessage /> > Golden Snapshots > renders update_topic tool call with summary > update_topic_with_summary 1`] = `
+"  Testing Topic — This is the summary
+"
+`;
+
+exports[`<ToolGroupMessage /> > 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[`<ToolGroupMessage /> > Golden Snapshots > renders with limited terminal height 1`] = `
 "╭──────────────────────────────────────────────────────────────────────────╮
 │ ✓  tool-with-result Tool with output                                     │