cli: read files tool component

Author: jahooma

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

@@ -0,0 +1,119 @@
+import { TextAttributes } from '@opentui/core'
+import React from 'react'
+
+import { useTheme } from '../../hooks/use-theme'
+import { defineToolComponent } from './types'
+
+import type { ToolRenderConfig } from './types'
+
+interface ReadFilesSimpleToolCallItemProps {
+  name: string
+  filePaths: string[]
+  branchChar: string
+  maxNewlineFiles?: number
+}
+
+const ReadFilesSimpleToolCallItem = ({
+  name,
+  filePaths,
+  branchChar,
+  maxNewlineFiles = 2,
+}: ReadFilesSimpleToolCallItemProps) => {
+  const theme = useTheme()
+  const bulletChar = '• '
+
+  // Split files into two groups
+  const firstFilePath = filePaths[0]
+  const newlineFiles = filePaths.slice(1, maxNewlineFiles)
+  const inlineFiles = filePaths.slice(maxNewlineFiles)
+
+  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}>{branchChar || 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: 7,
+          }}
+        >
+          <text style={{ wrapMode: 'word' }}>
+            <span fg={theme.foreground}>{file}</span>
+          </text>
+        </box>
+      ))}
+
+      {/* Remaining files inline */}
+      {inlineFiles.length > 0 && (
+        <box
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            width: '100%',
+            paddingLeft: 7,
+          }}
+        >
+          <text style={{ wrapMode: 'word' }}>
+            <span fg={theme.foreground}>{inlineFiles.join(', ')}</span>
+          </text>
+        </box>
+      )}
+    </box>
+  )
+}
+
+/**
+ * UI component for read_files tool.
+ * Displays file paths with first few on newlines, rest inline.
+ * Does not support expand/collapse - always shows as a simple list.
+ */
+export const ReadFilesComponent = defineToolComponent({
+  toolName: 'read_files',
+
+  render(toolBlock, theme, options): ToolRenderConfig | null {
+    const input = toolBlock.input as any
+
+    // Extract file paths from input
+    let filePaths: string[] = []
+
+    if (Array.isArray(input?.paths)) {
+      filePaths = input.paths.filter(
+        (path: any) => typeof path === 'string' && path.trim().length > 0,
+      )
+    }
+
+    if (filePaths.length === 0) {
+      return null
+    }
+
+    return {
+      content: (
+        <ReadFilesSimpleToolCallItem
+          name="Read"
+          filePaths={filePaths}
+          branchChar={options.branchChar}
+        />
+      ),
+    }
+  },
+})

cli/src/components/tools/registry.ts

@@ -10,6 +10,7 @@ import type { ChatTheme } from '../../types/theme-system'
 import { ListDirectoryComponent } from './list-directory'
 import { RunTerminalCommandComponent } from './run-terminal-command'
 import { CodeSearchComponent } from './code-search'
+import { ReadFilesComponent } from './read-files'
 
 /**
  * Registry of all tool-specific UI components.
@@ -19,6 +20,7 @@ const toolComponentRegistry = new Map<ToolName, ToolComponent>([
   [CodeSearchComponent.toolName, CodeSearchComponent],
   [ListDirectoryComponent.toolName, ListDirectoryComponent],
   [RunTerminalCommandComponent.toolName, RunTerminalCommandComponent],
+  [ReadFilesComponent.toolName, ReadFilesComponent],
 ])
 
 /**