From 8fb2edb6e3cba29c4f3f9bc6f10aa5ea1a2e3656 Mon Sep 17 00:00:00 2001
From: Jonathan Mirabal <jonathan.a.mirabal@gmail.com>
Date: Sat, 3 Oct 2026 20:35:41 -0400
Subject: [PATCH 1/3] fix(ui): improve mobile AI analyst form

---
 frontend/src/App.css                  |   42 +
 frontend/src/components/AIAnalyst.tsx | 1058 ++++++++++++++++++-------
 2 files changed, 810 insertions(+), 290 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index b0e8286..2632b9d 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -409,6 +409,48 @@
     max-height: none;
     overflow: visible;
   }
+
+  .insight-panel {
+    overflow: visible !important;
+  }
+
+  .ai-analyst-content {
+    overflow: visible !important;
+  }
+
+  .insight-cta {
+    overflow: visible !important;
+  }
+
+  .ai-param-selectors {
+    overflow: visible !important;
+    position: relative;
+    z-index: 20;
+  }
+
+  .glass-dropdown-menu {
+    top: auto !important;
+    bottom: calc(100% + 8px) !important;
+    left: 0 !important;
+    z-index: 1000 !important;
+    animation: none !important;
+  }
+
+  .insight-panel .glass-dropdown-menu {
+    top: auto !important;
+    bottom: calc(100% + 8px) !important;
+    left: 0 !important;
+    transform: none !important;
+    z-index: 9999 !important;
+    animation: none !important;
+  }
+
+  .insight-panel,
+  .ai-analyst-content,
+  .insight-cta,
+  .ai-param-selectors {
+    overflow: visible !important;
+  }
 }
 
 @media (max-width: 768px) {
diff --git a/frontend/src/components/AIAnalyst.tsx b/frontend/src/components/AIAnalyst.tsx
index 8839c5c..948fc1f 100644
--- a/frontend/src/components/AIAnalyst.tsx
+++ b/frontend/src/components/AIAnalyst.tsx
@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
-import Logo from './Logo';
+import { useState, useEffect } from "react";
+import Logo from "./Logo";
 
 interface AIInsight {
   ticker: string;
@@ -42,19 +42,34 @@ export default function AIAnalyst({
   strategyLocked = false,
   onLockInStrategy,
 }: AIAnalystProps) {
-  const [targetPriceInput, setTargetPriceInput] = useState<string>('');
-  const [stopLossInput, setStopLossInput] = useState<string>('');
-  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');
+  const [targetPriceInput, setTargetPriceInput] = useState<string>("");
+  const [stopLossInput, setStopLossInput] = useState<string>("");
+  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");
   const [isStyleOpen, setIsStyleOpen] = useState(false);
   const [isRiskOpen, setIsRiskOpen] = useState(false);
 
+  const mockInsight: AIInsight = {
+    ticker: activeTicker,
+    bullishProbability: 72,
+    reason:
+      "### Strategy Overview\n* Momentum is positive.\n* Price action supports a bullish setup.",
+    creditsRemaining: 24,
+  };
+
+  const testInsight = insight ?? mockInsight;
+  const testCurrentPrice = currentPrice ?? 185.42;
+
   // Auto-switch to analysis tab when loading starts
   useEffect(() => {
     if (loadingInsight) {
-      setActiveTab('analysis');
+      setActiveTab("analysis");
       setSelectedHistoryItem(null);
     }
   }, [loadingInsight]);
@@ -67,13 +82,17 @@ export default function AIAnalyst({
   useEffect(() => {
     if (insight && currentPrice != null) {
       const isBullish = insight.bullishProbability >= 50;
-      const defaultTarget = isBullish ? currentPrice * 1.05 : currentPrice * 0.95;
-      const defaultStopLoss = isBullish ? currentPrice * 0.98 : currentPrice * 1.02;
+      const defaultTarget = isBullish
+        ? currentPrice * 1.05
+        : currentPrice * 0.95;
+      const defaultStopLoss = isBullish
+        ? currentPrice * 0.98
+        : currentPrice * 1.02;
       setTargetPriceInput(defaultTarget.toFixed(2));
       setStopLossInput(defaultStopLoss.toFixed(2));
     } else if (!insight) {
-      setTargetPriceInput('');
-      setStopLossInput('');
+      setTargetPriceInput("");
+      setStopLossInput("");
     }
   }, [insight, currentPrice]);
 
@@ -82,16 +101,22 @@ export default function AIAnalyst({
     // Handle **bold** and *italic* (in that order, bold first)
     const parts = text.split(/(\*\*[^*]+\*\*|\*[^*]+\*)/g);
     return parts.map((part, j) => {
-      if (part.startsWith('**') && part.endsWith('**')) {
+      if (part.startsWith("**") && part.endsWith("**")) {
         return (
-          <strong key={`${keyPrefix}-b${j}`} style={{ color: 'var(--neon-cyan)', fontWeight: 700 }}>
+          <strong
+            key={`${keyPrefix}-b${j}`}
+            style={{ color: "var(--neon-cyan)", fontWeight: 700 }}
+          >
             {part.slice(2, -2)}
           </strong>
         );
       }
-      if (part.startsWith('*') && part.endsWith('*')) {
+      if (part.startsWith("*") && part.endsWith("*")) {
         return (
-          <em key={`${keyPrefix}-i${j}`} style={{ color: 'rgba(255,255,255,0.8)', fontStyle: 'italic' }}>
+          <em
+            key={`${keyPrefix}-i${j}`}
+            style={{ color: "rgba(255,255,255,0.8)", fontStyle: "italic" }}
+          >
             {part.slice(1, -1)}
           </em>
         );
@@ -103,20 +128,37 @@ export default function AIAnalyst({
   // Full markdown formatter — handles headings, bullets, bold, italic
   const formatReason = (text: string) => {
     if (!text) return null;
-    const lines = text.split('\n');
+    const lines = text.split("\n");
     const elements: React.ReactNode[] = [];
     let bulletBuffer: string[] = [];
 
     const flushBullets = (keyBase: string) => {
       if (bulletBuffer.length === 0) return;
       elements.push(
-        <ul key={`ul-${keyBase}`} style={{ margin: '6px 0', paddingLeft: '18px', display: 'flex', flexDirection: 'column', gap: '4px' }}>
+        <ul
+          key={`ul-${keyBase}`}
+          style={{
+            margin: "6px 0",
+            paddingLeft: "18px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "4px",
+          }}
+        >
           {bulletBuffer.map((item, bi) => (
-            <li key={`li-${keyBase}-${bi}`} style={{ fontSize: '13px', color: 'var(--text-secondary)', lineHeight: 1.6, listStyleType: 'disc' }}>
+            <li
+              key={`li-${keyBase}-${bi}`}
+              style={{
+                fontSize: "13px",
+                color: "var(--text-secondary)",
+                lineHeight: 1.6,
+                listStyleType: "disc",
+              }}
+            >
               {parseInline(item, `li-${keyBase}-${bi}`)}
             </li>
           ))}
-        </ul>
+        </ul>,
       );
       bulletBuffer = [];
     };
@@ -129,40 +171,69 @@ export default function AIAnalyst({
       }
 
       // ### Heading 3
-      if (trimmed.startsWith('### ')) {
+      if (trimmed.startsWith("### ")) {
         flushBullets(`${i}`);
         elements.push(
-          <h4 key={`h3-${i}`} style={{ margin: '14px 0 6px', fontSize: '13px', fontWeight: 700, color: 'var(--neon-cyan)', textTransform: 'uppercase', letterSpacing: '0.04em', borderBottom: '1px solid rgba(0,242,254,0.15)', paddingBottom: '4px' }}>
+          <h4
+            key={`h3-${i}`}
+            style={{
+              margin: "14px 0 6px",
+              fontSize: "13px",
+              fontWeight: 700,
+              color: "var(--neon-cyan)",
+              textTransform: "uppercase",
+              letterSpacing: "0.04em",
+              borderBottom: "1px solid rgba(0,242,254,0.15)",
+              paddingBottom: "4px",
+            }}
+          >
             {trimmed.slice(4)}
-          </h4>
+          </h4>,
         );
         return;
       }
 
       // ## Heading 2
-      if (trimmed.startsWith('## ')) {
+      if (trimmed.startsWith("## ")) {
         flushBullets(`${i}`);
         elements.push(
-          <h3 key={`h2-${i}`} style={{ margin: '14px 0 6px', fontSize: '14px', fontWeight: 700, color: '#fff', letterSpacing: '-0.01em' }}>
+          <h3
+            key={`h2-${i}`}
+            style={{
+              margin: "14px 0 6px",
+              fontSize: "14px",
+              fontWeight: 700,
+              color: "#fff",
+              letterSpacing: "-0.01em",
+            }}
+          >
             {parseInline(trimmed.slice(3), `h2-${i}`)}
-          </h3>
+          </h3>,
         );
         return;
       }
 
       // # Heading 1
-      if (trimmed.startsWith('# ')) {
+      if (trimmed.startsWith("# ")) {
         flushBullets(`${i}`);
         elements.push(
-          <h2 key={`h1-${i}`} style={{ margin: '14px 0 8px', fontSize: '15px', fontWeight: 800, color: '#fff' }}>
+          <h2
+            key={`h1-${i}`}
+            style={{
+              margin: "14px 0 8px",
+              fontSize: "15px",
+              fontWeight: 800,
+              color: "#fff",
+            }}
+          >
             {parseInline(trimmed.slice(2), `h1-${i}`)}
-          </h2>
+          </h2>,
         );
         return;
       }
 
       // * bullet or - bullet
-      if (trimmed.startsWith('* ') || trimmed.startsWith('- ')) {
+      if (trimmed.startsWith("* ") || trimmed.startsWith("- ")) {
         bulletBuffer.push(trimmed.slice(2));
         return;
       }
@@ -172,11 +243,11 @@ export default function AIAnalyst({
       elements.push(
         <p key={`p-${i}`} className="insight-explanation">
           {parseInline(trimmed, `p-${i}`)}
-        </p>
+        </p>,
       );
     });
 
-    flushBullets('end');
+    flushBullets("end");
     return elements;
   };
 
@@ -184,16 +255,22 @@ export default function AIAnalyst({
     <div className="probability-gauge">
       <svg className="gauge-svg" width="120" height="120">
         <defs>
-          <linearGradient id="cyan-violet-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+          <linearGradient
+            id="cyan-violet-grad"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
             <stop offset="0%" stopColor="#00f2fe" />
             <stop offset="100%" stopColor="#a154ff" />
           </linearGradient>
         </defs>
         <circle className="gauge-bg" cx="60" cy="60" r="50"></circle>
-        <circle 
-          className="gauge-fill" 
-          cx="60" 
-          cy="60" 
+        <circle
+          className="gauge-fill"
+          cx="60"
+          cy="60"
           r="50"
           strokeDasharray={`${2 * Math.PI * 50}`}
           strokeDashoffset={`${2 * Math.PI * 50 * (1 - probability / 100)}`}
@@ -207,45 +284,77 @@ export default function AIAnalyst({
   );
 
   return (
-    <div className="glass-panel insight-panel" style={{ display: 'flex', flexDirection: 'column', minHeight: '340px', height: 'auto' }}>
-      <div className="panel-title" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', borderBottom: '1px solid var(--border-glass)', paddingBottom: '12px', marginBottom: '16px' }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+    <div
+      className="glass-panel insight-panel"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        minHeight: "340px",
+        height: "auto",
+      }}
+    >
+      <div
+        className="panel-title"
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          width: "100%",
+          borderBottom: "1px solid var(--border-glass)",
+          paddingBottom: "12px",
+          marginBottom: "16px",
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
           <Logo size={18} className="glow-cyan" />
           <span>QuantIQ AI Analyst</span>
         </div>
-        <div className="analyst-tabs" style={{ display: 'flex', gap: '16px' }}>
-          <button 
-            className={`tab-btn ${activeTab === 'analysis' ? 'active' : ''}`}
-            onClick={() => { setActiveTab('analysis'); setSelectedHistoryItem(null); }}
+        <div className="analyst-tabs" style={{ display: "flex", gap: "16px" }}>
+          <button
+            className={`tab-btn ${activeTab === "analysis" ? "active" : ""}`}
+            onClick={() => {
+              setActiveTab("analysis");
+              setSelectedHistoryItem(null);
+            }}
             style={{
-              background: 'none',
-              border: 'none',
-              color: activeTab === 'analysis' ? 'var(--neon-cyan)' : 'var(--text-secondary)',
-              fontSize: '13px',
+              background: "none",
+              border: "none",
+              color:
+                activeTab === "analysis"
+                  ? "var(--neon-cyan)"
+                  : "var(--text-secondary)",
+              fontSize: "13px",
               fontWeight: 600,
-              cursor: 'pointer',
-              padding: '4px 8px',
-              borderBottom: activeTab === 'analysis' ? '2px solid var(--neon-cyan)' : 'none',
-              transition: 'all 0.2s ease',
-              outline: 'none'
+              cursor: "pointer",
+              padding: "4px 8px",
+              borderBottom:
+                activeTab === "analysis"
+                  ? "2px solid var(--neon-cyan)"
+                  : "none",
+              transition: "all 0.2s ease",
+              outline: "none",
             }}
           >
             Analysis
           </button>
-          <button 
-            className={`tab-btn ${activeTab === 'history' ? 'active' : ''}`}
-            onClick={() => setActiveTab('history')}
+          <button
+            className={`tab-btn ${activeTab === "history" ? "active" : ""}`}
+            onClick={() => setActiveTab("history")}
             style={{
-              background: 'none',
-              border: 'none',
-              color: activeTab === 'history' ? 'var(--neon-cyan)' : 'var(--text-secondary)',
-              fontSize: '13px',
+              background: "none",
+              border: "none",
+              color:
+                activeTab === "history"
+                  ? "var(--neon-cyan)"
+                  : "var(--text-secondary)",
+              fontSize: "13px",
               fontWeight: 600,
-              cursor: 'pointer',
-              padding: '4px 8px',
-              borderBottom: activeTab === 'history' ? '2px solid var(--neon-cyan)' : 'none',
-              transition: 'all 0.2s ease',
-              outline: 'none'
+              cursor: "pointer",
+              padding: "4px 8px",
+              borderBottom:
+                activeTab === "history" ? "2px solid var(--neon-cyan)" : "none",
+              transition: "all 0.2s ease",
+              outline: "none",
             }}
           >
             History ({savedStrategies.length})
@@ -253,122 +362,183 @@ export default function AIAnalyst({
         </div>
       </div>
 
-      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: '20px' }}>
-        {activeTab === 'analysis' ? (
+      <div
+        className="ai-analyst-content"
+        style={{ flex: 1, overflowY: "auto", paddingBottom: "20px" }}
+      >
+        {activeTab === "analysis" ? (
           <>
             {!insight && !loadingInsight && (
-              <div className="insight-cta" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px' }}>
+              <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.
+                  Analyze indicators, watchlists, alerts, and model prediction
+                  in a single ReAct workflow.
                 </p>
-                
+
                 {/* Style & Risk selectors */}
                 {/* Style & Risk selectors */}
-                <div className="ai-param-selectors" style={{ display: 'flex', gap: '16px', justifyContent: 'center', width: '100%', maxWidth: '400px', marginBottom: '8px' }}>
+                <div
+                  className="ai-param-selectors"
+                  style={{
+                    display: "flex",
+                    gap: "16px",
+                    justifyContent: "center",
+                    width: "100%",
+                    maxWidth: "400px",
+                    marginBottom: "8px",
+                  }}
+                >
                   {/* Trading Style Custom Select */}
-                  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '6px', textAlign: 'left', position: 'relative' }}>
-                    <label style={{ fontSize: '11px', color: 'var(--text-secondary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Trading Style</label>
-                    <div 
+                  <div
+                    style={{
+                      flex: 1,
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: "6px",
+                      textAlign: "left",
+                      position: "relative",
+                    }}
+                  >
+                    <label
+                      style={{
+                        fontSize: "11px",
+                        color: "var(--text-secondary)",
+                        fontWeight: 700,
+                        textTransform: "uppercase",
+                        letterSpacing: "0.05em",
+                      }}
+                    >
+                      Trading Style
+                    </label>
+                    <div
                       onClick={() => {
                         setIsStyleOpen(!isStyleOpen);
                         setIsRiskOpen(false);
                       }}
                       className="premium-select"
-                      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)', 
-                        cursor: 'pointer', 
-                        fontSize: '12px', 
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        boxSizing: 'border-box',
-                        minHeight: '38px'
+                      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)",
+                        cursor: "pointer",
+                        fontSize: "12px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        boxSizing: "border-box",
+                        minHeight: "38px",
                       }}
                     >
                       <span>
-                        {tradingStyle === 'day_trading' && 'Day Trading'}
-                        {tradingStyle === 'swing_trading' && 'Swing Trading'}
-                        {tradingStyle === 'investing' && 'Long-term Investing'}
+                        {tradingStyle === "day_trading" && "Day Trading"}
+                        {tradingStyle === "swing_trading" && "Swing Trading"}
+                        {tradingStyle === "investing" && "Long-term Investing"}
                       </span>
                     </div>
 
                     {isStyleOpen && (
-                      <div 
+                      <div
                         className="glass-dropdown-menu"
                         style={{
-                          position: 'absolute',
-                          top: '65px',
+                          position: "absolute",
+                          top: "auto",
+                          bottom: "58px",
+                          transform: "none",
                           left: 0,
-                          width: '100%',
-                          background: 'rgba(13, 16, 27, 0.85)',
-                          backdropFilter: 'blur(20px)',
-                          WebkitBackdropFilter: 'blur(20px)',
-                          border: '1px solid rgba(255, 255, 255, 0.08)',
-                          borderRadius: '12px',
-                          boxShadow: '0 12px 32px rgba(0, 0, 0, 0.5)',
+                          width: "100%",
+                          background: "rgba(13, 16, 27, 0.85)",
+                          backdropFilter: "blur(20px)",
+                          WebkitBackdropFilter: "blur(20px)",
+                          border: "1px solid rgba(255, 255, 255, 0.08)",
+                          borderRadius: "12px",
+                          boxShadow: "0 12px 32px rgba(0, 0, 0, 0.5)",
                           zIndex: 100,
-                          padding: '6px',
-                          display: 'flex',
-                          flexDirection: 'column',
-                          gap: '2px',
-                          boxSizing: 'border-box'
+                          padding: "6px",
+                          display: "flex",
+                          flexDirection: "column",
+                          gap: "2px",
+                          boxSizing: "border-box",
                         }}
                       >
-                        <div 
+                        <div
                           className="glass-dropdown-item"
                           onClick={() => {
-                            setTradingStyle('day_trading');
+                            setTradingStyle("day_trading");
                             setIsStyleOpen(false);
                           }}
                           style={{
-                            padding: '10px 12px',
-                            borderRadius: '8px',
-                            cursor: 'pointer',
-                            color: tradingStyle === 'day_trading' ? 'var(--neon-cyan)' : 'var(--text-secondary)',
-                            background: tradingStyle === 'day_trading' ? 'rgba(0, 242, 254, 0.06)' : 'none',
-                            fontSize: '12px',
-                            transition: 'all 0.15s ease'
+                            padding: "10px 12px",
+                            borderRadius: "8px",
+                            cursor: "pointer",
+                            color:
+                              tradingStyle === "day_trading"
+                                ? "var(--neon-cyan)"
+                                : "var(--text-secondary)",
+                            background:
+                              tradingStyle === "day_trading"
+                                ? "rgba(0, 242, 254, 0.06)"
+                                : "none",
+                            fontSize: "12px",
+                            transition: "all 0.15s ease",
                           }}
                         >
                           Day Trading
                         </div>
-                        <div 
+                        <div
                           className="glass-dropdown-item"
                           onClick={() => {
-                            setTradingStyle('swing_trading');
+                            setTradingStyle("swing_trading");
                             setIsStyleOpen(false);
                           }}
                           style={{
-                            padding: '10px 12px',
-                            borderRadius: '8px',
-                            cursor: 'pointer',
-                            color: tradingStyle === 'swing_trading' ? 'var(--neon-cyan)' : 'var(--text-secondary)',
-                            background: tradingStyle === 'swing_trading' ? 'rgba(0, 242, 254, 0.06)' : 'none',
-                            fontSize: '12px',
-                            transition: 'all 0.15s ease'
+                            padding: "10px 12px",
+                            borderRadius: "8px",
+                            cursor: "pointer",
+                            color:
+                              tradingStyle === "swing_trading"
+                                ? "var(--neon-cyan)"
+                                : "var(--text-secondary)",
+                            background:
+                              tradingStyle === "swing_trading"
+                                ? "rgba(0, 242, 254, 0.06)"
+                                : "none",
+                            fontSize: "12px",
+                            transition: "all 0.15s ease",
                           }}
                         >
                           Swing Trading
                         </div>
-                        <div 
+                        <div
                           className="glass-dropdown-item"
                           onClick={() => {
-                            setTradingStyle('investing');
+                            setTradingStyle("investing");
                             setIsStyleOpen(false);
                           }}
                           style={{
-                            padding: '10px 12px',
-                            borderRadius: '8px',
-                            cursor: 'pointer',
-                            color: tradingStyle === 'investing' ? 'var(--neon-cyan)' : 'var(--text-secondary)',
-                            background: tradingStyle === 'investing' ? 'rgba(0, 242, 254, 0.06)' : 'none',
-                            fontSize: '12px',
-                            transition: 'all 0.15s ease'
+                            padding: "10px 12px",
+                            borderRadius: "8px",
+                            cursor: "pointer",
+                            color:
+                              tradingStyle === "investing"
+                                ? "var(--neon-cyan)"
+                                : "var(--text-secondary)",
+                            background:
+                              tradingStyle === "investing"
+                                ? "rgba(0, 242, 254, 0.06)"
+                                : "none",
+                            fontSize: "12px",
+                            transition: "all 0.15s ease",
                           }}
                         >
                           Long-term Investing
@@ -378,109 +548,145 @@ export default function AIAnalyst({
                   </div>
 
                   {/* Risk Profile Custom Select */}
-                  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '6px', textAlign: 'left', position: 'relative' }}>
-                    <label style={{ fontSize: '11px', color: 'var(--text-secondary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Risk Profile</label>
-                    <div 
+                  <div
+                    style={{
+                      flex: 1,
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: "6px",
+                      textAlign: "left",
+                      position: "relative",
+                    }}
+                  >
+                    <label
+                      style={{
+                        fontSize: "11px",
+                        color: "var(--text-secondary)",
+                        fontWeight: 700,
+                        textTransform: "uppercase",
+                        letterSpacing: "0.05em",
+                      }}
+                    >
+                      Risk Profile
+                    </label>
+                    <div
                       onClick={() => {
                         setIsRiskOpen(!isRiskOpen);
                         setIsStyleOpen(false);
                       }}
                       className="premium-select"
-                      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)', 
-                        cursor: 'pointer', 
-                        fontSize: '12px', 
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        boxSizing: 'border-box',
-                        minHeight: '38px'
+                      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)",
+                        cursor: "pointer",
+                        fontSize: "12px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        boxSizing: "border-box",
+                        minHeight: "38px",
                       }}
                     >
                       <span>
-                        {riskTolerance === 'conservative' && 'Conservative'}
-                        {riskTolerance === 'moderate' && 'Moderate'}
-                        {riskTolerance === 'aggressive' && 'Aggressive'}
+                        {riskTolerance === "conservative" && "Conservative"}
+                        {riskTolerance === "moderate" && "Moderate"}
+                        {riskTolerance === "aggressive" && "Aggressive"}
                       </span>
                     </div>
 
                     {isRiskOpen && (
-                      <div 
+                      <div
                         className="glass-dropdown-menu"
                         style={{
-                          position: 'absolute',
-                          top: '65px',
+                          position: "absolute",
                           left: 0,
-                          width: '100%',
-                          background: 'rgba(13, 16, 27, 0.85)',
-                          backdropFilter: 'blur(20px)',
-                          WebkitBackdropFilter: 'blur(20px)',
-                          border: '1px solid rgba(255, 255, 255, 0.08)',
-                          borderRadius: '12px',
-                          boxShadow: '0 12px 32px rgba(0, 0, 0, 0.5)',
+                          width: "100%",
+                          background: "rgba(13, 16, 27, 0.85)",
+                          backdropFilter: "blur(20px)",
+                          WebkitBackdropFilter: "blur(20px)",
+                          border: "1px solid rgba(255, 255, 255, 0.08)",
+                          borderRadius: "12px",
+                          boxShadow: "0 12px 32px rgba(0, 0, 0, 0.5)",
                           zIndex: 100,
-                          padding: '6px',
-                          display: 'flex',
-                          flexDirection: 'column',
-                          gap: '2px',
-                          boxSizing: 'border-box'
+                          padding: "6px",
+                          display: "flex",
+                          flexDirection: "column",
+                          gap: "2px",
+                          boxSizing: "border-box",
                         }}
                       >
-                        <div 
+                        <div
                           className="glass-dropdown-item"
                           onClick={() => {
-                            setRiskTolerance('conservative');
+                            setRiskTolerance("conservative");
                             setIsRiskOpen(false);
                           }}
                           style={{
-                            padding: '10px 12px',
-                            borderRadius: '8px',
-                            cursor: 'pointer',
-                            color: riskTolerance === 'conservative' ? 'var(--neon-cyan)' : 'var(--text-secondary)',
-                            background: riskTolerance === 'conservative' ? 'rgba(0, 242, 254, 0.06)' : 'none',
-                            fontSize: '12px',
-                            transition: 'all 0.15s ease'
+                            padding: "10px 12px",
+                            borderRadius: "8px",
+                            cursor: "pointer",
+                            color:
+                              riskTolerance === "conservative"
+                                ? "var(--neon-cyan)"
+                                : "var(--text-secondary)",
+                            background:
+                              riskTolerance === "conservative"
+                                ? "rgba(0, 242, 254, 0.06)"
+                                : "none",
+                            fontSize: "12px",
+                            transition: "all 0.15s ease",
                           }}
                         >
                           Conservative
                         </div>
-                        <div 
+                        <div
                           className="glass-dropdown-item"
                           onClick={() => {
-                            setRiskTolerance('moderate');
+                            setRiskTolerance("moderate");
                             setIsRiskOpen(false);
                           }}
                           style={{
-                            padding: '10px 12px',
-                            borderRadius: '8px',
-                            cursor: 'pointer',
-                            color: riskTolerance === 'moderate' ? 'var(--neon-cyan)' : 'var(--text-secondary)',
-                            background: riskTolerance === 'moderate' ? 'rgba(0, 242, 254, 0.06)' : 'none',
-                            fontSize: '12px',
-                            transition: 'all 0.15s ease'
+                            padding: "10px 12px",
+                            borderRadius: "8px",
+                            cursor: "pointer",
+                            color:
+                              riskTolerance === "moderate"
+                                ? "var(--neon-cyan)"
+                                : "var(--text-secondary)",
+                            background:
+                              riskTolerance === "moderate"
+                                ? "rgba(0, 242, 254, 0.06)"
+                                : "none",
+                            fontSize: "12px",
+                            transition: "all 0.15s ease",
                           }}
                         >
                           Moderate
                         </div>
-                        <div 
+                        <div
                           className="glass-dropdown-item"
                           onClick={() => {
-                            setRiskTolerance('aggressive');
+                            setRiskTolerance("aggressive");
                             setIsRiskOpen(false);
                           }}
                           style={{
-                            padding: '10px 12px',
-                            borderRadius: '8px',
-                            cursor: 'pointer',
-                            color: riskTolerance === 'aggressive' ? 'var(--neon-cyan)' : 'var(--text-secondary)',
-                            background: riskTolerance === 'aggressive' ? 'rgba(0, 242, 254, 0.06)' : 'none',
-                            fontSize: '12px',
-                            transition: 'all 0.15s ease'
+                            padding: "10px 12px",
+                            borderRadius: "8px",
+                            cursor: "pointer",
+                            color:
+                              riskTolerance === "aggressive"
+                                ? "var(--neon-cyan)"
+                                : "var(--text-secondary)",
+                            background:
+                              riskTolerance === "aggressive"
+                                ? "rgba(0, 242, 254, 0.06)"
+                                : "none",
+                            fontSize: "12px",
+                            transition: "all 0.15s ease",
                           }}
                         >
                           Aggressive
@@ -490,7 +696,11 @@ export default function AIAnalyst({
                   </div>
                 </div>
 
-                <button className="insight-btn" onClick={() => onTriggerInsight(tradingStyle, riskTolerance)} style={{ marginTop: '4px' }}>
+                <button
+                  className="insight-btn"
+                  onClick={() => onTriggerInsight(tradingStyle, riskTolerance)}
+                  style={{ marginTop: "4px" }}
+                >
                   Generate strategy for {activeTicker} (1 Credit)
                 </button>
               </div>
@@ -499,71 +709,174 @@ export default function AIAnalyst({
             {loadingInsight && (
               <div className="insight-loading">
                 <div className="spinner"></div>
-                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '6px' }}>
-                  <span style={{ color: 'var(--text-primary)', fontSize: '14px', fontWeight: 600 }}>
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: "6px",
+                  }}
+                >
+                  <span
+                    style={{
+                      color: "var(--text-primary)",
+                      fontSize: "14px",
+                      fontWeight: 600,
+                    }}
+                  >
                     QuantIQ AI is analyzing {activeTicker}...
                   </span>
-                  <span style={{ color: 'var(--text-muted)', fontSize: '12px' }}>
-                    Running ReAct workflow · Scanning indicators · Generating strategy
+                  <span
+                    style={{ color: "var(--text-muted)", fontSize: "12px" }}
+                  >
+                    Running ReAct workflow · Scanning indicators · Generating
+                    strategy
                   </span>
                 </div>
               </div>
             )}
 
             {insightError && (
-              <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '16px' }}>
-                <span style={{ color: 'var(--bear-red)', textAlign: 'center' }}>{insightError}</span>
-                <button 
-                  className="insight-btn" 
+              <div
+                style={{
+                  padding: "20px",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: "16px",
+                }}
+              >
+                <span style={{ color: "var(--bear-red)", textAlign: "center" }}>
+                  {insightError}
+                </span>
+                <button
+                  className="insight-btn"
                   onClick={onResetInsight}
-                  style={{ maxWidth: '250px' }}
+                  style={{ maxWidth: "250px" }}
                 >
                   Try Again / Adjust Parameters
                 </button>
               </div>
             )}
 
-            {insight && !loadingInsight && (
+            {testInsight && !loadingInsight && (
               <div className="insight-result">
-                <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', alignItems: 'center', flexShrink: 0 }}>
-                  {renderGauge(insight.bullishProbability)}
-                  <button 
-                    className="insight-btn" 
-                    onClick={onResetInsight} 
-                    style={{ width: '100%', padding: '10px 14px', fontSize: '12px' }}
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "16px",
+                    alignItems: "center",
+                    flexShrink: 0,
+                  }}
+                >
+                  {renderGauge(testInsight.bullishProbability)}
+                  <button
+                    className="insight-btn"
+                    onClick={onResetInsight}
+                    style={{
+                      width: "100%",
+                      padding: "10px 14px",
+                      fontSize: "12px",
+                    }}
                   >
                     Analyze Again
                   </button>
                 </div>
                 <div className="insight-text-container">
-                  <div className={`insight-tag ${insight.bullishProbability >= 50 ? 'tag-bullish' : 'tag-bearish'}`}>
-                    {insight.bullishProbability >= 50 ? 'BULLISH BIAS' : 'BEARISH BIAS'}
+                  <div
+                    className={`insight-tag ${testInsight.bullishProbability >= 50 ? "tag-bullish" : "tag-bearish"}`}
+                  >
+                    {testInsight.bullishProbability >= 50
+                      ? "BULLISH BIAS"
+                      : "BEARISH BIAS"}
                   </div>
                   <div className="insight-reason-body">
-                    {formatReason(insight.reason)}
+                    {formatReason(testInsight.reason)}
                   </div>
 
                   {/* Lock In Strategy — captures the trader's own entry/target/stop-loss,
                       logged as user_entry/user_target/user_stop_loss in strategy_logs and
                       compared server-side against the backend's own ATR-14 AI levels. */}
-                  <div className="lock-strategy-panel" style={{ marginTop: '16px', paddingTop: '12px', borderTop: '1px solid rgba(255, 255, 255, 0.05)' }}>
+                  <div
+                    className="lock-strategy-panel"
+                    style={{
+                      marginTop: "16px",
+                      paddingTop: "12px",
+                      borderTop: "1px solid rgba(255, 255, 255, 0.05)",
+                    }}
+                  >
                     {strategyLocked ? (
-                      <div className="lock-strategy-badge" style={{ width: '100%', textAlign: 'center' }}>
+                      <div
+                        className="lock-strategy-badge"
+                        style={{ width: "100%", textAlign: "center" }}
+                      >
                         ✓ Strategy Locked
                       </div>
                     ) : (
                       <>
-                        <div style={{ display: 'flex', gap: '10px', marginBottom: '10px' }}>
-                          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '4px' }}>
-                            <label style={{ fontSize: '10px', color: 'var(--text-secondary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+                        <div
+                          className="lock-strategy-inputs"
+                          style={{
+                            display: "flex",
+                            gap: "10px",
+                            marginBottom: "10px",
+                          }}
+                        >
+                          <div
+                            className="lock-strategy-field"
+                            style={{
+                              flex: 1,
+                              display: "flex",
+                              flexDirection: "column",
+                              gap: "4px",
+                            }}
+                          >
+                            <label
+                              style={{
+                                fontSize: "10px",
+                                color: "var(--text-secondary)",
+                                fontWeight: 700,
+                                textTransform: "uppercase",
+                                letterSpacing: "0.04em",
+                              }}
+                            >
                               Entry
                             </label>
-                            <div style={{ padding: '8px 10px', borderRadius: '8px', border: '1px solid var(--border-glass)', background: 'rgba(255,255,255,0.02)', color: 'var(--text-primary)', fontSize: '12px' }}>
-                              {currentPrice != null ? `$${currentPrice.toFixed(2)}` : '—'}
+                            <div
+                              style={{
+                                padding: "8px 10px",
+                                borderRadius: "8px",
+                                border: "1px solid var(--border-glass)",
+                                background: "rgba(255,255,255,0.02)",
+                                color: "var(--text-primary)",
+                                fontSize: "12px",
+                              }}
+                            >
+                              {currentPrice != null
+                                ? `$${testCurrentPrice.toFixed(2)}`
+                                : "—"}
                             </div>
                           </div>
-                          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '4px' }}>
-                            <label htmlFor="lock-target-input" style={{ fontSize: '10px', color: 'var(--text-secondary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+                          <div
+                            className="lock-strategy-field"
+                            style={{
+                              flex: 1,
+                              display: "flex",
+                              flexDirection: "column",
+                              gap: "4px",
+                            }}
+                          >
+                            <label
+                              htmlFor="lock-target-input"
+                              style={{
+                                fontSize: "10px",
+                                color: "var(--text-secondary)",
+                                fontWeight: 700,
+                                textTransform: "uppercase",
+                                letterSpacing: "0.04em",
+                              }}
+                            >
                               Target
                             </label>
                             <input
@@ -571,12 +884,41 @@ export default function AIAnalyst({
                               type="number"
                               step="0.01"
                               value={targetPriceInput}
-                              onChange={(e) => setTargetPriceInput(e.target.value)}
-                              style={{ width: '100%', boxSizing: 'border-box', padding: '8px 10px', borderRadius: '8px', border: '1px solid var(--border-glass)', background: 'rgba(255,255,255,0.02)', color: 'var(--text-primary)', fontSize: '12px', outline: 'none' }}
+                              onChange={(e) =>
+                                setTargetPriceInput(e.target.value)
+                              }
+                              style={{
+                                width: "100%",
+                                boxSizing: "border-box",
+                                padding: "8px 10px",
+                                borderRadius: "8px",
+                                border: "1px solid var(--border-glass)",
+                                background: "rgba(255,255,255,0.02)",
+                                color: "var(--text-primary)",
+                                fontSize: "12px",
+                                outline: "none",
+                              }}
                             />
                           </div>
-                          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '4px' }}>
-                            <label htmlFor="lock-stoploss-input" style={{ fontSize: '10px', color: 'var(--text-secondary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+                          <div
+                            className="lock-strategy-field"
+                            style={{
+                              flex: 1,
+                              display: "flex",
+                              flexDirection: "column",
+                              gap: "4px",
+                            }}
+                          >
+                            <label
+                              htmlFor="lock-stoploss-input"
+                              style={{
+                                fontSize: "10px",
+                                color: "var(--text-secondary)",
+                                fontWeight: 700,
+                                textTransform: "uppercase",
+                                letterSpacing: "0.04em",
+                              }}
+                            >
                               Stop Loss
                             </label>
                             <input
@@ -585,7 +927,17 @@ export default function AIAnalyst({
                               step="0.01"
                               value={stopLossInput}
                               onChange={(e) => setStopLossInput(e.target.value)}
-                              style={{ width: '100%', boxSizing: 'border-box', padding: '8px 10px', borderRadius: '8px', border: '1px solid var(--border-glass)', background: 'rgba(255,255,255,0.02)', color: 'var(--text-primary)', fontSize: '12px', outline: 'none' }}
+                              style={{
+                                width: "100%",
+                                boxSizing: "border-box",
+                                padding: "8px 10px",
+                                borderRadius: "8px",
+                                border: "1px solid var(--border-glass)",
+                                background: "rgba(255,255,255,0.02)",
+                                color: "var(--text-primary)",
+                                fontSize: "12px",
+                                outline: "none",
+                              }}
                             />
                           </div>
                         </div>
@@ -595,28 +947,59 @@ export default function AIAnalyst({
                             lockingStrategy ||
                             !onLockInStrategy ||
                             currentPrice == null ||
-                            targetPriceInput.trim() === '' ||
-                            stopLossInput.trim() === '' ||
+                            targetPriceInput.trim() === "" ||
+                            stopLossInput.trim() === "" ||
                             isNaN(parseFloat(targetPriceInput)) ||
                             isNaN(parseFloat(stopLossInput))
                           }
                           onClick={() => {
                             const target = parseFloat(targetPriceInput);
                             const stopLoss = parseFloat(stopLossInput);
-                            if (onLockInStrategy && !isNaN(target) && !isNaN(stopLoss)) {
+                            if (
+                              onLockInStrategy &&
+                              !isNaN(target) &&
+                              !isNaN(stopLoss)
+                            ) {
                               onLockInStrategy(target, stopLoss);
                             }
                           }}
-                          style={{ width: '100%', padding: '10px 14px', fontSize: '12px' }}
+                          style={{
+                            width: "100%",
+                            padding: "10px 14px",
+                            fontSize: "12px",
+                          }}
                         >
-                          {lockingStrategy ? 'Locking In...' : '🔒 Lock In Strategy'}
+                          {lockingStrategy
+                            ? "Locking In..."
+                            : "🔒 Lock In Strategy"}
                         </button>
                       </>
                     )}
                   </div>
-                  <div style={{ marginTop: '16px', paddingTop: '12px', borderTop: '1px solid rgba(255, 255, 255, 0.05)', fontSize: '11px', color: 'var(--text-muted)', display: 'flex', gap: '6px', lineHeight: '140%', textAlign: 'left' }}>
-                    <span style={{ color: 'var(--neon-cyan)', fontWeight: 600 }}>Disclaimer:</span>
-                    <span>QuantIQ AI is an automated strategy assistant and can make mistakes. All analysis is for informational purposes only and should not be considered financial advice. Please verify financial data independently.</span>
+                  <div
+                    style={{
+                      marginTop: "16px",
+                      paddingTop: "12px",
+                      borderTop: "1px solid rgba(255, 255, 255, 0.05)",
+                      fontSize: "11px",
+                      color: "var(--text-muted)",
+                      display: "flex",
+                      gap: "6px",
+                      lineHeight: "140%",
+                      textAlign: "left",
+                    }}
+                  >
+                    <span
+                      style={{ color: "var(--neon-cyan)", fontWeight: 600 }}
+                    >
+                      Disclaimer:
+                    </span>
+                    <span>
+                      QuantIQ AI is an automated strategy assistant and can make
+                      mistakes. All analysis is for informational purposes only
+                      and should not be considered financial advice. Please
+                      verify financial data independently.
+                    </span>
                   </div>
                 </div>
               </div>
@@ -628,96 +1011,191 @@ export default function AIAnalyst({
             {selectedHistoryItem ? (
               /* Expanded Historical Report Details */
               <div>
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px', borderBottom: '1px solid rgba(255,255,255,0.05)', paddingBottom: '10px' }}>
-                  <span style={{ color: 'var(--text-muted)', fontSize: '12px' }}>
-                    Report for <strong style={{ color: 'var(--text-primary)' }}>{selectedHistoryItem.ticker}</strong> generated on {new Date(selectedHistoryItem.createdAt).toLocaleString()}
+                <div
+                  style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginBottom: "16px",
+                    borderBottom: "1px solid rgba(255,255,255,0.05)",
+                    paddingBottom: "10px",
+                  }}
+                >
+                  <span
+                    style={{ color: "var(--text-muted)", fontSize: "12px" }}
+                  >
+                    Report for{" "}
+                    <strong style={{ color: "var(--text-primary)" }}>
+                      {selectedHistoryItem.ticker}
+                    </strong>{" "}
+                    generated on{" "}
+                    {new Date(selectedHistoryItem.createdAt).toLocaleString()}
                   </span>
-                  <button 
+                  <button
                     onClick={() => setSelectedHistoryItem(null)}
                     style={{
-                      background: 'rgba(255,255,255,0.05)',
-                      border: '1px solid var(--border-glass)',
-                      borderRadius: '6px',
-                      color: 'var(--text-primary)',
-                      padding: '4px 10px',
-                      fontSize: '11px',
-                      cursor: 'pointer',
-                      outline: 'none'
+                      background: "rgba(255,255,255,0.05)",
+                      border: "1px solid var(--border-glass)",
+                      borderRadius: "6px",
+                      color: "var(--text-primary)",
+                      padding: "4px 10px",
+                      fontSize: "11px",
+                      cursor: "pointer",
+                      outline: "none",
                     }}
                   >
                     Back to History
                   </button>
                 </div>
-                
+
                 <div className="insight-result">
                   {renderGauge(selectedHistoryItem.bullishProbability)}
                   <div className="insight-text-container">
-                    <div className={`insight-tag ${selectedHistoryItem.bullishProbability >= 50 ? 'tag-bullish' : 'tag-bearish'}`}>
-                      {selectedHistoryItem.bullishProbability >= 50 ? 'BULLISH BIAS' : 'BEARISH BIAS'}
+                    <div
+                      className={`insight-tag ${selectedHistoryItem.bullishProbability >= 50 ? "tag-bullish" : "tag-bearish"}`}
+                    >
+                      {selectedHistoryItem.bullishProbability >= 50
+                        ? "BULLISH BIAS"
+                        : "BEARISH BIAS"}
                     </div>
                     <div className="insight-reason-body">
                       {formatReason(selectedHistoryItem.reason)}
                     </div>
-                    <div style={{ marginTop: '16px', paddingTop: '12px', borderTop: '1px solid rgba(255, 255, 255, 0.05)', fontSize: '11px', color: 'var(--text-muted)', display: 'flex', gap: '6px', lineHeight: '140%', textAlign: 'left' }}>
-                      <span style={{ color: 'var(--neon-cyan)', fontWeight: 600 }}>Disclaimer:</span>
-                      <span>QuantIQ AI is an automated strategy assistant and can make mistakes. All analysis is for informational purposes only and should not be considered financial advice. Please verify financial data independently.</span>
+                    <div
+                      style={{
+                        marginTop: "16px",
+                        paddingTop: "12px",
+                        borderTop: "1px solid rgba(255, 255, 255, 0.05)",
+                        fontSize: "11px",
+                        color: "var(--text-muted)",
+                        display: "flex",
+                        gap: "6px",
+                        lineHeight: "140%",
+                        textAlign: "left",
+                      }}
+                    >
+                      <span
+                        style={{ color: "var(--neon-cyan)", fontWeight: 600 }}
+                      >
+                        Disclaimer:
+                      </span>
+                      <span>
+                        QuantIQ AI is an automated strategy assistant and can
+                        make mistakes. All analysis is for informational
+                        purposes only and should not be considered financial
+                        advice. Please verify financial data independently.
+                      </span>
                     </div>
                   </div>
                 </div>
               </div>
             ) : (
               /* List of historical reports */
-              <div className="history-list" style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+              <div
+                className="history-list"
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "12px",
+                }}
+              >
                 {savedStrategies.length === 0 ? (
-                  <div style={{ padding: '40px 20px', color: 'var(--text-secondary)', textAlign: 'center', fontSize: '13px' }}>
-                    No saved strategies found. Generate your first strategy analysis to build your history!
+                  <div
+                    style={{
+                      padding: "40px 20px",
+                      color: "var(--text-secondary)",
+                      textAlign: "center",
+                      fontSize: "13px",
+                    }}
+                  >
+                    No saved strategies found. Generate your first strategy
+                    analysis to build your history!
                   </div>
                 ) : (
                   savedStrategies.map((item) => {
-                    const dateStr = new Date(item.createdAt).toLocaleString([], {
-                      month: 'short',
-                      day: 'numeric',
-                      hour: '2-digit',
-                      minute: '2-digit'
-                    });
+                    const dateStr = new Date(item.createdAt).toLocaleString(
+                      [],
+                      {
+                        month: "short",
+                        day: "numeric",
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      },
+                    );
                     const isPositive = item.bullishProbability >= 50;
                     return (
-                      <div 
-                        key={item.id} 
+                      <div
+                        key={item.id}
                         className="history-item"
                         style={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          alignItems: 'center',
-                          padding: '12px 16px',
-                          background: 'rgba(255, 255, 255, 0.02)',
-                          border: '1px solid var(--border-glass)',
-                          borderRadius: '8px',
-                          transition: 'all 0.2s ease'
+                          display: "flex",
+                          justifyContent: "space-between",
+                          alignItems: "center",
+                          padding: "12px 16px",
+                          background: "rgba(255, 255, 255, 0.02)",
+                          border: "1px solid var(--border-glass)",
+                          borderRadius: "8px",
+                          transition: "all 0.2s ease",
                         }}
                       >
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: '3px' }}>
-                          <span style={{ fontSize: '14px', fontWeight: 700, color: 'var(--text-primary)' }}>{item.ticker}</span>
-                          <span style={{ fontSize: '11px', color: 'var(--text-muted)' }}>{dateStr}</span>
+                        <div
+                          style={{
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: "3px",
+                          }}
+                        >
+                          <span
+                            style={{
+                              fontSize: "14px",
+                              fontWeight: 700,
+                              color: "var(--text-primary)",
+                            }}
+                          >
+                            {item.ticker}
+                          </span>
+                          <span
+                            style={{
+                              fontSize: "11px",
+                              color: "var(--text-muted)",
+                            }}
+                          >
+                            {dateStr}
+                          </span>
                         </div>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                          <span className={`insight-tag ${isPositive ? 'tag-bullish' : 'tag-bearish'}`} style={{ transform: 'none', animation: 'none', margin: 0, fontSize: '10px', padding: '2px 8px' }}>
+                        <div
+                          style={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "12px",
+                          }}
+                        >
+                          <span
+                            className={`insight-tag ${isPositive ? "tag-bullish" : "tag-bearish"}`}
+                            style={{
+                              transform: "none",
+                              animation: "none",
+                              margin: 0,
+                              fontSize: "10px",
+                              padding: "2px 8px",
+                            }}
+                          >
                             {item.bullishProbability}% Bullish
                           </span>
-                          <button 
+                          <button
                             className="view-history-report-btn"
                             onClick={() => setSelectedHistoryItem(item)}
                             style={{
-                              background: 'none',
-                              border: '1px solid var(--neon-cyan)',
-                              borderRadius: '6px',
-                              color: 'var(--neon-cyan)',
-                              padding: '4px 10px',
-                              fontSize: '11px',
+                              background: "none",
+                              border: "1px solid var(--neon-cyan)",
+                              borderRadius: "6px",
+                              color: "var(--neon-cyan)",
+                              padding: "4px 10px",
+                              fontSize: "11px",
                               fontWeight: 600,
-                              cursor: 'pointer',
-                              transition: 'all 0.2s ease',
-                              outline: 'none'
+                              cursor: "pointer",
+                              transition: "all 0.2s ease",
+                              outline: "none",
                             }}
                           >
                             View Report

From cb8099b130208ba1f89679930e9772b2b5cd35e2 Mon Sep 17 00:00:00 2001
From: Jonathan Mirabal <jonathan.a.mirabal@gmail.com>
Date: Sun, 4 Oct 2026 16:00:32 -0400
Subject: [PATCH 2/3] fix(ui): remove AI analyst test leftovers

---
 frontend/src/App.css                  |  7 -------
 frontend/src/components/AIAnalyst.tsx | 15 ++++++---------
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 2632b9d..ff8bcd6 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -444,13 +444,6 @@
     z-index: 9999 !important;
     animation: none !important;
   }
-
-  .insight-panel,
-  .ai-analyst-content,
-  .insight-cta,
-  .ai-param-selectors {
-    overflow: visible !important;
-  }
 }
 
 @media (max-width: 768px) {
diff --git a/frontend/src/components/AIAnalyst.tsx b/frontend/src/components/AIAnalyst.tsx
index 948fc1f..e14e845 100644
--- a/frontend/src/components/AIAnalyst.tsx
+++ b/frontend/src/components/AIAnalyst.tsx
@@ -63,9 +63,6 @@ export default function AIAnalyst({
     creditsRemaining: 24,
   };
 
-  const testInsight = insight ?? mockInsight;
-  const testCurrentPrice = currentPrice ?? 185.42;
-
   // Auto-switch to analysis tab when loading starts
   useEffect(() => {
     if (loadingInsight) {
@@ -759,7 +756,7 @@ export default function AIAnalyst({
               </div>
             )}
 
-            {testInsight && !loadingInsight && (
+            {insight && !loadingInsight && (
               <div className="insight-result">
                 <div
                   style={{
@@ -770,7 +767,7 @@ export default function AIAnalyst({
                     flexShrink: 0,
                   }}
                 >
-                  {renderGauge(testInsight.bullishProbability)}
+                  {renderGauge(insight.bullishProbability)}
                   <button
                     className="insight-btn"
                     onClick={onResetInsight}
@@ -785,14 +782,14 @@ export default function AIAnalyst({
                 </div>
                 <div className="insight-text-container">
                   <div
-                    className={`insight-tag ${testInsight.bullishProbability >= 50 ? "tag-bullish" : "tag-bearish"}`}
+                    className={`insight-tag ${insight.bullishProbability >= 50 ? "tag-bullish" : "tag-bearish"}`}
                   >
-                    {testInsight.bullishProbability >= 50
+                    {insight.bullishProbability >= 50
                       ? "BULLISH BIAS"
                       : "BEARISH BIAS"}
                   </div>
                   <div className="insight-reason-body">
-                    {formatReason(testInsight.reason)}
+                    {formatReason(insight.reason)}
                   </div>
 
                   {/* Lock In Strategy — captures the trader's own entry/target/stop-loss,
@@ -854,7 +851,7 @@ export default function AIAnalyst({
                               }}
                             >
                               {currentPrice != null
-                                ? `$${testCurrentPrice.toFixed(2)}`
+                                ? `$${currentPrice.toFixed(2)}`
                                 : "—"}
                             </div>
                           </div>

From c7008ca29df6c656195d05793de466bd82ed1b68 Mon Sep 17 00:00:00 2001
From: Jonathan Mirabal <jonathan.a.mirabal@gmail.com>
Date: Sun, 4 Oct 2026 16:18:22 -0400
Subject: [PATCH 3/3] fix(ui): remove AI analyst test leftovers

---
 frontend/src/components/AIAnalyst.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/frontend/src/components/AIAnalyst.tsx b/frontend/src/components/AIAnalyst.tsx
index e14e845..fef1184 100644
--- a/frontend/src/components/AIAnalyst.tsx
+++ b/frontend/src/components/AIAnalyst.tsx
@@ -55,14 +55,6 @@ export default function AIAnalyst({
   const [isStyleOpen, setIsStyleOpen] = useState(false);
   const [isRiskOpen, setIsRiskOpen] = useState(false);
 
-  const mockInsight: AIInsight = {
-    ticker: activeTicker,
-    bullishProbability: 72,
-    reason:
-      "### Strategy Overview\n* Momentum is positive.\n* Price action supports a bullish setup.",
-    creditsRemaining: 24,
-  };
-
   // Auto-switch to analysis tab when loading starts
   useEffect(() => {
     if (loadingInsight) {