taskbot/docs/plan-interfaz-web.md

# Plan de implementación: Interfaz Web (SvelteKit) + Bot/Webhook (separado)

Este documento define el plan para añadir una interfaz web al sistema, manteniendo el bot/webhook existente como proceso independiente y compartiendo la misma base de datos SQLite (WAL). El objetivo es proporcionar al usuario un acceso seguro, rápido y cómodo a sus tareas, configuración y feeds de calendario, con especial atención a la seguridad y a la mínima fricción.

## 1) Decisiones fijadas

- Arquitectura: dos procesos (apps/bot y apps/web) ejecutándose en la misma app de CapRover, con un proxy interno en Bun (puerto 3000) que enruta /webhook y /metrics al bot (3007) y el resto a la web (3008). SvelteKit para la web (SSR, rutas de API, cookies).
- Acceso: enlace mágico por DM con token de 10 minutos, de un solo uso. Sin “recordarme”.
- Sesión: cookie de sesión (HttpOnly, SameSite=Lax, Secure en prod) + expiración por inactividad de servidor de 2 horas.
- Orden por defecto: tareas por creación descendente (más recientes primero).
- ICS:
  - Horizonte temporal: 12 meses.
  - Excluir tareas sin fecha.
  - Feeds:
    - B (por usuario+grupo, solo tareas sin responsable) como opción por defecto, con autogeneración.
    - C (personal multigrupo, solo sin responsable) opcional para power users.
- Monorepo: estructura apps/bot y apps/web. Posible “shared” en el futuro para reutilizar utilidades.

## 2) Alcance funcional (MVP)

- Mis tareas: lista (orden creación desc), filtros (abiertas, vencen pronto), búsqueda por texto simple.
- Tareas de mis grupos: solo grupos permitidos y en los que el usuario está activo; sección destacada de “sin responsable”.
- Preferencias de recordatorios: ver y modificar frecuencia (daily/weekly/weekdays/off) y hora. Visualización de próximo recordatorio según TZ.
- Autenticación: comando /t web que devuelve URL con token. Canje en /login y cookie de sesión.
- Integraciones:
  - ICS personal (solo “mis tareas” con due_date).
  - ICS por usuario+grupo (solo sin responsable), autogenerados (sin clic de creación).
  - ICS personal multigrupo opcional (solo sin responsable).

## 3) Arquitectura técnica

- apps/web (SvelteKit):
  - SSR + endpoints (rutas +server.ts) para login, APIs, ICS.
  - Gestión de cookies/sesión en hooks.server.ts.
  - UI con Svelte (sin framework adicional salvo CSS utilitario si se desea).
- apps/bot:
  - Se mantiene el webhook/servicios actuales.
  - Emisión de tokens de login: puede implementarse desde el bot (insertando en DB) o delegarse al web (si el bot solo notifica al usuario la URL base + token emitido por la web). Para MVP: el bot crea el token directamente en DB y envía la URL.
- Concurrencia DB:
  - SQLite en modo WAL con PRAGMA busy_timeout para ambos procesos. Reutilizar convenciones actuales de PRAGMA.

## 4) Autenticación y sesiones

- Emisión de token (bot):
  - En /t web por DM: crear token aleatorio, guardar hash (no el token en claro), TTL 10 min, uso único, rate-limit por usuario.
  - Devolver URL del tipo: https://app.example.com/login?token=XYZ
- Canje (web):
  - GET /login muestra una página intermedia sin auto-submit; requiere interacción mínima. Un script establece una cookie efímera login_intent y habilita el botón.
  - POST /login valida hash y caducidad y comprueba la cookie login_intent; si ok, invalida el token (marcar usado).
  - Crea sesión en DB (web_sessions) y emite cookie de sesión (solo cookie de sesión, sin persistencia en disco).
  - Redirige a /app (sin token en la URL).
- Expiración:
  - Idle timeout: 2 horas de inactividad. Si excede, pedir un nuevo token /t web.
- Seguridad:
  - Cookies: HttpOnly, SameSite=Lax, Secure (en prod), path acotado.
  - Rate limit en /login para evitar bruteforce de tokens.
  - Redirección inmediata tras canje para evitar fugas por Referer.
  - CSRF: checkOrigin desactivado en SvelteKit debido al proxy interno que reenvía las peticiones (mismo dominio).

## 5) Calendario ICS

- Contenido:
  - Solo tareas con due_date, dentro de los próximos 12 meses.
  - Título con id y descripción, notas con URL a la tarea (opcional).
- Feeds:
  - Personal (usuario): “mis tareas” con due_date.
  - Por usuario+grupo (B, por defecto): “sin responsable” del grupo.
    - Autogeneración: “perezosa” (on-demand) al solicitar listado de feeds en la UI o al primer acceso a la URL; o proactiva (sembrado) mediante tarea que cree un token por cada par usuario+grupo activo. Recomendado: perezosa, con garantía de existencia al cargar la página “Integraciones”.
    - Un feed activo por usuario+grupo (regla de unicidad). Rotación manual por el usuario (revocar y crear nuevo).
  - Personal multigrupo (C, opcional): “sin responsable” agregadas de todos los grupos en los que el usuario esté activo. Un único token; revocable.
