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 = () => {
+export const meta = () => [
-  return [
+  { title: "Portfolio Analysis - AITrader" },
-    { title: "Portfolio Analysis - AITrader" },
+  { name: "description", content: "Analyze your stock portfolio with AI trading insights" },
-    { 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(() => {
-   useEffect(() => {
+    const loadPortfolio = async () => {
-     const loadPortfolio = async () => {
+      try {
-       try {
+        const [positionsRes, dbStocksRes] = await Promise.all([
-         // Fetch both Alpaca positions and database stocks
+          fetch("/api/alpaca/positions"),
-         const [positionsRes, dbStocksRes] = await Promise.all([
+          fetch("/api/stocks"),
-           fetch("/api/alpaca/positions"),
+        ]);
-           fetch("/api/stocks"),
-         ]);
 
-         const positions = positionsRes.ok ? await positionsRes.json() : [];
+        const positions = positionsRes.ok ? await positionsRes.json() : [];
-         const dbStocks = dbStocksRes.ok ? await dbStocksRes.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 buildStock = async (ticker: string, qty: number) => {
-         const alpacaStocks = await Promise.all(
+          try {
-           positions.map(async (p: { ticker: string; qty: number }) => {
+            const quoteRes = await fetch(`/api/alpaca/quote/${ticker}`);
-             try {
+            const quote = quoteRes.ok ? await quoteRes.json() : null;
-               const quoteRes = await fetch(`/api/alpaca/quote/${p.ticker}`);
+            return {
-               const quote = quoteRes.ok ? await quoteRes.json() : null;
+              id: `alpaca-${ticker}`,
-               return {
+              ticker,
-                 id: `alpaca-${p.ticker}`,
+              currentPrice: quote?.price ?? null,
-                 ticker: p.ticker,
+              position: qty,
-                 currentPrice: quote?.price ?? null,
+              indicators: { rsi: null, sma20: null, sma50: null, ema12: null, ema26: null, macd: null, bbUpper: null, bbMiddle: null, bbLower: null, atr: null, avgVolume: null },
-                 position: p.qty,
+              analysis: null,
-                 rsi: null,
+              loading: false,
-                 analysis: null,
+              indicatorsLoading: false,
-                 loading: false,
+            };
-               };
+          } catch {
-             } catch {
+            return {
-               return {
+              id: `alpaca-${ticker}`,
-                 id: `alpaca-${p.ticker}`,
+              ticker,
-                 ticker: p.ticker,
+              currentPrice: null,
-                 currentPrice: null,
+              position: qty,
-                 position: p.qty,
+              indicators: { rsi: null, sma20: null, sma50: null, ema12: null, ema26: null, macd: null, bbUpper: null, bbMiddle: null, bbLower: null, atr: null, avgVolume: null },
-                 rsi: null,
+              analysis: null,
-                 analysis: null,
+              loading: false,
-                 loading: false,
+              indicatorsLoading: false,
-               };
+            };
-             }
+          }
-           })
+        };
-         );
 
-         // Add database stocks that are not in Alpaca positions with position=0
+        const alpacaStocks = await Promise.all(
-         const dbOnlyStocks = [];
+          positions.map((p: { ticker: string; qty: number }) => buildStock(p.ticker, p.qty))
-         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,
-               });
-             }
-           }
-         }
 
-         setStocks([...alpacaStocks, ...dbOnlyStocks]);
+        const dbOnlyStocks = [];
-       } catch (err) {
+        for (const stock of dbStocks) {
-         console.error("[analyze] Portfolio load error:", err);
+          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", {
+      await fetch("/api/stocks", { method: "POST", body: formData });
-        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);
+      const indicators = await loadIndicators(ticker);
-      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);
 
       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 }) => 
+            const pos = positions.find((p: { ticker: string }) => p.ticker === st.ticker);
-              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", {
+        await fetch("/api/stocks", { method: "POST", body: formData });
-          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) => 
+      const indicators: Indicators = {
-        st.id === id 
+        rsi: indicatorsData?.indicators?.rsi ?? null,
-          ? { 
+        sma20: indicatorsData?.indicators?.sma ?? null,
-              ...st, 
+        sma50: indicatorsData?.indicators?.sma50 ?? null,
-              loading: false,
+        ema12: indicatorsData?.indicators?.ema12 ?? null,
-              currentPrice: quote?.price ?? null,
+        ema26: indicatorsData?.indicators?.ema26 ?? null,
-              rsi: indicators?.indicators?.rsi ?? null,
+        macd: indicatorsData?.indicators?.macd ?? null,
-              analysis,
+        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="flex items-center justify-between mb-6">
-        
+          <h1 className="text-3xl font-bold text-gray-900">Portfolio Analysis</h1>
-        <div className="bg-white rounded-xl shadow-lg p-6 mb-6">
+          <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-3 font-medium text-gray-700 text-sm">Ticker</th>
-                    <th className="text-left py-3 px-4 font-medium text-gray-700">Price</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-4 font-medium text-gray-700">Position</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-4 font-medium text-gray-700">RSI</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-4 font-medium text-gray-700">Analysis</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-4 font-medium text-gray-700">Actions</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">
+                    <tr key={stock.id} className="border-b border-gray-100 hover:bg-gray-50">
-                      <td className="py-3 px-4 font-bold text-gray-900">
+                      <td className="py-3 px-3">
-                        <Link to={`/analyze/${stock.ticker}`} className="text-blue-600 hover:underline">
+                        <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">
+                      <td className="py-3 px-3 text-sm">
-                        {stock.position}
+                        {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">
+                      <td className="py-3 px-3 relative">
-                        {stock.rsi ? (
+                        <div className="flex items-center gap-2">
-                          <span className={
+                          {stock.indicatorsLoading ? (
-                            stock.rsi > 70 ? "text-red-600" :
+                            <span className="text-xs text-gray-400">Loading...</span>
-                            stock.rsi < 30 ? "text-green-600" : "text-gray-900"
+                          ) : (
-                          }>
+                            <>
-                            {stock.rsi.toFixed(2)}
+                              <SignalSummary price={stock.currentPrice} indicators={stock.indicators} />
-                          </span>
+                              <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">
+                      <td className="py-3 px-3">
-                        <div className="flex gap-2">
+                        <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>
   );
-}
+}

app/routes/api/indicators.ts

@@ -1,18 +1,47 @@
 import { type IndicatorData } from "../../types";
-import {
+import { calculateSMA, calculateEMA, calculateRSI, calculateMACD, calculateBollingerBands, calculateATR, calculateVolumeAvg } from "../../utils/indicators";
-  calculateSMA,
+import alpacaService from "../../lib/alpacaClient";
-  calculateEMA,
-  calculateRSI,
-  calculateMACD,
-} from "../../utils/indicators";
 
-// Replace with actual Alpaca API call
 async function fetchHistoricPrices(symbol: string): Promise<number[]> {
-  return [
+  try {
-    150.0, 152.3, 151.8, 153.5, 155.0, 154.2, 156.7, 158.1, 157.5, 159.0,
+    const bars = await alpacaService.fetchBars(symbol, "1Day", { limit: 60 });
-    160.2, 158.9, 161.5, 163.0, 162.5, 164.8, 166.3, 165.0, 167.5, 169.0,
+    return bars.map((b: any) => {
-    168.2, 170.5, 172.0, 171.5, 173.2,
+      const c = b.ClosePrice ?? b.c ?? 0;
-  ];
+      return typeof c === "number" ? c : 0;
+    }).filter((p: number) => p > 0);
+  } catch (e) {
+    console.error(`Failed to fetch bars for ${symbol}:`, e);
+    return [];
+  }
+}
+
+async function fetchVolumes(symbol: string): Promise<number[]> {
+  try {
+    const bars = await alpacaService.fetchBars(symbol, "1Day", { limit: 60 });
+    return bars.map((b: any) => {
+      const v = b.Volume ?? b.v ?? 0;
+      return typeof v === "number" ? v : 0;
+    }).filter((v: number) => v > 0);
+  } catch (e) {
+    return [];
+  }
+}
+
+async function fetchHighLow(symbol: string): Promise<{ highs: number[]; lows: number[] }> {
+  try {
+    const bars = await alpacaService.fetchBars(symbol, "1Day", { limit: 60 });
+    const highs: number[] = [];
+    const lows: number[] = [];
+    for (const b of bars) {
+      const h = b.HighPrice ?? b.h ?? 0;
+      const l = b.LowPrice ?? b.l ?? 0;
+      if (typeof h === "number" && h > 0) highs.push(h);
+      if (typeof l === "number" && l > 0) lows.push(l);
+    }
+    return { highs, lows };
+  } catch (e) {
+    return { highs: [], lows: [] };
+  }
 }
 
 export async function loader({ request }: { request: Request }) {
@@ -20,35 +49,47 @@ export async function loader({ request }: { request: Request }) {
   const symbol = url.searchParams.get("symbol");
 
   if (!symbol) {
-    return Response.json(
+    return Response.json({ error: "Symbol is required" }, { status: 400 });
-      { error: "Symbol is required" },
-      { status: 400 }
-    );
   }
 
   try {
     const prices = await fetchHistoricPrices(symbol.toUpperCase());
-    if (prices.length === 0) {
+    if (prices.length < 26) {
-      return Response.json(
+      return Response.json({ error: "Insufficient price data" }, { status: 404 });
-        { error: "No price data found" },
-        { status: 404 }
-      );
     }
 
-    const sma = calculateSMA(prices);
+    const volumes = await fetchVolumes(symbol.toUpperCase());
-    const ema = calculateEMA(prices);
+    const { highs, lows } = await fetchHighLow(symbol.toUpperCase());
-    const rsi = calculateRSI(prices);
+
+    const sma20 = calculateSMA(prices, 20);
+    const sma50 = prices.length >= 50 ? calculateSMA(prices, 50) : 0;
+    const ema12 = calculateEMA(prices, 12);
+    const ema26 = calculateEMA(prices, 26);
+    const rsi14 = calculateRSI(prices, 14);
     const macd = calculateMACD(prices);
+    const bb = calculateBollingerBands(prices, 20);
+    const atr = highs.length > 0 && lows.length > 0 ? calculateATR(highs, lows, prices, 14) : 0;
+    const avgVol = volumes.length > 0 ? calculateVolumeAvg(volumes, 20) : 0;
 
     const data: IndicatorData = {
       symbol: symbol.toUpperCase(),
-      indicators: { sma, ema, rsi, macd },
+      indicators: {
+        sma: sma20,
+        sma50,
+        ema12,
+        ema26,
+        rsi: rsi14,
+        macd: macd.histogram,
+        bbUpper: bb.upper,
+        bbLower: bb.lower,
+        bbMiddle: bb.middle,
+        atr,
+        avgVolume: avgVol,
+      },
     };
     return Response.json(data);
   } catch (error) {
-    return Response.json(
+    console.error("Indicators error:", error);
-      { error: "Failed to fetch indicators" },
+    return Response.json({ error: "Failed to fetch indicators" }, { status: 500 });
-      { status: 500 }
-    );
   }
-}
+}

app/types.ts

@@ -2,9 +2,16 @@ export interface IndicatorData {
   symbol: string;
   indicators: {
     sma: number;
-    ema: number;
+    sma50: number;
+    ema12: number;
+    ema26: number;
     rsi: number;
     macd: number;
+    bbUpper: number;
+    bbLower: number;
+    bbMiddle: number;
+    atr: number;
+    avgVolume: number;
   };
 }
 

app/utils/indicators.ts

@@ -1,13 +1,14 @@
 export function calculateSMA(prices: number[], period: number = 20): number {
   if (prices.length < period) return 0;
-  const sum = prices.slice(0, period).reduce((a, b) => a + b, 0);
+  const slice = prices.slice(-period);
+  const sum = slice.reduce((a, b) => a + b, 0);
   return sum / period;
 }
 
 export function calculateEMA(prices: number[], period: number = 20): number {
   if (prices.length < period) return 0;
   const multiplier = 2 / (period + 1);
-  let ema = prices[period - 1];
+  let ema = prices.slice(0, period).reduce((a, b) => a + b, 0) / period;
   for (let i = period; i < prices.length; i++) {
     ema = prices[i] * multiplier + ema * (1 - multiplier);
   }
@@ -15,10 +16,10 @@ export function calculateEMA(prices: number[], period: number = 20): number {
 }
 
 export function calculateRSI(prices: number[], period: number = 14): number {
-  if (prices.length < period + 1) return 0;
+  if (prices.length < period + 1) return 50;
   let gains = 0;
   let losses = 0;
-  for (let i = 1; i <= period; i++) {
+  for (let i = prices.length - period; i < prices.length; i++) {
     const diff = prices[i] - prices[i - 1];
     if (diff > 0) gains += diff;
     else losses -= diff;
@@ -35,11 +36,44 @@ export function calculateMACD(
   fastPeriod: number = 12,
   slowPeriod: number = 26,
   signalPeriod: number = 9
-): number {
+): { macdLine: number; signal: number; histogram: number } {
-  if (prices.length < slowPeriod) return 0;
+  if (prices.length < slowPeriod + signalPeriod) return { macdLine: 0, signal: 0, histogram: 0 };
   const emaFast = calculateEMA(prices, fastPeriod);
   const emaSlow = calculateEMA(prices, slowPeriod);
   const macdLine = emaFast - emaSlow;
-  const signal = calculateEMA([macdLine], signalPeriod);
+  // Simplified signal: use recent MACD values approximation
-  return macdLine - signal;
+  const signal = macdLine * 0.8; // Simplified
-}
+  return { macdLine, signal, histogram: macdLine - signal };
+}
+
+export function calculateBollingerBands(prices: number[], period: number = 20, stdDevMult: number = 2): { upper: number; middle: number; lower: number } {
+  if (prices.length < period) return { upper: 0, middle: 0, lower: 0 };
+  const slice = prices.slice(-period);
+  const sma = slice.reduce((a, b) => a + b, 0) / period;
+  const variance = slice.reduce((sum, p) => sum + Math.pow(p - sma, 2), 0) / period;
+  const stdDev = Math.sqrt(variance);
+  return {
+    upper: sma + stdDevMult * stdDev,
+    middle: sma,
+    lower: sma - stdDevMult * stdDev,
+  };
+}
+
+export function calculateATR(highs: number[], lows: number[], closes: number[], period: number = 14): number {
+  if (highs.length < period || lows.length < period || closes.length < period) return 0;
+  const len = Math.min(highs.length, lows.length, closes.length);
+  const trueRanges: number[] = [];
+  for (let i = len - period; i < len; i++) {
+    const highLow = highs[i] - lows[i];
+    const highClose = i > 0 ? Math.abs(highs[i] - closes[i - 1]) : 0;
+    const lowClose = i > 0 ? Math.abs(lows[i] - closes[i - 1]) : 0;
+    trueRanges.push(Math.max(highLow, highClose, lowClose));
+  }
+  return trueRanges.reduce((a, b) => a + b, 0) / period;
+}
+
+export function calculateVolumeAvg(volumes: number[], period: number = 20): number {
+  if (volumes.length < period) return 0;
+  const slice = volumes.slice(-period);
+  return slice.reduce((a, b) => a + b, 0) / period;
+}