## Goal

Correções a serem feitos no CMS para melhoria de UX:
1.  Nos módulos de conexão (V2/Modules/Conexao/*), a interface de criação e edição de cadastros deve sofrer atualizações:
1.1. A área interativa de redes sociais deve começar já aberta com as 3 redes [linkeding, facebook, instagram] para preenchimento
1.2. A rede social "site" dever sair dessa listagem e ser integrada em um bloco de input independente, para representar o site da unidade
1.3. As tags devem ser selecionáveis da mesma forma, com histórico local ao módulo indicando as tags já criadas
1.4. Deve existir na página index desses módulos um botão que abra um modal para gerenciar as tags já criadas, podendo remover tags ou adicionar
1.4.1 Ao excluir uma tag, todos os elementos que possuem essa tag devem passar para tag reservada "Geral"
1.4.2 Deve-se criar a tag reservada "Geral", a qual não pode ser excluída
1.5. O portal público não deve ser impactado, permanecendo com a exibição do site de maneira independente no bloco de informações e redes sociais ordenadas de maneira fixa e previsível
1.6. Todos os links para acessos externos devem ser altamente otimizados, conforme este braisntorm:

```md
# brainstorm

🚀 O Modelo Completo e Recomendado
html

<a href="https://www.exemplo.com/pagina-destino?utm_source=meusite&utm_medium=link&utm_campaign=artigo_xyz"
   target="_blank"
   rel="noopener noreferrer nofollow"
   hreflang="pt"
   title="Saiba mais sobre [assunto] no site Exemplo (abre em nova aba)"
   aria-label="Saiba mais sobre [assunto] no site Exemplo (abre em nova aba)">
   texto âncora descritivo
</a>

🔐 1. Atributos Obrigatórios para target="_blank"
Atributo	Valor	Finalidade
target	"_blank"	Abre o link em uma nova aba ou janela, conforme sua solicitação.
rel	"noopener"	Segurança: impede que a página destino acesse a página original via window.opener, prevenindo o ataque de reverse tabnabbing.
rel	"noreferrer"	Privacidade: impede o envio do cabeçalho HTTP Referer, ocultando a origem do clique.

    Nota importante: Navegadores modernos (Chrome 88+, Firefox 79+) já aplicam o noopener automaticamente em links com target="_blank". No entanto, por segurança e compatibilidade, é altamente recomendado manter ambos explicitamente.

📈 2. Atributos para SEO e Controle de Rastreamento

O atributo rel também é usado para sinalizar aos mecanismos de busca como eles devem tratar o link:
Valor rel	Quando usar
"nofollow"	Para links pagos, não-endossados ou de fontes não confiáveis. O Google trata como uma sugestão para não passar autoridade.
"sponsored"	Para links patrocinados ou publicitários (substitui o nofollow para este fim).
"ugc"	Para conteúdo gerado por usuários, como comentários e fóruns.
Nenhum (follow)	Para links para sites confiáveis e relevantes, onde você deseja "passar" autoridade (recomendado para a maioria dos casos).

Dica: O uso de nofollow não impacta negativamente seu próprio SEO, apenas indica ao Google como lidar com o link de saída.
♿ 3. Atributos para Acessibilidade
Atributo	Finalidade
title	Fornece um texto informativo exibido ao passar o mouse. Importante: deve complementar, e não repetir, o texto âncora.
aria-label	Fornece um nome acessível para leitores de tela quando o texto visível não é descritivo o suficiente.

Boas práticas:

    Inclua a informação "(abre em nova aba)" no title e/ou aria-label para alertar usuários de leitores de tela.

    Evite usar aria-label se o texto âncora já for totalmente descritivo, pois ele substitui o texto lido pelo leitor de tela.

    O texto âncora em si deve ser descritivo e evitar termos genéricos como "clique aqui".

📊 4. Rastreamento e Análise de Cliques
🔹 Parâmetros UTM (para Google Analytics / GA4)

Adicione parâmetros à URL de destino para identificar a origem do tráfego:
text

?utm_source=meusite&utm_medium=link&utm_campaign=nome_campanha

Exemplo:
html

<a href="https://www.exemplo.com/?utm_source=meusite&utm_medium=link&utm_campaign=artigo_xyz"
   target="_blank" rel="noopener noreferrer">

🔹 Rastreamento de Eventos (Google Analytics 4)

No GA4, a medição aprimorada já rastreia cliques em links externos automaticamente se a opção "Cliques em saída" estiver ativada.

Para um rastreamento mais granular, você pode adicionar um atributo onclick:
html

<a href="..."
   onclick="gtag('event', 'click', {'event_category': 'external_link', 'event_label': 'Nome do Link'});">

Ou, se usar Google Tag Manager, crie um gatilho para todos os cliques em links com target="_blank".
🌐 5. Atributo Adicional: hreflang
Atributo	Finalidade
hreflang	Indica o idioma do conteúdo do link de destino, útil para SEO internacional.

Exemplo:
html

<a href="https://www.exemplo.com/en/" hreflang="en">English version</a>

✍️ 6. Boas Práticas Gerais

    Texto Âncora Descritivo: use palavras-chave que descrevam claramente o conteúdo do link.

    Sinalize visualmente: considere adicionar um ícone (ex: ↗) para indicar visualmente que o link é externo.

    Aviso para usuários: o atributo title ou aria-label com a frase "abre em nova aba" é essencial para acessibilidade.
``` 

## Success Criteria

1. Logs estruturados em pontos chave
2. Testes rodando sem erros
3. SniffCSS confirmando UI coerente com o esperado
4. Testes automatizados para garantia de não-regressão
5. Suíte V2 Unit não regride (0 novas falhas)
6. Todas as páginas possuem link rastreado, seguro, otimizado

## Non-Goal

- Modificar a lógica backend somente SE FOR ESTRITAMENTE NECESSÁRIO
- Deixar campos em branco, sem placeholder
- Editor com muitas abas ou botões, priorizar simplicidade

## Constraints

PHP 7.4 | PHPUnit ~6.0. Nunca commitar. Model: UUID, SoftDeletes.
Use o X-CMS-AI-Token do ai_acess definido no .env para ter livre acesso ao CMS a nível de UI/UX
SniffCSS habilitado em MCP e Host para consulta da página real
Docker only. execute via docker compose exec app [command]

================================================================================

# RESULT-LOG

```
Status: 
Date: yyyy-mm-dd
Sub-tasks: 0/0
Files modified: 0
Seeds closed: 0/0
Outcome: 
Notes:
```

================================================================================

# AI-AREA

```
1. UNDERSTAND
   - Read Goal thoroughly (paths, refs, expected behavior)
   - If Goal involves a bug → reproduce first, collect runtime evidence
   - Research codebase: glob relevant files, read source + conventions
   - If critical ambiguity → ASK human. Minor → ASSUME + document.

2. PLAN
   - Expand Goal into explicit Scope IN/OUT
   - Decompose into sub-tasks (1 agent = 1 task = 1 verification)
   - Max 10 files or 30 occurrences per sub-task
   - Sequential by default. Parallel only if independent.
   - Register: sd create → sd plan create → sd plan adopt → sd sync

3. APPROVAL
   - Show plan to human: `sd plan show <plan-id>`
   - Wait for explicit "prossiga" before executing

4. EXECUTE
   - For each sub-task sequentially:
     a. Delegate to coder via task tool
     b. Verify against Success Criteria
     c. IF implementation involves UI, verify witch SniffCSS (MCP || CLI command)
     d. IF fail any verify → correction sub-task, repeat 4a
     e. sd close <seed-id> --reason "[result]"

5. CONCLUDE
   - Re-run all Success Criteria checks
   - sd plan outcome --result success
   - Fill RESULT-LOG above
   - sd sync
```