skills/conferencia-regulatoria/assets/painel-conferencia.html

<div id="conferencia-console">
  <div class="conferencia-heading"><div><h2>Conferência beta</h2><p class="text-muted">Revisão regulatória preventiva</p></div><i data-lucide="scan-text" aria-hidden="true"></i></div>
  <hr>
  <div class="conferencia-section">
    <label class="form-label" for="conferencia-contexto">Qual contexto vamos trabalhar?</label>
    <select id="conferencia-contexto" class="form-select"><option value="">Selecionar contexto</option><option>Adequa · Apsen</option><option>Floracol · Apsen</option><option>Motilex · Apsen</option><option>Mag-B · Apsen</option><option>Mais de uma marca</option><option>Outro cliente ou setor</option><option>Ainda não definido</option></select>
  </div>
  <div class="conferencia-section">
    <h3>O que você precisa fazer?</h3>
    <div class="conferencia-actions" role="group" aria-label="Função de trabalho">
      <button type="button" class="btn" data-mode="social" aria-pressed="true"><i data-lucide="panels-top-left" aria-hidden="true"></i>Revisar social</button>
      <button type="button" class="btn" data-mode="titulo" aria-pressed="false"><i data-lucide="type" aria-hidden="true"></i>Melhorar título e CTA</button>
      <button type="button" class="btn" data-mode="campanha" aria-pressed="false"><i data-lucide="layers" aria-hidden="true"></i>Avaliar campanha</button>
      <button type="button" class="btn" data-mode="criar" aria-pressed="false"><i data-lucide="pen-line" aria-hidden="true"></i>Criar com briefing</button>
    </div>
    <details class="conferencia-more"><summary>Outras funções</summary><div class="conferencia-actions">
      <button type="button" class="btn" data-mode="apoio" aria-pressed="false">Revisar texto de apoio</button>
      <button type="button" class="btn" data-mode="roteiro" aria-pressed="false">Revisar roteiro</button>
      <button type="button" class="btn" data-mode="defesa" aria-pressed="false">Analisar defensabilidade</button>
      <button type="button" class="btn" data-mode="dossie" aria-pressed="false">Atualizar dossiê</button>
    </div></details>
  </div>
  <div class="conferencia-detail" aria-live="polite"><h3 id="conferencia-mode-title">Revisar social</h3><p id="conferencia-mode-help" class="text-muted">Título, legenda, visual e CTA examinados em conjunto.</p></div>
  <div class="conferencia-section"><label class="form-label" for="conferencia-context">Contexto <span class="text-muted">· opcional</span></label><textarea id="conferencia-context" class="form-control" rows="3" placeholder="Ex.: marca, produto, setor, canal e público. Quero revisar um carrossel."></textarea></div>
  <div class="conferencia-footer"><p class="text-small text-muted">Envie a peça ou o briefing na conversa.</p><button class="btn btn-primary" type="button" id="conferencia-start">Iniciar revisão<i data-lucide="arrow-up-right" aria-hidden="true"></i></button></div>
  <p class="text-small text-muted">Iniciativa de Martin Stuchi Montingelli</p>
  <p id="conferencia-feedback" class="text-small" role="status" aria-live="polite"></p>
  <div id="conferencia-fallback" hidden><label for="conferencia-request" class="form-label">Solicitação pronta para copiar na conversa</label><textarea id="conferencia-request" class="form-control" rows="5" readonly></textarea></div>
