desic-okx-agent 0.3.1 → 0.3.3

package/dist/report/chart-script.js

@@ -1,45 +1,183 @@
 /**
- * Hover readout for the equity chart.
+ * Interaction layer for the self-contained backtest observatory.
  *
- * Inlined into the report. It reads its data from a `data-series` attribute and
- * touches nothing but the two chart elements: no network, no storage, no globals
- * beyond one IIFE. That keeps the "opens offline, sends nothing" property of the
- * report intact while making individual values readable.
- *
- * Written as a plain string rather than compiled TypeScript so the report stays a
- * single self-contained file with no build step of its own.
+ * The report stays offline: this script reads only data embedded in the document
+ * and updates its SVG viewports, readouts, filters, and navigation in place.
  */
 export const CHART_SCRIPT = String.raw `
 (function () {
   var chart = document.getElementById("equity-chart");
   var drawdownChart = document.getElementById("drawdown-chart");
-  if (!chart) return;
+  var frame = document.querySelector(".observatory-frame");
+  var themeToggle = document.querySelector("[data-theme-toggle]");
+  if (themeToggle) {
+    var systemDark = matchMedia("(prefers-color-scheme: dark)").matches;
+    themeToggle.setAttribute("aria-pressed", systemDark ? "true" : "false");
+    themeToggle.addEventListener("click", function () {
+      var explicit = document.body.getAttribute("data-theme");
+      var dark = explicit ? explicit === "dark" : matchMedia("(prefers-color-scheme: dark)").matches;
+      document.body.setAttribute("data-theme", dark ? "light" : "dark");
+      themeToggle.setAttribute("aria-pressed", dark ? "false" : "true");
+    });
+  }
+
+  var orbit = document.querySelector(".orbit-visual");
+  if (orbit) {
+    var orbitCore = orbit.querySelector(".orbit-core");
+    var orbitLabel = orbitCore ? orbitCore.querySelector("span") : null;
+    var orbitValue = orbitCore ? orbitCore.querySelector("strong") : null;
+    var orbitDetail = orbitCore ? orbitCore.querySelector("small") : null;
+    var orbitHits = Array.from(orbit.querySelectorAll("[data-orbit-key]"));
+    var orbitShapes = Array.from(orbit.querySelectorAll("[data-orbit-shape]"));
+    var orbitLegends = Array.from(document.querySelectorAll("[data-orbit-legend]"));
+    var pinnedOrbitKey = "";
+
+    function pulseOrbitCore() {
+      if (!orbitCore || matchMedia("(prefers-reduced-motion: reduce)").matches || !orbitCore.animate) return;
+      if (orbitCore.__orbitAnimation) orbitCore.__orbitAnimation.cancel();
+      orbitCore.__orbitAnimation = orbitCore.animate([{ opacity: 0.48 }, { opacity: 1 }], {
+        duration: 180,
+        easing: "cubic-bezier(0.25, 1, 0.5, 1)"
+      });
+    }
+
+    function resetOrbit() {
+      pinnedOrbitKey = "";
+      orbit.classList.remove("is-exploring");
+      orbitShapes.forEach(function (shape) { shape.classList.remove("is-active"); });
+      orbitLegends.forEach(function (legend) { legend.classList.remove("is-active"); });
+      orbitHits.forEach(function (hit) { hit.setAttribute("aria-pressed", "false"); });
+      if (orbitLabel) orbitLabel.textContent = orbit.getAttribute("data-default-label") || "";
+      if (orbitValue) orbitValue.textContent = orbit.getAttribute("data-default-value") || "";
+      if (orbitDetail) orbitDetail.textContent = orbit.getAttribute("data-default-detail") || "";
+      pulseOrbitCore();
+    }
+
+    function showOrbit(hit, pin) {
+      var key = hit.getAttribute("data-orbit-key") || "";
+      if (pin) pinnedOrbitKey = key;
+      orbit.classList.add("is-exploring");
+      orbitShapes.forEach(function (shape) {
+        shape.classList.toggle("is-active", shape.getAttribute("data-orbit-shape") === key);
+      });
+      orbitLegends.forEach(function (legend) {
+        legend.classList.toggle("is-active", legend.getAttribute("data-orbit-legend") === key);
+      });
+      orbitHits.forEach(function (item) {
+        item.setAttribute("aria-pressed", pin && item === hit ? "true" : "false");
+      });
+      if (orbitLabel) orbitLabel.textContent = hit.getAttribute("data-orbit-label") || "";
+      if (orbitValue) orbitValue.textContent = hit.getAttribute("data-orbit-value") || "";
+      if (orbitDetail) orbitDetail.textContent = hit.getAttribute("data-orbit-detail") || "";
+      pulseOrbitCore();
+    }
 
-  var series;
-  try {
-    series = JSON.parse(chart.getAttribute("data-series") || "");
-  } catch (error) {
-    return;
+    orbitHits.forEach(function (hit) {
+      hit.addEventListener("pointerenter", function () {
+        if (!pinnedOrbitKey) showOrbit(hit, false);
+      });
+      hit.addEventListener("pointerleave", function () {
+        if (!pinnedOrbitKey && !orbit.matches(":focus-within")) resetOrbit();
+      });
+      hit.addEventListener("focus", function () { showOrbit(hit, pinnedOrbitKey === hit.getAttribute("data-orbit-key")); });
+      hit.addEventListener("blur", function () {
+        requestAnimationFrame(function () {
+          if (!pinnedOrbitKey && !orbit.matches(":focus-within")) resetOrbit();
+        });
+      });
+      hit.addEventListener("click", function (event) {
+        event.stopPropagation();
+        var key = hit.getAttribute("data-orbit-key") || "";
+        if (pinnedOrbitKey === key) resetOrbit();
+        else showOrbit(hit, true);
+      });
+      hit.addEventListener("keydown", function (event) {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          resetOrbit();
+        } else if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          hit.click();
+        }
+      });
+    });
+    document.addEventListener("pointerdown", function (event) {
+      if (pinnedOrbitKey && !orbit.contains(event.target)) resetOrbit();
+    });
   }
-  if (!series || !series.t || series.t.length < 2) return;
-
-  var svg = chart.querySelector("svg");
-  var tooltip = chart.querySelector(".tooltip");
-  var crosshair = chart.querySelector(".crosshair");
-  var marker = chart.querySelector(".marker");
-  var ddCrosshair = drawdownChart ? drawdownChart.querySelector(".crosshair") : null;
-  if (!svg || !tooltip || !crosshair || !marker) return;
-
-  var count = series.t.length;
-  var viewWidth = 1000;
-  var equityHeight = 260;
-  var minimum = Infinity;
-  var maximum = -Infinity;
-  for (var i = 0; i < count; i += 1) {
-    if (series.e[i] < minimum) minimum = series.e[i];
-    if (series.e[i] > maximum) maximum = series.e[i];
+
+  var spectrum = document.querySelector(".pnl-spectrum");
+  if (spectrum) {
+    var spectrumOutput = spectrum.querySelector(".spectrum-readout");
+    var spectrumRange = spectrumOutput ? spectrumOutput.querySelector("strong") : null;
+    var spectrumDetail = spectrumOutput ? spectrumOutput.querySelector("span") : null;
+    var spectrumBins = Array.from(spectrum.querySelectorAll(".spectrum-bin"));
+    var pinnedSpectrumBin = null;
+
+    function resetSpectrum() {
+      pinnedSpectrumBin = null;
+      spectrum.classList.remove("is-exploring");
+      spectrumBins.forEach(function (bin) {
+        bin.classList.remove("is-active");
+        bin.setAttribute("aria-pressed", "false");
+      });
+      if (spectrumOutput) spectrumOutput.setAttribute("hidden", "");
+    }
+
+    function showSpectrum(bin, pin) {
+      if (pin) pinnedSpectrumBin = bin;
+      spectrum.classList.add("is-exploring");
+      spectrumBins.forEach(function (item) {
+        item.classList.toggle("is-active", item === bin);
+        item.setAttribute("aria-pressed", pin && item === bin ? "true" : "false");
+      });
+      if (spectrumRange) spectrumRange.textContent = bin.getAttribute("data-spectrum-range") || "";
+      if (spectrumDetail) spectrumDetail.textContent = bin.getAttribute("data-spectrum-detail") || "";
+      if (spectrumOutput) {
+        spectrumOutput.removeAttribute("hidden");
+        var bounds = spectrum.getBoundingClientRect();
+        var binBounds = bin.getBoundingClientRect();
+        var half = (spectrumOutput.offsetWidth || 120) / 2;
+        var center = binBounds.left + binBounds.width / 2 - bounds.left;
+        spectrumOutput.style.setProperty("--spectrum-x", Math.max(half + 4, Math.min(bounds.width - half - 4, center)) + "px");
+        if (!matchMedia("(prefers-reduced-motion: reduce)").matches && spectrumOutput.animate) {
+          spectrumOutput.animate([{ opacity: 0.45 }, { opacity: 1 }], { duration: 160, easing: "cubic-bezier(0.25, 1, 0.5, 1)" });
+        }
+      }
+    }
+
+    spectrumBins.forEach(function (bin) {
+      bin.addEventListener("pointerenter", function () {
+        if (!pinnedSpectrumBin) showSpectrum(bin, false);
+      });
+      bin.addEventListener("pointerleave", function () {
+        if (!pinnedSpectrumBin && !spectrum.matches(":focus-within")) resetSpectrum();
+      });
+      bin.addEventListener("focus", function () { showSpectrum(bin, pinnedSpectrumBin === bin); });
+      bin.addEventListener("blur", function () {
+        requestAnimationFrame(function () {
+          if (!pinnedSpectrumBin && !spectrum.matches(":focus-within")) resetSpectrum();
+        });
+      });
+      bin.addEventListener("click", function (event) {
+        event.stopPropagation();
+        if (pinnedSpectrumBin === bin) resetSpectrum();
+        else showSpectrum(bin, true);
+      });
+      bin.addEventListener("keydown", function (event) {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          resetSpectrum();
+        } else if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          bin.click();
+        }
+      });
+    });
+    document.addEventListener("pointerdown", function (event) {
+      if (pinnedSpectrumBin && !spectrum.contains(event.target)) resetSpectrum();
+    });
   }
-  var span = maximum - minimum || 1;
 
   function fmt(value, digits) {
     return value.toLocaleString("en-US", { minimumFractionDigits: digits, maximumFractionDigits: digits });
@@ -49,98 +187,580 @@ export const CHART_SCRIPT = String.raw `
     return new Date(ms).toISOString().slice(0, 16).replace("T", " ");
   }
 
