feat: add Recommended For You section with related stock tickers

- Add /api/related/<ticker> backend endpoint using yfinance sector data
- Add horizontal scrollable recommendation cards below price chart
- Each card shows ticker, company name, sparkline chart, price and change
- Cards are clickable to trigger full risk analysis on the selected ticker
- Includes loading skeleton, scroll navigation, and light/dark theme support

app.py

@@ -129,6 +129,34 @@ TIMEFRAME_TO_YFINANCE = {
     "5Y": ("5y", "1wk"),
 }
 
+SECTOR_PEERS = {
+    "Technology": ["AAPL", "MSFT", "GOOG", "NVDA", "META", "AMZN", "CRM", "ADBE", "INTC", "AMD", "AVGO", "ORCL", "CSCO", "IBM", "TSLA"],
+    "Financial Services": ["JPM", "BAC", "WFC", "GS", "MS", "BLK", "SCHW", "AXP", "V", "MA"],
+    "Healthcare": ["JNJ", "UNH", "PFE", "ABBV", "MRK", "LLY", "TMO", "ABT", "BMY", "AMGN"],
+    "Consumer Cyclical": ["AMZN", "TSLA", "HD", "NKE", "MCD", "SBUX", "TGT", "LOW", "BKNG", "CMG"],
+    "Communication Services": ["GOOG", "META", "NFLX", "DIS", "CMCSA", "T", "VZ", "TMUS", "SNAP", "PINS"],
+    "Energy": ["XOM", "CVX", "COP", "SLB", "EOG", "MPC", "PSX", "VLO", "OXY", "DVN"],
+    "Consumer Defensive": ["PG", "KO", "PEP", "WMT", "COST", "PM", "MO", "CL", "MDLZ", "GIS"],
+    "Industrials": ["CAT", "BA", "HON", "UPS", "RTX", "DE", "LMT", "GE", "MMM", "UNP"],
+    "Real Estate": ["AMT", "PLD", "CCI", "EQIX", "SPG", "PSA", "O", "WELL", "DLR", "AVB"],
+    "Utilities": ["NEE", "DUK", "SO", "D", "AEP", "SRE", "EXC", "XEL", "ED", "WEC"],
+    "Basic Materials": ["LIN", "APD", "SHW", "ECL", "FCX", "NEM", "DOW", "NUE", "VMC", "MLM"],
+}
+
+
+def _get_related_tickers(ticker, count=7):
+    """Return a list of related tickers based on the sector of the given ticker."""
+    fallback = ["AAPL", "MSFT", "GOOG", "AMZN", "NVDA", "META", "TSLA"]
+    try:
+        info = yf.Ticker(ticker).info
+        sector = info.get("sector", "")
+        peers = SECTOR_PEERS.get(sector, fallback)
+        related = [s for s in peers if s != ticker]
+        return related[:count]
+    except Exception:
+        return [s for s in fallback if s != ticker][:count]
+
+
 def _report_matches_symbol(report: dict, target: str) -> bool:
     target_upper = target.upper()
     meta = report.get("meta") or {}
@@ -484,6 +512,74 @@ def get_history(ticker):
         print(f"Error fetching chart history for {symbol}: {traceback.format_exc()}")
         return jsonify({"error": "An internal error occurred while fetching chart history."}), 500
 
