REQ-240 — Grande Varredura, Auditoria Profunda e Harmonização Global do Design System Tailwind em Todos os Módulos (Core & Site)

• Status: ready-for-intake

• Modo de Autonomia: autonomo_monitorado (Flagship / Deep Reasoning — Opus 5.5)

• Lote Alvo Core: BATCH-249 (conn2flow)

• Lote Alvo Site: BATCH-100 (conn2flow-site)

• Data de Criação: 2026-10-05

• Origem: Auditoria estratégica humana e necessidade de consolidação de qualidade após a migração das últimas 30 requisições para Tailwind CSS.

• Repositórios Alvo:

  • Core: conn2flow em [REDACTED]

  • Site: conn2flow-site em [REDACTED]

1. Visão Geral & Justificativa Estratégica

Ao longo das últimas 30 requisições (Core req-210 a 239; Site REQ-086 a 105), os módulos administrativos de ambos os repositórios foram migrados do legado Fomantic UI para o moderno Tailwind CSS.

Embora as fundações, o Dashboard V3.3 e a TopBar compartilhada estejam plenamente aprovados e operacionais, a entrega fragmentada entre múltiplos agentes gerou nuances visuais divergentes de um módulo para outro:

• Ícones Lucide Ausentes: Círculos pretos vazios ou botões sem pictograma visível por falta de tags corretas ou atributos ausentes.

• Abas Desconectadas: Telas usando variações antigas de abas, algumas com gaps desconectados da caixa de conteúdo e outras sem estado ativo evidente.

• Cards e Contrastes: Telas com fundos cinzas opacos ou seções transparentes sem fundo branco sólido (bg-white border rounded-xl).

• Controles Não Padronizados: Selects nativos do HTML crus sem o componente c2fc-campo-selecao, inputs sem classes padronizadas e tooltips cortados por z-index.

• Alertas e Mensagens de Validação: Textos de erro aparecendo com bullets HTML colados na margem esquerda em vez do componente oficial c2fc-alerta.

? Objetivo Primário Desta Missão:

Conduzir uma varredura sistemática e exaustiva em todos os módulos administrativos de ambos os repositórios, identificando e corrigindo todos os defeitos de conformidade visual e usabilidade, entregando um acabamento uniforme, limpo e profissional (pixel-perfect).

2. Pilares de Conformidade a Auditar e Padronizar

O modelo deve percorrer cada módulo aplicando estritamente os 6 pilares de conformidade do Design System Conn2Flow:

Pilar 1: Ícones Lucide & Tooltips Semânticos

• Todo botão ou elemento informativo com ícone deve renderizar o SVG Lucide canônico: <i data-lucide="..." class="size-4"></i> (ou size-5).

• Eliminar 100% dos círculos pretos vazios e pictogramas invisíveis.

• Botões de ação icon-only (ex: editar, excluir, clonar, subir, descer) devem possuir dicas acessíveis com data-c2f-dica="..." ou atributo title funcional, garantindo que o tooltip flutue com z-index adequado sem ser cortado pelo container pai.

Pilar 2: Navegação por Abas Canônicas (c2fc-abas)

• Todas as telas com abas devem adotar a barra canônica:

  <nav class="flex flex-wrap gap-2 border-b border-slate-200 pb-0" role="tablist">
    <!-- Aba ativa -->
    <button class="inline-flex items-center gap-2 border-b-2 border-sky-600 px-4 py-2.5 text-sm font-semibold text-sky-700 -mb-px">...</button>
    <!-- Aba inativa -->
    <button class="inline-flex items-center gap-2 border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-slate-500 hover:text-slate-700 hover:border-slate-300">...</button>
  </nav>

• A barra de abas deve conectar-se fluidamente ao container de conteúdo imediatamente abaixo (sem margens ou gaps espúrios que criem sensação de desconexão).

Pilar 3: Estrutura em Cards Brancos Sólidos

• Formulários, listas e seções de configuração devem ser envelopados no container padrão: bg-white border border-slate-200 rounded-xl shadow-sm p-4 sm:p-6 space-y-4

• Eliminar fundos transparentes sobre layouts cinzas e caixas com bordas excessivas ou cores herdadas do Fomantic.

