# Spec 033 — Desk Infra Console UI (ws-panel aqua/teal)

**Criado:** 2026-06-19  
**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

Redesenho da página **Infraestrutura** do Desk: layout tipo wizard (`ws-panel` + gradientes teal/aqua/orange), chips de status no topo e painéis por integração — substituindo cards genéricos pouco legíveis.

**Motivo:** cards antigos (`class="card"`) eram visualmente pobres e o painel OpenPanel (Spec 028) ficou pouco visível após o primeiro redesign.

---

## 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()`).

---

## Layout

### 1. Hero — chips de status (`infra-hero`)

Quatro chips com dot + badge:

| Chip | Fonte API |
|------|-----------|
| SOC integração | `GET /api/v1/integrations/health` |
| VM112 Portal | idem + `GET /api/v1/infra/vm112/status` |
| VM104 Wazuh | `GET /api/v1/infra/wazuh/status` |
| **OpenPanel VM123** | `GET /api/v1/vm123/health` → `openpanel` |

### 2. Grid — painéis `ws-panel` (`infra-grid`)

| Painel | Cabeçalho CSS | Largura | Spec / função |
|--------|---------------|---------|----------------|
| SOC VM112 | `ws-panel-head--teal` | wide | Webhook + alertas |
| **OpenPanel API** | `ws-panel-head--orange` | **wide + featured** | **028** — teste multidomínio |
| Códigos purge | `ws-panel-head--rose` | normal | **032** — geração códigos |
| VM112 Onboard | teal | normal | HTTP / service |
| VM104 Wazuh | `ws-panel-head--slate` | normal | API SOC |
| Integrações JSON | `ws-panel-head--violet` | wide | dump `/integrations` |

### 3. OpenPanel (Spec 028) — conteúdo obrigatório

Painel **largura total**, classe `infra-panel--featured`:

- Título: `OpenPanel API — Re-engenharia Ligbox · Spec 028`
- Métricas: OpenPanel OK, Bridge API, Bridge URL, VM123 health
- Botões: **Testar multidomínio** (`POST /api/v1/vm123/openpanel/test-confirm`) · link OpenPanel UI
- Hint: suite `openpanel-multidomain-api-confirm` + script CLI

Modal de resultado: reutiliza `#soc-test-modal` (`showOpenPanelTestResult`).

### 4. Purge auth (Spec 032)

Sub-render: `renderPurgeAuthInfraPanel()` → `#purge-auth-infra-panel`

---

## APIs consumidas

| Endpoint | Uso na página |
|----------|----------------|
| `GET /api/v1/infra/vm112/status` | Chip + painel VM112 |
| `GET /api/v1/infra/wazuh/status` | Chip + painel Wazuh |
| `GET /api/v1/integrations` | JSON painel violet |
| `GET /api/v1/integrations/health` | Chip SOC + alertas |
| `GET /api/v1/vm123/health` | Chip + painel OpenPanel |
| `GET /api/v1/infra/purge-auth-domains` | Spec 032 panel |
| `GET/POST /api/v1/infra/purge-auth-codes` | Spec 032 panel |
| `POST /api/v1/vm123/openpanel/test-confirm` | Botão teste OpenPanel |

---

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

Classes principais:

- `.infra-page`, `.infra-hero`, `.infra-hero-chip`, `.infra-hero-dot`
- `.infra-grid`, `.infra-panel`, `.infra-panel--wide`, `.infra-panel--featured`
- `.infra-kv` — métricas em grid
- `.infra-actions`, `.infra-hint`, `.infra-alert-list`
- Reutiliza `.ws-panel`, `.ws-panel-head--{teal|orange|rose|slate|violet}` (wizard/SOC)

---

## Ficheiros

| Ficheiro | Função |
|----------|--------|
| `frontend/assets/app.js` | `renderInfra()`, `renderPurgeAuthInfraPanel()`, `infraKvHtml()` |
| `frontend/assets/styles.css` | Estilos Infra + purge auth form |
| `frontend/index.html` | `#infra-content` em `#view-infra` |

**Commits:** `41c0c2d` (layout inicial) · follow-up OpenPanel featured panel.

---

## Critérios de aceitação

1. Infra mostra **4 chips** no topo (incl. OpenPanel VM123).
2. Painel OpenPanel é **largura total**, título Spec 028, métricas bridge e botão teste.
3. Botão «Testar multidomínio» abre modal com passos da suite 028.
4. Painel purge Spec 032 mantém formulário e tabela de códigos activos.
5. Layout responsivo: 1 coluna em mobile (`max-width: 900px`).

---

## Fora de escopo

- Redesign `Infra 2` / SOC dark (`renderInfra2`)
- Dashboard widgets duplicando Infra
- Edição de integrações na UI

---

## Conclusão

A **Spec 033** documenta apenas a **construção visual e layout** da página Infra. Funcionalidades específicas:

- OpenPanel teste → **Spec 028** (+ `CONFIRMACAO-TESTE-API.md`)
- Códigos purge → **Spec 032**
- Webhook SOC → Spec **001** / health integrations