benchforge 0.1.0

package/dist/browser/index.js

@@ -0,0 +1,914 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+//#region src/html/browser/CIPlot.ts
+const defaultOpts = {
+	width: 260,
+	height: 85,
+	title: "p50 Δ%",
+	smooth: false,
+	direction: "uncertain"
+};
+const colors = {
+	faster: {
+		fill: "#dcfce7",
+		stroke: "#22c55e"
+	},
+	slower: {
+		fill: "#fee2e2",
+		stroke: "#ef4444"
+	},
+	uncertain: {
+		fill: "#dbeafe",
+		stroke: "#3b82f6"
+	}
+};
+const defaultMargin = {
+	top: 22,
+	right: 12,
+	bottom: 22,
+	left: 12
+};
+/** Create a small distribution plot showing histogram with CI shading */
+function createDistributionPlot(histogram, ci, pointEstimate, options = {}) {
+	const opts = {
+		...defaultOpts,
+		...options
+	};
+	const layout = buildLayout(opts.width, opts.height);
+	const svg = createSvg(layout.width, layout.height);
+	if (!histogram?.length) return svg;
+	const { fill, stroke } = colors[opts.direction];
+	const scales = buildScales(histogram, ci, layout);
+	drawTitle(svg, opts.title, layout.margin.left);
+	drawCIRegion(svg, ci, scales, layout, fill);
+	opts.smooth ? drawSmoothedDist(svg, histogram, scales, stroke) : drawHistogramBars(svg, histogram, scales, layout, stroke);
+	drawZeroLine(svg, scales, layout);
+	drawPointEstimate(svg, pointEstimate, scales, layout, stroke);
+	drawCILabels(svg, ci, scales, layout.height);
+	return svg;
+}
+/** Convenience wrapper for ComparisonCI data */
+function createCIPlot(ci, options = {}) {
+	if (!ci.histogram) return createSvg(0, 0);
+	return createDistributionPlot(ci.histogram, ci.ci, ci.percent, {
+		direction: ci.direction,
+		...options
+	});
+}
+function buildLayout(width, height) {
+	const margin = defaultMargin;
+	return {
+		width,
+		height,
+		margin,
+		plot: {
+			w: width - margin.left - margin.right,
+			h: height - margin.top - margin.bottom
+		}
+	};
+}
+/** Compute x/y scale functions mapping data values to SVG coordinates */
+function buildScales(histogram, ci, layout) {
+	const { margin, plot } = layout;
+	const xMin = Math.min(...histogram.map((b) => b.x), ci[0], 0);
+	const xMax = Math.max(...histogram.map((b) => b.x), ci[1], 0);
+	const yMax = Math.max(...histogram.map((b) => b.count));
+	return {
+		x: (v) => margin.left + (v - xMin) / (xMax - xMin) * plot.w,
+		y: (v) => margin.top + plot.h - v / yMax * plot.h
+	};
+}
+function drawTitle(svg, title, x) {
+	svg.appendChild(text(x, 14, title, "start", "13", "#333", "600"));
+}
+function drawCIRegion(svg, ci, scales, layout, fill) {
+	const x = scales.x(ci[0]);
+	const w = scales.x(ci[1]) - x;
+	svg.appendChild(rect(x, layout.margin.top, w, layout.plot.h, {
+		fill,
+		opacity: "0.5"
+	}));
+}
+function drawSmoothedDist(svg, histogram, scales, stroke) {
+	const smoothed = gaussianSmooth([...histogram].sort((a, b) => a.x - b.x), 2);
+	const pts = smoothed.map((b) => `${scales.x(b.x)},${scales.y(b.count)}`);
+	const baseline = scales.y(0);
+	svg.appendChild(path(`M${scales.x(smoothed[0].x)},${baseline}L${pts.join("L")}L${scales.x(smoothed.at(-1).x)},${baseline}Z`, {
+		fill: stroke,
+		opacity: "0.3"
+	}));
+	svg.appendChild(path(`M${pts.join("L")}`, {
+		stroke,
+		fill: "none",
+		strokeWidth: "1.5"
+	}));
+}
+function drawHistogramBars(svg, histogram, scales, layout, stroke) {
+	const sorted = [...histogram].sort((a, b) => a.x - b.x);
+	const binW = sorted.length > 1 ? sorted[1].x - sorted[0].x : 1;
+	const yMax = Math.max(...histogram.map((b) => b.count));
+	const xRange = scales.x(sorted.at(-1).x) - scales.x(sorted[0].x) + binW;
+	for (const bin of sorted) {
+		const barW = binW / xRange * layout.plot.w * .9;
+		const barH = bin.count / yMax * layout.plot.h;
+		svg.appendChild(rect(scales.x(bin.x) - barW / 2, layout.margin.top + layout.plot.h - barH, barW, barH, {
+			fill: stroke,
+			opacity: "0.6"
+		}));
+	}
+}
+function drawZeroLine(svg, scales, layout) {
+	const zeroX = scales.x(0);
+	if (zeroX < layout.margin.left || zeroX > layout.width - layout.margin.right) return;
+	const top = layout.margin.top;
+	svg.appendChild(line(zeroX, top, zeroX, top + layout.plot.h, {
+		stroke: "#666",
+		strokeWidth: "1",
+		strokeDasharray: "3,2"
+	}));
+}
+function drawPointEstimate(svg, pt, scales, layout, stroke) {
+	const x = scales.x(pt);
+	const top = layout.margin.top;
+	svg.appendChild(line(x, top, x, top + layout.plot.h, {
+		stroke,
+		strokeWidth: "2"
+	}));
+}
+function drawCILabels(svg, ci, scales, height) {
+	svg.appendChild(text(scales.x(ci[0]), height - 4, formatPct$1(ci[0]), "middle", "12"));
+	svg.appendChild(text(scales.x(ci[1]), height - 4, formatPct$1(ci[1]), "middle", "12"));
+}
+/** Apply gaussian kernel smoothing to histogram bins */
+function gaussianSmooth(bins, sigma) {
+	return bins.map((bin, i) => {
+		let sum = 0;
+		let wt = 0;
+		for (let j = 0; j < bins.length; j++) {
+			const w = Math.exp(-((i - j) ** 2) / (2 * sigma ** 2));
+			sum += bins[j].count * w;
+			wt += w;
+		}
+		return {
+			x: bin.x,
+			count: sum / wt
+		};
+	});
+}
+const formatPct$1 = (v) => (v >= 0 ? "+" : "") + v.toFixed(0) + "%";
+function createSvg(w, h) {
+	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	svg.setAttribute("width", String(w));
+	svg.setAttribute("height", String(h));
+	if (w && h) svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
+	return svg;
+}
+function rect(x, y, w, h, attrs) {
+	const el = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+	el.setAttribute("x", String(x));
+	el.setAttribute("y", String(y));
+	el.setAttribute("width", String(w));
+	el.setAttribute("height", String(h));
+	setAttrs(el, attrs);
+	return el;
+}
+function path(d, attrs) {
+	const el = document.createElementNS("http://www.w3.org/2000/svg", "path");
+	el.setAttribute("d", d);
+	setAttrs(el, attrs);
+	return el;
+}
+function line(x1, y1, x2, y2, attrs) {
+	const el = document.createElementNS("http://www.w3.org/2000/svg", "line");
+	el.setAttribute("x1", String(x1));
+	el.setAttribute("y1", String(y1));
+	el.setAttribute("x2", String(x2));
+	el.setAttribute("y2", String(y2));
+	setAttrs(el, attrs);
+	return el;
+}
+function text(x, y, content, anchor = "start", size = "9", fill = "#666", weight = "400") {
+	const el = document.createElementNS("http://www.w3.org/2000/svg", "text");
+	el.setAttribute("x", String(x));
+	el.setAttribute("y", String(y));
+	el.setAttribute("text-anchor", anchor);
+	el.setAttribute("font-size", size);
+	el.setAttribute("font-weight", weight);
+	el.setAttribute("fill", fill);
+	el.textContent = content;
+	return el;
+}
+/** Set SVG attributes, converting camelCase keys to kebab-case */
+function setAttrs(el, attrs) {
+	for (const [k, v] of Object.entries(attrs)) el.setAttribute(k.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase()), v);
+}
+
+//#endregion
+//#region src/html/browser/LegendUtils.ts
+/** Draw a semi-transparent white background behind the legend area */
+function legendBackground(bounds) {
+	const xRange = bounds.xMax - bounds.xMin;
+	const data = [{
+		x1: bounds.xMin + xRange * .65,
+		x2: bounds.xMin + xRange * 1.05,
+		y1: bounds.yMax * .65,
+		y2: bounds.yMax * 1.05
+	}];
+	return Plot.rect(data, {
+		x1: "x1",
+		x2: "x2",
+		y1: "y1",
+		y2: "y2",
+		fill: "white",
+		fillOpacity: .9,
+		stroke: "#ddd",
+		strokeWidth: 1
+	});
+}
+function dotMark(x, y, color, filled) {
+	return Plot.dot([{
+		x,
+		y
+	}], filled ? {
+		x: "x",
+		y: "y",
+		fill: color,
+		r: 4
+	} : {
+		x: "x",
+		y: "y",
+		stroke: color,
+		fill: "none",
+		strokeWidth: 1.5,
+		r: 4
+	});
+}
+function verticalBarMark(pos, color) {
+	const { legendX, y, xRange, yMax } = pos;
+	const w = xRange * .012;
+	const h = yMax * .05;
+	const data = [{
+		x1: legendX - w / 2,
+		x2: legendX + w / 2,
+		y1: y - h / 2,
+		y2: y + h / 2
+	}];
+	return Plot.rect(data, {
+		x1: "x1",
+		x2: "x2",
+		y1: "y1",
+		y2: "y2",
+		fill: color,
+		fillOpacity: .6
+	});
+}
+function verticalLineMark(pos, color, strokeDash) {
+	const { legendX, y, yMax } = pos;
+	return Plot.ruleX([legendX], {
+		y1: y - yMax * .025,
+		y2: y + yMax * .025,
+		stroke: color,
+		strokeWidth: 2,
+		strokeDasharray: strokeDash
+	});
+}
+function rectMark(pos, color) {
+	const { legendX, y, xRange, yMax } = pos;
+	const data = [{
+		x1: legendX - xRange * .01,
+		x2: legendX + xRange * .03,
+		y1: y - yMax * .02,
+		y2: y + yMax * .02
+	}];
+	const opts = {
+		x1: "x1",
+		x2: "x2",
+		y1: "y1",
+		y2: "y2",
+		fill: color,
+		fillOpacity: .3,
+		stroke: color,
+		strokeWidth: 1
+	};
+	return Plot.rect(data, opts);
+}
+function symbolMark(pos, item) {
+	switch (item.style) {
+		case "filled-dot": return dotMark(pos.legendX, pos.y, item.color, true);
+		case "hollow-dot": return dotMark(pos.legendX, pos.y, item.color, false);
+		case "vertical-bar": return verticalBarMark(pos, item.color);
+		case "vertical-line": return verticalLineMark(pos, item.color, item.strokeDash);
+		case "rect": return rectMark(pos, item.color);
+	}
+}
+function textMark(pos, label) {
+	const data = [{
+		x: pos.textX,
+		y: pos.y,
+		text: label
+	}];
+	return Plot.text(data, {
+		x: "x",
+		y: "y",
+		text: "text",
+		fontSize: 11,
+		textAnchor: "start",
+		fill: "#333"
+	});
+}
+/** Build complete legend marks array */
+function buildLegend(bounds, items) {
+	const xRange = bounds.xMax - bounds.xMin;
+	const legendX = bounds.xMin + xRange * .68;
+	const textX = legendX + xRange * .04;
+	const getY = (i) => bounds.yMax * .98 - i * (bounds.yMax * .08);
+	const marks = [legendBackground(bounds)];
+	for (let i = 0; i < items.length; i++) {
+		const pos = {
+			legendX,
+			y: getY(i),
+			textX,
+			xRange,
+			yMax: bounds.yMax
+		};
+		marks.push(symbolMark(pos, items[i]), textMark(pos, items[i].label));
+	}
+	return marks;
+}
+
+//#endregion
+//#region src/html/browser/HistogramKde.ts
+/** Create histogram + KDE plot for sample distribution */
+function createHistogramKde(allSamples, benchmarkNames) {
+	const { barData, binMin, binMax, yMax } = buildBarData(allSamples, benchmarkNames);
+	const { colorMap, legendItems } = buildColorData(benchmarkNames);
+	const xMax = binMax + (binMax - binMin) * .45;
+	return Plot.plot({
+		marginTop: 24,
+		marginLeft: 70,
+		marginRight: 10,
+		marginBottom: 60,
+		width: 550,
+		height: 300,
+		style: { fontSize: "14px" },
+		x: {
+			label: "Time (ms)",
+			labelAnchor: "center",
+			domain: [binMin, xMax],
+			labelOffset: 45,
+			tickFormat: (d) => d.toFixed(1),
+			ticks: 5
+		},
+		y: {
+			label: "Count",
+			labelAnchor: "top",
+			labelArrow: false,
+			grid: true,
+			domain: [0, yMax]
+		},
+		marks: [
+			Plot.rectY(barData, {
+				x1: "x1",
+				x2: "x2",
+				y: "count",
+				fill: (d) => colorMap.get(d.benchmark),
+				fillOpacity: .6,
+				tip: true,
+				title: (d) => `${d.benchmark}: ${d.count}`
+			}),
+			Plot.ruleY([0]),
+			...buildLegend({
+				xMin: binMin,
+				xMax,
+				yMax
+			}, legendItems)
+		]
+	});
+}
+function buildColorData(benchmarkNames) {
+	const scheme = d3.schemeObservable10;
+	return {
+		colorMap: new Map(benchmarkNames.map((name, i) => [name, scheme[i % 10]])),
+		legendItems: benchmarkNames.map((name, i) => ({
+			color: scheme[i % 10],
+			label: name,
+			style: "vertical-bar"
+		}))
+	};
+}
+/** Bin samples into grouped histogram bars for each benchmark */
+function buildBarData(allSamples, benchmarkNames) {
+	const sorted = allSamples.map((d) => d.value).sort((a, b) => a - b);
+	const binMin = d3.quantile(sorted, .01);
+	const binMax = d3.quantile(sorted, .99);
+	const binCount = 25;
+	const step = (binMax - binMin) / binCount;
+	const thresholds = d3.range(1, binCount).map((i) => binMin + i * step);
+	const plotWidth = 550;
+	const bins = d3.bin().domain([binMin, binMax]).thresholds(thresholds).value((d) => d.value)(allSamples);
+	const barData = [];
+	const n = benchmarkNames.length;
+	const unitsPerPx = (binMax - binMin) / plotWidth;
+	const groupGapPx = 8;
+	for (const bin of bins) {
+		const counts = /* @__PURE__ */ new Map();
+		for (const d of bin) counts.set(d.benchmark, (counts.get(d.benchmark) || 0) + 1);
+		const full = bin.x1 - bin.x0;
+		const groupGap = Math.min(full * .5, unitsPerPx * groupGapPx);
+		const start = bin.x0 + groupGap / 2;
+		const w = (full - groupGap) / n;
+		benchmarkNames.forEach((benchmark, i) => {
+			const x1 = start + i * w;
+			const x2 = start + (i + 1) * w;
+			barData.push({
+				benchmark,
+				count: counts.get(benchmark) || 0,
+				x1,
+				x2
+			});
+		});
+	}
+	return {
+		barData,
+		binMin,
+		binMax,
+		yMax: (d3.max(barData, (d) => d.count) || 1) * 1.15
+	};
+}
+
+//#endregion
+//#region src/html/browser/SampleTimeSeries.ts
+const OPT_STATUS_NAMES = {
+	1: "interpreted",
+	129: "sparkplug",
+	17: "turbofan",
+	33: "maglev",
+	49: "turbofan+maglev",
+	32769: "optimized"
+};
+const OPT_TIER_COLORS = {
+	turbofan: "#22c55e",
+	optimized: "#22c55e",
+	"turbofan+maglev": "#22c55e",
+	maglev: "#eab308",
+	sparkplug: "#f97316",
+	interpreted: "#dc3545"
+};
+/** Create sample time series showing each sample in order */
+function createSampleTimeSeries(timeSeries, gcEvents = [], pausePoints = [], heapSeries = []) {
+	const ctx = buildPlotContext(timeSeries);
+	const heapData = prepareHeapData(heapSeries, ctx.yMin, ctx.yMax);
+	return Plot.plot({
+		marginTop: 24,
+		marginLeft: 70,
+		marginBottom: 60,
+		marginRight: 110,
+		width: 550,
+		height: 300,
+		style: { fontSize: "14px" },
+		x: {
+			label: "Sample",
+			labelAnchor: "center",
+			labelOffset: 45,
+			grid: true,
+			domain: [ctx.xMin, ctx.xMax]
+		},
+		y: {
+			label: `Time (${ctx.unitSuffix})`,
+			labelAnchor: "top",
+			labelArrow: false,
+			grid: true,
+			domain: [ctx.yMin, ctx.yMax],
+			tickFormat: ctx.formatValue
+		},
+		color: {
+			legend: false,
+			scheme: "observable10"
+		},
+		marks: [
+			...heapMarks(heapData, ctx.yMin),
+			...ctx.hasWarmup ? [Plot.ruleX([0], {
+				stroke: "#999",
+				strokeWidth: 1,
+				strokeDasharray: "4,4"
+			})] : [],
+			gcMark(gcEvents, ctx.yMin, ctx.convertValue),
+			...pauseMarks(pausePoints, ctx.yMin, ctx.yMax),
+			...sampleDotMarks(ctx),
+			Plot.ruleY([ctx.yMin], {
+				stroke: "black",
+				strokeWidth: 1
+			}),
+			...buildLegend({
+				xMin: ctx.xMin,
+				xMax: ctx.xMax,
+				yMax: ctx.yMax
+			}, buildLegendItems(ctx.hasWarmup, gcEvents.length, pausePoints.length, heapData.length > 0, ctx.optTiers, ctx.benchmarks))
+		]
+	});
+}
+function buildPlotContext(timeSeries) {
+	const benchmarks = [...new Set(timeSeries.map((d) => d.benchmark))];
+	const sampleData = buildSampleData(timeSeries, benchmarks);
+	const { unitSuffix, convertValue, formatValue } = getTimeUnit(sampleData.map((d) => d.value));
+	const convertedData = sampleData.map((d) => ({
+		...d,
+		displayValue: convertValue(d.value)
+	}));
+	const { yMin, yMax } = computeYRange(convertedData.map((d) => d.displayValue));
+	return {
+		convertedData,
+		xMin: d3.min(convertedData, (d) => d.sample),
+		xMax: d3.max(convertedData, (d) => d.sample),
+		yMin,
+		yMax,
+		unitSuffix,
+		formatValue,
+		convertValue,
+		hasWarmup: convertedData.some((d) => d.isWarmup),
+		optTiers: [...new Set(convertedData.filter((d) => d.optTier && !d.isWarmup).map((d) => d.optTier))].filter((t) => t !== null),
+		benchmarks
+	};
+}
+function buildSampleData(timeSeries, benchmarks) {
+	const result = [];
+	for (const benchmark of benchmarks) {
+		const isBaseline = benchmark.includes("(baseline)");
+		for (const d of timeSeries.filter((t) => t.benchmark === benchmark)) {
+			const optTier = d.optStatus !== void 0 ? OPT_STATUS_NAMES[d.optStatus] || "unknown" : null;
+			result.push({
+				benchmark,
+				sample: d.iteration,
+				value: d.value,
+				isBaseline,
+				isWarmup: d.isWarmup || false,
+				optTier
+			});
+		}
+	}
+	return result;
+}
+/** Pick display unit (ns/us/ms) based on average value magnitude */
+function getTimeUnit(values) {
+	const avg = d3.mean(values);
+	const fmt0 = (d) => d3.format(",.0f")(d);
+	const fmt1 = (d) => d3.format(",.1f")(d);
+	if (avg < .001) return {
+		unitSuffix: "ns",
+		convertValue: (ms) => ms * 1e6,
+		formatValue: fmt0
+	};
+	if (avg < 1) return {
+		unitSuffix: "μs",
+		convertValue: (ms) => ms * 1e3,
+		formatValue: fmt1
+	};
+	return {
+		unitSuffix: "ms",
+		convertValue: (ms) => ms,
+		formatValue: fmt1
+	};
+}
+/** Compute Y axis range with padding, snapping yMin to a round number */
+function computeYRange(values) {
+	const dataMin = d3.min(values);
+	const dataMax = d3.max(values);
+	const dataRange = dataMax - dataMin;
+	let yMin = dataMin - dataRange * .15;
+	const magnitude = 10 ** Math.floor(Math.log10(Math.abs(yMin)));
+	yMin = Math.floor(yMin / magnitude) * magnitude;
+	if (dataMin > 0 && yMin < 0) yMin = 0;
+	return {
+		yMin,
+		yMax: dataMax + dataRange * .05
+	};
+}
+/** Scale heap byte values into the plot's Y coordinate range */
+function prepareHeapData(heapSeries, yMin, yMax) {
+	if (heapSeries.length === 0) return [];
+	const heapMin = d3.min(heapSeries, (d) => d.value);
+	const heapRange = d3.max(heapSeries, (d) => d.value) - heapMin || 1;
+	const scale = (yMax - yMin) * .25 / heapRange;
+	return heapSeries.map((d) => ({
+		sample: d.iteration,
+		y: yMin + (d.value - heapMin) * scale,
+		heapMB: d.value / 1024 / 1024
+	}));
+}
+function heapMarks(heapData, yMin) {
+	if (heapData.length === 0) return [];
+	return [Plot.areaY(heapData, {
+		x: "sample",
+		y: "y",
+		y1: yMin,
+		fill: "#9333ea",
+		fillOpacity: .15,
+		stroke: "#9333ea",
+		strokeWidth: 1,
+		strokeOpacity: .4
+	}), Plot.tip(heapData, Plot.pointerX({
+		x: "sample",
+		y: "y",
+		title: (d) => `Heap: ${d.heapMB.toFixed(1)} MB`
+	}))];
+}
+function gcMark(gcEvents, yMin, convertValue) {
+	const data = gcEvents.map((gc) => ({
+		x1: gc.sampleIndex,
+		y1: yMin,
+		x2: gc.sampleIndex,
+		y2: yMin + convertValue(gc.duration),
+		duration: gc.duration
+	}));
+	return Plot.link(data, {
+		x1: "x1",
+		y1: "y1",
+		x2: "x2",
+		y2: "y2",
+		stroke: "#22c55e",
+		strokeWidth: 2,
+		strokeOpacity: .8,
+		title: (d) => `GC: ${d.duration.toFixed(2)}ms`
+	});
+}
+function pauseMarks(pausePoints, yMin, yMax) {
+	return pausePoints.map((p) => Plot.ruleX([p.sampleIndex], {
+		y1: yMin,
+		y2: yMax,
+		stroke: "#888",
+		strokeWidth: 1,
+		strokeDasharray: "4,4",
+		strokeOpacity: .7,
+		title: `Pause: ${p.durationMs}ms`
+	}));
+}
+function sampleDotMarks(ctx) {
+	const { convertedData, unitSuffix, formatValue } = ctx;
+	const tipTitle = (d) => d.optTier ? `Sample ${d.sample}: ${formatValue(d.displayValue)}${unitSuffix} [${d.optTier}]` : `Sample ${d.sample}: ${formatValue(d.displayValue)}${unitSuffix}`;
+	return [
+		Plot.dot(convertedData.filter((d) => d.isWarmup), {
+			x: "sample",
+			y: "displayValue",
+			stroke: "#dc3545",
+			fill: "none",
+			strokeWidth: 1.5,
+			r: 3,
+			opacity: .7,
+			title: (d) => `Warmup ${d.sample}: ${formatValue(d.displayValue)}${unitSuffix}`
+		}),
+		Plot.dot(convertedData.filter((d) => d.isBaseline && !d.isWarmup), {
+			x: "sample",
+			y: "displayValue",
+			stroke: "#ffa500",
+			fill: "none",
+			strokeWidth: 2,
+			r: 3,
+			opacity: .8,
+			title: tipTitle
+		}),
+		Plot.dot(convertedData.filter((d) => !d.isBaseline && !d.isWarmup), {
+			x: "sample",
+			y: "displayValue",
+			fill: (d) => d.optTier ? OPT_TIER_COLORS[d.optTier] || "#4682b4" : "#4682b4",
+			r: 3,
+			opacity: .8,
+			title: tipTitle
+		})
+	];
+}
+function buildLegendItems(hasWarmup, gcCount, pauseCount, hasHeap, optTiers, benchmarks) {
+	const items = [];
+	if (hasWarmup) items.push({
+		color: "#dc3545",
+		label: "warmup",
+		style: "hollow-dot"
+	});
+	if (gcCount > 0) items.push({
+		color: "#22c55e",
+		label: `gc (${gcCount})`,
+		style: "vertical-line"
+	});
+	if (pauseCount > 0) items.push({
+		color: "#888",
+		label: `pause (${pauseCount})`,
+		style: "vertical-line",
+		strokeDash: "4,4"
+	});
+	if (hasHeap) items.push({
+		color: "#9333ea",
+		label: "heap",
+		style: "rect"
+	});
+	for (const tier of optTiers) items.push({
+		color: OPT_TIER_COLORS[tier] || "#4682b4",
+		label: tier,
+		style: "filled-dot"
+	});
+	if (optTiers.length === 0) {
+		const sorted = [...benchmarks].sort((a, b) => {
+			const aBase = a.includes("(baseline)");
+			return aBase === b.includes("(baseline)") ? 0 : aBase ? 1 : -1;
+		});
+		for (const bm of sorted) {
+			const isBase = bm.includes("(baseline)");
+			items.push({
+				color: isBase ? "#ffa500" : "#4682b4",
+				label: bm,
+				style: isBase ? "hollow-dot" : "filled-dot"
+			});
+		}
+	}
+	return items;
+}
+
+//#endregion
+//#region src/html/browser/RenderPlots.ts
+/** Render all plots for the benchmark report */
+function renderPlots(data) {
+	const gcEnabled = data.metadata.gcTrackingEnabled ?? false;
+	data.groups.forEach((group, groupIndex) => {
+		try {
+			renderGroup(group, groupIndex, gcEnabled);
+		} catch (error) {
+			console.error("Error rendering plots for group", groupIndex, error);
+			showError(groupIndex, `Error rendering visualizations: ${error.message}`);
+		}
+	});
+}
+function renderGroup(group, groupIndex, gcEnabled) {
+	const benchmarks = prepareBenchmarks(group);
+	if (benchmarks.length === 0 || !benchmarks[0].samples?.length) {
+		showError(groupIndex, "No sample data available for visualization");
+		return;
+	}
+	const flattened = flattenSamples(benchmarks);
+	const benchmarkNames = benchmarks.map((b) => b.name);
+	const currentBenchmark = benchmarks.find((b) => !b.isBaseline);
+	if (currentBenchmark?.comparisonCI?.histogram) renderToContainer(`#ci-plot-${groupIndex}`, true, () => createCIPlot(currentBenchmark.comparisonCI));
+	renderToContainer(`#histogram-${groupIndex}`, flattened.allSamples.length > 0, () => createHistogramKde(flattened.allSamples, benchmarkNames));
+	const { timeSeries, allGcEvents, allPausePoints, heapSeries } = flattened;
+	renderToContainer(`#sample-timeseries-${groupIndex}`, timeSeries.length > 0, () => createSampleTimeSeries(timeSeries, allGcEvents, allPausePoints, heapSeries));
+	const statsContainer = document.querySelector(`#stats-${groupIndex}`);
+	if (statsContainer) statsContainer.innerHTML = benchmarks.map((b) => generateStatsHtml(b, gcEnabled)).join("");
+}
+/** Clear a container element and append a freshly created plot */
+function renderToContainer(selector, condition, create) {
+	const container = document.querySelector(selector);
+	if (!container || !condition) return;
+	container.innerHTML = "";
+	container.appendChild(create());
+}
+/** Combine baseline and benchmarks into a single list with display names */
+function prepareBenchmarks(group) {
+	const benchmarks = [];
+	if (group.baseline) {
+		const name = group.baseline.name + " (baseline)";
+		benchmarks.push({
+			...group.baseline,
+			name,
+			isBaseline: true
+		});
+	}
+	for (const b of group.benchmarks) benchmarks.push({
+		...b,
+		isBaseline: false
+	});
+	return benchmarks;
+}
+function flattenSamples(benchmarks) {
+	const result = {
+		allSamples: [],
+		timeSeries: [],
+		heapSeries: [],
+		allGcEvents: [],
+		allPausePoints: []
+	};
+	for (const b of benchmarks) if (b.samples?.length) flattenBenchmark(b, result);
+	return result;
+}
+/** Extract time series, heap, GC, and pause data from one benchmark */
+function flattenBenchmark(b, out) {
+	const warmupCount = b.warmupSamples?.length || 0;
+	b.warmupSamples?.forEach((value, i) => {
+		out.timeSeries.push({
+			benchmark: b.name,
+			iteration: i - warmupCount,
+			value,
+			isWarmup: true
+		});
+	});
+	const sampleEndTimes = cumulativeSum(b.samples);
+	b.samples.forEach((value, i) => {
+		out.allSamples.push({
+			benchmark: b.name,
+			value,
+			iteration: i
+		});
+		out.timeSeries.push({
+			benchmark: b.name,
+			iteration: i,
+			value,
+			isWarmup: false,
+			optStatus: b.optSamples?.[i]
+		});
+		if (b.heapSamples?.[i] !== void 0) out.heapSeries.push({
+			benchmark: b.name,
+			iteration: i,
+			value: b.heapSamples[i]
+		});
+	});
+	b.gcEvents?.forEach((gc) => {
+		const idx = sampleEndTimes.findIndex((t) => t >= gc.offset);
+		out.allGcEvents.push({
+			benchmark: b.name,
+			sampleIndex: idx >= 0 ? idx : b.samples.length - 1,
+			duration: gc.duration
+		});
+	});
+	b.pausePoints?.forEach((p) => {
+		out.allPausePoints.push({
+			benchmark: b.name,
+			sampleIndex: p.sampleIndex,
+			durationMs: p.durationMs
+		});
+	});
+}
+function cumulativeSum(arr) {
+	const result = [];
+	let sum = 0;
+	for (const v of arr) {
+		sum += v;
+		result.push(sum);
+	}
+	return result;
+}
+function showError(groupIndex, message) {
+	const container = document.querySelector(`#group-${groupIndex}`);
+	if (container) container.innerHTML = `<div class="error">${message}</div>`;
+}
+function formatPct(v) {
+	return (v >= 0 ? "+" : "") + v.toFixed(1) + "%";
+}
+function generateCIHtml(ci) {
+	if (!ci) return "";
+	const text = `${formatPct(ci.percent)} [${formatPct(ci.ci[0])}, ${formatPct(ci.ci[1])}]`;
+	return `
+    <div class="stat-item">
+      <div class="stat-label">vs Baseline</div>
+      <div class="stat-value ci-${ci.direction}">${text}</div>
+    </div>
+  `;
+}
+function generateStatsHtml(b, gcEnabled) {
+	const ciHtml = generateCIHtml(b.comparisonCI);
+	if (b.sectionStats?.length) {
+		const statsHtml = (gcEnabled ? b.sectionStats : b.sectionStats.filter((s) => s.groupTitle !== "gc")).map((stat) => `
+      <div class="stat-item">
+        <div class="stat-label">${stat.groupTitle ? stat.groupTitle + " " : ""}${stat.label}</div>
+        <div class="stat-value">${stat.value}</div>
+      </div>
+    `).join("");
+		return `
+      <div class="summary-stats">
+        <h3 style="margin-bottom: 10px; color: #333;">${b.name}</h3>
+        <div class="stats-grid">${ciHtml}${statsHtml}</div>
+      </div>
+    `;
+	}
+	return `
+    <div class="summary-stats">
+      <h3 style="margin-bottom: 10px; color: #333;">${b.name}</h3>
+      <div class="stats-grid">
+        ${ciHtml}
+        <div class="stat-item">
+          <div class="stat-label">Min</div>
+          <div class="stat-value">${b.stats.min.toFixed(3)}ms</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-label">Median</div>
+          <div class="stat-value">${b.stats.p50.toFixed(3)}ms</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-label">Mean</div>
+          <div class="stat-value">${b.stats.avg.toFixed(3)}ms</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-label">Max</div>
+          <div class="stat-value">${b.stats.max.toFixed(3)}ms</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-label">P75</div>
+          <div class="stat-value">${b.stats.p75.toFixed(3)}ms</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-label">P99</div>
+          <div class="stat-value">${b.stats.p99.toFixed(3)}ms</div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+//#endregion
+export { renderPlots };