AI Dev Panel

Uma ferramenta revolucionária para edição de aplicações web em tempo real usando IA.

🧩 Arquitetura

O projeto é um monorepo TypeScript dividido em:

• packages/core: Tipagens e contratos compartilhados.
• packages/overlay: Script injetado no navegador que fornece a interface de seleção e chat.
• packages/plugin: Plugin Vite que serve o overlay e processa as alterações no código.
• packages/cli-connector: Módulo responsável pela comunicação com CLIs de IA (Claude, OpenAI, etc).

🚀 Como usar (Demo)

1. Instale as dependências:

   npm install

2. Inicie o projeto de exemplo:

   npm run dev

3. Abra o navegador em http://localhost:3000.

4. Use o atalho Ctrl + Espaço para ativar o modo IA.

5. Selecione um elemento (ex: o botão azul) e solicite uma alteração no painel lateral.

🔥 Funcionalidades Implementadas

• [x] Overlay flutuante com suporte a seleção de elementos.
• [x] Highlight visual de elementos em hover.
• [x] Painel de chat lateral integrado.
• [x] Plugin Vite para injeção automática e Hot Reload.
• [x] Middleware de servidor para processar comandos da IA.
• [x] Mock de conector de IA com suporte a diffs.
• [x] Aplicação automática de mudanças no sistema de arquivos.

🛠️ Próximos Passos

• Integração real com claude-cli ou ollama.
• Uso de AST (Babel/TS Morph) para injeção de metadados de origem de forma robusta.
• Preview de diff antes de aplicar.
• Undo/Redo de alterações.