Capitulo 8: Diff Viewer

< Volver al Indice del Tutorial

Spacecake incluye un visor de diffs integrado directamente en el editor. Esta funcionalidad transforma la experiencia de revision de cambios propuestos por Claude Code: en lugar de leer diffs como texto plano en la terminal, los ves como bloques visuales con colores, estadisticas y syntax highlighting.

Bloques Diff

Cuando Claude Code genera cambios, Spacecake puede mostrarlos como bloques diff dentro del editor. Cada bloque diff contiene:

Header del Bloque

• Nombre del archivo modificado: se muestra con un icono representativo del tipo de archivo, facilitando la identificacion rapida
• Estadisticas de cambios: un resumen numerico de las modificaciones
  • Lineas anadidas: se muestran como +N en verde
  • Lineas eliminadas: se muestran como -N en rojo

Vista Side-by-Side

El diff viewer muestra el contenido antiguo y el nuevo lado a lado:

• Panel izquierdo: el codigo original antes del cambio
• Panel derecho: el codigo propuesto despues del cambio
• Las lineas modificadas se resaltan con colores de fondo para facilitar la comparacion visual

Esta vista side-by-side permite identificar rapidamente que cambio, que se agrego y que se elimino sin tener que interpretar los simbolos + y - de un diff textual.

Syntax Highlighting en Diffs

El diff editor usa CodeMirror internamente para aplicar syntax highlighting al codigo que se muestra en los paneles del diff. Esto significa que:

• El codigo mantiene su coloreado de sintaxis incluso dentro del diff
• Puedes distinguir facilmente entre tipos de tokens (variables, funciones, strings, etc.)
• La lectura del cambio propuesto es mucho mas natural que leer un diff en texto plano

El highlighting se aplica segun el lenguaje del archivo modificado, detectado automaticamente por la extension del archivo.

Uso con Planes de Claude

Uno de los flujos mas potentes de Spacecake es la revision de planes de Claude Code que incluyen cambios de codigo:

1. Claude genera un plan: le pides a Claude que planifique una funcionalidad o refactorizacion
2. El plan incluye cambios propuestos: Claude detalla que archivos modificar y como
3. Los diffs se renderizan visualmente: en el editor de Spacecake, los cambios se muestran como bloques diff con toda la informacion visual
4. Revisas antes de aprobar: puedes examinar cada cambio propuesto con la comodidad de colores, estadisticas y syntax highlighting
5. Apruebas o ajustas: decides si implementar los cambios tal cual o pedir modificaciones

Este flujo de revision visual reduce significativamente el riesgo de aprobar cambios incorrectos. Ver el codigo coloreado y organizado lado a lado es mucho mas efectivo que parsear mentalmente un diff textual.

Ventaja sobre la Terminal Pura

Esta es una de las ventajas clave de Spacecake sobre usar Claude Code directamente en la terminal:

• En terminal: los diffs se muestran como texto plano con + y -, sin colores de sintaxis, y con contexto limitado
• En Spacecake: los diffs se renderizan como componentes visuales con syntax highlighting completo, estadisticas, iconos de tipo de archivo y vista side-by-side

Para cambios pequenos, la diferencia puede parecer menor. Pero cuando Claude propone modificaciones en multiples archivos o refactorizaciones extensas, la representacion visual marca una diferencia notable en la velocidad y precision de la revision.

Relacion con el Panel Git

Es importante distinguir entre dos tipos de diffs en Spacecake:

Diff Viewer del Editor (este capitulo)

• Muestra cambios propuestos por Claude Code
• Aparece dentro del editor como bloques diff embebidos en documentos
• Son cambios que aun no se han aplicado al repositorio
• Sirve para revision previa antes de implementar

Git Panel (Capitulo 17)

• Muestra cambios confirmados en el repositorio
• Aparece en el panel lateral de Git de Spacecake
• Son cambios que ya estan en el working tree o en commits
• Sirve para gestion de version y control de cambios

En resumen: el diff viewer del editor te ayuda a decidir si aceptar cambios propuestos, mientras que el git panel te ayuda a gestionar cambios ya realizados. Ambos usan representacion visual de diffs, pero en contextos diferentes del flujo de trabajo.

---

Siguiente: Capitulo 9: Terminal Ghostty —>