</div>
<style>
#conferencia-console .conferencia-heading{display:flex;justify-content:space-between;align-items:center;gap:24px}
#conferencia-console .conferencia-heading h2{margin:0}
#conferencia-console .conferencia-heading p{margin:4px 0 0}
#conferencia-console .conferencia-section{margin-top:24px}
#conferencia-console .conferencia-section h3{margin:0 0 12px}
#conferencia-console .conferencia-actions{display:flex;flex-wrap:wrap;gap:10px}
#conferencia-console .conferencia-more{margin-top:16px}
#conferencia-console summary{color:var(--muted-foreground);text-decoration:underline;text-underline-offset:4px}
#conferencia-console .conferencia-more .conferencia-actions{margin-top:12px}
#conferencia-console .conferencia-detail{margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
#conferencia-console .conferencia-detail h3{margin:0 0 6px}
#conferencia-console .conferencia-detail p{margin:0}
#conferencia-console .conferencia-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:20px}
#conferencia-console #conferencia-feedback:empty{display:none}
#conferencia-console #conferencia-fallback{margin-top:16px}
</style>
<script>
(()=>{
const root=document.getElementById('conferencia-console');
const get=id=>root.querySelector('#'+id);
const modes={
 social:['Revisar social','Título, legenda, visual e CTA examinados em conjunto.','Quero revisar um post ou carrossel. Analise os riscos e proponha uma versão melhor.','Iniciar revisão'],
 titulo:['Melhorar título e CTA','Alternativas claras que preservam a ideia criativa e respeitam o limite de caracteres.','Quero melhorar um título ou CTA, reduzindo o risco regulatório e preservando a ideia criativa.','Trabalhar o texto'],
 campanha:['Avaliar campanha','Análise por peça, coerência do conjunto e correções consolidadas.','Quero revisar uma campanha completa e receber os riscos por peça, as correções e as versões sugeridas.','Iniciar avaliação'],
 criar:['Criar com briefing','Propostas completas a partir de informações e benefícios sustentáveis.','Quero criar uma comunicação a partir de um briefing, usando apenas benefícios e informações sustentáveis para a marca.','Começar criação'],
 apoio:['Revisar texto de apoio','Texto completo revisado, com as justificativas essenciais.','Quero revisar um texto de apoio, legenda longa ou página e receber uma redação corrigida com as justificativas essenciais.','Revisar texto'],
 roteiro:['Revisar roteiro','Fala, cena, depoimento e identificação publicitária no mesmo escopo.','Quero revisar um roteiro de vídeo ou conteúdo de influenciador, incluindo fala, cena, depoimento e identificação publicitária.','Revisar roteiro'],
 defesa:['Analisar defensabilidade','Fundamentos, argumentos contrários e limites da proposta.','Quero avaliar se uma proposta de comunicação tem sustentação regulatória e jurídica, incluindo argumentos contrários e alternativas de menor risco.','Analisar proposta'],
 dossie:['Atualizar dossiê','Identifique fatos novos, conflitos e mudanças para as próximas revisões.','Quero incorporar uma nova matriz, rótulo ou orientação do cliente e identificar o que muda nas próximas revisões.','Examinar documento']
};
let selected='social';
function render(){
 root.querySelectorAll('[data-mode]').forEach(b=>b.setAttribute('aria-pressed',String(b.dataset.mode===selected)));
 get('conferencia-mode-title').textContent=modes[selected][0];get('conferencia-mode-help').textContent=modes[selected][1];get('conferencia-start').textContent=modes[selected][3];
 if(['apoio','roteiro','defesa','dossie'].includes(selected))root.querySelector('details').open=true;
}
root.querySelectorAll('[data-mode]').forEach(b=>b.addEventListener('click',()=>{selected=b.dataset.mode;get('conferencia-feedback').textContent='';get('conferencia-fallback').hidden=true;render()}));
get('conferencia-start').addEventListener('click',async()=>{
 const brand=get('conferencia-contexto').value,context=get('conferencia-context').value.trim();
 const prompt='Use a habilidade conferencia-regulatoria do plugin Conferência beta. '+modes[selected][2]+(brand?' Contexto selecionado: '+brand+'.':' Contexto ainda não informado.')+(context?' Contexto fornecido: '+context:'')+' Aproveite os dados e anexos já presentes na conversa. Se faltar material, peça apenas a peça ou briefing e os dados que mudem a análise. Não altere a configuração do plugin.';
 const button=get('conferencia-start');button.disabled=true;
 try{
 if(!window.openai||typeof window.openai.sendFollowUpMessage!=='function')throw new Error('bridge-unavailable');
 await window.openai.sendFollowUpMessage({prompt,title:modes[selected][0]+' · Conferência beta'});
 get('conferencia-feedback').textContent='Solicitação preparada. Continue pela conversa.';
 }catch(error){get('conferencia-request').value=prompt;get('conferencia-fallback').hidden=false;get('conferencia-feedback').textContent='O envio direto não está disponível aqui. Copie a solicitação abaixo e envie na conversa.'}
 finally{button.disabled=false}
});
render();
})();
</script>