desic-okx-agent 0.2.1 → 0.3.0

package/dist/report/html.js

@@ -0,0 +1,641 @@
+import { activeLocale, activeMessages } from "../i18n/locale.js";
+import { MINIMUM_ANNUALIZATION_DAYS } from "../strategy/constants.js";
+import { CHART_SCRIPT } from "./chart-script.js";
+/**
+ * Renders a self-contained HTML report.
+ *
+ * Everything is inlined — no CDN, no fonts, no scripts fetched at view time — so
+ * the file opens offline, keeps working when archived next to its run, and never
+ * sends the contents of a strategy anywhere.
+ *
+ * The chart is drawn as SVG paths computed here rather than by a charting
+ * library: a 50,000-point curve as JSON plus a bundled library would be
+ * megabytes, and the useful information survives downsampling.
+ */
+export function renderReportHtml(input) {
+    const { run, equity, trades } = input;
+    const text = activeMessages();
+    const metrics = (run.metrics ?? {});
+    const sampled = downsample(equity, 900);
+    const drawdown = drawdownSeries(sampled, num(metrics.initialEquityUsdt) ?? 10_000);
+    return `<!DOCTYPE html>
+<html lang="${activeLang()}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(run.id)} · ${escapeHtml(run.strategyName)}</title>
+<style>${STYLES}</style>
+</head>
+<body>
+<main>
+  <header>
+    <div>
+      <h1>${escapeHtml(run.strategyName)}</h1>
+      <p class="sub">${escapeHtml(run.instId)} · ${escapeHtml(run.id)}</p>
+    </div>
+    <div class="headline ${sign(num(metrics.returnPct))}">
+      <span class="value">${signed(num(metrics.returnPct), "%")}</span>
+      <span class="label">${escapeHtml(text.returnLabel)}</span>
+    </div>
+  </header>
+
+  ${renderFacts(run, metrics, text)}
+  ${renderWarnings(metrics, text)}
+
+  <section>
+    <h2>${escapeHtml(text.equityHeading)}</h2>
+    ${renderChart(sampled, drawdown, num(metrics.initialEquityUsdt) ?? 10_000, text)}
+  </section>
+
+  ${renderMetricGroups(metrics, text)}
+  ${renderAssumptions(run, text)}
+  ${renderMonthly(equity, text)}
+  ${renderDistribution(trades, text)}
+  ${renderTrades(trades, text)}
+
+  <footer>
+    <p>${escapeHtml(text.simulationNote)}</p>
+    <p class="mono">${escapeHtml(run.dataSnapshotId ?? "-")}</p>
+  </footer>
+</main>
+<script>${CHART_SCRIPT}</script>
+</body>
+</html>`;
+}
+function renderFacts(run, metrics, text) {
+    const days = num(metrics.evaluationDays);
+    const items = [
+        [text.statusLabel, run.status],
+        [text.barsLabel, `${formatNumber(run.barCount)} (${formatNumber(run.preloadBars)} preload)`],
+        ["", days === null ? "-" : `${days.toFixed(1)}d`],
+        [
+            text.elapsedLabel,
+            run.startedAt !== null && run.finishedAt !== null
+                ? `${((run.finishedAt - run.startedAt) / 1000).toFixed(1)}s`
+                : "-"
+        ]
+    ];
+    return `<div class="facts">${items
+        .filter(([label]) => label !== "")
+        .map(([label, value]) => `<div><span>${escapeHtml(label)}</span><strong>${escapeHtml(value)}</strong></div>`)
+        .join("")}</div>`;
+}
+function renderWarnings(metrics, text) {
+    const warnings = [];
+    const feeShare = num(metrics.feesPctOfGross);
+    // Costs above the gross edge are the usual reason a plausible signal loses
+    // money, so state it rather than leaving it to be inferred.
+    if (feeShare !== null && feeShare > 100) {
+        warnings.push(`${text.feesLabel} ${feeShare.toFixed(1)}% ${text.feesOfGross}`);
+    }
+    if (metrics.marginExhausted === true) {
+        warnings.push(`${text.marginExhaustedWarning} ${text.marginExhaustedDetail}`);
+    }
+    if (metrics.annualizationReliable === false) {
+        warnings.push(`${text.annualized}: ${text.annualizedWithheld(MINIMUM_ANNUALIZATION_DAYS)}`);
+    }
+    if (warnings.length === 0)
+        return "";
+    return `<div class="warnings">${warnings.map((item) => `<p>${escapeHtml(item)}</p>`).join("")}</div>`;
+}
+/**
+ * Equity line plus a shaded drawdown band beneath it.
+ *
+ * Drawdown is the question a bare equity line answers badly: two runs ending at
+ * the same number can differ entirely in how much they gave back on the way.
+ */
+function renderChart(points, drawdown, initialEquity, text) {
+    if (points.length < 2)
+        return `<p class="empty">${escapeHtml(text.notEnoughPoints)}</p>`;
+    const width = 1000;
+    const equityHeight = 260;
+    const drawdownHeight = 90;
+    const values = points.map((point) => point.equityUsdt);
+    const minimum = Math.min(...values);
+    const maximum = Math.max(...values);
+    const span = maximum - minimum || 1;
+    const worst = Math.max(...drawdown, 0.0001);
+    const x = (index) => (index / (points.length - 1)) * width;
+    const y = (value) => equityHeight - ((value - minimum) / span) * equityHeight;
+    const line = values.map((value, index) => `${index === 0 ? "M" : "L"}${x(index).toFixed(1)},${y(value).toFixed(1)}`).join("");
+    const area = `${line}L${width},${equityHeight}L0,${equityHeight}Z`;
+    const ddPath = drawdown
+        .map((value, index) => `${index === 0 ? "M" : "L"}${x(index).toFixed(1)},${((value / worst) * drawdownHeight).toFixed(1)}`)
+        .join("");
+    const ddArea = `${ddPath}L${width},0L0,0Z`;
+    const first = points[0];
+    const last = points.at(-1);
+    // The break-even line makes "is this above water" answerable at a glance,
+    // which a curve scaled to its own range cannot show.
+    const breakEven = initialEquity > minimum && initialEquity < maximum
+        ? `<line class="baseline" x1="0" y1="${y(initialEquity).toFixed(1)}" x2="${width}" y2="${y(initialEquity).toFixed(1)}"/>`
+        : "";
+    // Series data for the hover readout. Sent as three parallel arrays rather than
+    // an array of objects: on a 900-point curve that is roughly a third of the
+    // bytes, and the report is read as one file.
+    const series = {
+        t: points.map((point) => point.timeMs),
+        e: points.map((point) => Number(point.equityUsdt.toFixed(4))),
+        d: drawdown.map((value) => Number(value.toFixed(4))),
+        initial: initialEquity,
+        labels: {
+            time: text.hoverTime,
+            equity: text.hoverEquity,
+            change: text.hoverChange,
+            drawdown: text.hoverDrawdown
+        }
+    };
+    return `
+  <div class="chart" id="equity-chart" data-series='${escapeAttribute(JSON.stringify(series))}'>
+    <svg viewBox="0 -8 ${width} ${equityHeight + 16}" preserveAspectRatio="none" role="img" aria-label="equity curve">
+      <defs>
+        <linearGradient id="fill" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stop-color="#4f9cf9" stop-opacity="0.28"/>
+          <stop offset="100%" stop-color="#4f9cf9" stop-opacity="0"/>
+        </linearGradient>
+      </defs>
+      <path d="${area}" fill="url(#fill)"/>
+      ${breakEven}
+      <path d="${line}" fill="none" stroke="#4f9cf9" stroke-width="1.6" vector-effect="non-scaling-stroke"/>
+      <line class="crosshair" x1="0" y1="-8" x2="0" y2="${equityHeight}" hidden/>
+      <circle class="marker" r="3.5" cx="0" cy="0" hidden/>
+    </svg>
+    <div class="axis"><span>${formatNumber(maximum)}</span><span>${formatNumber(minimum)}</span></div>
+    <div class="tooltip" hidden></div>
+  </div>
+  <div class="chart drawdown" id="drawdown-chart">
+    <svg viewBox="0 0 ${width} ${drawdownHeight}" preserveAspectRatio="none" role="img" aria-label="drawdown">
+      <path d="${ddArea}" fill="#f2777a" fill-opacity="0.22"/>
+      <path d="${ddPath}" fill="none" stroke="#f2777a" stroke-width="1.2" vector-effect="non-scaling-stroke"/>
+      <line class="crosshair" x1="0" y1="0" x2="0" y2="${drawdownHeight}" hidden/>
+    </svg>
+    <div class="axis"><span>0%</span><span>-${worst.toFixed(1)}%</span></div>
+  </div>
+  <p class="range mono">${escapeHtml(isoMinute(first.timeMs))} → ${escapeHtml(isoMinute(last.timeMs))} UTC · ${formatNumber(points.length)} · ${escapeHtml(text.hoverPrompt)}</p>`;
+}
+function renderMetricGroups(metrics, text) {
+    const groups = [
+        [
+            text.performance,
+            [
+                [text.netProfit, `${signed(num(metrics.netProfitUsdt), "")} USDT`],
+                [text.returnLabel, signed(num(metrics.returnPct), "%")],
+                [
+                    text.annualized,
+                    metrics.annualizedReturnPct === null || metrics.annualizedReturnPct === undefined
+                        ? "-"
+                        : signed(num(metrics.annualizedReturnPct), "%")
+                ],
+                [text.maxDrawdown, `${plain(num(metrics.maxDrawdownPct), "%")} (${plain(num(metrics.maxDrawdownUsdt), "")})`],
+                [text.drawdownRecovery, `${formatNumber(num(metrics.longestDrawdownBars) ?? 0)} bars`]
+            ]
+        ],
+        [
+            text.riskAdjusted,
+            [
+                [text.sharpeLabel, plain(num(metrics.sharpe), "")],
+                [text.sortinoLabel, plain(num(metrics.sortino), "")],
+                [text.calmarLabel, plain(num(metrics.calmar), "")]
+            ]
+        ],
+        [
+            text.activity,
+            [
+                [
+                    text.tradesLabel,
+                    `${formatNumber(num(metrics.tradeCount) ?? 0)} (${text.longShort(num(metrics.longTradeCount) ?? 0, num(metrics.shortTradeCount) ?? 0)})`
+                ],
+                [text.winRate, plain(num(metrics.winRatePct), "%")],
+                [text.profitFactor, plain(num(metrics.profitFactor), "")],
+                [text.expectancy, `${signed(num(metrics.expectancyUsdt), "")} USDT`],
+                [
+                    text.averageWinLoss,
+                    `${signed(num(metrics.averageWinUsdt), "")} / ${signed(num(metrics.averageLossUsdt), "")}`
+                ],
+                [
+                    text.largestWinLoss,
+                    `${signed(num(metrics.largestWinUsdt), "")} / ${signed(num(metrics.largestLossUsdt), "")}`
+                ],
+                [
+                    text.streaks,
+                    `${formatNumber(num(metrics.maxConsecutiveWins) ?? 0)}W / ${formatNumber(num(metrics.maxConsecutiveLosses) ?? 0)}L`
+                ],
+                [text.holdingTime, `${plain(num(metrics.averageHoldingBars), "")} bars`],
+                [text.tradesPerDay, plain(num(metrics.tradesPerDay), "")]
+            ]
+        ],
+        [
+            text.costs,
+            [
+                [text.feesLabel, `${plain(num(metrics.totalFeesUsdt), "")} USDT`],
+                [text.feesOfGross, plain(num(metrics.feesPctOfGross), "%")],
+                [text.turnover, `${plain(num(metrics.turnoverUsdt), "")} USDT`],
+                [text.exposure, plain(num(metrics.exposurePct), "%")]
+            ]
+        ]
+    ];
+    return groups
+        .map(([title, rows]) => `
+  <section>
+    <h2>${escapeHtml(title)}</h2>
+    <dl>${rows
+        .map(([name, value]) => `<div><dt>${escapeHtml(name)}</dt><dd>${escapeHtml(value)}</dd></div>`)
+        .join("")}</dl>
+  </section>`)
+        .join("");
+}
+function renderTrades(trades, text) {
+    if (trades.length === 0) {
+        return `<section><h2>${escapeHtml(text.tradesHeading)}</h2><p class="empty">${escapeHtml(text.noClosedTrades)}</p></section>`;
+    }
+    // Running equity per trade answers "when did this go wrong", which a list of
+    // individual results cannot.
+    let cumulative = 0;
+    const rows = trades
+        .map((trade, index) => {
+        const net = num(trade.netPnlUsdt ?? trade.realizedPnlUsdt);
+        cumulative += net ?? 0;
+        const opened = num(trade.openedAtMs) ?? 0;
+        const closed = num(trade.closedAtMs) ?? 0;
+        return `<tr class="${sign(net)}">
+      <td class="n dim">${formatNumber(index + 1)}</td>
+      <td>${escapeHtml(String(trade.side ?? "-"))}</td>
+      <td class="n">${plain(num(trade.quantity), "")}</td>
+      <td class="n">${plain(num(trade.entryPrice), "")}</td>
+      <td class="n">${plain(num(trade.exitPrice), "")}</td>
+      <td class="n">${signed(net, "")}</td>
+      <td class="n">${signed(num(trade.returnPct), "%")}</td>
+      <td class="n dim">${signed(cumulative, "")}</td>
+      <td class="n dim">${plain(num(trade.feesUsdt), "")}</td>
+      <td class="n">${escapeHtml(formatHolding(num(trade.holdingBars) ?? 0))}</td>
+      <td class="mono">${escapeHtml(isoMinute(opened))}</td>
+      <td class="mono">${escapeHtml(closed > 0 ? isoMinute(closed) : "-")}</td>
+    </tr>`;
+    })
+        .join("");
+    return `
+  <section>
+    <h2>${escapeHtml(text.tradesHeading)} <span class="count">${formatNumber(trades.length)}</span></h2>
+    <div class="scroll tall">
+    <table>
+      <thead><tr>
+        <th class="n">#</th><th>${escapeHtml(text.colSide)}</th><th class="n">${escapeHtml(text.colQty)}</th>
+        <th class="n">${escapeHtml(text.colEntry)}</th><th class="n">${escapeHtml(text.colExit)}</th>
+        <th class="n">${escapeHtml(text.colNetPnl)}</th><th class="n">${escapeHtml(text.colReturn)}</th>
+        <th class="n">${escapeHtml(text.colCumulative)}</th><th class="n">${escapeHtml(text.colFees)}</th>
+        <th class="n">${escapeHtml(text.colHeld)}</th>
+        <th>${escapeHtml(text.colOpened)}</th><th>${escapeHtml(text.colClosed)}</th>
+      </tr></thead>
+      <tbody>${rows}</tbody>
+    </table>
+    </div>
+  </section>`;
+}
+/**
+ * The assumptions the run used.
+ *
+ * A return figure means nothing without the leverage, budget, and costs behind
+ * it, and two runs are only comparable when these match.
+ */
+function renderAssumptions(run, text) {
+    const assumptions = run.assumptions;
+    if (!assumptions)
+        return "";
+    const contract = (assumptions.contract ?? {});
+    const fixedBudget = num(assumptions.entryBudgetUsdt);
+    const rows = [
+        [text.settingEquity, `${plain(num(assumptions.initialEquityUsdt), "")} USDT`],
+        [text.settingLeverage, `${plain(num(assumptions.leverage), "")}x`],
+        [text.settingMarginSafety, `${plain(num(assumptions.marginSafetyMultiplier), "")}x`],
+        [
+            text.settingBudgetPct,
+            fixedBudget === null
+                ? asPercent(num(assumptions.entryBudgetPct))
+                : `${plain(fixedBudget, "")} USDT`
+        ],
+        [text.settingTakerFee, asBps(num(assumptions.takerFeeRate))],
+        [text.settingMakerFee, asBps(num(assumptions.makerFeeRate))],
+        [text.settingEntrySlippage, `${plain(num(assumptions.entrySlippageBps), "")} bps`],
+        [text.settingExitSlippage, `${plain(num(assumptions.exitSlippageBps), "")} bps`],
+        [text.settingPreload, `${formatNumber(num(assumptions.preloadBars) ?? 0)}`],
+        [text.settingCloseAtEnd, assumptions.closeAtEnd === false ? text.no : text.yes],
+        [
+            "contract",
+            `${plain(num(contract.contractValue), "")} ${String(contract.contractValueCurrency ?? "")} x${plain(num(contract.contractMultiplier), "")}`
+        ],
+        ["lot / min", `${plain(num(contract.lotSize), "")} / ${plain(num(contract.minSize), "")}`]
+    ];
+    const params = assumptions.params;
+    const paramRow = params && Object.keys(params).length
+        ? `<div><dt>params</dt><dd class="mono">${escapeHtml(Object.entries(params).map(([key, value]) => `${key}=${String(value)}`).join("  "))}</dd></div>`
+        : "";
+    const intervals = Array.isArray(assumptions.intervals) ? assumptions.intervals : [];
+    const intervalRow = intervals.length
+        ? `<div><dt>timeframes</dt><dd class="mono">${escapeHtml(intervals.join(", "))}</dd></div>`
+        : "";
+    return `
+  <section>
+    <h2>${escapeHtml(text.assumptionsHeading)}</h2>
+    <dl>${rows
+        .map(([name, value]) => `<div><dt>${escapeHtml(name)}</dt><dd>${escapeHtml(value)}</dd></div>`)
+        .join("")}${intervalRow}${paramRow}</dl>
+  </section>`;
+}
+function asBps(value) {
+    return value === null ? "-" : `${(value * 10_000).toFixed(2)} bps`;
+}
+function asPercent(value) {
+    return value === null ? "-" : `${(value * 100).toFixed(2)}%`;
+}
+/**
+ * Monthly result table.
+ *
+ * A single total hides whether an edge was steady or came from one month, which
+ * is the difference between a strategy and a lucky window.
+ */
+function renderMonthly(equity, text) {
+    if (equity.length < 2)
+        return "";
+    const months = new Map();
+    for (const point of equity) {
+        const key = new Date(point.timeMs).toISOString().slice(0, 7);
+        const found = months.get(key);
+        if (!found) {
+            months.set(key, { start: point.equityUsdt, end: point.equityUsdt, low: point.equityUsdt, high: point.equityUsdt });
+            continue;
+        }
+        found.end = point.equityUsdt;
+        found.low = Math.min(found.low, point.equityUsdt);
+        found.high = Math.max(found.high, point.equityUsdt);
+    }
+    if (months.size < 2)
+        return "";
+    const rows = [...months.entries()]
+        .map(([month, values]) => {
+        const change = values.start > 0 ? (values.end / values.start - 1) * 100 : 0;
+        const depth = values.high > 0 ? ((values.high - values.low) / values.high) * 100 : 0;
+        return `<tr class="${sign(change)}">
+      <td class="mono">${escapeHtml(month)}</td>
+      <td class="n">${plain(values.start, "")}</td>
+      <td class="n">${plain(values.end, "")}</td>
+      <td class="n">${signed(change, "%")}</td>
+      <td class="n dim">${plain(depth, "%")}</td>
+    </tr>`;
+    })
+        .join("");
+    return `
+  <section>
+    <h2>${escapeHtml(text.monthlyHeading)}</h2>
+    <div class="scroll">
+    <table>
+      <thead><tr><th>${escapeHtml(text.colMonth)}</th><th class="n">${escapeHtml(text.colOpenEquity)}</th><th class="n">${escapeHtml(text.colCloseEquity)}</th><th class="n">${escapeHtml(text.colChange)}</th><th class="n">${escapeHtml(text.colWorstDrop)}</th></tr></thead>
+      <tbody>${rows}</tbody>
+    </table>
+    </div>
+  </section>`;
+}
+/**
+ * Histogram of per-trade results.
+ *
+ * Shows whether an average came from many similar trades or a few outliers — the
+ * same mean can describe either.
+ */
+function renderDistribution(trades, text) {
+    const values = trades
+        .map((trade) => num(trade.netPnlUsdt ?? trade.realizedPnlUsdt))
+        .filter((value) => value !== null);
+    if (values.length < 5)
+        return "";
+    const minimum = Math.min(...values);
+    const maximum = Math.max(...values);
+    if (maximum === minimum)
+        return "";
+    const buckets = 11;
+    const width = (maximum - minimum) / buckets;
+    const counts = new Array(buckets).fill(0);
+    for (const value of values) {
+        const index = Math.min(buckets - 1, Math.floor((value - minimum) / width));
+        counts[index] += 1;
+    }
+    const peak = Math.max(...counts);
+    const bars = counts
+        .map((count, index) => {
+        const from = minimum + index * width;
+        const to = from + width;
+        const share = peak > 0 ? (count / peak) * 100 : 0;
+        const losing = to <= 0;
+        return `<div class="bin">
+      <span class="range mono">${escapeHtml(compact(from))}…${escapeHtml(compact(to))}</span>
+      <span class="track"><span class="fill ${losing ? "down" : "up"}" style="width:${share.toFixed(1)}%"></span></span>
+      <span class="count">${formatNumber(count)}</span>
+    </div>`;
+    })
+        .join("");
+    return `
+  <section>
+    <h2>${escapeHtml(text.distributionHeading)}</h2>
+    <div class="histogram">${bars}</div>
+  </section>`;
+}
+/** Bars as a duration, since "4210 bars" is harder to judge than "2d 22h". */
+function formatHolding(bars) {
+    if (bars < 60)
+        return `${Math.round(bars)}m`;
+    if (bars < 1_440)
+        return `${Math.floor(bars / 60)}h${String(Math.round(bars % 60)).padStart(2, "0")}m`;
+    const days = Math.floor(bars / 1_440);
+    const hours = Math.floor((bars % 1_440) / 60);
+    return `${days}d${String(hours).padStart(2, "0")}h`;
+}
+/**
+ * Reduces a curve for plotting while keeping its shape.
+ *
+ * Each bucket contributes both its highest and lowest point, in the order they
+ * occurred. Picking one point per bucket — even alternating high and low — drops
+ * a spike whenever it lands in a bucket that happens to be looking for the other
+ * extreme, which erases exactly the moves a reader is scanning for.
+ */
+export function downsample(points, target) {
+    if (points.length <= target)
+        return points;
+    const buckets = Math.max(1, Math.floor(target / 2));
+    const size = points.length / buckets;
+    const output = [];
+    for (let index = 0; index < buckets; index += 1) {
+        const start = Math.floor(index * size);
+        const end = Math.min(points.length, Math.floor((index + 1) * size));
+        if (end <= start)
+            continue;
+        let lowest = points[start];
+        let highest = points[start];
+        for (let inner = start; inner < end; inner += 1) {
+            const candidate = points[inner];
+            if (candidate.equityUsdt < lowest.equityUsdt)
+                lowest = candidate;
+            if (candidate.equityUsdt > highest.equityUsdt)
+                highest = candidate;
+        }
+        // Preserve chronology so the line does not zig-zag artificially.
+        const [first, second] = lowest.timeMs <= highest.timeMs ? [lowest, highest] : [highest, lowest];
+        output.push(first);
+        if (second !== first)
+            output.push(second);
+    }
+    return output;
+}
+/** Percentage below the running peak at each point. */
+export function drawdownSeries(points, initialEquity) {
+    let peak = initialEquity;
+    return points.map((point) => {
+        peak = Math.max(peak, point.equityUsdt);
+        return peak > 0 ? ((peak - point.equityUsdt) / peak) * 100 : 0;
+    });
+}
+/** The document's `lang` attribute, so a browser picks the right font stack. */
+function activeLang() {
+    return activeLocale();
+}
+function num(value) {
+    if (value === null || value === undefined)
+        return null;
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+function sign(value) {
+    if (value === null || value === 0)
+        return "flat";
+    return value > 0 ? "up" : "down";
+}
+function signed(value, suffix) {
+    if (value === null)
+        return "-";
+    return `${value > 0 ? "+" : ""}${compact(value)}${suffix}`;
+}
+function plain(value, suffix) {
+    if (value === null)
+        return "-";
+    return `${compact(value)}${suffix}`;
+}
+function compact(value) {
+    const magnitude = Math.abs(value);
+    if (magnitude >= 1_000_000)
+        return `${(value / 1_000_000).toFixed(2)}M`;
+    if (magnitude >= 1_000)
+        return value.toFixed(0);
+    return value.toFixed(2);
+}
+function formatNumber(value) {
+    return Math.round(value).toLocaleString("en-US");
+}
+function isoMinute(ms) {
+    return new Date(ms).toISOString().slice(0, 16).replace("T", " ");
+}
+/**
+ * Escapes text for HTML.
+ *
+ * Strategy names and error messages come from user input, so anything
+ * interpolated into the document is escaped rather than trusted.
+ */
+export function escapeHtml(value) {
+    return value
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+/**
+ * Escapes a value for a single-quoted HTML attribute.
+ *
+ * The series JSON is carried in an attribute rather than a script literal, so a
+ * quote or an angle bracket inside it cannot terminate the attribute or open a
+ * tag. Kept separate from `escapeHtml` because that one escapes double quotes
+ * and would mangle the JSON's own syntax.
+ */
+export function escapeAttribute(value) {
+    return value.replace(/&/g, "&amp;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+const STYLES = `
+:root{--bg:#0f1116;--panel:#171a21;--line:#242833;--text:#e6e8ee;--dim:#8b90a0;--up:#3fb950;--down:#f2777a;--accent:#4f9cf9}
+@media(prefers-color-scheme:light){:root{--bg:#f7f8fa;--panel:#fff;--line:#e3e6ec;--text:#1a1d24;--dim:#6b7280;--up:#1a7f37;--down:#c9372c}}
+*{box-sizing:border-box}
+body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif}
+main{max-width:1080px;margin:0 auto;padding:32px 24px 64px}
+header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line)}
+h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-.01em}
+.sub{margin:4px 0 0;color:var(--dim);font-size:13px}
+.headline{text-align:right}
+.headline .value{display:block;font-size:34px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
+.headline .label{color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
+.up{color:var(--up)}.down{color:var(--down)}.flat{color:var(--dim)}
+.facts{display:flex;gap:28px;flex-wrap:wrap;margin:20px 0 8px;color:var(--dim);font-size:13px}
+.facts span{display:block;text-transform:uppercase;letter-spacing:.06em;font-size:11px}
+.facts strong{color:var(--text);font-weight:550;font-variant-numeric:tabular-nums}
+.warnings{margin:20px 0 0;padding:12px 16px;border-left:3px solid var(--down);background:color-mix(in srgb,var(--down) 8%,transparent);border-radius:0 6px 6px 0}
+.warnings p{margin:4px 0;font-size:13px}
+section{margin-top:32px}
+h2{margin:0 0 14px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--dim)}
+h2 .count{color:var(--dim);font-weight:400}
+dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;margin:0;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
+dl>div{background:var(--panel);padding:12px 14px}
+dt{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
+dd{margin:3px 0 0;font-size:16px;font-weight:550;font-variant-numeric:tabular-nums}
+.chart{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:flex;gap:10px;align-items:stretch}
+.chart.drawdown{margin-top:8px;border-radius:8px}
+.chart svg{flex:1;height:240px;width:100%;display:block}
+.chart.drawdown svg{height:80px}
+.axis{display:flex;flex-direction:column;justify-content:space-between;color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums;min-width:62px;text-align:right}
+.range{margin:8px 0 0;color:var(--dim);font-size:12px}
+.chart{position:relative}
+.chart svg{cursor:crosshair}
+.chart:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+.baseline{stroke:var(--dim);stroke-width:1;stroke-dasharray:3 4;opacity:.5;vector-effect:non-scaling-stroke}
+.crosshair{stroke:var(--dim);stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
+.marker{fill:var(--accent);stroke:var(--panel);stroke-width:1.5;pointer-events:none}
+.tooltip{position:absolute;top:10px;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:12px;min-width:180px;box-shadow:0 4px 16px rgba(0,0,0,.28);z-index:2}
+.tooltip .row{display:flex;justify-content:space-between;gap:14px;padding:1px 0}
+.tooltip .row span{color:var(--dim)}
+.tooltip .row b{font-weight:550;font-variant-numeric:tabular-nums}
+.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
+table{width:100%;border-collapse:collapse;font-size:13px}
+th,td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
+th{background:var(--panel);color:var(--dim);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;position:sticky;top:0}
+tbody tr:last-child td{border-bottom:none}
+td.n{text-align:right;font-variant-numeric:tabular-nums}
+tr.up td:nth-child(5),tr.up td:nth-child(6){color:var(--up)}
+tr.down td:nth-child(5),tr.down td:nth-child(6){color:var(--down)}
+.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
+td.dim{color:var(--dim)}
+.scroll.tall{max-height:520px;overflow-y:auto}
+.histogram{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
+.bin{display:flex;align-items:center;gap:10px;padding:3px 0}
+.bin .range{min-width:132px;color:var(--dim);text-align:right;flex-shrink:0}
+.bin .track{flex:1;height:12px;background:color-mix(in srgb,var(--line) 60%,transparent);border-radius:3px;overflow:hidden}
+.bin .fill{display:block;height:100%;border-radius:3px}
+.bin .fill.up{background:var(--up)}
+.bin .fill.down{background:var(--down)}
+.bin>.count{min-width:44px;text-align:right;color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums;flex-shrink:0}
+.empty{color:var(--dim);font-size:13px}
+footer{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);color:var(--dim);font-size:12px}
+footer p{margin:4px 0}
+`;
+/**
+ * Styles for the comparison document.
+ *
+ * The single-run sheet plus the few rules a matrix table needs, rather than a
+ * second copy: the two documents should not drift apart visually, and a duplicated
+ * sheet is exactly how that happens.
+ */
+export const COMPARE_STYLES = `${STYLES}
+.legend{display:flex;gap:20px;flex-wrap:wrap;margin:20px 0 0;font-size:13px}
+.legend div{display:flex;align-items:center;gap:7px}
+.legend i,th i{display:inline-block;width:10px;height:10px;border-radius:2px;flex-shrink:0}
+th i{margin-right:6px;vertical-align:middle}
+table.matrix th[scope=row]{background:var(--panel);color:var(--dim);text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;text-align:left;position:sticky;left:0}
+table.matrix thead th{text-align:right}
+table.matrix thead th span.dim{display:block;font-weight:400;text-transform:none;letter-spacing:0;font-size:10px}
+td.best{color:var(--up);font-weight:600}
+.chart .tooltip .swatch{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
+.chart .tooltip .row.head{border-bottom:1px solid var(--line);margin-bottom:3px;padding-bottom:3px}
+`;
+//# sourceMappingURL=html.js.map