feat: add candlestick charts, technical indicators, live toasts, and AI personalization

- schema.py: Support optional trading_style and risk_tolerance variables in get_ai_insight mutation, and tailor Gemini agent prompt
- StockChart.tsx: Implement calculations and toggle controls for SMA (20), EMA (20), RSI (14) indicator sub-panel, and Line/Candlestick chart representations
- AIAnalyst.tsx: Add UI selectors for Trading Style and Risk Profile parameters
- App.tsx: Add live glassmorphic Toast notification system, check price alerts in WebSocket ticks loop, and format open/high/low/close candlestick data points
- App.css: Style toast stack containers, control buttons, overlays, and keyframes animations

backend/app/graphql/schema.py

@@ -457,7 +457,13 @@ class Mutation:
         return PaymentOrderType(order_id= order_id, amount= amount * 100, currency= "INR")
     
     @strawberry.mutation
-    async def get_ai_insight(self, info: Info, ticker: str) -> GeminiInsightType:
+    async def get_ai_insight(
+        self, 
+        info: Info, 
+        ticker: str, 
+        trading_style: Optional[str] = None, 
+        risk_tolerance: Optional[str] = None
+    ) -> GeminiInsightType:
         """
         Deducts 1 credit, executes the local ONNX ML prediction, and calls
         the Gemini ReAct agent loop to return market insights.
@@ -471,8 +477,12 @@ class Mutation:
             raise Exception("Insufficient credits. Please recharge via Razorpay.")
             
         # 2. Call the Gemini ReAct agent loop
+        style_label = (trading_style or "swing_trading").replace("_", " ")
+        risk_label = risk_tolerance or "moderate"
         prompt = (
             f"Analyze stock ticker {ticker.upper()}. "
+            f"The user's trading style is {style_label} and their risk profile is {risk_label}. "
+            "Tailor your analysis, support/resistance levels, entry/exit targets, and strategy report to match this style and risk profile. "
             "Retrieve its latest technical indicators and quantitative ML prediction using your tools. "
             "Check if the user has any active price alerts or watchlists set up for it. "
             "Perform a holistic qualitative and quantitative analysis of this stock."

frontend/src/App.css

@@ -1795,3 +1795,87 @@
 .pricing-full-card.lifetime-deal-card {
   animation: pulse-cyan-glow 3s infinite ease-in-out;
 }
+
+/* Toast Notification System Styles */
+.toast-container {
+  position: fixed;
+  top: 24px;
+  right: 24px;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  pointer-events: none;
+}
+
+.toast-notification {
+  pointer-events: auto;
+  min-width: 320px;
+  max-width: 420px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 14px 18px;
+  border-radius: 12px;
+  font-family: inherit;
+  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
+  animation: slide-in-toast 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.toast-success {
+  background: rgba(16, 185, 129, 0.08);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+  color: #10b981;
+}
+
+.toast-alert {
+  background: rgba(239, 68, 68, 0.08);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  color: #ef4444;
+  animation: slide-in-toast 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards, shake-toast 0.4s ease-in-out 0.3s;
+}
+
+@keyframes slide-in-toast {
+  from {
+    transform: translateX(120%) scale(0.9);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes shake-toast {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-4px); }
+  75% { transform: translateX(4px); }
+}
+
+/* Indicators Controls Styles */
+.control-toggle-btn {
+  background: none;
+  border: 1px solid var(--border-glass) !important;
+  color: var(--text-secondary);
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  outline: none;
+}
+
+.control-toggle-btn:hover {
+  background: rgba(255, 255, 255, 0.03) !important;
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  color: var(--text-primary) !important;
+}
+
+.control-toggle-btn.active:hover {
+  opacity: 0.9;
+}

frontend/src/App.tsx

@@ -1,7 +1,8 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import LandingPage from './pages/LandingPage';
 import Dashboard from './pages/Dashboard';
 import UpgradePage from './pages/UpgradePage';
+import { X } from 'lucide-react';
 import './App.css';
 
 // Declare global types for external scripts
@@ -56,6 +57,20 @@ export default function App() {
   const [alerts, setAlerts] = useState<any[]>([]);
   const [chartRange, setChartRange] = useState<string>('1d');
   const [indices, setIndices] = useState<any[]>([]);
+  const [toasts, setToasts] = useState<Array<{ id: string; message: string; type: 'success' | 'alert' }>>([]);
+
+  const alertsRef = useRef<any[]>([]);
+  useEffect(() => {
+    alertsRef.current = alerts;
+  }, [alerts]);
+
+  const addToast = (message: string, type: 'success' | 'alert' = 'success') => {
+    const id = Math.random().toString(36).substring(2, 9);
+    setToasts(prev => [...prev, { id, message, type }]);
+    setTimeout(() => {
+      setToasts(prev => prev.filter(t => t.id !== id));
+    }, 6000);
+  };
   
   // AI Insights State
   const [insight, setInsight] = useState<any>(null);
@@ -224,9 +239,18 @@ export default function App() {
           } else {
             timeLabel = dateObj.toLocaleDateString([], { month: 'short', day: 'numeric' });
           }
+          const closeVal = parseFloat(h.close.toFixed(2));
+          const openVal = parseFloat((h.open !== null && h.open !== undefined ? h.open : h.close).toFixed(2));
+          const highVal = parseFloat((h.high !== null && h.high !== undefined ? h.high : h.close).toFixed(2));
+          const lowVal = parseFloat((h.low !== null && h.low !== undefined ? h.low : h.close).toFixed(2));
           return {
             time: timeLabel,
-            price: parseFloat(h.close.toFixed(2)),
+            price: closeVal,
+            open: openVal,
+            high: highVal,
+            low: lowVal,
+            close: closeVal,
+            range: [openVal, closeVal],
           };
         });
         setChartData(formatted);
@@ -287,20 +311,60 @@ export default function App() {
       if (msg.type === 'next' && msg.id === 'stock-tick-sub') {
         const tick = msg.payload.data?.streamStockTicks;
         if (!tick) return;
+
+        // Evaluate active alerts for this ticker
+        const currentPrice = tick.price;
+        alertsRef.current.forEach((alert) => {
+          if (alert.ticker === tick.ticker && alert.isActive) {
+            const isAboveTriggered = alert.condition === 'above' && currentPrice >= alert.targetPrice;
+            const isBelowTriggered = alert.condition === 'below' && currentPrice <= alert.targetPrice;
+
+            if (isAboveTriggered || isBelowTriggered) {
+              addToast(
+                `🔔 Alert Triggered: ${tick.ticker} crossed ${alert.condition.toUpperCase()} $${alert.targetPrice.toFixed(2)} (Current: $${currentPrice.toFixed(2)})`,
+                'alert'
+              );
+              // Call API to deactivate
+              handleDeactivateAlert(alert.id);
+            }
+          }
+        });
         
         const tickTime = new Date(tick.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
         
         setChartData((prevData) => {
-          // If we already have the timestamp, update price. Else append.
           const updated = [...prevData];
           const last = updated[updated.length - 1];
           const newPrice = parseFloat(tick.price.toFixed(2));
           
           if (last && last.time === tickTime) {
-            updated[updated.length - 1] = { time: tickTime, price: newPrice };
+            const openVal = last.open !== undefined ? last.open : newPrice;
+            const highVal = Math.max(last.high !== undefined ? last.high : newPrice, newPrice);
+            const lowVal = Math.min(last.low !== undefined ? last.low : newPrice, newPrice);
+            
+            updated[updated.length - 1] = { 
+              time: tickTime, 
+              price: newPrice,
+              open: openVal,
+              high: highVal,
+              low: lowVal,
+              close: newPrice,
+              range: [openVal, newPrice]
+            };
             return updated;
           } else {
-            const nextList = [...updated, { time: tickTime, price: newPrice }];
+            const nextList = [
+              ...updated, 
+              { 
+                time: tickTime, 
+                price: newPrice,
+                open: newPrice,
+                high: newPrice,
+                low: newPrice,
+                close: newPrice,
+                range: [newPrice, newPrice]
+              }
+            ];
             // Cap chart view to last 35 data points
             if (nextList.length > 35) nextList.shift();
             return nextList;
@@ -551,31 +615,51 @@ export default function App() {
   }
 
   return (
-    <Dashboard
-      user={user}
-      watchlist={watchlist}
-      watchlistQuotes={watchlistQuotes}
-      activeTicker={activeTicker}
-      chartData={chartData}
-      activeStats={activeStats}
-      alerts={alerts}
-      insight={insight}
-      savedStrategies={savedStrategies}
-      loadingInsight={loadingInsight}
-      insightError={insightError}
-      chartRange={chartRange}
-      onRangeChange={setChartRange}
-      onSelectTicker={setActiveTicker}
-      onAddTicker={handleAddWatchlist}
-      onRemoveTicker={handleRemoveWatchlist}
-      onCreateAlert={handleCreateAlert}
-      onDeactivateAlert={handleDeactivateAlert}
-      onTriggerInsight={triggerAIInsight}
-      onOpenRecharge={() => setCurrentView('upgrade')}
-      onLogout={handleLogout}
-      onLogoClick={() => setCurrentView('landing')}
-      onAvatarUpload={(newUrl) => setUser((prev: any) => prev ? { ...prev, pictureUrl: newUrl } : null)}
-      indices={indices}
-    />
+    <>
+      <Dashboard
+        user={user}
+        watchlist={watchlist}
+        watchlistQuotes={watchlistQuotes}
+        activeTicker={activeTicker}
+        chartData={chartData}
+        activeStats={activeStats}
+        alerts={alerts}
+        insight={insight}
+        savedStrategies={savedStrategies}
+        loadingInsight={loadingInsight}
+        insightError={insightError}
+        chartRange={chartRange}
+        onRangeChange={setChartRange}
+        onSelectTicker={setActiveTicker}
+        onAddTicker={handleAddWatchlist}
+        onRemoveTicker={handleRemoveWatchlist}
+        onCreateAlert={handleCreateAlert}
+        onDeactivateAlert={handleDeactivateAlert}
+        onTriggerInsight={triggerAIInsight}
+        onOpenRecharge={() => setCurrentView('upgrade')}
+        onLogout={handleLogout}
+        onLogoClick={() => setCurrentView('landing')}
+        onAvatarUpload={(newUrl) => setUser((prev: any) => prev ? { ...prev, pictureUrl: newUrl } : null)}
+        indices={indices}
+      />
+
+      {/* Toast Notification Stack */}
+      <div className="toast-container">
+        {toasts.map((toast) => (
+          <div 
+            key={toast.id} 
+            className={`toast-notification ${toast.type === 'alert' ? 'toast-alert' : 'toast-success'}`}
+          >
+            <span style={{ fontSize: '13px', fontWeight: 600, flex: 1, textAlign: 'left' }}>{toast.message}</span>
+            <button 
+              onClick={() => setToasts(prev => prev.filter(t => t.id !== toast.id))}
+              style={{ background: 'none', border: 'none', color: 'rgba(255,255,255,0.6)', cursor: 'pointer', display: 'flex', alignItems: 'center', padding: '2px', outline: 'none' }}
+            >
+              <X size={14} />
+            </button>
+          </div>
+        ))}
+      </div>
+    </>
   );
 }

frontend/src/components/AIAnalyst.tsx

@@ -14,7 +14,7 @@ interface AIAnalystProps {
   savedStrategies: any[];
   loadingInsight: boolean;
   insightError: string | null;
-  onTriggerInsight: () => void;
+  onTriggerInsight: (tradingStyle: string, riskTolerance: string) => void;
 }
 
 export default function AIAnalyst({
@@ -27,6 +27,8 @@ export default function AIAnalyst({
 }: AIAnalystProps) {
   const [activeTab, setActiveTab] = useState<'analysis' | 'history'>('analysis');
   const [selectedHistoryItem, setSelectedHistoryItem] = useState<any | null>(null);
+  const [tradingStyle, setTradingStyle] = useState('swing_trading');
+  const [riskTolerance, setRiskTolerance] = useState('moderate');
 
   // Custom parser to format **bold** words in neon-cyan and support paragraph newlines
   const formatReason = (text: string) => {
@@ -129,11 +131,40 @@ export default function AIAnalyst({
         {activeTab === 'analysis' ? (
           <>
             {!insight && !loadingInsight && (
-              <div className="insight-cta">
-                <p className="insight-cta-description">
+              <div className="insight-cta" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px' }}>
+                <p className="insight-cta-description" style={{ margin: 0 }}>
                   Analyze indicators, watchlists, alerts, and model prediction in a single ReAct workflow.
                 </p>
-                <button className="insight-btn" onClick={onTriggerInsight}>
+                
+                {/* Style & Risk selectors */}
+                <div className="ai-param-selectors" style={{ display: 'flex', gap: '16px', justifyContent: 'center', width: '100%', maxWidth: '400px' }}>
+                  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '6px', textAlign: 'left' }}>
+                    <label style={{ fontSize: '11px', color: 'var(--text-secondary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Trading Style</label>
+                    <select 
+                      value={tradingStyle}
+                      onChange={(e) => setTradingStyle(e.target.value)}
+                      style={{ width: '100%', padding: '10px 14px', background: 'rgba(255,255,255,0.02)', border: '1px solid var(--border-glass)', borderRadius: '10px', color: 'var(--text-primary)', outline: 'none', cursor: 'pointer', fontSize: '12px', transition: 'all 0.2s ease' }}
+                    >
+                      <option value="day_trading">Day Trading</option>
+                      <option value="swing_trading">Swing Trading</option>
+                      <option value="investing">Long-term Investing</option>
+                    </select>
+                  </div>
+                  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '6px', textAlign: 'left' }}>
+                    <label style={{ fontSize: '11px', color: 'var(--text-secondary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Risk Profile</label>
+                    <select 
+                      value={riskTolerance}
+                      onChange={(e) => setRiskTolerance(e.target.value)}
+                      style={{ width: '100%', padding: '10px 14px', background: 'rgba(255,255,255,0.02)', border: '1px solid var(--border-glass)', borderRadius: '10px', color: 'var(--text-primary)', outline: 'none', cursor: 'pointer', fontSize: '12px', transition: 'all 0.2s ease' }}
+                    >
+                      <option value="conservative">Conservative</option>
+                      <option value="moderate">Moderate</option>
+                      <option value="aggressive">Aggressive</option>
+                    </select>
+                  </div>
+                </div>
+
+                <button className="insight-btn" onClick={() => onTriggerInsight(tradingStyle, riskTolerance)} style={{ marginTop: '4px' }}>
                   Generate strategy for {activeTicker}
                 </button>
               </div>

frontend/src/components/StockChart.tsx

@@ -1,9 +1,15 @@
-
-import { ResponsiveContainer, AreaChart, Area, XAxis, YAxis, Tooltip } from 'recharts';
+import { useState } from 'react';
+import { ResponsiveContainer, ComposedChart, Area, Bar, Line, XAxis, YAxis, Tooltip, ReferenceLine, LineChart } from 'recharts';
+import { AreaChart as AreaIcon, BarChart2 as CandleIcon, Activity, Eye, EyeOff } from 'lucide-react';
 
 interface ChartDataPoint {
   time: string;
   price: number;
+  open?: number;
+  high?: number;
+  low?: number;
+  close?: number;
+  range?: [number, number];
 }
 
 interface StockChartProps {
@@ -14,9 +20,59 @@ interface StockChartProps {
   onRangeChange: (range: string) => void;
 }
 
+// Custom SVG component to draw wicks and body for candlestick bars
+const CandlestickBar = (props: any) => {
+  const { x, y, width, height, open, close, high, low } = props;
+  if (open === undefined || close === undefined || high === undefined || low === undefined) return null;
+
+  const isUp = close >= open;
+  const color = isUp ? '#10b981' : '#ef4444'; // green or red
+  
+  const bodyHigh = Math.max(open, close);
+  const bodyLow = Math.min(open, close);
+  
+  const bodyHeight = Math.abs(open - close);
+  const scale = bodyHeight > 0 ? height / bodyHeight : 1;
+  
+  const yHigh = y - (high - bodyHigh) * scale;
+  const yLow = (y + height) + (bodyLow - low) * scale;
+  
+  const cx = x + width / 2;
+  
+  return (
+    <g>
+      {/* Wick / Shadow */}
+      <line 
+        x1={cx} 
+        y1={yHigh} 
+        x2={cx} 
+        y2={yLow} 
+        stroke={color} 
+        strokeWidth={1.5} 
+      />
+      {/* Candle Body */}
+      <rect 
+        x={x} 
+        y={y} 
+        width={width} 
+        height={Math.max(height, 2)} // Ensure at least 2px height for flat candles
+        fill={color} 
+        stroke={color}
+        strokeWidth={1}
+      />
+    </g>
+  );
+};
+
 export default function StockChart({ activeTicker, chartData, activeStats, chartRange, onRangeChange }: StockChartProps) {
   const currentPrice = chartData.length > 0 ? chartData[chartData.length - 1].price : null;
 
+  // Chart States
+  const [chartType, setChartType] = useState<'line' | 'candle'>('line');
+  const [showSMA, setShowSMA] = useState<boolean>(false);
+  const [showEMA, setShowEMA] = useState<boolean>(false);
+  const [showRSI, setShowRSI] = useState<boolean>(false);
+
   const ranges = [
     { label: '1D', value: '1d' },
     { label: '5D', value: '5d' },
@@ -28,6 +84,69 @@ export default function StockChart({ activeTicker, chartData, activeStats, chart
     { label: 'MAX', value: 'max' }
   ];
 
+  // Helper: compute SMA 20
+  const computeSMA = (data: any[], period: number = 20) => {
+    return data.map((d, i) => {
+      if (i < period - 1) return { ...d, sma: null };
+      const slice = data.slice(i - period + 1, i + 1);
+      const sum = slice.reduce((acc, curr) => acc + curr.price, 0);
+      return { ...d, sma: parseFloat((sum / period).toFixed(2)) };
+    });
+  };
+
+  // Helper: compute EMA 20
+  const computeEMA = (data: any[], period: number = 20) => {
+    const k = 2 / (period + 1);
+    let prevEma = data.length > 0 ? data[0].price : 0;
+    return data.map((d, i) => {
+      if (i === 0) return { ...d, ema: prevEma };
+      const ema = d.price * k + prevEma * (1 - k);
+      prevEma = ema;
+      return { ...d, ema: parseFloat(ema.toFixed(2)) };
+    });
+  };
+
+  // Helper: compute RSI 14
+  const computeRSI = (data: any[], period: number = 14) => {
+    if (data.length === 0) return [];
+    
+    let gains = 0;
+    let losses = 0;
+    
+    // Initial gains/losses
+    for (let i = 1; i <= period && i < data.length; i++) {
+      const diff = data[i].price - data[i - 1].price;
+      if (diff > 0) gains += diff;
+      else losses -= diff;
+    }
+    
+    let avgGain = gains / period;
+    let avgLoss = losses / period;
+    
+    return data.map((d, i) => {
+      if (i <= period) return { ...d, rsi: 50 }; // default neutral
+      
+      const diff = d.price - data[i - 1].price;
+      const gain = diff > 0 ? diff : 0;
+      const loss = diff < 0 ? -diff : 0;
+      
+      avgGain = (avgGain * (period - 1) + gain) / period;
+      avgLoss = (avgLoss * (period - 1) + loss) / period;
+      
+      if (avgLoss === 0) return { ...d, rsi: 100 };
+      const rs = avgGain / avgLoss;
+      const rsi = 100 - 100 / (1 + rs);
+      return { ...d, rsi: parseFloat(rsi.toFixed(2)) };
+    });
+  };
+
+  // Pipeline processed chart data
+  let processedData = [...chartData];
+  if (showSMA) processedData = computeSMA(processedData, 20);
+  if (showEMA) processedData = computeEMA(processedData, 20);
+  
+  const rsiData = showRSI ? computeRSI(chartData, 14) : [];
+
   return (
     <div className="glass-panel chart-panel">
       <div className="chart-header">
@@ -88,46 +207,140 @@ export default function StockChart({ activeTicker, chartData, activeStats, chart
         </div>
       )}
 
-      <div className="chart-container">
-        {chartData.length > 0 ? (
-          <ResponsiveContainer width="100%" height="100%">
-            <AreaChart data={chartData} margin={{ top: 10, right: 5, left: -20, bottom: 0 }}>
-              <defs>
-                <linearGradient id="chartGlow" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor="#00f2fe" stopOpacity={0.2}/>
-                  <stop offset="95%" stopColor="#00f2fe" stopOpacity={0.0}/>
-                </linearGradient>
-              </defs>
-              <XAxis 
-                dataKey="time" 
-                stroke="#475569" 
-                fontSize={11}
-                tickLine={false}
-              />
-              <YAxis 
-                stroke="#475569" 
-                fontSize={11}
-                domain={['auto', 'auto']}
-                tickLine={false}
-              />
-              <Tooltip 
-                contentStyle={{ 
-                  background: '#0d101b', 
-                  borderColor: '#2e303a',
-                  borderRadius: '8px',
-                  color: '#fff' 
-                }}
-              />
-              <Area 
-                type="monotone" 
-                dataKey="price" 
-                stroke="#00f2fe" 
-                strokeWidth={2}
-                fillOpacity={1} 
-                fill="url(#chartGlow)" 
-              />
-            </AreaChart>
-          </ResponsiveContainer>
+      {/* Technical Indicator Controls row */}
+      <div className="chart-indicator-controls" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 16px', background: 'rgba(255,255,255,0.01)', borderBottom: '1px solid var(--border-glass)', gap: '12px', flexWrap: 'wrap' }}>
+        <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+          <span style={{ fontSize: '11px', color: 'var(--text-secondary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', marginRight: '6px' }}>Chart Type</span>
+          <button 
+            onClick={() => setChartType('line')} 
+            className={`control-toggle-btn ${chartType === 'line' ? 'active' : ''}`}
+            title="Line / Area View"
+            style={{ padding: '6px 12px', background: chartType === 'line' ? 'rgba(0, 242, 254, 0.1)' : 'none', border: '1px solid var(--border-glass)', borderRadius: '6px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px', color: chartType === 'line' ? 'var(--neon-cyan)' : 'var(--text-secondary)', fontSize: '12px', transition: 'all 0.2s ease', outline: 'none' }}
+          >
+            <AreaIcon size={14} />
+            Line
+          </button>
+          <button 
+            onClick={() => setChartType('candle')} 
+            className={`control-toggle-btn ${chartType === 'candle' ? 'active' : ''}`}
+            title="Candlestick View"
+            style={{ padding: '6px 12px', background: chartType === 'candle' ? 'rgba(16, 185, 129, 0.1)' : 'none', border: '1px solid var(--border-glass)', borderRadius: '6px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px', color: chartType === 'candle' ? '#10b981' : 'var(--text-secondary)', fontSize: '12px', transition: 'all 0.2s ease', outline: 'none' }}
+          >
+            <CandleIcon size={14} />
+            Candle
+          </button>
+        </div>
+
+        <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+          <span style={{ fontSize: '11px', color: 'var(--text-secondary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', marginRight: '6px' }}>Technical Overlays</span>
+          <button 
+            onClick={() => setShowSMA(!showSMA)} 
+            className={`control-toggle-btn ${showSMA ? 'active' : ''}`}
+            style={{ padding: '6px 12px', background: showSMA ? 'rgba(161, 84, 255, 0.1)' : 'none', border: '1px solid var(--border-glass)', borderRadius: '6px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px', color: showSMA ? 'var(--neon-violet)' : 'var(--text-secondary)', fontSize: '12px', transition: 'all 0.2s ease', outline: 'none' }}
+          >
+            {showSMA ? <Eye size={13} /> : <EyeOff size={13} />}
+            SMA 20
+          </button>
+          <button 
+            onClick={() => setShowEMA(!showEMA)} 
+            className={`control-toggle-btn ${showEMA ? 'active' : ''}`}
+            style={{ padding: '6px 12px', background: showEMA ? 'rgba(251, 146, 60, 0.1)' : 'none', border: '1px solid var(--border-glass)', borderRadius: '6px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px', color: showEMA ? '#fb923c' : 'var(--text-secondary)', fontSize: '12px', transition: 'all 0.2s ease', outline: 'none' }}
+          >
+            {showEMA ? <Eye size={13} /> : <EyeOff size={13} />}
+            EMA 20
+          </button>
+          <button 
+            onClick={() => setShowRSI(!showRSI)} 
+            className={`control-toggle-btn ${showRSI ? 'active' : ''}`}
+            style={{ padding: '6px 12px', background: showRSI ? 'rgba(0, 242, 254, 0.1)' : 'none', border: '1px solid var(--border-glass)', borderRadius: '6px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px', color: showRSI ? 'var(--neon-cyan)' : 'var(--text-secondary)', fontSize: '12px', transition: 'all 0.2s ease', outline: 'none' }}
+          >
+            <Activity size={13} />
+            RSI 14
+          </button>
+        </div>
+      </div>
+
+      {/* Main Chart Area */}
+      <div className="chart-container" style={{ display: 'flex', flexDirection: 'column', gap: '16px', height: showRSI ? 'calc(100% - 190px)' : 'calc(100% - 70px)', padding: '16px' }}>
+        {processedData.length > 0 ? (
+          <div style={{ flex: 1, width: '100%', minHeight: '220px' }}>
+            <ResponsiveContainer width="100%" height="100%">
+              <ComposedChart data={processedData} margin={{ top: 10, right: 5, left: -20, bottom: 0 }}>
+                <defs>
+                  <linearGradient id="chartGlow" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="#00f2fe" stopOpacity={0.2}/>
+                    <stop offset="95%" stopColor="#00f2fe" stopOpacity={0.0}/>
+                  </linearGradient>
+                </defs>
+                
+                <XAxis 
+                  dataKey="time" 
+                  stroke="#475569" 
+                  fontSize={11}
+                  tickLine={false}
+                />
+                
+                <YAxis 
+                  stroke="#475569" 
+                  fontSize={11}
+                  domain={['auto', 'auto']}
+                  tickLine={false}
+                />
+                
+                <Tooltip 
+                  contentStyle={{ 
+                    background: '#0d101b', 
+                    borderColor: '#2e303a',
+                    borderRadius: '8px',
+                    color: '#fff',
+                    fontSize: '12px'
+                  }}
+                />
+
+                {/* Primary Chart Type Representation */}
+                {chartType === 'line' ? (
+                  <Area 
+                    type="monotone" 
+                    dataKey="price" 
+                    stroke="#00f2fe" 
+                    strokeWidth={2}
+                    fillOpacity={1} 
+                    fill="url(#chartGlow)" 
+                    name="Price"
+                  />
+                ) : (
+                  <Bar 
+                    dataKey="range" 
+                    shape={<CandlestickBar />}
+                    name="Candlestick"
+                  />
+                )}
+
+                {/* Moving Average Indicators */}
+                {showSMA && (
+                  <Line 
+                    type="monotone" 
+                    dataKey="sma" 
+                    stroke="var(--neon-violet)" 
+                    strokeWidth={1.5} 
+                    strokeDasharray="4 4"
+                    dot={false}
+                    name="SMA 20"
+                  />
+                )}
+                {showEMA && (
+                  <Line 
+                    type="monotone" 
+                    dataKey="ema" 
+                    stroke="#fb923c" // Orange
+                    strokeWidth={1.5} 
+                    dot={false}
+                    name="EMA 20"
+                  />
+                )}
+              </ComposedChart>
+            </ResponsiveContainer>
+          </div>
         ) : (
           <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: '8px', padding: '20px', textAlign: 'center' }}>
             <span style={{ color: 'var(--text-secondary)', fontSize: '13px', fontWeight: 600 }}>
@@ -141,6 +354,45 @@ export default function StockChart({ activeTicker, chartData, activeStats, chart
             </span>
           </div>
         )}
+
+        {/* Technical Indicator panel: RSI 14 (Auxiliary Chart below main price chart) */}
+        {showRSI && rsiData.length > 0 && (
+          <div style={{ height: '100px', width: '100%', borderTop: '1px dashed var(--border-glass)', paddingTop: '10px' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '11px', color: 'var(--text-secondary)', marginBottom: '4px', paddingLeft: '10px' }}>
+              <span style={{ fontWeight: 700, color: 'var(--neon-cyan)' }}>RSI (14)</span>
+              <span style={{ color: 'var(--text-muted)' }}>Overbought &gt;70 | Oversold &lt;30</span>
+            </div>
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart data={rsiData} margin={{ top: 5, right: 5, left: -20, bottom: 5 }}>
+                <XAxis dataKey="time" hide />
+                <YAxis stroke="#475569" fontSize={9} domain={[0, 100]} tickLine={false} ticks={[30, 50, 70]} />
+                <Tooltip 
+                  contentStyle={{ 
+                    background: '#0d101b', 
+                    borderColor: '#2e303a',
+                    borderRadius: '8px',
+                    color: '#fff',
+                    fontSize: '11px'
+                  }}
+                />
+                
+                {/* Baseline references */}
+                <ReferenceLine y={70} stroke="#ef4444" strokeWidth={1} strokeDasharray="3 3" label={{ value: 'OB', fill: '#ef4444', fontSize: 8, position: 'insideTopLeft' }} />
+                <ReferenceLine y={50} stroke="#475569" strokeWidth={0.5} strokeDasharray="3 3" />
+                <ReferenceLine y={30} stroke="#10b981" strokeWidth={1} strokeDasharray="3 3" label={{ value: 'OS', fill: '#10b981', fontSize: 8, position: 'insideBottomLeft' }} />
+                
+                <Line 
+                  type="monotone" 
+                  dataKey="rsi" 
+                  stroke="var(--neon-cyan)" 
+                  strokeWidth={1.5} 
+                  dot={false}
+                  name="RSI 14"
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        )}
       </div>
     </div>
   );