revert: restore str-replace, diff-viewer, and tool-call-item components from main

Author: brandonkachen

cli/src/components/tools/diff-viewer.tsx

@@ -41,21 +41,25 @@ const lineColor = (line: string): { fg: string; attrs?: number } => {
 export const DiffViewer = ({ diffText }: DiffViewerProps) => {
   const theme = useTheme()
   const lines = diffText.split('\n')
-  const filteredLines = lines.filter((rawLine) => !rawLine.startsWith('@@'))
 
   return (
-    <text style={{ wrapMode: 'none', marginTop: 0, marginBottom: 0 }}>
-      {filteredLines.map((rawLine, idx) => {
-        const line = rawLine.length === 0 ? ' ' : rawLine
-        const { fg, attrs } = lineColor(line)
-        const resolvedFg = fg || theme.foreground
-        return (
-          <span key={`diff-line-${idx}`} fg={resolvedFg} attributes={attrs}>
-            {line}
-            {idx < filteredLines.length - 1 ? '\n' : ''}
-          </span>
-        )
-      })}
-    </text>
+    <box
+      style={{ flexDirection: 'column', gap: 0, width: '100%', flexGrow: 1 }}
+    >
+      {lines
+        .filter((rawLine) => !rawLine.startsWith('@@'))
+        .map((rawLine, idx) => {
+          const line = rawLine.length === 0 ? ' ' : rawLine
+          const { fg, attrs } = lineColor(line)
+          const resolvedFg = fg || theme.foreground
+          return (
+            <text key={`diff-line-${idx}`} style={{ wrapMode: 'none' }}>
+              <span fg={resolvedFg} attributes={attrs}>
+                {line}
+              </span>
+            </text>
+          )
+        })}
+    </box>
   )
 }

cli/src/components/tools/str-replace.tsx

@@ -50,16 +50,8 @@ const EditHeader = ({ name, filePath }: EditHeaderProps) => {
   const bulletChar = '• '
 
   return (
-    <box
-      style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        width: '100%',
-        marginTop: 0,
-        marginBottom: 0,
-      }}
-    >
-      <text style={{ wrapMode: 'word', marginTop: 0, marginBottom: 0 }}>
+    <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}
@@ -77,34 +69,12 @@ interface EditBodyProps {
 }
 
 const EditBody = ({ name, filePath, diffText }: EditBodyProps) => {
-  const hasDiff = diffText && diffText.trim().length > 0
-
   return (
-    <box
-      style={{
-        flexDirection: 'column',
-        gap: 0,
-        width: '100%',
-        marginTop: 0,
-        marginBottom: 0,
-      }}
-    >
+    <box style={{ flexDirection: 'column', gap: 0, width: '100%' }}>
       <EditHeader name={name} filePath={filePath} />
-      {hasDiff && (
-        <box
-          style={{
-            paddingLeft: 2,
-            paddingRight: 0,
-            paddingTop: 0,
-            paddingBottom: 0,
-            width: '100%',
-            marginTop: 0,
-            marginBottom: 0,
-          }}
-        >
-          <DiffViewer diffText={diffText} />
-        </box>
-      )}
+      <box style={{ paddingLeft: 2, width: '100%' }}>
+        <DiffViewer diffText={diffText} />
+      </box>
     </box>
   )
 }

cli/src/components/tools/tool-call-item.tsx

@@ -110,12 +110,6 @@ const renderExpandedContent = (
     )
   }
 
-  // Check if value is a plain object (not a React element)
-  if (typeof value === 'object' && value !== null && !React.isValidElement(value)) {
-    console.warn('Attempted to render plain object in tool content:', value)
-    return null
-  }
-
   return (
     <box
       key="tool-expanded-unknown"