- Seguridad y control:
  - Tokens largos, no caducan por tiempo (estilo ICS), siempre revocables.
  - Para B/C: revocación automática al detectar que el usuario dejó de ser miembro activo del grupo (B) o de todos los grupos (C), en conciliaciones de miembros.
  - Rate limit de peticiones por token/IP (ligero) y soporte de ETag/Last-Modified para minimizar carga.

## 6) Estructura del repo (monorepo)

- apps/bot: código actual del webhook, servicios, schedulers, migraciones.
- apps/web: SvelteKit (adapter-node).
- data/: carpeta con la base de datos SQLite compartida (ya existente).
- docs/: documentación (este archivo).
- Opcional futuro: packages/shared para extraer utilidades (normalizeWhatsAppId, métricas, tipos, etc.).

## 7) Migraciones de base de datos (nuevas tablas)

- web_tokens
  - id, user_id, token_hash, created_at, expires_at, used_at (nullable), metadata (JSON opcional).
  - Índices: (user_id), (expires_at), (token_hash único).
- web_sessions
  - id (session_id), user_id, session_hash, created_at, last_seen_at, expires_at (idle cutoff), user_agent, ip (opcional).
  - Índices: (user_id), (expires_at), (session_hash único).
- calendar_tokens
  - id, type (‘personal’, ‘group’, ‘aggregate’), user_id, group_id (nullable), token_hash, created_at, revoked_at (nullable), last_used_at.
  - Unicidad: (type, user_id, group_id) activa (si revoked_at IS NULL).
  - Índices: (user_id), (group_id), (token_hash único).

Notas:
- Guardar siempre hashes de tokens (no tokens en claro).
- Para autogeneración perezosa: crear on-demand si no existe registro activo para (user_id, group_id).

## 8) Endpoints (apps/web)

- Autenticación:
  - GET /login?token=… (página intermedia con gate de JS)
  - POST /login (canjea token, crea sesión, redirige a /app)
  - POST /api/logout (revoca sesión actual)
- APIs (todas requieren sesión válida):
  - GET /api/me/tasks?status=open&search=...&page=...&limit=...
  - GET /api/me/groups (grupos en los que está activo; solo allowed)
  - GET /api/groups/:id/tasks?unassignedFirst=true (respeta gating y membresía)
  - GET /api/me/preferences
  - POST /api/me/preferences (actualiza frecuencia/hora)
  - GET /api/integrations/feeds
    - Genera automáticamente (si faltan) tokens B por cada grupo activo del usuario.
    - Devuelve URLs para: ICS personal (mis tareas), ICS por grupo (B), y opcional ICS multigrupo (C).
  - POST /api/integrations/feeds/rotate { type, groupId? } (revoca y recrea token)
- ICS (no requieren sesión; usan token en la URL):
  - GET /ics/personal/:token.ics
  - GET /ics/group/:token.ics
  - GET /ics/aggregate/:token.ics

## 9) UI (apps/web)

- Páginas:
  - /app (dashboard): “Mis tareas” por defecto.
  - /app/groups: lista de grupos del usuario; en cada uno, “sin responsable” prominente.
  - /app/preferences: frecuencia y hora de recordatorios; vista “próximo recordatorio”.
  - /app/integrations: enlaces ICS
    - Autogenerados: mostrar directamente botones “Copiar” y breve guía (Google/Apple/Outlook).
    - Rotar/revocar: botones por feed. Avisar que rotar invalida suscripción previa.
- Interacciones:
  - Filtros rápidos, búsqueda, paginación liviana.
  - Estado de sesión (2h de inactividad): al expirar, mostrar mensaje con instrucción de enviar /t web.

## 10) Seguridad

- Tokens:
  - Aleatorios criptográficos; hash en DB; TTL 10 min (web_tokens); uso único.
  - calendar_tokens sin TTL (estilo ICS), siempre revocables.
- Cookies: HttpOnly, SameSite=Lax, Secure en prod, path acotado. No almacenar PII en cookies.
- CSRF: bajo riesgo con SameSite y API same-origin; añadir token anti-CSRF a mutaciones como defensa en profundidad.
- Cabeceras:
  - X-Frame-Options: DENY, Referrer-Policy: no-referrer, X-Content-Type-Options: nosniff, Content-Security-Policy básica.
  - Robots: noindex, nofollow.
- Gating:
  - Todas las consultas filtran por user_id y validan AllowedGroups + membresía activa (group_members).
- Logs: nunca registrar tokens en claro; solo hashes o IDs.

## 11) Observabilidad y límites

- Métricas (via Metrics):
  - web_tokens_issued_total, web_tokens_redeemed_total, web_login_success_total, web_login_failed_total
  - web_sessions_active, web_api_requests_total{route=…}, ics_requests_total{type=…}
  - ics_tokens_revoked_total, ics_tokens_created_total
