Add interactive demo trade chart with draggable lines

crypto_ui/terminal.html

@@ -6,6 +6,7 @@
 <title>Kronos — Demo Terminal</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<script src="https://unpkg.com/lightweight-charts@4.2.3/dist/lightweight-charts.standalone.production.js"></script>
 <style>
   /* ===== design tokens (matches tracker.html) ===== */
   :root {
@@ -270,6 +271,7 @@
 <div class="main">
   <!-- LEFT: Positions -->
   <div class="col-left">
+    <div id="chartWrap" style="height:350px;width:100%;margin-bottom:18px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--panel);display:none;position:relative"></div>
     <div class="pos-grid" id="posGrid"></div>
     <div id="empty">
       <div class="big">No demo positions</div>
@@ -281,7 +283,10 @@
   <div class="col-right">
     <!-- New Trade Form -->
     <div class="panel-card">
-      <div class="panel-title">Execute Trade</div>
+      <div class="panel-title" style="display:flex;justify-content:space-between;align-items:center">
+        Execute Trade
+        <button type="button" class="btn-dim" style="margin:0;border-color:var(--accent);color:var(--text);background:rgba(139,92,246,.1)" onclick="loadDemoTrade()">✨ Load Demo Trade</button>
+      </div>
       <form id="tradeForm" autocomplete="off" onsubmit="return executeTrade(event)">
         <div class="form-group">
           <label>Symbol</label>
@@ -390,9 +395,9 @@ function setDir(dir) {
   calcRR();
 }
 
-/* ===== live R:R calculation ===== */
+/* ===== live R:R calculation & chart sync ===== */
 ['fEntry','fStop','fTP1'].forEach(id => {
-  document.getElementById(id).addEventListener('input', calcRR);
+  document.getElementById(id).addEventListener('input', () => { calcRR(); syncChartLines(); });
 });
 
 function calcRR() {
@@ -683,6 +688,120 @@ function renderLog() {
   list.scrollTop = list.scrollHeight;
 }
 
+/* ===== Interactive Chart & Demo Setup ===== */
+let chart, candleSeries;
+let entryLine, stopLine, tpLine;
+let draggingLine = null; // 'entry', 'stop', or 'tp'
+let lastPrice = 0;
+
+function initChart() {
+  if (chart) return;
+  $('#chartWrap').style.display = 'block';
+  chart = LightweightCharts.createChart($('#chartWrap'), {
+    layout: { background: { color: '#10121a' }, textColor: '#767d96' },
+    grid: { vertLines: { color: 'rgba(27,30,42,0.5)' }, horzLines: { color: 'rgba(27,30,42,0.5)' } },
+    crosshair: { mode: 0 },
+    rightPriceScale: { borderColor: '#1b1e2a' },
+    timeScale: { borderColor: '#1b1e2a', timeVisible: true }
+  });
+  
+  candleSeries = chart.addCandlestickSeries({
+    upColor: '#16c784', downColor: '#ea3943', borderVisible: false,
+    wickUpColor: '#16c784', wickDownColor: '#ea3943'
+  });
+
+  // Setup drag interaction using subscribeCrosshairMove and mousedown/up
+  const container = $('#chartWrap');
+  let isMousedown = false;
+  
+  container.addEventListener('mousedown', () => { isMousedown = true; });
+  container.addEventListener('mouseup', () => { isMousedown = false; draggingLine = null; calcRR(); });
+  container.addEventListener('mouseleave', () => { isMousedown = false; draggingLine = null; calcRR(); });
+
+  chart.subscribeCrosshairMove(param => {
+    if (!param.point || !param.price) return;
+    const p = param.price;
+    
+    // Determine which line to drag on mousedown
+    if (isMousedown && !draggingLine) {
+      const ePrice = parseFloat($('#fEntry').value) || 0;
+      const sPrice = parseFloat($('#fStop').value) || 0;
+      const tPrice = parseFloat($('#fTP1').value) || 0;
+      
+      // Calculate distances in pixels to make it easier to grab
+      const yClick = param.point.y;
+      const yEntry = candleSeries.priceToCoordinate(ePrice);
+      const yStop = candleSeries.priceToCoordinate(sPrice);
+      const yTP = candleSeries.priceToCoordinate(tPrice);
+      
+      let closest = null;
+      let minD = 20; // 20px grab radius
+      
+      if (yEntry && Math.abs(yClick - yEntry) < minD) { closest = 'entry'; minD = Math.abs(yClick - yEntry); }
+      if (yStop && Math.abs(yClick - yStop) < minD) { closest = 'stop'; minD = Math.abs(yClick - yStop); }
+      if (yTP && Math.abs(yClick - yTP) < minD) { closest = 'tp'; minD = Math.abs(yClick - yTP); }
+      
+      draggingLine = closest;
+    }
+    
+    if (draggingLine) {
+      if (draggingLine === 'entry') { $('#fEntry').value = Number(p).toFixed(2); entryLine.applyOptions({ price: p }); }
+      if (draggingLine === 'stop') { $('#fStop').value = Number(p).toFixed(2); stopLine.applyOptions({ price: p }); }
+      if (draggingLine === 'tp') { $('#fTP1').value = Number(p).toFixed(2); tpLine.applyOptions({ price: p }); }
+      // Don't calcRR on every tick to save perf, do it on mouseup
+    }
+  });
+}
+
+function syncChartLines() {
+  if (!chart || !candleSeries) return;
+  const ePrice = parseFloat($('#fEntry').value) || 0;
+  const sPrice = parseFloat($('#fStop').value) || 0;
+  const tPrice = parseFloat($('#fTP1').value) || 0;
+  
+  if (entryLine) candleSeries.removePriceLine(entryLine);
+  if (stopLine) candleSeries.removePriceLine(stopLine);
+  if (tpLine) candleSeries.removePriceLine(tpLine);
+  
+  if (ePrice) entryLine = candleSeries.createPriceLine({ price: ePrice, color: '#e8eaf2', lineWidth: 2, lineStyle: 0, title: 'Entry (drag)' });
+  if (sPrice) stopLine = candleSeries.createPriceLine({ price: sPrice, color: '#ea3943', lineWidth: 2, lineStyle: 0, title: 'Stop' });
+  if (tPrice) tpLine = candleSeries.createPriceLine({ price: tPrice, color: '#16c784', lineWidth: 2, lineStyle: 0, title: 'TP1' });
+}
+
+async function loadDemoTrade() {
+  $('#fSym').value = 'BTCUSDT';
+  $('#fProvider').value = 'binance';
+  
+  // Fetch current price to populate realistic demo targets
+  initChart();
+  try {
+    const r = await fetch('/api/klines?provider=binance&symbol=BTCUSDT&interval=15m');
+    const data = await r.json();
+    if (data.klines && data.klines.length) {
+      candleSeries.setData(data.klines.map(k => ({
+        time: k.time / 1000, open: k.open, high: k.high, low: k.low, close: k.close
+      })));
+      lastPrice = data.klines[data.klines.length - 1].close;
+      
+      // Populate form (Long by default)
+      setDir('long');
+      $('#fEntry').value = lastPrice.toFixed(2);
+      $('#fStop').value = (lastPrice * 0.985).toFixed(2); // -1.5%
+      $('#fTP1').value = (lastPrice * 1.035).toFixed(2);  // +3.5% (approx 2.3 R:R)
+      $('#fLev').value = '5';
+      $('#fQty').value = '0.5';
+      
+      calcRR();
+      syncChartLines();
+      
+      // Auto-scale chart to fit the trade setup
+      setTimeout(() => { chart.timeScale().fitContent(); }, 100);
+    }
+  } catch (err) {
+    console.error('Failed to load chart data:', err);
+  }
+}
+
 /* ===== init ===== */
 (async function init() {
   await poll();