GitViewer ⚡

GitViewer é uma extensão poderosa para o VS Code que permite visualizar, gerenciar e responder a Pull Requests (PRs) do GitHub diretamente de sua barra lateral. Ideal para revisões rápidas, acompanhamento de threads e integração com IA.

🚀 Principais Recursos

• Visualização Completa de PR: Veja título, descrição e comentários gerais sem sair do editor.
• Gestão de Threads: Comentários agrupados automaticamente em threads, separados por Pendentes e Resolvidos.
• Renderização Markdown: Suporte completo para Markdown, incluindo blocos de código com destaque de sintaxe para diffs (linhas verdes + e vermelhas -).
• Integração com IA (Fix AI): Botão dedicado para enviar sugestões do CodeRabbit direto para o chat do Cursor ou Copilot.
• Edição Direta: Edite a descrição do seu PR diretamente na interface da extensão (bloqueado em branches protegidas como staging e production).
• Atualização Inteligente: Recarregamento automático ao trocar de branch ou ao focar na janela do VS Code.
• Filtro de Bots: De-duplicação agressiva para bots como allanrobo[bot], mostrando apenas o status mais recente.
• Navegação Rápida: Links diretos para comentários no navegador GitHub.
• Busca Integrada: Suporte nativo para busca (Ctrl + F) dentro da visualização.

📋 Pré-requisitos

Node.js

Para compilar e empacotar a extensão, recomenda-se:

• Node.js v22+ (Recomendado)
• Node.js v18 (Compatível via overrides no package.json para a biblioteca undici)

Autenticação

A extensão utiliza as credenciais do seu Git local ou do VS Code. Certifique-se de estar logado no GitHub via:

• GitHub CLI (gh auth login)
• Ou via autenticação do VS Code ao abrir a extensão pela primeira vez.

🛠️ Instalação

Se você tiver o arquivo .vsix:

1. Abra o VS Code.
2. Vá em Extensions (Ctrl+Shift+X).
3. Clique nos três pontos (...) no canto superior direito.
4. Selecione Install from VSIX... e escolha o arquivo gerado.

💻 Desenvolvimento

1. Instale as dependências:

npm install

2. Compile o projeto:

npm run compile

3. Inicie o modo de desenvolvimento:

npm run dev

4. Para testar os componentes Vue.js em um navegador:

npm run vue

Isso iniciará um servidor de desenvolvimento na porta 3000 (http://localhost:3000) onde você pode visualizar e testar todos os componentes da extensão com dados mockados. A página de teste inclui:

• Todos os componentes Vue.js renderizados
• Dados mockados editáveis
• Layout com largura de 300px (igual ao painel do Cursor)
• Interface idêntica à extensão

5. Para gerar um novo pacote .vsix:

npm run vsce

⚙️ Configuração Técnica

O projeto utiliza TypeScript e comunica-se com a API do GitHub através do @octokit/rest. A interface é construída com um Webview seguro, utilizando políticas de CSP (Content Security Policy) restritivas.

Nota sobre Compatibilidade (Windows)

A extensão foi configurada para ocultar janelas de console indesejadas ao executar comandos Git no Windows (windowsHide: true).

🧪 Página de Teste Vue.js

O projeto inclui uma página de teste para desenvolvimento e visualização dos componentes Vue.js:

• Arquivo: webview/index.html
• Ponto de entrada: webview/src/test-app.ts
• Comando: npm run vue
• URL: http://localhost:3000

A página de teste carrega os componentes reais da extensão com dados mockados, permitindo:

• Visualizar todos os componentes renderizados
• Testar diferentes estados e interações
• Editar dados mockados em tempo real
• Verificar o layout e estilos

O layout é configurado para ter exatamente 300px de largura, simulando o painel lateral do Cursor/VS Code.

📄 Licença

Este projeto está sob a licença MIT. Criado por WenerSf3 (wsfonseca3@gmail.com).