ligbox-ops-platform/specs/033-desk-infra-console-ui/spec.md

# Spec 033 — Desk Infra Console UI (process cards)

**Criado:** 2026-06-19  
**Actualizado:** 2026-06-19 (padronização `proc-card`)  
**Solicitado por:** Roger  
**Prioridade:** P2 (UX operacional)  
**Status:** ✅ Implementado (Desk VM122 frontend)  
**Sistema:** Desk VM122 · menu **Infraestrutura** (`view-infra`)  
**Relacionado:** Spec **028** (OpenPanel API) · Spec **032** (códigos purge) · Spec **002** (Wazuh) · módulo `infra` (015)

---

## Resumo

Página **Infraestrutura** do Desk com **process cards** uniformes (`proc-card`): mesmo tamanho, tipografia, ícone, badge de status e acções no rodapé. Conteúdo rico (métricas, formulários, JSON) abre em **modal largo** (`#infra-process-modal`).

**Motivo:** painéis `ws-panel` de alturas variadas quebravam o alinhamento visual; inputs inline (purge) inflavam cards.

---

## Referência de design (pesquisa)

Padrões adoptados de boas práticas de UI card (Material UI equal-height, UX Collective, CSS Grid auto-fill):

| Regra | Valor Desk |
|-------|------------|
| Grid | `repeat(auto-fill, minmax(220px, 1fr))` · gap **16px** (sistema 8pt) |
| Altura mínima card | **168px** · `flex-column` + `justify` implícito via footer |
| Padding card | **16px** |
| Título | **0.88rem** · weight 600 |
| Spec label | **0.62rem** uppercase · letter-spacing 0.05em |
| Descrição | **0.75rem** · **2 linhas** (`line-clamp: 2`) |
| Ícone | **32×32px** · fundo pastel por accent |
| Badge status | canto superior direito · classes `badge` existentes |
| Inputs / tabelas / JSON | **modal** `modal-panel-lg` — nunca no card |
| Testes (webhook, OpenPanel) | botão rápido no card **ou** no modal · resultado em `#soc-test-modal` |

**Alinhamento igual altura:** grid `align-items: stretch` + `min-height` fixo no card (não aspect-ratio — conteúdo operacional, não media).

---

## Onde na UI

| Menu Desk | View ID | Render |
|-------------|---------|--------|
| Infraestrutura | `view-infra` | `renderInfra()` em `frontend/assets/app.js` |

**Não** cobre Infra 2 / SOC visual (`view-infra2` → `renderInfra2()`).

---

## Catálogo de process cards (Infra)

| ID | Ícone | Título | Spec label | Accent | Status | Acções card |
|----|-------|--------|------------|--------|--------|-------------|
| `soc` | 📡 | SOC VM112 | Webhook | teal | `health.status` | Detalhes · Testar |
| `openpanel` | 🎛️ | OpenPanel API | Spec 028 | orange | online/check | Detalhes · Testar |
| `purge` | 🔐 | Códigos purge | Spec 032 | rose | N domínios | Gerir códigos → modal |
| `vm112` | 🌐 | VM112 Onboard | Portal | aqua | online/check | Ver status |
| `wazuh` | 🛡️ | Wazuh SOC | Spec 002 | slate | online/check | Ver status |
| `integrations` | 🔗 | Integrações | JSON | violet | activas | Ver JSON |

Mapa de ícones: constante `PROC_CARD_ICONS` em `app.js`.

---

## Modais

| Modal | Uso |
|-------|-----|
| `#infra-process-modal` | Detalhes, formulário purge, JSON integrações |
| `#soc-test-modal` | Resultado testes webhook / OpenPanel multidomínio |

Funções: `openInfraProcessModal()`, `openInfraProcessDetail(procId)`, `closeInfraProcessModal()`, `bindInfraProcessModal()`.

Snapshot API: `state.infraSnapshot` (reutilizado ao abrir detalhe sem re-fetch).

---

## APIs consumidas

| Endpoint | Uso |
|----------|-----|
| `GET /api/v1/infra/vm112/status` | Card VM112 + modal |
| `GET /api/v1/infra/wazuh/status` | Card Wazuh + modal |
| `GET /api/v1/integrations` | Card + modal JSON |
| `GET /api/v1/integrations/health` | Card SOC + modal |
| `GET /api/v1/vm123/health` | Card OpenPanel + modal |
| `GET /api/v1/infra/purge-auth-domains` | Card purge + modal |
| `GET/POST /api/v1/infra/purge-auth-codes` | Modal purge (Spec 032) |
| `POST /api/v1/vm123/openpanel/test-confirm` | Teste OpenPanel |

---

## CSS (`frontend/assets/styles.css`)

Classes **proc-card** (padrão reutilizável em outras páginas):

- `.proc-grid`, `.proc-card`, `.proc-card--{teal|orange|rose|slate|violet|aqua}`
- `.proc-card-head`, `.proc-card-icon`, `.proc-card-spec`, `.proc-card-badge`
- `.proc-card-title`, `.proc-card-desc`, `.proc-card-foot`

Helpers Infra (modais): `.infra-kv`, `.infra-actions`, `.infra-hint`, `.purge-auth-form`

Helper JS: `procCardHtml(opts)` — gera HTML uniforme.

---

## Ficheiros

| Ficheiro | Função |
|----------|--------|
| `frontend/assets/app.js` | `renderInfra()`, `procCardHtml()`, modais Infra |
| `frontend/assets/styles.css` | `.proc-card` + Infra |
| `frontend/index.html` | `#infra-content`, `#infra-process-modal` |

---

## Critérios de aceitação

1. Grid com **6 cards** de **mesma altura mínima** e alinhamento visual.
2. Cada card: ícone + spec label + título + descrição (2 linhas) + badge + acções.
3. Purge: formulário e tabela **só no modal** «Gerir códigos».
4. OpenPanel / SOC: teste rápido no card; detalhes no modal.
5. Responsivo: 1 coluna em mobile (`max-width: 480px`).

---

## Extensão futura

O sistema `proc-card` pode ser adoptado em **Serviços** (substituir `servicos-tile` gradualmente) e **Dashboard** — manter o mesmo catálogo de accents e ícones.

---

## Conclusão

**Spec 033** = layout e padronização visual da Infra. Funcionalidades:

- OpenPanel → **Spec 028**
- Códigos purge → **Spec 032**
- Webhook SOC → health integrations / Spec **001**