Cómo Funciona

GitScrum Studio extiende tu editor de código con paneles de gestión de proyectos que se comportan como pestañas nativas del editor. Esta guía explica la arquitectura, el modelo de navegación y cómo fluyen los datos entre la extensión y GitScrum.

Estructura de la extensión

GitScrum Studio agrega tres puntos de integración a tu editor:

1. Barra de Actividad → Icono GitScrum → Árbol del Panel Lateral
2. Área del Editor → Paneles Webview (pestañas)
3. Barra de Estado → Temporizador Persistente

Estos tres elementos trabajan juntos. El panel lateral es tu centro de navegación. Los paneles son tu espacio de trabajo. El temporizador registra tiempo de forma independiente a ambos.

El árbol del panel lateral

Al hacer clic en el icono de GitScrum en la Barra de Actividad se abre un panel lateral con vista de árbol. Organiza tus datos en una jerarquía clara:

Nombre del Workspace
  └─ Nombre del Proyecto
       ├─ Plan
       │    ├─ Sprints
       │    ├─ User Stories
       │    └─ Team Standup
       ├─ Build
       │    └─ Board
       ├─ Knowledge
       │    ├─ Wiki
       │    ├─ Discussions
       │    └─ Documents
       └─ Time Tracking

Nivel de workspace

Los nodos de nivel superior representan tus workspaces de GitScrum (organizaciones). Cada workspace contiene los proyectos a los que tienes acceso según tu rol.

Nivel de proyecto

Al expandir un workspace se revelan sus proyectos. Al hacer clic en un proyecto se establece como activo — esto determina qué datos muestran todos los paneles.

Grupos de funcionalidades

Cada proyecto organiza sus funcionalidades en tres grupos lógicos:

Time Tracking se ubica en el nivel raíz del proyecto ya que abarca todas las demás funcionalidades.

Paneles webview

Al hacer clic en cualquier elemento del panel lateral se abre un panel webview en el área del editor. Estos paneles:

• Se renderizan como pestañas del editor — muévelos, divídelos, fíjalos o ciérralos como cualquier pestaña de archivo
• Muestran interfaces enriquecidas — tableros Kanban, gráficos, formularios y tablas
• Se comunican bidireccionalmente — las acciones en el panel activan llamadas a la API; los datos de la API actualizan el panel
• Se actualizan automáticamente — al intervalo configurado (por defecto: 5 minutos)

Ciclo de vida del panel

1. Clic en elemento del panel lateral → el panel se abre (o se enfoca si ya está abierto)
2. El panel carga datos desde la API de GitScrum
3. El usuario interactúa → las acciones envían mensajes a la extensión
4. La extensión procesa → llama a la API, actualiza el panel con los resultados
5. Actualización automática → recarga periódica de datos en segundo plano

Reutilización de paneles

Los paneles se identifican por workspace y proyecto. Abrir el Board para el mismo proyecto dos veces enfoca el panel existente en lugar de crear un duplicado. Abrir el Board para un proyecto diferente crea un nuevo panel.

El temporizador de la barra de estado

Un icono de reloj se ubica en la barra de estado en la parte inferior de tu editor. Siempre es visible, sin importar qué panel o archivo esté activo.

Estados del temporizador

Persistencia del temporizador

El temporizador guarda su estado en el almacenamiento global del editor cada 60 segundos. Esto significa:

• Cierra el editor → el temporizador continúa cuando lo reabres
• Reinicia tu computadora → el temporizador se reanuda desde el último estado guardado
• Sincronización con el servidor → al iniciar, la extensión verifica el servidor en busca de un temporizador activo y sincroniza

Menú QuickPick

Al hacer clic en el temporizador de la barra de estado se abre un menú QuickPick con opciones dependientes del contexto:

Cuando está inactivo:

• ▶ Start Timer — abre un selector de tareas
• 📜 View Time Entries — abre el panel de Seguimiento de Tiempo
• 📊 Open Time Tracking Panel — abre analíticas

Cuando está activo:

• ⏹ Stop Timer — registra la entrada de tiempo con comentario opcional
• 🔄 Switch Task — detiene el temporizador actual, inicia uno nuevo
• 🗑 Discard Timer — cancela sin guardar
• 📜 View Time Entries
• 📊 Open Time Tracking Panel

Flujo de datos

Todos los datos fluyen a través de la API REST de GitScrum. La extensión es un cliente — lee y escribe datos a través de solicitudes HTTP autenticadas.

Panel del Editor → Backend de la Extensión → API de GitScrum → Base de Datos
     ↑                    ↓
     └── Respuesta ───────┘

Autenticación

La extensión almacena tu token de autenticación usando la API de SecretStorage del editor. Cada solicitud a la API incluye este token. Cuando el token expira o cierras sesión, el panel lateral muestra las opciones de inicio de sesión.

Comunicación con la API

Cada panel tiene una clase de servicio dedicada que maneja sus llamadas a la API:

Actualización automática

Los paneles se actualizan automáticamente a intervalos regulares. Haz clic en el botón de actualizar en el encabezado de cualquier panel para una actualización inmediata.

El panel de tarea

El panel de tarea es un componente compartido que aparece en múltiples paneles — Board, Sprints, User Stories y Time Tracking. Cuando haces clic en una tarea en cualquiera de estos paneles, el panel se abre como un panel lateral con capacidades completas de edición:

El panel de tarea proporciona una experiencia de edición consistente sin importar desde qué panel abriste la tarea.

Acceso basado en roles

La extensión respeta tu rol en el workspace de GitScrum. Lo que ves y puedes hacer depende de tus permisos:

Algunas acciones — como abrir la Configuración del Proyecto desde el panel lateral — solo están disponibles para Agency Owners. Si una funcionalidad aparece deshabilitada, verifica tu rol en la aplicación web de GitScrum.

Paleta de Comandos

Cada funcionalidad es accesible desde la Paleta de Comandos (Ctrl+Shift+P / Cmd+Shift+P). Escribe GitScrum: para ver todos los comandos:

Puedes asignar atajos de teclado personalizados a cualquiera de estos comandos a través del editor de Atajos de Teclado (Ctrl+K Ctrl+S / Cmd+K Cmd+S).

Documentación relacionada

• Inicio Rápido — Instala y configura en 2 minutos
• Primeros Pasos — Configuración completa con todas las opciones de autenticación
• Tablero Kanban — Guía detallada de las funcionalidades del tablero
• Seguimiento de Tiempo — Flujos de trabajo del temporizador y analíticas