Pilar 4: Controles de Formulário e Mensagens de Validação

• Selects: Usar <select class="c2fc-campo-selecao ..."> ou o componente padronizado em todos os selects do módulo.

• Inputs: Padronizar inputs de texto com classes uniformes (c2fc-campo-texto ou utilities consistentes: w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 focus:border-sky-500 focus:ring-2 focus:ring-sky-500/20).

• Alertas: Mensagens de aviso, erro e sucesso devem utilizar o componente oficial: c2fc-alerta c2fc-alerta-erro (ou sucesso/info), com padding adequado, ícone Lucide explicativo e sem bullets HTML (<li>) colados à esquerda.

Pilar 5: Tabelas de Listagem e Ações em Linha

• Cabeçalhos de tabela: bg-slate-50 text-xs font-semibold text-slate-500 uppercase tracking-wider.

• Linhas: border-b border-slate-100 hover:bg-slate-50/50 transition-colors.

• Células de ação (botões no final da linha): botões compactos e alinhados horizontalmente (flex items-center gap-1.5), sem quebras de linha indesejadas.

Pilar 6: Responsividade & Proteção Mobile (390px)

• Garantir que formulários e tabelas adaptem-se a telas estreitas (390px / smartphone) sem gerar scroll horizontal de página inteira.

• Ocultar colunas secundárias de tabelas em mobile quando apropriado (hidden md:table-cell).

• Inputs invisíveis de upload (como em upload de arquivos) devem ter dimensões contidas (w-0 h-0 opacity-0 overflow-hidden) para não vazar a largura do viewport.

3. Inventário Sistemático de Módulos para Varredura

O agente deve auditar e harmonizar os módulos dos dois repositórios:

A. Módulos Core ([REDACTED]):

1. Páginas & Conteúdo: admin-paginas, admin-layouts, admin-componentes, admin-templates, pages-index.

2. Família Publisher: publisher, publisher-highlights, publisher-index, publisher-pages.

3. Módulos de Sistema & IA: admin-ia, admin-modos-ia, admin-prompts-ia, admin-environment, admin-cron, admin-plugins, admin-atualizacoes, cookie-consent, variables.

4. Módulos de Mídia, Arquivos e Dados: admin-arquivos, admin-categorias, galleries, forms, forms-search, forms-submissions, menus, contatos.

5. Usuários e Governança: usuarios, usuarios-perfis, perfil-usuario, modulos, modulos-grupos, modulos-operacoes.

B. Módulos Site ([REDACTED]):

1. E-commerce & Catálogo: products, products-index, product-types, product-reviews, orders, my-orders, sales-reports, coupons, shipping-methods, gateways-pagamentos, checkout, store.

2. Assinaturas: subscriptions, subscriptions-plans, subscriptions-config, subscriptions-status, subscriptions-service-types, subscriptions-service-stages, user-subscription.

3. 3D, Social e Operações: 3d-catalog, 3d-catalog-groups, 3d-catalog-items, social-connections, social-apps, publisher-social-media, presentations, host-manager, host-user-manager, analytics-manager.

4. Marketplace & Documentação: marketplace, marketplace-admin, affiliates, affiliate-area, documentation, modulos-grupos-distribuido.

4. Regras Invioláveis de Governança e Não-Regressão

1. Preservação de Ganchos JS & IDs:

   • NUNCA remover nem alterar IDs de formulários, seletores de AJAX ou classes prefixadas com _gestor- (ex: _gestor-campo-..., _gestor-btn-...). Essas classes e IDs conectam a lógica JavaScript legada e moderna.

2. Sem Commits Globais:

   • Proibição absoluta de git add -A ou git add .. Sempre adicionar os arquivos específicos de cada lote ou módulo.

3. Validação Contínua por Testes:

   • Os testes unitários existentes de PHPUnit e Vitest em ambos os repositórios devem permanecer 100% verdes após as intervenções.

4. Compilação Oficial Sequencial:

   • Executar o pipeline oficial para revalidar e compilar:

     php cli/c2f.php project:update-all [REDACTED] --confirmar-remoto

