129 lines
3.5 KiB
Markdown
129 lines
3.5 KiB
Markdown
# Mission Control UI
|
|
|
|
Dashboard de coordinación de agentes para OpenClaw.
|
|
|
|
## 🚀 Stack Tecnológico
|
|
|
|
- **React 18** + TypeScript
|
|
- **Vite** - Build tool
|
|
- **Tailwind CSS 3** - Estilización
|
|
- **Framer Motion** - Animaciones
|
|
- **Lucide React** - Iconos
|
|
- **shadcn/ui** (Radix UI) - Componentes base
|
|
|
|
## 🎨 Diseño
|
|
|
|
### Tema Oscuro / Centro de Control
|
|
- Background principal: `#0A0A0F`
|
|
- Capas de profundidad: `#12121A`, `#1A1A24`
|
|
- Grid lines tipo blueprint de fondo
|
|
- Glassmorphism sutil con backdrop-blur
|
|
- Glow effects en elementos activos
|
|
|
|
### Sistema de Colores Semántico
|
|
| Color | Significado |
|
|
|-------|-------------|
|
|
| Verde | `active` - Agente trabajando |
|
|
| Rojo | `blocked` - Agente bloqueado |
|
|
| Amarillo | `thinking` - Agente procesando |
|
|
| Gris | `idle` - Agente inactivo |
|
|
| Azul | `completed` - Tarea completada |
|
|
|
|
## 📁 Estructura
|
|
|
|
```
|
|
mission-control-ui/
|
|
├── src/
|
|
│ ├── components/
|
|
│ │ ├── AgentNode.tsx # Nodo de agente individual
|
|
│ │ ├── AgentDetailPanel.tsx # Panel de detalle
|
|
│ │ ├── ConnectionsLayer.tsx # Líneas de conexión SVG
|
|
│ │ ├── Timeline.tsx # Timeline colapsable
|
|
│ │ ├── SearchAndFilters.tsx # Búsqueda y filtros
|
|
│ │ ├── StatusBar.tsx # Barra de estado
|
|
│ │ └── MissionControlDashboard.tsx # Componente principal
|
|
│ ├── data/
|
|
│ │ └── agents.ts # Datos de agentes y conexiones
|
|
│ ├── types/
|
|
│ │ └── agent.ts # Tipos TypeScript
|
|
│ └── lib/
|
|
│ └── utils.ts # Utilidades (cn)
|
|
├── tailwind.config.js
|
|
└── package.json
|
|
```
|
|
|
|
## 👥 Agentes
|
|
|
|
| Agente | Rol | Descripción |
|
|
|--------|-----|-------------|
|
|
| 🎯 Erwin | Orquestador | Coordina y delega tareas |
|
|
| 🏗️ Bulma | Arquitecto | Diseña sistemas y arquitectura |
|
|
| 🚀 Rocket | Desarrollador | Implementa código |
|
|
| 🎨 Hiro | Diseñador | UI/UX y experiencia |
|
|
| 🔍 Sherlock | Revisor | Revisión y validación |
|
|
| 📝 Claudia | Asistente | Documentación |
|
|
|
|
## ✨ Features
|
|
|
|
- **Mapa de agentes** con posiciones visuales
|
|
- **Hover highlighting** - Resalta todas las conexiones al pasar sobre un agente
|
|
- **Nodos pulsando** - Animación para agentes activos
|
|
- **Líneas "fluyendo"** - Animación en conexiones activas
|
|
- **Timeline colapsable** - Historial de actividad
|
|
- **Búsqueda y filtros** - Por nombre, rol, estado, tarea
|
|
|
|
## 🚀 Desarrollo
|
|
|
|
```bash
|
|
# Instalar dependencias
|
|
npm install
|
|
|
|
# Iniciar dev server
|
|
npm run dev
|
|
|
|
# Build para producción
|
|
npm run build
|
|
```
|
|
|
|
## 📤 Deploy a Gitea
|
|
|
|
```bash
|
|
# 1. Agregar login de Gitea (requiere token API)
|
|
tea login add --name=gitea --url=https://gitea.danielarroyo.cl --token=TU_TOKEN
|
|
|
|
# 2. Crear repo en la org proyectos
|
|
tea repos create --name mission-control-ui --org proyectos --description "Dashboard de Mission Control para OpenClaw" --init
|
|
|
|
# 3. Agregar remote
|
|
git remote add origin https://gitea.danielarroyo.cl/proyectos/mission-control-ui.git
|
|
|
|
# 4. Push
|
|
git push -u origin master
|
|
```
|
|
|
|
## 📋 API de Agentes
|
|
|
|
El dashboard espera datos del sistema OpenClaw. Para integrar con el backend:
|
|
|
|
```typescript
|
|
interface Agent {
|
|
id: string
|
|
name: string
|
|
role: AgentRole
|
|
status: AgentStatus
|
|
position: { x: number; y: number }
|
|
avatar?: string
|
|
currentTask?: string
|
|
connections: string[]
|
|
stats: {
|
|
tasksCompleted: number
|
|
tasksInProgress: number
|
|
tasksBlocked: number
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
*Sistema de Coordinación de Agentes — OpenClaw Team*
|