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

# Instalar dependencias
npm install

# Iniciar dev server
npm run dev

# Build para producción
npm run build

📤 Deploy a Gitea

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

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