+
+@app.route('/api/related/<ticker>', methods=['GET'])
+def get_related(ticker):
+    """Return related stock tickers with mini price data for a Recommended for you section."""
+    symbol = str(ticker or "").strip().upper()
+    if not symbol:
+        return jsonify({"error": "Ticker parameter is required"}), 400
+
+    print(f"API Request for Related Tickers: {symbol}")
+
+    def _normalize_related_frame(frame, sym):
+        if frame is None or frame.empty:
+            return frame
+        if isinstance(frame.columns, pd.MultiIndex):
+            try:
+                if sym in frame.columns.get_level_values(-1):
+                    frame = frame.xs(sym, axis=1, level=-1, drop_level=True)
+                else:
+                    frame.columns = [str(col[0]) for col in frame.columns]
+            except Exception:
+                frame.columns = [str(col[0]) if isinstance(col, tuple) else str(col) for col in frame.columns]
+        return frame
+
+    try:
+        related_symbols = _get_related_tickers(symbol)
+        results = []
+        for sym in related_symbols:
+            try:
+                frame = yf.download(
+                    sym,
+                    period="5d",
+                    interval="1d",
+                    progress=False,
+                    auto_adjust=False,
+                    actions=False,
+                    threads=False,
+                )
+                frame = _normalize_related_frame(frame, sym)
+                if frame is None or frame.empty or "Close" not in frame.columns:
+                    continue
+                close_series = pd.to_numeric(frame["Close"], errors="coerce")
+                closes = [float(x) for x in close_series if np.isfinite(x)]
+                if len(closes) < 2:
+                    continue
+                current_price = closes[-1]
+                previous_close = closes[-2]
+                price_change = current_price - previous_close
+                price_change_pct = (price_change / previous_close * 100) if previous_close else 0.0
+                try:
+                    name = yf.Ticker(sym).info.get("shortName", sym)
+                except Exception:
+                    name = sym
+                results.append({
+                    "symbol": sym,
+                    "name": name,
+                    "current_price": round(current_price, 2),
+                    "price_change": round(price_change, 2),
+                    "price_change_pct": round(price_change_pct, 4),
+                    "sparkline": closes,
+                })
+            except Exception:
+                continue
+        return jsonify({"ticker": symbol, "related": results})
+    except Exception:
+        print(f"Error in /api/related/{symbol}: {traceback.format_exc()}")
+        return jsonify({"error": "An internal error occurred"}), 500
+
+
 @app.route('/api/analyze', methods=['GET'])
 def analyze_ticker():
     """API endpoint to analyze a specific ticker."""

static/app.js

