fd491e5859
Add agent_incidents dedup, overview/incidents/timeline API, mission board UI with fleet rail, kanban, context panel, mobile tabs, poll and keyboard shortcuts. Co-authored-by: Cursor <cursoragent@cursor.com>
194 lines
7.4 KiB
Markdown
194 lines
7.4 KiB
Markdown
# 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).
|