-  function show(index, clientX) {
-    var equity = series.e[index];
-    var drawdown = series.d[index];
-    var change = series.initial > 0 ? (equity / series.initial - 1) * 100 : 0;
-
-    // Position in the SVG's own coordinates so the line tracks the curve
-    // regardless of how the chart is scaled by CSS.
-    var vx = (index / (count - 1)) * viewWidth;
-    var vy = equityHeight - ((equity - minimum) / span) * equityHeight;
-    crosshair.setAttribute("x1", vx);
-    crosshair.setAttribute("x2", vx);
-    crosshair.removeAttribute("hidden");
-    marker.setAttribute("cx", vx);
-    marker.setAttribute("cy", vy);
-    marker.removeAttribute("hidden");
-    if (ddCrosshair) {
-      ddCrosshair.setAttribute("x1", vx);
-      ddCrosshair.setAttribute("x2", vx);
-      ddCrosshair.removeAttribute("hidden");
+  function tone(element, value) {
+    if (!element) return;
+    element.classList.remove("up", "down", "flat");
+    element.classList.add(value > 0 ? "up" : value < 0 ? "down" : "flat");
+  }
+
+  if (chart) {
+    var series;
+    try {
+      series = JSON.parse(chart.getAttribute("data-series") || "");
+    } catch (error) {
+      series = null;
     }
 
-    var sign = change > 0 ? "+" : "";
-    tooltip.innerHTML =
-      '<div class="row"><span>' + series.labels.time + '</span><b>' + isoMinute(series.t[index]) + "</b></div>" +
-      '<div class="row"><span>' + series.labels.equity + '</span><b>' + fmt(equity, 2) + "</b></div>" +
-      '<div class="row"><span>' + series.labels.change + '</span><b class="' + (change >= 0 ? "up" : "down") + '">' + sign + fmt(change, 2) + "%</b></div>" +
-      '<div class="row"><span>' + series.labels.drawdown + '</span><b class="' + (drawdown > 0 ? "down" : "") + '">-' + fmt(drawdown, 2) + "%</b></div>";
-    tooltip.removeAttribute("hidden");
-
-    // Keep the tooltip inside the chart, flipping side near the right edge.
-    var bounds = chart.getBoundingClientRect();
-    var offset = clientX - bounds.left;
-    var tipWidth = tooltip.offsetWidth || 190;
-    var left = offset + 14;
-    if (left + tipWidth > bounds.width) left = offset - tipWidth - 14;
-    tooltip.style.left = Math.max(4, left) + "px";
-  }
+    if (series && series.t && series.t.length >= 2) {
+      var svg = chart.querySelector("svg");
+      var ddSvg = drawdownChart ? drawdownChart.querySelector("svg") : null;
+      var tooltip = chart.querySelector(".tooltip");
+      var crosshair = chart.querySelector(".crosshair");
+      var marker = chart.querySelector(".marker");
+      var ddCrosshair = drawdownChart ? drawdownChart.querySelector(".crosshair") : null;
+      var count = series.t.length;
+      var viewWidth = 1000;
+      var equityHeight = 300;
+      var drawdownHeight = 120;
+      var currentStart = 0;
+      var currentEnd = count - 1;
+      var viewTop = -8;
+      var viewHeight = equityHeight + 16;
+      var ddViewHeight = drawdownHeight;
+      var minimum = Infinity;
+      var maximum = -Infinity;
+      var worst = 0;
+      var i;
 
-  function hide() {
-    tooltip.setAttribute("hidden", "");
-    crosshair.setAttribute("hidden", "");
-    marker.setAttribute("hidden", "");
-    if (ddCrosshair) ddCrosshair.setAttribute("hidden", "");
-  }
+      for (i = 0; i < count; i += 1) {
+        if (series.e[i] < minimum) minimum = series.e[i];
+        if (series.e[i] > maximum) maximum = series.e[i];
+        if (series.d[i] > worst) worst = series.d[i];
+      }
+      var span = maximum - minimum || 1;
+      worst = worst || 1;
+      var timeline = series.timeline;
+      if (timeline && Array.isArray(timeline.d) && Array.isArray(timeline.v) && timeline.d.length === timeline.v.length && timeline.q > 0) {
+        timeline.i = [];
+        timeline.e = [];
+        var restoredIndex = 0;
+        var restoredEquity = 0;
+        timeline.d.forEach(function (delta, index) {
+          restoredIndex += delta;
+          restoredEquity += timeline.v[index];
+          timeline.i.push(restoredIndex);
+          timeline.e.push(restoredEquity / timeline.q);
+        });
+      }
+      if (!timeline || !Array.isArray(timeline.i) || !Array.isArray(timeline.e) || timeline.i.length !== timeline.e.length || timeline.i.length === 0 || timeline.s <= 0 || timeline.n < 2) timeline = null;
+      var timelineDrawdowns = [];
+      if (timeline) {
+        var timelinePeak = series.initial;
+        timeline.e.forEach(function (equity) {
+          timelinePeak = Math.max(timelinePeak, equity);
+          timelineDrawdowns.push(timelinePeak > 0 ? ((timelinePeak - equity) / timelinePeak) * 100 : 0);
+        });
+      }
+      var hoverCount = timeline ? timeline.n : count;
+
+      var firstTime = series.t[0];
+      var totalTime = Math.max(1, series.t[count - 1] - firstTime);
+      var minimumTimeGap = totalTime;
+      for (i = 1; i < count; i += 1) {
+        var gap = series.t[i] - series.t[i - 1];
+        if (gap > 0) minimumTimeGap = Math.min(minimumTimeGap, gap);
+      }
+
+      function xForTime(timeMs) {
+        return ((timeMs - firstTime) / totalTime) * viewWidth;
+      }
+
+      function xFor(index) {
+        return xForTime(series.t[index]);
+      }
+
+      function yFor(equity) {
+        return equityHeight - ((equity - minimum) / span) * equityHeight;
+      }
+
+      function renderVisiblePaths(start, end) {
+        var hoverStart = hoverIndexAtTime(series.t[start]);
+        var hoverEnd = hoverIndexAtTime(series.t[end]);
+        var pixelWidth = Math.max(240, svg.getBoundingClientRect().width);
+        var targetPoints = Math.max(120, Math.min(1200, Math.floor(pixelWidth / 2)));
+        var indexStep = Math.max(1, Math.ceil((hoverEnd - hoverStart) / targetPoints));
+        chart.setAttribute("data-render-step", String(indexStep));
+        chart.setAttribute("data-render-points", String(Math.ceil((hoverEnd - hoverStart) / indexStep) + 1));
+        var indexes = [hoverStart];
+        for (var index = hoverStart + indexStep; index < hoverEnd; index += indexStep) indexes.push(index);
+        if (indexes[indexes.length - 1] !== hoverEnd) indexes.push(hoverEnd);
+
+        var equityPath = "";
+        var drawdownPath = "";
+        indexes.forEach(function (hoverIndex, pathIndex) {
+          var point = hoverPointAt(hoverIndex);
+          var command = pathIndex === 0 ? "M" : "L";
+          var x = xForTime(hoverTimeAt(hoverIndex)).toFixed(4);
+          equityPath += command + x + "," + yFor(point.equity).toFixed(2);
+          drawdownPath += command + x + "," + ((point.drawdown / worst) * drawdownHeight).toFixed(2);
+        });
+        var firstX = xForTime(hoverTimeAt(hoverStart)).toFixed(4);
+        var lastX = xForTime(hoverTimeAt(hoverEnd)).toFixed(4);
+        var equityLine = chart.querySelector(".equity-line");
+        var equityArea = chart.querySelector(".equity-area");
+        var drawdownLine = drawdownChart ? drawdownChart.querySelector(".drawdown-line") : null;
+        var drawdownArea = drawdownChart ? drawdownChart.querySelector(".drawdown-area") : null;
+        if (equityLine) equityLine.setAttribute("d", equityPath);
+        if (equityArea) equityArea.setAttribute("d", equityPath + "L" + lastX + "," + equityHeight + "L" + firstX + "," + equityHeight + "Z");
+        if (drawdownLine) drawdownLine.setAttribute("d", drawdownPath);
+        if (drawdownArea) drawdownArea.setAttribute("d", drawdownPath + "L" + lastX + ",0L" + firstX + ",0Z");
+      }
+
+      function findIndex(timeMs) {
+        var low = 0;
+        var high = count - 1;
+        while (low < high) {
+          var middle = Math.floor((low + high) / 2);
+          if (series.t[middle] < timeMs) low = middle + 1;
+          else high = middle;
+        }
+        if (low > 0 && Math.abs(series.t[low - 1] - timeMs) < Math.abs(series.t[low] - timeMs)) return low - 1;
+        return low;
+      }
+
+      function hoverIndexAtTime(timeMs) {
+        if (!timeline) return findIndex(timeMs);
+        return Math.max(0, Math.min(hoverCount - 1, Math.round((timeMs - timeline.t) / timeline.s)));
+      }
+
+      function hoverTimeAt(index) {
+        return timeline ? timeline.t + timeline.s * index : series.t[index];
+      }
+
+      function hoverPointAt(index) {
+        if (!timeline) return { equity: series.e[index], drawdown: series.d[index] };
+        var low = 0;
+        var high = timeline.i.length - 1;
+        while (low < high) {
+          var middle = Math.ceil((low + high) / 2);
+          if (timeline.i[middle] <= index) low = middle;
+          else high = middle - 1;
+        }
+        return { equity: timeline.e[low], drawdown: timelineDrawdowns[low] };
+      }
+
+      function setWindowReadouts(start, end) {
+        var startEquity = series.e[start];
+        var endEquity = series.e[end];
+        var change = startEquity > 0 ? (endEquity / startEquity - 1) * 100 : 0;
+        var peak = startEquity;
+        var maxDrawdown = 0;
+        for (var index = start; index <= end; index += 1) {
+          peak = Math.max(peak, series.e[index]);
+          if (peak > 0) maxDrawdown = Math.max(maxDrawdown, ((peak - series.e[index]) / peak) * 100);
+        }
+
+        var period = document.getElementById("window-period");
+        var returned = document.getElementById("window-return");
+        var drawdown = document.getElementById("window-drawdown");
+        var equity = document.getElementById("window-equity");
+        if (period) period.textContent = isoMinute(series.t[start]) + " — " + isoMinute(series.t[end]);
+        if (returned) {
+          returned.textContent = (change > 0 ? "+" : "") + fmt(change, 2) + "%";
+          tone(returned, change);
+        }
+        if (drawdown) drawdown.textContent = fmt(maxDrawdown, 2) + "%";
+        if (equity) equity.textContent = fmt(endEquity, 2) + " USDT";
+
+        var range = document.querySelector(".chart-range");
+        if (range) range.textContent = isoMinute(series.t[start]) + " → " + isoMinute(series.t[end]) + " UTC · " + (end - start + 1);
+      }
+
+      function updateEventChips(start, end) {
+        var chips = chart.querySelectorAll("[data-point-index]");
+        chips.forEach(function (chip) {
+          var index = Number(chip.getAttribute("data-point-index"));
+          if (index < start || index > end) {
+            chip.setAttribute("hidden", "");
+            return;
+          }
+          chip.removeAttribute("hidden");
+          chip.style.setProperty("--event-x", (((xFor(index) - xFor(start)) / Math.max(1, xFor(end) - xFor(start))) * 100).toFixed(2) + "%");
+        });
+      }
+
+      function sizePointMarkers() {
+        var bounds = svg.getBoundingClientRect();
+        if (bounds.width <= 0 || bounds.height <= 0) return;
+        var box = (svg.getAttribute("viewBox") || "0 -8 1000 316").split(/\s+/).map(Number);
+        var visibleWidth = Number.isFinite(box[2]) ? box[2] : viewWidth;
+        var visibleHeight = Number.isFinite(box[3]) ? box[3] : viewHeight;
+        chart.querySelectorAll("[data-marker-radius]").forEach(function (point) {
+          var radius = Number(point.getAttribute("data-marker-radius")) || 4;
+          point.setAttribute("rx", Math.max(0.001, (radius * visibleWidth) / bounds.width));
+          point.setAttribute("ry", Math.max(0.001, (radius * visibleHeight) / bounds.height));
+        });
+      }
 
-  function indexFromClientX(clientX) {
-    var bounds = svg.getBoundingClientRect();
-    if (bounds.width <= 0) return 0;
-    // Clamped against the plot area, so the padding and axis column at either
-    // side still resolve to the first and last point. Without this, hovering a
-    // few pixels inside the chart's own border sits outside the svg and reads
-    // the second-to-last value instead of the last.
-    var ratio = (clientX - bounds.left) / bounds.width;
-    var index = Math.round(Math.max(0, Math.min(1, ratio)) * (count - 1));
-    return Math.max(0, Math.min(count - 1, index));
+      function animateViewBox(element, target, immediate) {
+        if (!element) return;
+        var reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
+        if (immediate) {
+          if (element.__viewBoxFrame) cancelAnimationFrame(element.__viewBoxFrame);
+          element.__viewBoxFrame = 0;
+          element.setAttribute("viewBox", target.join(" "));
+          if (element === svg) sizePointMarkers();
+          return;
+        }
+        var from = (element.getAttribute("viewBox") || target.join(" ")).split(/\s+/).map(Number);
+        if (reduced || from.length !== 4 || from.some(function (value) { return !Number.isFinite(value); })) {
+          element.setAttribute("viewBox", target.join(" "));
+          if (element === svg) sizePointMarkers();
+          return;
+        }
+        if (element.__viewBoxFrame) cancelAnimationFrame(element.__viewBoxFrame);
+        var started = performance.now();
+        function frameViewBox(now) {
+          var progress = Math.min(1, (now - started) / 320);
+          var eased = 1 - Math.pow(1 - progress, 4);
+          var values = from.map(function (value, index) { return value + (target[index] - value) * eased; });
+          element.setAttribute("viewBox", values.join(" "));
+          if (element === svg) sizePointMarkers();
+          if (progress < 1) element.__viewBoxFrame = requestAnimationFrame(frameViewBox);
+          else element.__viewBoxFrame = 0;
+        }
+        element.__viewBoxFrame = requestAnimationFrame(frameViewBox);
+      }
+
+      function setRange(start, end, source, immediate) {
+        currentStart = Math.max(0, Math.min(count - 2, start));
+        currentEnd = Math.max(currentStart + 1, Math.min(count - 1, end));
+        var xStart = xFor(currentStart);
+        var xEnd = xFor(currentEnd);
+        renderVisiblePaths(currentStart, currentEnd);
+        var localMinimum = Infinity;
+        var localMaximum = -Infinity;
+        var localDrawdown = 0;
+        for (var index = currentStart; index <= currentEnd; index += 1) {
+          localMinimum = Math.min(localMinimum, series.e[index]);
+          localMaximum = Math.max(localMaximum, series.e[index]);
+          localDrawdown = Math.max(localDrawdown, series.d[index]);
+        }
+        var localCenter = (localMaximum + localMinimum) / 2;
+        var observedValueRange = Math.max(0, localMaximum - localMinimum);
+        var minimumValueRange = Math.max(1, Math.abs(series.initial) * 0.04);
+        var visibleValueRange = Math.max(minimumValueRange, observedValueRange * 1.3);
+        var visibleMaximum = localCenter + visibleValueRange / 2;
+        var visibleMinimum = localCenter - visibleValueRange / 2;
+        viewTop = yFor(visibleMaximum);
+        viewHeight = Math.max(1, yFor(visibleMinimum) - viewTop);
+        var visibleDrawdown = Math.max(1, localDrawdown * 1.2);
+        ddViewHeight = Math.max(12, (visibleDrawdown / worst) * drawdownHeight);
+        var visibleWidth = Math.max(1, xEnd - xStart);
+
+        animateViewBox(svg, [xStart, viewTop, visibleWidth, viewHeight], immediate);
+        animateViewBox(ddSvg, [xStart, 0, visibleWidth, ddViewHeight], immediate);
+        var axis = chart.querySelectorAll(".axis span");
+        if (axis[0]) axis[0].textContent = fmt(visibleMaximum, 0);
+        if (axis[1]) axis[1].textContent = fmt(visibleMinimum, 0);
+        var ddAxis = drawdownChart ? drawdownChart.querySelectorAll(".axis span") : [];
+        if (ddAxis[1]) ddAxis[1].textContent = "-" + fmt(visibleDrawdown, 1) + "%";
+
+        document.querySelectorAll("[data-range-days]").forEach(function (button) {
+          button.setAttribute("aria-pressed", button === source ? "true" : "false");
+        });
+        document.querySelectorAll("[data-month-start]").forEach(function (button) {
+          button.setAttribute("aria-pressed", button === source ? "true" : "false");
+        });
+        updateEventChips(currentStart, currentEnd);
+        setWindowReadouts(currentStart, currentEnd);
+        hide();
+      }
+
+      function clientXForTime(timeMs, bounds) {
+        var ratio = (xForTime(timeMs) - xFor(currentStart)) / Math.max(1, xFor(currentEnd) - xFor(currentStart));
+        return bounds.left + ratio * bounds.width;
+      }
+
+
+      function show(index, clientX) {
+        var hoverStart = hoverIndexAtTime(series.t[currentStart]);
+        var hoverEnd = hoverIndexAtTime(series.t[currentEnd]);
+        index = Math.max(hoverStart, Math.min(hoverEnd, index));
+        var point = hoverPointAt(index);
+        var equity = point.equity;
+        var drawdown = point.drawdown;
+        var timeMs = hoverTimeAt(index);
+        var change = series.initial > 0 ? (equity / series.initial - 1) * 100 : 0;
+        var vx = xForTime(timeMs);
+        var vy = yFor(equity);
+
+        crosshair.setAttribute("x1", vx);
+        crosshair.setAttribute("x2", vx);
+        crosshair.setAttribute("y1", viewTop);
+        crosshair.setAttribute("y2", viewTop + viewHeight);
+        crosshair.removeAttribute("hidden");
+        marker.setAttribute("cx", vx);
+        marker.setAttribute("cy", vy);
+        marker.removeAttribute("hidden");
+        if (ddCrosshair) {
+          ddCrosshair.setAttribute("x1", vx);
+          ddCrosshair.setAttribute("x2", vx);
+          ddCrosshair.setAttribute("y2", ddViewHeight);
+          ddCrosshair.removeAttribute("hidden");
+        }
+
+        var changeSign = change > 0 ? "+" : "";
+        tooltip.innerHTML =
+          '<div class="row"><span>' + series.labels.time + '</span><b>' + isoMinute(timeMs) + "</b></div>" +
+          '<div class="row"><span>' + series.labels.equity + '</span><b>' + fmt(equity, 2) + "</b></div>" +
+          '<div class="row"><span>' + series.labels.change + '</span><b class="' + (change >= 0 ? "up" : "down") + '">' + changeSign + fmt(change, 2) + "%</b></div>" +
+          '<div class="row"><span>' + series.labels.drawdown + '</span><b class="' + (drawdown > 0 ? "down" : "") + '">-' + fmt(drawdown, 2) + "%</b></div>";
+        tooltip.removeAttribute("hidden");
+
+        var bounds = chart.getBoundingClientRect();
+        var offset = clientX - bounds.left;
+        var tipWidth = tooltip.offsetWidth || 190;
+        var left = offset + 16;
+        if (left + tipWidth > bounds.width) left = offset - tipWidth - 16;
+        tooltip.style.left = Math.max(6, left) + "px";
+      }
+
+      function hide() {
+        tooltip.setAttribute("hidden", "");
+        crosshair.setAttribute("hidden", "");
+        marker.setAttribute("hidden", "");
+        if (ddCrosshair) ddCrosshair.setAttribute("hidden", "");
+      }
+
+      function indexFromClientX(clientX) {
+        var bounds = svg.getBoundingClientRect();
+        if (bounds.width <= 0) return currentStart;
+        var edgeSnap = Math.min(8, bounds.width / 4);
+        var ratio = (clientX + 0.5 - bounds.left - edgeSnap) / Math.max(1, bounds.width - edgeSnap * 2);
+        ratio = Math.max(0, Math.min(1, ratio));
+        var targetTime = series.t[currentStart] + ratio * (series.t[currentEnd] - series.t[currentStart]);
+        var hoverStart = hoverIndexAtTime(series.t[currentStart]);
+        var hoverEnd = hoverIndexAtTime(series.t[currentEnd]);
+        return Math.max(hoverStart, Math.min(hoverEnd, hoverIndexAtTime(targetTime)));
+      }
+
+      var dragState = null;
+
+      function boundedTimeWindow(startTime, duration) {
+        duration = Math.max(minimumTimeGap * Math.min(8, count - 1), Math.min(totalTime, duration));
+        if (startTime < firstTime) startTime = firstTime;
+        if (startTime + duration > firstTime + totalTime) startTime = firstTime + totalTime - duration;
+        return [startTime, startTime + duration];
+      }
+
+      function setTimeWindow(startTime, endTime, immediate) {
+        var start = findIndex(startTime);
+        var end = findIndex(endTime);
+        if (end <= start) end = Math.min(count - 1, start + 1);
+        if (end <= start) start = Math.max(0, end - 1);
+        setRange(start, end, null, immediate);
+      }
+
+      function zoomWindow(clientX, factor) {
+        var currentTimeStart = series.t[currentStart];
+        var currentDuration = series.t[currentEnd] - currentTimeStart;
+        var targetDuration = Math.max(minimumTimeGap * Math.min(8, count - 1), Math.min(totalTime, currentDuration * factor));
+        if (targetDuration === currentDuration) return;
+        var bounds = svg.getBoundingClientRect();
+        var ratio = Math.max(0, Math.min(1, (clientX - bounds.left) / Math.max(1, bounds.width)));
+        var anchor = currentTimeStart + ratio * currentDuration;
+        var window = boundedTimeWindow(anchor - ratio * targetDuration, targetDuration);
+        setTimeWindow(window[0], window[1], false);
+      }
+
+      function endPan(event) {
+        if (!dragState || (typeof event.pointerId === "number" && event.pointerId !== dragState.pointerId)) return;
+        var surface = dragState.surface;
+        var pointerId = dragState.pointerId;
+        dragState = null;
+        surface.classList.remove("is-dragging");
+        if (surface.hasPointerCapture && surface.hasPointerCapture(pointerId)) surface.releasePointerCapture(pointerId);
+      }
+
+      var pendingWheelDelta = 0;
+      var pendingWheelX = 0;
+      var wheelFrame = 0;
+
+      function queueWheelZoom(event) {
+        if (!event.deltaY) return;
+        event.preventDefault();
+        var delta = event.deltaY;
+        if (event.deltaMode === 1) delta *= 16;
+        else if (event.deltaMode === 2) delta *= Math.max(1, svg.getBoundingClientRect().height);
+        pendingWheelDelta += delta;
+        pendingWheelX = event.clientX;
+        if (wheelFrame) return;
+        wheelFrame = requestAnimationFrame(function () {
+          var boundedDelta = Math.max(-80, Math.min(80, pendingWheelDelta));
+          pendingWheelDelta = 0;
+          wheelFrame = 0;
+          zoomWindow(pendingWheelX, Math.exp(boundedDelta * 0.0015));
+        });
+      }
+
+      function bindRangeNavigation(surface) {
+        if (!surface) return;
+        surface.addEventListener("wheel", queueWheelZoom, { passive: false });
+        surface.addEventListener("pointerdown", function (event) {
+          if (event.pointerType !== "mouse" || event.button !== 0) return;
+          if (event.target.closest && event.target.closest("button")) return;
+          dragState = {
+            surface: surface,
+            pointerId: event.pointerId,
+            clientX: event.clientX,
+            startTime: series.t[currentStart],
+            endTime: series.t[currentEnd]
+          };
+          surface.classList.add("is-dragging");
+          surface.setPointerCapture(event.pointerId);
+          hide();
+          event.preventDefault();
+        });
+        surface.addEventListener("pointermove", function (event) {
+          if (!dragState || dragState.surface !== surface || event.pointerId !== dragState.pointerId) return;
+          var bounds = svg.getBoundingClientRect();
+          var duration = dragState.endTime - dragState.startTime;
+          var shift = ((dragState.clientX - event.clientX) / Math.max(1, bounds.width)) * duration;
+          var window = boundedTimeWindow(dragState.startTime + shift, duration);
+          setTimeWindow(window[0], window[1], true);
+          event.preventDefault();
+        });
+        surface.addEventListener("pointerup", endPan);
+        surface.addEventListener("pointercancel", endPan);
+        surface.addEventListener("dblclick", function (event) {
+          if (event.target.closest && event.target.closest("button")) return;
+          setRange(0, count - 1, document.querySelector('[data-range-days="all"]'), false);
+        });
+      }
+
+      bindRangeNavigation(chart);
+      bindRangeNavigation(drawdownChart);
+      addEventListener("resize", function () {
+        sizePointMarkers();
+        renderVisiblePaths(currentStart, currentEnd);
+      }, { passive: true });
+
+      function track(event) {
+        if (dragState) return;
+        var clientX = event.touches && event.touches.length ? event.touches[0].clientX : event.clientX;
+        show(indexFromClientX(clientX), clientX);
+      }
+
+      chart.addEventListener("mousemove", track);
+      chart.addEventListener("mouseleave", hide);
+      if (drawdownChart) {
+        drawdownChart.addEventListener("mousemove", track);
+        drawdownChart.addEventListener("mouseleave", hide);
+      }
+      chart.addEventListener("touchstart", track, { passive: true });
+      chart.addEventListener("touchmove", track, { passive: true });
+      chart.addEventListener("touchend", hide);
+      chart.setAttribute("tabindex", "0");
+
+      var cursor = -1;
+      chart.addEventListener("keydown", function (event) {
+        var hoverStart = hoverIndexAtTime(series.t[currentStart]);
+        var hoverEnd = hoverIndexAtTime(series.t[currentEnd]);
+        var step = event.shiftKey ? Math.max(1, Math.round((hoverEnd - hoverStart + 1) / 20)) : 1;
+        if (event.key === "ArrowRight") cursor = Math.min(hoverEnd, (cursor < hoverStart ? hoverStart - 1 : cursor) + step);
+        else if (event.key === "ArrowLeft") cursor = Math.max(hoverStart, (cursor > hoverEnd || cursor < 0 ? hoverEnd + 1 : cursor) - step);
+        else if (event.key === "Home") cursor = hoverStart;
+        else if (event.key === "End") cursor = hoverEnd;
+        else if (event.key === "Escape") {
+          cursor = -1;
+          hide();
+          return;
+        } else return;
+        event.preventDefault();
+        var bounds = svg.getBoundingClientRect();
+        show(cursor, clientXForTime(hoverTimeAt(cursor), bounds));
+      });
+      chart.addEventListener("blur", hide);
+
+      document.querySelectorAll("[data-range-days]").forEach(function (button) {
+        button.addEventListener("click", function () {
+          var value = button.getAttribute("data-range-days");
+          var start = 0;
+          if (value !== "all") start = findIndex(series.t[count - 1] - Number(value) * 86400000);
+          setRange(start, count - 1, button);
+        });
+      });
+
+      document.querySelectorAll("[data-month-start]").forEach(function (button) {
+        button.addEventListener("click", function () {
+          var start = findIndex(Number(button.getAttribute("data-month-start")));
+          var end = findIndex(Number(button.getAttribute("data-month-end")));
+          setRange(start, Math.max(start + 1, end), button);
+          document.getElementById("observatory")?.scrollIntoView({ behavior: "smooth", block: "start" });
+        });
+      });
+
+      chart.querySelectorAll("[data-point-index]").forEach(function (button) {
+        button.addEventListener("click", function () {
+          var index = Number(button.getAttribute("data-point-index"));
+          var timeMs = series.t[index];
+          var bounds = svg.getBoundingClientRect();
+          show(hoverIndexAtTime(timeMs), clientXForTime(timeMs, bounds));
+        });
+      });
+
+      var allRange = document.querySelector('[data-range-days="all"]');
+      setRange(0, count - 1, allRange);
+    }
   }
 
-  function track(event) {
-    var clientX = event.touches && event.touches.length ? event.touches[0].clientX : event.clientX;
-    show(indexFromClientX(clientX), clientX);
+  document.querySelectorAll("[data-chart-mode]").forEach(function (button) {
+    button.addEventListener("click", function () {
+      var mode = button.getAttribute("data-chart-mode") || "overview";
+      if (frame) frame.setAttribute("data-mode", mode);
+      document.querySelectorAll("[data-chart-mode]").forEach(function (item) {
+        item.setAttribute("aria-pressed", item === button ? "true" : "false");
+      });
+    });
+  });
+
+  var tradeRows = Array.from(document.querySelectorAll(".tape-row"));
+  var tradeCount = document.getElementById("trade-visible-count");
+  document.querySelectorAll("[data-trade-filter]").forEach(function (button) {
+    button.addEventListener("click", function () {
+      var filter = button.getAttribute("data-trade-filter") || "all";
+      var visible = 0;
+      tradeRows.forEach(function (row) {
+        var matches = filter === "all" || row.getAttribute("data-side") === filter || row.getAttribute("data-outcome") === filter;
+        if (matches) {
+          row.removeAttribute("hidden");
+          visible += 1;
+        } else row.setAttribute("hidden", "");
+      });
+      document.querySelectorAll("[data-trade-filter]").forEach(function (item) {
+        item.setAttribute("aria-pressed", item === button ? "true" : "false");
+      });
+      if (tradeCount) tradeCount.textContent = String(visible);
+    });
+  });
+
+  var sectionLinks = Array.from(document.querySelectorAll("[data-section-link]"));
+  if ("IntersectionObserver" in window) {
+    var observer = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        if (!entry.isIntersecting) return;
+        sectionLinks.forEach(function (link) {
+          link.classList.toggle("active", link.getAttribute("data-section-link") === entry.target.id);
+        });
+      });
+    }, { rootMargin: "-20% 0px -65% 0px", threshold: 0 });
+    document.querySelectorAll("[data-report-section]").forEach(function (section) { observer.observe(section); });
   }
 
