# Sesión: Frontend Dashboard + MCP + Agentes

**Fecha**: 2026-01-20
**Duración**: ~3 horas
**Objetivo**: Implementar Frontend Dashboard, MCP Server, y desplegar agentes funcionales

---

## ✅ COMPLETADO

### 1. Frontend Dashboard (app.fuq.tv)
- ✅ Dashboard base con React + Vite + Tailwind v4
- ✅ Autenticación session-based (register, login, logout)
- ✅ Componentes: ProjectList, TaskList, AgentStatus
- ✅ StatsCards con métricas clave
- ✅ Modales: CreateProjectModal, CreateTaskModal
- ✅ **Navegación jerárquica**: Projects → Click → Tasks del proyecto
- ✅ **Botón eliminar tasks** con confirmación
- ✅ Build de producción con Vite (chunks, optimización)
- ✅ Desplegado en K8s (2 réplicas)
- ✅ SSL con Let's Encrypt

### 2. Backend API Completado
- ✅ CRUD completo: `/api/projects`, `/api/tasks`, `/api/agents`
- ✅ Auth endpoints: `/api/auth/*` (register, login, logout, me)
- ✅ **MCP HTTP endpoints**: `/api/mcp/*` con 5 herramientas
- ✅ Base de datos: MariaDB con migraciones automáticas
- ✅ Desplegado en K8s (2 réplicas)

### 3. MCP Server (HTTP)
Implementado en `/api/mcp/*`:
- ✅ `POST /get_next_task` - Obtener siguiente tarea del backlog
- ✅ `POST /update_task_status` - Actualizar estado de tarea
- ✅ `POST /create_branch` - Registrar rama Git creada
- ✅ `POST /create_pull_request` - Crear PR en Gitea
- ✅ `POST /ask_user_question` - Marcar tarea como needs_input

**Nota importante**: MCP endpoints son **HTTP REST públicos** (sin autenticación aún). En próxima fase se añadirá auth por usuario.

### 4. Agente Claude Code
- ✅ Imagen mejorada: Ubuntu 24.04 base
- ✅ Herramientas instaladas:
  - Node.js 24.13.0 LTS
  - Bun 1.3.6
  - Python 3.12.3
  - kubectl 1.35.0
  - Git, curl, wget, jq, build-essential
  - Claude Code CLI
- ✅ Desplegado en namespace `agents` (1 réplica)
- ✅ Workspace en `/workspace` (5Gi emptyDir)
- ✅ Variables de entorno configuradas:
  - `BACKEND_URL=https://api.fuq.tv`
  - `MCP_ENDPOINT=https://api.fuq.tv/api/mcp`
  - `GITEA_URL=https://git.fuq.tv`

### 5. Terminal Web Persistente
- ✅ Pod con ttyd + tmux en claude.fuq.tv
- ✅ Sesión persistente (sobrevive recargas)
- ✅ 10GB storage persistente (PVC Longhorn)
- ✅ SSL con Let's Encrypt

### 6. Documentación
- ✅ `agents/AGENT-ACCESS.md` - Guía completa de acceso y uso
- ✅ Flujo de trabajo documentado
- ✅ Ejemplos de uso de MCP endpoints
- ✅ Troubleshooting

---

## 🔧 CAMBIOS TÉCNICOS IMPORTANTES

### Frontend
- Migración de Bun build a **Vite** para producción correcta
- Tailwind v4 con plugin `@tailwindcss/vite`
- Servidor Bun para servir estáticos (no `vite preview`)
- Fix: `import.meta.env` → URLs relativas para API
- Navegación jerárquica mejorada

### Backend
- MCP como **HTTP endpoints** (no stdio)
- Accessible via HTTPS en puerto 443
- Integración con DB para tracking de agentes/tasks
- Actualización automática de agente status al completar tasks

### Agente
- Base cambiada: Alpine → **Ubuntu 24.04**
- Node.js 20 → **Node.js 24 LTS**
- Más herramientas: kubectl, python3, build-essential
- ANTHROPIC_API_KEY ahora opcional (se provee manualmente)

---

## 📊 ESTADO FINAL DEL SISTEMA

| Componente | URL | Estado | Réplicas |
|------------|-----|--------|----------|
| Frontend | https://app.fuq.tv | ✅ Running | 2/2 |
| Backend | https://api.fuq.tv | ✅ Running | 2/2 |
| Agente | K8s agents ns | ✅ Running | 1/1 |
| Terminal Web | https://claude.fuq.tv | ✅ Running | 1/1 |
| Gitea | https://git.fuq.tv | ✅ Running | 1/1 |
| MariaDB | Internal | ✅ Running | 1/1 |
| Redis | Internal | ✅ Running | 1/1 |

---

## ⚠️ LIMITACIONES ACTUALES

