ligbox-ops-platform/specs/034-nextcloud-carbonio-vm112-integration/034-console-process-ui.md
Ligbox Spec Hub c1881f58e6 chore: sync Console SSO, DNS viewer, specs e infra docs pendentes
Inclui console handoff Desk↔Console (Spec 019), melhorias DNS Viewer (037),
OpenPanel/Nextcloud/VM116 deploy notes, contracts stack e sidebar actualizado.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-25 20:10:17 +00:00

304 lines
14 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Spec 034-UI — Visão processo Console (Carbonio + Nextcloud)
**Criado:** 2026-06-21
**Solicitado por:** Roger
**Status:** 📋 Draft — design aprovado conceptualmente
**URL:** `https://console.ligbox.com.br` (shell Spec [035-UX](../035-ligbox-mail-bundles-foss-openpanel/ligbox-console-shell.md))
**Referência layout:** Spec **030** (Mission Board) · Spec **035** (bundles, toggle Mail NC)
---
## 1. Objectivo
Documentar **como a visão de processo** da Spec 034 (mail hot + Files warm + provision NC-1→NC-5) aparece no **Ligbox Console** — sem expor Carbonio, Nextcloud ou OCS ao utilizador.
**Princípio Roger:** mesma shell Spec 030 (status bar · 3 colunas · cards · contexto), **componentes novos** para quotas duplas e pipeline de provisionamento.
---
## 2. Avaliação Spec 030 como referência
| Área | Nota | Decisão |
|------|------|---------|
| Shell 3 colunas + status bar | 8/10 | ✅ Herdar directo |
| Staff ops / health / falhas NC | 8/10 | ✅ Mission Board para incidentes |
| Gerente: lista contas | 6/10 | ⚠️ Adaptar cards |
| Pipeline NC-1→NC-5 | 4/10 | Componente **`ProvisionPipeline`** novo |
| Quotas mail + Files | 5/10 | Componente **`QuotaDualBar`** novo |
| Forms CRUD (criar conta) | 4/10 | Modal / context panel com forms |
**Conclusão:** Spec 030 = **chassis**; Spec 034-UI = **indicadores e fluxos** do motor híbrido.
---
## 3. Vocabulário UI (nunca mostrar motores)
| Backend | UI Ligbox Console |
|---------|-------------------|
| Carbonio VM112 | **Email** · quota **caixa** |
| Nextcloud VM116 Files | **Files** · quota **armazenamento** |
| OCS Provisioning API | *(invisível)* — «A criar Files…» |
| NC-1…NC-5 | **`ProvisionPipeline`** — passos humanos |
| Hot / Warm tier | **`StorageTierBadge`** — «Caixa» / «Files» |
| `nextcloud_mail_enabled` | Toggle **«Mail no Nextcloud»** |
| VM116 health | **«Armazenamento»** ● online / offline |
---
## 4. Processos Spec 034 → ecrãs Console
### 4.1 Mapa processo → rota
| Processo Spec 034 | Role | Rota Console | Componente principal |
|-------------------|------|--------------|----------------------|
| Onboarding conta (Carbonio + NC) | Gerente | `/admin/contas` | `ProvisionPipeline` + modal criar |
| Quotas duplas por conta | Gerente | `/admin/contas` | `QuotaDualBar` no card + context |
| Toggle Mail Nextcloud domínio | Gerente | `/admin/files` | `DomainFilesToggle` |
| Ver uso domínio mail + Files | Gerente | `/admin` Início | Status bar + cards resumo |
| Health VM116 + VM112 | Staff | `/ops` ou `/comercial/dominios` | `StackHealthTile` |
| Falha provision OCS | Staff | `/ops` Mission Board | `IncidentCard` (Spec 030) |
| Provision manual ops | Staff | `/ops` context | Form + `ProvisionPipeline` |
| Purge domínio (017+034) | Staff | `/ops` runbook | Fora UI 034 — link runbook |
| Offload anexo grande | Utilizador | webmail Carbonio | Banner «Guarde em Files» — **não** Console |
### 4.2 Pipeline NC-1 → NC-5 (componente novo)
Backend Spec 034 §Integração VM112:
```
NC-1 Criar user Nextcloud (OCS)
NC-2 Quota Files conforme plano
NC-3 Mail app pré-config (se toggle ON)
NC-4 Registar estado domínio
NC-5 Webhook Desk provisioned
```
**UI `ProvisionPipeline`** — barra horizontal de passos:
```
┌─────────────────────────────────────────────────────────────────┐
│ Criando vendas@empresa.com.br │
│ │
│ ● Email ─── ● Files ─── ○ Mail NC ─── ○ Finalizar │
│ OK OK (skip) … │
└─────────────────────────────────────────────────────────────────┘
```
| Estado | Visual | Mensagem PT-BR |
|--------|--------|----------------|
| `pending` | ○ cinza | «Aguardando…» |
| `running` | ◐ animado | «A criar Files…» |
| `ok` | ● verde | «Pronto» |
| `skipped` | ○ tracejado | «Não activo» (NC-3 OFF) |
| `error` | ● vermelho | «Não foi possível — tentar novamente» |
**Regra:** utilizador vê **uma** barra — nunca «OCS API» ou «NC-3».
### 4.3 Quotas duplas (componente novo)
**`QuotaDualBar`** — duas barras empilhadas por conta:
```
Email (caixa) ████████░░ 24 / 30 GB
Files ███░░░░░░░ 60 / 200 GB
```
| Prop | Fonte API |
|------|-----------|
| Mail usado/máx | Wizard `/api/domain-admin/accounts` |
| Files usado/máx | Desk `/api/v1/nextcloud/domains/{domain}/users` |
**`StorageTierBadge`** no card:
| Badge | Significado |
|-------|-------------|
| `Caixa` | Quota Carbonio (hot) |
| `Files` | Quota Nextcloud (warm) |
| `Arquivo` | Fase 3 S3 — futuro |
---
## 5. Wireframes — Gerente (`/admin`)
Shell Spec 030 adaptada · tokens Desk creme ([035-UX §5](../035-ligbox-mail-bundles-foss-openpanel/ligbox-console-shell.md)).
### 5.1 Início — `/admin`
```
┌──────────────────────────────────────────────────────────────────────────┐
│ STATUS BAR · Business · 12/25 contas · Certif. ✅ · Pagamento em dia │
│ Armazenamento Files ● online · 2.1 TB usados no domínio │
├──────────┬───────────────────────────────────────────┬───────────────────┤
│ NAV │ RESUMO │ CONTEXTO │
│ Início ● │ ┌─────────────┐ ┌─────────────┐ │ Próxima acção: │
│ Contas │ │ Email │ │ Files │ │ «13 vagas — │
│ Files │ │ 360 GB usado│ │ 2.1 TB usado│ │ criar conta» │
│ Plano │ │ 12 contas │ │ 12 contas │ │ [+ Nova conta] │
│ … │ └─────────────┘ └─────────────┘ │ │
└──────────┴───────────────────────────────────────────┴───────────────────┘
```
### 5.2 Contas — `/admin/contas`
```
┌──────────────────────────────────────────────────────────────────────────┐
│ STATUS BAR · 12/25 contas · Plano Business │
├──────────┬───────────────────────────────────────────┬───────────────────┤
│ NAV │ CONTAS (cards — Spec 030 board) │ CONTEXTO │
│ Contas ● │ ┌─────────────────────────────────────┐ │ vendas@ │
│ │ │ vendas@empresa.com.br [Caixa][Files]│ │ QuotaDualBar │
│ │ │ ● activa · Email 24/30GB · Files 60/200│ │ [Editar quotas] │
│ │ └─────────────────────────────────────┘ │ [Reset senha] │
│ │ [+ Nova conta] → modal + ProvisionPipeline│ [Abrir webmail] │
│ │ │ [Abrir Files] │
└──────────┴───────────────────────────────────────────┴───────────────────┘
```
**Modal criar conta:**
```
Email: [ vendas ] @empresa.com.br
Nome: [ Vendas ]
Quota email: [ 30 GB ▼ ]
Quota Files: [ 200 GB ▼ ]
☑ Criar armazenamento Files
( Mail no Nextcloud: controlado em Files — toggle domínio )
[ Cancelar ] [ Criar ]
→ ProvisionPipeline inline até concluir
```
### 5.3 Files — `/admin/files`
```
┌──────────────────────────────────────────────────────────────────────────┐
│ DomainFilesToggle │
│ ☐ Activar Mail no Nextcloud (email dentro do Files) │
│ Webmail mail.{dom} continua sempre disponível │
├──────────┬───────────────────────────────────────────┬───────────────────┤
│ NAV │ Lista contas (quota Files — espelho) │ CONTEXTO │
│ Files ● │ vendas@ · 60/200 GB · Files ✅ │ editar quota Files│
└──────────┴───────────────────────────────────────────┴───────────────────┘
```
Ver Spec 035 §2.2.1 — default toggle **OFF**.
---
## 6. Wireframes — Staff (`/ops`)
Mission Board Spec 030 · zona escura `agentic-ops.css` para incidentes; tiles health podem usar creme.
### 6.1 Stack health — domínio ou global
**`StackHealthTile`** (novo — tile ou status bar):
```
┌─────────────────────────────────────┐
│ Stack domínio empresa.com.br │
│ Email (VM112) ● OK │
│ Files (VM116) ● OK │
│ Último provision há 2 min │
└─────────────────────────────────────┘
```
API: Desk `GET /api/v1/nextcloud/health` + wizard domain status.
### 6.2 Incidentes provision (Mission Board)
Cards Spec 030 quando NC falha:
```
┌─────────────────────────────────────┐
│ [ALTO] Files não criado │
│ empresa.com.br · vendas@ │
│ Detectado há 6 min · 2 tentativas │
├─────────────────────────────────────┤
│ Acção: Repetir criação Files │
├─────────────────────────────────────┤
│ [Abrir domínio] [Retry] [Ack] │
└─────────────────────────────────────┘
```
Context panel: `ProvisionPipeline` com passo em erro + log sanitizado (staff only).
---
## 7. Componentes React (packages Console)
| Componente | Spec origem | Fase |
|------------|-------------|------|
| `AppLayout` | 030 / 035-UX | UI-0 |
| `StatusBar` | 030 | UI-0 |
| `ContextPanel` | 030 | UI-0 |
| `IncidentCard` | 030 | `/ops` |
| **`ProvisionPipeline`** | **034** | UI-034-A |
| **`QuotaDualBar`** | **034** | UI-034-A |
| **`StorageTierBadge`** | **034** | UI-034-A |
| **`DomainFilesToggle`** | **034 / 035** | UI-034-B |
| **`StackHealthTile`** | **034 / 033** | UI-034-B |
| **`AccountCard`** | 030 card + 034 badges | UI-034-A |
**Monorepo:** `ligbox-console-ui/packages/domain-admin/` — rotas `/admin/*`.
---
## 8. APIs consumidas (034 → UI)
| UI | Endpoint | Spec |
|----|----------|------|
| QuotaDualBar (mail) | Wizard `GET/PUT /api/domain-admin/accounts` | 010 |
| QuotaDualBar (Files) | Desk `GET .../nextcloud/domains/{d}/users` | [contract](./contracts/nextcloud-provisioning-api.md) |
| ProvisionPipeline | Wizard `POST accounts` + webhook progress | 034 §NC |
| DomainFilesToggle | Wizard `PATCH .../nextcloud-mail` | 035 §2.2.1 |
| StackHealthTile | Desk `/api/v1/nextcloud/health` | 034 |
| Incident retry | Desk `POST .../nextcloud/domains/{d}/users` | 034 |
**Eventos websocket/poll (fase 2):** `onboarding.nextcloud.provisioned` → actualiza pipeline sem reload.
---
## 9. Fases de entrega UI-034
| Fase | Entrega | Depende infra |
|------|---------|---------------|
| **UI-034-A** | `QuotaDualBar` + `AccountCard` + modal criar + `ProvisionPipeline` mock | Wizard API (parcial OK) |
| **UI-034-B** | `DomainFilesToggle` + secção `/admin/files` | VM116 + OCS |
| **UI-034-C** | `StackHealthTile` staff + incident cards retry | Desk nextcloud routes |
| **UI-034-D** | Poll pipeline live + empty/error states | Webhooks NC-5 |
**Ordem Roger:** UI-034-A integrada na **UX-A** gerente ([035 tasks](../035-ligbox-mail-bundles-foss-openpanel/tasks.md)) — pode mockar Files até VM116.
---
## 10. Critérios de aceite UI
- [ ] Gerente vê quota **Email** e **Files** na mesma conta — zero menção «Nextcloud»
- [ ] Criar conta mostra `ProvisionPipeline` com passos NC humanizados
- [ ] Toggle Mail NC domínio default OFF — Spec 035
- [ ] Falha OCS → mensagem PT-BR + retry — staff vê card Mission Board
- [ ] Layout 3 colunas Spec 030 em `/admin/contas` e `/admin/files`
- [ ] Mobile: tabs Contas | Files | Detalhe (Spec 030 mobile pattern)
- [ ] Zero regressão login `admin@{dom}``/admin`
---
## 11. Fora de scope (034-UI)
- UI offload anexo no webmail Carbonio (banner link Files — fase separada)
- Purge UI (Spec 017 runbook)
- OIDC senha única (034 fase 2 auth)
- React rewrite completo Desk tickets (opcional futuro)
---
## 12. Documentos relacionados
| Doc | Conteúdo |
|-----|----------|
| [spec.md](./spec.md) | Arquitectura 034 |
| [035-UX shell](../035-ligbox-mail-bundles-foss-openpanel/ligbox-console-shell.md) | Console unificado |
| [035 domain-manager-ui](../035-ligbox-mail-bundles-foss-openpanel/domain-manager-console-ui.md) | Secções `/admin` |
| [030-agentic-ops-ui](../030-agentic-ops-ui/spec.md) | Mission Board referência |
| [nextcloud-provisioning-api.md](./contracts/nextcloud-provisioning-api.md) | Contrato API |