Capitulo 8: Diff Viewer
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:
- Claude genera un plan: le pides a Claude que planifique una funcionalidad o refactorizacion
- El plan incluye cambios propuestos: Claude detalla que archivos modificar y como
- Los diffs se renderizan visualmente: en el editor de Spacecake, los cambios se muestran como bloques diff con toda la informacion visual
- Revisas antes de aprobar: puedes examinar cada cambio propuesto con la comodidad de colores, estadisticas y syntax highlighting
- 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 —>