# 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*