Restore prominent OpenPanel panel on Infra and add Spec 033.

Promote OpenPanel to a full-width featured panel with VM123 health metrics, add hero chip, and document Infra console UI layout in Spec 033 with cross-ref from Spec 028.

Co-authored-by: Cursor <cursoragent@cursor.com>

projects/ops-desk/frontend/assets/app.js

@@ -3829,17 +3829,21 @@ async function renderInfra() {
   const el = document.getElementById('infra-content');
   el.innerHTML = '<p class="loading">Verificando…</p>';
   try {
-    const [vm112, wazuh, integrations, health] = await Promise.all([
+    const [vm112, wazuh, integrations, health, vm123Health] = await Promise.all([
       api('/v1/infra/vm112/status'),
       api('/v1/infra/wazuh/status'),
       api('/v1/integrations'),
       api('/v1/integrations/health'),
+      api('/v1/vm123/health').catch(() => null),
     ]);
     const onboard = health.vm112_onboard || {};
     const last = onboard.last_webhook;
     const gap = onboard.gap_minutes != null ? `${Math.round(onboard.gap_minutes)} min` : '—';
     const vmOk = onboard.vm112_api?.reachable;
     const wazuhOk = wazuh.http_status === 200;
+    const op = vm123Health?.openpanel || {};
+    const opOk = Boolean(op.ok);
+    const bridgeOk = Boolean(op.bridge);
     const statusCls = health.status === 'ok' ? 'ok' : health.status === 'critical' ? 'escalated' : 'assisting';
     const heroHealthDot = health.status === 'ok' ? '' : health.status === 'critical' ? 'infra-hero-dot--bad' : 'infra-hero-dot--warn';
     const alerts = (health.alerts || []).map((a) =>
@@ -3872,6 +3876,14 @@ async function renderInfra() {
             </div>
             <span class="badge ${wazuhOk ? 'ok' : 'review'}">${wazuhOk ? 'online' : 'check'}</span>
           </div>
+          <div class="infra-hero-chip infra-hero-chip--openpanel">
+            <span class="infra-hero-dot ${opOk && bridgeOk ? '' : 'infra-hero-dot--warn'}" aria-hidden="true"></span>
+            <div class="infra-hero-body">
+              <strong>OpenPanel VM123</strong>
+              <span>Bridge ${bridgeOk ? 'OK' : 'check'} · ${esc(op.bridge_url || '10.10.10.123:18087')}</span>
+            </div>
+            <span class="badge ${opOk ? 'ok' : 'review'}">${opOk ? 'online' : 'check'}</span>
+          </div>
         </div>
         <div class="infra-grid">
           <article class="ws-panel infra-panel infra-panel--wide">
@@ -3891,19 +3903,29 @@ async function renderInfra() {
               <p class="infra-hint">Alerta se gap &gt; ${health.webhook_gap_alert_minutes || 15} min sem eventos VM112.</p>
             </div>
           </article>
+          <article class="ws-panel infra-panel infra-panel--wide infra-panel--featured" id="infra-openpanel-panel">
+            <div class="ws-panel-head ws-panel-head--orange">OpenPanel API — Re-engenharia Ligbox · Spec 028</div>
+            <div class="ws-panel-body">
+              <p class="infra-hint">VM123 · bridge FOSS <code>:18087</code> · multidomínio · conta temporária com cleanup automático.</p>
+              ${vm123Health
+                ? infraKvHtml([
+                    ['OpenPanel', opOk ? 'OK' : esc(op.error || 'offline')],
+                    ['Bridge API', bridgeOk ? 'OK' : 'offline'],
+                    ['Bridge URL', esc(op.bridge_url || '—')],
+                    ['VM123', vm123Health.ok ? 'OK' : esc(vm123Health.error || 'check')],
+                  ])
+                : '<p class="infra-hint">Status VM123 indisponível — verifique API <code>/vm123/health</code>.</p>'}
+              <div class="infra-actions">
+                <button type="button" class="btn secondary btn-sm" id="btn-test-openpanel-api">Testar multidomínio</button>
+                <a class="btn btn-ghost btn-sm" href="https://openpanel.ligbox.com.br" target="_blank" rel="noopener">OpenPanel UI</a>
+              </div>
+              <p class="infra-hint">Suite <code>openpanel-multidomain-api-confirm</code> · CLI <code>scripts/test-openpanel-multidomain-api.sh</code></p>
+            </div>
+          </article>
           <article class="ws-panel infra-panel">
             <div class="ws-panel-head ws-panel-head--rose">Códigos purge · Spec 032</div>
             <div class="ws-panel-body" id="purge-auth-infra-panel"><p class="loading">A carregar…</p></div>
           </article>
-          <article class="ws-panel infra-panel">
-            <div class="ws-panel-head ws-panel-head--orange">OpenPanel API</div>
-            <div class="ws-panel-body">
-              <p class="infra-hint">Spec 028 · VM123 bridge :18087 · multidomínio · conta temporária com cleanup.</p>
-              <div class="infra-actions">
-                <button type="button" class="btn secondary btn-sm" id="btn-test-openpanel-api">Testar multidomínio</button>
-              </div>
-            </div>
-          </article>
           <article class="ws-panel infra-panel">
             <div class="ws-panel-head ws-panel-head--teal">VM112 — Onboard</div>
             <div class="ws-panel-body">

projects/ops-desk/frontend/assets/styles.css

@@ -3918,10 +3918,14 @@ button.health-card {
   background: linear-gradient(135deg, #f0fdfa 0%, #fff 55%);
   box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
 }
-.infra-hero-chip--alert {
+.infra-hero-chip--openpanel {
   background: linear-gradient(135deg, #fff7ed 0%, #fff 55%);
   border-color: #fed7aa;
 }
+.infra-panel--featured {
+  border-color: #fdba74;
+  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.12);
+}
 .infra-hero-dot {
   width: 10px;
   height: 10px;

specs/028-openpanel-ce-ligbox-reengineering/CONFIRMACAO-TESTE-API.md

@@ -29,9 +29,11 @@ Permitir validar **quantas vezes quiser** que a re-engenharia OpenPanel Ligbox e
 
 ## Menu Infra (Desk VM122)
 
+**Layout UI:** Spec **033** (`specs/033-desk-infra-console-ui/spec.md`) — painel largo `OpenPanel API — Re-engenharia Ligbox · Spec 028` na grid Infra.
+
 1. Login em https://desk.ligbox.com.br
 2. Menu lateral → **Infraestrutura**
-3. Card **OpenPanel API — Re-engenharia Ligbox**
+3. Painel **OpenPanel API — Re-engenharia Ligbox** (chip VM123 no topo + painel orange largura total)
 4. Botão **Testar multidomínio**
 5. Modal com passo-a-passo e resultado (OK/FAIL por step)
 

specs/033-desk-infra-console-ui/spec.md

@@ -0,0 +1,134 @@
+# 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