Mission Control Dashboard - Initial implementation

README.md

@@ -1,3 +1,128 @@
-# mission-control-ui
+# Mission Control UI
 
-Dashboard de Mission Control para OpenClaw
+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*