### 1. Terminal Web vs Agentes
- `claude.fuq.tv` es un **pod separado** del deployment `claude-agent`
- NO están conectados - son independientes
- Terminal web NO se actualiza automáticamente con nueva imagen de agente

### 2. MCP Sin Autenticación
- Endpoints MCP son **públicos** (cualquiera puede llamarlos)
- No hay asociación usuario ↔ agente
- Falta: Token JWT/session en headers

### 3. Multi-Usuario No Implementado
- Un solo agente global
- No hay aislamiento por usuario
- Falta: Lanzar agentes por usuario desde UI

### 4. Terminal Web No Integrado en UI
- Terminal web es standalone en claude.fuq.tv
- No se puede ver desde app.fuq.tv
- Falta: Iframe/websocket en dashboard para ver terminal de cada agente

---

## 🎯 PRÓXIMA FASE (Identificada)

### Objetivo: Multi-Agent con Terminals Integrados

1. **Integrar Terminal en Cada Agente**
   - Cada agente tiene su propio ttyd + tmux
   - Eliminar pod `claude-terminal` standalone
   - Service por agente exponiendo puerto 7681

2. **UI para Ver Terminals desde Dashboard**
   - Iframe/websocket en app.fuq.tv
   - Click en agente → abre su terminal
   - Múltiples agentes, múltiples terminals

3. **MCP Autenticado**
   - Agregar auth JWT/session a endpoints MCP
   - Cada llamada incluye userId
   - Filtrar tareas/proyectos por usuario

4. **Lanzar Agentes desde UI**
   - Botón "New Agent" en dashboard
   - Crea deployment con nombre único
   - Asocia agente a usuario actual

5. **Agent Pool Management**
   - Ver todos mis agentes
   - Estado: idle/busy/error
   - Eliminar/reiniciar agentes
   - Logs en tiempo real

---

## 🐛 ISSUES ENCONTRADOS Y SOLUCIONADOS

### Frontend
- ❌ HTML servía `[object HTMLBundle]` → ✅ Usar `Bun.file()` correctamente
- ❌ `import.meta.env.PROD` undefined en bundle → ✅ Usar URLs relativas
- ❌ Tailwind utilities no generadas → ✅ Agregar `@tailwindcss/vite` plugin
- ❌ `vite preview` en producción → ✅ Usar `bun server.ts`

### Backend
- ❌ MCP en stdio (no funciona remoto) → ✅ Migrar a HTTP endpoints
- ❌ Port 3100 separado → ✅ Unificar en 3000/443 con path `/api/mcp`

### Agente
- ❌ Pod falla por secret no existe → ✅ Hacer ANTHROPIC_API_KEY opcional
- ❌ Imagen muy básica (Alpine) → ✅ Cambiar a Ubuntu 24.04 con tooling completo

---

## 💡 APRENDIZAJES

### Bun vs Vite
- Bun build aún inmaduro para React producción
- Vite es estándar actual, bien probado
- Mantener Bun para servidor (Bun.serve excelente)

### MCP Design
- stdio MCP solo para local/dev
- Producción en K8s requiere HTTP/WebSocket
- REST endpoints más simples que SDK completo

### Terminal Web Persistente
- tmux + ttyd funciona perfectamente
- PVC necesario para persistencia real
- Separar terminal del agente simplifica debugging

---

## 📁 COMMITS PRINCIPALES

1. `8b5f75a` - Enhance frontend dashboard with stats, modals, and actions
2. `08e6f66` - Add HTTP MCP endpoints for agent communication
3. `2b06c8c` - Upgrade agent image to Ubuntu 24.04 with full dev tooling
4. `0ac1355` - Improve UI: hierarchical navigation + task deletion
5. `924bf22` - Add agent access documentation and MCP usage guide

---

## 🔗 REFERENCIAS

- Frontend: `git.fuq.tv/admin/aiworker-frontend`
- Backend: `git.fuq.tv/admin/aiworker-backend`
- Agente: `git.fuq.tv/admin/aiworker-agent`
- Docs: `agents/AGENT-ACCESS.md`

---

## ✅ CHECKLIST DE SESIÓN

- [x] Frontend deployado en https://app.fuq.tv
- [x] Login/Register funcionando
- [x] Dashboard muestra proyectos y tareas jerárquicamente
- [x] Tasks se pueden eliminar
- [x] Backend con MCP endpoints funcionando
- [x] Agente corriendo en namespace `agents`
- [x] Agente con tooling completo (Node 24, Bun, Python, kubectl)
- [x] Terminal web accesible en https://claude.fuq.tv
- [x] Código commitado en 3 repos (frontend, backend, agents)
- [x] Builds exitosos en Gitea Actions
- [x] Imágenes en registry
- [x] Documentación completa

---

**Estado**: ✅ Sesión completada exitosamente
**Siguiente**: Multi-Agent + Terminal Integrado + MCP Auth