Merge branch 'main' into franco

backend/docs/AUTH.md

@@ -47,6 +47,14 @@ Sembrados por `prisma/seed.js` (idempotente, se puede re-ejecutar):
 
 ## 4. Endpoints
 
+> Resumen rápido:
+>
+> | Método | Path | Auth | Descripción |
+> |---|---|---|---|
+> | `POST` | `/api/v1/auth/login`  | No | Obtener JWT |
+> | `GET`  | `/api/v1/auth/me`     | Bearer | Perfil del usuario autenticado |
+> | `POST` | `/api/v1/auth/logout` | Bearer | Invalidar token activo |
+
 ### `GET /api/v1/health`
 
 Sanity check. Respuesta:
@@ -107,6 +115,26 @@ Errores:
 |---|---|---|
 | `401` | `UNAUTHORIZED` | Sin header, token mal formado, expirado, manipulado, o usuario desactivado |
 
+### `POST /api/v1/auth/logout`
+
+Requiere header `Authorization: Bearer <token>`. Invalida el token activo añadiendo su `jti` a la denylist en memoria — cualquier request posterior con ese token recibirá `401 UNAUTHORIZED`.
+
+El cliente debe descartar el token en cuanto reciba la respuesta.
+
+Respuesta `200`:
+
+```json
+{ "ok": true, "data": { "message": "Logged out successfully" } }
+```
+
+Errores:
+
+| HTTP | code | cuándo |
+|---|---|---|
+| `401` | `UNAUTHORIZED` | Sin header, token mal formado, expirado, manipulado, o ya invalidado |
+
+> **Nota:** la denylist es en memoria; si el servidor se reinicia los tokens previos al reinicio quedan tecnicamente activos, pero expirarán solos en máx 1 h (TTL del JWT).
+
 ## 5. Ejemplos con `curl`
 
 ```bash
@@ -117,15 +145,24 @@ TOKEN=$(curl -s -X POST http://localhost:7860/api/v1/auth/login \
   | jq -r '.data.token')
 
 # 2) Llamar a /me con el token
+curl -s http://localhost:7860/api/v1/auth/me \
+  -H "Authorization: Bearer $TOKEN" | jq
+
+# 3) Logout (invalida el token)
+curl -s -X POST http://localhost:7860/api/v1/auth/logout \
+  -H "Authorization: Bearer $TOKEN" | jq
+
+# 4) Verificar que el token ya no funciona (debe devolver 401)
 curl -s http://localhost:7860/api/v1/auth/me \
   -H "Authorization: Bearer $TOKEN" | jq
 ```
 
-## 6. Login desde el frontend (referencia)
+## 6. Login / Logout desde el frontend (referencia)
 
-El JWT es opaco para el front: basta con guardarlo (sessionStorage o estado en memoria) y enviarlo en cada request protegido.
+El JWT es opaco para el front: basta con guardarlo (sessionStorage o estado en memoria) y enviarlo en cada request protegido. Al hacer logout, llamar al endpoint **antes** de descartar el token localmente para que quede invalidado en el servidor.
 
 ```js
+// Login
 const res = await fetch('/api/v1/auth/login', {
   method: 'POST',
   headers: { 'Content-Type': 'application/json' },
@@ -134,10 +171,17 @@ const res = await fetch('/api/v1/auth/login', {
 const json = await res.json();
 if (!json.ok) throw new Error(json.error.code);
 const { token, user } = json.data;
-// guardar token y user
+// guardar token y user en estado / sessionStorage
 
-// requests autenticados
+// Requests autenticados
 fetch('/api/v1/auth/me', { headers: { Authorization: `Bearer ${token}` } });
+
+// Logout
+await fetch('/api/v1/auth/logout', {
+  method: 'POST',
+  headers: { Authorization: `Bearer ${token}` },
+});
+// descartar token del estado / sessionStorage
 ```
 
 > En dev, Vite proxea `/api/*` al backend (`localhost:7860`); no hace falta CORS si va por el proxy, pero ya está configurado por si el front llama directo.

backend/package.json

@@ -14,6 +14,7 @@
     "db:migrate": "prisma migrate dev",
     "db:generate": "prisma generate",
     "db:seed": "node prisma/seed.js",
