major update

frontend/src/pages/TickerDetailPage.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTickerDetail } from '../hooks/useTickerDetail';
@@ -11,6 +11,7 @@ import { IndicatorSelector } from '../components/ticker/IndicatorSelector';
 import { useToast } from '../components/ui/Toast';
 import { fetchData } from '../api/ingestion';
 import { formatPrice } from '../lib/format';
+import type { TradeSetup } from '../lib/types';
 
 function SectionError({ message, onRetry }: { message: string; onRetry?: () => void }) {
   return (
@@ -65,7 +66,7 @@ function DataFreshnessBar({ items }: { items: DataStatusItem[] }) {
 
 export default function TickerDetailPage() {
   const { symbol = '' } = useParams<{ symbol: string }>();
-  const { ohlcv, scores, srLevels, sentiment, fundamentals } = useTickerDetail(symbol);
+  const { ohlcv, scores, srLevels, sentiment, fundamentals, trades } = useTickerDetail(symbol);
   const queryClient = useQueryClient();
   const { addToast } = useToast();
 
@@ -132,10 +133,29 @@ export default function TickerDetailPage() {
     },
   ], [ohlcv.data, sentiment.data, fundamentals.data, srLevels.data, scores.data]);
 
-  // Sort S/R levels by strength for the table
+  // Log trades API errors but don't disrupt the page
+  useEffect(() => {
+    if (trades.error) {
+      console.error('Failed to fetch trade setups:', trades.error);
+    }
+  }, [trades.error]);
+
+  // Pick the latest trade setup for the current symbol
+  const tradeSetup: TradeSetup | undefined = useMemo(() => {
+    if (trades.error || !trades.data) return undefined;
+    const matching = trades.data.filter(
+      (t) => t.symbol.toUpperCase() === symbol.toUpperCase(),
+    );
+    if (matching.length === 0) return undefined;
+    return matching.reduce((latest, t) =>
+      new Date(t.detected_at) > new Date(latest.detected_at) ? t : latest,
+    );
+  }, [trades.data, trades.error, symbol]);
+
+  // Sort visible S/R levels by strength for the table (only levels within chart zones)
   const sortedLevels = useMemo(() => {
-    if (!srLevels.data?.levels) return [];
-    return [...srLevels.data.levels].sort((a, b) => b.strength - a.strength);
+    if (!srLevels.data?.visible_levels) return [];
+    return [...srLevels.data.visible_levels].sort((a, b) => b.strength - a.strength);
   }, [srLevels.data]);
 
   return (
@@ -176,7 +196,7 @@ export default function TickerDetailPage() {
         )}
         {ohlcv.data && (
           <div className="glass p-5">
-            <CandlestickChart data={ohlcv.data} srLevels={srLevels.data?.levels} />
+            <CandlestickChart data={ohlcv.data} srLevels={srLevels.data?.levels} zones={srLevels.data?.zones} tradeSetup={tradeSetup} />
             {srLevels.isError && (
               <p className="mt-2 text-xs text-yellow-500/80">S/R levels unavailable — chart shown without overlays</p>
             )}
@@ -184,6 +204,39 @@ export default function TickerDetailPage() {
         )}
       </section>
 
+      {/* Trade Setup Summary Card */}
+      {tradeSetup && (
+        <section>
+          <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Trade Setup</h2>
+          <div className="glass p-5">
+            <div className="flex flex-wrap items-center gap-6">
+              <div className="flex items-center gap-2">
+                <span className="text-xs text-gray-500">Direction</span>
+                <span className={`text-sm font-semibold ${tradeSetup.direction === 'long' ? 'text-emerald-400' : 'text-red-400'}`}>
+                  {tradeSetup.direction.toUpperCase()}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-xs text-gray-500">Entry</span>
+                <span className="text-sm font-mono text-blue-300">{formatPrice(tradeSetup.entry_price)}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-xs text-gray-500">Stop</span>
+                <span className="text-sm font-mono text-red-400">{formatPrice(tradeSetup.stop_loss)}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-xs text-gray-500">Target</span>
+                <span className="text-sm font-mono text-emerald-400">{formatPrice(tradeSetup.target)}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-xs text-gray-500">R:R</span>
+                <span className="text-sm font-semibold text-gray-200">{tradeSetup.rr_ratio.toFixed(2)}</span>
+              </div>
+            </div>
+          </div>
+        </section>
+      )}
+
       {/* Scores + Side Panels */}
       <div className="grid gap-6 lg:grid-cols-3">
         <section>
@@ -193,7 +246,7 @@ export default function TickerDetailPage() {
             <SectionError message={scores.error instanceof Error ? scores.error.message : 'Failed to load scores'} onRetry={() => scores.refetch()} />
           )}
           {scores.data && (
-            <ScoreCard compositeScore={scores.data.composite_score} dimensions={scores.data.dimensions.map((d) => ({ dimension: d.dimension, score: d.score }))} />
+            <ScoreCard compositeScore={scores.data.composite_score} dimensions={scores.data.dimensions} compositeBreakdown={scores.data.composite_breakdown} />
           )}
         </section>