From cdc602edd7f21ceb14ee9539c48fbe73e9932ac5 Mon Sep 17 00:00:00 2001
From: Jarrod Whelan <150866123+jwhelangoog@users.noreply.github.com>
Date: Tue, 31 Mar 2026 17:00:48 -0700
Subject: [PATCH] fix(ui): wrap topic and intent fields in TopicMessage
 (#24386)

---
 .../ui/components/messages/ToolGroupMessage.test.tsx  |  8 ++++----
 .../cli/src/ui/components/messages/TopicMessage.tsx   | 11 ++++++++---
 .../__snapshots__/ToolGroupMessage.test.tsx.snap      |  4 ++--
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/cli/src/ui/components/messages/ToolGroupMessage.test.tsx b/packages/cli/src/ui/components/messages/ToolGroupMessage.test.tsx
index e31c32899f..7108d76154 100644
--- a/packages/cli/src/ui/components/messages/ToolGroupMessage.test.tsx
+++ b/packages/cli/src/ui/components/messages/ToolGroupMessage.test.tsx
@@ -279,8 +279,8 @@ describe('<ToolGroupMessage />', () => {
       );
 
       const output = lastFrame();
-      expect(output).toContain('Testing Topic');
-      expect(output).toContain('— This is the description');
+      expect(output).toContain('Testing Topic: ');
+      expect(output).toContain('This is the description');
       expect(output).toMatchSnapshot('update_topic_tool');
       unmount();
     });
@@ -307,8 +307,8 @@ describe('<ToolGroupMessage />', () => {
       );
 
       const output = lastFrame();
-      expect(output).toContain('Testing Topic');
-      expect(output).toContain('— This is the summary');
+      expect(output).toContain('Testing Topic: ');
+      expect(output).toContain('This is the summary');
       unmount();
     });
 
diff --git a/packages/cli/src/ui/components/messages/TopicMessage.tsx b/packages/cli/src/ui/components/messages/TopicMessage.tsx
index 810628606d..0aea7f5dbd 100644
--- a/packages/cli/src/ui/components/messages/TopicMessage.tsx
+++ b/packages/cli/src/ui/components/messages/TopicMessage.tsx
@@ -31,11 +31,16 @@ export const TopicMessage: React.FC<TopicMessageProps> = ({ args }) => {
   const intent = typeof rawIntent === 'string' ? rawIntent : undefined;
 
   return (
-    <Box flexDirection="row" marginLeft={2}>
-      <Text color={theme.text.primary} bold>
+    <Box flexDirection="row" marginLeft={2} flexWrap="wrap">
+      <Text color={theme.text.primary} bold wrap="truncate-end">
         {title || 'Topic'}
+        {intent && <Text>: </Text>}
       </Text>
-      {intent && <Text color={theme.text.secondary}> — {intent}</Text>}
+      {intent && (
+        <Text color={theme.text.secondary} wrap="wrap">
+          {intent}
+        </Text>
+      )}
     </Box>
   );
 };
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 a3af0178a5..af0aa58a9e 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
@@ -77,7 +77,7 @@ exports[`<ToolGroupMessage /> > Golden Snapshots > renders header when scrolled
 `;
 
 exports[`<ToolGroupMessage /> > Golden Snapshots > renders mixed tool calls including update_topic 1`] = `
-"  Testing Topic — This is the description
+"  Testing Topic: This is the description
 ╭──────────────────────────────────────────────────────────────────────────╮
 │ ✓  read_file Read a file                                                 │
 │                                                                          │
@@ -141,7 +141,7 @@ exports[`<ToolGroupMessage /> > Golden Snapshots > renders two tool groups where
 `;
 
 exports[`<ToolGroupMessage /> > Golden Snapshots > renders update_topic tool call using TopicMessage > update_topic_tool 1`] = `
-"  Testing Topic — This is the description
+"  Testing Topic: This is the description
 "
 `;