-  chart.addEventListener("mousemove", track);
-  chart.addEventListener("mouseleave", hide);
-  if (drawdownChart) {
-    drawdownChart.addEventListener("mousemove", track);
-    drawdownChart.addEventListener("mouseleave", hide);
+  var progress = document.querySelector(".scroll-progress");
+  var ticking = false;
+  function updateProgress() {
+    var maximum = Math.max(1, document.documentElement.scrollHeight - innerHeight);
+    if (progress) progress.style.transform = "scaleX(" + Math.min(1, scrollY / maximum) + ")";
+    ticking = false;
   }
-  chart.addEventListener("touchstart", track, { passive: true });
-  chart.addEventListener("touchmove", track, { passive: true });
-  chart.addEventListener("touchend", hide);
-
-  // Keyboard access: the readout is the only way to get exact values, so it
-  // cannot depend on a pointer.
-  chart.setAttribute("tabindex", "0");
-  var cursor = -1;
-  chart.addEventListener("keydown", function (event) {
-    var step = event.shiftKey ? Math.max(1, Math.round(count / 20)) : 1;
-    if (event.key === "ArrowRight") cursor = Math.min(count - 1, (cursor < 0 ? -1 : cursor) + step);
-    else if (event.key === "ArrowLeft") cursor = Math.max(0, (cursor < 0 ? count : cursor) - step);
-    else if (event.key === "Home") cursor = 0;
-    else if (event.key === "End") cursor = count - 1;
-    else if (event.key === "Escape") {
-      cursor = -1;
-      hide();
-      return;
-    } else return;
-    event.preventDefault();
-    var bounds = chart.getBoundingClientRect();
-    show(cursor, bounds.left + (cursor / (count - 1)) * bounds.width);
-  });
-  chart.addEventListener("blur", hide);
+  addEventListener("scroll", function () {
+    if (ticking) return;
+    ticking = true;
+    requestAnimationFrame(updateProgress);
+  }, { passive: true });
+  updateProgress();
 })();
 `;
 //# sourceMappingURL=chart-script.js.map