Cambios en UI, opcion de cambiar de proveedor de IA

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/config.js

@@ -33,6 +33,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(),
   TELEGRAM_BOT_TOKEN: z.string().optional(),
 });

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/index.html

@@ -29,6 +29,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 +104,13 @@
       </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="volatile">Más volátiles</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 +120,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 +273,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 +462,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

@@ -175,3 +175,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

@@ -241,6 +241,13 @@ 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
   }
@@ -268,6 +275,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')
@@ -445,6 +529,7 @@ function switchView(viewName) {
   if (viewName === 'positions') renderPositions()
   if (viewName === 'watchlist') renderWatchlist()
   if (viewName === 'alerts') renderAlerts()
+  if (viewName === 'preferences') renderPreferencesView()
 }
 
 /* ─── Sidebar toggle ─── */
@@ -455,6 +540,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')
@@ -462,6 +548,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
@@ -552,6 +703,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
 }
@@ -1170,9 +1370,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()

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);
@@ -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;
@@ -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;
@@ -1703,6 +1798,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 +2052,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;
+}