@loadstrike/loadstrike-sdk 1.0.31001 → 1.0.31601

package/dist/esm/reporting.js

@@ -1,6 +1,9 @@
 import { existsSync, readFileSync } from "node:fs";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
+import { deriveScenarioRates } from "./report-history.js";
+import { emptyLocalReportInput } from "./local-report-input.js";
+import { REPORT_SVG_CSS, REPORT_SVG_SCRIPT } from "./reporting-svg.js";
 const REPORT_EOL = "\n";
 const REPORT_FALLBACK_SVG = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#64b5ff'/><stop offset='1' stop-color='#2f66db'/></linearGradient></defs><rect width='128' height='128' rx='24' fill='#081325'/><path d='M24 94L56 24l16 34 14-22 18 58h-16l-7-23-9 13-10-21-14 31H24z' fill='url(#g)'/></svg>";
 const REPORT_LOGO_CACHE = new Map();
@@ -288,6 +291,40 @@ function loadStrikeNodeTypeTag(value) {
             return asInt(value);
     }
 }
+function loadStrikeNodeTypeLabel(value) {
+    if (value && typeof value === "object" && !Array.isArray(value)) {
+        const record = value;
+        if (record.tag !== undefined || record.Tag !== undefined) {
+            return ["Single node", "Coordinator", "Agent"][loadStrikeNodeTypeTag(value)]
+                ?? "Unknown";
+        }
+        return "Unknown";
+    }
+    const text = asString(value).trim();
+    return {
+        SingleNode: "Single node",
+        Coordinator: "Coordinator",
+        Agent: "Agent",
+        "0": "Single node",
+        "1": "Coordinator",
+        "2": "Agent"
+    }[text] ?? (text || "Unknown");
+}
+function loadStrikeRuntimeVersionLabel(nodeInfo) {
+    for (const [camelKey, pascalKey] of [
+        ["runtimeVersion", "RuntimeVersion"],
+        ["pythonVersion", "PythonVersion"],
+        ["nodeVersion", "NodeVersion"],
+        ["dotNetVersion", "DotNetVersion"],
+        ["engineVersion", "EngineVersion"]
+    ]) {
+        const value = asString(reportValue(nodeInfo, camelKey, pascalKey)).trim();
+        if (value) {
+            return value;
+        }
+    }
+    return "Unavailable";
+}
 function parseUtcDate(value) {
     if (value instanceof Date && !Number.isNaN(value.getTime())) {
         return value;
@@ -417,6 +454,9 @@ function buildDotnetTableHtml(rows, wrapInCard = true) {
     return parts.join("");
 }
 function formatReportTableHeader(header) {
+    if (header === "UnmatchedDestination") {
+        return "Unmatched Destination";
+    }
     if (header === "LatencyStdDev") {
         return "LatencyStdDev (ms)";
     }
@@ -514,21 +554,14 @@ function buildFailedEventRows(plugins) {
 }
 function tryParseReportFloat(value) {
     const parsed = Number.parseFloat(asString(value));
-    return Number.isFinite(parsed) ? parsed : undefined;
+    return Number.isFinite(parsed) && parsed >= 0 ? parsed : undefined;
 }
-function meanNumeric(values) {
-    if (!values.length) {
+function percentileFromOrdered(values, percentileValue) {
+    if (values.length === 0) {
         return 0;
     }
-    return values.reduce((sum, value) => sum + value, 0) / values.length;
-}
-function percentileNumeric(values, percentileValue) {
-    if (!values.length) {
-        return 0;
-    }
-    const ordered = [...values].sort((left, right) => left - right);
-    const index = Math.min(Math.max(Math.ceil(percentileValue * ordered.length) - 1, 0), ordered.length - 1);
-    return ordered[index];
+    const index = Math.min(Math.max(Math.ceil(percentileValue * values.length) - 1, 0), values.length - 1);
+    return values[index];
 }
 function buildGroupedCorrelationChartPayloads(rows) {
     const grouped = new Map();
@@ -546,33 +579,48 @@ function buildGroupedCorrelationChartPayloads(rows) {
     }
     return [...grouped.values()]
         .filter((group) => group.rows.some((row) => tryParseReportFloat(row.LatencyP50Ms) !== undefined
+        || tryParseReportFloat(row.LatencyP75Ms) !== undefined
         || tryParseReportFloat(row.LatencyP80Ms) !== undefined
         || tryParseReportFloat(row.LatencyP85Ms) !== undefined
         || tryParseReportFloat(row.LatencyP90Ms) !== undefined
         || tryParseReportFloat(row.LatencyP95Ms) !== undefined
-        || tryParseReportFloat(row.LatencyP99Ms) !== undefined))
+        || tryParseReportFloat(row.LatencyP99Ms) !== undefined
+        || tryParseReportFloat(row.LatencyMaxMs ?? row.LatencyMax) !== undefined))
         .sort((left, right) => left.key[0] === right.key[0]
         ? left.key[1].localeCompare(right.key[1])
         : left.key[0].localeCompare(right.key[0]))
         .map((group, index) => ({
         title: `${group.key[0]}: ${group.key[1]}`,
-        subtitle: group.rows.length > 1 ? `Averaged across ${group.rows.length} grouped rows.` : "Single grouped row.",
+        subtitle: group.rows.length > 1
+            ? `${group.rows.length} distinct scenario and destination rows.`
+            : "Single grouped row.",
         chart: {
-            labels: ["P50", "P80", "P85", "P90", "P95", "P99"],
-            series: [
-                {
-                    name: "Latency",
-                    color: ["#38bdf8", "#22c55e", "#f59e0b", "#a855f7", "#f43f5e", "#06b6d4", "#14b8a6", "#eab308", "#818cf8", "#84cc16"][index % 10],
+            labels: ["P50", "P75", "P80", "P85", "P90", "P95", "P99", "Max"],
+            series: [...group.rows]
+                .sort((left, right) => {
+                const leftIdentity = `${readReportRowText(left, "Scenario")}|${readReportRowText(left, "Destination")}`;
+                const rightIdentity = `${readReportRowText(right, "Scenario")}|${readReportRowText(right, "Destination")}`;
+                return leftIdentity.localeCompare(rightIdentity);
+            })
+                .map((row, rowIndex) => {
+                const scenario = readReportRowText(row, "Scenario") || "<scenario unavailable>";
+                const destination = readReportRowText(row, "Destination") || "<destination unavailable>";
+                const name = `${scenario} | ${destination}${rowIndex > 0 ? ` (row ${rowIndex + 1})` : ""}`;
+                return {
+                    name,
+                    color: ["#38bdf8", "#22c55e", "#f59e0b", "#a855f7", "#f43f5e", "#06b6d4", "#14b8a6", "#eab308", "#818cf8", "#84cc16"][(index + rowIndex) % 10],
                     values: [
-                        meanNumeric(group.rows.map((row) => tryParseReportFloat(row.LatencyP50Ms)).filter((value) => value !== undefined)),
-                        meanNumeric(group.rows.map((row) => tryParseReportFloat(row.LatencyP80Ms)).filter((value) => value !== undefined)),
-                        meanNumeric(group.rows.map((row) => tryParseReportFloat(row.LatencyP85Ms)).filter((value) => value !== undefined)),
-                        meanNumeric(group.rows.map((row) => tryParseReportFloat(row.LatencyP90Ms)).filter((value) => value !== undefined)),
-                        meanNumeric(group.rows.map((row) => tryParseReportFloat(row.LatencyP95Ms)).filter((value) => value !== undefined)),
-                        meanNumeric(group.rows.map((row) => tryParseReportFloat(row.LatencyP99Ms)).filter((value) => value !== undefined))
+                        tryParseReportFloat(row.LatencyP50Ms) ?? null,
+                        tryParseReportFloat(row.LatencyP75Ms) ?? null,
+                        tryParseReportFloat(row.LatencyP80Ms) ?? null,
+                        tryParseReportFloat(row.LatencyP85Ms) ?? null,
+                        tryParseReportFloat(row.LatencyP90Ms) ?? null,
+                        tryParseReportFloat(row.LatencyP95Ms) ?? null,
+                        tryParseReportFloat(row.LatencyP99Ms) ?? null,
+                        tryParseReportFloat(row.LatencyMaxMs ?? row.LatencyMax) ?? null
                     ]
-                }
-            ]
+                };
+            })
         }
     }));
 }
@@ -595,7 +643,6 @@ function buildUngroupedCorrelationChartPayload(rows) {
             grouped.set(key, { scenario, destination, statusCode, latencies: [latency] });
         }
     }
-    const nameCount = new Map();
     const series = [...grouped.values()]
         .sort((left, right) => {
         const leftKey = `${left.scenario}|${left.destination}|${left.statusCode}`;
@@ -603,25 +650,24 @@ function buildUngroupedCorrelationChartPayload(rows) {
         return leftKey.localeCompare(rightKey);
     })
         .map((row, index) => {
-        const baseName = row.statusCode.trim() || "status";
-        const key = baseName.toLowerCase();
-        const count = nameCount.get(key) ?? 0;
-        nameCount.set(key, count + 1);
+        const orderedLatencies = [...row.latencies].sort((left, right) => left - right);
         return {
-            name: count === 0 ? baseName : `${baseName}-${count + 1}`,
+            name: `${row.scenario} | ${row.destination} | status ${row.statusCode}`,
             color: ["#38bdf8", "#22c55e", "#f59e0b", "#a855f7", "#f43f5e", "#06b6d4", "#14b8a6", "#eab308", "#818cf8", "#84cc16"][index % 10],
             values: [
-                percentileNumeric(row.latencies, 0.50),
-                percentileNumeric(row.latencies, 0.80),
-                percentileNumeric(row.latencies, 0.85),
-                percentileNumeric(row.latencies, 0.90),
-                percentileNumeric(row.latencies, 0.95),
-                percentileNumeric(row.latencies, 0.99)
+                percentileFromOrdered(orderedLatencies, 0.50),
+                percentileFromOrdered(orderedLatencies, 0.75),
+                percentileFromOrdered(orderedLatencies, 0.80),
+                percentileFromOrdered(orderedLatencies, 0.85),
+                percentileFromOrdered(orderedLatencies, 0.90),
+                percentileFromOrdered(orderedLatencies, 0.95),
+                percentileFromOrdered(orderedLatencies, 0.99),
+                orderedLatencies[orderedLatencies.length - 1]
             ]
         };
     });
     return {
-        labels: ["P50", "P80", "P85", "P90", "P95", "P99"],
+        labels: ["P50", "P75", "P80", "P85", "P90", "P95", "P99", "Max"],
         series
     };
 }
@@ -757,8 +803,34 @@ function hasMeasurementData(measurement) {
         asString(reportValue(code, "statusCode", "StatusCode")).trim().length > 0 ||
         asString(reportValue(code, "message", "Message")).trim().length > 0);
 }
-function appendChartCard(parts, id, title) {
-    appendReportLine(parts, `<div class="chart-card"><h3>${escapeHtml(title)}</h3><canvas id="${escapeHtml(id)}" class="chart-canvas"></canvas></div>`);
+function appendChartCard(parts, id, title, source, kind, unit, seriesLabel, compatibilityClass = "", extraHostAttributes = "") {
+    const cardClass = compatibilityClass.includes("correlation")
+        ? "chart-card correlation-chart-card"
+        : "chart-card";
+    appendReportLine(parts, `<div class="${cardClass}" data-chart-title="${escapeHtml(title)}"><h3>${escapeHtml(title)}</h3>`);
+    appendReportLine(parts, "<div class=\"chart-actions\" aria-label=\"Chart controls\">");
+    for (const [action, label] of [
+        ["zoom-in", "Zoom in"],
+        ["zoom-out", "Zoom out"],
+        ["pan-left", "Pan left"],
+        ["pan-right", "Pan right"],
+        ["reset", "Reset"],
+        ["expand", "Expand"]
+    ]) {
+        appendReportLine(parts, `<button type="button" class="chart-action" data-chart-action="${action}" aria-label="${label}">${label}</button>`);
+    }
+    appendReportLine(parts, "</div>");
+    appendReportLine(parts, `<div class="chart-host" data-loadstrike-chart-engine="svg-v2" data-chart-source="${escapeHtml(source)}" data-chart-kind="${escapeHtml(kind)}" data-chart-unit="${escapeHtml(unit)}" data-series-label="${escapeHtml(seriesLabel)}" data-chart-title="${escapeHtml(title)}"${extraHostAttributes ? ` ${extraHostAttributes}` : ""}>`);
+    appendReportLine(parts, `<svg id="${escapeHtml(id)}" class="chart-canvas${compatibilityClass ? ` ${escapeHtml(compatibilityClass)}` : ""}" role="img" aria-label="${escapeHtml(title)}" tabindex="0" viewBox="0 0 720 320" preserveAspectRatio="xMidYMid meet"><title>${escapeHtml(title)}</title></svg>`);
+    appendReportLine(parts, "<div class=\"chart-tooltip\" data-chart-tooltip role=\"status\" aria-live=\"polite\" hidden></div>");
+    appendReportLine(parts, "<div class=\"chart-legend\" data-chart-legend aria-label=\"Chart legend\"></div>");
+    appendReportLine(parts, "</div></div>");
+}
+function appendChartCollectionTools(parts) {
+    appendReportLine(parts, "<div class=\"chart-collection-tools\">");
+    appendReportLine(parts, "<label>Search charts<input type=\"search\" data-chart-search placeholder=\"Filter by chart title\" /></label>");
+    appendReportLine(parts, "<label>Chart size<select data-chart-grid-size><option value=\"compact\">Compact</option><option value=\"comfortable\" selected>Comfortable</option><option value=\"spacious\">Spacious</option></select></label>");
+    appendReportLine(parts, "</div>");
 }
 function hasChartPointData(points) {
     return Array.isArray(points) && points.length > 0;
@@ -769,7 +841,7 @@ function hasPieChartData(points) {
 function hasLatencyTrendData(chart) {
     const labels = reportArray(chart, "labels", "Labels");
     const series = reportArray(chart, "series", "Series");
-    return labels.length > 0 && series.some((entry) => reportArray(entry, "values", "Values").some((value) => Number.isFinite(asFloat(value))));
+    return labels.length > 0 && series.some((entry) => reportArray(entry, "values", "Values").some((value) => value !== null && value !== undefined && Number.isFinite(Number(value)) && Number(value) >= 0));
 }
 function hasNonEmptyHints(plugin) {
     return reportArray(plugin, "hints", "Hints").some((hint) => asString(hint).trim().length > 0);
@@ -912,11 +984,169 @@ function buildDotnetStatusCodeClassChart(scenarios) {
         { label: "Other", value: buckets.Other, color: "#8b5cf6" }
     ].filter((entry) => entry.value > 0);
 }
-function buildDotnetChartData(nodeStats) {
+function genuineCombinedMeasurement(source) {
+    const value = reportValue(source, "allMeasurement", "AllMeasurement");
+    return value && typeof value === "object" && !Array.isArray(value)
+        ? value
+        : undefined;
+}
+function measurementHasObservations(measurement) {
+    if (!measurement) {
+        return false;
+    }
+    const request = reportObject(measurement, "request", "Request");
+    if (asInt(reportValue(request, "count", "Count")) > 0) {
+        return true;
+    }
+    const count64 = asString(reportValue(measurement, "count64", "Count64")).trim();
+    return /^\d+$/.test(count64) && /[1-9]/.test(count64);
+}
+function validMeasurementLatency(measurement, camelKey, pascalKey) {
+    if (!measurement) {
+        return null;
+    }
+    if (!measurementHasObservations(measurement)) {
+        return null;
+    }
+    const value = Number(reportValue(reportObject(measurement, "latency", "Latency"), camelKey, pascalKey));
+    return Number.isFinite(value) && value >= 0 ? value : null;
+}
+function measurementUsesApproximateHistogram(measurement) {
+    if (!measurement) {
+        return false;
+    }
+    const mode = asString(reportValue(measurement, "distributionMode", "DistributionMode")).toLocaleLowerCase();
+    const maxRelativeError = asFloat(reportValue(measurement, "maxRelativeError", "MaxRelativeError"));
+    return maxRelativeError > 0
+        || mode.includes("quantized")
+        || mode.includes("approx");
+}
+function buildOutcomeLatencySeries(scenarios, percentileName, camelKey, pascalKey) {
+    return [
+        {
+            outcome: "All",
+            color: "#8b5cf6",
+            measurement: (scenario) => genuineCombinedMeasurement(scenario)
+        },
+        {
+            outcome: "OK",
+            color: "#18a957",
+            measurement: (scenario) => reportObject(scenario, "ok", "Ok")
+        },
+        {
+            outcome: "Failed",
+            color: "#d14343",
+            measurement: (scenario) => reportObject(scenario, "fail", "Fail")
+        }
+    ].map((candidate) => {
+        const measurements = scenarios.map(candidate.measurement);
+        const values = measurements.map((measurement) => validMeasurementLatency(measurement, camelKey, pascalKey));
+        const approximate = measurements.some((measurement, index) => values[index] !== null && measurementUsesApproximateHistogram(measurement));
+        return {
+            name: `${candidate.outcome} ${percentileName}${approximate ? " (approx.)" : ""}`,
+            color: candidate.color,
+            values
+        };
+    }).filter((series) => series.values.some((value) => value !== null));
+}
+function buildHistoryChartData(points) {
+    if (!points.length) {
+        return {
+            cumulativeRequestsHistory: { labels: [], series: [] },
+            achievedRequestRateHistory: { labels: [], series: [] },
+            cumulativeBytesHistory: { labels: [], series: [] },
+            historyLatencyCharts: []
+        };
+    }
+    const ordered = [...points].sort((left, right) => left.elapsedSeconds - right.elapsedSeconds);
+    const labels = ordered.map((point) => `${Number(point.elapsedSeconds.toFixed(3))}s`);
+    const scenarioNames = [...new Set(ordered.flatMap((point) => [...point.scenarios]
+            .sort((left, right) => (left.sortIndex ?? 0) - (right.sortIndex ?? 0))
+            .map((scenario) => scenario.scenarioName)))];
+    const palette = ["#38bdf8", "#22c55e", "#f59e0b", "#a855f7", "#f43f5e", "#14b8a6", "#eab308", "#818cf8", "#06b6d4", "#84cc16"];
+    const findScenario = (point, scenarioName) => point.scenarios.find((scenario) => scenario.scenarioName === scenarioName);
+    const totalCount = (scenario) => scenario?.all?.count ?? ((scenario?.ok?.count ?? 0) + (scenario?.failed?.count ?? 0));
+    const totalBytes = (scenario) => scenario?.all?.bytes ?? ((scenario?.ok?.bytes ?? 0) + (scenario?.failed?.bytes ?? 0));
+    const cumulativeRequestsHistory = {
+        labels,
+        series: scenarioNames.map((scenarioName, index) => ({
+            name: scenarioName,
+            color: palette[index % palette.length],
+            values: ordered.map((point) => {
+                const scenario = findScenario(point, scenarioName);
+                return scenario ? totalCount(scenario) : null;
+            })
+        }))
+    };
+    const cumulativeBytesHistory = {
+        labels,
+        series: scenarioNames.map((scenarioName, index) => ({
+            name: scenarioName,
+            color: palette[index % palette.length],
+            values: ordered.map((point) => {
+                const scenario = findScenario(point, scenarioName);
+                return scenario ? totalBytes(scenario) : null;
+            })
+        }))
+    };
+    const ratesByScenario = new Map(deriveScenarioRates(ordered).map((series) => [series.scenarioName, series.values]));
+    const achievedRequestRateHistory = {
+        labels,
+        series: scenarioNames.map((scenarioName, index) => ({
+            name: scenarioName,
+            color: palette[index % palette.length],
+            values: ratesByScenario.get(scenarioName) ?? labels.map(() => null)
+        }))
+    };
+    const outcomes = [
+        ["All", (scenario) => scenario.all],
+        ["OK", (scenario) => scenario.ok],
+        ["Failed", (scenario) => scenario.failed]
+    ];
+    const percentiles = [
+        ["P50", "percent50Ms"],
+        ["P75", "percent75Ms"],
+        ["P95", "percent95Ms"],
+        ["P99", "percent99Ms"]
+    ];
+    const historyLatencyCharts = scenarioNames.map((scenarioName, scenarioIndex) => {
+        let seriesIndex = 0;
+        const series = outcomes.flatMap(([outcomeName, measurementSelector]) => percentiles.map(([percentileName, percentileKey]) => {
+            const measurements = ordered.map((point) => {
+                const scenario = findScenario(point, scenarioName);
+                return scenario ? measurementSelector(scenario) : undefined;
+            });
+            const values = measurements.map((measurement) => {
+                const value = measurement?.[percentileKey];
+                return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : null;
+            });
+            const approximate = measurements.some((measurement, index) => values[index] !== null && measurement?.approximate === true);
+            return {
+                name: `${outcomeName} ${percentileName}${approximate ? " (approx.)" : ""}`,
+                color: palette[(scenarioIndex + seriesIndex++) % palette.length],
+                values
+            };
+        }).filter((series) => series.values.some((value) => value !== null)));
+        return {
+            title: `Cumulative Latency - ${scenarioName}`,
+            chart: { labels, series }
+        };
+    }).filter((item) => item.chart.series.length > 0);
+    return {
+        cumulativeRequestsHistory,
+        achievedRequestRateHistory,
+        cumulativeBytesHistory,
+        historyLatencyCharts
+    };
+}
+function buildDotnetChartData(nodeStats, localReportInput) {
     const scenarios = reportScenarios(nodeStats);
-    const combinedScenarios = scenarios
-        .map((scenario) => ({ scenario, measurement: combinedMeasurement(scenario) }))
+    const genuineCombinedScenarios = scenarios
+        .map((scenario) => ({ scenario, measurement: genuineCombinedMeasurement(scenario) }))
         .filter((item) => item.measurement !== undefined);
+    const history = localReportInput.history.status === "available"
+        ? buildHistoryChartData(localReportInput.history.points)
+        : buildHistoryChartData([]);
     return {
         overallOutcome: [
             { label: "OK", value: reportTotalOkCount(nodeStats, scenarios), color: "#18a957" },
@@ -927,11 +1157,15 @@ function buildDotnetChartData(nodeStats) {
             value: reportRequestCountValue(scenario),
             color: "#3b82f6"
         })),
-        scenarioP95Latency: combinedScenarios.map(({ scenario, measurement }) => ({
+        scenarioP95Latency: genuineCombinedScenarios.map(({ scenario, measurement }) => ({
             label: asString(reportValue(scenario, "scenarioName", "ScenarioName")),
             value: asFloat(reportValue(reportObject(measurement, "latency", "Latency"), "percent95", "Percent95")),
             color: "#8b5cf6"
         })),
+        scenarioP95LatencyByOutcome: {
+            labels: scenarios.map((scenario) => asString(reportValue(scenario, "scenarioName", "ScenarioName"))),
+            series: buildOutcomeLatencySeries(scenarios, "P95", "percent95", "Percent95")
+        },
         scenarioRps: scenarios.map((scenario) => ({
             label: asString(reportValue(scenario, "scenarioName", "ScenarioName")),
             value: reportDurationSeconds(reportDurationValue(scenario)) <= 0
@@ -953,17 +1187,18 @@ function buildDotnetChartData(nodeStats) {
         })),
         statusCodeClasses: buildDotnetStatusCodeClassChart(scenarios),
         scenarioLatencyTrend: {
-            labels: combinedScenarios.map(({ scenario }) => asString(reportValue(scenario, "scenarioName", "ScenarioName"))),
+            labels: scenarios.map((scenario) => asString(reportValue(scenario, "scenarioName", "ScenarioName"))),
             series: [
-                { name: "P50", color: "#38bdf8", values: combinedScenarios.map(({ measurement }) => asFloat(reportValue(reportObject(measurement, "latency", "Latency"), "percent50", "Percent50"))) },
-                { name: "P75", color: "#22c55e", values: combinedScenarios.map(({ measurement }) => asFloat(reportValue(reportObject(measurement, "latency", "Latency"), "percent75", "Percent75"))) },
-                { name: "P95", color: "#f59e0b", values: combinedScenarios.map(({ measurement }) => asFloat(reportValue(reportObject(measurement, "latency", "Latency"), "percent95", "Percent95"))) },
-                { name: "P99", color: "#f43f5e", values: combinedScenarios.map(({ measurement }) => asFloat(reportValue(reportObject(measurement, "latency", "Latency"), "percent99", "Percent99"))) }
+                ...buildOutcomeLatencySeries(scenarios, "P50", "percent50", "Percent50"),
+                ...buildOutcomeLatencySeries(scenarios, "P75", "percent75", "Percent75"),
+                ...buildOutcomeLatencySeries(scenarios, "P95", "percent95", "Percent95"),
+                ...buildOutcomeLatencySeries(scenarios, "P99", "percent99", "Percent99")
             ]
-        }
+        },
+        ...history
     };
 }
-function buildDotnetSummaryHtml(nodeStats) {
+function buildDotnetSummaryHtml(nodeStats, localReportInput) {
     const scenarios = reportScenarios(nodeStats);
     const allRequests = reportTotalRequestCount(nodeStats, scenarios);
     const allOk = reportTotalOkCount(nodeStats, scenarios);
@@ -985,11 +1220,19 @@ function buildDotnetSummaryHtml(nodeStats) {
             ? scenario
             : winner;
     }, undefined);
-    const latencyRows = scenarios.flatMap((scenario) => [
-        buildSummaryLatencyRow(asString(reportValue(scenario, "scenarioName", "ScenarioName")), "OK", reportObject(scenario, "ok", "Ok")),
-        buildSummaryLatencyRow(asString(reportValue(scenario, "scenarioName", "ScenarioName")), "FAIL", reportObject(scenario, "fail", "Fail"))
-    ]);
-    const chartData = buildDotnetChartData(nodeStats);
+    const latencyRows = [];
+    for (const scenario of scenarios) {
+        const scenarioName = asString(reportValue(scenario, "scenarioName", "ScenarioName"));
+        const ok = reportObject(scenario, "ok", "Ok");
+        const fail = reportObject(scenario, "fail", "Fail");
+        if (measurementHasObservations(ok)) {
+            latencyRows.push(buildSummaryLatencyRow(scenarioName, "OK", ok));
+        }
+        if (measurementHasObservations(fail)) {
+            latencyRows.push(buildSummaryLatencyRow(scenarioName, "FAIL", fail));
+        }
+    }
+    const chartData = buildDotnetChartData(nodeStats, localReportInput);
     const testInfo = reportObject(nodeStats, "testInfo", "TestInfo");
     const nodeInfo = reportObject(nodeStats, "nodeInfo", "NodeInfo");
     const totalBytes = reportTotalBytes(nodeStats, scenarios);
@@ -1002,39 +1245,62 @@ function buildDotnetSummaryHtml(nodeStats) {
     appendReportLine(parts, `<div class="stat-card"><div class="stat-label">Duration</div><div class="stat-value">${escapeHtml(formatDotnetTimeSpan(reportDurationValue(nodeStats)))}</div></div>`);
     appendReportLine(parts, `<div class="stat-card"><div class="stat-label">Total Bytes</div><div class="stat-value">${totalBytes}</div></div>`);
     appendReportLine(parts, `<div class="stat-card"><div class="stat-label">Top Scenario</div><div class="stat-value">${escapeHtml(topScenario ? reportValue(topScenario, "scenarioName", "ScenarioName") : "n/a")}</div></div>`);
-    appendReportLine(parts, `<div class="stat-card"><div class="stat-label">Node</div><div class="stat-value">${loadStrikeNodeTypeTag(reportValue(nodeInfo, "nodeType", "NodeType"))}</div></div>`);
+    appendReportLine(parts, `<div class="stat-card"><div class="stat-label">Node</div><div class="stat-value">${escapeHtml(loadStrikeNodeTypeLabel(reportValue(nodeInfo, "nodeType", "NodeType")))}</div></div>`);
     appendReportLine(parts, "</div>");
+    const hasApproximateLatencySeries = [
+        ...reportArray(reportObject(chartData, "scenarioP95LatencyByOutcome"), "series"),
+        ...reportArray(reportObject(chartData, "scenarioLatencyTrend"), "series"),
+        ...reportArray(chartData, "historyLatencyCharts")
+            .flatMap((item) => reportArray(reportObject(item, "chart"), "series"))
+    ].some((series) => asString(reportValue(series, "name")).endsWith(" (approx.)"));
+    if (hasApproximateLatencySeries) {
+        appendReportLine(parts, "<p class=\"meta-note\">Series marked '(approx.)' use bounded native histogram estimates; completed request and transferred-byte totals remain exact.</p>");
+    }
     const charts = [];
     if (hasPieChartData(chartData.overallOutcome)) {
-        appendChartCard(charts, "chart-outcome", "Success vs Fail");
+        appendChartCard(charts, "chart-outcome", "Success vs Fail", "overallOutcome", "donut", "requests", "Outcome");
     }
     if (hasChartPointData(chartData.scenarioRequests)) {
-        appendChartCard(charts, "chart-scenario-requests", "Requests by Scenario");
+        appendChartCard(charts, "chart-scenario-requests", "Requests by Scenario", "scenarioRequests", "bar", "requests", "Requests");
     }
-    if (hasChartPointData(chartData.scenarioP95Latency)) {
-        appendChartCard(charts, "chart-scenario-p95", "P95 Latency by Scenario (ms)");
+    if (hasLatencyTrendData(chartData.scenarioP95LatencyByOutcome)) {
+        appendChartCard(charts, "chart-scenario-p95", "P95 Latency by Scenario (ms)", "scenarioP95LatencyByOutcome", "bar", "ms", "P95");
     }
     if (hasChartPointData(chartData.scenarioRps)) {
-        appendChartCard(charts, "chart-scenario-rps", "RPS by Scenario");
+        appendChartCard(charts, "chart-scenario-rps", "RPS by Scenario", "scenarioRps", "bar", "req/s", "Rate");
     }
     if (hasChartPointData(chartData.scenarioFailRate)) {
-        appendChartCard(charts, "chart-scenario-fail-rate", "Failure Rate by Scenario (%)");
+        appendChartCard(charts, "chart-scenario-fail-rate", "Failure Rate by Scenario (%)", "scenarioFailRate", "bar", "%", "Failure rate");
     }
     if (hasChartPointData(chartData.scenarioBytes)) {
-        appendChartCard(charts, "chart-scenario-bytes", "Bytes by Scenario");
+        appendChartCard(charts, "chart-scenario-bytes", "Bytes by Scenario", "scenarioBytes", "bar", "bytes", "Transferred");
     }
     if (hasPieChartData(chartData.statusCodeClasses)) {
-        appendChartCard(charts, "chart-status-code-classes", "Status Code Class Mix");
+        appendChartCard(charts, "chart-status-code-classes", "Status Code Class Mix", "statusCodeClasses", "donut", "responses", "Status");
     }
     if (hasLatencyTrendData(chartData.scenarioLatencyTrend)) {
-        appendChartCard(charts, "chart-scenario-latency-lines", "Latency Trend by Scenario (ms)");
+        appendChartCard(charts, "chart-scenario-latency-lines", "Latency Percentile Profiles by Scenario (ms)", "scenarioLatencyTrend", "line", "ms", "Latency");
+    }
+    if (hasLatencyTrendData(chartData.cumulativeRequestsHistory)) {
+        appendChartCard(charts, "chart-history-requests", "Cumulative Completed Requests by Scenario", "cumulativeRequestsHistory", "line", "requests", "Requests");
+    }
+    if (hasLatencyTrendData(chartData.achievedRequestRateHistory)) {
+        appendChartCard(charts, "chart-history-rate", "Achieved Request Rate by Scenario", "achievedRequestRateHistory", "line", "req/s", "Rate");
+    }
+    if (hasLatencyTrendData(chartData.cumulativeBytesHistory)) {
+        appendChartCard(charts, "chart-history-bytes", "Cumulative Transferred Bytes by Scenario", "cumulativeBytesHistory", "line", "bytes", "Transferred");
+    }
+    for (const [historyIndex, historyChart] of chartData.historyLatencyCharts.entries()) {
+        appendChartCard(charts, `chart-history-latency-${historyIndex}`, asString(historyChart.title), "historyLatencyCharts", "line", "ms", "Latency", "", `data-chart-index="${historyIndex}"`);
     }
     if (charts.length > 0) {
-        appendReportLine(parts, "<div class=\"card\">");
+        appendReportLine(parts, "<div class=\"card chart-collection\" data-chart-collection data-grid-size=\"comfortable\">");
         appendReportLine(parts, "<h2>Charts</h2>");
+        appendChartCollectionTools(parts);
         appendReportLine(parts, "<div class=\"chart-grid\">");
         parts.push(...charts);
         appendReportLine(parts, "</div>");
+        appendReportLine(parts, "<div class=\"chart-empty\" data-chart-empty>No charts match this search.</div>");
         appendReportLine(parts, "</div>");
     }
     if (latencyRows.length > 0) {
@@ -1051,7 +1317,7 @@ function buildDotnetSummaryHtml(nodeStats) {
     appendReportLine(parts, `<tr><th>Created (UTC)</th><td>${escapeHtml(formatDotnetDateTime(reportValue(testInfo, "createdUtc", "CreatedUtc", "created", "Created")))}</td></tr>`);
     appendReportLine(parts, `<tr><th>Machine</th><td>${escapeHtml(reportValue(nodeInfo, "machineName", "MachineName"))}</td></tr>`);
     appendReportLine(parts, `<tr><th>OS</th><td>${escapeHtml(reportValue(nodeInfo, "os", "OS"))}</td></tr>`);
-    appendReportLine(parts, `<tr><th>DotNet</th><td>${escapeHtml(reportValue(nodeInfo, "dotNetVersion", "DotNetVersion"))}</td></tr>`);
+    appendReportLine(parts, `<tr><th>Runtime</th><td>${escapeHtml(loadStrikeRuntimeVersionLabel(nodeInfo))}</td></tr>`);
     appendReportLine(parts, `<tr><th>Processor</th><td>${escapeHtml(reportValue(nodeInfo, "processor", "Processor"))}</td></tr>`);
     appendReportLine(parts, `<tr><th>Cores</th><td>${asInt(reportValue(nodeInfo, "coresCount", "CoresCount"))}</td></tr>`);
     appendReportLine(parts, `<tr><th>Operation</th><td>${escapeHtml(reportValue(nodeInfo, "currentOperation", "CurrentOperation"))}</td></tr>`);
@@ -1103,8 +1369,30 @@ function buildDotnetThresholdHtml(nodeStats) {
 function buildDotnetMetricHtml(nodeStats) {
     return buildDotnetTableHtml(buildDotnetMetricRows(nodeStats));
 }
-function buildDotnetGeneratorDeliveryHtml(nodeStats) {
-    const warnings = reportArray(nodeStats, "generatorWarnings", "GeneratorWarnings");
+function reportHistoryUnavailableReason(localReportInput) {
+    if (localReportInput.history.status === "available") {
+        return "";
+    }
+    switch (localReportInput.history.reasonCategory) {
+        case "capture_failure":
+            return "History capture became unavailable.";
+        case "budget_pressure":
+            return "History was omitted because the report history budget was exceeded.";
+        case "distributed_temporal_aggregation_unavailable":
+            return "Temporal aggregation is unavailable for distributed results.";
+    }
+}
+function buildDotnetGeneratorDeliveryHtml(nodeStats, localReportInput = emptyLocalReportInput()) {
+    const warnings = [
+        ...reportArray(nodeStats, "generatorWarnings", "GeneratorWarnings"),
+        ...(localReportInput.history.status === "unavailable"
+            ? [{
+                    code: "report_history_unavailable",
+                    count64: "1",
+                    reasonCategory: localReportInput.history.reasonCategory
+                }]
+            : [])
+    ];
     const stats = reportObject(nodeStats, "schedulerStats", "SchedulerStats");
     const topLevelSegments = reportArray(nodeStats, "schedulerSegments", "SchedulerSegments");
     const segments = topLevelSegments.length > 0
@@ -1119,6 +1407,9 @@ function buildDotnetGeneratorDeliveryHtml(nodeStats) {
     appendReportLine(parts, "<div class=\"card\">");
     appendReportLine(parts, "<h2>Generator Delivery</h2>");
     appendReportLine(parts, "<p>Application failures remain separate from generator and reporting warnings. Dropped arrivals, unavailable worker slots, and raw observation loss are not synthetic SUT errors.</p>");
+    if (localReportInput.history.status === "unavailable") {
+        appendReportLine(parts, `<p>${escapeHtml(reportHistoryUnavailableReason(localReportInput))}</p>`);
+    }
     appendReportLine(parts, "<div class=\"card-grid\">");
     for (const [label, value] of [
         ["Configured Max In Flight", asInt(reportValue(stats, "configuredMaxInFlight", "ConfiguredMaxInFlight"))],
@@ -1135,7 +1426,7 @@ function buildDotnetGeneratorDeliveryHtml(nodeStats) {
     }
     appendReportLine(parts, "</div></div>");
     if (warnings.length) {
-        appendReportLine(parts, "<div class=\"card\"><h2>Generator Warnings</h2>");
+        appendReportLine(parts, "<div class=\"card\"><h2>Generator and Reporting Warnings</h2>");
         parts.push(buildDotnetTableHtml(warnings, false));
         appendReportLine(parts, "</div>");
     }
@@ -1160,7 +1451,7 @@ function buildDotnetGeneratorDeliveryHtml(nodeStats) {
     }
     return parts.join("");
 }
-function hasDotnetGeneratorDeliveryData(nodeStats) {
+function hasDotnetGeneratorDeliveryData(nodeStats, localReportInput = emptyLocalReportInput()) {
     const schedulerStats = reportObject(nodeStats, "schedulerStats", "SchedulerStats");
     const observationStats = reportObject(nodeStats, "observationDeliveryStats", "ObservationDeliveryStats");
     const hasNonZeroDecimal = (value) => {
@@ -1168,6 +1459,7 @@ function hasDotnetGeneratorDeliveryData(nodeStats) {
         return text.trim().length > 0 && text !== "0";
     };
     return reportArray(nodeStats, "generatorWarnings", "GeneratorWarnings").length > 0
+        || localReportInput.history.status === "unavailable"
         || reportArray(nodeStats, "schedulerSegments", "SchedulerSegments").length > 0
         || reportArray(schedulerStats, "segments", "Segments").length > 0
         || asInt(reportValue(schedulerStats, "configuredMaxInFlight", "ConfiguredMaxInFlight")) > 0
@@ -1187,15 +1479,19 @@ function buildDotnetGroupedCorrelationSummaryHtml(rows, groupedChartKey) {
         return parts.join("");
     }
     appendReportLine(parts);
-    appendReportLine(parts, "<div class=\"card\"><h2>Grouped Correlation Percentile Trends</h2><p>Each chart is one GatherBy value. The line shows latency progression across P50 to P99.</p></div>");
+    appendReportLine(parts, "<div class=\"card\"><h2>Grouped Correlation Percentile Trends</h2><p>Each chart is one GatherBy value. Every scenario and destination row remains a separate percentile series from P50 through Max.</p></div>");
+    appendReportLine(parts, "<div class=\"card chart-collection\" data-chart-collection data-grid-size=\"comfortable\">");
+    appendChartCollectionTools(parts);
     appendReportLine(parts, "<div class=\"chart-grid correlation-chart-grid\">");
     payloads.forEach((payload, index) => {
         const chartKey = `${groupedChartKey}-value-${index}`;
         const chartJson = escapeJsonForHtmlScript(JSON.stringify(payload.chart));
         appendReportLine(parts, `<script type="application/json" data-grouped-correlation-chart="${escapeHtml(chartKey)}">${chartJson}</script>`);
-        appendReportLine(parts, `<div class="chart-card correlation-chart-card"><h3>${escapeHtml(payload.title)}</h3><p>${escapeHtml(payload.subtitle)}</p><canvas class="chart-canvas grouped-correlation-canvas" data-grouped-key="${escapeHtml(chartKey)}"></canvas></div>`);
+        appendChartCard(parts, `${chartKey}-chart`, payload.title, "grouped-correlation", "line", "ms", "Latency", "grouped-correlation-canvas", `data-grouped-key="${escapeHtml(chartKey)}"`);
     });
     appendReportLine(parts, "</div>");
+    appendReportLine(parts, "<div class=\"chart-empty\" data-chart-empty>No charts match this search.</div>");
+    appendReportLine(parts, "</div>");
     return parts.join("");
 }
 function buildDotnetUngroupedCorrelationSummaryHtml(rows, groupedChartKey) {
@@ -1207,8 +1503,12 @@ function buildDotnetUngroupedCorrelationSummaryHtml(rows, groupedChartKey) {
         appendReportLine(parts);
         appendReportLine(parts, "<div class=\"card\"><h2>Ungrouped Correlation Percentile Trends</h2><p>All percentile lines are shown in one graph for direct comparison.</p></div>");
         appendReportLine(parts, `<script type="application/json" data-ungrouped-correlation="${escapeHtml(groupedChartKey)}">${chartJson}</script>`);
+        appendReportLine(parts, "<div class=\"card chart-collection\" data-chart-collection data-grid-size=\"comfortable\">");
+        appendChartCollectionTools(parts);
         appendReportLine(parts, "<div class=\"chart-grid correlation-chart-grid\">");
-        appendReportLine(parts, `<div class="chart-card correlation-chart-card"><h3>Ungrouped Correlation Percentiles</h3><canvas class="chart-canvas ungrouped-correlation-canvas" data-ungrouped-key="${escapeHtml(groupedChartKey)}"></canvas></div>`);
+        appendChartCard(parts, `${groupedChartKey}-chart`, "Ungrouped Correlation Percentiles", "ungrouped-correlation", "line", "ms", "Latency", "ungrouped-correlation-canvas", `data-ungrouped-key="${escapeHtml(groupedChartKey)}"`);
+        appendReportLine(parts, "</div>");
+        appendReportLine(parts, "<div class=\"chart-empty\" data-chart-empty>No charts match this search.</div>");
         appendReportLine(parts, "</div>");
     }
     return parts.join("");
@@ -1220,8 +1520,8 @@ function buildDotnetPluginHints(plugin) {
     const hints = reportArray(plugin, "hints", "Hints").map((hint) => asString(hint).trim()).filter((hint) => hint.length > 0);
     return `<div class="card"><strong>Hints</strong><ul>${hints.map((hint) => `<li>${escapeHtml(hint)}</li>`).join("")}</ul></div>`;
 }
-function buildDotnetHtmlTabs(nodeStats) {
-    const tabs = [["summary", "Summary", buildDotnetSummaryHtml(nodeStats)]];
+function buildDotnetHtmlTabs(nodeStats, localReportInput = emptyLocalReportInput()) {
+    const tabs = [["summary", "Summary", buildDotnetSummaryHtml(nodeStats, localReportInput)]];
     const scenarioRows = buildDotnetScenarioRows(nodeStats);
     if (scenarioRows.length) {
         tabs.push(["scenarios", "Scenarios", buildDotnetTableHtml(scenarioRows)]);
@@ -1255,8 +1555,8 @@ function buildDotnetHtmlTabs(nodeStats) {
     if (metricRows.length) {
         tabs.push(["metrics", "Metrics", buildDotnetTableHtml(metricRows)]);
     }
-    if (hasDotnetGeneratorDeliveryData(nodeStats)) {
-        tabs.push(["generator-delivery", "Generator Delivery", buildDotnetGeneratorDeliveryHtml(nodeStats)]);
+    if (hasDotnetGeneratorDeliveryData(nodeStats, localReportInput)) {
+        tabs.push(["generator-delivery", "Generator Delivery", buildDotnetGeneratorDeliveryHtml(nodeStats, localReportInput)]);
     }
     for (const plugin of reportArray(nodeStats, "pluginsData", "PluginsData")) {
         const pluginName = asString(reportValue(plugin, "pluginName", "PluginName"));
@@ -1403,41 +1703,47 @@ export function buildDotnetMarkdownReport(nodeStats) {
     return reportLines(lines);
 }
 /**
- * Exposes the build dotnet html report operation. Use this when interacting with the SDK through this surface.
+ * Builds the portable single-file HTML report. The optional second argument is
+ * an internal report-only carrier used by the native runner and is never added
+ * to public result, sink, observation, or cluster payloads.
  */
-export function buildDotnetHtmlReport(nodeStats) {
-    const tabs = buildDotnetHtmlTabs(nodeStats);
-    const buttonsHtml = tabs.map(([tabId, title]) => `<button class="tab-btn" data-tab="${escapeHtml(tabId)}">${escapeHtml(title)}</button>${REPORT_EOL}`).join("");
-    const sectionsHtml = tabs.map(([tabId, , html]) => `<section id="${escapeHtml(tabId)}" class="tab">${html}</section>${REPORT_EOL}`).join("");
-    const chartDataJson = escapeJsonForHtmlScript(JSON.stringify(buildDotnetChartData(nodeStats)));
+export function buildDotnetHtmlReport(nodeStats, localReportInput = emptyLocalReportInput()) {
+    const tabs = buildDotnetHtmlTabs(nodeStats, localReportInput);
+    const buttonsHtml = tabs
+        .map(([tabId, title]) => `<button class="tab-btn" data-tab="${escapeHtml(tabId)}">${escapeHtml(title)}</button>${REPORT_EOL}`)
+        .join("");
+    const sectionsHtml = tabs
+        .map(([tabId, , html]) => `<section id="${escapeHtml(tabId)}" class="tab">${html}</section>${REPORT_EOL}`)
+        .join("");
+    const chartDataJson = escapeJsonForHtmlScript(JSON.stringify(buildDotnetChartData(nodeStats, localReportInput)));
     const testInfo = reportObject(nodeStats, "testInfo", "TestInfo");
     const template = `<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src 'none'; img-src data:; style-src 'unsafe-inline'; script-src 'unsafe-inline'; object-src 'none'; frame-src 'none'; form-action 'none'; base-uri 'none'" />
 <title>LoadStrike Report</title>
 <style>
-:root{--bg:#f4f7fc;--bgTop:#fff3d0;--bgRight:#dbe8ff;--bgBottom:#edf2fb;--panel:#ffffff;--panelAlt:#eef3fb;--line:#d3deed;--text:#0f172a;--muted:#4b5563;--accent:#2563eb;--ok:#138a4a;--fail:#c63636;--warn:#b7791f;--chip:#edf3fc;--card:#ffffff;--stat:#f5f9ff;--chartPanel:#0f172a;--chartGrid:#334155;--chartAxis:#b5c2d3;--chartLabel:#dbe6f4;--chartDot:#0f172a;--chartPieCenter:#0f172a;--chartPieCenterText:#e5eefc;--chartLegendText:#e6edf3;--shadow:0 10px 24px rgba(15,23,42,.1)}
-body[data-theme='dark']{--bg:#0d1117;--bgTop:#18243b;--bgRight:#102235;--bgBottom:#0b0f14;--panel:#111827;--panelAlt:#0f172a;--line:#263241;--text:#e6edf3;--muted:#9fb0c3;--accent:#2563eb;--ok:#18a957;--fail:#d14343;--warn:#f59e0b;--chip:rgba(31,41,55,.45);--card:linear-gradient(180deg,rgba(17,24,39,.92) 0,rgba(13,19,32,.92) 100%);--stat:rgba(20,30,47,.65);--chartPanel:rgba(15,23,42,.72);--chartGrid:#334155;--chartAxis:#b5c2d3;--chartLabel:#dbe6f4;--chartDot:#0f172a;--chartPieCenter:#0f172a;--chartPieCenterText:#e5eefc;--chartLegendText:#e6edf3;--shadow:0 10px 24px rgba(0,0,0,.2)}
+:root{--bg:#f4f7fc;--bgTop:#fff3d0;--bgRight:#dbe8ff;--bgBottom:#edf2fb;--panel:#ffffff;--panelAlt:#eef3fb;--line:#d3deed;--text:#0f172a;--muted:#4b5563;--accent:#2563eb;--ok:#138a4a;--fail:#c63636;--warn:#b7791f;--chip:#edf3fc;--card:#ffffff;--stat:#f5f9ff;--chartPanel:#0f172a;--chartLegendText:#e6edf3;--shadow:0 10px 24px rgba(15,23,42,.1)}
+body[data-theme='dark']{--bg:#0d1117;--bgTop:#18243b;--bgRight:#102235;--bgBottom:#0b0f14;--panel:#111827;--panelAlt:#0f172a;--line:#263241;--text:#e6edf3;--muted:#9fb0c3;--accent:#2563eb;--ok:#18a957;--fail:#d14343;--warn:#f59e0b;--chip:rgba(31,41,55,.45);--card:linear-gradient(180deg,rgba(17,24,39,.92) 0,rgba(13,19,32,.92) 100%);--stat:rgba(20,30,47,.65);--chartPanel:rgba(15,23,42,.72);--chartLegendText:#e6edf3;--shadow:0 10px 24px rgba(0,0,0,.2)}
 body{margin:0;background:radial-gradient(1200px 700px at 10% -10%,var(--bgTop) 0,transparent 58%),radial-gradient(900px 620px at 100% 0,var(--bgRight) 0,transparent 57%),var(--bgBottom);color:var(--text);font-family:'Segoe UI',Tahoma,sans-serif}
 .wrap{max-width:1440px;margin:0 auto;padding:20px}
-.report-brand{display:flex;align-items:center;gap:16px;margin:0 0 10px 0;overflow:visible;padding-top:8px;flex-wrap:wrap}
+.report-brand{display:flex;align-items:center;gap:16px;margin:0 0 10px;padding-top:8px;overflow:visible;flex-wrap:wrap}
 .report-logo-slot{width:380px;height:184px;max-width:100%;flex:0 0 auto;display:flex;align-items:flex-start;justify-content:flex-start;overflow:visible}
-.report-logo{width:100%;height:100%;object-fit:contain;object-position:left top;border:none;background:transparent;box-shadow:none;border-radius:0;padding:0;margin:0;overflow:visible;transform:scale(var(--report-logo-scale,1));transform-origin:left top;transition:transform .2s ease}
+.report-logo{width:100%;height:100%;object-fit:contain;object-position:left top;border:0;background:transparent;box-shadow:none;border-radius:0;padding:0;margin:0;overflow:visible;transform:scale(var(--report-logo-scale,1));transform-origin:left top;transition:transform .2s ease}
 body[data-theme='dark'] .report-logo{--report-logo-scale:1.175}
 .theme-toggle-report{position:fixed;top:12px;right:12px;z-index:1200;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;appearance:none;border:1px solid var(--line);background:var(--chip);color:var(--text);padding:0;border-radius:999px;font-size:18px;font-weight:700;cursor:pointer;transition:all .2s ease}
 .theme-toggle-report:hover{border-color:var(--accent);transform:translateY(-1px)}
-.theme-toggle-report span{line-height:1;pointer-events:none}
-h1{margin:0 0 10px 0;font-size:28px;letter-spacing:.2px}
-h2{margin:0 0 12px 0;font-size:18px}
-h3{margin:0 0 10px 0;font-size:15px;color:var(--text)}
+h1{margin:0 0 10px;font-size:28px;letter-spacing:.2px}
+h2{margin:0 0 12px;font-size:18px}
+h3{margin:0 0 10px;font-size:15px;color:var(--text)}
 .meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-bottom:16px}
 .meta span{background:var(--chip);border:1px solid var(--line);padding:6px 10px;border-radius:999px}
 .report-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:14px;align-items:start}
 .tabs-pane{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;overscroll-behavior:contain;padding-right:4px;cursor:grab}
 .tabs-pane.panning{cursor:grabbing;user-select:none}
-.tabs{display:flex;flex-direction:column;gap:8px;margin:12px 0 14px 0}
+.tabs{display:flex;flex-direction:column;gap:8px;margin:12px 0 14px}
 .tab-btn{background:var(--panelAlt);color:var(--text);border:1px solid var(--line);padding:8px 12px;border-radius:8px;cursor:pointer;transition:all .2s ease;text-align:left;width:100%}
 .tab-btn:hover{border-color:var(--accent);background:var(--chip)}
 .tab-btn.active{background:linear-gradient(180deg,#2f66db 0,#2754b8 100%);border-color:#3f73e0}
@@ -1456,22 +1762,19 @@ th{background:var(--panelAlt);position:sticky;top:0;z-index:1}
 .value-fail{color:var(--fail)}
 .chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:12px}
 .chart-card{padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--chartPanel)}
-.chart-canvas{width:100%;height:260px;display:block}
-.correlation-chart-grid{grid-template-columns:repeat(auto-fit,minmax(420px,720px));justify-content:center}
+.correlation-chart-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),720px));justify-content:center}
 .correlation-chart-card{max-width:720px;width:100%}
-.correlation-chart-card .chart-canvas{height:320px}
 .chart-card h3,.chart-card p{color:var(--chartLegendText)}
 .table-wrap{overflow:auto;max-height:70vh}
-@media (max-width:980px){.wrap{padding:14px}.report-brand{margin-bottom:8px;padding-top:4px}.report-logo-slot{width:300px;height:146px}.theme-toggle-report{top:10px;right:10px}.report-layout{grid-template-columns:1fr}.tabs-pane{position:static;max-height:none;cursor:auto}.tabs{flex-direction:row;flex-wrap:wrap}.tab-btn{width:auto}.chart-canvas{height:220px}.correlation-chart-grid{grid-template-columns:1fr;justify-content:stretch}.correlation-chart-card{max-width:none}.correlation-chart-card .chart-canvas{height:280px}.stat-value{font-size:18px}}
+${REPORT_SVG_CSS}
+@media (max-width:980px){.wrap{padding:14px}.report-brand{margin-bottom:8px;padding-top:4px}.report-logo-slot{width:300px;height:146px}.theme-toggle-report{top:10px;right:10px}.report-layout{grid-template-columns:1fr}.tabs-pane{position:static;max-height:none;cursor:auto}.tabs{flex-direction:row;flex-wrap:wrap}.tab-btn{width:auto}.correlation-chart-grid{grid-template-columns:1fr;justify-content:stretch}.correlation-chart-card{max-width:none}.stat-value{font-size:18px}}
 </style>
 </head>
 <body data-theme="light">
 <div class="wrap">
 <button type="button" class="theme-toggle-report" data-report-theme-toggle aria-label="Switch to dark theme" aria-pressed="false" title="Switch to dark theme"><span aria-hidden="true">&#x263E;</span></button>
 <div class="report-brand">
-<div class="report-logo-slot">
-<img src="__LOGO_LIGHT__" alt="LoadStrike logo" class="report-logo" data-report-logo data-logo-light="__LOGO_LIGHT__" data-logo-dark="__LOGO_DARK__" />
-</div>
+<div class="report-logo-slot"><img src="__LOGO_LIGHT__" alt="LoadStrike logo" class="report-logo" data-report-logo data-logo-light="__LOGO_LIGHT__" data-logo-dark="__LOGO_DARK__" /></div>
 <h1>LoadStrike Report</h1>
 </div>
 <div class="meta">
@@ -1481,44 +1784,18 @@ th{background:var(--panelAlt);position:sticky;top:0;z-index:1}
 <span>Duration: <strong>__DURATION__</strong></span>
 </div>
 <div class="report-layout">
-<aside class="tabs-pane" id="tab-pane">
-<div class="tabs">
-__BUTTONS__</div>
-</aside>
+<aside class="tabs-pane" id="tab-pane"><div class="tabs">
+__BUTTONS__</div></aside>
 <div class="tabs-content">
 __SECTIONS__</div>
 </div>
 </div>
+<div class="chart-modal" data-chart-fullscreen-overlay role="dialog" aria-modal="true" aria-label="Expanded LoadStrike chart" aria-hidden="true">
+<div class="chart-modal-panel"><div class="chart-modal-head"><button type="button" class="chart-modal-close" data-chart-modal-close aria-label="Close expanded chart">Close</button></div><div data-chart-modal-panel></div></div>
+</div>
 <script>
 const reportCharts=__CHART_DATA__;
-const btns=[...document.querySelectorAll('.tab-btn')];
-const tabSections=[...document.querySelectorAll('.tab')];
-const tabsPane=document.getElementById('tab-pane');
-const linePalette=['#38bdf8','#22c55e','#f59e0b','#a855f7','#f43f5e','#14b8a6','#eab308','#818cf8','#06b6d4','#84cc16'];
-const reportThemeKey='loadstrike-report-theme';
-const reportThemeToggle=document.querySelector('[data-report-theme-toggle]');
-const reportLogo=document.querySelector('[data-report-logo]');
-function applyReportTheme(theme){const normalized=theme==='dark'?'dark':'light';document.body.setAttribute('data-theme',normalized);if(reportLogo){const lightLogo=reportLogo.dataset.logoLight||reportLogo.getAttribute('src');const darkLogo=reportLogo.dataset.logoDark||reportLogo.getAttribute('src');reportLogo.setAttribute('src',normalized==='dark'?darkLogo:lightLogo);}if(reportThemeToggle){const darkActive=normalized==='dark';const nextLabel=darkActive?'light':'dark';reportThemeToggle.innerHTML=darkActive?'&#x2600;':'&#x263E;';reportThemeToggle.setAttribute('aria-pressed',darkActive?'true':'false');reportThemeToggle.setAttribute('aria-label','Switch to '+nextLabel+' theme');reportThemeToggle.setAttribute('title','Switch to '+nextLabel+' theme');}}
-function show(id){btns.forEach(b=>b.classList.toggle('active',b.dataset.tab===id));tabSections.forEach(t=>t.classList.toggle('active',t.id===id));}
-function formatMetric(v){if(!Number.isFinite(v))return '0';return Math.abs(v)>=100?v.toFixed(0):v.toFixed(2);}
-function setupCanvas(canvas){const dpr=window.devicePixelRatio||1;const rect=canvas.getBoundingClientRect();const w=Math.max(1,Math.round(rect.width||canvas.clientWidth||320));const h=Math.max(1,Math.round(rect.height||canvas.clientHeight||220));canvas.width=Math.max(1,Math.round(w*dpr));canvas.height=Math.max(1,Math.round(h*dpr));const ctx=canvas.getContext('2d');ctx.setTransform(dpr,0,0,dpr,0,0);return {ctx,w,h};}
-function drawNoData(ctx,w,h,msg){ctx.fillStyle='#9fb0c3';ctx.font='13px Segoe UI';ctx.textAlign='center';ctx.fillText(msg,w/2,h/2);}
-function drawBar(canvasId,points){const canvas=document.getElementById(canvasId);if(!canvas)return;const c=setupCanvas(canvas);const ctx=c.ctx,w=c.w,h=c.h;ctx.clearRect(0,0,w,h);if(!points||points.length===0){drawNoData(ctx,w,h,'No data');return;}const left=46,right=14,top=16,bottom=62;const pw=w-left-right;const ph=h-top-bottom;const max=Math.max(...points.map(p=>p.value),1);ctx.strokeStyle='#334155';ctx.lineWidth=1;for(let i=0;i<=4;i++){const y=top+(ph*(i/4));ctx.beginPath();ctx.moveTo(left,y);ctx.lineTo(w-right,y);ctx.stroke();}const slot=pw/points.length;const bar=Math.max(8,slot*0.58);ctx.font='11px Segoe UI';for(let i=0;i<points.length;i++){const p=points[i];const x=left+i*slot+(slot-bar)/2;const bh=(p.value/max)*ph;const y=top+ph-bh;ctx.fillStyle=p.color||'#3b82f6';ctx.fillRect(x,y,bar,bh);ctx.fillStyle='#dbe6f4';ctx.textAlign='center';ctx.fillText(formatMetric(p.value),x+bar/2,Math.max(12,y-4));ctx.save();ctx.translate(x+bar/2,h-bottom+14);ctx.rotate(-0.6);ctx.fillStyle='#b5c2d3';ctx.fillText((p.label||'').slice(0,26),0,0);ctx.restore();}ctx.fillStyle='#b5c2d3';ctx.textAlign='right';for(let i=0;i<=4;i++){const value=max*(1-i/4);const y=top+(ph*(i/4))+4;ctx.fillText(formatMetric(value),left-6,y);}}
-function drawPie(canvasId,points){const canvas=document.getElementById(canvasId);if(!canvas)return;const c=setupCanvas(canvas);const ctx=c.ctx,w=c.w,h=c.h;ctx.clearRect(0,0,w,h);if(!points||points.length===0){drawNoData(ctx,w,h,'No data');return;}const total=points.reduce((s,p)=>s+(p.value||0),0);if(total<=0){drawNoData(ctx,w,h,'No data');return;}const cx=w*0.35,cy=h*0.5,r=Math.min(w,h)*0.28;let angle=-Math.PI/2;for(const p of points){const val=Math.max(0,p.value||0);const delta=(val/total)*Math.PI*2;ctx.beginPath();ctx.moveTo(cx,cy);ctx.arc(cx,cy,r,angle,angle+delta);ctx.closePath();ctx.fillStyle=p.color||'#3b82f6';ctx.fill();angle+=delta;}ctx.fillStyle='#0f172a';ctx.beginPath();ctx.arc(cx,cy,r*0.54,0,Math.PI*2);ctx.fill();ctx.fillStyle='#e5eefc';ctx.font='bold 18px Segoe UI';ctx.textAlign='center';ctx.fillText(total.toString(),cx,cy+6);ctx.font='12px Segoe UI';ctx.fillStyle='#9fb0c3';ctx.fillText('requests',cx,cy+24);ctx.textAlign='left';let y=cy-r+10;for(const p of points){ctx.fillStyle=p.color||'#3b82f6';ctx.fillRect(w*0.64,y-10,12,12);ctx.fillStyle='#e6edf3';ctx.font='12px Segoe UI';const pct=total<=0?0:((p.value/total)*100);ctx.fillText(\`\${p.label}: \${p.value} (\${pct.toFixed(1)}%)\`,w*0.64+18,y);y+=20;}}
-function drawLatencyLine(canvasRef,chart){const canvas=typeof canvasRef==='string'?document.getElementById(canvasRef):canvasRef;if(!canvas)return;const c=setupCanvas(canvas);const ctx=c.ctx,w=c.w,h=c.h;ctx.clearRect(0,0,w,h);if(!chart||!Array.isArray(chart.labels)||chart.labels.length===0||!Array.isArray(chart.series)||chart.series.length===0){drawNoData(ctx,w,h,'No latency data');return;}const labels=chart.labels;const seriesList=chart.series;const allValues=seriesList.flatMap(s=>(s.values||[]).filter(v=>Number.isFinite(v)));if(allValues.length===0){drawNoData(ctx,w,h,'No latency data');return;}const shortAxisLabels=labels.every(label=>((label||'').toString().length<=4));const rotateAxisLabels=!shortAxisLabels&&labels.length>4;const left=52,right=18,bottom=rotateAxisLabels?78:52;const legendItemWidth=150,legendLineHeight=14,legendTop=12;const plotWidth=Math.max(120,w-left-right);const legendCols=Math.max(1,Math.floor(plotWidth/legendItemWidth));const legendRows=Math.max(1,Math.ceil(seriesList.length/legendCols));const legendHeight=legendRows*legendLineHeight;const top=legendTop+legendHeight+16;const pw=w-left-right;const ph=h-top-bottom;if(ph<=20){drawNoData(ctx,w,h,'No latency data');return;}const max=Math.max(...allValues,1);const scaleMax=max*1.08;ctx.strokeStyle='#334155';ctx.lineWidth=1;for(let i=0;i<=4;i++){const y=top+(ph*(i/4));ctx.beginPath();ctx.moveTo(left,y);ctx.lineTo(w-right,y);ctx.stroke();}ctx.fillStyle='#b5c2d3';ctx.font='11px Segoe UI';ctx.textAlign='right';for(let i=0;i<=4;i++){const value=max*(1-i/4);const y=top+(ph*(i/4))+4;ctx.fillText(formatMetric(value),left-6,y);}const xStep=labels.length<=1?0:pw/(labels.length-1);const xAt=i=>labels.length<=1?left+(pw/2):left+(xStep*i);const overlapOffset=new Map();const epsilon=Math.max(max*0.0005,0.001);for(let pointIndex=0;pointIndex<labels.length;pointIndex++){const points=[];for(let seriesIndex=0;seriesIndex<seriesList.length;seriesIndex++){const value=(seriesList[seriesIndex].values||[])[pointIndex];if(Number.isFinite(value)){points.push({seriesIndex,value});}}points.sort((a,b)=>a.value===b.value?a.seriesIndex-b.seriesIndex:a.value-b.value);let start=0;while(start<points.length){let end=start+1;while(end<points.length&&Math.abs(points[end].value-points[start].value)<=epsilon){end++;}const count=end-start;if(count>1){const mid=(count-1)/2;for(let k=0;k<count;k++){overlapOffset.set(points[start+k].seriesIndex+'|'+pointIndex,(k-mid)*3);}}start=end;}}const dashPatterns=[[0,0],[7,4],[2,3],[10,3,2,3]];for(let seriesIndex=0;seriesIndex<seriesList.length;seriesIndex++){const series=seriesList[seriesIndex];ctx.beginPath();ctx.strokeStyle=series.color||'#38bdf8';ctx.lineWidth=2.2;const dash=dashPatterns[seriesIndex%dashPatterns.length];if(dash[0]===0){ctx.setLineDash([]);}else{ctx.setLineDash(dash);}let started=false;(series.values||[]).forEach((value,index)=>{if(!Number.isFinite(value)){started=false;return;}const x=xAt(index);const offset=overlapOffset.get(seriesIndex+'|'+index)||0;const y=top+ph-((value/scaleMax)*ph)+offset;if(!started){ctx.moveTo(x,y);started=true;}else{ctx.lineTo(x,y);}});ctx.stroke();ctx.setLineDash([]);(series.values||[]).forEach((value,index)=>{if(!Number.isFinite(value))return;const x=xAt(index);const offset=overlapOffset.get(seriesIndex+'|'+index)||0;const y=top+ph-((value/scaleMax)*ph)+offset;ctx.beginPath();ctx.fillStyle='#0f172a';ctx.arc(x,y,3.2,0,Math.PI*2);ctx.fill();ctx.beginPath();ctx.strokeStyle=series.color||'#38bdf8';ctx.lineWidth=2;ctx.arc(x,y,3.2,0,Math.PI*2);ctx.stroke();});}ctx.fillStyle='#b5c2d3';ctx.font='10px Segoe UI';ctx.textAlign='center';labels.forEach((label,index)=>{const x=xAt(index);const text=(label||'').toString().slice(0,34);if(rotateAxisLabels){ctx.save();ctx.translate(x,h-bottom+12);ctx.rotate(-0.6);ctx.fillText(text,0,0);ctx.restore();}else{ctx.fillText(text,x,h-bottom+16);}});let lx=left,ly=legendTop+2;for(let seriesIndex=0;seriesIndex<seriesList.length;seriesIndex++){const series=seriesList[seriesIndex];const rawName=(series.name||'Series').toString();const legendName=rawName.length>30?rawName.slice(0,27)+'...':rawName;ctx.strokeStyle=series.color||'#38bdf8';ctx.lineWidth=2.2;const dash=dashPatterns[seriesIndex%dashPatterns.length];if(dash[0]===0){ctx.setLineDash([]);}else{ctx.setLineDash(dash);}ctx.beginPath();ctx.moveTo(lx,ly+1.5);ctx.lineTo(lx+12,ly+1.5);ctx.stroke();ctx.setLineDash([]);ctx.fillStyle='#b5c2d3';ctx.font='11px Segoe UI';ctx.textAlign='left';ctx.fillText(legendName,lx+16,ly+4);lx+=legendItemWidth;if(lx>w-right-legendItemWidth){lx=left;ly+=legendLineHeight;}}}
-function renderCharts(){drawPie('chart-outcome',reportCharts.overallOutcome);drawBar('chart-scenario-requests',reportCharts.scenarioRequests);drawBar('chart-scenario-p95',reportCharts.scenarioP95Latency);drawBar('chart-scenario-rps',reportCharts.scenarioRps);drawBar('chart-scenario-fail-rate',reportCharts.scenarioFailRate);drawBar('chart-scenario-bytes',reportCharts.scenarioBytes);drawPie('chart-status-code-classes',reportCharts.statusCodeClasses);drawLatencyLine('chart-scenario-latency-lines',reportCharts.scenarioLatencyTrend);}
-function getGroupedCorrelationChart(key){const node=document.querySelector('script[type="application/json"][data-grouped-correlation-chart="'+key+'"]');if(!node)return {labels:[],series:[]};try{return JSON.parse(node.textContent||'{"labels":[],"series":[]}');}catch{return {labels:[],series:[]};}}
-function getUngroupedCorrelationChart(key){const node=document.querySelector('script[type="application/json"][data-ungrouped-correlation="'+key+'"]');if(!node)return {labels:[],series:[]};try{return JSON.parse(node.textContent||'{"labels":[],"series":[]}');}catch{return {labels:[],series:[]};}}
-function normalizeUngroupedCorrelationChart(chart){if(!chart||!Array.isArray(chart.labels)||!Array.isArray(chart.series))return {labels:[],series:[]};const compactName=input=>{const raw=(input||'Series').toString();const parts=raw.split('|').map(x=>x.trim()).filter(x=>x.length>0);const tail=parts.length>0?parts[parts.length-1]:raw.trim();if(tail.length===0)return 'Series';return tail.length>22?tail.slice(0,19)+'...':tail;};const labels=chart.labels||[];const series=chart.series||[];const normalizedSeries=series.map((item,index)=>({name:compactName(item&&item.name),color:(item&&item.color)||linePalette[index%linePalette.length],values:Array.isArray(item&&item.values)?item.values.map(v=>Number.isFinite(v)?v:NaN):[]})).filter(s=>s.values.some(v=>Number.isFinite(v)));const isPercentile=value=>/^p\\d+$/i.test((value||'').toString().trim());const labelsArePercentiles=labels.length>0&&labels.every(isPercentile);if(labelsArePercentiles){return {labels,series:normalizedSeries};}const seriesArePercentiles=normalizedSeries.length>0&&normalizedSeries.every(s=>isPercentile(s.name));if(!seriesArePercentiles||labels.length===0){return {labels,series:normalizedSeries};}const percentileLabels=normalizedSeries.map(s=>s.name.toUpperCase());const reshaped=labels.map((label,labelIndex)=>{const values=normalizedSeries.map(s=>{const value=s.values[labelIndex];return Number.isFinite(value)?value:NaN;});return {name:compactName(label||('Series '+(labelIndex+1))),color:linePalette[labelIndex%linePalette.length],values};}).filter(s=>s.values.some(v=>Number.isFinite(v)));if(reshaped.length===0){return {labels:percentileLabels,series:[]};}return {labels:percentileLabels,series:reshaped};}
-function renderGroupedCorrelationCharts(){const canvases=[...document.querySelectorAll('.grouped-correlation-canvas')];if(canvases.length===0)return;canvases.forEach(canvas=>{const key=canvas.dataset.groupedKey||'';const chart=getGroupedCorrelationChart(key);drawLatencyLine(canvas,chart);});}
-function renderUngroupedCorrelationCharts(){const canvases=[...document.querySelectorAll('.ungrouped-correlation-canvas')];if(canvases.length===0)return;canvases.forEach(canvas=>{const key=canvas.dataset.ungroupedKey||'';const rawChart=getUngroupedCorrelationChart(key);const chart=normalizeUngroupedCorrelationChart(rawChart);drawLatencyLine(canvas,chart);});}
-function initPanePan(){if(!tabsPane)return;let activePointerId=null;let startY=0;let startScroll=0;tabsPane.addEventListener('pointerdown',event=>{if(event.button!==0)return;if(event.target&&event.target.closest&&event.target.closest('button,a,input,textarea,select,label'))return;activePointerId=event.pointerId;startY=event.clientY;startScroll=tabsPane.scrollTop;tabsPane.classList.add('panning');tabsPane.setPointerCapture(event.pointerId);});tabsPane.addEventListener('pointermove',event=>{if(activePointerId!==event.pointerId)return;const delta=event.clientY-startY;tabsPane.scrollTop=startScroll-delta;});const stopPan=event=>{if(activePointerId!==event.pointerId)return;activePointerId=null;tabsPane.classList.remove('panning');};tabsPane.addEventListener('pointerup',stopPan);tabsPane.addEventListener('pointercancel',stopPan);tabsPane.addEventListener('lostpointercapture',()=>{activePointerId=null;tabsPane.classList.remove('panning');});}
-function renderAllCharts(){renderCharts();renderUngroupedCorrelationCharts();renderGroupedCorrelationCharts();}
-const storedReportTheme=(()=>{try{return localStorage.getItem(reportThemeKey);}catch{return null;}})();
-applyReportTheme(storedReportTheme==='dark'?'dark':'light');
-if(reportThemeToggle){reportThemeToggle.addEventListener('click',()=>{const next=document.body.getAttribute('data-theme')==='dark'?'light':'dark';applyReportTheme(next);try{localStorage.setItem(reportThemeKey,next);}catch{}renderAllCharts();});}
-btns.forEach(b=>b.addEventListener('click',()=>{show(b.dataset.tab);requestAnimationFrame(renderAllCharts);}));
-if(btns.length>0){show(btns[0].dataset.tab);}renderAllCharts();initPanePan();window.addEventListener('resize',renderAllCharts);
+${REPORT_SVG_SCRIPT.trimStart()}
 </script>
 </body>
 </html>`;