Capitulo 3: Interfaz y Navegacion

< Volver al Indice del Tutorial

Anatomia de la interfaz

Spacecake organiza su interfaz en cinco areas principales que trabajan juntas para ofrecer un entorno integrado de desarrollo con Claude Code.

Sidebar izquierda

El panel lateral izquierdo muestra el arbol de archivos del workspace actual. Desde aqui puedes:

• Navegar por la estructura de carpetas del proyecto.
• Hacer click en un archivo para abrirlo en el editor.
• Ver de un vistazo la organizacion del proyecto.

El sidebar tambien incluye los controles de workspace y acceso a la configuracion.

Editor central

El area principal de la ventana es el editor markdown WYSIWYG. Aqui es donde escribes y editas documentos. El editor ocupa la mayor parte del espacio disponible y soporta formato visual: los encabezados, listas, enlaces y bloques de codigo se renderizan en tiempo real mientras escribes.

Terminal inferior

La terminal Ghostty se ubica en la parte inferior de la ventana. Es una terminal completa y nativa, no una emulacion web. Desde aqui puedes ejecutar Claude Code, comandos git, scripts y cualquier herramienta de linea de comandos.

Para mostrar u ocultar la terminal, usa el atajo:

Ctrl + `

Este atajo funciona en las tres plataformas (macOS, Windows, Linux) y es el mismo que usan otros editores como VS Code.

Status bar

La barra de estado se encuentra en la parte inferior de la ventana, debajo de la terminal. Muestra badges informativos sobre el estado actual:

• Sesion de Claude Code: indica si hay una sesion activa de Claude Code en la terminal.
• Branch git: muestra la rama actual del repositorio.
• Estado de la terminal: indica si la terminal esta activa o inactiva.

Tab bar

La barra de pestanas se ubica en la parte superior del editor. Cada archivo abierto tiene su propia pestana. Puedes tener multiples archivos abiertos simultaneamente y cambiar entre ellos haciendo click en la pestana correspondiente.

Home folder

Al lanzar Spacecake sin abrir un proyecto especifico, la app muestra el contenido de ~/.spacecake. Este es el home folder de Spacecake y sirve como espacio de notas personales no ligadas a ningun proyecto.

Dentro de esta carpeta existe un subdirectorio .app que contiene archivos internos del sistema de Spacecake. Este directorio no debe modificarse manualmente.

El home folder es util para:

• Notas rapidas que no pertenecen a ningun proyecto.
• Borradores de planes antes de moverlos al repositorio correspondiente.
• Archivos de referencia personal.

Temas

Spacecake incluye tres opciones de tema visual:

Tema	Descripcion
Dark	Fondo oscuro, ideal para sesiones largas de trabajo
Light	Fondo claro, mejor legibilidad en ambientes iluminados
Auto	Detecta la preferencia del sistema operativo y ajusta automaticamente

Para cambiar el tema, accede a la opcion desde el sidebar. El cambio se aplica inmediatamente al editor, la terminal y todos los elementos de la interfaz.

Refresh de la app

Si la interfaz se ve mal, un componente no se renderiza correctamente o el terminal no refleja el cambio de tema, puedes recargar la aplicacion con:

Plataforma	Atajo
macOS	Cmd + R
Windows / Linux	Ctrl + R

Esto recarga el contenido de la ventana sin cerrar la aplicacion. Es equivalente a un “refresh” del navegador en el contexto de Electron. Los archivos abiertos y la sesion de terminal se mantienen.

Focus al editor

Para enfocar rapidamente el editor desde cualquier parte de la interfaz (por ejemplo, si estabas en la terminal), usa:

Plataforma	Atajo
macOS	Cmd + 1
Windows / Linux	Ctrl + 1

Este atajo es util cuando alternas frecuentemente entre el editor y la terminal. En lugar de hacer click con el mouse, un solo atajo te devuelve al editor listo para escribir.

Resumen de atajos de navegacion

Accion	macOS	Windows / Linux
Toggle terminal	`Ctrl + “	`Ctrl + “
Focus editor	Cmd + 1	Ctrl + 1
Refresh app	Cmd + R	Ctrl + R

En los siguientes capitulos veremos mas atajos especificos para el editor, archivos y la terminal.

---

Siguiente: Capitulo 4: Workspaces y Archivos —>