# Tarefa direcionada ao Codex, revisão de layout/design dos frontends Monetarie

Objetivo: varrer empiricamente todos os frontends do ambiente de homologação, identificar falhas de layout/design e entregar uma lista priorizada de correções com evidência (screenshot + `arquivo:linha`). Não alterar infraestrutura, rede, Terraform ou recursos da Lerian. Apenas frontend.

## Contexto

Houve rebrand completo para a nova marca Monetarie (wordmark escuro `#101820`, branco, herói ouro `#ffc847`, badge ouro-no-escuro p/ favicons), deployado nas 9 UIs do ECS. As evidências de branding antigas (36 screenshots) são PRÉ-rebrand. Falta a re-captura estrita e uma revisão crítica de layout/design pós-rebrand. A infra NÃO deve ser tocada; backend só se um defeito de layout exigir um ajuste mínimo de template renderizado pelo servidor.

## Escopo, 9 serviços UI (ECS, cluster `monetarie-greenfield-homolog`)

core-admin-ui, core-banking-ui, core-merchant-ui, pix-admin-ui, spb-admin-ui, sta-admin-ui, npc-admin-ui, backoffice, docs-portal.

Código-fonte no monorepo `/Users/luizpenha/monetarie`: `core/frontend/*`, `pix/frontend/admin`, `spb/frontend/*`, `npc/frontend/*`, `sta/frontend/*`, `backoffice/*`, `mobile/*` (Vue 3 + Pinia + TS + Tailwind, exceto docs).

## Acesso (homologação, via VPN ativa, hosts `-h` em `monetarie.internal`)

- `coreadmin-h`, `coreapi-h`, `pixadmin-h`, `pixapi-h`, `spbadmin-h`, `spbapi-h`, `docs-h`, mais os aliases validados (ver `CLAUDE.md` seção "Aliases internos"). Todos respondem HTTP 200 em `/health`.
- Login: `admin@monetarie.com.br`, senha em AWS Secrets Manager `monetarie/homolog/admin/{core,pix,spb}/initial_password` (NUNCA hardcodar; buscar via `awsmon secretsmanager get-secret-value`). Wrapper:

```bash
awsmon() { env -u AWS_ACCESS_KEY_ID -u AWS_SECRET_ACCESS_KEY -u AWS_SESSION_TOKEN AWS_PROFILE=vulcimonetarie AWS_REGION=sa-east-1 aws "$@"; }
```

- Reaproveitar/estender o script existente `scripts/codex_capture_core_pix_spb.cjs` (Playwright) para login + navegação autenticada + screenshots. Estender para cobrir também npc, sta, merchant, backoffice e docs.

## O que avaliar (checklist por tela)

1. Marca aplicada corretamente: wordmark/ícone na cor certa (`#101820`/branco/`#ffc847`), sem logo esticado/distorcido, favicons corretos, nenhum resíduo da marca antiga (verde Cecresa, placeholders "F"/"CC", paleta antiga `#18100C`/`#B48F5E`).
2. Layout: alinhamento, espaçamento, grid, overflow, quebra de coluna, elementos sobrepostos, z-index, tabelas que estouram, modais cortados.
3. Responsividade: 1280px, 1440px, 768px e 375px. Sidebar/menu colapsável, sem scroll horizontal indevido.
4. Contraste/acessibilidade: texto sobre fundo (ouro sobre branco é crítico), foco visível, alt em imagens, labels em inputs.
5. Estados: vazio, carregando, erro, paginação, hover/disabled de botões.
6. i18n pt-br: nenhuma string crua/inglês exposta, acentuação correta, sem chave i18n aparecendo literal (ex.: `dashboard.title`).
7. Erros de runtime: console sem erro/warning, nenhuma rota retornando 4xx/5xx, nenhum 404 de asset (imagem/fonte/css), nenhum link quebrado.
8. Consistência entre as 9 UIs: tipografia, botões, cards e cores seguem o mesmo design system.

## Entregáveis

1. Lista priorizada (P0 quebra visível, P1 inconsistência, P2 polish) de defeitos, cada item com: UI, tela/rota, descrição, screenshot, e `arquivo:linha` do componente/estilo a corrigir.
2. Screenshots organizados por UI, com metadados (rota, viewport), validador sem erros.
3. Patch/PR com as correções de P0/P1 (sem mexer em infra/rede/Terraform), build do frontend afetado passando.
4. Resumo: total de telas cobertas, defeitos por severidade, telas com `invalid=0`.

## Restrições absolutas (do `CLAUDE.md`)

- Não considerar tela validada sem screenshot, metadados e validador sem erros (regra 11).
- Nada de segredos em markdown/log/PDF (regra 10). Buscar senhas só do Secrets Manager em runtime.
- Não tocar bastion, rotas, TGW, VPC, Terraform ou recursos da Lerian.
- pt-br sem travessão de IA, acentuação correta.