@@ -766,6 +766,8 @@ document.addEventListener('DOMContentLoaded', () => {
         _showSkeleton();
         if (!keepDashboardVisible) {
             dashboard.classList.add('hidden');
+            var recSec = document.getElementById('recommended-section');
+            if (recSec) recSec.classList.add('hidden');
         }
 
         try {
@@ -817,6 +819,7 @@ document.addEventListener('DOMContentLoaded', () => {
             latestAnalyzeTimeframe = getActiveTimeframe();
             updateDashboard(data);
             await refreshChartForTimeframe(currentTicker, getActiveTimeframe(), false);
+            if (typeof window._irisLoadRecommendations === 'function') { window._irisLoadRecommendations(currentTicker); }
 
         } catch (error) {
             clearTimeout(timeoutId);
@@ -1548,3 +1551,192 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 });
+
+/* ─────────────────────────────────────────────────────
+   Recommended For You – Stock Recommendations
+   ───────────────────────────────────────────────────── */
+
+(function initRecommendations() {
+  'use strict';
+
+  const recSection   = document.getElementById('recommended-section');
+  const recScroll    = document.getElementById('rec-scroll');
+  const recSubtitle  = document.getElementById('rec-subtitle');
+  const recPrevBtn   = document.getElementById('rec-prev');
+  const recNextBtn   = document.getElementById('rec-next');
+
+  if (!recSection || !recScroll) return;
+
+  function drawSparkline(canvas, dataPoints, isPositive) {
+    if (!canvas || !dataPoints || dataPoints.length < 2) return;
+    const ctx = canvas.getContext('2d');
+    const dpr = window.devicePixelRatio || 1;
+    const rect = canvas.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return;
+
+    canvas.width  = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    canvas.style.width  = rect.width + 'px';
+    canvas.style.height = rect.height + 'px';
+    ctx.scale(dpr, dpr);
+
+    const w = rect.width;
+    const h = rect.height;
+    const min = Math.min(...dataPoints);
+    const max = Math.max(...dataPoints);
+    const range = max - min || 1;
+    const pad = 2;
+
+    const color = isPositive ? '#22c55e' : '#ef4444';
+
+    ctx.beginPath();
+    dataPoints.forEach(function (v, i) {
+      var x = (i / (dataPoints.length - 1)) * w;
+      var y = pad + ((max - v) / range) * (h - pad * 2);
+      i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+    });
+    ctx.lineTo(w, h);
+    ctx.lineTo(0, h);
+    ctx.closePath();
+    var grad = ctx.createLinearGradient(0, 0, 0, h);
+    grad.addColorStop(0, isPositive ? 'rgba(34,197,94,0.15)' : 'rgba(239,68,68,0.15)');
+    grad.addColorStop(1, 'rgba(0,0,0,0)');
+    ctx.fillStyle = grad;
+    ctx.fill();
+
+    ctx.beginPath();
+    dataPoints.forEach(function (v, i) {
+      var x = (i / (dataPoints.length - 1)) * w;
+      var y = pad + ((max - v) / range) * (h - pad * 2);
+      i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+    });
+    ctx.strokeStyle = color;
+    ctx.lineWidth   = 1.5;
+    ctx.lineJoin    = 'round';
+    ctx.lineCap     = 'round';
+    ctx.stroke();
+  }
+
+  function showRecSkeleton() {
+    recScroll.innerHTML = '';
+    for (var i = 0; i < 5; i++) {
+      var skel = document.createElement('div');
+      skel.className = 'rec-card-skeleton';
+      skel.innerHTML =
+        '<div class="rec-skel-line w60"></div>' +
+        '<div class="rec-skel-line w40"></div>' +
+        '<div class="rec-skel-block"></div>' +
+        '<div class="rec-skel-price"></div>';
+      recScroll.appendChild(skel);
+    }
+    recSection.classList.remove('hidden');
+  }
+
+  function buildRecCard(item) {
+    var pctVal   = item.price_change_pct || 0;
+    var isPos    = pctVal > 0;
+    var isNeg    = pctVal < 0;
+    var dirClass = isPos ? 'rec-positive' : isNeg ? 'rec-negative' : '';
+    var badgeCls = isPos ? 'rec-badge-positive' : isNeg ? 'rec-badge-negative' : 'rec-badge-neutral';
+    var chCls    = isPos ? 'rec-ch-positive' : isNeg ? 'rec-ch-negative' : 'rec-ch-neutral';
+    var sign     = isPos ? '+' : '';
+
+    var card = document.createElement('div');
+    card.className = 'rec-card ' + dirClass;
+    card.setAttribute('role', 'button');
+    card.setAttribute('tabindex', '0');
+    card.setAttribute('aria-label', 'Analyze ' + item.symbol);
+
+    card.innerHTML =
+      '<div class="rec-card-top">' +
+        '<span class="rec-ticker">' + item.symbol + '</span>' +
+        '<span class="rec-change-badge ' + badgeCls + '">' + sign + pctVal.toFixed(2) + '%</span>' +
+      '</div>' +
+      '<div class="rec-name">' + (item.name || item.symbol) + '</div>' +
+      '<div class="rec-sparkline"><canvas></canvas></div>' +
+      '<div class="rec-price-row">' +
+        '<span class="rec-price">$' + (item.current_price || 0).toFixed(2) + '</span>' +
+        '<span class="rec-price-change ' + chCls + '">' + sign + (item.price_change || 0).toFixed(2) + '</span>' +
+      '</div>';
+
+    function triggerAnalysis() {
+      var tickerInput = document.getElementById('ticker-input');
+      var form        = document.getElementById('analyze-form');
+      if (tickerInput && form) {
+        tickerInput.value = item.symbol;
+        tickerInput.dispatchEvent(new Event('input', { bubbles: true }));
+        setTimeout(function () {
+          form.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
+        }, 150);
+      }
+    }
+    card.addEventListener('click', triggerAnalysis);
+    card.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); triggerAnalysis(); }
+    });
+
+    return card;
+  }
+
+  function fetchRecommendations(ticker) {
+    if (!ticker) return;
+    showRecSkeleton();
+    recSubtitle.textContent = 'Related stocks based on ' + ticker + '\'s sector';
+
+    fetch('/api/related/' + encodeURIComponent(ticker))
+      .then(function (res) {
+        if (!res.ok) throw new Error('HTTP ' + res.status);
+        return res.json();
+      })
+      .then(function (data) {
+        if (!data.related || data.related.length === 0) {
+          recSection.classList.add('hidden');
+          return;
+        }
+
+        recScroll.innerHTML = '';
+
+        data.related.forEach(function (item) {
+          var card = buildRecCard(item);
+          recScroll.appendChild(card);
+
+          setTimeout(function () {
+            var canvas = card.querySelector('.rec-sparkline canvas');
+            if (canvas && item.sparkline && item.sparkline.length >= 2) {
+              drawSparkline(canvas, item.sparkline, (item.price_change_pct || 0) >= 0);
+            }
+          }, 50);
+        });
+
+        recSection.classList.remove('hidden');
+        updateRecNav();
+      })
+      .catch(function (err) {
+        console.warn('Recommendations fetch failed:', err);
+        recSection.classList.add('hidden');
+      });
+  }
+
+  function updateRecNav() {
+    if (!recPrevBtn || !recNextBtn) return;
+    recPrevBtn.disabled = recScroll.scrollLeft <= 5;
+    recNextBtn.disabled = recScroll.scrollLeft + recScroll.clientWidth >= recScroll.scrollWidth - 5;
+  }
+
+  if (recPrevBtn) {
+    recPrevBtn.addEventListener('click', function () {
+      recScroll.scrollBy({ left: -200, behavior: 'smooth' });
+      setTimeout(updateRecNav, 400);
+    });
+  }
+  if (recNextBtn) {
+    recNextBtn.addEventListener('click', function () {
+      recScroll.scrollBy({ left: 200, behavior: 'smooth' });
+      setTimeout(updateRecNav, 400);
+    });
+  }
+  recScroll.addEventListener('scroll', updateRecNav);
+
+  window._irisLoadRecommendations = fetchRecommendations;
+
+})();

