Como Funciona

GitScrum Studio estende seu editor de código com painéis de gestão de projetos que se comportam como abas nativas do editor. Este guia explica a arquitetura, o modelo de navegação e como os dados fluem entre a extensão e o GitScrum.

A Estrutura da Extensão

GitScrum Studio adiciona três pontos de integração ao seu editor:

1. Barra de Atividade → Ícone GitScrum → Árvore na Sidebar
2. Área do Editor → Painéis Webview (abas)
3. Barra de Status → Cronômetro Persistente

Esses três elementos trabalham juntos. A sidebar é seu hub de navegação. Os painéis são seu espaço de trabalho. O cronômetro controla o tempo independentemente de ambos.

A Árvore na Sidebar

Ao clicar no ícone do GitScrum na Barra de Atividade, uma sidebar em árvore é aberta. Ela organiza seus dados em uma hierarquia clara:

Nome do Workspace
  └─ Nome do Projeto
       ├─ Planejar
       │    ├─ Sprints
       │    ├─ User Stories
       │    └─ Standup da Equipe
       ├─ Construir
       │    └─ Quadro
       ├─ Conhecimento
       │    ├─ Wiki
       │    ├─ Discussões
       │    └─ Documentos
       └─ Controle de Tempo

Nível do Workspace

Os nós de nível superior representam seus workspaces (organizações) do GitScrum. Cada workspace contém os projetos aos quais você tem acesso com base no seu perfil.

Nível do Projeto

Ao expandir um workspace, seus projetos são revelados. Clicar em um projeto o define como ativo — isso determina quais dados todos os painéis exibem.

Grupos de Funcionalidades

Cada projeto organiza suas funcionalidades em três grupos lógicos:

Controle de Tempo fica no nível raiz do projeto, pois abrange todas as outras funcionalidades.

Painéis Webview

Ao clicar em qualquer item da sidebar, um painel webview é aberto na área do editor. Esses painéis:

• Renderizam como abas do editor — mova, divida, fixe ou feche como qualquer aba de arquivo
• Exibem interfaces ricas — quadros Kanban, gráficos, formulários e tabelas
• Comunicam bidirecionalmente — ações no painel disparam chamadas à API; dados da API atualizam o painel
• Atualizam automaticamente — no intervalo configurado (padrão: 5 minutos)

Ciclo de Vida do Painel

1. Clique em um item da sidebar → o painel abre (ou recebe foco se já estiver aberto)
2. O painel carrega dados da API do GitScrum
3. Usuário interage → ações enviam mensagens para a extensão
4. A extensão processa → chama a API, atualiza o painel com os resultados
5. Atualização automática → recarga periódica de dados em segundo plano

Reutilização de Painéis

Os painéis são indexados por workspace e projeto. Abrir o Quadro para o mesmo projeto duas vezes foca no painel existente em vez de criar uma duplicata. Abrir o Quadro para um projeto diferente cria um novo painel.

O Cronômetro na Barra de Status

Um ícone de relógio fica na barra de status na parte inferior do editor. Ele é sempre visível, independentemente de qual painel ou arquivo esteja ativo.

Estados do Cronômetro

Persistência do Cronômetro

O cronômetro salva seu estado no armazenamento global do editor a cada 60 segundos. Isso significa:

• Feche o editor → o cronômetro continua quando você reabrir
• Reinicie o computador → o cronômetro retoma do último estado salvo
• Sincronização com o servidor → na inicialização, a extensão verifica se há um cronômetro ativo no servidor e sincroniza

Menu QuickPick

Ao clicar no cronômetro da barra de status, um menu QuickPick é aberto com opções dependentes do contexto:

Quando inativo:

• ▶ Iniciar Cronômetro — abre um seletor de tarefas
• 📜 Ver Entradas de Tempo — abre o painel de Controle de Tempo
• 📊 Abrir Painel de Controle de Tempo — abre análises

Quando ativo:

• ⏹ Parar Cronômetro — registra a entrada de tempo com comentário opcional
• 🔄 Trocar Tarefa — para o cronômetro atual, inicia um novo
• 🗑 Descartar Cronômetro — cancela sem salvar
• 📜 Ver Entradas de Tempo
• 📊 Abrir Painel de Controle de Tempo

Fluxo de Dados

Todos os dados fluem pela API REST do GitScrum. A extensão é um cliente — ela lê e grava dados por meio de requisições HTTP autenticadas.

Painel do Editor → Backend da Extensão → API GitScrum → Banco de Dados
     ↑                    ↓
     └──── Resposta ──────┘

Autenticação

A extensão armazena seu token de autenticação usando a SecretStorage API do editor. Toda requisição à API inclui esse token. Quando o token expira ou você faz logout, a sidebar exibe opções de login.

Comunicação com a API

Cada painel tem uma classe de serviço dedicada que gerencia suas chamadas à API:

Atualização Automática

Os painéis atualizam automaticamente em intervalos regulares. Clique no botão de atualizar no cabeçalho de qualquer painel para uma atualização imediata.

O Drawer de Tarefa

O drawer de tarefa é um componente compartilhado que aparece em múltiplos painéis — Quadro, Sprints, User Stories e Controle de Tempo. Ao clicar em uma tarefa em qualquer um desses painéis, o drawer abre como um painel lateral com capacidades completas de edição:

O drawer oferece uma experiência de edição consistente independentemente de qual painel você abriu a tarefa.

Acesso Baseado em Perfil

A extensão respeita seu perfil no workspace do GitScrum. O que você vê e pode fazer depende das suas permissões:

Algumas ações — como abrir Configurações do Projeto pela sidebar — estão disponíveis apenas para Donos de Agência. Se uma funcionalidade aparecer desabilitada, verifique seu perfil na aplicação web do GitScrum.

Paleta de Comandos

Todas as funcionalidades são acessíveis pela Paleta de Comandos (Ctrl+Shift+P / Cmd+Shift+P). Digite GitScrum: para ver todos os comandos:

Você pode definir atalhos de teclado personalizados para qualquer um desses comandos pelo editor de Atalhos de Teclado (Ctrl+K Ctrl+S / Cmd+K Cmd+S).

Documentação Relacionada

• Início Rápido — Instale e configure em 2 minutos
• Primeiros Passos — Configuração completa com todas as opções de autenticação
• Quadro Kanban — Exploração detalhada das funcionalidades do quadro
• Controle de Tempo — Fluxos do cronômetro e análises