# 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 **INFRA CODE** (`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 |
|-------------|---------|--------|
| INFRA CODE | `view-infra` | `renderInfra()` em `frontend/assets/app.js` |

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

---

## Catálogo de process cards (Infra)

Endpoint agregado: `GET /api/v1/infra/stack/status` — probes paralelos de **todos** os serviços do stack (apps, APIs, SW) nas VMs **112, 114, 122, 123, 130**.

Implementação: `api/app/stack_health.py` + `infra_stack_routes.py`.

| VM | Serviços monitorados |
|----|---------------------|
| **112** | Onboard API, Wizard UI, Carbonio, Domain Admin API |
| **114** | Traefik API, Router Desk WAN, Router API Ops WAN |
| **122** | Desk API, Desk UI, Redis, Webhook SOC, Purge Auth API |
| **123** | FOSSBilling, Odoo, OpenPanel, OpenAdmin, Bridge :18087, Ops Console, phpMyAdmin, Ollama |
| **130** | Forgejo, Spec Portal, Spec Hub WAN |

UI: secções por VM + `proc-card` uniforme · modal para detalhes/formulários.

Menu: **INFRA CODE** · subtítulo **Serviços IaaS · Infra as Code** · nav **Serviços IaaS** (`overview-home`).

---

## Modais

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

---

## Critérios de aceitação

1. **INFRA CODE** exibe cards de **todas** as VMs 112/114/122/123/130.
2. Cada card: ícone, spec/kind, título, status, 2 linhas de detalhe.
3. Purge / inputs apenas no modal.
4. Summary `N/M online` no topo.

---

## Conclusão

**Spec 033** = layout INFRA CODE + stack health. Funcionalidades: OpenPanel **028**, purge **032**, webhook **001**.