+    "db:reset": "prisma migrate reset --force",
     "db:studio": "prisma studio"
   },
   "dependencies": {

backend/prisma/migrations/20260516071158_init_auth/migration.sql

@@ -3,7 +3,6 @@ CREATE TABLE "User" (
     "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
     "email" TEXT NOT NULL,
     "passwordHash" TEXT NOT NULL,
-    "role" TEXT NOT NULL DEFAULT 'user',
     "isActive" BOOLEAN NOT NULL DEFAULT true,
     "telegramChatId" TEXT,
     "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
@@ -20,6 +19,11 @@ CREATE TABLE "Market" (
     "noPrice" REAL,
     "volumeEur" REAL,
     "liquidityEur" REAL,
+    "spread" REAL,
+    "bestBid" REAL,
+    "bestAsk" REAL,
+    "clobTokenId" TEXT,
+    "analyzable" BOOLEAN NOT NULL DEFAULT true,
     "status" TEXT NOT NULL DEFAULT 'active',
     "closesAt" DATETIME,
     "lastSynced" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
@@ -35,6 +39,9 @@ CREATE TABLE "AISignal" (
     "keyRisk" TEXT,
     "newsCount" INTEGER NOT NULL DEFAULT 0,
     "modelVersion" TEXT NOT NULL DEFAULT 'Qwen3-8B',
+    "impliedProb" REAL,
+    "fairProb" REAL,
+    "edgePoints" REAL,
     "generatedAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
     CONSTRAINT "AISignal_marketId_fkey" FOREIGN KEY ("marketId") REFERENCES "Market" ("id") ON DELETE CASCADE ON UPDATE CASCADE
 );

backend/src/app.js

@@ -34,6 +34,7 @@ import positionsRoutes from './positions/positions.routes.js';
 import watchlistRoutes from './watchlist/watchlist.routes.js';
 import alertsRoutes from './alerts/alerts.routes.js';
 import statsRoutes from './stats/stats.routes.js';
+import preferencesRoutes from './preferences/preferences.routes.js';
 import { notFound } from './middlewares/notFound.js';
 import { errorHandler } from './middlewares/errorHandler.js';
 
@@ -63,11 +64,12 @@ app.use('/api/v1/positions', positionsRoutes);
 app.use('/api/v1/watchlist', watchlistRoutes);
 app.use('/api/v1/alerts', alertsRoutes);
 app.use('/api/v1/stats', statsRoutes);
+app.use('/api/v1/preferences', preferencesRoutes);
 
 // Servir frontend estático en producción (HuggingFace Spaces)
 if (config.NODE_ENV === 'production') {
   app.use(express.static('../frontend/dist'));
-  app.get('*', (_req, res) => {
+  app.get('/{*path}', (_req, res) => {
     res.sendFile('index.html', { root: '../frontend/dist' });
   });
 }

backend/src/auth/auth.controller.js

@@ -2,17 +2,20 @@
  * Controladores del modulo de autenticacion.
  *
  * Responsabilidades:
- *   - login  → recibir credenciales, delegar validacion a auth.service.js,
- *              responder con { token, user }.
- *   - me     → devolver el usuario autenticado extraido del JWT (req.user).
+ *   - login   → recibir credenciales, delegar validacion a auth.service.js,
+ *               responder con { token, user }.
+ *   - me      → devolver el usuario autenticado extraido del JWT (req.user).
+ *   - logout  → invalidar el token activo (jti + exp extraidos del payload JWT
+ *               ya verificado por requireAuth); responder 200 con mensaje.
  *
  * Errores:
  *   - 401 INVALID_CREDENTIALS → email o password incorrectos (mensaje generico).
- *   - 401 UNAUTHORIZED        → token invalido o ausente (en requireAuth).
+ *   - 401 UNAUTHORIZED        → token invalido, ausente o ya invalidado (en requireAuth).
  */
 
 import * as authService from './auth.service.js';
 import { ok } from '../utils/apiResponse.js';
+import { verifyToken } from './jwt.js';
 
 export const login = async (req, res) => {
   const data = await authService.login(req.body);
@@ -28,7 +31,9 @@ export const me = async (req, res) => {
   ok(res, { user: req.user });
 };
 
-export const updateTelegram = async (req, res) => {
-  const data = await authService.updateTelegram(req.user.id, req.body);
-  ok(res, data);
+export const logout = (req, res) => {
+  const token = req.headers.authorization.slice('Bearer '.length).trim();
+  const payload = verifyToken(token);
+  authService.logout({ jti: payload.jti, exp: payload.exp });
+  ok(res, { message: 'Logged out successfully' });
 };

backend/src/auth/auth.routes.js

@@ -12,6 +12,11 @@
  *     → requireAuth
  *     → authController.me
  *     → Devuelve el usuario autenticado (req.user).
+ *
+ *   POST /api/v1/auth/logout
+ *     → requireAuth (verifica token valido y no bloqueado)
+ *     → authController.logout
+ *     → Invalida el jti del token en la denylist; responde 200.
  */
 
 import { Router } from 'express';
@@ -26,6 +31,6 @@ const router = Router();
 router.post('/login', rateLimitLogin, validate(loginSchema), ctrl.login);
 router.post('/register', validate(registerSchema), ctrl.register);
 router.get('/me', requireAuth, ctrl.me);
-router.put('/telegram', requireAuth, ctrl.updateTelegram);
+router.post('/logout', requireAuth, ctrl.logout);
 
 export default router;

backend/src/auth/auth.service.js

@@ -2,23 +2,27 @@
  * Logica de negocio del modulo de autenticacion.
  *
  * Responsabilidades:
- *   - login({ email, password }) → buscar usuario, comparar hash con bcrypt,
+ *   - login({ email, password })  → buscar usuario, comparar hash con bcrypt,
  *     verificar que este activo (isActive) y firmar JWT.
+ *   - logout({ jti, exp })        → invalidar el token activo anadiendo su jti
+ *     a la denylist en memoria hasta su expiracion original.
  *
  * Seguridad:
- *   - Mensaje generico en fallo ("Email or password is incorrect")
+ *   - Mensaje generico en fallo de login ("Email or password is incorrect")
  *     para no revelar si el email existe.
  *   - Bcrypt con salt rounds configurable (BCRYPT_ROUNDS, default 10).
  *   - JWT firmado con HS256 y expiracion (JWT_EXPIRES_IN).
+ *   - Logout invalida el jti del token; el cliente debe descartar el token.
  *
  * Devuelve:
- *   { token: string, user: { id, email } }
+ *   login  → { token: string, user: { id, email } }
+ *   logout → void
  */
 
 import bcrypt from 'bcryptjs';
 import { prisma } from '../utils/prisma.js';
 import { HttpError } from '../utils/apiResponse.js';
-import { signToken } from './jwt.js';
+import { signToken, addToDenylist } from './jwt.js';
 
 const INVALID_CREDENTIALS = new HttpError(401, 'INVALID_CREDENTIALS', 'Email or password is incorrect');
 
@@ -66,16 +70,6 @@ export const register = async ({ email, password }) => {
   };
 };
 
-export const updateTelegram = async (userId, { telegramBotToken, telegramChatId, telegramAlertsEnabled }) => {
-  const data = {};
-  if (telegramBotToken !== undefined) data.telegramBotToken = telegramBotToken || null;
-  if (telegramChatId !== undefined) data.telegramChatId = telegramChatId || null;
-  if (telegramAlertsEnabled !== undefined) data.telegramAlertsEnabled = !!telegramAlertsEnabled;
-
-  const user = await prisma.user.update({
-    where: { id: userId },
-    data,
-  });
-
-  return { user: buildUserResponse(user) };
+export const logout = ({ jti, exp }) => {
+  if (jti && exp) addToDenylist(jti, exp);
 };

backend/src/auth/jwt.js

@@ -2,26 +2,58 @@
  * Helpers para firmar y verificar tokens JWT.
  *
  * Responsabilidades:
- *   - signToken(payload)  → firma un token HS256 con expiracion configurable.
- *   - verifyToken(token)  → verifica firma, expiracion y algoritmo (solo HS256).
+ *   - signToken(payload)        → firma un token HS256 con expiracion configurable.
+ *                                 Incluye claim `jti` (UUID v4) para poder invalidarlo.
+ *   - verifyToken(token)        → verifica firma, expiracion y algoritmo (solo HS256).
+ *   - addToDenylist(jti, exp)   → anota el jti como invalidado hasta su expiracion.
+ *   - isBlocked(jti)            → true si el jti esta en la denylist.
+ *   - pruneExpiredDenylist()    → elimina entradas ya expiradas (llamado en cada logout).
+ *
+ * Denylist:
+ *   - En memoria (Map<jti, expEpochMs>). Sin persistencia entre reinicios.
+ *   - Aceptable porque el TTL del token es 1h; al reiniciar el servidor
+ *     cualquier token antiguo expirara por si solo antes de que importe.
  *
  * Consumido por:
- *   - auth.service.js   → al hacer login exitoso.
- *   - requireAuth.js    → en cada peticion protegida.
+ *   - auth.service.js   → signToken al hacer login; addToDenylist al hacer logout.
+ *   - requireAuth.js    → verifyToken + isBlocked en cada peticion protegida.
  *
  * Configuracion:
  *   - JWT_SECRET    : minimo 32 chars (validado en config.js).
  *   - JWT_EXPIRES_IN: default '1h'.
  */
 
+import { randomUUID } from 'node:crypto';
 import jwt from 'jsonwebtoken';
 import { config } from '../config.js';
 
+/** @type {Map<string, number>} jti → expiry timestamp (ms) */
+const denylist = new Map();
+
 export const signToken = (payload) =>
-  jwt.sign(payload, config.JWT_SECRET, {
+  jwt.sign({ ...payload, jti: randomUUID() }, config.JWT_SECRET, {
     algorithm: 'HS256',
     expiresIn: config.JWT_EXPIRES_IN,
   });
 
 export const verifyToken = (token) =>
   jwt.verify(token, config.JWT_SECRET, { algorithms: ['HS256'] });
+
+export const addToDenylist = (jti, exp) => {
+  pruneExpiredDenylist();
+  denylist.set(jti, exp * 1000);
+};
+
+export const isBlocked = (jti) => {
+  const exp = denylist.get(jti);
+  if (exp === undefined) return false;
+  if (Date.now() > exp) { denylist.delete(jti); return false; }
+  return true;
+};
+
+export const pruneExpiredDenylist = () => {
+  const now = Date.now();
+  for (const [jti, exp] of denylist) {
+    if (now > exp) denylist.delete(jti);
+  }
+};

backend/src/config.js

@@ -32,6 +32,7 @@ const schema = z.object({
   HF_SPACE_MODERNFINBERT_URL: z.string().optional(),
   HF_SPACE_QWEN_URL: z.string().optional(),
   OPENROUTER_API_KEY: z.string().optional(),
+  DEEPSEEK_API_KEY: z.string().optional(),
   FINNHUB_API_KEY: z.string().optional(),
 });
 

backend/src/middlewares/requireAuth.js

@@ -4,19 +4,22 @@
  * Responsabilidades:
  *   - Extraer el header Authorization: Bearer <token>.
  *   - Verificar la firma y expiracion del token con jwt.verify().
+ *   - Comprobar que el jti no este en la denylist (logout previo).
  *   - Buscar el usuario en la base de datos y comprobar que esta activo (isActive).
  *   - Adjuntar req.user para que controladores y servicios posteriores lo usen.
  *
  * Rutas protegidas:
  *   - Todas bajo /positions, /watchlist, /alerts.
  *   - GET /auth/me.
+ *   - POST /auth/logout.
  *
- * Si falta token, es invalido o el usuario no existe/inactivo → 401 UNAUTHORIZED.
+ * Si falta token, es invalido, fue invalidado por logout, o el usuario
+ * no existe/inactivo → 401 UNAUTHORIZED.
  */
 
-import { verifyToken } from "../auth/jwt.js";
-import { prisma } from "../utils/prisma.js";
-import { HttpError } from "../utils/apiResponse.js";
+import { verifyToken, isBlocked } from '../auth/jwt.js';
+import { prisma } from '../utils/prisma.js';
+import { HttpError } from '../utils/apiResponse.js';
 
 const UNAUTHORIZED = new HttpError(
   401,
@@ -33,6 +36,9 @@ export const requireAuth = async (req, _res, next) => {
     if (!token) throw UNAUTHORIZED;
 
     const payload = verifyToken(token);
+
+    if (payload.jti && isBlocked(payload.jti)) throw UNAUTHORIZED;
+
     const user = await prisma.user.findUnique({
       where: { id: payload.sub },
       //select: { id: true, email: true, isActive: true, createdAt: true },

backend/src/preferences/preferences.routes.js

@@ -0,0 +1,18 @@
+import { Router } from 'express';
+import { getPrefs, setPrefs } from './preferences.store.js';
+import { ok } from '../utils/apiResponse.js';
+
+const router = Router();
+
+router.get('/', (_req, res) => {
+  const prefs = getPrefs();
+  ok(res, { ...prefs, apiKey: prefs.apiKey ? '***' : '' });
+});
+
+router.put('/', (req, res) => {
+  const { mode, provider, apiKey, endpoint, model } = req.body;
+  const updated = setPrefs({ mode, provider, apiKey, endpoint, model });
+  ok(res, { ...updated, apiKey: updated.apiKey ? '***' : '' });
+});
+
+export default router;

backend/src/preferences/preferences.store.js

@@ -0,0 +1,25 @@
+const defaults = {
+  mode: 'auto',          // 'auto' | 'external' | 'local' | 'custom'
+  provider: 'deepseek',  // for external: 'deepseek' | 'openrouter' | 'huggingface'
+  apiKey: '',
+  endpoint: 'http://localhost:11434',
+  model: 'qwen3:8b',
+};
+
+let _prefs = { ...defaults };
+
+export function getPrefs() {
+  return { ..._prefs };
+}
+
+export function setPrefs(updates) {
+  const allowed = ['mode', 'provider', 'apiKey', 'endpoint', 'model'];
+  for (const key of allowed) {
+    if (key in updates && updates[key] != null) {
+      _prefs[key] = String(updates[key]);
+    }
+  }
+  if (!['auto', 'external', 'local', 'custom'].includes(_prefs.mode)) _prefs.mode = 'auto';
+  if (!['deepseek', 'openrouter', 'huggingface'].includes(_prefs.provider)) _prefs.provider = 'deepseek';
+  return { ..._prefs };
+}

backend/src/signals/aiPipeline.js

@@ -23,12 +23,17 @@ import { config } from '../config.js';
 import { logger } from '../utils/logger.js';
 import { fetchFinancialNewsForMarket, filterNewsByRelevance } from '../finnhub/finnhub.service.js';
 import { analyzeCryptoTarget } from '../utils/coingecko.client.js';
+import { getPrefs } from '../preferences/preferences.store.js';
 
 const HF_API = 'https://api-inference.huggingface.co/models';
 const FINBERT_MODEL = 'ProsusAI/finbert';
 const QWEN_MODEL = 'Qwen/Qwen3-8B';
 const OPENROUTER_API = 'https://openrouter.ai/api/v1/chat/completions';
 const OPENROUTER_MODEL = 'deepseek/deepseek-chat';
+const DEEPSEEK_API = 'https://api.deepseek.com/chat/completions';
+const DEEPSEEK_MODEL = 'deepseek-chat';
+const OLLAMA_API = 'http://localhost:11434/api/generate';
+const OLLAMA_MODEL = 'qwen3.5:9b';
 
 // Clientes Gradio en cache para Spaces
 let modernFinBERTClient = null;
@@ -239,6 +244,63 @@ async function generateWithOpenRouter(market, headlines, cryptoContext = null) {
   return data;
 }
 
+async function generateWithDeepSeek(market, headlines, cryptoContext = null) {
+  const content = await callChatCompletion(
+    DEEPSEEK_API,
+    DEEPSEEK_MODEL,
+    [{ role: 'user', content: buildPrompt(market, headlines, cryptoContext) }],
+    `Bearer ${config.DEEPSEEK_API_KEY}`,
+  );
+  const data = content ? extractJson(content) : null;
+  if (data) data.modelVersion = 'DeepSeek API';
+  return data;
+}
+
+function buildOllamaPrompt(market, headlines, cryptoContext = null) {
+  const newsSection = headlines.length
+    ? `News:\n${headlines.map((h) => `- ${h.headline}`).join('\n')}`
+    : 'No relevant news.';
+
+  const yes = market.yesPrice;
+  const priceContext = yes != null
+    ? `Implied YES probability: ${(yes * 100).toFixed(1)}%.`
+    : '';
+
+  const daysToClose = market.closesAt
+    ? Math.max(0, Math.ceil((new Date(market.closesAt) - Date.now()) / (1000 * 60 * 60 * 24)))
+    : null;
+  const timeSection = daysToClose != null ? `Days to resolution: ${daysToClose}.` : '';
+
+  return [
+    `Market: "${market.question}"`,
+    `Category: ${market.category ?? 'general'}`,
+    `YES price: ${yes ?? 'N/A'} | NO price: ${market.noPrice ?? 'N/A'}`,
+    priceContext,
+    timeSection,
+    newsSection,
+    ``,
+    `Return ONLY JSON: {"signal":"bullish"|"bearish"|"neutral","confidence":0.0-1.0,"summary":"<2 sentences>","keyRisk":"<1 sentence>"}`,
+  ].join('\n');
+}
+
+async function generateWithOllama(market, headlines, cryptoContext = null) {
+  const userPrompt = buildOllamaPrompt(market, headlines, cryptoContext);
+  const body = {
+    model: OLLAMA_MODEL,
+    messages: [
+      { role: 'system', content: 'You are a concise prediction-market trader. Always respond with ONLY the requested JSON. DO NOT think. DO NOT use <think> tags. DO NOT explain your reasoning. Output raw JSON only.' },
+      { role: 'user', content: userPrompt },
+    ],
+    stream: false,
+    options: { temperature: 0.3, num_predict: 1200 },
+  };
+  const res = await httpPost('http://localhost:11434/api/chat', body, { timeout: 180_000, retries: 0 });
+  const content = res?.message?.content ?? null;
+  const data = content ? extractJson(content) : null;
+  if (data) data.modelVersion = 'Ollama Qwen3.5';
+  return data;
+}
+
 // ── rule-based fallback ───────────────────────────────────────────────────────
 
 function ruleBasedSignal(market) {
@@ -291,6 +353,65 @@ function normalizeSignal(result) {
   return result;
 }
 
+// ── User-configured model ────────────────────────────────────────────────────
+
+async function generateWithUserPrefs(market, headlines, cryptoContext, prefs) {
+  const { mode, provider, apiKey, endpoint, model } = prefs;
+
+  if (mode === 'external') {
+    const cfgMap = {
+      deepseek:    { url: DEEPSEEK_API,                                     mdl: DEEPSEEK_MODEL,   label: 'DeepSeek (usuario)' },
+      openrouter:  { url: OPENROUTER_API,                                   mdl: OPENROUTER_MODEL,  label: 'OpenRouter (usuario)' },
+      huggingface: { url: `${HF_API}/${QWEN_MODEL}/v1/chat/completions`,    mdl: QWEN_MODEL,        label: 'HuggingFace (usuario)' },
+    };
+    const cfg = cfgMap[provider];
+    if (!cfg || !apiKey) return null;
+    const content = await callChatCompletion(
+      cfg.url,
+      cfg.mdl,
+      [{ role: 'user', content: buildPrompt(market, headlines, cryptoContext) }],
+      `Bearer ${apiKey}`,
+    );
+    const data = content ? extractJson(content) : null;
+    if (data) data.modelVersion = cfg.label;
+    return data;
+  }
+
+  if (mode === 'local') {
+    const base = (endpoint || 'http://localhost:11434').replace(/\/$/, '');
+    const mdl  = model || OLLAMA_MODEL;
+    const body = {
+      model: mdl,
+      messages: [
+        { role: 'system', content: 'You are a concise prediction-market trader. Always respond with ONLY the requested JSON. DO NOT use <think> tags. Output raw JSON only.' },
+        { role: 'user', content: buildOllamaPrompt(market, headlines, cryptoContext) },
+      ],
+      stream: false,
+      options: { temperature: 0.3, num_predict: 1200 },
+    };
+    const res = await httpPost(`${base}/api/chat`, body, { timeout: 180_000, retries: 0 });
+    const content = res?.message?.content ?? null;
+    const data = content ? extractJson(content) : null;
+    if (data) data.modelVersion = `Local ${mdl}`;
+    return data;
+  }
+
+  if (mode === 'custom') {
+    if (!endpoint) return null;
+    const content = await callChatCompletion(
+      endpoint,
+      model || 'default',
+      [{ role: 'user', content: buildPrompt(market, headlines, cryptoContext) }],
+      apiKey ? `Bearer ${apiKey}` : '',
+    );
+    const data = content ? extractJson(content) : null;
+    if (data) data.modelVersion = `Custom ${model || 'endpoint'}`;
+    return data;
+  }
+
+  return null;
+}
+
 // ── public API ────────────────────────────────────────────────────────────────
 
 /**
@@ -333,10 +454,44 @@ export async function run(market) {
   }
 
   // Paso 2: generacion de senal LLM con cadena de respaldo
+  // ORDEN: preferencias usuario → DeepSeek → OpenRouter → HF Space → HF directa → Ollama → regla
   let result = null;
 
-  // Intenta Space primero
-  if (config.HF_SPACE_QWEN_URL) {
+  // 0. Modelo configurado por el usuario (si no es 'auto')
+  const prefs = getPrefs();
+  if (prefs.mode !== 'auto') {
+    try {
+      result = await generateWithUserPrefs(market, headlines, cryptoContext, prefs);
+      result = normalizeSignal(result);
+      if (!validateSignal(result)) result = null;
+    } catch (err) {
+      logger.warn({ err: err.message, mode: prefs.mode, marketId: market.id }, 'User model failed, falling back to auto chain');
+      result = null;
+    }
+  }
+
+  // 1. DeepSeek API directa primero
+  if (!result && config.DEEPSEEK_API_KEY) {
+    try {
+      result = await generateWithDeepSeek(market, headlines, cryptoContext);
+      if (!validateSignal(result)) result = null;
+    } catch (err) {
+      logger.warn({ err: err.message, status: err.status, marketId: market.id }, 'DeepSeek API failed, trying OpenRouter');
+    }
+  }
+
+  // 2. OpenRouter DeepSeek
+  if (!result && config.OPENROUTER_API_KEY) {
+    try {
+      result = await generateWithOpenRouter(market, headlines, cryptoContext);
+      if (!validateSignal(result)) result = null;
+    } catch (err) {
+      logger.warn({ err: err.message, status: err.status, marketId: market.id }, 'OpenRouter DeepSeek failed, trying HF Space');
+    }
+  }
+
+  // 3. Respaldo a HF Space
+  if (!result && config.HF_SPACE_QWEN_URL) {
     try {
       result = await generateWithQwenSpace(market, headlines, cryptoContext);
       result = normalizeSignal(result);
@@ -346,23 +501,23 @@ export async function run(market) {
     }
   }
 
-  // Respaldo a API directa de HF
+  // 4. Respaldo a API directa de HF
   if (!result && config.HF_TOKEN) {
     try {
       result = await generateWithQwen3Direct(market, headlines, cryptoContext);
       if (!validateSignal(result)) result = null;
     } catch (err) {
-      logger.warn({ err: err.message, marketId: market.id }, 'Qwen3 direct API failed, trying OpenRouter');
+      logger.warn({ err: err.message, marketId: market.id }, 'Qwen3 direct API failed, trying Ollama');
     }
   }
 
-  // Respaldo a OpenRouter
-  if (!result && config.OPENROUTER_API_KEY) {
+  // 5. Ollama local (lento pero gratuito)
+  if (!result) {
     try {
-      result = await generateWithOpenRouter(market, headlines, cryptoContext);
+      result = await generateWithOllama(market, headlines, cryptoContext);
       if (!validateSignal(result)) result = null;
     } catch (err) {
-      logger.warn({ err: err.message, status: err.status, marketId: market.id }, 'OpenRouter failed, using rule-based');
+      logger.warn({ err: err.message, marketId: market.id }, 'Ollama failed, using rule-based');
     }
   }
 

frontend/dist/index.html

@@ -5,11 +5,65 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>PolySignal — Dashboard de Inteligencia de Mercados</title>
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-  <script type="module" crossorigin src="/assets/index-CjgKC2Lf.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-Bq1dV2vj.css">
+  <script type="module" crossorigin src="/assets/index-DlrMXyLG.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-o2OJjwyL.css">
 </head>
 <body>
-  <div id="app" class="layout">
+  <!-- Auth Page (shown when unauthenticated) -->
+  <div id="view-auth" class="auth-view hidden">
+    <div class="auth-card">
+      <div class="auth-header">
+        <div class="auth-logo">
+          <div class="logo-dot"></div>
+          <span class="logo-text">PolySignal</span>
+        </div>
+        <p class="auth-claim">Inteligencia en tiempo real para mercados de predicción de Polymarket — señales IA, mapa global y simulador.</p>
+      </div>
+      <div class="auth-body">
+        <div class="modal-tabs">
+          <button class="modal-tab active" data-tab="login">Iniciar sesión</button>
+          <button class="modal-tab" data-tab="register">Registrarse</button>
+        </div>
+        <!-- Login Form -->
+        <form class="modal-form active" id="form-login" novalidate>
+          <div class="form-group">
+            <label for="login-email">Correo electrónico</label>
+            <input type="text" id="login-email" placeholder="usuario@ejemplo.com" autocomplete="email" />
+            <small class="field-error" id="login-email-error"></small>
+          </div>
+          <div class="form-group">
+            <label for="login-password">Contraseña</label>
+            <input type="password" id="login-password" placeholder="••••••••" autocomplete="current-password" />
+            <small class="field-error" id="login-password-error"></small>
+          </div>
+          <div class="form-error" id="login-error"></div>
+          <button type="submit" class="modal-submit">Entrar</button>
+        </form>
+        <!-- Register Form -->
+        <form class="modal-form" id="form-register" novalidate>
+          <div class="form-group">
+            <label for="register-email">Correo electrónico</label>
+            <input type="text" id="register-email" placeholder="usuario@ejemplo.com" autocomplete="email" />
+            <small class="field-error" id="register-email-error"></small>
+          </div>
+          <div class="form-group">
+            <label for="register-password">Contraseña</label>
+            <input type="password" id="register-password" placeholder="Mínimo 8 caracteres" autocomplete="new-password" />
+            <small class="field-error" id="register-password-error"></small>
+          </div>
+          <div class="form-group">
+            <label for="register-password-confirm">Confirmar contraseña</label>
+            <input type="password" id="register-password-confirm" placeholder="Repite la contraseña" autocomplete="new-password" />
+            <small class="field-error" id="register-password-confirm-error"></small>
+          </div>
+          <div class="form-error" id="register-error"></div>
+          <button type="submit" class="modal-submit">Crear cuenta</button>
+        </form>
+      </div>
+    </div>
+  </div>
+
+  <div id="app" class="layout hidden">
 
     <!-- Sidebar -->
     <aside class="sidebar" id="sidebar">
@@ -335,51 +389,5 @@
     </div>
   </div>
 
-  <!-- Auth Modal -->
-  <div class="modal-overlay hidden" id="auth-modal">
-    <div class="modal">
-      <div class="modal-header">
-        <div class="modal-tabs">
-          <button class="modal-tab active" data-tab="login">Iniciar sesión</button>
-          <button class="modal-tab" data-tab="register">Registrarse</button>
-        </div>
-        <button class="modal-close" id="modal-close" title="Cerrar">✕</button>
-      </div>
-      <div class="modal-body">
-        <!-- Login Form -->
-        <form class="modal-form active" id="form-login">
-          <div class="form-group">
-            <label for="login-email">Correo electrónico</label>
-            <input type="email" id="login-email" placeholder="usuario@ejemplo.com" required />
-          </div>
-          <div class="form-group">
-            <label for="login-password">Contraseña</label>
-            <input type="password" id="login-password" placeholder="••••••••" required />
-          </div>
-          <div class="form-error" id="login-error"></div>
-          <button type="submit" class="modal-submit">Entrar</button>
-        </form>
-
-        <!-- Register Form -->
-        <form class="modal-form" id="form-register">
-          <div class="form-group">
-            <label for="register-email">Correo electrónico</label>
-            <input type="email" id="register-email" placeholder="usuario@ejemplo.com" required />
-          </div>
-          <div class="form-group">
-            <label for="register-password">Contraseña</label>
-            <input type="password" id="register-password" placeholder="Mínimo 8 caracteres" required minlength="8" />
-          </div>
-          <div class="form-group">
-            <label for="register-password-confirm">Confirmar contraseña</label>
-            <input type="password" id="register-password-confirm" placeholder="Repite la contraseña" required />
-          </div>
-          <div class="form-error" id="register-error"></div>
-          <button type="submit" class="modal-submit">Crear cuenta</button>
-        </form>
-      </div>
-    </div>
-  </div>
-
 </body>
 </html>

frontend/index.html

@@ -7,7 +7,61 @@
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 </head>
 <body>
-  <div id="app" class="layout">
+  <!-- Auth Page (shown when unauthenticated) -->
+  <div id="view-auth" class="auth-view hidden">
+    <div class="auth-card">
+      <div class="auth-header">
+        <div class="auth-logo">
+          <div class="logo-dot"></div>
+          <span class="logo-text">PolySignal</span>
+        </div>
+        <p class="auth-claim">Inteligencia en tiempo real para mercados de predicción de Polymarket — señales IA, mapa global y simulador.</p>
+      </div>
+      <div class="auth-body">
+        <div class="modal-tabs">
+          <button class="modal-tab active" data-tab="login">Iniciar sesión</button>
+          <button class="modal-tab" data-tab="register">Registrarse</button>
+        </div>
+        <!-- Login Form -->
+        <form class="modal-form active" id="form-login" novalidate>
+          <div class="form-group">
+            <label for="login-email">Correo electrónico</label>
+            <input type="text" id="login-email" placeholder="usuario@ejemplo.com" autocomplete="email" />
+            <small class="field-error" id="login-email-error"></small>
+          </div>
+          <div class="form-group">
+            <label for="login-password">Contraseña</label>
+            <input type="password" id="login-password" placeholder="••••••••" autocomplete="current-password" />
+            <small class="field-error" id="login-password-error"></small>
+          </div>
+          <div class="form-error" id="login-error"></div>
+          <button type="submit" class="modal-submit">Entrar</button>
+        </form>
+        <!-- Register Form -->
+        <form class="modal-form" id="form-register" novalidate>
+          <div class="form-group">
+            <label for="register-email">Correo electrónico</label>
+            <input type="text" id="register-email" placeholder="usuario@ejemplo.com" autocomplete="email" />
+            <small class="field-error" id="register-email-error"></small>
+          </div>
+          <div class="form-group">
+            <label for="register-password">Contraseña</label>
+            <input type="password" id="register-password" placeholder="Mínimo 8 caracteres" autocomplete="new-password" />
+            <small class="field-error" id="register-password-error"></small>
+          </div>
+          <div class="form-group">
+            <label for="register-password-confirm">Confirmar contraseña</label>
+            <input type="password" id="register-password-confirm" placeholder="Repite la contraseña" autocomplete="new-password" />
+            <small class="field-error" id="register-password-confirm-error"></small>
+          </div>
+          <div class="form-error" id="register-error"></div>
+          <button type="submit" class="modal-submit">Crear cuenta</button>
+        </form>
+      </div>
+    </div>
+  </div>
+
+  <div id="app" class="layout hidden">
 
     <!-- Sidebar -->
     <aside class="sidebar" id="sidebar">
@@ -29,6 +83,10 @@
           <span class="nav-icon">⚡</span>
           <span class="nav-label">Alertas</span>
         </div>
+        <div class="nav-item" data-view="preferences">
+          <span class="nav-icon">⚙</span>
+          <span class="nav-label">Modelo IA</span>
+        </div>
       </nav>
       <div class="sidebar-footer">
         v0.1.0 · HF Spaces
@@ -100,12 +158,12 @@
       </div>
       <div class="topbar-filters desktop-only">
         <select class="filter-select" id="filter-trend" title="Tendencias">
-          <option value="">🔥 Todos los mercados</option>
-          <option value="hot">🔥 Más activos</option>
-          <option value="bullish-trend">📈 Tendencia alcista</option>
-          <option value="bearish-trend">📉 Tendencia bajista</option>
-          <option value="volatile">⚡ Más volátiles</option>
-          <option value="high-volume">📊 Alto volumen</option>
+          <option value="">Todos los mercados</option>
+          <option value="hot">Más activos</option>
+          <option value="bullish-trend">Tendencia alcista</option>
+          <option value="bearish-trend">Tendencia bajista</option>
+          <option value="high-volume">Alto volumen</option>
+          <option value="open-only">Mercados Abiertos</option>
         </select>
         <select class="filter-select" id="filter-category" title="Categoría">
           <option value="">Todas las categorías</option>
@@ -115,7 +173,9 @@
       <div class="topbar-actions">
         <button class="btn-ghost desktop-only" id="btn-telegram">Alertas Telegram</button>
         <button class="icon-btn mobile-only" id="btn-telegram-mobile" title="Alertas Telegram">✈</button>
-        <button class="icon-btn" id="btn-notif" title="Notificaciones">◉</button>
+        <button class="icon-btn mobile-only" id="btn-watchlist-mobile" title="Seguimiento">☆</button>
+        <button class="icon-btn mobile-only" id="btn-alerts-mobile" title="Alertas">⚡</button>
+        <button class="icon-btn mobile-only" id="btn-prefs" title="Modelo IA">⚙</button>
         <button class="btn-ghost desktop-only" id="btn-auth">Entrar</button>
         <button class="icon-btn auth-indicator mobile-only" id="btn-auth-mobile" title="Entrar"></button>
       </div>
@@ -266,6 +326,82 @@
         </div>
       </section>
 
+      <!-- PREFERENCES VIEW (desktop only — mobile uses modal) -->
+      <section class="view" id="view-preferences">
+        <div class="panel full-height">
+          <div class="panel-header">
+            <div class="panel-title"><span>⚙</span> Modelo de IA</div>
+          </div>
+          <div class="panel-body">
+            <div class="prefs-view-body">
+
+              <div class="prefs-modes" id="view-prefs-modes">
+                <button class="prefs-mode-btn active" data-mode="auto">Automático</button>
+                <button class="prefs-mode-btn" data-mode="external">Proveedor externo</button>
+                <button class="prefs-mode-btn" data-mode="local">Modelo local</button>
+                <button class="prefs-mode-btn" data-mode="custom">Personalizado</button>
+              </div>
+
+              <div class="prefs-section active" id="view-prefs-auto">
+                <p class="prefs-description">
+                  El servidor usa su cadena de respaldo configurada por variables de entorno:<br>
+                  <strong>DeepSeek → OpenRouter → HuggingFace → Ollama local → regla de precio.</strong>
+                </p>
+              </div>
+
+              <div class="prefs-section" id="view-prefs-external">
+                <div class="form-group">
+                  <label for="view-prefs-provider">Proveedor</label>
+                  <select class="filter-select prefs-select" id="view-prefs-provider">
+                    <option value="deepseek">DeepSeek API</option>
+                    <option value="openrouter">OpenRouter</option>
+                    <option value="huggingface">HuggingFace Inference</option>
+                  </select>
+                </div>
+                <div class="form-group">
+                  <label for="view-prefs-api-key">Clave API</label>
+                  <input type="password" id="view-prefs-api-key" placeholder="sk-..." autocomplete="off" />
+                </div>
+              </div>
+
+              <div class="prefs-section" id="view-prefs-local">
+                <p class="prefs-description">Compatible con Ollama. Usa <code>/api/chat</code> en la URL base.</p>
+                <div class="form-group">
+                  <label for="view-prefs-local-url">URL del servidor</label>
+                  <input type="text" id="view-prefs-local-url" placeholder="http://localhost:11434" />
+                </div>
+                <div class="form-group">
+                  <label for="view-prefs-local-model">Nombre del modelo</label>
+                  <input type="text" id="view-prefs-local-model" placeholder="qwen3:8b" />
+                </div>
+              </div>
+
+              <div class="prefs-section" id="view-prefs-custom">
+                <p class="prefs-description">Cualquier endpoint compatible con OpenAI Chat Completions.</p>
+                <div class="form-group">
+                  <label for="view-prefs-custom-url">Endpoint URL</label>
+                  <input type="text" id="view-prefs-custom-url" placeholder="https://api.example.com/v1/chat/completions" />
+                </div>
+                <div class="form-group">
+                  <label for="view-prefs-custom-key">Clave API (opcional)</label>
+                  <input type="password" id="view-prefs-custom-key" placeholder="sk-..." autocomplete="off" />
+                </div>
+                <div class="form-group">
+                  <label for="view-prefs-custom-model">Nombre del modelo</label>
+                  <input type="text" id="view-prefs-custom-model" placeholder="gpt-4o-mini" />
+                </div>
+              </div>
+
+              <div class="form-status" id="view-prefs-status"></div>
+              <div class="form-actions">
+                <button type="button" class="modal-submit" id="btn-view-save-prefs">Guardar</button>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </section>
+
     </main>
   </div>
 
@@ -379,6 +515,7 @@
     </div>
   </div>
 
-  <script type="module" src="/src/main.js"></script>
+
+<script type="module" src="/src/main.js"></script>
 </body>
 </html>

frontend/src/api.js

@@ -83,8 +83,21 @@ export async function register(email, password) {
   return body
 }
 
-export function logout() {
-  clearToken()
+export async function logout() {
+  const token = getToken()
+  try {
+    if (token) {
+      await fetch(`${BASE}/auth/logout`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+      })
+    }
+  } finally {
+    clearToken()
+  }
 }
 
 export async function getMe() {
@@ -212,3 +225,15 @@ export async function getAlerts() {
 export async function getStats() {
   return fetchJson(`${BASE}/stats`)
 }
+
+/* ─── Preferences ─── */
+export async function getPreferences() {
+  return fetchJson(`${BASE}/preferences`)
+}
+
+export async function savePreferences(prefs) {
+  return fetchJson(`${BASE}/preferences`, {
+    method: 'PUT',
+    body: JSON.stringify(prefs),
+  })
+}

frontend/src/app.js

@@ -32,6 +32,36 @@ import * as map from './map.js'
 import * as simulator from './simulator.js'
 import { extractFilterOptions, filterMarkets } from './filters.js'
 
+/* ─── Helpers de validación de formularios ─── */
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+function isValidEmail(value) {
+  return EMAIL_RE.test(value.trim())
+}
+
+function showFieldError(inputId, msg) {
+  const input = document.getElementById(inputId)
+  const errorEl = document.getElementById(`${inputId}-error`)
+  if (input) input.classList.add('input-invalid')
+  if (errorEl) errorEl.textContent = msg
+}
+
+function clearFieldError(inputId) {
+  const input = document.getElementById(inputId)
+  const errorEl = document.getElementById(`${inputId}-error`)
+  if (input) input.classList.remove('input-invalid')
+  if (errorEl) errorEl.textContent = ''
+}
+
+function clearAllFieldErrors(...inputIds) {
+  inputIds.forEach(clearFieldError)
+}
+
+function focusFirstInvalid(form) {
+  const invalid = form.querySelector('.input-invalid')
+  if (invalid) invalid.focus()
+}
+
 /* ─── Estado global ─── */
 let state = {
   view: 'dashboard',
@@ -227,13 +257,6 @@ function filterByTrend(markets, trendType) {
         .sort((a, b) => a.momentum - b.momentum)
         .map((w) => w.market)
 
-    case 'volatile':
-      // Más volátiles = mayor desviación estándar de cambios
-      return withTrend
-        .filter((w) => w.volatility > 0.3)
-        .sort((a, b) => b.volatility - a.volatility)
-        .map((w) => w.market)
-
     case 'high-volume':
       // Alto volumen
       return withTrend
@@ -241,24 +264,33 @@ function filterByTrend(markets, trendType) {
         .sort((a, b) => b.volume - a.volume)
         .map((w) => w.market)
 
+    case 'open-only':
+      // Solo mercados activos
+      return withTrend
+        .filter((w) => w.market.status === 'active')
+        .sort((a, b) => b.volume - a.volume)
+        .map((w) => w.market)
+
     default:
       return markets
   }
 }
 
-/* ─── Auth Modal ─── */
-function openAuthModal() {
-  document.getElementById('auth-modal')?.classList.remove('hidden')
-}
-
-function closeAuthModal() {
-  document.getElementById('auth-modal')?.classList.add('hidden')
+/* ─── Auth Page ─── */
+function showAuthView() {
+  document.getElementById('view-auth')?.classList.remove('hidden')
+  document.getElementById('app')?.classList.add('hidden')
   const loginError = document.getElementById('login-error')
   const registerError = document.getElementById('register-error')
   if (loginError) loginError.textContent = ''
   if (registerError) registerError.textContent = ''
 }
 
+function showDashboardView() {
+  document.getElementById('view-auth')?.classList.add('hidden')
+  document.getElementById('app')?.classList.remove('hidden')
+}
+
 function switchAuthTab(tab) {
   document.querySelectorAll('.modal-tab').forEach((t) => t.classList.toggle('active', t.dataset.tab === tab))
   document.querySelectorAll('#auth-modal .modal-form').forEach((f) => f.classList.toggle('active', f.id === `form-${tab}`))
@@ -268,6 +300,83 @@ function switchAuthTab(tab) {
   if (registerError) registerError.textContent = ''
 }
 
+/* ─── Preferences ─── */
+const PREFS_KEY = 'polysignal_prefs'
+
+async function persistPrefs(payload, statusEl) {
+  try {
+    await api.savePreferences(payload)
+    localStorage.setItem(PREFS_KEY, JSON.stringify({
+      mode: payload.mode,
+      provider: payload.provider,
+      endpoint: payload.endpoint,
+      model: payload.model,
+    }))
+    statusEl.textContent = 'Configuración guardada. Aplicada en el próximo ciclo de señales.'
+    statusEl.className = 'form-status success'
+    return true
+  } catch {
+    statusEl.textContent = 'Error al guardar. Comprueba la conexión con el servidor.'
+    statusEl.className = 'form-status error'
+    return false
+  }
+}
+
+function renderPreferencesView() {
+  const saved = JSON.parse(localStorage.getItem(PREFS_KEY) || '{}')
+  setViewPrefsMode(saved.mode || 'auto')
+  const set = (id, val) => { const el = document.getElementById(id); if (el) el.value = val }
+  set('view-prefs-provider', saved.provider || 'deepseek')
+  set('view-prefs-api-key', '')
+  set('view-prefs-local-url', saved.endpoint || 'http://localhost:11434')
+  set('view-prefs-local-model', saved.model || 'qwen3:8b')
+  set('view-prefs-custom-url', saved.endpoint || '')
+  set('view-prefs-custom-key', '')
+  set('view-prefs-custom-model', saved.model || '')
+  const statusEl = document.getElementById('view-prefs-status')
+  if (statusEl) { statusEl.textContent = ''; statusEl.className = 'form-status' }
+}
+
+function setViewPrefsMode(mode) {
+  document.querySelectorAll('#view-prefs-modes .prefs-mode-btn').forEach((btn) => {
+    btn.classList.toggle('active', btn.dataset.mode === mode)
+  })
+  document.querySelectorAll('#view-preferences .prefs-section').forEach((sec) => {
+    sec.classList.toggle('active', sec.id === `view-prefs-${mode}`)
+  })
+}
+
+async function handleViewPrefsSave() {
+  const statusEl = document.getElementById('view-prefs-status')
+  const activeMode = document.querySelector('#view-prefs-modes .prefs-mode-btn.active')?.dataset.mode || 'auto'
+  const val = (id) => document.getElementById(id)?.value?.trim() || ''
+  const payload = { mode: activeMode }
+  if (activeMode === 'external') {
+    payload.provider = val('view-prefs-provider')
+    const key = val('view-prefs-api-key')
+    if (!key) {
+      statusEl.textContent = 'Introduce la clave API del proveedor seleccionado.'
+      statusEl.className = 'form-status error'
+      return
+    }
+    payload.apiKey = key
+  } else if (activeMode === 'local') {
+    payload.endpoint = val('view-prefs-local-url') || 'http://localhost:11434'
+    payload.model = val('view-prefs-local-model') || 'qwen3:8b'
+  } else if (activeMode === 'custom') {
+    const url = val('view-prefs-custom-url')
+    if (!url) {
+      statusEl.textContent = 'Introduce la URL del endpoint.'
+      statusEl.className = 'form-status error'
+      return
+    }
+    payload.endpoint = url
+    payload.apiKey = val('view-prefs-custom-key')
+    payload.model = val('view-prefs-custom-model')
+  }
+  await persistPrefs(payload, statusEl)
+}
+
 /* ─── Telegram Modal ─── */
 function openTelegramModal() {
   const modal = document.getElementById('telegram-modal')
@@ -368,14 +477,14 @@ function updateAuthButton() {
   if (btn) {
     if (authed) {
       btn.textContent = 'Salir'
-      btn.onclick = () => {
-        api.logout()
+      btn.onclick = async () => {
+        await api.logout()
         updateAuthButton()
-        location.reload()
+        showAuthView()
       }
     } else {
       btn.textContent = 'Entrar'
-      btn.onclick = openAuthModal
+      btn.onclick = showAuthView
     }
   }
 
@@ -383,12 +492,12 @@ function updateAuthButton() {
     indicator.classList.toggle('logged-in', authed)
     indicator.title = authed ? 'Salir' : 'Entrar'
     indicator.onclick = authed
-      ? () => {
-          api.logout()
+      ? async () => {
+          await api.logout()
           updateAuthButton()
-          location.reload()
+          showAuthView()
         }
-      : openAuthModal
+      : showAuthView
   }
 }
 
@@ -397,9 +506,31 @@ async function handleLogin(e) {
   const email = document.getElementById('login-email').value.trim()
   const password = document.getElementById('login-password').value
   const errorEl = document.getElementById('login-error')
+
+  clearAllFieldErrors('login-email', 'login-password')
+  errorEl.textContent = ''
+
+  let valid = true
+  if (!email) {
+    showFieldError('login-email', 'Introduce tu correo electrónico.')
+    valid = false
+  } else if (!isValidEmail(email)) {
+    showFieldError('login-email', 'El formato del correo no es válido.')
+    valid = false
+  }
+  if (!password) {
+    showFieldError('login-password', 'Introduce tu contraseña.')
+    valid = false
+  }
+
+  if (!valid) {
+    focusFirstInvalid(e.target)
+    return
+  }
+
   try {
     await api.login(email, password)
-    closeAuthModal()
+    showDashboardView()
     updateAuthButton()
     await initAppData()
   } catch (err) {
@@ -407,6 +538,12 @@ async function handleLogin(e) {
   }
 }
 
+function attachLoginInputListeners() {
+  ;['login-email', 'login-password'].forEach((id) => {
+    document.getElementById(id)?.addEventListener('input', () => clearFieldError(id))
+  })
+}
+
 async function handleRegister(e) {
   e.preventDefault()
   const email = document.getElementById('register-email').value.trim()
@@ -414,25 +551,59 @@ async function handleRegister(e) {
   const confirm = document.getElementById('register-password-confirm').value
   const errorEl = document.getElementById('register-error')
 
-  if (password !== confirm) {
-    errorEl.textContent = 'Las contraseñas no coinciden.'
-    return
+  clearAllFieldErrors('register-email', 'register-password', 'register-password-confirm')
+  errorEl.textContent = ''
+
+  let valid = true
+  if (!email) {
+    showFieldError('register-email', 'Introduce tu correo electrónico.')
+    valid = false
+  } else if (!isValidEmail(email)) {
+    showFieldError('register-email', 'El formato del correo no es válido.')
+    valid = false
+  }
+  if (!password) {
+    showFieldError('register-password', 'Introduce una contraseña.')
+    valid = false
+  } else if (password.length < 8) {
+    showFieldError('register-password', 'La contraseña debe tener al menos 8 caracteres.')
+    valid = false
   }
-  if (password.length < 8) {
-    errorEl.textContent = 'La contraseña debe tener al menos 8 caracteres.'
+  if (!confirm) {
+    showFieldError('register-password-confirm', 'Confirma tu contraseña.')
+    valid = false
+  } else if (confirm !== password) {
+    showFieldError('register-password-confirm', 'Las contraseñas no coinciden.')
+    valid = false
+  }
+
+  if (!valid) {
+    focusFirstInvalid(e.target)
     return
   }
 
   try {
     await api.register(email, password)
-    closeAuthModal()
+    showDashboardView()
     updateAuthButton()
     await initAppData()
   } catch (err) {
-    errorEl.textContent = 'Error al registrar. El correo podría estar en uso.'
+    const isEmailTaken = err.message?.includes('EMAIL_EXISTS') || err.message?.includes('409')
+    if (isEmailTaken) {
+      showFieldError('register-email', 'Este correo ya está registrado.')
+      focusFirstInvalid(e.target)
+    } else {
+      errorEl.textContent = 'Error al registrar. Inténtalo de nuevo.'
+    }
   }
 }
 
+function attachRegisterInputListeners() {
+  ;['register-email', 'register-password', 'register-password-confirm'].forEach((id) => {
+    document.getElementById(id)?.addEventListener('input', () => clearFieldError(id))
+  })
+}
+
 async function ensureAuth() {
   if (!api.isAuthenticated()) return false
   try {
@@ -452,6 +623,7 @@ function switchView(viewName) {
   if (viewName === 'positions') renderPositions()
   if (viewName === 'watchlist') renderWatchlist()
   if (viewName === 'alerts') renderAlerts()
+  if (viewName === 'preferences') renderPreferencesView()
 }
 
 /* ─── Sidebar toggle ─── */
@@ -462,6 +634,7 @@ function toggleSidebar() {
 
 /* ─── Panel toggle ─── */
 function togglePanel(panelId) {
+  if (!window.matchMedia('(max-width: 640px)').matches) return
   const panel = document.getElementById(`panel-${panelId}`)
   if (!panel) return
   const isCollapsed = panel.classList.toggle('collapsed')
@@ -469,6 +642,71 @@ function togglePanel(panelId) {
   else state.collapsedPanels.delete(panelId)
 }
 
+/* ─── Watchlist / Alert helpers ─── */
+function isInWatchlist(marketId) {
+  return state.watchlist.some((w) => w.marketId === marketId)
+}
+
+function hasAlert(marketId) {
+  return state.watchlist.some((w) => w.marketId === marketId && w.alertThreshold != null)
+}
+
+async function toggleWatchlistCard(marketId, wBtn, aBtn) {
+  if (isInWatchlist(marketId)) {
+    try {
+      await api.removeFromWatchlist(marketId)
+      state.watchlist = state.watchlist.filter((w) => w.marketId !== marketId)
+      wBtn.textContent = '☆ Seguimiento'
+      wBtn.classList.remove('active')
+      wBtn.title = 'Añadir a seguimiento'
+      aBtn.textContent = '⚡ Alertas'
+      aBtn.classList.remove('active')
+      aBtn.title = 'Activar alerta de precio'
+    } catch (e) { console.warn('Error al quitar de watchlist:', e) }
+  } else {
+    try {
+      const entry = await api.addToWatchlist(marketId)
+      state.watchlist.push(entry ?? { marketId })
+      wBtn.textContent = '★ Seguimiento'
+      wBtn.classList.add('active')
+      wBtn.title = 'Quitar de seguimiento'
+    } catch (e) { console.warn('Error al añadir a watchlist:', e) }
+  }
+}
+
+function toggleAlertCard(marketId, aBtn, thresholdRow) {
+  if (hasAlert(marketId)) {
+    api.removeFromWatchlist(marketId)
+      .then(() => api.addToWatchlist(marketId, null))
+      .then((entry) => {
+        const idx = state.watchlist.findIndex((w) => w.marketId === marketId)
+        if (idx >= 0) state.watchlist[idx] = { ...state.watchlist[idx], alertThreshold: null }
+        else state.watchlist.push(entry ?? { marketId })
+        aBtn.textContent = '⚡ Alertas'
+        aBtn.classList.remove('active')
+        aBtn.title = 'Activar alerta de precio'
+      })
+      .catch((e) => console.warn('Error al desactivar alerta:', e))
+  } else {
+    thresholdRow.classList.toggle('hidden')
+  }
+}
+
+async function setAlertThreshold(marketId, threshold, aBtn, thresholdRow) {
+  try {
+    if (isInWatchlist(marketId)) {
+      await api.removeFromWatchlist(marketId)
+      state.watchlist = state.watchlist.filter((w) => w.marketId !== marketId)
+    }
+    const entry = await api.addToWatchlist(marketId, threshold)
+    state.watchlist.push(entry ?? { marketId, alertThreshold: threshold })
+    aBtn.textContent = '⚡ Alerta activa'
+    aBtn.classList.add('active')
+    aBtn.title = 'Desactivar alerta'
+    thresholdRow.classList.add('hidden')
+  } catch (e) { console.warn('Error al configurar alerta:', e) }
+}
+
 /* ─── Signal card factory ─── */
 function makeSignalCard(m) {
   const sig = state.signals.find((s) => s.marketId === m.id) || null
@@ -559,6 +797,55 @@ function makeSignalCard(m) {
     card.append(edgeRow)
   }
 
+  // ── Action buttons (Seguimiento + Alertas) ──
+  const inWatchlist = isInWatchlist(m.id)
+  const alertActive = hasAlert(m.id)
+
+  const wBtn = el('button', `card-btn-watch${inWatchlist ? ' active' : ''}`)
+  wBtn.textContent = inWatchlist ? '★ Seguimiento' : '☆ Seguimiento'
+  wBtn.title = inWatchlist ? 'Quitar de seguimiento' : 'Añadir a seguimiento'
+
+  const aBtn = el('button', `card-btn-alert${alertActive ? ' active' : ''}`)
+  aBtn.textContent = alertActive ? '⚡ Alerta activa' : '⚡ Alertas'
+  aBtn.title = alertActive ? 'Desactivar alerta' : 'Activar alerta de precio'
+
+  // Inline threshold form
+  const thresholdRow = el('div', 'card-threshold-row hidden')
+  const thresholdInput = el('input', 'threshold-input')
+  thresholdInput.type = 'number'
+  thresholdInput.min = '1'
+  thresholdInput.max = '99'
+  thresholdInput.placeholder = 'Umbral ¢'
+  thresholdInput.addEventListener('click', (e) => e.stopPropagation())
+
+  const confirmThreshold = async () => {
+    const val = parseInt(thresholdInput.value, 10)
+    if (!val || val < 1 || val > 99) { thresholdInput.style.borderColor = 'var(--red)'; return }
+    await setAlertThreshold(m.id, val / 100, aBtn, thresholdRow)
+  }
+
+  thresholdInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') { e.stopPropagation(); confirmThreshold() }
+    if (e.key === 'Escape') { e.stopPropagation(); thresholdRow.classList.add('hidden') }
+  })
+
+  const confirmBtn = el('button', 'threshold-confirm', '✓')
+  confirmBtn.title = 'Confirmar umbral'
+  confirmBtn.addEventListener('click', (e) => { e.stopPropagation(); confirmThreshold() })
+
+  const cancelBtn = el('button', 'threshold-cancel', '✕')
+  cancelBtn.title = 'Cancelar'
+  cancelBtn.addEventListener('click', (e) => { e.stopPropagation(); thresholdRow.classList.add('hidden') })
+
+  thresholdRow.append(el('span', 'threshold-label', 'Umbral (¢):'), thresholdInput, confirmBtn, cancelBtn)
+
+  wBtn.addEventListener('click', async (e) => { e.stopPropagation(); await toggleWatchlistCard(m.id, wBtn, aBtn) })
+  aBtn.addEventListener('click', (e) => { e.stopPropagation(); toggleAlertCard(m.id, aBtn, thresholdRow) })
+
+  const actions = el('div', 'card-actions')
+  actions.append(wBtn, aBtn)
+  card.append(actions, thresholdRow)
+
   card.addEventListener('click', () => selectMarket(card.dataset.market))
   return card
 }
@@ -1177,9 +1464,18 @@ export async function init() {
     })
   })
 
+  // Preferences view events (all screen sizes)
+  document.getElementById('btn-prefs')?.addEventListener('click', () => switchView('preferences'))
+  document.querySelectorAll('#view-prefs-modes .prefs-mode-btn').forEach((btn) => {
+    btn.addEventListener('click', () => setViewPrefsMode(btn.dataset.mode))
+  })
+  document.getElementById('btn-view-save-prefs')?.addEventListener('click', handleViewPrefsSave)
+
   // Telegram modal events
   document.getElementById('btn-telegram')?.addEventListener('click', openTelegramModal)
   document.getElementById('btn-telegram-mobile')?.addEventListener('click', openTelegramModal)
+  document.getElementById('btn-watchlist-mobile')?.addEventListener('click', () => switchView('watchlist'))
+  document.getElementById('btn-alerts-mobile')?.addEventListener('click', () => switchView('alerts'))
   document.getElementById('telegram-modal-close')?.addEventListener('click', closeTelegramModal)
   document.getElementById('telegram-modal')?.addEventListener('click', (e) => {
     if (e.target.id === 'telegram-modal') closeTelegramModal()
@@ -1187,27 +1483,26 @@ export async function init() {
   document.getElementById('form-telegram')?.addEventListener('submit', handleTelegramSave)
   document.getElementById('btn-test-telegram')?.addEventListener('click', handleTelegramTest)
 
-  // Auth modal events
-  document.getElementById('btn-auth')?.addEventListener('click', openAuthModal)
-  document.getElementById('modal-close')?.addEventListener('click', closeAuthModal)
-  document.querySelectorAll('.modal-tab').forEach((tab) => {
+  // Auth page events
+  document.getElementById('btn-auth')?.addEventListener('click', showAuthView)
+  document.querySelectorAll('#view-auth .modal-tab').forEach((tab) => {
     tab.addEventListener('click', () => switchAuthTab(tab.dataset.tab))
   })
   document.getElementById('form-login')?.addEventListener('submit', handleLogin)
+  attachLoginInputListeners()
   document.getElementById('form-register')?.addEventListener('submit', handleRegister)
-  document.getElementById('auth-modal')?.addEventListener('click', (e) => {
-    if (e.target.id === 'auth-modal') closeAuthModal()
-  })
+  attachRegisterInputListeners()
 
   updateAuthButton()
 
-  // Si hay token, carga datos; si no, muestra el modal
+  // Si hay token, carga datos; si no, muestra la página de auth
   const authed = await ensureAuth()
   if (authed) {
+    showDashboardView()
     await initAppData()
     initFilters()
   } else {
-    openAuthModal()
+    showAuthView()
   }
 
   const socket = io()

frontend/src/map.js

@@ -27,6 +27,7 @@ import { getCoordsByCode, detectCountryInText } from './capitals.js'
 
 let mapInstance = null
 let bubbles = {} // marketId -> marcador de circulo
+let diagonalLines = [] // { line, latLng, radiusPx }
 
 // Hubs globales para mercados sin pais. Cubre TODOS los continentes para
 // que las bubbles no se concentren en US/EU/Asia. Cada hub tiene tambien un
@@ -158,6 +159,26 @@ function getCoords(market) {
   return jitter(pickFinancialHub(market.id), market.id, 3)
 }
 
+function createDiagonalLine(latLng, radiusPx) {
+  if (!mapInstance) return null
+  const center = mapInstance.latLngToLayerPoint(L.latLng(latLng))
+  const offset = radiusPx * 0.9
+  const p1 = mapInstance.layerPointToLatLng(L.point(center.x - offset, center.y - offset))
+  const p2 = mapInstance.layerPointToLatLng(L.point(center.x + offset, center.y + offset))
+  const line = L.polyline([p1, p2], { color: '#ffffff', weight: 2.5, opacity: 0.9 }).addTo(mapInstance)
+  return { line, latLng, radiusPx }
+}
+
+function updateDiagonalLines() {
+  diagonalLines.forEach(({ line, latLng, radiusPx }) => {
+    const center = mapInstance.latLngToLayerPoint(L.latLng(latLng))
+    const offset = radiusPx * 0.9
+    const p1 = mapInstance.layerPointToLatLng(L.point(center.x - offset, center.y - offset))
+    const p2 = mapInstance.layerPointToLatLng(L.point(center.x + offset, center.y + offset))
+    line.setLatLngs([p1, p2])
+  })
+}
+
 function getSignalColor(signal) {
   if (signal === 'bullish') return '#22d37a'
   if (signal === 'bearish') return '#f04040'
@@ -193,6 +214,8 @@ export function init(containerId, markets, signals, onSelect) {
     maxZoom: 19,
   }).addTo(mapInstance)
 
+  mapInstance.on('zoomend', updateDiagonalLines)
+
   markets.forEach((m) => {
     const sig = signals.find((s) => s.marketId === m.id) || { signal: 'neutral' }
     const color = getSignalColor(sig.signal)
@@ -256,7 +279,15 @@ export function init(containerId, markets, signals, onSelect) {
       onSelect(m.id)
     })
 
-    bubbles[m.id] = { circle, inner, label, color }
+    const bubble = { circle, inner, label, color }
+    if (m.status !== 'active') {
+      const d = createDiagonalLine(coords, radius)
+      if (d) {
+        diagonalLines.push(d)
+        bubble.diagonal = d
+      }
+    }
+    bubbles[m.id] = bubble
   })
 }
 
@@ -287,8 +318,10 @@ export function updateMarkers(markets, signals) {
     mapInstance.removeLayer(b.circle)
     mapInstance.removeLayer(b.inner)
     mapInstance.removeLayer(b.label)
+    if (b.diagonal) mapInstance.removeLayer(b.diagonal.line)
   })
   bubbles = {}
+  diagonalLines = []
 
   // Re-renderizar solo los mercados filtrados
   markets.forEach((m) => {
@@ -352,6 +385,14 @@ export function updateMarkers(markets, signals) {
       if (window.__onSelectMarket) window.__onSelectMarket(m.id)
     })
 
-    bubbles[m.id] = { circle, inner, label, color }
+    const bubble = { circle, inner, label, color }
+    if (m.status !== 'active') {
+      const d = createDiagonalLine(coords, radius)
+      if (d) {
+        diagonalLines.push(d)
+        bubble.diagonal = d
+      }
+    }
+    bubbles[m.id] = bubble
   })
 }

frontend/src/style.css

@@ -212,6 +212,7 @@ h6 { font-size: var(--fs-h6); line-height: 1.4;  font-weight: 500; }
   width: 0;
 }
 
+
 .sidebar-footer {
   padding: 14px;
   border-top: 1px solid var(--border);
@@ -323,8 +324,8 @@ h6 { font-size: var(--fs-h6); line-height: 1.4;  font-weight: 500; }
   font-family: var(--font-mono);
   outline: none;
   cursor: pointer;
-  min-width: 140px;
-  max-width: 180px;
+  min-width: 160px;
+  max-width: 240px;
   appearance: none;
   -webkit-appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b90a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@@ -430,15 +431,9 @@ h6 { font-size: var(--fs-h6); line-height: 1.4;  font-weight: 500; }
   justify-content: space-between;
   padding: 14px 14px;
   border-bottom: 0.5px solid var(--border);
-  cursor: pointer;
-  user-select: none;
   transition: background 0.15s;
 }
 
-.panel-header:hover {
-  background: rgba(255,255,255,0.02);
-}
-
 .panel-title {
   font-size: 0.875rem;
   color: var(--text3);
@@ -451,6 +446,7 @@ h6 { font-size: var(--fs-h6); line-height: 1.4;  font-weight: 500; }
 }
 
 .panel-toggle {
+  display: none;
   font-size: 0.875rem;
   color: var(--text3);
   transition: transform 0.2s;
@@ -491,7 +487,7 @@ h6 { font-size: var(--fs-h6); line-height: 1.4;  font-weight: 500; }
 }
 
 .hidden {
-  display: none;
+  display: none !important;
 }
 
 .desktop-only { display: initial; }
@@ -687,6 +683,105 @@ h6 { font-size: var(--fs-h6); line-height: 1.4;  font-weight: 500; }
 .edge-neg { color: var(--red, #f04040); background: var(--red3, rgba(240,64,64,0.08)); }
 .edge-zero { color: var(--text3, #6e7681); }
 
+/* Botones de accion de tarjeta (Seguimiento + Alertas) */
+.card-actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 0.5px solid var(--border, rgba(255,255,255,0.08));
+}
+
+.card-btn-watch,
+.card-btn-alert {
+  flex: 1;
+  padding: 4px 8px;
+  font-size: 0.72rem;
+  font-family: var(--font-mono);
+  font-weight: 500;
+  letter-spacing: 0.03em;
+  border: 0.5px solid var(--border2);
+  border-radius: 4px;
+  background: var(--bg4);
+  color: var(--text2);
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.card-btn-watch:hover { border-color: var(--blue2); color: var(--blue); }
+.card-btn-alert:hover { border-color: var(--amber2); color: var(--amber); }
+
+.card-btn-watch.active {
+  background: var(--blue3);
+  color: var(--blue);
+  border-color: var(--blue2);
+}
+
+.card-btn-alert.active {
+  background: var(--amber3);
+  color: var(--amber);
+  border-color: var(--amber2);
+}
+
+/* Fila de umbral de alerta (inline en la tarjeta) */
+.card-threshold-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 6px;
+  padding: 6px 8px;
+  background: rgba(240,160,32,0.05);
+  border: 0.5px solid var(--amber2);
+  border-radius: 4px;
+}
+.card-threshold-row.hidden { display: none; }
+
+.threshold-label {
+  font-size: 0.7rem;
+  color: var(--text2);
+  font-family: var(--font-mono);
+  flex-shrink: 0;
+}
+
+.threshold-input {
+  width: 72px;
+  padding: 3px 6px;
+  font-size: 0.78rem;
+  font-family: var(--font-mono);
+  background: var(--bg3);
+  border: 0.5px solid var(--border2);
+  border-radius: 3px;
+  color: var(--text);
+  outline: none;
+}
+.threshold-input:focus { border-color: var(--amber2); }
+
+.threshold-confirm,
+.threshold-cancel {
+  padding: 2px 8px;
+  font-size: 0.78rem;
+  border-radius: 3px;
+  cursor: pointer;
+  border: 0.5px solid;
+  font-family: var(--font-mono);
+}
+
+.threshold-confirm {
+  background: var(--green3);
+  color: var(--green);
+  border-color: var(--green2);
+}
+.threshold-confirm:hover { background: rgba(34,211,122,0.12); }
+
+.threshold-cancel {
+  background: var(--bg4);
+  color: var(--text3);
+  border-color: var(--border2);
+}
+.threshold-cancel:hover { background: var(--bg3); }
+
 /* Sugerencia de tamano (Kelly) bajo el simulador */
 .kelly-note {
   flex: 1;
@@ -1367,6 +1462,22 @@ td {
   min-height: 18px;
 }
 
+.field-error {
+  display: block;
+  font-size: 0.8125rem;
+  color: var(--red);
+  margin-top: 4px;
+  min-height: 16px;
+}
+
+.form-group input.input-invalid {
+  border-color: var(--red);
+}
+
+.form-group input.input-invalid:focus {
+  border-color: var(--red);
+}
+
 .modal-submit {
   background: #2563eb;
   border: none;
@@ -1497,6 +1608,95 @@ td {
   opacity: 1;
 }
 
+/* ─── Auth Page (mobile-first) ─── */
+.auth-view {
+  min-height: 100dvh;
+  width: 100%;
+  display: grid;
+  place-items: center;
+  padding: 24px 16px;
+  background: var(--bg);
+}
+
+.auth-card {
+  width: 100%;
+  max-width: 420px;
+  background: var(--bg2);
+  border: 0.5px solid var(--border2);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.auth-header {
+  padding: 32px 28px 24px;
+  text-align: center;
+  border-bottom: 0.5px solid var(--border);
+}
+
+.auth-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.auth-logo .logo-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 8px var(--accent);
+  flex-shrink: 0;
+}
+
+.auth-logo .logo-text {
+  font-family: var(--font-sans);
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: -0.02em;
+}
+
+.auth-claim {
+  font-size: 0.8125rem;
+  color: var(--text2);
+  line-height: 1.55;
+  max-width: 320px;
+  margin: 0 auto;
+}
+
+.auth-body {
+  padding: 0 28px 28px;
+}
+
+.auth-body .modal-tabs {
+  border-bottom: 0.5px solid var(--border);
+  margin: 0 -28px 24px;
+  padding: 0 28px;
+}
+
+@media (max-width: 480px) {
+  .auth-view {
+    padding: 16px 12px;
+    align-items: flex-start;
+    padding-top: clamp(40px, 10dvh, 80px);
+  }
+
+  .auth-header {
+    padding: 24px 20px 20px;
+  }
+
+  .auth-body {
+    padding: 0 20px 24px;
+  }
+
+  .auth-body .modal-tabs {
+    margin: 0 -20px 20px;
+    padding: 0 20px;
+  }
+}
+
 /* ─── Telegram Instructions ─── */
 .telegram-instructions {
   display: flex;
@@ -1703,6 +1903,19 @@ td {
 }
 
 @media (max-width: 640px) {
+  .panel-header[data-panel] {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .panel-header[data-panel]:hover {
+    background: rgba(255,255,255,0.02);
+  }
+
+  .panel-toggle {
+    display: block;
+  }
+
   .layout {
     grid-template-columns: 0 1fr;
     grid-template-rows: auto 1fr;
@@ -1944,3 +2157,90 @@ td {
     gap: 12px;
   }
 }
+
+/* ─── Preferences View ─── */
+
+.prefs-modes {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 20px;
+}
+
+.prefs-mode-btn {
+  flex: 1;
+  background: var(--bg3);
+  border: 0.5px solid var(--border2);
+  color: var(--text2);
+  font-size: 0.8125rem;
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 6px 14px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.prefs-mode-btn:hover {
+  color: var(--text);
+  border-color: var(--text3);
+}
+
+.prefs-mode-btn.active {
+  background: var(--blue3);
+  border-color: var(--blue2);
+  color: var(--blue);
+}
+
+.prefs-section {
+  display: none;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 8px;
+}
+
+.prefs-section.active {
+  display: flex;
+}
+
+.prefs-description {
+  font-size: 0.9375rem;
+  color: var(--text2);
+  line-height: 1.6;
+}
+
+.prefs-description strong {
+  color: var(--text);
+}
+
+.prefs-description code {
+  font-family: var(--font-mono);
+  color: var(--blue);
+  font-size: 0.875rem;
+}
+
+.prefs-select {
+  width: 100%;
+  background: var(--bg3);
+  border: 0.5px solid var(--border2);
+  border-radius: var(--radius-sm);
+  padding: 12px 14px;
+  color: var(--text);
+  font-size: 0.9375rem;
+  font-family: var(--font-sans);
+  outline: none;
+  cursor: pointer;
+}
+
+.prefs-select:focus {
+  border-color: var(--blue2);
+}
+
+.prefs-view-body {
+  max-width: 520px;
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}

package.json

@@ -16,6 +16,7 @@
     "preview:frontend": "npm run preview --workspace=frontend",
     "db:migrate": "npm run db:migrate --workspace=backend",
     "db:generate": "npm run db:generate --workspace=backend",
+    "db:reset": "npm run db:reset --workspace=backend",
     "db:studio": "npm run db:studio --workspace=backend"
   },
   "engines": {