feat: sistema de observação por voz - fase 1

- FAB flutuante para gravar observação
- Modal com timer + waveform animado
- Botão sair para desistir
- MediaRecorder API (webm/opus)
- Transcrição via OpenAI Whisper
- Relatório estruturado via GPT
- Salva em .md com frontmatter (data/hora/timestamp)
- Índice JSON para consulta posterior
- Rotas: transcrever, salvar, listar observações
- multer para upload de áudio

public/app.js

@@ -1968,6 +1968,183 @@ const initApp = () => {
 
   // Inicializar reconhecimento de voz
   initVoiceRecognition();
+
+  // ============================================================
+  // SISTEMA DE OBSERVAÇÃO POR VOZ
+  // ============================================================
+  const recordModal = document.getElementById('recordModal');
+  const fabRecord = document.getElementById('fabRecord');
+  const btnExitRecord = document.getElementById('btnExitRecord');
+  const btnStopRecord = document.getElementById('btnStopRecord');
+  const recordStateRecording = document.getElementById('recordStateRecording');
+  const recordStateProcessing = document.getElementById('recordStateProcessing');
+  const recordStatePreview = document.getElementById('recordStatePreview');
+  const recordTimer = document.getElementById('recordTimer');
+  const reportContent = document.getElementById('reportContent');
+  const previewDateTime = document.getElementById('previewDateTime');
+  const btnDiscardReport = document.getElementById('btnDiscardReport');
+  const btnSaveReport = document.getElementById('btnSaveReport');
+
+  let mediaRecorder = null;
+  let audioChunks = [];
+  let recordingStartTime = null;
+  let timerInterval = null;
+  let generatedReport = null;
+
+  // Abrir modal e iniciar gravação
+  if (fabRecord) {
+    fabRecord.addEventListener('click', async () => {
+      audioChunks = [];
+      generatedReport = null;
+
+      // Mostra estado inicial (gravando)
+      recordStateRecording.style.display = 'flex';
+      recordStateProcessing.style.display = 'none';
+      recordStatePreview.style.display = 'none';
+      recordModal.style.display = 'flex';
+
+      // Inicia timer
+      recordingStartTime = Date.now();
+      timerInterval = setInterval(updateTimer, 1000);
+      updateTimer();
+
+      // Solicita permissão e inicia gravação
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm;codecs=opus' });
+
+        mediaRecorder.ondataavailable = (e) => {
+          if (e.data.size > 0) audioChunks.push(e.data);
+        };
+
+        mediaRecorder.start(100); // chunk a cada 100ms
+      } catch (err) {
+        console.error('Erro ao acessar microfone:', err);
+        alert('Não foi possível acessar o microfone. Verifique as permissões.');
+        closeRecordModal();
+      }
+    });
+  }
+
+  // Atualizar timer
+  const updateTimer = () => {
+    if (!recordingStartTime) return;
+    const elapsed = Math.floor((Date.now() - recordingStartTime) / 1000);
+    const mins = Math.floor(elapsed / 60).toString().padStart(2, '0');
+    const secs = (elapsed % 60).toString().padStart(2, '0');
+    recordTimer.textContent = `${mins}:${secs}`;
+  };
+
+  // Parar gravação e processar
+  if (btnStopRecord) {
+    btnStopRecord.addEventListener('click', async () => {
+      if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+        mediaRecorder.stop();
+        mediaRecorder.stream.getTracks().forEach(t => t.stop());
+      }
+      clearInterval(timerInterval);
+
+      // Mostra processando
+      recordStateRecording.style.display = 'none';
+      recordStateProcessing.style.display = 'flex';
+
+      // Envia áudio para servidor
+      const blob = new Blob(audioChunks, { type: 'audio/webm' });
+      const formData = new FormData();
+      formData.append('audio', blob, 'recording.webm');
+
+      try {
+        const res = await fetch('/api/observacao/transcrever', {
+          method: 'POST',
+          body: formData
+        });
+        const data = await res.json();
+        generatedReport = data.report;
+        showReportPreview(data);
+      } catch (err) {
+        console.error('Erro ao processar observação:', err);
+        alert('Erro ao processar sua observação. Tente novamente.');
+        closeRecordModal();
+      }
+    });
+  }
+
+  // Mostrar prévia do relatório
+  const showReportPreview = (data) => {
+    recordStateProcessing.style.display = 'none';
+    recordStatePreview.style.display = 'flex';
+
+    const now = new Date();
+    previewDateTime.textContent = now.toLocaleString('pt-BR', {
+      day: '2-digit', month: '2-digit', year: 'numeric',
+      hour: '2-digit', minute: '2-digit'
+    });
+
+    reportContent.innerHTML = marked.parse(generatedReport || 'Relatório não disponível.');
+    reportContent.querySelectorAll('pre code').forEach(b => hljs.highlightElement(b));
+  };
+
+  // Descartar relatório
+  if (btnDiscardReport) {
+    btnDiscardReport.addEventListener('click', () => {
+      generatedReport = null;
+      closeRecordModal();
+    });
+  }
+
+  // Salvar relatório
+  if (btnSaveReport) {
+    btnSaveReport.addEventListener('click', async () => {
+      if (!generatedReport) return;
+      btnSaveReport.disabled = true;
+      btnSaveReport.textContent = 'Salvando...';
+
+      try {
+        const res = await fetch('/api/observacao/salvar', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ report: generatedReport })
+        });
+        const data = await res.json();
+        if (data.success) {
+          alert('Relatório salvo com sucesso!');
+        } else {
+          alert('Erro ao salvar: ' + (data.error || 'desconhecido'));
+        }
+      } catch (err) {
+        console.error('Erro ao salvar:', err);
+        alert('Erro ao salvar o relatório.');
+      } finally {
+        btnSaveReport.disabled = false;
+        btnSaveReport.textContent = 'Salvar';
+        closeRecordModal();
+      }
+    });
+  }
+
+  // Sair / descartar
+  if (btnExitRecord) {
+    btnExitRecord.addEventListener('click', closeRecordModal);
+  }
+
+  // Fechar modal
+  const closeRecordModal = () => {
+    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+      mediaRecorder.stop();
+      mediaRecorder.stream.getTracks().forEach(t => t.stop());
+    }
+    clearInterval(timerInterval);
+    audioChunks = [];
+    generatedReport = null;
+    recordModal.style.display = 'none';
+  };
+
+  // Fechar clicando fora
+  if (recordModal) {
+    recordModal.addEventListener('click', (e) => {
+      if (e.target === recordModal) closeRecordModal();
+    });
+  }
 };
 
 // Player de áudio personalizado global para as mídias geradas