// Copyright Epic Games, Inc. All Rights Reserved.
// Interactive memory analysis view: summary cards, memory timeline, and a
// tabbed callsite panel (Leaky / Churn / Hot) sharing one slot below the chart.

import { getAllocSummary, getMemoryTimeline, getCallstackStats, getChurnStats, getCallstack, getAllocSizeHistogram } from "./api.js";
import { escapeHtml } from "./util.js";

function formatNum(n) {
	return Number(n || 0).toLocaleString();
}

function formatBytes(bytes) {
	const sign = bytes < 0 ? "-" : "";
	let value = Math.abs(Number(bytes || 0));
	const units = ["B", "KB", "MB", "GB", "TB"];
	let unit = 0;
	while (value >= 1024 && unit < units.length - 1) {
		value /= 1024;
		unit++;
	}
	const decimals = unit === 0 ? 0 : value >= 100 ? 0 : value >= 10 ? 1 : 2;
	return `${sign}${value.toFixed(decimals)} ${units[unit]}`;
}

function formatDistance(events) {
	return `${Math.round(Number(events || 0)).toLocaleString()} ev`;
}

function formatTimeAxis(us) {
	const value = Number(us || 0);
	if (value < 1000) return `${Math.round(value)} µs`;
	if (value < 1_000_000) return `${Math.round(value / 1000)} ms`;
	return `${Math.round(value / 1_000_000)} s`;
}

function chooseNiceTimeStep(spanUs, targetTickCount) {
	const rawStep = Math.max(1, spanUs / Math.max(1, targetTickCount));
	const bases = [1, 2, 5];
	const magnitude = Math.pow(10, Math.floor(Math.log10(rawStep)));
	for (const scale of [1, 10]) {
		for (const base of bases) {
			const step = base * magnitude * scale;
			if (step >= rawStep) {
				return step;
			}
		}
	}
	return 10 * magnitude;
}

function buildNiceTimeTicks(startUs, endUs, targetTickCount) {
	const spanUs = Math.max(1, endUs - startUs);
	const stepUs = chooseNiceTimeStep(spanUs, targetTickCount);
	const firstTickUs = Math.ceil(startUs / stepUs) * stepUs;
	const ticks = [];
	for (let tickUs = firstTickUs; tickUs <= endUs; tickUs += stepUs) {
		ticks.push(tickUs);
	}
	if (ticks.length === 0) {
		const roundedStart = Math.floor(startUs / stepUs) * stepUs;
		const roundedEnd = Math.ceil(endUs / stepUs) * stepUs;
		if (roundedStart >= startUs && roundedStart <= endUs) {
			ticks.push(roundedStart);
		}
		if (roundedEnd >= startUs && roundedEnd <= endUs && roundedEnd !== roundedStart) {
			ticks.push(roundedEnd);
		}
	}
	return ticks;
}

function trimPath(path) {
	if (!path) return "";
	const parts = String(path).split(/[\\/]/);
	return parts[parts.length - 1] || path;
}

function compareValues(a, b, desc) {
	if (typeof a === "string" || typeof b === "string") {
		const result = String(a || "").localeCompare(String(b || ""), undefined, { numeric: true, sensitivity: "base" });
		return desc ? -result : result;
	}
	const result = Number(a || 0) - Number(b || 0);
	return desc ? -result : result;
}

