feat: Implementar sistema de visualización de diffs en UI

[Saul-Gomez-J]

Descripción

Actualmente el sistema de coding tools genera diffs cuando se editan archivos (usando edit-diff.ts), pero estos diffs se muestran como texto plano en la respuesta del agente. Se necesita un componente de UI que visualice los diffs de forma clara y legible, similar a como lo hace GitHub o VS Code.

Contexto Técnico

El backend ya genera diffs en formato unified diff:

// src/main/services/ai/codingTools/tools/edit-diff.ts
import { createPatch } from "diff";

export function generateDiffString(oldContent: string, newContent: string, filename: string): string {
  const patch = createPatch(filename, oldContent, newContent, "", "");
  return lines.slice(2).join("\n");
}

El resultado de edit.ts incluye:

{
  success: true,
  diff: "@@ -10,2 +10,3 @@\n-old line\n+new line",
  linesAdded: 3,
  linesRemoved: 2,
}

Propuesta de Implementación

1. Componente DiffViewer

Crear un componente React que parsee y renderice diffs:

src/renderer/components/ai-elements/
├── diff-viewer/
│   ├── DiffViewer.tsx       # Componente principal
│   ├── DiffLine.tsx         # Línea individual con colores
│   ├── DiffHunk.tsx         # Grupo de cambios (@@ ... @@)
│   └── diff-utils.ts        # Parser de unified diff

2. Características

• Colores semánticos: Verde para adiciones (+), rojo para eliminaciones (-)
• Números de línea: Mostrar números de línea old/new
• Syntax highlighting: Opcional, para código fuente
• Modo side-by-side: Vista alternativa lado a lado
• Colapsar/expandir: Para diffs largos
• Copiar diff: Botón para copiar el diff raw

3. Integración

El componente se usaría en message.tsx cuando el tool result contenga un campo diff:

// En el renderizado de tool results
if (toolResult.diff) {
  return <DiffViewer diff={toolResult.diff} filename={toolResult.path} />;
}

4. Librerías Sugeridas

• react-diff-viewer-continued: Componente React maduro para diffs
• diff2html: Convierte unified diff a HTML
• Implementación propia: Usar Tailwind para estilos custom

Tareas

• Investigar librerías existentes vs implementación propia
• Crear componente DiffViewer base
• Agregar parser de unified diff
• Implementar estilos con Tailwind (tema claro/oscuro)
• Integrar en message.tsx para tool results
• Agregar tests unitarios
• Documentar uso del componente

Diseño Visual (Referencia)

Similar a GitHub diff view:

┌─────────────────────────────────────────────┐
│ 📄 src/utils/helper.ts                      │
├─────────────────────────────────────────────┤
│ @@ -10,3 +10,4 @@                            │
│  10 │  10 │   const x = 1;                  │
│  11 │     │ - const y = 2;         ← rojo   │
│     │  11 │ + const y = 3;         ← verde  │
│     │  12 │ + const z = 4;         ← verde  │
│  12 │  13 │   return x + y;                 │
└─────────────────────────────────────────────┘

Referencias

• src/main/services/ai/codingTools/tools/edit-diff.ts - Generación de diffs
• src/main/services/ai/codingTools/tools/edit.ts - Herramienta Edit
• docs/MIGRACION_CODING_TOOLS.md - Documentación de la migración