- Rate limiting:
  - Emisión de token /t web (en el bot) y /login (web).
  - ICS por token/IP (p. ej., 4 req/min).
- Caching ICS:
  - ETag/Last-Modified y Cache-Control: public, max-age=300 (suave), para que los clientes no abusen.

## 12) DevOps y despliegue

- Entornos:
  - WEB_BASE_URL, COOKIE_SECRET, SESSION_IDLE_TTL_MIN=120, ICS_HORIZON_MONTHS=12, ICS_RATE_LIMIT, etc.
  - Reutilizar EVOLUTION_API_* donde aplique (si se consulta API desde web).
- Build:
  - SvelteKit con adapter-node; ejecución con Bun o Node en producción.
- Reverse proxy:
  - Un solo contenedor con proxy interno en Bun:
    - /webhook y /metrics → bot (puerto interno 3007).
    - Resto de rutas → web (puerto interno 3008, SvelteKit adapter-node).
    - CapRover debe exponer el puerto 3000 del contenedor (PORT).
    - WEBHOOK_URL debe apuntar a https://<dominio>/webhook (mismo dominio).
- Schedulers:
  - Permanecen en el proceso del bot. apps/web no arranca ningún scheduler.

## 13) Plan de trabajo por etapas

Etapa 0 — Preparación
- Crear estructura apps/web (SvelteKit con adapter-node).
- Configurar ESLint/Prettier y CI mínimos (lint, build).
- Asegurar que la web abre la misma DB (PRAGMAs coherentes).

Etapa 1 — Autenticación
- Migraciones: web_tokens, web_sessions. — HECHO
- Bot: emisión de token de 10 min (hash, rate limit) en /t web. — HECHO
- Web: endpoint /login (GET intermedio + POST canje), cookie de sesión, redirect limpio; hooks de sesión con idle timeout 2h; gate de JS; CSRF checkOrigin desactivado por proxy interno. — HECHO
- Páginas de error/expiración.

Etapa 2 — Lectura de datos (MVP) — EN PROGRESO (API /api/me/tasks y UI básica en /app listas)
- APIs: /api/me/tasks, /api/me/groups, /api/groups/:id/tasks, /api/me/preferences (GET).
- UI: “Mis tareas” y “Grupos” (solo lectura).
- Orden de creación desc, filtros básicos, búsqueda.

Etapa 3 — Preferencias
- APIs: GET/POST /api/me/preferences.
- UI: edición de frecuencia/hora y vista del próximo recordatorio.

Etapa 4 — ICS
- Migraciones: calendar_tokens.
- APIs/UI Integraciones: autogeneración perezosa de feeds B (por usuario+grupo) y C (multigrupo opcional).
- Endpoints ICS: personal, group (B), aggregate (C), con horizonte 12 meses y solo con due_date.
- Revocación/rotación manual. Revocación automática al perder membresía (cron en bot o check dinámico).

Etapa 5 — Pulido y observabilidad
- Métricas, rate limits, ETag/Last-Modified en ICS.
- CSP y cabeceras de seguridad.
- UX: copiar enlace, avisos claros, vacíos de estado.

Etapa 6 — Evolutivos (posteriores)
- Edición de tareas (claim/unassign, fechas).
- Búsqueda avanzada y atajos.
- Notificaciones (SSE/polling).
- Panel admin (opcional).

## 14) Pruebas

- Unit:
  - Emisión/canje de token, expiración, cookie y expiración por inactividad.
  - Autorización de endpoints (gating, membresía).
  - Generación ICS y filtros (due_date, horizonte).
- Integración:
  - Flujo end-to-end: /t web → /login → /app.
  - Listado de feeds y autogeneración B.
- Regresión:
  - Aislar que schedulers solo corran en el bot.

## 15) Riesgos y mitigaciones

- Fuga de enlace de ICS:
  - Tokens largos, revocación sencilla, métricas y rate-limit. Evitar ICS compartido de grupo. B y C permiten revocar por usuario.
- Doble arranque de tareas en web:
  - Flag para no iniciar schedulers en apps/web.
- Concurrencia SQLite:
  - WAL + busy_timeout ya configurados; operaciones ICE (lectura) mayoritarias en web.
- Fricción de login:
  - /t web es rápido; expiración 10 min adecuada; mensajes claros si expira.

## 16) Variables de entorno (propuestas, apps/web)

- WEB_BASE_URL
- COOKIE_SECRET
- SESSION_IDLE_TTL_MIN=120
- ICS_HORIZON_MONTHS=12
- ICS_RATE_LIMIT_PER_MIN=4
- NODE_ENV / BUN_ENV
- (Opcional) METRICS_ENABLED

## 17) Métricas (nombres sugeridos)

- web_tokens_issued_total
- web_tokens_redeemed_total
- web_login_success_total
- web_login_failed_total
- web_sessions_active
- web_api_requests_total{route}
- ics_tokens_created_total{type}
- ics_tokens_revoked_total{type}
- ics_requests_total{type}
- ics_rate_limit_hits_total

Fin del documento.