function escapeRegExp(s) {
	return String(s).replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

function highlightMatch(text, filterText) {
	const source = String(text || "");
	if (!filterText) {
		return escapeHtml(source);
	}
	const regex = new RegExp(`(${escapeRegExp(filterText)})`, "ig");
	return escapeHtml(source).replace(regex, '<mark class="memory-mark">$1</mark>');
}

function buildSummaryHtml(row, filterText = "") {
	const top = highlightMatch(row.top_frame || row.summary || `Callstack ${row.callstack_id}`, filterText);
	const second = row.secondary_frame ? `<div class="memory-summary-secondary">${highlightMatch(row.secondary_frame, filterText)}</div>` : "";
	const badges = [];
	if (row.hidden_prefix_count > 0) {
		badges.push(`<span class="memory-badge">skip ${escapeHtml(formatNum(row.hidden_prefix_count))}</span>`);
	}
	if (row.included_third_party_boundary) {
		badges.push(`<span class="memory-badge">3p boundary</span>`);
	}
	const badgeHtml = badges.length ? `<div class="memory-summary-badges">${badges.join("")}</div>` : "";
	return `<div class="memory-summary"><div class="memory-summary-top-row"><div class="memory-summary-top">${top}</div>${badgeHtml}</div>${second}</div>`;
}

function describeBucket(bucket) {
	const min = Number(bucket.min_size || 0);
	const max = Number(bucket.max_size || 0);
	if (min === 0 && max === 0) {
		return "0 bytes";
	}
	if (min === max) {
		return `${formatBytes(min)}`;
	}
	return `${formatBytes(min)} – ${formatBytes(max)}`;
}

function formatBucketEdge(bucket) {
	const max = Number(bucket.max_size || 0);
	if (max === 0) {
		return "0";
	}
	return formatBytes(max);
}

function sparklinePath(samples, width, height, valueIndex) {
	if (!samples || samples.length === 0) {
		return "";
	}
	let minValue = Infinity;
	let maxValue = -Infinity;
	for (const sample of samples) {
		const value = Number(sample[valueIndex] || 0);
		minValue = Math.min(minValue, value);
		maxValue = Math.max(maxValue, value);
	}
	if (!isFinite(minValue) || !isFinite(maxValue)) {
		return "";
	}
	if (minValue === maxValue) {
		minValue -= 1;
		maxValue += 1;
	}
	const count = samples.length;
	const points = [];
	for (let i = 0; i < count; ++i) {
		const x = count > 1 ? (i / (count - 1)) * width : width * 0.5;
		const norm = (Number(samples[i][valueIndex] || 0) - minValue) / (maxValue - minValue);
		const y = height - norm * height;
		points.push(`${i === 0 ? "M" : "L"}${x.toFixed(1)} ${y.toFixed(1)}`);
	}
	return points.join(" ");
}

export class MemoryView {
	constructor(model, containerEl) {
		this.model = model;
		this.container = containerEl;
		this.loaded = false;
		this.summary = null;
		this.memoryTimeline = null;
		this.leaks = [];
		this.churn = [];
		this.hot = [];
		this.sizeHistogram = null;
		this.histogramMetric = "count";
		this.callstackCache = new Map();
		this.selectedCallstackId = 0;
		this.tableState = {
			leaks: { sortKey: "live_bytes", desc: true, groupMode: "none", filterText: "" },
			churn: { sortKey: "churn_allocs", desc: true, groupMode: "none", filterText: "" },
			hot: { sortKey: "total_allocs", desc: true, groupMode: "none", filterText: "" },
		};
		this.activeTable = "leaks";
		this.loadStateFromUrl();
		this.buildLayout();
	}

	static TAB_DEFS = [
		{ name: "leaks", label: "Leaky callsites" },
		{ name: "churn", label: "Churn" },
		{ name: "hot", label: "Hot callsites" },
	];

	buildLayout() {
		this.container.innerHTML =
			`<div class="memory-view">` +
			`<div class="memory-cards" id="memory-cards"></div>` +
			`<div class="memory-panel">` +
			`<div class="memory-panel-header">` +
			`<div class="memory-panel-title">Memory timeline</div>` +
			`<div class="memory-panel-subtitle" id="memory-timeline-meta"></div>` +
			`</div>` +
			`<div class="memory-chart-wrap" id="memory-chart-wrap">` +
			`<svg class="memory-chart" id="memory-chart"></svg>` +
			`</div>` +
			`</div>` +
			`<div class="memory-panel">` +
			`<div class="memory-panel-header memory-panel-header-wrap">` +
			`<div>` +
			`<div class="memory-panel-title">Allocation size distribution</div>` +
			`<div class="memory-panel-subtitle" id="memory-histogram-meta"></div>` +
			`</div>` +
			`<div class="memory-controls">` +
			`<label>Metric <select id="memory-histogram-metric">` +
			`<option value="count">Alloc count</option>` +
			`<option value="bytes">Total bytes</option>` +
			`</select></label>` +
			`</div>` +
			`</div>` +
			`<div class="memory-chart-wrap" id="memory-histogram-wrap">` +
			`<svg class="memory-chart memory-histogram" id="memory-histogram"></svg>` +
			`</div>` +
			`</div>` +
			`<div class="memory-grid">` +
			`<div class="memory-tabbed">` +
			`<div class="memory-tab-bar" role="tablist">` +
			MemoryView.TAB_DEFS.map(({ name, label }) =>
				`<button type="button" class="memory-tab" role="tab" data-mem-tab="${name}" id="memory-tab-${name}" aria-controls="memory-tabpanel-${name}">${escapeHtml(label)}</button>`
			).join("") +
			`</div>` +
			this.buildPanelMarkup("leaks", "Leaky callsites", "Top live allocation stacks", [
				["live_bytes", "Live bytes"],
				["live_count", "Live allocs"],
				["summary", "Summary"],
			]) +
			this.buildPanelMarkup("churn", "Churn", "Short-lived allocation sites", [
				["churn_allocs", "Short-lived allocs"],
				["churn_bytes", "Churn bytes"],
				["mean_distance", "Avg distance"],
				["summary", "Summary"],
			]) +
			this.buildPanelMarkup("hot", "Hot callsites", "Highest total allocation activity", [
				["total_allocs", "Total allocs"],
				["total_bytes", "Total bytes"],
				["churn_allocs", "Churn allocs"],
				["summary", "Summary"],
			]) +
			`</div>` +
			`<div class="memory-panel memory-callstack-panel">` +
			`<div class="memory-panel-header"><div class="memory-panel-title">Callstack details</div><div class="memory-panel-subtitle" id="memory-callstack-meta">Select a row to inspect its frames</div></div>` +
			`<div class="memory-callstack-body" id="memory-callstack-body"><div class="memory-empty">No callstack selected.</div></div>` +
			`</div>` +
			`</div>` +
			`</div>`;

		this.cardsEl = this.container.querySelector("#memory-cards");
		this.chartWrapEl = this.container.querySelector("#memory-chart-wrap");
		this.chartEl = this.container.querySelector("#memory-chart");
		this.chartMetaEl = this.container.querySelector("#memory-timeline-meta");
		this.histogramWrapEl = this.container.querySelector("#memory-histogram-wrap");
		this.histogramEl = this.container.querySelector("#memory-histogram");
		this.histogramMetaEl = this.container.querySelector("#memory-histogram-meta");
		this.histogramMetricEl = this.container.querySelector("#memory-histogram-metric");
		this.callstackMetaEl = this.container.querySelector("#memory-callstack-meta");
		this.callstackBodyEl = this.container.querySelector("#memory-callstack-body");
		this.panelRefs = {
			leaks: {
				tbody: this.container.querySelector("#memory-leaks-body"),
				sort: this.container.querySelector("#memory-leaks-sort"),
				filter: this.container.querySelector("#memory-leaks-filter"),
				clear: this.container.querySelector("#memory-leaks-clear"),
				direction: this.container.querySelector("#memory-leaks-direction"),
				group: this.container.querySelector("#memory-leaks-group"),
			},
			churn: {
				tbody: this.container.querySelector("#memory-churn-body"),
				sort: this.container.querySelector("#memory-churn-sort"),
				filter: this.container.querySelector("#memory-churn-filter"),
				clear: this.container.querySelector("#memory-churn-clear"),
				direction: this.container.querySelector("#memory-churn-direction"),
				group: this.container.querySelector("#memory-churn-group"),
			},
			hot: {
				tbody: this.container.querySelector("#memory-hot-body"),
				sort: this.container.querySelector("#memory-hot-sort"),
				filter: this.container.querySelector("#memory-hot-filter"),
				clear: this.container.querySelector("#memory-hot-clear"),
				direction: this.container.querySelector("#memory-hot-direction"),
				group: this.container.querySelector("#memory-hot-group"),
			},
		};

		this.resizeObserver = new ResizeObserver(() => {
			if (this.loaded) {
				this.renderTimeline();
				this.renderSizeHistogram();
			}
		});
		this.resizeObserver.observe(this.chartWrapEl);
		this.resizeObserver.observe(this.histogramWrapEl);

		this.histogramMetricEl.value = this.histogramMetric;
		this.histogramMetricEl.addEventListener("change", () => {
			this.histogramMetric = this.histogramMetricEl.value;
			this.saveStateToUrl();
			this.renderSizeHistogram();
		});

		for (const [name, refs] of Object.entries(this.panelRefs)) {
			refs.sort.value = this.tableState[name].sortKey;
			refs.group.value = this.tableState[name].groupMode;
			refs.filter.value = this.tableState[name].filterText;
			refs.sort.addEventListener("change", () => {
				this.tableState[name].sortKey = refs.sort.value;
				this.tableState[name].desc = refs.sort.value !== "mean_distance";
				this.updateDirectionButton(name);
				this.saveStateToUrl();
				this.renderTableByName(name);
			});
			refs.direction.addEventListener("click", () => {
				this.tableState[name].desc = !this.tableState[name].desc;
				this.updateDirectionButton(name);
				this.saveStateToUrl();
				this.renderTableByName(name);
			});
			refs.filter.addEventListener("input", () => {
				this.tableState[name].filterText = refs.filter.value;
				this.updateFilterButton(name);
				this.saveStateToUrl();
				this.renderTableByName(name);
			});
			refs.clear.addEventListener("click", () => {
				refs.filter.value = "";
				this.tableState[name].filterText = "";
				this.updateFilterButton(name);
				this.saveStateToUrl();
				this.renderTableByName(name);
				refs.filter.focus();
			});
			refs.group.addEventListener("change", () => {
				this.tableState[name].groupMode = refs.group.value;
				this.saveStateToUrl();
				this.renderTableByName(name);
			});
			this.updateDirectionButton(name);
			this.updateFilterButton(name);
		}

		this.tabButtons = {};
		this.tabPanels = {};
		for (const { name } of MemoryView.TAB_DEFS) {
			const button = this.container.querySelector(`[data-mem-tab="${name}"]`);
			const panel = this.container.querySelector(`[data-mem-tabpanel="${name}"]`);
			this.tabButtons[name] = button;
			this.tabPanels[name] = panel;
			button.addEventListener("click", () => this.setActiveTable(name));
		}
		this.setActiveTable(this.activeTable, /*save=*/ false);

		this.container.addEventListener("keydown", (e) => {
			if (e.key !== "/" || e.defaultPrevented) {
				return;
			}
			const target = e.target;
			if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable)) {
				return;
			}
			e.preventDefault();
			const activeView = this.container.closest(".view");
			if (activeView && activeView.hidden) {
				return;
			}
			const activeFilter = this.panelRefs[this.activeTable]?.filter;
			if (activeFilter) {
				activeFilter.focus();
				activeFilter.select();
			}
		});
		this.container.tabIndex = -1;
		this.container.dataset.memoryView = "true";
	}

	setActiveTable(name, save = true) {
		if (!this.tabButtons || !this.tabButtons[name]) {
			return;
		}
		this.activeTable = name;
		for (const { name: tabName } of MemoryView.TAB_DEFS) {
			const isActive = tabName === name;
			const button = this.tabButtons[tabName];
			const panel = this.tabPanels[tabName];
			button.classList.toggle("active", isActive);
			button.setAttribute("aria-selected", isActive ? "true" : "false");
			button.tabIndex = isActive ? 0 : -1;
			panel.hidden = !isActive;
		}
		if (save) {
			this.saveStateToUrl();
		}
	}

	buildPanelMarkup(name, title, subtitle, sortOptions) {
		const sortHtml = sortOptions.map(([value, label]) => `<option value="${value}">${escapeHtml(label)}</option>`).join("");
		return `
			<div class="memory-panel memory-tabpanel" data-mem-tabpanel="${name}" id="memory-tabpanel-${name}" role="tabpanel" aria-labelledby="memory-tab-${name}" hidden>
				<div class="memory-panel-header memory-panel-header-wrap">
					<div>
						<div class="memory-panel-title">${escapeHtml(title)}</div>
						<div class="memory-panel-subtitle">${escapeHtml(subtitle)}</div>
					</div>
					<div class="memory-controls">
						<label>Filter <input type="text" id="memory-${name}-filter" class="memory-filter-input" placeholder="filter entries..."></label>
						<button type="button" class="memory-clear-btn" id="memory-${name}-clear">Clear</button>
						<label>Sort <select id="memory-${name}-sort">${sortHtml}</select></label>
						<button type="button" class="memory-direction-btn" id="memory-${name}-direction"></button>
						<label>Group <select id="memory-${name}-group">
							<option value="none">None</option>
							<option value="top_frame">Top frame</option>
							<option value="prefix">Trimmed prefix</option>
						</select></label>
					</div>
				</div>
				<div class="memory-table-wrap"><table class="memory-table"><tbody id="memory-${name}-body"></tbody></table></div>
			</div>`;
	}

	loadStateFromUrl() {
		const params = new URLSearchParams(window.location.search);
		const histogramMetric = params.get("mem_hist_metric");
		if (histogramMetric === "count" || histogramMetric === "bytes") {
			this.histogramMetric = histogramMetric;
		}
		const activeTable = params.get("mem_table");
		if (activeTable && this.tableState[activeTable]) {
			this.activeTable = activeTable;
		}
		for (const [name, state] of Object.entries(this.tableState)) {
			const sortKey = params.get(`mem_${name}_sort`);
			const groupMode = params.get(`mem_${name}_group`);
			const dir = params.get(`mem_${name}_dir`);
			const filterText = params.get(`mem_${name}_filter`);
			if (sortKey) {
				state.sortKey = sortKey;
			}
			if (groupMode) {
				state.groupMode = groupMode;
			}
			if (filterText) {
				state.filterText = filterText;
			}
			if (dir === "asc") {
				state.desc = false;
			}
			else if (dir === "desc") {
				state.desc = true;
			}
		}
	}

	saveStateToUrl() {
		const url = new URL(window.location.href);
		url.searchParams.set("mem_hist_metric", this.histogramMetric);
		url.searchParams.set("mem_table", this.activeTable);
		for (const [name, state] of Object.entries(this.tableState)) {
			url.searchParams.set(`mem_${name}_sort`, state.sortKey);
			url.searchParams.set(`mem_${name}_group`, state.groupMode);
			url.searchParams.set(`mem_${name}_dir`, state.desc ? "desc" : "asc");
			if (state.filterText) {
				url.searchParams.set(`mem_${name}_filter`, state.filterText);
			}
			else {
				url.searchParams.delete(`mem_${name}_filter`);
			}
		}
		window.history.replaceState({}, "", url);
	}

	updateFilterButton(name) {
		const refs = this.panelRefs[name];
		const hasText = !!this.tableState[name].filterText;
		refs.clear.disabled = !hasText;
		refs.clear.title = hasText ? "Clear filter" : "Filter is empty";
	}

	updateDirectionButton(name) {
		const refs = this.panelRefs[name];
		const desc = this.tableState[name].desc;
		refs.direction.textContent = desc ? "↓ Desc" : "↑ Asc";
		refs.direction.setAttribute("aria-label", desc ? "Sort descending" : "Sort ascending");
		refs.direction.title = desc ? "Sorting descending" : "Sorting ascending";
	}

	async ensureLoaded() {
		if (this.loaded) return;
		this.loaded = true;
		await this.refresh();
	}

	async refresh() {
		this.renderLoading();
		try {
			const [summary, memoryTimeline, leakResponse, churnResponse, sizeHistogram] = await Promise.all([
				getAllocSummary(),
				getMemoryTimeline({ maxSamples: 1200 }),
				getCallstackStats(100),
				getChurnStats(200),
				getAllocSizeHistogram(),
			]);
			this.summary = summary;
			this.memoryTimeline = memoryTimeline;
			this.leaks = (leakResponse && leakResponse.stats) || [];
			this.churn = (churnResponse && churnResponse.stats) || [];
			this.sizeHistogram = sizeHistogram;
			this.hot = this.churn.slice().sort((a, b) => {
				if (b.total_allocs !== a.total_allocs) return b.total_allocs - a.total_allocs;
				return b.total_bytes - a.total_bytes;
			}).slice(0, 100);
			this.render();
		} catch (e) {
			this.cardsEl.innerHTML = "";
			this.chartEl.innerHTML = "";
			this.chartMetaEl.textContent = "";
			this.histogramEl.innerHTML = "";
			this.histogramMetaEl.textContent = "";
			for (const refs of Object.values(this.panelRefs)) {
				refs.tbody.innerHTML = `<tr><td class="memory-empty">Failed to load memory data: ${escapeHtml(e.message)}</td></tr>`;
			}
			this.callstackBodyEl.innerHTML = `<div class="memory-empty">Failed to load memory data.</div>`;
		}
	}

	renderLoading() {
		this.cardsEl.innerHTML = `<div class="memory-card"><div class="memory-card-label">Loading</div><div class="memory-card-value">Memory analysis…</div></div>`;
		this.chartEl.innerHTML = "";
		this.chartMetaEl.textContent = "";
		this.histogramEl.innerHTML = "";
		this.histogramMetaEl.textContent = "Loading…";
		for (const refs of Object.values(this.panelRefs)) {
			refs.tbody.innerHTML = `<tr><td class="memory-empty">Loading…</td></tr>`;
		}
	}

	render() {
		this.renderCards();
		this.renderTimeline();
		this.renderSizeHistogram();
		this.renderTableByName("leaks");
		this.renderTableByName("churn");
		this.renderTableByName("hot");
	}

	renderCards() {
		const s = this.summary || {};
		this.cardsEl.innerHTML = [
			this.formatCard("Peak memory", formatBytes(s.peak_bytes)),
			this.formatCard("End memory", formatBytes(s.end_bytes)),
			this.formatCard("Live allocations", formatNum(s.live_allocations)),
			this.formatCard("Total allocs", formatNum(s.total_allocs)),
			this.formatCard("Total frees", formatNum(s.total_frees)),
			this.formatCard("Reallocs", formatNum((s.total_realloc_allocs || 0) + (s.total_realloc_frees || 0))),
		].join("");
	}

	formatCard(label, value) {
		return `<div class="memory-card"><div class="memory-card-label">${escapeHtml(label)}</div><div class="memory-card-value">${escapeHtml(value)}</div></div>`;
	}

	renderTimeline() {
		const samples = (this.memoryTimeline && this.memoryTimeline.samples) || [];
		if (samples.length === 0) {
			this.chartMetaEl.textContent = "No memory timeline samples";
			this.chartEl.innerHTML = `<text x="500" y="110" text-anchor="middle" class="memory-chart-text">No memory timeline samples</text>`;
			return;
		}

		const width = Math.max(320, Math.floor(this.chartWrapEl.getBoundingClientRect().width) - 24);
		const height = 220;
		const padLeft = 56;
		const padRight = 12;
		const padTop = 12;
		const padBottom = 22;
		const chartWidth = width - padLeft - padRight;
		const chartHeight = height - padTop - padBottom;
		let minValue = Infinity;
		let maxValue = -Infinity;
		for (const sample of samples) {
			minValue = Math.min(minValue, Number(sample[1] || 0));
			maxValue = Math.max(maxValue, Number(sample[1] || 0));
		}
		if (minValue === maxValue) {
			minValue -= 1;
			maxValue += 1;
		}

		const xAt = (index) => samples.length > 1 ? (padLeft + (index / (samples.length - 1)) * chartWidth) : (padLeft + chartWidth * 0.5);
		const yAt = (value) => {
			const norm = (Number(value || 0) - minValue) / Math.max(1, maxValue - minValue);
			return padTop + chartHeight - norm * chartHeight;
		};
		const path = samples.map((sample, index) => `${index === 0 ? "M" : "L"}${xAt(index).toFixed(1)} ${yAt(sample[1]).toFixed(1)}`).join(" ");

		const grid = [];
		for (let i = 0; i <= 4; ++i) {
			const y = padTop + chartHeight * i / 4;
			const value = maxValue + (minValue - maxValue) * i / 4;
			grid.push(`<line x1="${padLeft}" y1="${y}" x2="${padLeft + chartWidth}" y2="${y}" class="memory-chart-grid"/>`);
			grid.push(`<text x="${padLeft - 6}" y="${y + 4}" text-anchor="end" class="memory-chart-axis">${escapeHtml(formatBytes(value))}</text>`);
		}

		const startUs = Number(samples[0][0] || 0);
		const endUs = Number(samples[samples.length - 1][0] || 0);
		const spanUs = Math.max(1, endUs - startUs);
		const targetTickCount = Math.max(3, Math.min(8, Math.floor(chartWidth / 110)));
		const ticks = buildNiceTimeTicks(startUs, endUs, targetTickCount);
		for (const timeUs of ticks) {
			const t = spanUs > 0 ? ((timeUs - startUs) / spanUs) : 0;
			const x = padLeft + chartWidth * t;
			grid.push(`<line x1="${x}" y1="${padTop}" x2="${x}" y2="${padTop + chartHeight}" class="memory-chart-grid memory-chart-grid-vert"/>`);
			grid.push(`<text x="${x}" y="${height - 4}" text-anchor="middle" class="memory-chart-axis">${escapeHtml(formatTimeAxis(timeUs))}</text>`);
		}

		const durationUs = (this.model.session.trace_end_us || 0) - (this.model.session.trace_start_us || 0);
		this.chartMetaEl.textContent = `${formatNum(samples.length)} samples across ${(durationUs / 1_000_000).toFixed(2)} s`;
		this.chartEl.setAttribute("viewBox", `0 0 ${width} ${height}`);
		this.chartEl.setAttribute("preserveAspectRatio", "xMinYMin meet");
		this.chartEl.innerHTML =
			`<rect x="0" y="0" width="${width}" height="${height}" class="memory-chart-bg"/>` +
			grid.join("") +
			`<path d="${path}" class="memory-chart-line"/>`;
	}

	renderSizeHistogram() {
		const buckets = (this.sizeHistogram && this.sizeHistogram.buckets) || [];
		if (buckets.length === 0) {
			this.histogramMetaEl.textContent = "No allocations recorded";
			this.histogramEl.innerHTML = `<text x="500" y="110" text-anchor="middle" class="memory-chart-text">No allocations recorded</text>`;
			return;
		}

		const metric = this.histogramMetric === "bytes" ? "bytes" : "count";
		const metricLabel = metric === "bytes" ? "Total bytes" : "Alloc count";
		const valueFor = (b) => Number((metric === "bytes" ? b.bytes : b.count) || 0);
		const formatValue = metric === "bytes" ? formatBytes : formatNum;

		let maxValue = 0;
		let totalValue = 0;
		for (const bucket of buckets) {
			const v = valueFor(bucket);
			if (v > maxValue) maxValue = v;
			totalValue += v;
		}
		if (maxValue === 0) {
			maxValue = 1;
		}

		const width = Math.max(320, Math.floor(this.histogramWrapEl.getBoundingClientRect().width) - 24);
		const height = 240;
		const padLeft = 64;
		const padRight = 12;
		const padTop = 12;
		const padBottom = 42;
		const chartWidth = width - padLeft - padRight;
		const chartHeight = height - padTop - padBottom;

		const bucketCount = buckets.length;
		const slotWidth = chartWidth / bucketCount;
		const barGap = Math.max(1, Math.min(4, slotWidth * 0.15));
		const barWidth = Math.max(1, slotWidth - barGap);

		const parts = [];
		parts.push(`<rect x="0" y="0" width="${width}" height="${height}" class="memory-chart-bg"/>`);

		// Horizontal grid + y-axis labels at 0, 25, 50, 75, 100% of max.
		for (let i = 0; i <= 4; ++i) {
			const y = padTop + chartHeight * i / 4;
			const value = maxValue * (1 - i / 4);
			parts.push(`<line x1="${padLeft}" y1="${y}" x2="${padLeft + chartWidth}" y2="${y}" class="memory-chart-grid"/>`);
			parts.push(`<text x="${padLeft - 6}" y="${y + 4}" text-anchor="end" class="memory-chart-axis">${escapeHtml(formatValue(value))}</text>`);
		}

		// Bars. X-axis labels are drawn for a subset of buckets to avoid overlap.
		const labelStride = Math.max(1, Math.ceil(bucketCount / Math.max(3, Math.floor(chartWidth / 64))));
		for (let i = 0; i < bucketCount; ++i) {
			const bucket = buckets[i];
			const value = valueFor(bucket);
			const barHeight = (value / maxValue) * chartHeight;
			const x = padLeft + i * slotWidth + barGap / 2;
			const y = padTop + chartHeight - barHeight;
			const label = describeBucket(bucket);
			const tooltip = `${label}\n${metricLabel}: ${formatValue(value)}\nAlloc count: ${formatNum(bucket.count)}\nTotal bytes: ${formatBytes(bucket.bytes)}`;
			parts.push(
				`<rect x="${x.toFixed(1)}" y="${y.toFixed(1)}" width="${barWidth.toFixed(1)}" height="${Math.max(0, barHeight).toFixed(1)}" class="memory-histogram-bar"><title>${escapeHtml(tooltip)}</title></rect>`
			);
			if (i % labelStride === 0 || i === bucketCount - 1) {
				const tickX = padLeft + i * slotWidth + slotWidth / 2;
				parts.push(
					`<text x="${tickX.toFixed(1)}" y="${(padTop + chartHeight + 14).toFixed(1)}" text-anchor="middle" class="memory-chart-axis">${escapeHtml(formatBucketEdge(bucket))}</text>`
				);
			}
		}

		// Axis title for x.
		parts.push(
			`<text x="${(padLeft + chartWidth / 2).toFixed(1)}" y="${(height - 4).toFixed(1)}" text-anchor="middle" class="memory-chart-axis">Allocation size (power-of-two buckets)</text>`
		);

		const summaryTotalCount = Number((this.sizeHistogram && this.sizeHistogram.total_count) || 0);
		const summaryTotalBytes = Number((this.sizeHistogram && this.sizeHistogram.total_bytes) || 0);
		this.histogramMetaEl.textContent = `${formatNum(summaryTotalCount)} allocations, ${formatBytes(summaryTotalBytes)} total across ${bucketCount} bucket${bucketCount === 1 ? "" : "s"}`;

		this.histogramEl.setAttribute("viewBox", `0 0 ${width} ${height}`);
		this.histogramEl.setAttribute("preserveAspectRatio", "xMinYMin meet");
		this.histogramEl.innerHTML = parts.join("");
	}

	getRowsForTable(name) {
		if (name === "leaks") return this.leaks.slice(0, 100);
		if (name === "churn") return this.churn.slice(0, 100);
		return this.hot.slice(0, 100);
	}

	renderTableByName(name) {
		const refs = this.panelRefs[name];
		const state = this.tableState[name];
		let rows = this.getRowsForTable(name).slice();
		const filterText = state.filterText.trim().toLowerCase();
		if (filterText) {
			rows = rows.filter((row) => {
				const haystack = [
					row.summary,
					row.top_frame,
					row.secondary_frame,
					row.group_key,
					`callstack ${row.callstack_id}`,
				].join("\n").toLowerCase();
				return haystack.includes(filterText);
			});
		}
		rows.sort((a, b) => compareValues(a[state.sortKey], b[state.sortKey], state.desc));

		if (!rows.length) {
			refs.tbody.innerHTML = `<tr><td class="memory-empty">No data available.</td></tr>`;
			return;
		}

		const parts = [];
		let currentGroup = null;
		for (let index = 0; index < rows.length; ++index) {
			const row = rows[index];
			const groupKey = state.groupMode === "top_frame" ? (row.top_frame || "(unknown)") :
				(state.groupMode === "prefix" ? (row.group_key || row.top_frame || "(unknown)") : null);
			if (groupKey !== null && groupKey !== currentGroup) {
				currentGroup = groupKey;
				parts.push(`<tr class="memory-group-row"><td colspan="5">${escapeHtml(groupKey)}</td></tr>`);
			}
			parts.push(this.renderDataRow(name, row, index));
		}
		refs.tbody.innerHTML = parts.join("");
		for (const tr of refs.tbody.querySelectorAll("tr[data-callstack-id]")) {
			tr.addEventListener("click", () => {
				const callstackId = Number(tr.dataset.callstackId);
				this.selectCallstack(callstackId);
				for (const rowEl of this.container.querySelectorAll("tr[data-callstack-id]")) {
					rowEl.classList.toggle("selected", Number(rowEl.dataset.callstackId) === callstackId);
				}
			});
		}
	}

	renderDataRow(name, row, index) {
		if (name === "leaks") {
			return `<tr data-callstack-id="${row.callstack_id}">`
				+ `<td class="num">${index + 1}</td>`
				+ `<td class="num">${escapeHtml(formatBytes(row.live_bytes))}</td>`
				+ `<td class="num">${escapeHtml(formatNum(row.live_count))}</td>`
				+ `<td>${buildSummaryHtml(row)}</td>`
				+ `</tr>`;
		}
		if (name === "churn") {
			return `<tr data-callstack-id="${row.callstack_id}">`
				+ `<td class="num">${index + 1}</td>`
				+ `<td class="num">${escapeHtml(formatNum(row.churn_allocs))}</td>`
				+ `<td class="num">${escapeHtml(formatBytes(row.churn_bytes))}</td>`
				+ `<td class="num">${escapeHtml(formatDistance(row.mean_distance))}</td>`
				+ `<td>${buildSummaryHtml(row)}</td>`
				+ `</tr>`;
		}
		return `<tr data-callstack-id="${row.callstack_id}">`
			+ `<td class="num">${index + 1}</td>`
			+ `<td class="num">${escapeHtml(formatNum(row.total_allocs))}</td>`
			+ `<td class="num">${escapeHtml(formatBytes(row.total_bytes))}</td>`
			+ `<td class="num">${escapeHtml(formatNum(row.churn_allocs))}</td>`
			+ `<td>${buildSummaryHtml(row)}</td>`
			+ `</tr>`;
	}

	async selectCallstack(callstackId) {
		this.selectedCallstackId = callstackId;
		this.callstackMetaEl.textContent = `Callstack ${callstackId}`;
		this.callstackBodyEl.innerHTML = `<div class="memory-empty">Loading callstack ${callstackId}…</div>`;
		try {
			let callstack = this.callstackCache.get(callstackId);
			if (!callstack) {
				callstack = await getCallstack(callstackId);
				this.callstackCache.set(callstackId, callstack);
			}
			const frames = callstack.frames || [];
			if (!frames.length) {
				this.callstackBodyEl.innerHTML = `<div class="memory-empty">No frames recorded for this callstack.</div>`;
				return;
			}
			const notes = [];
			if (callstack.hidden_prefix_count > 0) {
				let note = `Skipped ${formatNum(callstack.hidden_prefix_count)} leading frame(s)`;
				if (callstack.included_third_party_boundary) {
					note += "; kept boundary third-party callsite";
				}
				notes.push(`<div class="memory-empty">${escapeHtml(note)}.</div>`);
			}
			const items = [];
			for (let i = 0; i < frames.length; ++i) {
				const frame = frames[i];
				const display = frame.display || frame.address || "(unknown frame)";
				const extra = frame.module_path ? ` <span class="memory-frame-path">${escapeHtml(trimPath(frame.module_path))}</span>` : "";
				items.push(`<li><span class="memory-frame-index">#${frame.index ?? i}</span> <span class="memory-frame-display">${escapeHtml(display)}</span>${extra}</li>`);
			}
			this.callstackBodyEl.innerHTML = `${notes.join("")}<ol class="memory-callstack-list">${items.join("")}</ol>`;
		} catch (e) {
			this.callstackBodyEl.innerHTML = `<div class="memory-empty">Failed to load callstack ${callstackId}: ${escapeHtml(e.message)}</div>`;
		}
	}
}