Render edit diffs from tool input

Author: jahooma

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

@@ -3,47 +3,14 @@ import { TextAttributes } from '@opentui/core'
 import { DiffViewer } from './diff-viewer'
 import { defineToolComponent } from './types'
 import { useTheme } from '../../hooks/use-theme'
+import {
+  extractDiff,
+  extractFilePath,
+  isCreateFile,
+} from '../../utils/implementor-helpers'
 
 import type { ToolRenderConfig } from './types'
 
-function extractValueForKey(output: string, key: string): string | null {
-  if (!output) return null
-  const lines = output.split('\n')
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i]
-    const match = line.match(/^\s*([A-Za-z0-9_]+):\s*(.*)$/)
-    if (match && match[1] === key) {
-      const rest = match[2]
-      if (rest.trim().startsWith('|')) {
-        const baseIndent = lines[i + 1]?.match(/^\s*/)?.[0].length ?? 0
-        const acc: string[] = []
-        for (let j = i + 1; j < lines.length; j++) {
-          const l = lines[j]
-          const indent = l.match(/^\s*/)?.[0].length ?? 0
-          if (l.trim().length === 0) {
-            acc.push('')
-            continue
-          }
-          if (indent < baseIndent) break
-          acc.push(l.slice(baseIndent))
-        }
-        return acc.join('\n')
-      } else {
-        let val = rest.trim()
-        if (val.startsWith('"') && val.endsWith('"')) {
-          val = val.slice(1, -1)
-        }
-        return val
-      }
-    }
-  }
-  return null
-}
-
-function isCreatedFileMessage(message: string | null): boolean {
-  return message === 'Created file successfully.' || message === 'Created new file'
-}
-
 interface EditHeaderProps {
   name: string
   filePath: string | null
@@ -70,14 +37,13 @@ interface EditBodyProps {
   name: string
   filePath: string | null
   diffText: string
-  isCreate: boolean
 }
 
-const EditBody = ({ name, filePath, diffText, isCreate }: EditBodyProps) => {
+const EditBody = ({ name, filePath, diffText }: EditBodyProps) => {
   return (
     <box style={{ flexDirection: 'column', gap: 0, width: '100%' }}>
       <EditHeader name={name} filePath={filePath} />
-      {!isCreate && diffText.length > 0 && (
+      {diffText.length > 0 && (
         <box style={{ paddingLeft: 2, width: '100%' }}>
           <DiffViewer diffText={diffText} />
         </box>
@@ -90,26 +56,16 @@ export const StrReplaceComponent = defineToolComponent({
   toolName: 'str_replace',
 
   render(toolBlock): ToolRenderConfig {
-    const outputStr =
-      typeof toolBlock.output === 'string' ? toolBlock.output : ''
-    const diff =
-      extractValueForKey(outputStr, 'unifiedDiff') ||
-      extractValueForKey(outputStr, 'patch')
-    const filePath =
-      extractValueForKey(outputStr, 'file') ||
-      (typeof (toolBlock.input as any)?.path === 'string'
-        ? (toolBlock.input as any).path
-        : null)
-    const message = extractValueForKey(outputStr, 'message')
-    const isCreate = isCreatedFileMessage(message)
+    const diff = extractDiff(toolBlock)
+    const filePath = extractFilePath(toolBlock)
+    const isCreate = isCreateFile(toolBlock)
 
     return {
       content: (
         <EditBody
           name={isCreate ? 'Create' : 'Edit'}
           filePath={filePath}
           diffText={diff ?? ''}
-          isCreate={isCreate}
         />
       ),
     }

cli/src/utils/__tests__/implementor-helpers.test.ts

@@ -117,6 +117,32 @@ describe('extractDiff', () => {
     expect(diff).toContain('+ const x = 2')
   })
 
+  test('constructs diff from successful str_replace input when output omits diff', () => {
+    const block: ToolContentBlock = {
+      type: 'tool',
+      toolCallId: 'test-1',
+      toolName: 'str_replace',
+      input: {
+        replacements: [{ oldString: 'const x = 1', newString: 'const x = 2' }],
+      },
+      output: 'message: String replace applied successfully.',
+    }
+    const diff = extractDiff(block)
+    expect(diff).toContain('- const x = 1')
+    expect(diff).toContain('+ const x = 2')
+  })
+
+  test('uses patch content from successful str_replace input when output omits diff', () => {
+    const block: ToolContentBlock = {
+      type: 'tool',
+      toolCallId: 'test-1',
+      toolName: 'str_replace',
+      input: { type: 'patch', content: '- const x = 1\n+ const x = 2' },
+      output: 'message: String replace applied successfully.',
+    }
+    expect(extractDiff(block)).toBe('- const x = 1\n+ const x = 2')
+  })
+
   test('constructs diff from write_file input', () => {
     const block: ToolContentBlock = {
       type: 'tool',
@@ -128,6 +154,18 @@ describe('extractDiff', () => {
     expect(diff).toBe('+ line1\n+ line2')
   })
 
+  test('constructs diff from successful write_file input when output omits diff', () => {
+    const block: ToolContentBlock = {
+      type: 'tool',
+      toolCallId: 'test-1',
+      toolName: 'write_file',
+      input: { content: 'line1\nline2' },
+      output: 'message: Overwrote file successfully.',
+    }
+    const diff = extractDiff(block)
+    expect(diff).toBe('+ line1\n+ line2')
+  })
+
   test('constructs diff from propose_str_replace input', () => {
     const block: ToolContentBlock = {
       type: 'tool',