📜 Code Panel (Interpretador e Assistente)
O painel direito da simulação. Responsável pela leitura do código, gestão de visualização, seleção de operações e integração avançada com Inteligência Artificial.
Visão Geral da Interface
O Code Panel é o cérebro lógico que dita o que o motor 3D vai desenhar. À medida que a simulação avança, este painel acompanha o processo, iluminando a linha exata de código que a máquina está a executar naquele milissegundo.
Ferramentas de Análise
Mais do que um simples leitor de texto, o utilizador pode abrir os Detalhes para rever toda a configuração (ferramenta, velocidades), ajustar o visual do código para melhor leitura, ou carregar rapidamente programas de Demonstração para testar a máquina.
🎓 Formato Educacional Interativo: Assistente Gemini
O pináculo da ajuda didática da plataforma encontra-se no fundo deste painel:
- Explicar Linha Atual: O aluno pausa a simulação e clica neste botão. O sistema abre um modal onde a IA descodifica a linha de código atualmente iluminada, traduzindo coordenadas e comandos técnicos para linguagem acessível.
Propósito: Fornecer ao utilizador opções para personalizar a interface de leitura do código.
- Botão azul "Viewer" no canto superior esquerdo do painel.
- Aguarda estrutura do modal. Deverá permitir alterar tamanho da fonte, cores de sintaxe (Highlighting) ou alternar entre Dark/Light mode específico do painel.
Propósito: Navegar entre as várias operações ou programas injetados na simulação atual.
- Dropdown central "-- Opções da Operação --".
- Lógica de *onChange*: Ao selecionar uma nova opção, o painel deve buscar e renderizar o código correspondente via API sem fazer refresh à página inteira.
Propósito: Apresentar o consolidado técnico da operação atual (Máquina, Material, Ferramenta).
- Botão azul "i Details" no canto superior direito do painel.
- O modal necessitará de agrupar e exibir dados relacionais que vêm dos Steps anteriores (1 a 4).
Propósito: Renderizar o texto do programa com sintaxe colorida e manter o Highlight sincronizado com a execução do motor 3D.
- Área de texto central com scroll vertical.
- A linha ativa recebe um fundo branco de destaque (ex:
N110 G91 X10.1 Y-10.1). - Comentários formatados a cinzento escuro para legibilidade.
- Necessita de uma função
scrollToActiveLine()fluida que intercete o índice atual fornecido pelo Parser e mantenha a div destacada sempre visível no centro do contentor.
Propósito: Permitir o carregamento imediato de códigos de demonstração predefinidos, bypassando a necessidade de configurar todo o CRUD dos Steps 1 ao 5.
- Botão roxo horizontal "DEMO" na zona inferior do painel.
- O modal deve expor botões ou uma lista com peças didáticas (ex: "Peça Complexa Didática"). Ao clicar, injeta o *mock data* diretamente no Code Section e no motor 3D.
Propósito: Usar Inteligência Artificial para descodificar o bloco de comando atual e transformá-lo num tutorial dinâmico para o aluno.
- Botão roxo horizontal "✨ Explicar Linha Atual (Gemini)" no rodapé.
- A função ativada pelo clique deve capturar o texto da linha destacada no DOM.
- Deverá construir um Prompt contextual (adicionando dados de background como o estado atual da máquina e a ferramenta ativa) e enviá-lo via endpoint para a API do Gemini.