Change read files to just be comma-separated, but always indented

Author: jahooma

cli/src/components/tools/read-files.tsx

@@ -1,6 +1,4 @@
 import { TextAttributes } from '@opentui/core'
-import React from 'react'
-import stringWidth from 'string-width'
 
 import { useTheme } from '../../hooks/use-theme'
 import { defineToolComponent } from './types'
@@ -20,71 +18,32 @@ const ReadFilesSimpleToolCallItem = ({
 }: ReadFilesSimpleToolCallItemProps) => {
   const theme = useTheme()
   const bulletChar = '• '
-  const baseIndentWidth = stringWidth(bulletChar) + stringWidth(name + ' ')
-
-  // Split files into two groups
-  const firstFilePath = filePaths[0]
-  const newlineFiles = filePaths.slice(1, maxNewlineFiles)
-  const inlineFiles = filePaths.slice(maxNewlineFiles)
+  const labelWidth = 7 // Width of "• Read " in characters
 
   return (
     <box style={{ flexDirection: 'column', gap: 0, width: '100%' }}>
-      {/* First line with name */}
-      <box
-        style={{ flexDirection: 'row', alignItems: 'center', width: '100%' }}
-      >
-        <text style={{ wrapMode: 'word' }}>
-          <span fg={theme.foreground}>{bulletChar}</span>
-          <span fg={theme.foreground} attributes={TextAttributes.BOLD}>
-            {name}
-          </span>
-        </text>
-        {firstFilePath && (
-          <text style={{ wrapMode: 'word' }}>
-            <span fg={theme.foreground}>{' ' + firstFilePath}</span>
-          </text>
-        )}
-      </box>
-
-      {/* Files on newlines */}
-      {newlineFiles.map((file, index) => (
-        <box
-          key={`newline-${index}`}
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            width: '100%',
-            paddingLeft: baseIndentWidth,
-          }}
-        >
-          <text style={{ wrapMode: 'word' }}>
-            <span fg={theme.foreground}>{file}</span>
+      <box style={{ flexDirection: 'row', width: '100%' }}>
+        <box style={{ width: labelWidth, flexShrink: 0 }}>
+          <text style={{ wrapMode: 'none' }}>
+            <span fg={theme.foreground}>{bulletChar}</span>
+            <span fg={theme.foreground} attributes={TextAttributes.BOLD}>
+              {name}
+            </span>
           </text>
         </box>
-      ))}
-
-      {/* Remaining files inline */}
-      {inlineFiles.length > 0 && (
-        <box
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            width: '100%',
-            paddingLeft: baseIndentWidth,
-          }}
-        >
+        <box style={{ flexGrow: 1 }}>
           <text style={{ wrapMode: 'word' }}>
-            <span fg={theme.foreground}>{inlineFiles.join(', ')}</span>
+            <span fg={theme.foreground}>{filePaths.join(', ')}</span>
           </text>
         </box>
-      )}
+      </box>
     </box>
   )
 }
 
 /**
  * UI component for read_files tool.
- * Displays file paths with first few on newlines, rest inline.
+ * Displays all file paths as comma-separated list.
  * Does not support expand/collapse - always shows as a simple list.
  */
 export const ReadFilesComponent = defineToolComponent({
@@ -108,10 +67,7 @@ export const ReadFilesComponent = defineToolComponent({
 
     return {
       content: (
-        <ReadFilesSimpleToolCallItem
-          name="Read"
-          filePaths={filePaths}
-        />
+        <ReadFilesSimpleToolCallItem name="Read" filePaths={filePaths} />
       ),
     }
   },