Session 2026-01-20: Frontend Dashboard + MCP + Agents complete

Document completed session:
- Frontend with hierarchical navigation + task deletion
- MCP HTTP endpoints (5 tools)
- Agent with Ubuntu 24.04 + Node 24 + Bun + tooling
- Terminal web at claude.fuq.tv
- All deployed and functional

Prepare next session: Multi-Agent + Terminal Integrated + Auth
- Integrate ttyd+tmux into each agent
- View agent terminals from app.fuq.tv
- MCP authentication by user
- Launch/delete agents from UI

Co-Authored-By: Claude Sonnet 4.5 (1M context) <noreply@anthropic.com>

past-sessions/2026-01-20-frontend-mcp-agents.md

@@ -0,0 +1,237 @@
+# 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