ComeçandoTour pela interface

Tour pela interface

Visão geral da plataforma — barra lateral, header, ações rápidas. Em 5 minutos você sai sabendo navegar no painel.

Visão geral do painel ConectAI (modo escuro)
Visão geral do painel ConectAI (modo escuro)

A estrutura geral

A tela é dividida em três áreas:

┌──────────┬────────────────────────────────┐
│          │  HEADER (com IspSwitcher)      │
│ SIDEBAR  ├────────────────────────────────┤
│ (240px)  │                                │
│          │   ÁREA PRINCIPAL               │
│          │   (conteúdo da página)         │
│          │                                │
└──────────┴────────────────────────────────┘
  • Sidebar fixa à esquerda — 240px de largura, tem o logo no topo, navegação no meio, menu do usuário no rodapé
  • Header no topo — mostra o IspSwitcher (apenas para super-admins com múltiplas orgs)
  • Main scrollable — onde aparece a página atual

No mobile, a sidebar vira um menu lateral retrátil (off-canvas) com backdrop.

Sidebar — os 8 grupos

A barra lateral organiza tudo em 8 grupos, agrupados por contexto:

1. Command Center

  • Visão Geral — painel ao vivo da operação
  • Mapa de Operações — visão geográfica

2. Operações

  • Agenda — calendário de visitas técnicas e callbacks
  • Telefonia — visão da operação por voz
  • Teste de Ligação — simulador para validar a IA
  • Campanhas — outbound (cobrança, NPS, manutenção)
  • Incidentes — eventos que afetam clientes em massa

3. Comunicação

  • Chat Interno — chat do time (estilo Slack, com ⌘K)
  • Atendimento — caixa de entrada de conversas
  • Histórico — log de todas as interações

4. Ambiente IA

  • Agentes — configuração dos agentes
  • Flows — Flow Builder (fluxos visuais)
  • Conhecimento — base de conhecimento
  • Tools — ferramentas que o agente usa (HTTP, MCP, TR-069)
  • Task Center — tarefas de coaching e operação

5. Inteligência

  • Qualidade — scorecards de atendimentos
  • Sentimento — detecção de raiva/satisfação
  • Tópicos — clusterização automática dos assuntos da semana
  • SLA — política e cumprimento
  • Previsões — forecast de volume
  • Relatórios — exportações e relatórios prontos

6. Assinantes

  • Perfis — clientes finais do seu provedor (CRM)

7. Configurações

  • Geral — nome do provedor, webhook
  • Canais — WhatsApp, telefonia
  • Telefonia — DIDs e rotas
  • Usuários — convites e roles
  • Grupos & Permissões — gerência de roles
  • Integrações — IXC, Google Calendar
  • Compliance — LGPD (erasure, consentimento)
  • Auditoria — audit log
  • Plano — uso, faturas, upgrade
  • Sistema — versão, changelog

8. Admin (super-admin only)

  • Painel Admin — gestão de todas as orgs
  • Solicitações de Acesso — fila de aprovação de signups

Permissões filtram a sidebar. Se você não tem permissão para uma rota, ela simplesmente não aparece no menu. Por isso, dois usuários da mesma org podem ver sidebars diferentes.

Header & IspSwitcher

No canto superior direito você tem o IspSwitcher — só aparece se você tem permissão canViewAll (super-admin). Mostra:

  • ISP ativo (com tier badge: Starter cinza, Pro azul, Enterprise violeta)
  • “Health dot” (verde / amarelo / vermelho)
  • Popover com busca + lista filtrada de ISPs + opção “Todos os ISPs”

A escolha persiste em cookie + fallback ?isp=… na URL.

Menu do usuário (rodapé da sidebar)

Clique no avatar para abrir o UserMenu:

  • Avatar grande + nome + e-mail
  • Foto — botões de trocar e remover (formatos JPEG/PNG/WebP/GIF)
  • Tema — toggle Sun (claro) / Moon (escuro) / Monitor (sistema)
  • Sair — encerra sessão e volta para /login

Trocar tema — clicar no ícone Monitor faz o tema seguir a preferência do seu sistema operacional. Persiste no localStorage do browser.

Notificações em tempo real

A sidebar tem badges com contagem que atualizam sozinhos:

  • Chat Interno — mensagens não lidas no chat do time
  • Atendimento (Inbox) — conversas pendentes de humano

Como funciona:

  • Polling a cada 8 segundos (± 2s de jitter) em /api/nav/badges
  • Re-fetch imediato quando você volta ao tab (visibilitychange)
  • Quando o contador sobe, o ConectAI dispara popup do browser + som (a menos que você já esteja na tela do badge)

A primeira vez que você clica em algo após logar, o ConectAI pede permissão para mostrar notificações no browser. Aceite — é o que faz tocar o som quando uma conversa nova entra.

Se você é super-admin e está operando como outra org, aparece um banner sticky vermelho/amarelo no topo:

“Operando como Provedor X · sua sessão real é lucas@conectaai.io · expira em MM:SS”

  • Polling a cada 5s para acompanhar TTL
  • Cor amarela normalmente, vermelha quando faltam menos de 60s
  • Botão Sair da impersonação sempre disponível

Atalhos de teclado

A versão atual tem um único atalho global documentado:

AtalhoOnde funcionaO que faz
⌘K / Ctrl+KChat InternoAbre command palette com busca de canais e mensagens

Heads up: o ⌘K só funciona dentro do Chat Interno. Atalhos globais (busca em tudo, navegar entre seções) estão no roadmap.

→ Veja Atalhos de teclado para a lista completa do composer do chat.

OrgSelector (multi-org)

Em telas como /config/canais e /config/usuarios, se você tem acesso a múltiplas orgs, aparece um OrgSelector no topo da página (versão “leve” do IspSwitcher). Ele muda a query ?org=… da página atual.

Mobile

No celular ou tablet pequeno:

  • Sidebar fica oculta — abre por toque no menu hambúrguer
  • Header tem botão de menu
  • Tabelas longas viram scroll horizontal
  • Modais ocupam tela cheia

Próximo passo

→ Como a IA pensa

Conceitos básicosComo a IA pensa