static/style.css

@@ -1622,4 +1622,312 @@ footer p {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-}
+}
+
+/* ─────────────────────────────────────────────────────
+   Recommended For You – Stock Recommendations
+   ───────────────────────────────────────────────────── */
+
+.recommended-section {
+  margin-top: 20px;
+  margin-bottom: 24px;
+}
+
+.recommended-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 14px;
+  padding: 0 2px;
+}
+
+.rec-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary, #e8e8ec);
+  letter-spacing: -0.2px;
+  margin: 0;
+  text-transform: none;
+}
+
+.rec-subtitle {
+  font-size: 12px;
+  color: var(--text-muted, #5e5e72);
+  font-weight: 400;
+  display: block;
+  margin-top: 2px;
+}
+
+.rec-nav {
+  display: flex;
+  gap: 6px;
+}
+
+.rec-nav-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: var(--text-secondary, #9a9aad);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  line-height: 1;
+  font-family: inherit;
+  transition: all 0.15s ease;
+  padding: 0;
+}
+
+.rec-nav-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.07);
+  border-color: rgba(255, 255, 255, 0.14);
+  color: var(--text-primary, #e8e8ec);
+}
+
+.rec-nav-btn:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.rec-scroll-wrapper {
+  position: relative;
+}
+
+.rec-scroll {
+  display: flex;
+  gap: 12px;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+  padding-bottom: 4px;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.rec-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.rec-card {
+  flex: 0 0 180px;
+  min-width: 180px;
+  scroll-snap-align: start;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 12px;
+  padding: 14px 16px 12px;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.rec-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: transparent;
+  transition: background 0.2s ease;
+}
+
+.rec-card:hover {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.12);
+  transform: translateY(-2px);
+}
+
+.rec-card:hover::before {
+  background: var(--accent, #3b82f6);
+}
+
+.rec-card.rec-positive:hover::before {
+  background: #22c55e;
+}
+
+.rec-card.rec-negative:hover::before {
+  background: #ef4444;
+}
+
+.rec-card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 2px;
+}
+
+.rec-ticker {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-primary, #e8e8ec);
+  letter-spacing: -0.3px;
+}
+
+.rec-change-badge {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 7px;
+  border-radius: 4px;
+  letter-spacing: 0.2px;
+  line-height: 1.4;
+}
+
+.rec-change-badge.rec-badge-positive {
+  background: rgba(34, 197, 94, 0.1);
+  color: #22c55e;
+}
+
+.rec-change-badge.rec-badge-negative {
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
+
+.rec-change-badge.rec-badge-neutral {
+  background: rgba(245, 158, 11, 0.1);
+  color: #f59e0b;
+}
+
+.rec-name {
+  font-size: 11px;
+  color: var(--text-muted, #5e5e72);
+  margin-bottom: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.rec-sparkline {
+  width: 100%;
+  height: 40px;
+  margin-bottom: 10px;
+  position: relative;
+}
+
+.rec-sparkline canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.rec-price-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.rec-price {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary, #e8e8ec);
+}
+
+.rec-price-change {
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.rec-price-change.rec-ch-positive {
+  color: #22c55e;
+}
+
+.rec-price-change.rec-ch-negative {
+  color: #ef4444;
+}
+
+.rec-price-change.rec-ch-neutral {
+  color: #f59e0b;
+}
+
+.rec-card-skeleton {
+  flex: 0 0 180px;
+  min-width: 180px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 12px;
+  padding: 14px 16px 12px;
+  pointer-events: none;
+}
+
+.rec-skel-line {
+  height: 12px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.05);
+  animation: rec-skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+.rec-skel-line.w60 { width: 60%; }
+.rec-skel-line.w40 { width: 40%; margin-top: 6px; }
+.rec-skel-block {
+  width: 100%;
+  height: 40px;
+  border-radius: 6px;
+  margin: 10px 0;
+  background: rgba(255, 255, 255, 0.03);
+  animation: rec-skeleton-pulse 1.5s ease-in-out infinite;
+  animation-delay: 0.3s;
+}
+.rec-skel-price {
+  height: 14px;
+  width: 50%;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.05);
+  animation: rec-skeleton-pulse 1.5s ease-in-out infinite;
+  animation-delay: 0.6s;
+}
+
+@keyframes rec-skeleton-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+[data-theme="light"] .rec-card {
+  background: rgba(0, 0, 0, 0.02);
+  border-color: rgba(0, 0, 0, 0.08);
+}
+
+[data-theme="light"] .rec-card:hover {
+  background: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.12);
+}
+
+[data-theme="light"] .rec-nav-btn {
+  background: rgba(0, 0, 0, 0.03);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+[data-theme="light"] .rec-nav-btn:hover:not(:disabled) {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+[data-theme="light"] .rec-card-skeleton {
+  background: rgba(0, 0, 0, 0.02);
+  border-color: rgba(0, 0, 0, 0.08);
+}
+
+[data-theme="light"] .rec-skel-line,
+[data-theme="light"] .rec-skel-price {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+[data-theme="light"] .rec-skel-block {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+@media (max-width: 640px) {
+  .rec-card {
+    flex: 0 0 156px;
+    min-width: 156px;
+    padding: 12px 14px 10px;
+  }
+  .rec-card-skeleton {
+    flex: 0 0 156px;
+    min-width: 156px;
+  }
+  .rec-ticker { font-size: 13px; }
+  .rec-price { font-size: 14px; }
+}

templates/index.html

@@ -14,7 +14,7 @@
         })();
     </script>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="/static/style.css?v=7">
+    <link rel="stylesheet" href="/static/style.css?v=8">
     <link rel="icon" type="image/svg+xml"
         href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22 fill=%22%233b82f6%22>IA</text></svg>">
 </head>
@@ -191,6 +191,23 @@
                     <div id="chart-placeholder" class="chart-placeholder">Loading chart...</div>
                 </div>
             </div>
+
+        <!-- Recommended For You -->
+        <div id="recommended-section" class="recommended-section hidden">
+          <div class="recommended-header">
+            <div>
+              <h3 class="rec-title">Recommended for you</h3>
+              <span class="rec-subtitle" id="rec-subtitle">Related stocks in the same sector</span>
+            </div>
+            <div class="rec-nav">
+              <button type="button" class="rec-nav-btn" id="rec-prev" disabled aria-label="Scroll left">&#8249;</button>
+              <button type="button" class="rec-nav-btn" id="rec-next" aria-label="Scroll right">&#8250;</button>
+            </div>
+          </div>
+          <div class="rec-scroll-wrapper">
+            <div class="rec-scroll" id="rec-scroll"></div>
+          </div>
+        </div>
         </section>
     </main>
 
@@ -221,7 +238,7 @@
     <script
         src="https://unpkg.com/lightweight-charts@4.1.1/dist/lightweight-charts.standalone.production.js?v=4"></script>
     <script src="/static/tickerValidation.js?v=1"></script>
-    <script src="/static/app.js?v=19"></script>
+    <script src="/static/app.js?v=20"></script>
 </body>
 
 </html>