Surface current price; flag stale setups; declutter chart

Triggered by MRK: entry 113 shown with no current price (actually ~119).

- Ticker header shows last close + day change % + "last close · Nd ago"
  (the age reveals OHLCV collection lag — why entry looked off)
- Setup cards show Current price and entry drift; flag setups as
  stale (price moved >1/3 toward target) or invalidated (past stop)
- Chart: draw only nearest support below + nearest resistance above
  current price, plus a prominent "Now" price line (full S/R stays in
  the S/R tab)
- Chart overlay is selectable (Auto/Long/Short/None) — only the chosen
  setup's entry/stop/target render, instead of everything at once

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/pages/TickerDetailPage.tsx

@@ -121,12 +121,30 @@ export default function TickerDetailPage() {
     [setupsForSymbol],
   );
 
-  // Use the highest-confidence setup for chart overlay fallback.
-  const tradeSetup: TradeSetup | undefined = useMemo(() => {
+  // Current price = latest close, with day-over-day change
+  const priceInfo = useMemo(() => {
+    const bars = ohlcv.data;
+    if (!bars || bars.length === 0) return null;
+    const last = bars[bars.length - 1];
+    const prev = bars.length > 1 ? bars[bars.length - 2] : null;
+    const change = prev && prev.close ? ((last.close - prev.close) / prev.close) * 100 : null;
+    return { price: last.close, date: last.date, change };
+  }, [ohlcv.data]);
+
+  // Which setup the chart overlays. 'auto' = the ticker's preferred direction.
+  const [overlayChoice, setOverlayChoice] = useState<'auto' | 'long' | 'short' | 'none'>('auto');
+
+  const action = (longSetup ?? shortSetup)?.recommended_action ?? null;
+  const overlaySetup: TradeSetup | undefined = useMemo(() => {
+    if (overlayChoice === 'none') return undefined;
+    if (overlayChoice === 'long') return longSetup;
+    if (overlayChoice === 'short') return shortSetup;
+    // auto: preferred direction's setup, else the highest-confidence available
+    if (action?.startsWith('LONG') && longSetup) return longSetup;
+    if (action?.startsWith('SHORT') && shortSetup) return shortSetup;
     const candidates = [longSetup, shortSetup].filter(Boolean) as TradeSetup[];
-    if (candidates.length === 0) return undefined;
     return candidates.sort((a, b) => (b.confidence_score ?? 0) - (a.confidence_score ?? 0))[0];
-  }, [longSetup, shortSetup]);
+  }, [overlayChoice, longSetup, shortSetup, action]);
 
   // Sort visible S/R levels by strength for the table (only levels within chart zones)
   const sortedLevels = useMemo(() => {
@@ -138,9 +156,19 @@ export default function TickerDetailPage() {
     <div className="space-y-6 animate-slide-up">
       {/* Header */}
       <div className="flex flex-wrap items-center justify-between gap-4">
-        <div>
+        <div className="flex items-baseline gap-4">
           <h1 className="text-3xl font-semibold text-gray-100">{symbol.toUpperCase()}</h1>
-          <p className="text-sm text-gray-500 mt-0.5">Ticker Detail</p>
+          {priceInfo && (
+            <div className="flex items-baseline gap-2">
+              <span className="num text-2xl font-semibold text-gray-100">{formatPrice(priceInfo.price)}</span>
+              {priceInfo.change !== null && (
+                <span className={`num text-sm font-medium ${priceInfo.change >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
+                  {priceInfo.change >= 0 ? '+' : ''}{priceInfo.change.toFixed(2)}%
+                </span>
+              )}
+              <span className="text-xs text-gray-500">last close · {timeAgo(priceInfo.date)}</span>
+            </div>
+          )}
         </div>
         <Button onClick={() => ingestion.mutate(symbol)} loading={ingestion.isPending}>
           {ingestion.isPending ? 'Fetching…' : 'Fetch Data'}
@@ -150,7 +178,12 @@ export default function TickerDetailPage() {
       {/* Data freshness bar */}
       <DataFreshnessBar items={dataStatus} />
 
-      <RecommendationPanel symbol={symbol} longSetup={longSetup} shortSetup={shortSetup} />
+      <RecommendationPanel
+        symbol={symbol}
+        longSetup={longSetup}
+        shortSetup={shortSetup}
+        currentPrice={priceInfo?.price}
+      />
 
       {/* Chart — always visible */}
       <Section title="Price Chart">
@@ -162,11 +195,46 @@ export default function TickerDetailPage() {
           />
         )}
         {ohlcv.data && (
-          <div className="glass p-5">
-            <CandlestickChart data={ohlcv.data} srLevels={srLevels.data?.levels} zones={srLevels.data?.zones} tradeSetup={tradeSetup} />
-            {srLevels.isError && (
-              <p className="mt-2 text-xs text-amber-500/80">S/R levels unavailable — chart shown without overlays</p>
+          <div className="glass p-5 space-y-3">
+            {(longSetup || shortSetup) && (
+              <div className="flex flex-wrap items-center gap-2 text-xs">
+                <span className="text-gray-500">Overlay setup:</span>
+                {([
+                  { key: 'auto', label: 'Auto', show: true },
+                  { key: 'long', label: 'Long', show: !!longSetup },
+                  { key: 'short', label: 'Short', show: !!shortSetup },
+                  { key: 'none', label: 'None', show: true },
+                ] as const).filter((o) => o.show).map((o) => (
+                  <button
+                    key={o.key}
+                    onClick={() => setOverlayChoice(o.key)}
+                    className={`rounded-md px-2.5 py-1 transition-colors ${
+                      overlayChoice === o.key
+                        ? 'bg-blue-400/15 text-blue-200 border border-blue-400/30'
+                        : 'text-gray-400 border border-white/[0.08] hover:text-gray-200 hover:bg-white/[0.04]'
+                    }`}
+                  >
+                    {o.label}
+                  </button>
+                ))}
+                {overlaySetup && (
+                  <span className="num ml-1 text-gray-500">
+                    showing {overlaySetup.direction.toUpperCase()} · entry {formatPrice(overlaySetup.entry_price)} → target {formatPrice(overlaySetup.target)}
+                  </span>
+                )}
+              </div>
             )}
+            <CandlestickChart
+              data={ohlcv.data}
+              srLevels={srLevels.data?.levels}
+              zones={srLevels.data?.zones}
+              tradeSetup={overlaySetup}
+              currentPrice={priceInfo?.price}
+            />
+            <p className="text-[11px] text-gray-500">
+              Only the nearest support &amp; resistance are drawn. Full list in the S/R Levels tab.
+              {srLevels.isError && ' S/R levels unavailable.'}
+            </p>
           </div>
         )}
       </Section>