feat: rewrite analyze page with technical indicators column and signal summary

app/routes/analyze.tsx

@@ -3,112 +3,213 @@ import { Link } from "react-router";
 import Navbar from "../components/Navbar";
 import type { TradingDecision } from "../types/agents";
 
+interface Indicators {
+  rsi: number | null;
+  sma20: number | null;
+  sma50: number | null;
+  ema12: number | null;
+  ema26: number | null;
+  macd: number | null;
+  bbUpper: number | null;
+  bbMiddle: number | null;
+  bbLower: number | null;
+  atr: number | null;
+  avgVolume: number | null;
+}
+
 interface StockRow {
   id: string;
   ticker: string;
   currentPrice: number | null;
   position: number;
-  rsi: number | null;
+  indicators: Indicators;
   analysis: TradingDecision | null;
   loading: boolean;
+  indicatorsLoading: boolean;
 }
 
-export const meta = () => {
-  return [
-    { title: "Portfolio Analysis - AITrader" },
-    { name: "description", content: "Analyze your stock portfolio with AI trading insights" },
+export const meta = () => [
+  { title: "Portfolio Analysis - AITrader" },
+  { name: "description", content: "Analyze your stock portfolio with AI trading insights" },
+];
+
+function RsiBadge({ value }: { value: number }) {
+  const color = value > 70 ? "bg-red-100 text-red-700" : value < 30 ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-700";
+  const label = value > 70 ? "Overbought" : value < 30 ? "Oversold" : "Neutral";
+  return <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${color}`}>{value.toFixed(0)} {label}</span>;
+}
+
+function MacdBadge({ value }: { value: number }) {
+  const color = value > 0 ? "text-green-600" : "text-red-600";
+  return <span className={`text-xs font-medium ${color}`}>{value > 0 ? "▲" : "▼"} {value.toFixed(2)}</span>;
+}
+
+function PriceVsSma({ price, sma, label }: { price: number; sma: number; label: string }) {
+  if (!price || !sma) return <span className="text-xs text-gray-400">-</span>;
+  const above = price > sma;
+  const pct = ((price - sma) / sma * 100).toFixed(1);
+  return (
+    <span className={`text-xs ${above ? "text-green-600" : "text-red-600"}`}>
+      {above ? "▲" : "▼"} {pct}%
+    </span>
+  );
+}
+
+function SignalSummary({ price, indicators }: { price: number | null; indicators: Indicators }) {
+  if (!price) return <span className="text-xs text-gray-400">No data</span>;
+
+  const signals: string[] = [];
+
+  if (indicators.rsi != null) {
+    if (indicators.rsi > 70) signals.push("RSI overbought");
+    else if (indicators.rsi < 30) signals.push("RSI oversold");
+  }
+
+  if (indicators.sma20 != null && indicators.sma50 != null) {
+    if (indicators.sma20 > indicators.sma50) signals.push("SMA bullish cross");
+    else signals.push("SMA bearish cross");
+  }
+
+  if (indicators.macd != null) {
+    if (indicators.macd > 0) signals.push("MACD positive");
+    else signals.push("MACD negative");
+  }
+
+  if (indicators.bbUpper != null && indicators.bbLower != null) {
+    if (price > indicators.bbUpper) signals.push("Above BB upper");
+    else if (price < indicators.bbLower) signals.push("Below BB lower");
+  }
+
+  if (signals.length === 0) return <span className="text-xs text-gray-400">-</span>;
+
+  const bullish = signals.filter(s => s.includes("oversold") || s.includes("bullish") || s.includes("positive") || s.includes("Below BB")).length;
+  const bearish = signals.filter(s => s.includes("overbought") || s.includes("bearish") || s.includes("negative") || s.includes("Above BB")).length;
+  const net = bullish - bearish;
+  const bias = net > 0 ? "bullish" : net < 0 ? "bearish" : "neutral";
+  const biasColor = bias === "bullish" ? "text-green-600" : bias === "bearish" ? "text-red-600" : "text-gray-500";
+
+  return (
+    <div>
+      <span className={`text-xs font-semibold capitalize ${biasColor}`}>{bias}</span>
+      <div className="text-xs text-gray-500 mt-0.5 space-y-0.5">
+        {signals.slice(0, 3).map((s, i) => <div key={i}>{s}</div>)}
+      </div>
+    </div>
+  );
+}
+
+function IndicatorsPopover({ indicators, price, visible, onClose }: { indicators: Indicators; price: number | null; visible: boolean; onClose: () => void }) {
+  if (!visible) return null;
+
+  const rows = [
+    { label: "RSI (14)", value: indicators.rsi != null ? <RsiBadge value={indicators.rsi} /> : "-" },
+    { label: "SMA 20", value: indicators.sma20 != null ? `${indicators.sma20.toFixed(2)}` : "-" },
+    { label: "SMA 50", value: indicators.sma50 != null ? `${indicators.sma50.toFixed(2)}` : "-" },
+    { label: "EMA 12", value: indicators.ema12 != null ? `${indicators.ema12.toFixed(2)}` : "-" },
+    { label: "EMA 26", value: indicators.ema26 != null ? `${indicators.ema26.toFixed(2)}` : "-" },
+    { label: "MACD", value: indicators.macd != null ? <MacdBadge value={indicators.macd} /> : "-" },
+    { label: "BB Upper", value: indicators.bbUpper != null ? `$${indicators.bbUpper.toFixed(2)}` : "-" },
+    { label: "BB Middle", value: indicators.bbMiddle != null ? `$${indicators.bbMiddle.toFixed(2)}` : "-" },
+    { label: "BB Lower", value: indicators.bbLower != null ? `$${indicators.bbLower.toFixed(2)}` : "-" },
+    { label: "ATR (14)", value: indicators.atr != null ? `$${indicators.atr.toFixed(2)}` : "-" },
+    { label: "Avg Vol (20)", value: indicators.avgVolume != null ? indicators.avgVolume.toFixed(0) : "-" },
   ];
-};
+
+  return (
+    <>
+      <div className="fixed inset-0 z-40" onClick={onClose} />
+      <div className="absolute z-50 left-0 top-full mt-1 w-64 bg-white rounded-lg shadow-xl border border-gray-200 p-3">
+        <h4 className="text-xs font-semibold text-gray-700 mb-2">Technical Indicators</h4>
+        <div className="space-y-1">
+          {rows.map((r) => (
+            <div key={r.label} className="flex justify-between text-xs">
+              <span className="text-gray-500">{r.label}</span>
+              <span className="text-gray-900 font-medium">{r.value}</span>
+            </div>
+          ))}
+        </div>
+        {price && indicators.sma20 && indicators.sma50 && (
+          <div className="mt-2 pt-2 border-t border-gray-100 space-y-1">
+            <div className="flex justify-between text-xs">
+              <span className="text-gray-500">Price vs SMA20</span>
+              <PriceVsSma price={price} sma={indicators.sma20} label="SMA20" />
+            </div>
+            <div className="flex justify-between text-xs">
+              <span className="text-gray-500">Price vs SMA50</span>
+              <PriceVsSma price={price} sma={indicators.sma50} label="SMA50" />
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
 
 export default function Analyze() {
   const [stocks, setStocks] = useState<StockRow[]>([]);
   const [newTicker, setNewTicker] = useState("");
 
-// Load Alpaca portfolio and database stocks on mount
-   useEffect(() => {
-     const loadPortfolio = async () => {
-       try {
-         // Fetch both Alpaca positions and database stocks
-         const [positionsRes, dbStocksRes] = await Promise.all([
-           fetch("/api/alpaca/positions"),
-           fetch("/api/stocks"),
-         ]);
+  useEffect(() => {
+    const loadPortfolio = async () => {
+      try {
+        const [positionsRes, dbStocksRes] = await Promise.all([
+          fetch("/api/alpaca/positions"),
+          fetch("/api/stocks"),
+        ]);
 
-         const positions = positionsRes.ok ? await positionsRes.json() : [];
-         const dbStocks = dbStocksRes.ok ? await dbStocksRes.json() : [];
+        const positions = positionsRes.ok ? await positionsRes.json() : [];
+        const dbStocks = dbStocksRes.ok ? await dbStocksRes.json() : [];
 
-         // Create a set of tickers from Alpaca positions for quick lookup
-         const alpacaTickers = new Set(positions.map((p: { ticker: string }) => p.ticker));
+        const alpacaTickers = new Set(positions.map((p: { ticker: string }) => p.ticker));
 
-         // Build stocks array for Alpaca positions
-         const alpacaStocks = await Promise.all(
-           positions.map(async (p: { ticker: string; qty: number }) => {
-             try {
-               const quoteRes = await fetch(`/api/alpaca/quote/${p.ticker}`);
-               const quote = quoteRes.ok ? await quoteRes.json() : null;
-               return {
-                 id: `alpaca-${p.ticker}`,
-                 ticker: p.ticker,
-                 currentPrice: quote?.price ?? null,
-                 position: p.qty,
-                 rsi: null,
-                 analysis: null,
-                 loading: false,
-               };
-             } catch {
-               return {
-                 id: `alpaca-${p.ticker}`,
-                 ticker: p.ticker,
-                 currentPrice: null,
-                 position: p.qty,
-                 rsi: null,
-                 analysis: null,
-                 loading: false,
-               };
-             }
-           })
-         );
+        const buildStock = async (ticker: string, qty: number) => {
+          try {
+            const quoteRes = await fetch(`/api/alpaca/quote/${ticker}`);
+            const quote = quoteRes.ok ? await quoteRes.json() : null;
+            return {
+              id: `alpaca-${ticker}`,
+              ticker,
+              currentPrice: quote?.price ?? null,
+              position: qty,
+              indicators: { rsi: null, sma20: null, sma50: null, ema12: null, ema26: null, macd: null, bbUpper: null, bbMiddle: null, bbLower: null, atr: null, avgVolume: null },
+              analysis: null,
+              loading: false,
+              indicatorsLoading: false,
+            };
+          } catch {
+            return {
+              id: `alpaca-${ticker}`,
+              ticker,
+              currentPrice: null,
+              position: qty,
+              indicators: { rsi: null, sma20: null, sma50: null, ema12: null, ema26: null, macd: null, bbUpper: null, bbMiddle: null, bbLower: null, atr: null, avgVolume: null },
+              analysis: null,
+              loading: false,
+              indicatorsLoading: false,
+            };
+          }
+        };
 
-         // Add database stocks that are not in Alpaca positions with position=0
-         const dbOnlyStocks = [];
-         for (const stock of dbStocks) {
-           if (!alpacaTickers.has(stock.ticker)) {
-             try {
-               const quoteRes = await fetch(`/api/alpaca/quote/${stock.ticker}`);
-               const quote = quoteRes.ok ? await quoteRes.json() : null;
-               dbOnlyStocks.push({
-                 id: `db-${stock.ticker}`,
-                 ticker: stock.ticker,
-                 currentPrice: quote?.price ?? null,
-                 position: 0,
-                 rsi: null,
-                 analysis: null,
-                 loading: false,
-               });
-             } catch {
-               dbOnlyStocks.push({
-                 id: `db-${stock.ticker}`,
-                 ticker: stock.ticker,
-                 currentPrice: null,
-                 position: 0,
-                 rsi: null,
-                 analysis: null,
-                 loading: false,
-               });
-             }
-           }
-         }
+        const alpacaStocks = await Promise.all(
+          positions.map((p: { ticker: string; qty: number }) => buildStock(p.ticker, p.qty))
+        );
 
-         setStocks([...alpacaStocks, ...dbOnlyStocks]);
-       } catch (err) {
-         console.error("[analyze] Portfolio load error:", err);
-       }
-     };
+        const dbOnlyStocks = [];
+        for (const stock of dbStocks) {
+          if (!alpacaTickers.has(stock.ticker)) {
+            dbOnlyStocks.push(await buildStock(stock.ticker, 0));
+          }
+        }
 
-     loadPortfolio();
-   }, []);
+        setStocks([...alpacaStocks, ...dbOnlyStocks]);
+      } catch (err) {
+        console.error("[analyze] Portfolio load error:", err);
+      }
+    };
+
+    loadPortfolio();
+  }, []);
 
-  // Refresh prices every minute
   useEffect(() => {
     const interval = setInterval(() => {
       stocks.forEach((stock) => {
@@ -116,7 +217,7 @@ export default function Analyze() {
           .then((res) => res.ok ? res.json() : null)
           .then((data) => {
             if (data?.price) {
-              setStocks((s) => s.map((st) => 
+              setStocks((s) => s.map((st) =>
                 st.ticker === stock.ticker ? { ...st, currentPrice: data.price } : st
               ));
             }
@@ -124,32 +225,46 @@ export default function Analyze() {
           .catch(() => {});
       });
     }, 60000);
-    
+
     return () => clearInterval(interval);
   }, [stocks]);
 
+  const loadIndicators = async (ticker: string) => {
+    try {
+      const res = await fetch(`/api/indicators?symbol=${ticker}`);
+      if (!res.ok) return null;
+      const data = await res.json();
+      const ind = data.indicators || {};
+      return {
+        rsi: ind.rsi ?? null,
+        sma20: ind.sma ?? null,
+        sma50: ind.sma50 ?? null,
+        ema12: ind.ema12 ?? null,
+        ema26: ind.ema26 ?? null,
+        macd: ind.macd ?? null,
+        bbUpper: ind.bbUpper ?? null,
+        bbMiddle: ind.bbMiddle ?? null,
+        bbLower: ind.bbLower ?? null,
+        atr: ind.atr ?? null,
+        avgVolume: ind.avgVolume ?? null,
+      };
+    } catch {
+      return null;
+    }
+  };
+
   const addStock = async () => {
     if (!newTicker.trim()) return;
     const ticker = newTicker.trim().toUpperCase();
 
-    console.log("[analyze] Adding stock:", ticker);
+    if (stocks.some((s) => s.ticker === ticker)) return;
 
-    // Check if ticker already exists
-    if (stocks.some((s) => s.ticker === ticker)) {
-      console.log("[analyze] Ticker already exists:", ticker);
-      return;
-    }
-
-    // Save to database first
     try {
       const formData = new FormData();
       formData.append("ticker", ticker);
-      await fetch("/api/stocks", {
-        method: "POST",
-        body: formData,
-      });
+      await fetch("/api/stocks", { method: "POST", body: formData });
     } catch (err) {
-      console.error("[analyze] Error saving stock to DB:", err);
+      console.error("[analyze] Error saving stock:", err);
     }
 
     const newStock: StockRow = {
@@ -157,60 +272,48 @@ export default function Analyze() {
       ticker,
       currentPrice: null,
       position: 0,
-      rsi: null,
+      indicators: { rsi: null, sma20: null, sma50: null, ema12: null, ema26: null, macd: null, bbUpper: null, bbMiddle: null, bbLower: null, atr: null, avgVolume: null },
       analysis: null,
       loading: true,
+      indicatorsLoading: true,
     };
 
     setStocks((s) => [...s, newStock]);
     setNewTicker("");
 
     try {
-      console.log("[analyze] Fetching quote and positions for", ticker);
       const [quoteRes, positionsRes] = await Promise.all([
         fetch(`/api/alpaca/quote/${ticker}`),
         fetch("/api/alpaca/positions"),
       ]);
 
-      console.log("[analyze] Quote response:", quoteRes.status);
-      console.log("[analyze] Positions response:", positionsRes.status);
-
       const quote = quoteRes.ok ? await quoteRes.json() : null;
       const positions = positionsRes.ok ? await positionsRes.json() : [];
+      const position = positions.find((p: { ticker: string }) => p.ticker === ticker)?.qty ?? 0;
 
-      console.log("[analyze] Quote data:", quote);
-      console.log("[analyze] Positions data:", positions);
-
-      const position = positions.find((p: { ticker: string; qty: number }) =>
-        p.ticker === ticker
-      )?.qty ?? 0;
-
-      console.log("[analyze] Found position:", position);
+      const indicators = await loadIndicators(ticker);
 
       setStocks((s) => s.map((st) =>
         st.ticker === ticker
-          ? { ...st, loading: false, currentPrice: quote?.price ?? null, position }
+          ? { ...st, loading: false, indicatorsLoading: false, currentPrice: quote?.price ?? null, position, indicators: indicators || st.indicators }
           : st
       ));
     } catch (err) {
       console.error("[analyze] Error adding stock:", err);
-      setStocks((s) => s.map((st) => st.ticker === ticker ? { ...st, loading: false } : st));
+      setStocks((s) => s.map((st) => st.ticker === ticker ? { ...st, loading: false, indicatorsLoading: false } : st));
     }
   };
 
-  // Update all positions on mount and when stocks change
   useEffect(() => {
     if (stocks.length === 0) return;
-    
+
     const updatePositions = async () => {
       try {
         const res = await fetch("/api/alpaca/positions");
         if (res.ok) {
           const positions = await res.json();
           setStocks((s) => s.map((st) => {
-            const pos = positions.find((p: { ticker: string; qty: number }) => 
-              p.ticker === st.ticker
-            );
+            const pos = positions.find((p: { ticker: string }) => p.ticker === st.ticker);
             return pos ? { ...st, position: pos.qty } : st;
           }));
         }
@@ -218,7 +321,7 @@ export default function Analyze() {
         console.error("[analyze] Position update error:", err);
       }
     };
-    
+
     updatePositions();
   }, [stocks.length]);
 
@@ -226,18 +329,14 @@ export default function Analyze() {
     const stock = stocks.find((s) => s.id === id);
     if (!stock) return;
 
-    // Delete from database if this was a manually added stock (db- prefix)
     if (id.startsWith("db-")) {
       try {
         const formData = new FormData();
         formData.append("_method", "DELETE");
         formData.append("ticker", stock.ticker);
-        await fetch("/api/stocks", {
-          method: "POST",
-          body: formData,
-        });
+        await fetch("/api/stocks", { method: "POST", body: formData });
       } catch (err) {
-        console.error("[analyze] Error deleting stock from DB:", err);
+        console.error("[analyze] Error deleting stock:", err);
       }
     }
 
@@ -246,32 +345,40 @@ export default function Analyze() {
 
   const runAnalysis = async (id: string, ticker: string) => {
     setStocks((s) => s.map((st) => st.id === id ? { ...st, loading: true } : st));
-    
+
     try {
       const [quoteRes, indicatorsRes] = await Promise.all([
         fetch(`/api/alpaca/quote/${ticker}`),
         fetch(`/api/indicators?symbol=${ticker}`),
       ]);
-      
+
       const quote = quoteRes.ok ? await quoteRes.json() : null;
-      const indicators = indicatorsRes.ok ? await indicatorsRes.json() : null;
-      
+      const indicatorsData = indicatorsRes.ok ? await indicatorsRes.json() : null;
+
       const analysisRes = await fetch("/api/analyze", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ ticker }),
       });
       const analysis = analysisRes.ok ? await analysisRes.json() : null;
-      
-      setStocks((s) => s.map((st) => 
-        st.id === id 
-          ? { 
-              ...st, 
-              loading: false,
-              currentPrice: quote?.price ?? null,
-              rsi: indicators?.indicators?.rsi ?? null,
-              analysis,
-            } 
+
+      const indicators: Indicators = {
+        rsi: indicatorsData?.indicators?.rsi ?? null,
+        sma20: indicatorsData?.indicators?.sma ?? null,
+        sma50: indicatorsData?.indicators?.sma50 ?? null,
+        ema12: indicatorsData?.indicators?.ema12 ?? null,
+        ema26: indicatorsData?.indicators?.ema26 ?? null,
+        macd: indicatorsData?.indicators?.macd ?? null,
+        bbUpper: indicatorsData?.indicators?.bbUpper ?? null,
+        bbMiddle: indicatorsData?.indicators?.bbMiddle ?? null,
+        bbLower: indicatorsData?.indicators?.bbLower ?? null,
+        atr: indicatorsData?.indicators?.atr ?? null,
+        avgVolume: indicatorsData?.indicators?.avgVolume ?? null,
+      };
+
+      setStocks((s) => s.map((st) =>
+        st.id === id
+          ? { ...st, loading: false, currentPrice: quote?.price ?? null, indicators, analysis }
           : st
       ));
     } catch {
@@ -279,13 +386,33 @@ export default function Analyze() {
     }
   };
 
+  const loadAllIndicators = async () => {
+    for (const stock of stocks) {
+      if (stock.indicators.rsi != null) continue;
+      setStocks((s) => s.map((st) => st.id === stock.id ? { ...st, indicatorsLoading: true } : st));
+      const indicators = await loadIndicators(stock.ticker);
+      if (indicators) {
+        setStocks((s) => s.map((st) => st.id === stock.id ? { ...st, indicators, indicatorsLoading: false } : st));
+      } else {
+        setStocks((s) => s.map((st) => st.id === stock.id ? { ...st, indicatorsLoading: false } : st));
+      }
+    }
+  };
+
+  const [openIndicatorId, setOpenIndicatorId] = useState<string | null>(null);
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
       <Navbar />
       <div className="mx-auto max-w-7xl px-6 py-8">
-        <h1 className="text-3xl font-bold text-gray-900 mb-6">Portfolio Analysis</h1>
-        
-        <div className="bg-white rounded-xl shadow-lg p-6 mb-6">
+        <div className="flex items-center justify-between mb-6">
+          <h1 className="text-3xl font-bold text-gray-900">Portfolio Analysis</h1>
+          <button onClick={loadAllIndicators} className="text-sm text-blue-600 hover:underline font-medium">
+            Load All Indicators
+          </button>
+        </div>
+
+        <div className="bg-white rounded-xl shadow-lg p-6 mb-6 border border-gray-200">
           <div className="flex gap-3 mb-4">
             <input
               type="text"
@@ -302,7 +429,7 @@ export default function Analyze() {
               Add Stock
             </button>
           </div>
-          
+
           {stocks.length === 0 ? (
             <p className="text-gray-500 text-center py-8">No stocks added. Add a ticker to get started.</p>
           ) : (
@@ -310,80 +437,112 @@ export default function Analyze() {
               <table className="w-full">
                 <thead>
                   <tr className="border-b border-gray-200">
-                    <th className="text-left py-3 px-4 font-medium text-gray-700">Ticker</th>
-                    <th className="text-left py-3 px-4 font-medium text-gray-700">Price</th>
-                    <th className="text-left py-3 px-4 font-medium text-gray-700">Position</th>
-                    <th className="text-left py-3 px-4 font-medium text-gray-700">RSI</th>
-                    <th className="text-left py-3 px-4 font-medium text-gray-700">Analysis</th>
-                    <th className="text-left py-3 px-4 font-medium text-gray-700">Actions</th>
+                    <th className="text-left py-3 px-3 font-medium text-gray-700 text-sm">Ticker</th>
+                    <th className="text-left py-3 px-3 font-medium text-gray-700 text-sm">Price</th>
+                    <th className="text-left py-3 px-3 font-medium text-gray-700 text-sm">Position</th>
+                    <th className="text-left py-3 px-3 font-medium text-gray-700 text-sm">Technical Summary</th>
+                    <th className="text-left py-3 px-3 font-medium text-gray-700 text-sm">RSI</th>
+                    <th className="text-left py-3 px-3 font-medium text-gray-700 text-sm">MACD</th>
+                    <th className="text-left py-3 px-3 font-medium text-gray-700 text-sm">SMA 20/50</th>
+                    <th className="text-left py-3 px-3 font-medium text-gray-700 text-sm">AI Analysis</th>
+                    <th className="text-left py-3 px-3 font-medium text-gray-700 text-sm">Actions</th>
                   </tr>
                 </thead>
                 <tbody>
                   {stocks.map((stock) => (
-                    <tr key={stock.id} className="border-b border-gray-100">
-                      <td className="py-3 px-4 font-bold text-gray-900">
-                        <Link to={`/analyze/${stock.ticker}`} className="text-blue-600 hover:underline">
+                    <tr key={stock.id} className="border-b border-gray-100 hover:bg-gray-50">
+                      <td className="py-3 px-3">
+                        <Link to={`/analyze/${stock.ticker}`} className="font-bold text-gray-900 text-blue-600 hover:underline">
                           {stock.ticker}
                         </Link>
                       </td>
-                      <td className="py-3 px-4 text-gray-900">
+                      <td className="py-3 px-3 text-gray-900 text-sm">
                         {stock.currentPrice ? `$${stock.currentPrice.toFixed(2)}` : "-"}
                       </td>
-                      <td className="py-3 px-4 text-gray-900 font-medium">
-                        {stock.position}
+                      <td className="py-3 px-3 text-sm">
+                        {stock.position > 0 ? (
+                          <span className="font-medium text-green-600">{stock.position} shares</span>
+                        ) : (
+                          <span className="text-gray-400">-</span>
+                        )}
                       </td>
-                      <td className="py-3 px-4">
-                        {stock.rsi ? (
-                          <span className={
-                            stock.rsi > 70 ? "text-red-600" :
-                            stock.rsi < 30 ? "text-green-600" : "text-gray-900"
-                          }>
-                            {stock.rsi.toFixed(2)}
-                          </span>
+                      <td className="py-3 px-3 relative">
+                        <div className="flex items-center gap-2">
+                          {stock.indicatorsLoading ? (
+                            <span className="text-xs text-gray-400">Loading...</span>
+                          ) : (
+                            <>
+                              <SignalSummary price={stock.currentPrice} indicators={stock.indicators} />
+                              <button
+                                onClick={() => setOpenIndicatorId(openIndicatorId === stock.id ? null : stock.id)}
+                                className="text-xs text-blue-600 hover:underline shrink-0"
+                              >
+                                Details
+                              </button>
+                            </>
+                          )}
+                        </div>
+                        <IndicatorsPopover
+                          indicators={stock.indicators}
+                          price={stock.currentPrice}
+                          visible={openIndicatorId === stock.id}
+                          onClose={() => setOpenIndicatorId(null)}
+                        />
+                      </td>
+                      <td className="py-3 px-3">
+                        {stock.indicators.rsi != null ? (
+                          <RsiBadge value={stock.indicators.rsi} />
+                        ) : stock.indicatorsLoading ? (
+                          <span className="text-xs text-gray-400">...</span>
                         ) : "-"}
                       </td>
-                      <td className="py-3 px-4">
+                      <td className="py-3 px-3">
+                        {stock.indicators.macd != null ? (
+                          <MacdBadge value={stock.indicators.macd} />
+                        ) : "-"}
+                      </td>
+                      <td className="py-3 px-3">
+                        {stock.currentPrice && stock.indicators.sma20 && stock.indicators.sma50 ? (
+                          <div className="space-y-0.5">
+                            <PriceVsSma price={stock.currentPrice} sma={stock.indicators.sma20} label="SMA20" />
+                            <PriceVsSma price={stock.currentPrice} sma={stock.indicators.sma50} label="SMA50" />
+                          </div>
+                        ) : "-"}
+                      </td>
+                      <td className="py-3 px-3">
                         {stock.analysis ? (
                           <div>
-                            <span className={`font-medium ${
+                            <span className={`font-semibold text-sm ${
                               stock.analysis.action === "buy" ? "text-green-600" :
-                              stock.analysis.action === "sell" ? "text-red-600" : "text-gray-600"
+                              stock.analysis.action === "sell" ? "text-red-600" : "text-gray-500"
                             }`}>
                               {stock.analysis.action.toUpperCase()}
                             </span>
                             <div className="text-xs text-gray-500">
-                              {stock.analysis.confidence ? `Confidence: ${(stock.analysis.confidence * 100).toFixed(0)}%` : "Saved suggestion"}
+                              {(stock.analysis.confidence ?? 0 * 100).toFixed(0)}%
                             </div>
-                            {stock.analysis.executionPlan && (
-                              <div className="text-xs text-gray-700 mt-1">
-                                {stock.analysis.executionPlan.amount != null && (<div>Amount: <strong>{stock.analysis.executionPlan.amount}</strong></div>)}
-                                {stock.analysis.executionPlan.takeProfit != null && (<div>Take profit: <strong>${stock.analysis.executionPlan.takeProfit}</strong></div>)}
-                              </div>
-                            )}
                           </div>
                         ) : stock.loading ? (
-                          <span className="text-blue-600">Analyzing...</span>
+                          <span className="text-xs text-blue-600">Analyzing...</span>
                         ) : "-"}
                       </td>
-                      <td className="py-3 px-4">
-                        <div className="flex gap-2">
+                      <td className="py-3 px-3">
+                        <div className="flex gap-1.5">
                           <button
                             onClick={() => runAnalysis(stock.id, stock.ticker)}
                             disabled={stock.loading}
-                            className="bg-blue-600 text-white px-3 py-1 rounded text-sm hover:bg-blue-700 disabled:opacity-50"
+                            className="bg-blue-600 text-white px-2.5 py-1 rounded text-xs font-medium hover:bg-blue-700 disabled:opacity-50"
                           >
-                            {stock.loading ? "Running..." : "Analyze"}
+                            {stock.loading ? "..." : "Analyze"}
+                          </button>
+                          <button
+                            onClick={async () => {
+                              if (confirm(`Remove ${stock.ticker}?`)) await removeStock(stock.id);
+                            }}
+                            className="bg-red-600 text-white px-2.5 py-1 rounded text-xs font-medium hover:bg-red-700"
+                          >
+                            Delete
                           </button>
-<button
-                             onClick={async () => {
-                               if (confirm(`Remove ${stock.ticker}?`)) {
-                                 await removeStock(stock.id);
-                               }
-                             }}
-                             className="bg-red-600 text-white px-3 py-1 rounded text-sm hover:bg-red-700"
-                           >
-                             Delete
-                           </button>
                         </div>
                       </td>
                     </tr>
@@ -396,4 +555,4 @@ export default function Analyze() {
       </div>
     </div>
   );
-}
+}