5. Relatórios e Evidências:

   • Registrar as evidências detalhadas de antes/depois nos lotes oficiais:

     • Core: sdd/implementation/BATCH-249.md

     • Site: sdd/implementation/BATCH-100.md

5. Live Todo List da Missão

Etapa 1 — Varredura e Harmonização no Core (conn2flow):

• [ ] Módulos de Conteúdo (admin-paginas, admin-layouts, admin-componentes, admin-templates, pages-index).

• [ ] Família Publisher (publisher, publisher-highlights, publisher-index, publisher-pages).

• [ ] Módulos de IA e Sistema (admin-ia, admin-modos-ia, admin-prompts-ia, admin-cron, admin-plugins, admin-atualizacoes, cookie-consent, variables).

• [ ] Mídia e Formulários (admin-arquivos, admin-categorias, galleries, forms, forms-search, forms-submissions, menus, contatos).

• [ ] Usuários e Permissões (usuarios, usuarios-perfis, perfil-usuario, modulos, modulos-grupos, modulos-operacoes).

Etapa 2 — Varredura e Harmonização no Site (conn2flow-site):

• [ ] E-commerce (products, products-index, product-types, product-reviews, orders, my-orders, sales-reports, coupons, shipping-methods, gateways-pagamentos, checkout, store).

• [ ] Assinaturas (subscriptions, subscriptions-plans, subscriptions-config, subscriptions-status, subscriptions-service-types, subscriptions-service-stages, user-subscription).

• [ ] 3D, Social e Operações (3d-catalog, 3d-catalog-groups, 3d-catalog-items, social-connections, social-apps, publisher-social-media, presentations, host-manager, host-user-manager, analytics-manager).

• [ ] Marketplace e Documentação (marketplace, marketplace-admin, affiliates, affiliate-area, documentation, modulos-grupos-distribuido).

Etapa 3 — Validação Integrada & Evidências:

• [ ] Testes Vitest e PHPUnit verdes em Core e Site.

• [ ] Execução com saída 0 do pipeline oficial ./c2f project:update-all [REDACTED] --confirmar-remoto.

• [ ] Preenchimento dos relatórios de evidências em BATCH-249.md (Core) e BATCH-100.md (Site).

6. Adendo do Engenheiro Chefe (2026-10-05, durante a execução)

Pedido feito no chat com o lote em andamento, para ser atendido dentro do BATCH-249:

• admin-atualizacoes — interface gráfica: melhorar a apresentação da tela de atualizações do sistema.

• admin-atualizacoes — controles e opções: rever os controles e as opções oferecidos na tela com base no que a atualização do sistema já faz hoje (req-197 a req-201: trava de deploy, backup, snapshot, verificação, rollback, choques e execução em segundo plano).

Live Todo List do adendo

• [x] Levantar o que o atualizador oferece e o que a tela expõe.

• [x] Redesenhar a tela na folha do Design System (cards, abas, alertas, tabelas, 390px).

• [x] Expor ou ajustar os controles e opções que fizerem sentido, sem mudar o contrato do atualizador.

• [x] Testes e evidências no BATCH-249.

7. Segundo adendo do Engenheiro Chefe (2026-10-05, durante a execução)

Pedido feito no chat com o lote em andamento:

• O sistema tem dois módulos de arquivos: arquivos (conn2flow-site/gestor/modulos/arquivos, antigo) e admin-arquivos (conn2flow/gestor/modulos/admin-arquivos, do core, mais moderno).

• Manter só o admin-arquivos como o único módulo de arquivos do sistema e aposentar o arquivos.

• Levar para o admin-arquivos os recursos que hoje só existem no arquivos.

• Liberdade para melhorias visuais e funcionalidades novas no admin-arquivos.

• Relatório parcial sem interromper a execução.

Live Todo List do segundo adendo

• [x] Comparar os dois módulos: recursos exclusivos do arquivos e quem ainda depende dele.

• [x] Portar para o admin-arquivos o que faltar.

• [x] Redirecionar os pontos que chamam arquivos e aposentar o módulo antigo.

• [x] Melhorias visuais e funcionais no admin-arquivos.

• [x] Testes, evidências e relatório parcial.