cryptomon/internal/web/static/app.js

(function () {
  "use strict";

  var body = document.body;
  var tabbar = document.getElementById("tabbar");
  var panels = document.getElementById("tab-panels");
  var chartRangeState = {}; // targetKey -> last-picked range, survives panel refresh
  var chartModeState = {}; // targetKey -> "simple" | "advanced"
  var baseCurrencySymbol = body.dataset.currencySymbol || "";
  var pollMs = (parseInt(body.dataset.poll, 10) || 60) * 1000;

  // ---------------------------------------------------------------------
  // Formatting (mirrors internal/web/format.go closely enough for live ticks)
  // ---------------------------------------------------------------------

  function fmtMoney(v) {
    var neg = v < 0;
    if (neg) v = -v;
    var s = v.toFixed(2);
    var parts = s.split(".");
    var intPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return (neg ? "-" : "") + baseCurrencySymbol + intPart + "." + parts[1];
  }

  function signClass(v) {
    return v > 0 ? "gain" : v < 0 ? "loss" : "flat";
  }

  function flash(el) {
    el.classList.remove("flash");
    void el.offsetWidth;
    el.classList.add("flash");
  }

  // ---------------------------------------------------------------------
  // Kraken public WebSocket v2 — live ticker for price/value/P&L, purely a
  // between-poll smoothing layer. REST panel refresh remains the source of
  // truth for deltas, charts, and everything else.
  // ---------------------------------------------------------------------

  var wsSocket = null;
  var wsSubscribers = {}; // symbol -> [callback, ...]
  var lastTickAt = {}; // symbol -> ms, throttles DOM writes to ~1/sec

  function sendSubscribe(symbols) {
    if (wsSocket && wsSocket.readyState === 1 && symbols.length) {
      wsSocket.send(JSON.stringify({ method: "subscribe", params: { channel: "ticker", symbol: symbols } }));
    }
  }

  function ensureWebSocket() {
    if (wsSocket && (wsSocket.readyState === 0 || wsSocket.readyState === 1)) return wsSocket;
    try {
      wsSocket = new WebSocket("wss://ws.kraken.com/v2");
    } catch (e) {
      return null;
    }
    wsSocket.addEventListener("open", function () {
      sendSubscribe(Object.keys(wsSubscribers));
    });
    wsSocket.addEventListener("message", function (e) {
      var msg;
      try { msg = JSON.parse(e.data); } catch (err) { return; }
      if (msg.channel !== "ticker" || !msg.data) return;
      msg.data.forEach(function (tick) {
        var callbacks = wsSubscribers[tick.symbol];
        if (!callbacks || typeof tick.last !== "number") return;
        var now = Date.now();
        if (lastTickAt[tick.symbol] && now - lastTickAt[tick.symbol] < 1000) return;
        lastTickAt[tick.symbol] = now;
        callbacks.forEach(function (cb) { cb(tick.last); });
      });
    });
    wsSocket.addEventListener("close", function () {
      wsSocket = null;
      setTimeout(ensureWebSocket, 4000);
    });
    wsSocket.addEventListener("error", function () {
      try { wsSocket.close(); } catch (e) { /* ignore */ }
    });
    return wsSocket;
  }

  function subscribeTicker(symbol, callback) {
    if (!symbol) return;
    var isNew = !wsSubscribers[symbol] || wsSubscribers[symbol].length === 0;
    if (!wsSubscribers[symbol]) wsSubscribers[symbol] = [];
    wsSubscribers[symbol].push(callback);
    var ws = ensureWebSocket();
    if (isNew && ws && ws.readyState === 1) sendSubscribe([symbol]);
  }

  function wireLiveTicker(root) {
    // Dashboard rows: live price/value/P&L per currency.
    root.querySelectorAll("tr[data-ws-symbol]").forEach(function (tr) {
      var symbol = tr.dataset.wsSymbol;
      var holdings = parseFloat(tr.dataset.holdings) || 0;
      var cost = parseFloat(tr.dataset.cost) || 0;
      var fxRate = parseFloat(tr.dataset.fxRate) || 1;
      var priceCell = tr.querySelector('[data-field="price"]');
      var valueCell = tr.querySelector('[data-field="value"]');
      var plCell = tr.querySelector('[data-field="pl"]');

      subscribeTicker(symbol, function (last) {
        var price = last * fxRate;
        var value = holdings * price;
        if (priceCell) priceCell.textContent = fmtMoney(price);
        if (valueCell) valueCell.textContent = fmtMoney(value);
        if (plCell) {
          var pl = value - cost;
          plCell.textContent = fmtMoney(pl);
          plCell.classList.remove("gain", "loss", "flat");
          plCell.classList.add(signClass(pl));
        }
        flash(tr);
      });
    });

    // Position page hero: single currency, live value/P&L.
    var hero = root.querySelector("[data-ws-hero]");
    if (hero) {
      var symbol = hero.dataset.wsHero;
      var holdings = parseFloat(hero.dataset.holdings) || 0;
      var cost = parseFloat(hero.dataset.cost) || 0;
      var fxRate = parseFloat(hero.dataset.fxRate) || 1;
      var valueEl = hero.querySelector('[data-field="hero-value"]');
      var plEl = hero.querySelector('[data-field="hero-pl"]');
      subscribeTicker(symbol, function (last) {
        var value = holdings * last * fxRate;
        var pl = value - cost;
        if (valueEl) valueEl.textContent = fmtMoney(value);
        if (plEl) {
          var pct = cost ? (pl / cost * 100) : 0;
          var sign = pct >= 0 ? "+" : "";
          plEl.textContent = fmtMoney(pl) + " (" + sign + pct.toFixed(2) + "%)";
          plEl.classList.remove("gain", "loss", "flat");
          plEl.classList.add(signClass(pl));
        }
        flash(hero);
      });
    }
  }

  // Topbar portfolio total: lives in base.html outside any tab panel, so it
  // is wired once here (not per-panel) and stays live across every page.
  // Server-rendered value is the initial paint; /api/summary refresh (every
  // poll cycle) keeps holdings/cost authoritative, and Kraken WS ticks
  // smooth the value in between polls.
  function initTopbar() {
    var valueEl = document.querySelector('[data-field="topbar-value"]');
    var plEl = document.querySelector('[data-field="topbar-pl"]');
    var wrap = document.querySelector('[data-topbar]') || (valueEl && valueEl.closest(".topbar-total"));
    if (!valueEl) return;

    var positions = []; // {symbol, holdings, cost, fxRate, value}
    var subscribed = {}; // ws symbol -> true, so refresh() never double-subscribes

    function render() {
      var total = 0, cost = 0;
      positions.forEach(function (p) { total += p.value; cost += p.cost; });
      var pl = total - cost;
      var pct = cost ? (pl / cost * 100) : 0;
      var sign = pct >= 0 ? "+" : "";
      valueEl.textContent = fmtMoney(total);
      if (plEl) {
        plEl.textContent = fmtMoney(pl) + " (" + sign + pct.toFixed(2) + "%)";
        plEl.classList.remove("gain", "loss", "flat");
        plEl.classList.add(signClass(pl));
      }
    }

    function refresh() {
      fetch("/api/summary").then(function (r) { return r.json(); }).then(function (data) {
        positions = (data.positions || []).map(function (p) {
          return { symbol: p.ws_symbol, holdings: p.holdings, cost: p.cost, fxRate: p.fx_rate, value: p.value };
        });
        render();
        positions.forEach(function (p) {
          if (!p.symbol || subscribed[p.symbol]) return;
          subscribed[p.symbol] = true;
          subscribeTicker(p.symbol, function (last) {
            positions.forEach(function (q) {
              if (q.symbol === p.symbol) q.value = q.holdings * last * q.fxRate;
            });
            render();
            if (wrap) flash(wrap);
          });
        });
      }).catch(function () { /* transient error: keep last known values */ });
    }

    refresh();
    setInterval(refresh, pollMs);
  }

  function initPanel(root) {
    root.querySelectorAll(".chart-controls").forEach(function (controls) {
      var kind = controls.dataset.chart; // "portfolio" | "currency"
      var currency = controls.dataset.currency;
      var targetKey = kind === "portfolio" ? "portfolio" : "currency:" + currency;
      var svg = root.querySelector('[data-chart-target="' + targetKey + '"]');
      var emptyEl = root.querySelector('[data-chart-empty="' + targetKey + '"]');
      var captionEl = root.querySelector('[data-chart-caption="' + targetKey + '"]');
      if (!svg) return;
      var symbol = svg.dataset.symbol || "";
      if (emptyEl && emptyEl.dataset.defaultText === undefined) {
        emptyEl.dataset.defaultText = emptyEl.textContent;
      }

      var load = function (range) {
        chartRangeState[targetKey] = range;
        var url = kind === "portfolio"
          ? "/api/chart/portfolio?range=" + range
          : "/api/chart/currency/" + encodeURIComponent(currency) + "?range=" + range;
        fetchJSON(targetKey, url).then(function (points) {
          if (points === STALE) return;
          renderChart(svg, emptyEl, captionEl, points, symbol);
        }).catch(function (err) {
          showChartError(svg, emptyEl, captionEl, err);
        });
      };

      controls.querySelectorAll("button[data-range]").forEach(function (btn) {
        btn.addEventListener("click", function () {
          controls.querySelectorAll("button").forEach(function (b) { b.classList.remove("active"); });
          btn.classList.add("active");
          load(btn.dataset.range);
        });
      });

      var savedRange = chartRangeState[targetKey] || "all";
      controls.querySelectorAll("button[data-range]").forEach(function (b) {
        b.classList.toggle("active", b.dataset.range === savedRange);
      });
      load(savedRange);
    });

    initAdvancedCharts(root);
    initSortableTables(root);
    wireLiveTicker(root);
  }

  // ---------------------------------------------------------------------
  // Shared fetch helper for chart/candle data: turns a non-2xx response
  // into a real error (so a rate-limit or server error surfaces instead of
  // silently failing to parse as JSON), and drops out-of-order responses
  // when the user switches timeframes faster than requests return.
  // ---------------------------------------------------------------------

  var STALE = {};
  var requestToken = {};

  function fetchJSON(key, url) {
    var token = (requestToken[key] = (requestToken[key] || 0) + 1);
    return fetch(url).then(function (r) {
      if (!r.ok) return r.text().then(function (t) { throw new Error(t || ("HTTP " + r.status)); });
      return r.json();
    }).then(function (data) {
      return requestToken[key] === token ? data : STALE;
    }, function (err) {
      if (requestToken[key] !== token) return STALE;
      throw err;
    });
  }

  function friendlyChartError(err) {
    var msg = String((err && err.message) || err);
    if (msg.indexOf("Too many requests") !== -1) {
      return "Kraken rate-limited this request — it'll work again in a moment.";
    }
    return "Couldn't load chart data right now — try again shortly.";
  }

  function showChartError(svg, emptyEl, captionEl, err) {
    svg.hidden = true;
    if (emptyEl) {
      emptyEl.hidden = false;
      emptyEl.textContent = friendlyChartError(err);
    }
    if (captionEl) captionEl.textContent = "";
  }

  var svgns = "http://www.w3.org/2000/svg";

  function fmtAxisDate(unixSeconds, spanSeconds) {
    var d = new Date(unixSeconds * 1000);
    if (spanSeconds > 400 * 24 * 3600) return d.toLocaleDateString(undefined, { month: "short", year: "2-digit" });
    if (spanSeconds > 3 * 24 * 3600) return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
    return d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
  }

  function fmtAxisValue(v, symbol) {
    var sign = v < 0 ? "-" : "";
    var abs = Math.abs(v);
    var s = abs >= 1000 ? (abs / 1000).toFixed(1) + "k" : abs.toFixed(abs < 10 ? 4 : 2);
    return sign + symbol + s;
  }

  function svgEl(tag, attrs) {
    var el = document.createElementNS(svgns, tag);
    for (var k in attrs) el.setAttribute(k, attrs[k]);
    return el;
  }

  // Picks up to targetCount tick indices, evenly spaced by TIME (not by
  // array index — data can have irregular gaps, e.g. after a restart),
  // then drops any tick that lands within minPxGap of the previous one so
  // labels never overlap on dense data. xAtIndex(i) must return that
  // point's pixel x position.
  function pickTicks(points, targetCount, minPxGap, xAtIndex) {
    var t0 = points[0].t, t1 = points[points.length - 1].t;
    var span = t1 - t0 || 1;
    var chosen = [];
    var lastX = -Infinity;
    for (var i = 0; i < targetCount; i++) {
      var targetT = t0 + (i / (targetCount - 1 || 1)) * span;
      var best = 0, bestDiff = Infinity;
      for (var j = 0; j < points.length; j++) {
        var diff = Math.abs(points[j].t - targetT);
        if (diff < bestDiff) { bestDiff = diff; best = j; }
      }
      var x = xAtIndex(best);
      if (x - lastX < minPxGap) continue;
      chosen.push(best);
      lastX = x;
    }
    return chosen;
  }

  function renderChart(svg, emptyEl, captionEl, points, symbol) {
    while (svg.firstChild) svg.removeChild(svg.firstChild);
    if (!points || points.length < 2) {
      if (emptyEl) {
        emptyEl.hidden = false;
        emptyEl.textContent = emptyEl.dataset.defaultText || emptyEl.textContent;
      }
      if (captionEl) captionEl.textContent = "";
      svg.hidden = true;
      return;
    }
    if (emptyEl) emptyEl.hidden = true;
    svg.hidden = false;

    var W = 600, H = 220, ML = 68, MR = 12, MT = 12, MB = 26;
    var plotW = W - ML - MR, plotH = H - MT - MB;
    svg.setAttribute("viewBox", "0 0 " + W + " " + H);

    var values = points.map(function (p) { return p.v; });
    var min = Math.min.apply(null, values), max = Math.max.apply(null, values);
    var range = (max - min) || Math.abs(max) || 1;
    var t0 = points[0].t, t1 = points[points.length - 1].t;
    var tSpan = (t1 - t0) || 1;

    function xAt(t) { return ML + ((t - t0) / tSpan) * plotW; }
    function yAt(v) { return MT + (1 - (v - min) / range) * plotH; }

    // Y gridlines + value labels (min, mid, max)
    [min, (min + max) / 2, max].forEach(function (v) {
      var y = yAt(v);
      svg.appendChild(svgEl("line", { x1: ML, x2: W - MR, y1: y, y2: y, class: "chart-grid" }));
      var text = svgEl("text", { x: ML - 8, y: y, class: "chart-axis-label chart-axis-y" });
      text.textContent = fmtAxisValue(v, symbol);
      svg.appendChild(text);
    });

    // X-axis date labels: evenly spaced by time, collision-avoided.
    pickTicks(points, 5, 70, function (i) { return xAt(points[i].t); }).forEach(function (idx) {
      var p = points[idx];
      var text = svgEl("text", { x: xAt(p.t), y: H - 6, class: "chart-axis-label chart-axis-x" });
      text.textContent = fmtAxisDate(p.t, tSpan);
      svg.appendChild(text);
    });

    // Price/value line
    var coords = points.map(function (p) { return xAt(p.t).toFixed(2) + "," + yAt(p.v).toFixed(2); });
    var poly = svgEl("polyline", { points: coords.join(" ") });
    var trend = values[values.length - 1] === values[0] ? "flat" : (values[values.length - 1] > values[0] ? "gain" : "loss");
    poly.setAttribute("class", "chart-line " + trend);
    svg.appendChild(poly);

    // Issue transparency: when a range shows the exact same span as "all"
    // available history, a shorter timeframe looks identical — say why.
    if (captionEl) {
      var spanDays = tSpan / 86400;
      var first = new Date(t0 * 1000).toLocaleDateString();
      var last = new Date(t1 * 1000).toLocaleDateString();
      captionEl.textContent = spanDays < 1
        ? "Showing all recorded history (tracking started " + first + ") — longer ranges will look different once more history builds up."
        : "Showing " + first + " – " + last;
    }
  }

  var sortState = {}; // sortKey -> {key, dir}

  function cellSortValue(row, colIndex) {
    var cell = row.children[colIndex];
    if (!cell) return "";
    if (cell.dataset.sortValue !== undefined) {
      if (cell.dataset.sortValue === "") return -Infinity;
      var n = parseFloat(cell.dataset.sortValue);
      return isNaN(n) ? -Infinity : n;
    }
    return cell.textContent.trim().toLowerCase();
  }

  function initSortableTables(root) {
    root.querySelectorAll("table.sortable[data-sort-key]").forEach(function (table) {
      var sortKey = table.dataset.sortKey;
      var tbody = table.querySelector("tbody");
      if (!tbody) return;

      function applySort(colKey, dir) {
        var colIndex = -1;
        table.querySelectorAll("th[data-sort]").forEach(function (th) {
          th.classList.remove("sort-asc", "sort-desc");
          if (th.dataset.sort === colKey) {
            colIndex = Array.prototype.indexOf.call(th.parentElement.children, th);
            th.classList.add(dir === 1 ? "sort-asc" : "sort-desc");
          }
        });
        if (colIndex === -1) return;
        var rows = Array.prototype.slice.call(tbody.querySelectorAll("tr"));
        rows.sort(function (a, b) {
          var av = cellSortValue(a, colIndex), bv = cellSortValue(b, colIndex);
          if (av < bv) return -1 * dir;
          if (av > bv) return 1 * dir;
          return 0;
        });
        rows.forEach(function (r) { tbody.appendChild(r); });
      }

      table.querySelectorAll("th[data-sort]").forEach(function (th) {
        th.addEventListener("click", function () {
          var key = th.dataset.sort;
          var prev = sortState[sortKey];
          var dir = prev && prev.key === key ? prev.dir * -1 : 1;
          sortState[sortKey] = { key: key, dir: dir };
          applySort(key, dir);
        });
      });

      var saved = sortState[sortKey];
      if (saved) applySort(saved.key, saved.dir);
    });
  }

  // ---------------------------------------------------------------------
  // Advanced chart: candlesticks + Bollinger Bands + RSI
  // ---------------------------------------------------------------------

  function initAdvancedCharts(root) {
    root.querySelectorAll("[data-advanced-chart]").forEach(function (wrap) {
      var currency = wrap.dataset.currency;
      var targetKey = "currency:" + currency;
      var simpleEls = wrap.querySelectorAll("[data-chart-simple]");
      var advancedWrap = wrap.querySelector("[data-chart-advanced]");
      var priceSvg = wrap.querySelector("[data-candle-price]");
      var rsiSvg = wrap.querySelector("[data-candle-rsi]");
      var candleEmptyEl = wrap.querySelector("[data-candle-empty]");
      var toggle = wrap.querySelector("[data-chart-mode-toggle]");
      var rangeControls = wrap.querySelector(".chart-controls");
      if (!toggle || !advancedWrap) return;

      function setMode(mode) {
        chartModeState[targetKey] = mode;
        var advanced = mode === "advanced";
        advancedWrap.hidden = !advanced;
        simpleEls.forEach(function (el) { el.hidden = advanced; });
        toggle.textContent = advanced ? "Simple view" : "Advanced view";
        if (advanced) loadCandles();
      }

      function currentRange() {
        var active = rangeControls && rangeControls.querySelector("button.active");
        return active ? active.dataset.range : "all";
      }

      function loadCandles() {
        var candleKey = "candles:" + currency;
        fetchJSON(candleKey, "/api/candles/" + encodeURIComponent(currency) + "?range=" + currentRange())
          .then(function (series) {
            if (series === STALE) return;
            if (candleEmptyEl) candleEmptyEl.hidden = true;
            priceSvg.hidden = false;
            renderCandles(priceSvg, rsiSvg, series);
          })
          .catch(function (err) { showChartError(priceSvg, candleEmptyEl, null, err); });
      }

      toggle.addEventListener("click", function () {
        setMode(chartModeState[targetKey] === "advanced" ? "simple" : "advanced");
      });
      if (rangeControls) {
        rangeControls.querySelectorAll("button[data-range]").forEach(function (btn) {
          btn.addEventListener("click", function () {
            if (chartModeState[targetKey] === "advanced") loadCandles();
          });
        });
      }

      setMode(chartModeState[targetKey] === "advanced" ? "advanced" : "simple");
    });
  }

  function sma(values, period, idx) {
    if (idx + 1 < period) return null;
    var sum = 0;
    for (var i = idx + 1 - period; i <= idx; i++) sum += values[i];
    return sum / period;
  }

  function renderCandles(priceSvg, rsiSvg, series) {
    if (!priceSvg) return;
    while (priceSvg.firstChild) priceSvg.removeChild(priceSvg.firstChild);
    if (rsiSvg) while (rsiSvg.firstChild) rsiSvg.removeChild(rsiSvg.firstChild);

    var candles = series && series.candles ? series.candles : [];
    if (candles.length < 2) return;

    var W = 600, PH = 260, ML = 56, MR = 12, MT = 10, MB = 4;
    var plotW = W - ML - MR, plotH = PH - MT - MB;
    priceSvg.setAttribute("viewBox", "0 0 " + W + " " + PH);

    var lows = candles.map(function (c) { return c.l; });
    var highs = candles.map(function (c) { return c.h; });
    var bandVals = [];
    (series.bb_upper || []).forEach(function (v) { if (v !== null) bandVals.push(v); });
    (series.bb_lower || []).forEach(function (v) { if (v !== null) bandVals.push(v); });
    var min = Math.min.apply(null, lows.concat(bandVals.length ? bandVals : lows));
    var max = Math.max.apply(null, highs.concat(bandVals.length ? bandVals : highs));
    var range = (max - min) || 1;

    var t0 = candles[0].t, t1 = candles[candles.length - 1].t;
    var tSpan = (t1 - t0) || 1;
    var slot = plotW / candles.length;

    function xAt(i) { return ML + (i + 0.5) * slot; }
    function yAt(v) { return MT + (1 - (v - min) / range) * plotH; }

    [min, (min + max) / 2, max].forEach(function (v) {
      var y = yAt(v);
      priceSvg.appendChild(svgEl("line", { x1: ML, x2: W - MR, y1: y, y2: y, class: "chart-grid" }));
      var text = svgEl("text", { x: ML - 8, y: y, class: "chart-axis-label chart-axis-y" });
      text.textContent = fmtAxisValue(v, "");
      priceSvg.appendChild(text);
    });

    // Bollinger Bands band + lines. pathFor takes the y-scaler so it can be
    // reused for RSI below (0-100 scale) as well as price-scale series.
    function pathFor(arr, yFn) {
      var pts = [];
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] === null || arr[i] === undefined) continue;
        pts.push(xAt(i).toFixed(2) + "," + yFn(arr[i]).toFixed(2));
      }
      return pts;
    }
    var upperPts = pathFor(series.bb_upper || [], yAt);
    var lowerPts = pathFor(series.bb_lower || [], yAt);
    if (upperPts.length && lowerPts.length) {
      var band = svgEl("polygon", { points: upperPts.join(" ") + " " + lowerPts.slice().reverse().join(" "), class: "bb-band" });
      priceSvg.appendChild(band);
      priceSvg.appendChild(svgEl("polyline", { points: upperPts.join(" "), class: "bb-line" }));
      priceSvg.appendChild(svgEl("polyline", { points: lowerPts.join(" "), class: "bb-line" }));
    }
    var midPts = pathFor(series.bb_middle || [], yAt);
    if (midPts.length) priceSvg.appendChild(svgEl("polyline", { points: midPts.join(" "), class: "bb-mid" }));

    // Candlesticks
    candles.forEach(function (c, i) {
      var x = xAt(i);
      var up = c.c >= c.o;
      var cls = up ? "candle-up" : "candle-down";
      priceSvg.appendChild(svgEl("line", { x1: x, x2: x, y1: yAt(c.h), y2: yAt(c.l), class: "candle-wick " + cls }));
      var bodyTop = yAt(Math.max(c.o, c.c));
      var bodyH = Math.max(1, Math.abs(yAt(c.o) - yAt(c.c)));
      var bw = Math.max(1, slot * 0.6);
      priceSvg.appendChild(svgEl("rect", {
        x: (x - bw / 2).toFixed(2), y: bodyTop.toFixed(2),
        width: bw.toFixed(2), height: bodyH.toFixed(2), class: "candle-body " + cls,
      }));
    });

    // X-axis dates (shared scale with RSI below): evenly spaced by time,
    // collision-avoided.
    pickTicks(candles, 5, 70, xAt).forEach(function (idx) {
      var text = svgEl("text", { x: xAt(idx), y: PH - 6, class: "chart-axis-label chart-axis-x" });
      text.textContent = fmtAxisDate(candles[idx].t, tSpan);
      priceSvg.appendChild(text);
    });

    if (!rsiSvg) return;
    var RH = 90;
    rsiSvg.setAttribute("viewBox", "0 0 " + W + " " + RH);
    var rMT = 10, rMB = 20, rPlotH = RH - rMT - rMB;
    function ry(v) { return rMT + (1 - v / 100) * rPlotH; }
    [30, 50, 70].forEach(function (level) {
      var y = ry(level);
      rsiSvg.appendChild(svgEl("line", { x1: ML, x2: W - MR, y1: y, y2: y, class: "chart-grid" }));
      var text = svgEl("text", { x: ML - 8, y: y, class: "chart-axis-label chart-axis-y" });
      text.textContent = level;
      rsiSvg.appendChild(text);
    });
    var rsiPts = pathFor(series.rsi || [], ry);
    if (rsiPts.length) rsiSvg.appendChild(svgEl("polyline", { points: rsiPts.join(" "), class: "rsi-line" }));
  }

  // Favourite star toggle works on any page (delegated), independent of tabs.
  document.addEventListener("click", function (e) {
    var btn = e.target.closest("[data-favourite-toggle]");
    if (!btn) return;
    var currency = btn.dataset.currency;
    var next = btn.dataset.favourite;
    fetch("/api/favourite", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: "currency=" + encodeURIComponent(currency) + "&favourite=" + next,
    }).then(function () {
      if (typeof refreshPanel === "function") refreshPanel("portfolio");
    });
  });

  initTopbar();

  if (!tabbar || !panels) {
    // Settings page: no tab system, just wire up any charts on the page.
    initPanel(document);
    return;
  }

  var STORAGE_KEY = "basis:tabs";
  var FIXED_TABS = { portfolio: "Portfolio", transfers: "Transfers" };
  var page = body.dataset.page; // "portfolio" | "position" | "transfers"
  var current = body.dataset.current;

  function loadStoredTabs() {
    try {
      var raw = sessionStorage.getItem(STORAGE_KEY);
      return raw ? JSON.parse(raw) : [];
    } catch (e) {
      return [];
    }
  }
  function saveStoredTabs(tabs) {
    try { sessionStorage.setItem(STORAGE_KEY, JSON.stringify(tabs)); } catch (e) { /* ignore */ }
  }

  var openTabs = loadStoredTabs().filter(function (c) { return c !== current; });
  if (page === "position" && current) openTabs.push(current);
  saveStoredTabs(openTabs);

  var activeKey = page === "position" ? "pos:" + current : (FIXED_TABS[page] ? page : "portfolio");

  function panelKey(id) { return FIXED_TABS[id] ? id : "pos:" + id; }
  function panelURL(id) {
    if (id === "portfolio") return "/api/panel/portfolio";
    if (id === "transfers") return "/api/panel/transfers";
    return "/api/panel/position/" + encodeURIComponent(id);
  }
  function pageURL(id) {
    if (id === "portfolio") return "/";
    if (id === "transfers") return "/transfers";
    return "/position/" + encodeURIComponent(id);
  }

  function renderTabbar() {
    tabbar.innerHTML = "";
    function make(key, label, closable) {
      var btn = document.createElement("button");
      btn.type = "button";
      btn.className = "tab-btn" + (key === activeKey ? " active" : "");
      btn.setAttribute("role", "tab");
      var span = document.createElement("span");
      span.textContent = label;
      btn.appendChild(span);
      if (closable) {
        var close = document.createElement("span");
        close.className = "tab-close";
        close.textContent = "×";
        close.addEventListener("click", function (e) { e.stopPropagation(); closeTab(key); });
        btn.appendChild(close);
      }
      btn.addEventListener("click", function () {
        activateTab(FIXED_TABS[key] ? key : key.slice(4));
      });
      tabbar.appendChild(btn);
    }
    make("portfolio", "Portfolio", false);
    make("transfers", "Transfers", false);
    openTabs.forEach(function (c) { make("pos:" + c, c, true); });
  }

  function ensurePanel(id) {
    var key = panelKey(id);
    var el = panels.querySelector('[data-panel="' + key + '"]');
    if (el) return Promise.resolve(el);
    el = document.createElement("div");
    el.className = "tab-panel";
    el.dataset.panel = key;
    panels.appendChild(el);
    return fetch(panelURL(id)).then(function (r) { return r.text(); }).then(function (html) {
      el.innerHTML = html;
      initPanel(el);
      return el;
    });
  }

  function activateTab(id) {
    if (!FIXED_TABS[id] && openTabs.indexOf(id) === -1) {
      openTabs.push(id);
      saveStoredTabs(openTabs);
    }
    ensurePanel(id).then(function () {
      var key = panelKey(id);
      panels.querySelectorAll(".tab-panel").forEach(function (p) {
        p.classList.toggle("active", p.dataset.panel === key);
      });
      activeKey = key;
      renderTabbar();
      var url = pageURL(id);
      if (location.pathname !== url) history.pushState({ tab: id }, "", url);
    });
  }

  function closeTab(key) {
    var currency = key.slice(4);
    openTabs = openTabs.filter(function (c) { return c !== currency; });
    saveStoredTabs(openTabs);
    var el = panels.querySelector('[data-panel="' + key + '"]');
    if (el) el.remove();
    if (activeKey === key) {
      activateTab("portfolio");
    } else {
      renderTabbar();
    }
  }

  window.addEventListener("popstate", function () {
    var path = location.pathname;
    if (path === "/") { activateTab("portfolio"); return; }
    if (path === "/transfers") { activateTab("transfers"); return; }
    var m = path.match(/^\/position\/([^/]+)/);
    if (m) activateTab(decodeURIComponent(m[1]));
  });

  document.addEventListener("click", function (e) {
    var link = e.target.closest("[data-open-tab]");
    if (!link) return;
    e.preventDefault();
    activateTab(link.dataset.openTab);
  });

  function refreshPanel(id) {
    if (!panels) return;
    var key = panelKey(id);
    var el = panels.querySelector('[data-panel="' + key + '"]');
    if (!el) return;
    fetch(panelURL(id)).then(function (r) { return r.text(); }).then(function (html) {
      el.innerHTML = html;
      initPanel(el);
    });
  }

  setInterval(function () {
    var id = FIXED_TABS[activeKey] ? activeKey : activeKey.slice(4);
    refreshPanel(id);
  }, pollMs);

  // --- initial render: wire up what the server already sent down. Other
  // previously-open tabs are NOT pre-created here — ensurePanel() lazily
  // fetches them the first time they're actually activated, whether by
  // clicking their tab button or a currency link. (A prior version created
  // empty placeholder panels here, which made ensurePanel() think they were
  // already loaded and skip fetching — that's the "only the last tab has
  // data after refresh" bug.) ---
  renderTabbar();
  var initialPanel = panels.querySelector(".tab-panel.active");
  if (initialPanel) initPanel(initialPanel);
})();