---
type: Entity
layer: wiki
tags: [stack, dashdescomplicar, painel, mcps, gateway, monitorizacao]
title: "Painel-MCPs"
---

# Painel-MCPs

Painel de estado dos 39 MCPs do ecossistema Descomplicar®. Visualização em tempo real do gateway com categorização, status indicators e refresh manual.

## Responsabilidades

- **Visão Agregada**: Contadores Online / Offline / Disabled / Total
- **Gateway Status**: Indicador de estado do gateway (online/offline)
- **Categorização**: 7 categorias (CRM, Infra, AI, Tools, External, Gateway, Project) com ordenação fixa
- **Detalhe por MCP**: Nome, porta, status, response time, tools count, última verificação
- **Refresh Manual**: Botão "Actualizar" para forçar re-ping
- **Auth Info**: Método de autenticação + expiração do token

## Stack

- **React 19** + TypeScript 5.6
- **Framer Motion**: Stagger + spring animations
- **Lucide React**: Network, Wifi, WifiOff, Server, CheckCircle2, XCircle, Clock
- **Tailwind CSS**: Status colors (emerald=online, red=offline, zinc=disabled), glow effects

## Tipos

- `McpStatus`: name, port, category, enabled, status (online|offline|disabled|unknown), response_time_ms, last_check, tools_count
- `McpDashboard`: gateway_status, total, online, offline, disabled, mcps[], auth

## Componentes

- `StatusIndicator`: Bolinha pulsante (online=emerald glow, offline=red pulse, disabled=zinc)
- `McpCard`: Card individual com status, porta, response time

## API Consumida

| API | Rota | Dados |
|---|---|---|
| MCPs | `GET /api/mcps` | Gateway health + 32 MCPs com cache 60s |

## Localizações

- **Código**: `src/pages/McpMonitor.tsx` (362 linhas)
- **Rota**: `/mcps`

## Dependências

- **Integracao-MCP-Gateway**: Ping aos 32 MCPs via gateway
- **Express-API**: Rota `/api/mcps`
- **Dashboard-Engine**: Layout, navegação

## Estado

- Activo