ligbox-ops-platform/specs/030-agentic-ops-ui/design/wireframes.md

Wireframes — Spec 030 Agentic Ops UI

Data: 2026-06-20
View Desk: agentic-ops · #agentic-ops-content

---

1. Status bar (fixo no topo da view)

┌─────────────────────────────────────────────────────────────────────────┐
│ Agentic Ops                    Tier [T1]  Ollama ●  qwen2.5:7b          │
│                                Último tick: há 4 min  ·  Worker OK      │
│                                Abertos: 2 alto · 2 aviso · 5 ok         │
│                                                      [Actualizar] [Tick]│
└─────────────────────────────────────────────────────────────────────────┘

Dados: GET /api/v1/agents/overview (novo) ou compor de /health + último run em /action-log.

Estados Ollama:

• ● verde — tier t1 + ollama true
• ● amarelo — tier t1 + ollama false (fallback T0)
• T0 badge — LLM desligado

---

2. Fleet rail (coluna esquerda, ~220px)

┌──────────────────┐
│ FROTA  A0–A7     │
├──────────────────┤
│ ● Maestro    A0  │  ← pulse se orchestrator activo
│ ○ Pulso      A1  │
│ ○ Trilho     A2  │
│ ○ Carta      A3  │  (futuro — disabled/grey)
│ ○ Escudo     A4  │
│ ○ Sentinela  A5  │
│ ● Copiloto   A6  │  ← seleccionado para chat
│ ○ Remediador A7  │
├──────────────────┤
│ Vigia · Curador  │
├──────────────────┤
│ Filtrar: [Todos ▼]│
└──────────────────┘

Interacção: click agente filtra cards do board; double-click abre chat A6 pré-preenchido.

Indicador pulse: agente com ≥1 incidente open no cenário mapeado (Spec 029 SCENARIO_AGENT_MAP).

---

3. Mission Board — kanban por severidade

Colunas (horizontal scroll se necessário):

Coluna	Cor borda	Max cards visíveis
CRÍTICO	#ef4444	todos
ALTO	#f97316	todos
AVISO	#eab308	8 + “+N”
OK / Silencioso	#64748b	collapsible

Incident card (template)

┌─────────────────────────────────────┐
│ [ALTO]  FOSSBilling VM123 down      │
│ Vigia · vm123.finance.stack         │
│ Detectado há 6 min · 12 ocorrências │
├─────────────────────────────────────┤
│ Acção: Verificar docker compose na  │
│ VM123 finance stack…                │
├─────────────────────────────────────┤
│ [Abrir]  [Ack]  [⋯]                 │
└─────────────────────────────────────┘

Card activo: borda 2px solid var(--accent) + fundo rgba(59,130,246,0.08).

Menu ⋯: Copiar acção · Ver runs · Criar ticket (futuro UI-E).

---

4. Context panel (coluna direita, ~360px)

Estados:

A — Nenhum card seleccionado

┌─────────────────────────┐
│ CONTEXTO                │
│ Seleccione um incidente │
│ no board ou use o       │
│ Copiloto abaixo.        │
├─────────────────────────┤
│ Chat Copiloto (A6)      │
│ [textarea]              │
│ [Perguntar]             │
└─────────────────────────┘

B — Card seleccionado

┌─────────────────────────┐
│ FOSSBilling VM123 down  │
│ Thread #47 · Vigia      │
├─────────────────────────┤
│ ▼ Timeline (3 eventos)  │
│ 06:32 tick · degraded   │
│ 06:22 tick · degraded   │
│ 06:12 finding criado    │
├─────────────────────────┤
│ [mensagens thread…]     │
│ [responder…] [Enviar]   │
├─────────────────────────┤
│ Copiloto A6             │
└─────────────────────────┘

---

5. Run timeline (faixa inferior, opcional collapsible)

┌─────────────────────────────────────────────────────────────────────────┐
│ Últimas 24h — ticks worker                                              │
│ 06:32 ████ 9/9 cenários · 4 findings                                    │
│ 06:22 ████ · 4 findings                                                 │
│ 06:12 ████ · 4 findings                                                 │
└─────────────────────────────────────────────────────────────────────────┘

Implementação v1: lista simples; v2 sparkline SVG (como wizard SOC em app.js).

---

6. Mobile (<768px)

┌─────────────────────────┐
│ Status bar (compact)    │
├─────────────────────────┤
│ [Board][Frota][Contexto]│  ← tabs
├─────────────────────────┤
│ (tab activa)            │
└─────────────────────────┘

---

7. Empty / loading / error

Estado	UI
Loading	Skeleton 3 colunas + “Carregando mission board…”
Empty	Ilustração minimal + “Ambiente saudável — 9/9 cenários OK”
Error	Banner vermelho + botão retry (não substituir página inteira)
401	Redirect login (já via api() global)

---

CSS — classes propostas (prefixo ao-)

.ao-shell { display: grid; grid-template-columns: 220px 1fr 360px; gap: 1rem; }
.ao-status-bar { … }
.ao-fleet-rail { … }
.ao-board { display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: .75rem; }
.ao-incident-card { min-height: 140px; cursor: pointer; }
.ao-incident-card--active { … }
.ao-severity--critical { border-left: 4px solid #ef4444; }
.ao-context-panel { display: flex; flex-direction: column; min-height: 480px; }

Integrar em styles.css ou ficheiro agentic-ops.css importado só na view.

---

Migração desde layout 029 (3 colunas)

029	030
Coluna roster expandido	Fleet rail compacto
Inbox lista longa	Cards no kanban
Findings lista duplicada	Merge no card
Dropdown threads	Context panel ao seleccionar
Chat no fundo	Chat fixo no context panel

Rollback: feature flag AGENTIC_UI_V2=true em .env ou toggle módulo Desk (Spec 015).