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). 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 con formulario (y auto-submit JS) para evitar que los “link preview bots” canjeen el token.
  • POST /login valida hash y caducidad; 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.

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=… (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:
  • apps/web servido en app.example.com (o /app).
  • apps/bot mantiene su endpoint de webhook. Compartir .env según necesidad.
• 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, cookie de sesión, redirect limpio; hooks de sesión con idle timeout 2h. — SIGUIENTE
• Páginas de error/expiración.

Etapa 2 — Lectura de datos (MVP)

• 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.