Add GTL price-traffic chart diagnostic

frontend/src/pages/TickerDetailPage.tsx

@@ -120,8 +120,17 @@ function DataFreshnessBar({
 
 export default function TickerDetailPage() {
   const { symbol = '' } = useParams<{ symbol: string }>();
+  const [showGateTraffic, setShowGateTraffic] = useState(false);
   const companyName = useTickerNames().get(symbol.toUpperCase());
-  const { ohlcv, scores, srLevels, sentiment, fundamentals, trades } = useTickerDetail(symbol);
+  const {
+    ohlcv,
+    scores,
+    srLevels,
+    gateTargetLadder,
+    sentiment,
+    fundamentals,
+    trades,
+  } = useTickerDetail(symbol, showGateTraffic);
   const ingestion = useFetchSymbolData();
   const watchlist = useWatchlist();
   const addToWatchlist = useAddToWatchlist();
@@ -438,12 +447,19 @@ export default function TickerDetailPage() {
               data={ohlcv.data}
               srLevels={srLevels.data?.levels}
               zones={srLevels.data?.zones}
+              gateTargetLevels={gateTargetLadder.data?.levels}
+              gateTargetLookbackBars={gateTargetLadder.data?.lookback_bars}
+              gateTargetLoading={gateTargetLadder.isLoading && showGateTraffic}
+              gateTargetError={gateTargetLadder.isError}
+              showGateTraffic={showGateTraffic}
+              onShowGateTrafficChange={setShowGateTraffic}
               tradeSetup={overlayWithTarget}
               currentPrice={priceInfo?.price}
             />
             <p className="mt-2 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.'}
+              {gateTargetLadder.isError && ' GTL diagnostic unavailable.'}
             </p>
           </>
         )}