# 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)

```text
┌─────────────────────────────────────────────────────────────────────────┐
│ 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)

```text
┌──────────────────┐
│ 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)

```text
┌─────────────────────────────────────┐
│ [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

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

### B — Card seleccionado

```text
┌─────────────────────────┐
│ 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)

```text
┌─────────────────────────────────────────────────────────────────────────┐
│ Ú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)

```text
┌─────────────────────────┐
│ 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-`)

```css
.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).