feat(ux): modify wrapping behavior of compact tool output

- tool 'name' will not be truncated up to 25 chars
- tool invocation 'description' locks to first line of output (and truncates if nec)
- result 'summary' will appear on first line if space is available, otherwise can wrap to second line. (no content wrapping expected beyond second line)

Author: jwhelangoog

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

@@ -475,6 +475,28 @@ describe('DenseToolMessage', () => {
     expect(output).toMatchSnapshot();
   });
 
+  it('truncates long description but preserves tool name (< 25 chars)', async () => {
+    const longDescription =
+      'This is a very long description that should definitely be truncated because it exceeds the available terminal width and we want to see how it behaves.';
+    const toolName = 'tool-name-is-24-chars-!!'; // Exactly 24 chars
+    const { lastFrame, waitUntilReady } = await renderWithProviders(
+      <DenseToolMessage
+        {...defaultProps}
+        name={toolName}
+        description={longDescription}
+        terminalWidth={50} // Narrow width to force truncation
+      />,
+    );
+    await waitUntilReady();
+    const output = lastFrame();
+
+    // Tool name should be fully present (it plus one space is exactly 25, fitting the maxWidth)
+    expect(output).toContain(toolName);
+    // Description should be present but truncated
+    expect(output).toContain('This is a');
+    expect(output).toMatchSnapshot();
+  });
+
   describe('Toggleable Diff View (Alternate Buffer)', () => {
     const diffResult: FileDiff = {
       fileDiff: '@@ -1,1 +1,1 @@\n-old line\n+new line',

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

@@ -450,15 +450,18 @@ export const DenseToolMessage: React.FC<DenseToolMessageProps> = (props) => {
   return (
     <Box flexDirection="column">
       <Box marginLeft={2} flexDirection="row" flexWrap="wrap">
-        <ToolStatusIndicator status={status} name={name} />
-        <Box maxWidth={25} flexShrink={1} flexGrow={0}>
-          <Text color={theme.text.primary} bold wrap="truncate-end">
-            {name}{' '}
-          </Text>
-        </Box>
-        <Box marginLeft={1} flexShrink={1} flexGrow={0}>
-          {description}
+        <Box flexDirection="row" flexShrink={1}>
+          <ToolStatusIndicator status={status} name={name} />
+          <Box maxWidth={25} flexShrink={0} flexGrow={0}>
+            <Text color={theme.text.primary} bold wrap="truncate-end">
+              {name}{' '}
+            </Text>
+          </Box>
+          <Box marginLeft={1} flexShrink={1} flexGrow={0}>
+            {description}
+          </Box>
         </Box>
+
         {summary && (
           <Box
             key="tool-summary"

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

@@ -129,6 +129,12 @@ exports[`DenseToolMessage > renders generic output message for unknown object re
 "
 `;
 
+exports[`DenseToolMessage > truncates long description but preserves tool name (< 25 chars) 1`] = `
+"  ✓  tool-name-is-24-chars-!!  This is a very long description that should definitely be truncated …
+   → Success result
+"
+`;
+
 exports[`DenseToolMessage > truncates long string results 1`] = `
 "  ✓  test-tool  Test description
    → AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA…