Hugging Face's logo

Spaces:
osolmaz
/
local-frontier
Running

App Files Community
3
local-frontier / assets /app.js
Onur Solmaz
fix: correct MoE expert traffic, surface search limits, retire dennard naming
b2fecbb
Raw
History Blame
100 kB
const DATA = window.LOCAL_FRONTIER_DATA;
const MODEL_DATA = window.LOCAL_FRONTIER_MODEL_DATA || {
 assumptions: {},
 models: [],
};
const PROFILE_DATA = window.LOCAL_FRONTIER_PROFILE_DATA || {
 profiles: [],
};
const byId = new Map(DATA.items.map((item) => [item.id, item]));
const accelerators = DATA.accelerators || [];
const acceleratorById = new Map(
 accelerators.map((accelerator) => [accelerator.id, accelerator]),
);
const systemVendors = DATA.system_vendors || [];
const systemVendorBySlug = new Map(
 systemVendors.map((vendor) => [vendor.slug, vendor]),
);
const models = MODEL_DATA.models || [];
const modelById = new Map(models.map((model) => [model.id, model]));
const profileByRepo = new Map(
 (PROFILE_DATA.profiles || []).map((profile) => [profile.repo, profile]),
);
const modelLookup = new Map();
for (const model of models) {
 modelLookup.set(model.id, model);
 for (const alias of model.aliases || []) {
 modelLookup.set(alias, model);
 }
}
const BOUNDS_ENGINE = window.LocalFrontierBounds;
if (!BOUNDS_ENGINE?.calculateBounds || !BOUNDS_ENGINE?.calculateProfiledBounds) {
 throw new Error("LocalFrontierBounds engine is not loaded.");
}
const producers = DATA.producers;
const producerColors = {
 Apple: "var(--apple)",
 NVIDIA: "var(--nvidia)",
 AMD: "var(--amd)",
 "Best-so-far": "var(--accent)",
 "Under 3k observed": "var(--blue)",
 "Under 3k fit": "var(--blue)",
 "3k-5k observed": "var(--green)",
 "3k-5k fit": "var(--green)",
 "5k-10k observed": "var(--red)",
 "5k-10k fit": "var(--red)",
};
function $(selector, root = document) {
 return root.querySelector(selector);
}
function escapeHTML(value) {
 return String(value ?? "").replace(
 /[&<>"']/g,
 (char) =>
 ({
 "&": "&amp;",
 "<": "&lt;",
 ">": "&gt;",
 '"': "&quot;",
 "'": "&#39;",
 })[char],
 );
}
function fmtMoney(value) {
 if (value === null || value === undefined || value === "") return "-";
 return `$${Number(value).toLocaleString("en-US", { maximumFractionDigits: 0 })}`;
}
function fmtNumber(value, digits = 0) {
 if (value === null || value === undefined || value === "") return "-";
 return Number(value).toLocaleString("en-US", {
 maximumFractionDigits: digits,
 minimumFractionDigits: 0,
 });
}
function fmtTokenCount(value) {
 return value === null || value === undefined || value === ""
 ? "Unknown"
 : `${fmtNumber(value)} tokens`;
}
function recordedContextLimit(model) {
 const value = Number(model?.architecture?.max_context_tokens);
 return Number.isInteger(value) && value > 0 ? value : null;
}
function fmtGB(value) {
 return value === null || value === undefined || value === ""
 ? "-"
 : `${fmtNumber(value)} GB`;
}
function fmtBandwidth(value) {
 return value === null || value === undefined || value === ""
 ? "-"
 : `${fmtNumber(value)} GB/s`;
}
function fmtGBDecimal(value, digits = 2) {
 if (
 value === null ||
 value === undefined ||
 value === "" ||
 !Number.isFinite(Number(value))
 )
 return "-";
 return `${fmtNumber(value, digits)} GB`;
}
function fmtTok(value, digits = 0) {
 if (
 value === null ||
 value === undefined ||
 value === "" ||
 !Number.isFinite(Number(value))
 )
 return "-";
 return `${fmtNumber(value, digits)} tok/s`;
}
function fmtParams(value) {
 if (value === null || value === undefined || value === "") return "-";
 return `${fmtNumber(value, 1)}B`;
}
function fmtUsdPerGB(value) {
 return value === null || value === undefined || value === ""
 ? "-"
 : `$${fmtNumber(value, 2)}/GB`;
}
function deviceHref(id, prefix = "") {
 return `/devices/${id}`;
}
function pathFromModelId(id) {
 return String(id).split("/").map(encodeURIComponent).join("/");
}
function modelHref(id, prefix = "") {
 return `/models/${pathFromModelId(id)}`;
}
function huggingFaceModelHref(model) {
 return `https://huggingface.co/${pathFromModelId(model.id)}`;
}
function idList(value) {
 const raw = Array.isArray(value) ? value : value ? [value] : [];
 const ids = [];
 for (const item of raw) {
 for (const part of String(item).split(",")) {
 const id = part.trim();
 if (id && !ids.includes(id)) ids.push(id);
 }
 }
 return ids;
}
function compareHref(modelIds = [], hardwareIds = []) {
 const modelPart = idList(modelIds).map(encodeURIComponent).join(",");
 const hardwarePart = idList(hardwareIds).map(encodeURIComponent).join(",");
 const params = [];
 if (modelPart) params.push(`models=${modelPart}`);
 if (hardwarePart) params.push(`hardware=${hardwarePart}`);
 return params.length ? `/compare?${params.join("&")}` : "/compare";
}
function acceleratorHref(accelerator, prefix = "") {
 return `/accelerators/${accelerator.vendor_slug}/${accelerator.slug}`;
}
function acceleratorVendorHref(vendorSlug, prefix = "") {
 return `/accelerators/${vendorSlug}`;
}
function acceleratorVendorLink(vendor, prefix = "") {
 const vendorSlug = String(vendor || "").toLowerCase();
 return `<a class="device-link producer-${escapeHTML(vendor)}" href="${acceleratorVendorHref(vendorSlug, prefix)}">${escapeHTML(vendor)}</a>`;
}
function systemVendorHref(vendorSlug, prefix = "") {
 return `/systems/${vendorSlug}`;
}
function systemVendorLink(name, slug, prefix = "") {
 return `<a class="device-link" href="${systemVendorHref(slug, prefix)}">${escapeHTML(name)}</a>`;
}
function currentPriceEvent(item) {
 return [...item.price_history]
 .sort(
 (a, b) =>
 a.end_year - b.end_year ||
 a.start_year - b.start_year ||
 a.catalog_order - b.catalog_order,
 )
 .at(-1);
}
function isEstimatedPrice(event) {
 return (
 event.evidence !== "quoted" ||
 event.price_kind === "reconstructed_config" ||
 event.price_kind === "component_bom"
 );
}
function estimateMark(event) {
 return isEstimatedPrice(event)
 ? ` <span class="estimate-mark" title="Estimated or reconstructed price">≈</span>`
 : "";
}
function homeStats() {
 return [
 { value: String(DATA.stats.item_count), label: "source item pages" },
 {
 value: String(DATA.stats.catalog_row_count),
 label: "priced catalog rows",
 },
 {
 value: `${DATA.stats.max_memory_gb}GB`,
 label: "maximum accelerator memory",
 },
 {
 value: `${DATA.stats.best_under_5k_memory_gb}GB`,
 label: "best current memory under $5k",
 },
 ];
}
function homeMetricOptions() {
 return [
 {
 value: "annual_memory",
 label: "Annual memory by accelerator vendor",
 },
 {
 value: "annual_price_per_gb",
 label: "Annual complete-system USD/GB",
 },
 { value: "annual_bandwidth", label: "Annual memory bandwidth" },
 { value: "best_memory", label: "Best-so-far memory" },
 {
 value: "best_price_per_gb",
 label: "Best-so-far complete-system USD/GB",
 },
 { value: "best_bandwidth", label: "Best-so-far memory bandwidth" },
 { value: "projection", label: "Consumer memory projection to 2030" },
 ];
}
function hardwareBridgeState() {
 return {
 rows: DATA.items.map(hardwareDatabaseRow),
 producers: [
 { value: "all", label: "All accelerator vendors" },
 ...producers.map((producer) => ({ value: producer, label: producer })),
 ],
 priceBands: [
 { value: "all", label: "All bands" },
 ...DATA.bands.map((band) => ({ value: band.key, label: band.label })),
 ],
 };
}
function renderStats() {
 const host = $("#statStrip");
 if (!host) return;
 const stats = homeStats();
 host.innerHTML = `
 <table class="stat-table">
 <tbody>
 ${stats
 .map(
 ({ value, label }) => `
 <tr>
 <th scope="row">${escapeHTML(label)}</th>
 <td>${escapeHTML(value)}</td>
 </tr>
 `,
 )
 .join("")}
 </tbody>
 </table>
 `;
}
function setupControls() {
 const bandSelect = $("#bandSelect");
 const tableBand = $("#tableBandFilter");
 if (bandSelect) {
 bandSelect.innerHTML = DATA.bands
 .map(
 (band) =>
 `<option value="${band.key}">${escapeHTML(band.label)}</option>`,
 )
 .join("");
 bandSelect.value = "3000_5000";
 }
 if (tableBand) {
 tableBand.innerHTML += DATA.bands
 .map(
 (band) =>
 `<option value="${band.key}">${escapeHTML(band.label)}</option>`,
 )
 .join("");
 }
 const producerFilter = $("#producerFilter");
 if (producerFilter) {
 producerFilter.innerHTML += producers
 .map((producer) => `<option value="${producer}">${producer}</option>`)
 .join("");
 }
 const toggle = $("#producerToggle");
 if (toggle) {
 toggle.innerHTML = producers
 .map(
 (producer) =>
 `<button class="chip" type="button" data-producer="${producer}" aria-pressed="true">${producer}</button>`,
 )
 .join("");
 toggle.addEventListener("click", (event) => {
 const button = event.target.closest("button[data-producer]");
 if (!button) return;
 button.setAttribute(
 "aria-pressed",
 button.getAttribute("aria-pressed") !== "true",
 );
 renderFrontierChart();
 });
 }
 ["metricSelect", "bandSelect"].forEach((id) => {
 const el = $(`#${id}`);
 if (el) el.addEventListener("change", renderFrontierChart);
 });
 ["deviceSearch", "producerFilter", "tableBandFilter"].forEach((id) => {
 const el = $(`#${id}`);
 if (el) el.addEventListener("input", renderDeviceTable);
 });
}
function activeProducers() {
 return [...document.querySelectorAll("#producerToggle button")]
 .filter((button) => button.getAttribute("aria-pressed") === "true")
 .map((button) => button.dataset.producer);
}
function metricConfig(metric, band, active = activeProducers()) {
 if (metric === "projection") {
 const labels = {
 under_3000: "Under 3k",
 "3000_5000": "3k-5k",
 "5000_10000": "5k-10k",
 };
 const series = [];
 for (const [bandKey, label] of Object.entries(labels)) {
 const rows = DATA.projection.filter((row) => row.price_band === bandKey);
 series.push({
 label: `${label} observed`,
 colorKey: `${label} observed`,
 dash: false,
 points: rows
 .filter((row) => row.observed_best_so_far_memory_gb !== null)
 .map((row) => ({
 x: row.year,
 y: row.observed_best_so_far_memory_gb,
 row,
 detail: `${label}: observed best-so-far`,
 })),
 });
 series.push({
 label: `${label} linear fit`,
 colorKey: `${label} fit`,
 dash: true,
 points: rows.map((row) => ({
 x: row.year,
 y: row.linear_fit_memory_gb,
 row,
 detail: `${label}: linear scenario`,
 })),
 });
 }
 return {
 title: "Consumer-band best-so-far memory projection",
 subtitle:
 "Least-squares linear scenario fitted to 2020-2026 best-so-far memory. Not verified future product data.",
 yLabel: "Memory capacity",
 yFormat: fmtGB,
 series,
 };
 }
const bandLabel = DATA.bands.find((b) => b.key === band)?.label || band;
 if (metric.startsWith("annual_")) {
 const source = DATA.annual.filter(
 (row) =>
 row.price_band === band &&
 row.memory_gb !== null &&
 active.includes(row.producer),
 );
 const metricMap = {
 annual_memory: [
 "memory_gb",
 "Annual memory by accelerator vendor",
 "Memory capacity",
 fmtGB,
 ],
 annual_price_per_gb: [
 "price_per_memory_gb",
 "Annual complete-system USD per GB",
 "USD per GB",
 fmtUsdPerGB,
 ],
 annual_bandwidth: [
 "bandwidth_gbps",
 "Annual memory bandwidth",
 "Bandwidth",
 fmtBandwidth,
 ],
 };
 const [field, title, yLabel, yFormat] = metricMap[metric];
 return {
 title: `${title} - ${bandLabel}`,
 subtitle:
 "Annual maximum-memory row for each accelerator vendor in the selected price band.",
 yLabel,
 yFormat,
 series: producers
 .filter((producer) => active.includes(producer))
 .map((producer) => ({
 label: producer,
 colorKey: producer,
 points: source
 .filter((row) => row.producer === producer && row[field] !== null)
 .map((row) => ({
 x: row.year,
 y: row[field],
 row,
 detail: row.system,
 })),
 }))
 .filter((entry) => entry.points.length),
 };
 }
const bestMap = {
 best_memory: [
 DATA.dominant,
 "memory_gb",
 "Best-so-far memory",
 "Memory capacity",
 fmtGB,
 ],
 best_price_per_gb: [
 DATA.best_price,
 "metric_value",
 "Best-so-far complete-system USD per GB",
 "USD per GB",
 fmtUsdPerGB,
 ],
 best_bandwidth: [
 DATA.best_bandwidth,
 "metric_value",
 "Best-so-far memory bandwidth",
 "Bandwidth",
 fmtBandwidth,
 ],
 };
 const [rows, field, title, yLabel, yFormat] = bestMap[metric];
 return {
 title: `${title} - ${bandLabel}`,
 subtitle:
 "The line carries the previous best forward until a better source-backed point appears.",
 yLabel,
 yFormat,
 series: [
 {
 label: "Best-so-far",
 colorKey: "Best-so-far",
 points: rows
 .filter((row) => row.price_band === band && row[field] !== null)
 .map((row) => ({
 x: row.year,
 y: row[field],
 row,
 detail: row.system,
 })),
 },
 ],
 };
}
function renderFrontierChart() {
 const host = $("#frontierChart");
 if (!host) return;
 const metric = $("#metricSelect").value;
 const band = $("#bandSelect").value;
 $("#bandSelect").disabled = metric === "projection";
 const config = metricConfig(metric, band);
 renderChart(host, config);
}
function renderChart(host, config) {
 const width = 1120;
 const height = 560;
 const margin = { top: 92, right: 42, bottom: 72, left: 86 };
 const allPoints = config.series.flatMap((series) => series.points);
 if (!allPoints.length) {
 host.innerHTML = `<div class="empty">No source-backed rows for this selection.</div>`;
 return;
 }
 const xValues = allPoints.map((point) => point.x);
 const yValues = allPoints
 .map((point) => point.y)
 .filter((value) => Number.isFinite(value));
 const xMin = Math.min(...xValues);
 const xMax = Math.max(...xValues);
 const yMin = Math.min(0, Math.min(...yValues));
 const yMax = Math.max(...yValues) * 1.16;
 const plotW = width - margin.left - margin.right;
 const plotH = height - margin.top - margin.bottom;
 const xScale = (x) =>
 margin.left + ((x - xMin) / Math.max(1, xMax - xMin)) * plotW;
 const yScale = (y) =>
 margin.top + plotH - ((y - yMin) / Math.max(1, yMax - yMin)) * plotH;
 const years = [];
 for (let year = xMin; year <= xMax; year += 1) years.push(year);
 const tickCount = 5;
 const yTicks = Array.from(
 { length: tickCount },
 (_, index) => yMin + ((yMax - yMin) / (tickCount - 1)) * index,
 );
const linePath = (points) =>
 points
 .filter((point) => Number.isFinite(point.y))
 .map(
 (point, index) =>
 `${index === 0 ? "M" : "L"} ${xScale(point.x).toFixed(2)} ${yScale(point.y).toFixed(2)}`,
 )
 .join(" ");
const seriesSvg = config.series
 .map((series) => {
 const color = producerColors[series.colorKey] || "var(--accent)";
 const dash = series.dash ? ' stroke-dasharray="8 8"' : "";
 const path = linePath(series.points);
 const points = series.points
 .map((point) => {
 const itemId = point.row?.item_id || "";
 return `<circle class="chart-point" data-item="${escapeHTML(itemId)}" data-label="${escapeHTML(series.label)}" data-detail="${escapeHTML(point.detail || "")}" data-x="${point.x}" data-y="${point.y}" cx="${xScale(point.x).toFixed(2)}" cy="${yScale(point.y).toFixed(2)}" r="5.8" fill="${color}" stroke="var(--bg)" stroke-width="1.5"></circle>`;
 })
 .join("");
 return `<path d="${path}" fill="none" stroke="${color}" stroke-width="3"${dash}></path>${points}`;
 })
 .join("");
const legend = config.series
 .map((series, index) => {
 const color = producerColors[series.colorKey] || "var(--accent)";
 const x = margin.left + (index % 3) * 260;
 const y = 58 + Math.floor(index / 3) * 24;
 return `<g transform="translate(${x} ${y})"><line x1="0" x2="24" y1="0" y2="0" stroke="${color}" stroke-width="3"${series.dash ? ' stroke-dasharray="6 6"' : ""}></line><text x="34" y="4" fill="var(--muted)" font-size="13">${escapeHTML(series.label)}</text></g>`;
 })
 .join("");
host.innerHTML = `
 <div class="chart-title">
 <h3>${escapeHTML(config.title)}</h3>
 <p class="chart-subtitle">${escapeHTML(config.subtitle)}</p>
 </div>
 <svg viewBox="0 0 ${width} ${height}" role="img" aria-label="${escapeHTML(config.title)}">
 <g class="grid">
 ${yTicks.map((tick) => `<line x1="${margin.left}" x2="${width - margin.right}" y1="${yScale(tick).toFixed(2)}" y2="${yScale(tick).toFixed(2)}" stroke="var(--line)" stroke-width="1"></line>`).join("")}
 </g>
 <g class="axes">
 <line x1="${margin.left}" x2="${width - margin.right}" y1="${height - margin.bottom}" y2="${height - margin.bottom}" stroke="var(--line-strong)"></line>
 <line x1="${margin.left}" x2="${margin.left}" y1="${margin.top}" y2="${height - margin.bottom}" stroke="var(--line-strong)"></line>
 </g>
 <g class="ticks">
 ${years.map((year) => `<text x="${xScale(year).toFixed(2)}" y="${height - margin.bottom + 28}" text-anchor="middle" fill="var(--muted)" font-size="13">${year}</text>`).join("")}
 ${yTicks.map((tick) => `<text x="${margin.left - 14}" y="${yScale(tick).toFixed(2) + 4}" text-anchor="end" fill="var(--muted)" font-size="13">${escapeHTML(config.yFormat(tick))}</text>`).join("")}
 </g>
 <text x="${margin.left}" y="${height - 24}" fill="var(--faint)" font-size="13">Year</text>
 <text x="24" y="${margin.top}" fill="var(--faint)" font-size="13" transform="rotate(-90 24 ${margin.top})">${escapeHTML(config.yLabel)}</text>
 <g class="series">${seriesSvg}</g>
 <g class="legend">${legend}</g>
 </svg>
 <div class="tooltip" hidden></div>
 `;
const tooltip = $(".tooltip", host);
 host.querySelectorAll(".chart-point").forEach((point) => {
 point.addEventListener("mouseenter", () => {
 const item = byId.get(point.dataset.item);
 tooltip.hidden = false;
 tooltip.innerHTML = `
 <strong>${escapeHTML(point.dataset.label)}: ${escapeHTML(config.yFormat(point.dataset.y))}</strong>
 <span>${escapeHTML(point.dataset.x)} ${point.dataset.detail ? "- " + escapeHTML(point.dataset.detail) : ""}</span>
 ${item ? `<span>${escapeHTML(item.name)}</span><span>Click to open item page.</span>` : ""}
 `;
 const box = point.getBoundingClientRect();
 const hostBox = host.getBoundingClientRect();
 tooltip.style.left = `${box.left - hostBox.left + box.width / 2}px`;
 tooltip.style.top = `${box.top - hostBox.top}px`;
 });
 point.addEventListener("mouseleave", () => {
 tooltip.hidden = true;
 });
 point.addEventListener("click", () => {
 if (point.dataset.item) {
 window.location.href = deviceHref(point.dataset.item);
 }
 });
 });
}
function renderDeviceTable() {
 const host = $("#deviceTable");
 if (!host) return;
 const search = ($("#deviceSearch")?.value || "").trim().toLowerCase();
 const producer = $("#producerFilter")?.value || "all";
 const band = $("#tableBandFilter")?.value || "all";
 const rows = DATA.items.filter((item) => {
 const haystack = [
 item.name,
 item.system_vendor,
 item.accelerator_vendor,
 item.producer,
 item.memory.type,
 item.accelerators.map((accel) => accel.name).join(" "),
 ]
 .join(" ")
 .toLowerCase();
 return (
 (!search || haystack.includes(search)) &&
 (producer === "all" ||
 (item.accelerator_vendor || item.producer) === producer) &&
 (band === "all" || item.latest_price_band === band)
 );
 });
 if (!rows.length) {
 host.innerHTML = `<div class="empty">No devices match the current filters.</div>`;
 return;
 }
 host.innerHTML = `
 <table class="device-table">
 <thead>
 <tr>
 <th>Device</th>
 <th>System vendor</th>
 <th>Accelerator vendor</th>
 <th>Memory</th>
 <th>Bandwidth</th>
 <th>Latest price</th>
 <th>Price band</th>
 <th>Evidence</th>
 </tr>
 </thead>
 <tbody>
 ${rows
 .map((item) => {
 const event = currentPriceEvent(item);
 return `<tr>
 <td data-label="Device"><a class="device-link" href="${deviceHref(item.id)}"><strong>${escapeHTML(item.name)}</strong></a><br><span class="pill">${escapeHTML(item.item_kind.replaceAll("_", " "))}</span></td>
 <td data-label="System vendor">${systemVendorLink(item.system_vendor || item.producer, item.system_vendor_slug || "")}</td>
 <td data-label="Accelerator vendor">${acceleratorVendorLink(item.accelerator_vendor || item.producer)}</td>
 <td data-label="Memory">${fmtGB(item.memory.capacity_gb)} <span class="pill">${escapeHTML(item.memory.symbol)}</span><br>${escapeHTML(item.memory.type)}</td>
 <td data-label="Bandwidth">${fmtBandwidth(item.memory.bandwidth_gbps)}</td>
 <td data-label="Latest price">${fmtMoney(event.price_usd)}${estimateMark(event)}</td>
 <td data-label="Price band">${escapeHTML(DATA.bands.find((entry) => entry.key === event.price_band)?.label || event.price_band)}</td>
 <td data-label="Evidence">${escapeHTML(event.evidence)}<br><span class="pill">${escapeHTML(event.confidence)}</span></td>
 </tr>`;
 })
 .join("")}
 </tbody>
 </table>
 `;
}
function hardwareDatabaseRow(item) {
 const event = currentPriceEvent(item);
 const acceleratorVendor = item.accelerator_vendor || item.producer;
 const systemVendor = item.system_vendor || item.producer;
 return {
 id: item.id,
 name: item.name,
 kind: item.item_kind.replaceAll("_", " "),
 systemVendor,
 systemVendorHref: systemVendorHref(item.system_vendor_slug || ""),
 acceleratorVendor,
 acceleratorVendorHref: acceleratorVendorHref(
 String(acceleratorVendor).toLowerCase(),
 ),
 acceleratorVendorKey: acceleratorVendor,
 memory: fmtGB(item.memory.capacity_gb),
 memorySymbol: item.memory.symbol,
 memoryType: item.memory.type,
 bandwidth: fmtBandwidth(item.memory.bandwidth_gbps),
 latestPrice: fmtMoney(event.price_usd),
 estimated: isEstimatedPrice(event),
 priceBand: event.price_band,
 priceBandLabel:
 DATA.bands.find((entry) => entry.key === event.price_band)?.label ||
 event.price_band,
 evidence: event.evidence,
 confidence: event.confidence,
 deviceHref: deviceHref(item.id),
 searchText: [
 item.name,
 item.system_vendor,
 item.accelerator_vendor,
 item.producer,
 item.memory.type,
 item.accelerators.map((accel) => accel.name).join(" "),
 ]
 .join(" ")
 .toLowerCase(),
 };
}
function installHardwareBridge() {
 window.LocalFrontierHardwareBridge = {
 getState() {
 return hardwareBridgeState();
 },
 };
 window.dispatchEvent(new CustomEvent("local-frontier:hardware-ready"));
}
function homeBridgeState() {
 return {
 stats: homeStats(),
 metrics: homeMetricOptions(),
 bands: DATA.bands.map((band) => ({ value: band.key, label: band.label })),
 producers,
 hardware: hardwareBridgeState(),
 };
}
function installHomeBridge() {
 window.LocalFrontierHomeBridge = {
 getState() {
 return homeBridgeState();
 },
 renderChart(host, selection) {
 renderChart(
 host,
 metricConfig(selection.metric, selection.band, selection.producers),
 );
 },
 };
 window.dispatchEvent(new CustomEvent("local-frontier:home-ready"));
}
function detailLink(label, href) {
 return { label, href };
}
function deviceSourceRows(item) {
 const sources = [];
 for (const source of item.spec_sources || []) {
 sources.push({ label: source.name || source.url, href: source.url });
 }
 if (item.memory.bandwidth_source_url) {
 sources.push({
 label: "Memory bandwidth source",
 href: item.memory.bandwidth_source_url,
 });
 }
 for (const event of item.price_history) {
 sources.push({
 label: `${event.start_year}-${event.end_year} price source`,
 href: event.source_url,
 });
 }
 const seen = new Set();
 return sources.filter((source) => {
 if (!source.href || seen.has(source.href)) return false;
 seen.add(source.href);
 return true;
 });
}
function deviceDetailState(item) {
 const event = currentPriceEvent(item);
 const acceleratorVendor = item.accelerator_vendor || item.producer;
 const systemVendor = item.system_vendor || item.producer;
 const acceleratorRows = item.accelerators.length
 ? item.accelerators.map((accel) => {
 const count = accel.count && accel.count > 1 ? `${accel.count}x ` : "";
 return detailLink(
 `${count}${accel.vendor} ${accel.name}`,
 acceleratorHref(accel),
 );
 })
 : "Not specified separately";
 return {
 specRows: [
 {
 label: "System vendor",
 value: detailLink(
 systemVendor,
 systemVendorHref(item.system_vendor_slug || ""),
 ),
 },
 {
 label: "Accelerator vendor",
 value: detailLink(
 acceleratorVendor,
 acceleratorVendorHref(String(acceleratorVendor).toLowerCase()),
 ),
 },
 {
 label: "Memory",
 value: `${fmtGB(item.memory.capacity_gb)} ${item.memory.symbol} - ${item.memory.type}`,
 },
 { label: "Bandwidth", value: fmtBandwidth(item.memory.bandwidth_gbps) },
 { label: "Accelerators", value: acceleratorRows },
 { label: "Kind", value: item.item_kind.replaceAll("_", " ") },
 ],
 priceRows: item.price_history.map((priceEvent) => ({
 years: `${priceEvent.start_year}-${priceEvent.end_year}`,
 price: fmtMoney(priceEvent.price_usd),
 evidence: priceEvent.evidence,
 confidence: priceEvent.confidence,
 })),
 catalogRows: item.catalog_rows.map((row) => ({
 years: `${row.start_year}-${row.end_year}`,
 price: fmtMoney(row.price_usd),
 pricePerGb: fmtUsdPerGB(row.price_per_memory_gb),
 })),
 sources: deviceSourceRows(item),
 notes: [
 event.note || "No additional note.",
 ...(item.memory.bandwidth_note ? [item.memory.bandwidth_note] : []),
 ],
 };
}
function installDeviceBridge(item) {
 window.LocalFrontierDeviceBridge = {
 getState() {
 return deviceDetailState(item);
 },
 };
 window.dispatchEvent(new CustomEvent("local-frontier:device-ready"));
}
function renderDevicePage() {
 const id = window.LOCAL_FRONTIER_DEVICE_ID;
 const item = byId.get(id);
 if (!item) return;
 const event = currentPriceEvent(item);
const itemAccelerators = item.accelerators.length
 ? item.accelerators
 .map((accel) => {
 const count =
 accel.count && accel.count > 1 ? `${accel.count}x ` : "";
 return `${count}<a href="${acceleratorHref(accel, "../../")}">${escapeHTML(accel.vendor)} ${escapeHTML(accel.name)}</a>`;
 })
 .join("<br>")
 : "Not specified separately";
 const host = $("#devicePage");
 host.innerHTML = `
 <div id="deviceReactRoot"></div>
 <div class="device-legacy">
 <section class="detail-block">
 <div class="detail-card">
 <h2>Specification</h2>
 <dl class="detail-list">
 <div><dt>System vendor</dt><dd>${systemVendorLink(item.system_vendor || item.producer, item.system_vendor_slug || "", "../../")}</dd></div>
 <div><dt>Accelerator vendor</dt><dd>${acceleratorVendorLink(item.accelerator_vendor || item.producer, "../../")}</dd></div>
 <div><dt>Memory</dt><dd>${fmtGB(item.memory.capacity_gb)} ${escapeHTML(item.memory.symbol)} - ${escapeHTML(item.memory.type)}</dd></div>
 <div><dt>Bandwidth</dt><dd>${fmtBandwidth(item.memory.bandwidth_gbps)}</dd></div>
 <div><dt>Accelerators</dt><dd>${itemAccelerators}</dd></div>
 <div><dt>Kind</dt><dd>${escapeHTML(item.item_kind.replaceAll("_", " "))}</dd></div>
 </dl>
 </div>
 <div class="detail-card">
 <h2>Price History</h2>
 <div class="table-wrap">${priceHistoryTable(item)}</div>
 </div>
 <div class="detail-card">
 <h2>Catalog Rows</h2>
 <div class="table-wrap">${catalogRowsTable(item.catalog_rows)}</div>
 </div>
 </section>
 <aside class="detail-block">
 <div class="detail-card">
 <h2>Sources</h2>
 ${sourceList(item)}
 </div>
 <div class="detail-card">
 <h2>Notes</h2>
 <p class="prose">${escapeHTML(event.note || "No additional note.")}</p>
 ${item.memory.bandwidth_note ? `<p class="prose">${escapeHTML(item.memory.bandwidth_note)}</p>` : ""}
 </div>
 </aside>
 </div>
 `;
 installDeviceBridge(item);
}
function acceleratorRowState(accelerator) {
 return {
 id: accelerator.id,
 name: accelerator.name,
 href: acceleratorHref(accelerator),
 vendor: detailLink(
 accelerator.vendor,
 acceleratorVendorHref(accelerator.vendor_slug),
 ),
 systems: String(accelerator.systems.length),
 maxMemory: fmtGB(accelerator.max_memory_gb),
 maxBandwidth: fmtBandwidth(accelerator.max_bandwidth_gbps),
 lowestLatestPrice: fmtMoney(accelerator.min_latest_price_usd),
 };
}
function acceleratorSystemRowState(system) {
 return {
 id: system.item_id,
 name: system.name,
 href: deviceHref(system.item_id),
 kind: system.item_kind.replaceAll("_", " "),
 systemVendor: detailLink(
 system.system_vendor,
 systemVendorHref(system.system_vendor_slug),
 ),
 count: String(system.count || 1),
 memory: fmtGB(system.memory_gb),
 memoryType: system.memory_type,
 bandwidth: fmtBandwidth(system.bandwidth_gbps),
 latestPrice: fmtMoney(system.latest_price_usd),
 latestYear: String(system.latest_year),
 estimated: Boolean(system.latest_price_estimated),
 };
}
function acceleratorPageState(vendorSlug, modelSlug) {
 if (vendorSlug && modelSlug) {
 const accelerator = acceleratorById.get(`${vendorSlug}/${modelSlug}`);
 if (!accelerator) {
 return {
 kind: "model",
 summaryRows: [],
 vendors: [],
 accelerators: [],
 systems: [],
 emptyMessage: "No accelerator found for this route.",
 };
 }
 return {
 kind: "model",
 summaryRows: [
 {
 label: "Accelerator vendor",
 value: detailLink(
 accelerator.vendor,
 acceleratorVendorHref(accelerator.vendor_slug),
 ),
 },
 { label: "Systems", value: String(accelerator.systems.length) },
 { label: "Max memory", value: fmtGB(accelerator.max_memory_gb) },
 {
 label: "Max bandwidth",
 value: fmtBandwidth(accelerator.max_bandwidth_gbps),
 },
 {
 label: "Lowest latest price",
 value: fmtMoney(accelerator.min_latest_price_usd),
 },
 ],
 vendors: [],
 accelerators: [],
 systems: accelerator.systems.map(acceleratorSystemRowState),
 };
 }
if (vendorSlug) {
 const rows = accelerators.filter(
 (accelerator) => accelerator.vendor_slug === vendorSlug,
 );
 if (!rows.length) {
 return {
 kind: "vendor",
 summaryRows: [],
 vendors: [],
 accelerators: [],
 systems: [],
 emptyMessage: "No accelerators found for this vendor.",
 };
 }
 return {
 kind: "vendor",
 summaryRows: [],
 vendors: [],
 accelerators: rows.map(acceleratorRowState),
 systems: rows.flatMap((accelerator) =>
 accelerator.systems.map(acceleratorSystemRowState),
 ),
 };
 }
const vendors = producers
 .map((vendor) => {
 const slug = vendor.toLowerCase();
 const rows = accelerators.filter(
 (accelerator) => accelerator.vendor_slug === slug,
 );
 const systems = rows.reduce(
 (total, accelerator) => total + accelerator.systems.length,
 0,
 );
 return {
 vendor: detailLink(vendor, acceleratorVendorHref(slug)),
 accelerators: String(rows.length),
 systems: String(systems),
 rows,
 };
 })
 .filter((entry) => entry.rows.length);
return {
 kind: "overview",
 summaryRows: [],
 vendors: vendors.map(({ rows, ...entry }) => entry),
 accelerators: accelerators.map(acceleratorRowState),
 systems: [],
 };
}
function installAcceleratorBridge(state) {
 window.LocalFrontierAcceleratorBridge = {
 getState() {
 return state;
 },
 };
 window.dispatchEvent(new CustomEvent("local-frontier:accelerator-ready"));
}
function systemVendorRowState(vendor) {
 return {
 id: vendor.slug,
 vendor: detailLink(vendor.name, systemVendorHref(vendor.slug)),
 systems: String(vendor.systems.length),
 acceleratorVendors: vendor.accelerator_vendors.map((name) =>
 detailLink(name, acceleratorVendorHref(String(name).toLowerCase())),
 ),
 maxMemory: fmtGB(vendor.max_memory_gb),
 maxBandwidth: fmtBandwidth(vendor.max_bandwidth_gbps),
 lowestLatestPrice: fmtMoney(vendor.min_latest_price_usd),
 };
}
function systemRowState(system) {
 return {
 id: system.item_id,
 name: system.name,
 href: deviceHref(system.item_id),
 kind: system.item_kind.replaceAll("_", " "),
 acceleratorVendor: detailLink(
 system.accelerator_vendor,
 acceleratorVendorHref(String(system.accelerator_vendor).toLowerCase()),
 ),
 accelerators: system.accelerators,
 memory: fmtGB(system.memory_gb),
 memoryType: system.memory_type,
 bandwidth: fmtBandwidth(system.bandwidth_gbps),
 latestPrice: fmtMoney(system.latest_price_usd),
 latestYear: String(system.latest_year),
 estimated: Boolean(system.latest_price_estimated),
 };
}
function systemPageState(vendorSlug) {
 if (vendorSlug) {
 const vendor = systemVendorBySlug.get(vendorSlug);
 if (!vendor) {
 return {
 kind: "vendor",
 summaryRows: [],
 vendors: [],
 systems: [],
 emptyMessage: "No system vendor found for this route.",
 };
 }
 return {
 kind: "vendor",
 summaryRows: [
 { label: "Systems", value: String(vendor.systems.length) },
 {
 label: "Accelerator vendors",
 value: vendor.accelerator_vendors.map((name) =>
 detailLink(name, acceleratorVendorHref(String(name).toLowerCase())),
 ),
 },
 { label: "Max memory", value: fmtGB(vendor.max_memory_gb) },
 {
 label: "Max bandwidth",
 value: fmtBandwidth(vendor.max_bandwidth_gbps),
 },
 {
 label: "Lowest latest price",
 value: fmtMoney(vendor.min_latest_price_usd),
 },
 ],
 vendors: [],
 systems: vendor.systems.map(systemRowState),
 };
 }
return {
 kind: "overview",
 summaryRows: [],
 vendors: systemVendors.map(systemVendorRowState),
 systems: [],
 };
}
function installSystemBridge(state) {
 window.LocalFrontierSystemBridge = {
 getState() {
 return state;
 },
 };
 window.dispatchEvent(new CustomEvent("local-frontier:system-ready"));
}
function priceHistoryTable(item) {
 return `<table><thead><tr><th>Years</th><th>Price</th><th>Evidence</th></tr></thead><tbody>
 ${item.price_history
 .map(
 (event) => `<tr>
 <td data-label="Years">${event.start_year}-${event.end_year}</td>
 <td data-label="Price">${fmtMoney(event.price_usd)}</td>
 <td data-label="Evidence">${escapeHTML(event.evidence)}<br><span class="pill">${escapeHTML(event.confidence)}</span></td>
 </tr>`,
 )
 .join("")}
 </tbody></table>`;
}
function catalogRowsTable(rows) {
 if (!rows.length)
 return `<div class="empty">No generated catalog rows.</div>`;
 return `<table><thead><tr><th>Years</th><th>Price</th><th>Price/GB</th></tr></thead><tbody>
 ${rows
 .map(
 (row) => `<tr>
 <td data-label="Years">${row.start_year}-${row.end_year}</td>
 <td data-label="Price">${fmtMoney(row.price_usd)}</td>
 <td data-label="Price/GB">${fmtUsdPerGB(row.price_per_memory_gb)}</td>
 </tr>`,
 )
 .join("")}
 </tbody></table>`;
}
function renderAcceleratorPage() {
 const host = $("#acceleratorPage");
 if (!host) return;
 const vendorSlug = window.LOCAL_FRONTIER_ACCELERATOR_VENDOR;
 const modelSlug = window.LOCAL_FRONTIER_ACCELERATOR_MODEL;
 const state = acceleratorPageState(vendorSlug, modelSlug);
 host.innerHTML = `
 <div id="acceleratorReactRoot"></div>
 <div class="accelerator-legacy"></div>
 `;
 const legacyHost = $(".accelerator-legacy", host);
 if (vendorSlug && modelSlug) {
 renderAcceleratorModelPage(legacyHost, vendorSlug, modelSlug);
 } else if (vendorSlug) {
 renderAcceleratorVendorPage(legacyHost, vendorSlug);
 } else {
 renderAcceleratorOverviewPage(legacyHost);
 }
 installAcceleratorBridge(state);
}
function renderSystemPage() {
 const host = $("#systemPage");
 if (!host) return;
 const vendorSlug = window.LOCAL_FRONTIER_SYSTEM_VENDOR;
 const state = systemPageState(vendorSlug);
 host.innerHTML = `
 <div id="systemReactRoot"></div>
 <div class="system-legacy"></div>
 `;
 const legacyHost = $(".system-legacy", host);
 if (vendorSlug) {
 renderSystemVendorPage(legacyHost, vendorSlug);
 } else {
 renderSystemOverviewPage(legacyHost);
 }
 installSystemBridge(state);
}
function renderAcceleratorOverviewPage(host) {
 const vendors = producers
 .map((vendor) => {
 const vendorSlug = vendor.toLowerCase();
 const rows = accelerators.filter(
 (accelerator) => accelerator.vendor_slug === vendorSlug,
 );
 const systems = rows.reduce(
 (total, accelerator) => total + accelerator.systems.length,
 0,
 );
 return { vendor, vendorSlug, rows, systems };
 })
 .filter((entry) => entry.rows.length);
host.innerHTML = `
 <section class="detail-block">
 <div class="detail-card">
 <h2>Vendors</h2>
 <div class="table-wrap">
 <table>
 <thead><tr><th>Vendor</th><th>Accelerators</th><th>Systems</th></tr></thead>
 <tbody>
 ${vendors
 .map(
 (entry) => `<tr>
 <td data-label="Vendor"><a class="device-link" href="${acceleratorVendorHref(entry.vendorSlug, "../")}"><strong>${escapeHTML(entry.vendor)}</strong></a></td>
 <td data-label="Accelerators">${entry.rows.length}</td>
 <td data-label="Systems">${entry.systems}</td>
 </tr>`,
 )
 .join("")}
 </tbody>
 </table>
 </div>
 </div>
 <div class="detail-card">
 <h2>All Accelerators</h2>
 ${acceleratorTable(accelerators, "../")}
 </div>
 </section>
 `;
}
function renderAcceleratorVendorPage(host, vendorSlug) {
 const rows = accelerators.filter(
 (accelerator) => accelerator.vendor_slug === vendorSlug,
 );
 if (!rows.length) {
 host.innerHTML = `<div class="empty">No accelerators found for this vendor.</div>`;
 return;
 }
 const systems = rows.flatMap((accelerator) => accelerator.systems);
 host.innerHTML = `
 <section class="detail-block">
 <div class="detail-card">
 <h2>Accelerators</h2>
 ${acceleratorTable(rows, "../../")}
 </div>
 <div class="detail-card">
 <h2>Systems</h2>
 ${acceleratorSystemsTable(systems, "../../")}
 </div>
 </section>
 `;
}
function renderAcceleratorModelPage(host, vendorSlug, modelSlug) {
 const accelerator = acceleratorById.get(`${vendorSlug}/${modelSlug}`);
 if (!accelerator) {
 host.innerHTML = `<div class="empty">No accelerator found for this route.</div>`;
 return;
 }
 host.innerHTML = `
 <section class="detail-block">
 <div class="detail-card">
 <h2>Summary</h2>
 <dl class="detail-list">
 <div><dt>Accelerator vendor</dt><dd>${acceleratorVendorLink(accelerator.vendor, "../../../")}</dd></div>
 <div><dt>Systems</dt><dd>${accelerator.systems.length}</dd></div>
 <div><dt>Max memory</dt><dd>${fmtGB(accelerator.max_memory_gb)}</dd></div>
 <div><dt>Max bandwidth</dt><dd>${fmtBandwidth(accelerator.max_bandwidth_gbps)}</dd></div>
 <div><dt>Lowest latest price</dt><dd>${fmtMoney(accelerator.min_latest_price_usd)}</dd></div>
 </dl>
 </div>
 <div class="detail-card">
 <h2>Systems</h2>
 ${acceleratorSystemsTable(accelerator.systems, "../../../")}
 </div>
 </section>
 `;
}
function acceleratorTable(rows, prefix) {
 if (!rows.length) return `<div class="empty">No accelerators.</div>`;
 return `<div class="table-wrap"><table>
 <thead><tr><th>Accelerator</th><th>Vendor</th><th>Systems</th><th>Max memory</th><th>Lowest latest price</th></tr></thead>
 <tbody>
 ${rows
 .map(
 (accelerator) => `<tr>
 <td data-label="Accelerator"><a class="device-link" href="${acceleratorHref(accelerator, prefix)}"><strong>${escapeHTML(accelerator.name)}</strong></a></td>
 <td data-label="Vendor">${acceleratorVendorLink(accelerator.vendor, prefix)}</td>
 <td data-label="Systems">${accelerator.systems.length}</td>
 <td data-label="Max memory">${fmtGB(accelerator.max_memory_gb)}</td>
 <td data-label="Lowest latest price">${fmtMoney(accelerator.min_latest_price_usd)}</td>
 </tr>`,
 )
 .join("")}
 </tbody>
 </table></div>`;
}
function acceleratorSystemsTable(rows, prefix) {
 if (!rows.length) return `<div class="empty">No systems.</div>`;
 return `<div class="table-wrap"><table>
 <thead><tr><th>System</th><th>System vendor</th><th>Count</th><th>Memory</th><th>Bandwidth</th><th>Latest price</th></tr></thead>
 <tbody>
 ${rows
 .map(
 (system) => `<tr>
 <td data-label="System"><a class="device-link" href="${deviceHref(system.item_id, prefix)}"><strong>${escapeHTML(system.name)}</strong></a><br><span class="pill">${escapeHTML(system.item_kind.replaceAll("_", " "))}</span></td>
 <td data-label="System vendor">${systemVendorLink(system.system_vendor, system.system_vendor_slug, prefix)}</td>
 <td data-label="Count">${system.count || 1}</td>
 <td data-label="Memory">${fmtGB(system.memory_gb)}<br>${escapeHTML(system.memory_type)}</td>
 <td data-label="Bandwidth">${fmtBandwidth(system.bandwidth_gbps)}</td>
 <td data-label="Latest price">${fmtMoney(system.latest_price_usd)}<br><span class="pill">${escapeHTML(system.latest_year)}</span></td>
 </tr>`,
 )
 .join("")}
 </tbody>
 </table></div>`;
}
function renderSystemOverviewPage(host) {
 host.innerHTML = `
 <section class="detail-block">
 <div class="detail-card">
 <h2>System Vendors</h2>
 <div class="table-wrap">
 <table>
 <thead><tr><th>System vendor</th><th>Systems</th><th>Accelerator vendors</th><th>Max memory</th><th>Lowest latest price</th></tr></thead>
 <tbody>
 ${systemVendors
 .map(
 (vendor) => `<tr>
 <td data-label="System vendor">${systemVendorLink(vendor.name, vendor.slug, "../")}</td>
 <td data-label="Systems">${vendor.systems.length}</td>
 <td data-label="Accelerator vendors">${vendor.accelerator_vendors.map((name) => acceleratorVendorLink(name, "../")).join("<br>")}</td>
 <td data-label="Max memory">${fmtGB(vendor.max_memory_gb)}</td>
 <td data-label="Lowest latest price">${fmtMoney(vendor.min_latest_price_usd)}</td>
 </tr>`,
 )
 .join("")}
 </tbody>
 </table>
 </div>
 </div>
 </section>
 `;
}
function renderSystemVendorPage(host, vendorSlug) {
 const vendor = systemVendorBySlug.get(vendorSlug);
 if (!vendor) {
 host.innerHTML = `<div class="empty">No system vendor found for this route.</div>`;
 return;
 }
 host.innerHTML = `
 <section class="detail-block">
 <div class="detail-card">
 <h2>Summary</h2>
 <dl class="detail-list">
 <div><dt>Systems</dt><dd>${vendor.systems.length}</dd></div>
 <div><dt>Accelerator vendors</dt><dd>${vendor.accelerator_vendors.map((name) => acceleratorVendorLink(name, "../../")).join("<br>")}</dd></div>
 <div><dt>Max memory</dt><dd>${fmtGB(vendor.max_memory_gb)}</dd></div>
 <div><dt>Max bandwidth</dt><dd>${fmtBandwidth(vendor.max_bandwidth_gbps)}</dd></div>
 <div><dt>Lowest latest price</dt><dd>${fmtMoney(vendor.min_latest_price_usd)}</dd></div>
 </dl>
 </div>
 <div class="detail-card">
 <h2>Systems</h2>
 ${systemVendorSystemsTable(vendor.systems, "../../")}
 </div>
 </section>
 `;
}
function systemVendorSystemsTable(rows, prefix) {
 if (!rows.length) return `<div class="empty">No systems.</div>`;
 return `<div class="table-wrap"><table>
 <thead><tr><th>System</th><th>Accelerator vendor</th><th>Accelerators</th><th>Memory</th><th>Bandwidth</th><th>Latest price</th></tr></thead>
 <tbody>
 ${rows
 .map(
 (system) => `<tr>
 <td data-label="System"><a class="device-link" href="${deviceHref(system.item_id, prefix)}"><strong>${escapeHTML(system.name)}</strong></a><br><span class="pill">${escapeHTML(system.item_kind.replaceAll("_", " "))}</span></td>
 <td data-label="Accelerator vendor">${acceleratorVendorLink(system.accelerator_vendor, prefix)}</td>
 <td data-label="Accelerators">${system.accelerators.map((name) => escapeHTML(name)).join("<br>")}</td>
 <td data-label="Memory">${fmtGB(system.memory_gb)}<br>${escapeHTML(system.memory_type)}</td>
 <td data-label="Bandwidth">${fmtBandwidth(system.bandwidth_gbps)}</td>
 <td data-label="Latest price">${fmtMoney(system.latest_price_usd)}${system.latest_price_estimated ? ` <span class="estimate-mark" title="Estimated or reconstructed price">≈</span>` : ""}<br><span class="pill">${escapeHTML(system.latest_year)}</span></td>
 </tr>`,
 )
 .join("")}
 </tbody>
 </table></div>`;
}
function hardwareCandidates() {
 return DATA.items
 .filter(
 (item) =>
 Number.isFinite(Number(item.memory?.capacity_gb)) &&
 Number.isFinite(Number(item.memory?.bandwidth_gbps)),
 )
 .sort(
 (a, b) =>
 b.memory.capacity_gb - a.memory.capacity_gb ||
 b.memory.bandwidth_gbps - a.memory.bandwidth_gbps ||
 a.name.localeCompare(b.name),
 );
}
function modelSourceList(model) {
 if (!model.sources?.length)
 return `<p class="empty">No model source links recorded.</p>`;
 return `<ul class="source-list">${model.sources
 .map(
 (source) =>
 `<li><a href="${escapeHTML(source.url)}" rel="noreferrer">${escapeHTML(source.label || source.url)}</a></li>`,
 )
 .join("")}</ul>`;
}
function modelExpertText(architecture) {
 if (!architecture.routed_experts) return "No routed experts";
 return `${fmtNumber(architecture.routed_experts)} routed, ${fmtNumber(architecture.routed_experts_per_token)} routed/token, ${fmtNumber(architecture.shared_experts_per_token || 0)} shared/token`;
}
function modelAttentionText(architecture) {
 const parts = [];
 if (architecture.attention_heads)
 parts.push(`${fmtNumber(architecture.attention_heads)} query heads`);
 if (architecture.kv_heads)
 parts.push(`${fmtNumber(architecture.kv_heads)} KV heads`);
 if (architecture.global_kv_heads)
 parts.push(`${fmtNumber(architecture.global_kv_heads)} global KV heads`);
 if (architecture.head_dim)
 parts.push(`${fmtNumber(architecture.head_dim)} head dim`);
 if (architecture.state_size)
 parts.push(`${fmtNumber(architecture.state_size)} state size`);
 return parts.length ? parts.join(", ") : "Architecture-specific cache";
}
function renderModelsPage() {
 const host = $("#modelsPage");
 if (!host) return;
 const id = window.LOCAL_FRONTIER_MODEL_ID;
 if (id) {
 renderModelDetailPage(host, id);
 } else {
 renderModelOverviewPage(host);
 }
}
function renderModelOverviewPage(host) {
 if (!models.length) {
 host.innerHTML = `<div class="empty">No model metadata is loaded.</div>`;
 return;
 }
 host.innerHTML = `
 <section class="detail-block">
 <div id="modelsReactRoot"></div>
 <div class="detail-card model-legacy">
 <h2>Model Database</h2>
 <div class="table-controls model-controls">
 <label>Search
 <input id="modelSearch" type="search" placeholder="Qwen/Qwen3.6-35B-A3B, MoE, 32B">
 </label>
 </div>
 <div id="modelTable" class="model-table-host"></div>
 </div>
 </section>
 `;
 $("#modelSearch")?.addEventListener("input", renderModelTable);
 renderModelTable();
 installModelsBridge();
}
function modelDatabaseRow(model) {
 return {
 id: model.id,
 name: model.name,
 precision: model.adapter.weight_precision,
 downloads: fmtNumber(model.hf_downloads || 0),
 architecture: model.architecture.type,
 architectureDetail: model.architecture.detail || "",
 adapterKind: model.adapter.kind,
 totalParams: fmtParams(model.architecture.total_params_b),
 activeParams: fmtParams(model.architecture.active_params_b),
 residentFootprint: fmtGBDecimal(model.adapter.resident_weight_gb, 2),
 activeTrafficFloor: fmtGBDecimal(model.adapter.active_weight_gb, 2),
 context: fmtTokenCount(model.architecture.max_context_tokens),
 modelHref: modelHref(model.id),
 compareHref: compareHref([model.id], ["nvidia-dgx-spark"]),
 searchText: [
 model.id,
 ...(model.aliases || []),
 model.name,
 model.short_name,
 model.license,
 String(model.hf_downloads || ""),
 model.architecture.type,
 model.architecture.detail,
 model.adapter.kind,
 model.adapter.weight_precision,
 (model.tags || []).join(" "),
 ]
 .join(" ")
 .toLowerCase(),
 };
}
function installModelsBridge() {
 window.LocalFrontierModelsBridge = {
 getState() {
 return {
 rows: models.map(modelDatabaseRow),
 };
 },
 };
 window.dispatchEvent(new CustomEvent("local-frontier:models-ready"));
}
function modelDetailState(model) {
 const arch = model.architecture;
 const adapter = model.adapter;
 return {
 architectureRows: [
 {
 label: "Hugging Face ID",
 value: detailLink(model.id, huggingFaceModelHref(model)),
 },
 {
 label: "HF downloads",
 value: fmtNumber(model.hf_downloads || 0),
 },
 {
 label: "Type",
 value: `${arch.type} - ${arch.detail || "No detail recorded."}`,
 },
 {
 label: "Parameters",
 value: `${fmtParams(arch.total_params_b)} total, ${fmtParams(arch.active_params_b)} active`,
 },
 { label: "Experts", value: modelExpertText(arch) },
 {
 label: "Layers",
 value: `${fmtNumber(arch.layers)}${arch.sliding_window_tokens ? `, sliding window ${fmtNumber(arch.sliding_window_tokens)} tokens` : ""}`,
 },
 { label: "Attention/state", value: modelAttentionText(arch) },
 {
 label: "Max context",
 value: fmtTokenCount(arch.max_context_tokens),
 },
 ],
 adapterRows: [
 {
 label: "Weight precision",
 value: `${adapter.weight_precision} (${fmtNumber(adapter.weight_bytes_per_param, 3)} bytes/param)`,
 },
 {
 label: "Resident weights",
 value: fmtGBDecimal(adapter.resident_weight_gb, 2),
 },
 {
 label: "Active traffic floor",
 value: `${fmtGBDecimal(adapter.active_weight_gb, 2)} per decode iteration`,
 },
 {
 label: "KV allocation",
 value: `${fmtGBDecimal(adapter.kv_alloc_gb_per_1k_tokens, 4)} per 1K reserved tokens/session`,
 },
 {
 label: "KV read traffic",
 value: `${fmtGBDecimal(adapter.kv_read_gb_per_1k_tokens, 4)} per 1K active tokens/output token`,
 },
 ],
 sources: (model.sources || []).map((source) => ({
 label: source.label || source.url,
 href: source.url,
 })),
 notes: adapter.notes ? [adapter.notes] : [],
 compareHref: compareHref([model.id], ["nvidia-dgx-spark"]),
 };
}
function installModelDetailBridge(model) {
 window.LocalFrontierModelDetailBridge = {
 getState() {
 return modelDetailState(model);
 },
 };
 window.dispatchEvent(new CustomEvent("local-frontier:model-detail-ready"));
}
function filteredModels() {
 const search = ($("#modelSearch")?.value || "").trim().toLowerCase();
 return models.filter((model) => {
 const haystack = [
 model.id,
 ...(model.aliases || []),
 model.name,
 model.short_name,
 model.license,
 String(model.hf_downloads || ""),
 model.architecture.type,
 model.architecture.detail,
 model.adapter.kind,
 model.adapter.weight_precision,
 (model.tags || []).join(" "),
 ]
 .join(" ")
 .toLowerCase();
 return !search || haystack.includes(search);
 });
}
function renderModelTable() {
 const host = $("#modelTable");
 if (!host) return;
 const rows = filteredModels();
 if (!rows.length) {
 host.innerHTML = `<div class="empty">No models match the current filters.</div>`;
 return;
 }
 host.innerHTML = `
 <div class="table-wrap">
 <table>
 <thead><tr><th>HF model</th><th>Downloads</th><th>Architecture</th><th>Parameters</th><th>Resident footprint</th><th>Context</th><th>Calculator</th></tr></thead>
 <tbody>
 ${rows
 .map(
 (model) => `<tr>
 <td data-label="HF model"><a class="device-link" href="${modelHref(model.id, "../")}"><strong>${escapeHTML(model.id)}</strong></a><br>${escapeHTML(model.name)}<br><span class="pill">${escapeHTML(model.adapter.weight_precision)}</span></td>
 <td data-label="Downloads">${fmtNumber(model.hf_downloads || 0)}</td>
 <td data-label="Architecture">${escapeHTML(model.architecture.type)}<br>${escapeHTML(model.architecture.detail || "")}<br><span class="pill">${escapeHTML(model.adapter.kind)}</span></td>
 <td data-label="Parameters">${fmtParams(model.architecture.total_params_b)} total<br>${fmtParams(model.architecture.active_params_b)} active</td>
 <td data-label="Resident footprint">${fmtGBDecimal(model.adapter.resident_weight_gb, 2)}<br>${fmtGBDecimal(model.adapter.active_weight_gb, 2)} active traffic floor</td>
 <td data-label="Context">${fmtTokenCount(model.architecture.max_context_tokens)}</td>
 <td data-label="Calculator"><a class="device-link" href="${compareHref([model.id], ["nvidia-dgx-spark"])}">Compare</a></td>
 </tr>`,
 )
 .join("")}
 </tbody>
 </table>
 </div>
 `;
}
function renderModelDetailPage(host, id) {
 const model = modelLookup.get(id);
 if (!model) {
 host.innerHTML = `<div class="empty">No model found for this route.</div>`;
 return;
 }
 const arch = model.architecture;
 const adapter = model.adapter;
 host.innerHTML = `
 <div id="modelDetailReactRoot"></div>
 <div class="model-detail-legacy">
 <section class="detail-block">
 <div class="detail-card">
 <h2>Architecture</h2>
 <dl class="detail-list">
 <div><dt>Hugging Face ID</dt><dd><a class="device-link" href="${huggingFaceModelHref(model)}" rel="noreferrer">${escapeHTML(model.id)}</a></dd></div>
 <div><dt>HF downloads</dt><dd>${fmtNumber(model.hf_downloads || 0)}</dd></div>
 <div><dt>Type</dt><dd>${escapeHTML(arch.type)} - ${escapeHTML(arch.detail || "No detail recorded.")}</dd></div>
 <div><dt>Parameters</dt><dd>${fmtParams(arch.total_params_b)} total, ${fmtParams(arch.active_params_b)} active</dd></div>
 <div><dt>Experts</dt><dd>${escapeHTML(modelExpertText(arch))}</dd></div>
 <div><dt>Layers</dt><dd>${fmtNumber(arch.layers)}${arch.sliding_window_tokens ? `, sliding window ${fmtNumber(arch.sliding_window_tokens)} tokens` : ""}</dd></div>
 <div><dt>Attention/state</dt><dd>${escapeHTML(modelAttentionText(arch))}</dd></div>
 <div><dt>Max context</dt><dd>${fmtTokenCount(arch.max_context_tokens)}</dd></div>
 </dl>
 </div>
 <div class="detail-card">
 <h2>Bound Adapter</h2>
 <dl class="detail-list">
 <div><dt>Weight precision</dt><dd>${escapeHTML(adapter.weight_precision)} (${fmtNumber(adapter.weight_bytes_per_param, 3)} bytes/param)</dd></div>
 <div><dt>Resident weights</dt><dd>${fmtGBDecimal(adapter.resident_weight_gb, 2)}</dd></div>
 <div><dt>Active traffic floor</dt><dd>${fmtGBDecimal(adapter.active_weight_gb, 2)} per decode iteration</dd></div>
 <div><dt>KV allocation</dt><dd>${fmtGBDecimal(adapter.kv_alloc_gb_per_1k_tokens, 4)} per 1K reserved tokens/session</dd></div>
 <div><dt>KV read traffic</dt><dd>${fmtGBDecimal(adapter.kv_read_gb_per_1k_tokens, 4)} per 1K active tokens/output token</dd></div>
 </dl>
 ${adapter.notes ? `<p class="prose model-note">${escapeHTML(adapter.notes)}</p>` : ""}
 </div>
 <div class="detail-card">
 <h2>Sources</h2>
 ${modelSourceList(model)}
 </div>
 <div class="detail-card">
 <h2>Calculator</h2>
 <p class="prose">Use this model with any hardware row in the local frontier catalog.</p>
 <p><a class="action-link" href="${compareHref([model.id], ["nvidia-dgx-spark"])}">Compare</a></p>
 </div>
 </section>
 </div>
 `;
 installModelDetailBridge(model);
}
function idsFromParams(params, names) {
 return idList(names.flatMap((name) => params.getAll(name)));
}
function validIds(ids, lookup) {
 return idList(ids).filter((id) => lookup.has(id));
}
function validModelIds(ids) {
 const canonical = [];
 for (const id of idList(ids)) {
 const model = modelLookup.get(id);
 if (model && !canonical.includes(model.id)) canonical.push(model.id);
 }
 return canonical;
}
function boundsRouteSelection(parts) {
 if (parts[0] !== "bounds") return { modelIds: [], hardwareIds: [] };
 const onIndex = parts.indexOf("on");
 if (onIndex > 1) {
 return {
 modelIds: [parts.slice(1, onIndex).join("/")],
 hardwareIds: parts[onIndex + 1] ? [parts[onIndex + 1]] : [],
 };
 }
 return {
 modelIds: parts[1] ? [parts.slice(1).join("/")] : [],
 hardwareIds: [],
 };
}
function defaultHardwareId(hardwareRows) {
 return byId.has("nvidia-dgx-spark")
 ? "nvidia-dgx-spark"
 : hardwareRows[0]?.id;
}
function compareSelectionFromUrl(hardwareRows) {
 const params = new URLSearchParams(window.location.search);
 const parts = routeParts();
 const routeSelection = boundsRouteSelection(parts);
 const requestedModels = [
 ...routeSelection.modelIds,
 ...idsFromParams(params, ["models", "model"]),
 ];
 const requestedHardware = [
 ...routeSelection.hardwareIds,
 ...idsFromParams(params, ["hardware", "hardwares"]),
 ];
 const modelIds = validModelIds(requestedModels);
 const hardwareIds = validIds(requestedHardware, byId).filter((id) =>
 hardwareRows.some((item) => item.id === id),
 );
 return {
 modelIds: modelIds.length ? modelIds : [models[0].id],
 hardwareIds: hardwareIds.length
 ? hardwareIds
 : [defaultHardwareId(hardwareRows)].filter(Boolean),
 };
}
function modelSearchText(model) {
 return [
 model.id,
 model.name,
 model.short_name,
 model.family,
 model.provider,
 model.architecture?.kind,
 ...(model.aliases || []),
 ]
 .join(" ")
 .toLowerCase();
}
function hardwareSearchText(item) {
 return [
 item.id,
 item.name,
 item.system_vendor,
 item.accelerator_vendor,
 item.memory?.capacity_gb,
 item.memory?.bandwidth_gbps,
 ...(item.accelerators || []).map((accelerator) => accelerator.name),
 ]
 .join(" ")
 .toLowerCase();
}
function fuzzyRank(query, text) {
 const q = query.trim().toLowerCase();
 if (!q) return 0;
 if (text.includes(q)) return 1000 - text.indexOf(q);
 let score = 0;
 let cursor = 0;
 for (const char of q) {
 const next = text.indexOf(char, cursor);
 if (next === -1) return -1;
 score += Math.max(1, 20 - (next - cursor));
 cursor = next + 1;
 }
 return score;
}
function popularModelIds() {
 return [
 "nvidia/Qwen3.6-35B-A3B-NVFP4",
 "nvidia/Gemma-4-26B-A4B-NVFP4",
 "antirez/deepseek-v4-gguf",
 "Qwen/Qwen3.6-35B-A3B",
 "google/gemma-4-26B-A4B-it",
 "deepseek-ai/DeepSeek-V4-Flash",
 "Qwen/Qwen3-32B",
 "Qwen/Qwen3-8B",
 "mistralai/Mixtral-8x7B-Instruct-v0.1",
 ].filter((id) => modelById.has(id));
}
function popularHardwareIds(hardwareRows) {
 return [
 "nvidia-dgx-spark",
 "apple-macbook-pro-16-m5-max-128gb",
 "apple-mac-studio-m3-ultra-current-96gb-configuration",
 "apple-mac-studio-m3-ultra-512gb-launch-configuration",
 "nvidia-dgx-station-a100-320g",
 "amd-framework-desktop-ryzen-ai-max-plus-395-128gb",
 ].filter((id) => hardwareRows.some((item) => item.id === id));
}
function compareOptionLabel(kind, item) {
 if (kind === "model") return item.id;
 return item.id;
}
function compareOptionMeta(kind, item) {
 if (kind === "model") {
 return [
 item.short_name || item.name,
 item.architecture?.total_params_b
 ? `${fmtParams(item.architecture.total_params_b)} total`
 : "",
 item.adapter?.weight_precision,
 item.hf_downloads ? `${fmtNumber(item.hf_downloads)} downloads` : "",
 ]
 .filter(Boolean)
 .join(" · ");
 }
 return [
 item.name,
 `${fmtGB(item.memory.capacity_gb)}, ${fmtBandwidth(item.memory.bandwidth_gbps)}`,
 item.system_vendor || item.producer,
 item.accelerator_vendor || item.producer,
 ]
 .filter(Boolean)
 .join(" · ");
}
function compareAssumptionControls(assumptions) {
 return [
 {
 id: "boundLAlloc",
 label: "Reserved context",
 min: "1",
 step: "1000",
 value: String(Number(assumptions.default_l_alloc_tokens || 100000)),
 },
 {
 id: "boundLRead",
 label: "Read context",
 min: "1",
 step: "1000",
 value: String(Number(assumptions.default_l_read_tokens || 32000)),
 },
 {
 id: "boundOverhead",
 label: "Overhead GB",
 min: "0",
 step: "1",
 value: String(Number(assumptions.default_overhead_gb || 8)),
 },
 {
 id: "boundRStar",
 label: "Min tok/s per session",
 min: "0",
 step: "1",
 value: String(Number(assumptions.default_r_star_toks || 20)),
 },
 ];
}
function compareSuggestions(kind, items, query, selectedIds, popularIds) {
 const selected = new Set(selectedIds);
 const searchText = kind === "model" ? modelSearchText : hardwareSearchText;
 const ranked = items
 .filter((item) => !selected.has(item.id))
 .map((item) => ({ item, score: fuzzyRank(query, searchText(item)) }))
 .filter((entry) => entry.score >= 0);
 if (query.trim()) {
 return ranked
 .sort((a, b) => b.score - a.score)
 .slice(0, 8)
 .map((entry) => entry.item);
 }
 const popular = popularIds
 .map((id) => items.find((item) => item.id === id))
 .filter((item) => item && !selected.has(item.id));
 const fallback = items.filter(
 (item) =>
 !selected.has(item.id) && !popular.some((entry) => entry.id === item.id),
 );
 return [...popular, ...fallback].slice(0, 8);
}
function selectedCompareIds(kind) {
 return [
 ...document.querySelectorAll(`.compare-check[data-kind="${kind}"]:checked`),
 ].map((input) => input.value);
}
function allListedCompareIds(kind) {
 return [
 ...document.querySelectorAll(`.compare-check[data-kind="${kind}"]`),
 ].map((input) => input.value);
}
function renderCompareSelectedList(kind, items, selectedIds) {
 const itemById = new Map(items.map((item) => [item.id, item]));
 const rows = idList(selectedIds)
 .map((id) => itemById.get(id))
 .filter(Boolean);
 if (!rows.length) {
 return `<div class="compare-empty">No ${kind === "model" ? "models" : "hardware"} selected.</div>`;
 }
 return `<div class="compare-selected-list">
 ${rows
 .map(
 (item) => `<div class="compare-selected-row">
 <label class="compare-selected-check">
 <input class="compare-check" type="checkbox" data-kind="${kind}" value="${escapeHTML(item.id)}" checked>
 <span>
 <strong>${escapeHTML(compareOptionLabel(kind, item))}</strong>
 <small>${escapeHTML(compareOptionMeta(kind, item))}</small>
 </span>
 </label>
 <button class="compare-remove" type="button" data-kind="${kind}" data-id="${escapeHTML(item.id)}" aria-label="Remove ${escapeHTML(compareOptionLabel(kind, item))}">×</button>
 </div>`,
 )
 .join("")}
 </div>`;
}
function setupComparePicker({ kind, inputId, listId, items, popularIds }) {
 const input = $(`#${inputId}`);
 const list = $(`#${listId}`);
 if (!input || !list) return;
 const selectedIds = () => allListedCompareIds(kind);
 const renderSuggestions = () => {
 hideCompareSuggestions(list);
 const suggestions = compareSuggestions(
 kind,
 items,
 input.value,
 selectedIds(),
 popularIds,
 );
 list.innerHTML = suggestions.length
 ? suggestions
 .map(
 (
 item,
 index,
 ) => `<button class="compare-suggestion${index === 0 ? " is-active" : ""}" type="button" data-kind="${kind}" data-id="${escapeHTML(item.id)}">
 <strong>${escapeHTML(compareOptionLabel(kind, item))}</strong>
 <span>${escapeHTML(compareOptionMeta(kind, item))}</span>
 </button>`,
 )
 .join("")
 : `<div class="compare-no-suggestions">No matches</div>`;
 list.hidden = false;
 };
 input.addEventListener("focus", renderSuggestions);
 input.addEventListener("input", renderSuggestions);
 input.addEventListener("keydown", (event) => {
 if (event.key === "Escape") {
 hideCompareSuggestions();
 input.blur();
 return;
 }
 if (event.key !== "Enter") return;
 event.preventDefault();
 const first = list.querySelector(".compare-suggestion");
 if (first) addCompareItem(first.dataset.kind, first.dataset.id);
 });
}
function hideCompareSuggestions(exceptList) {
 document.querySelectorAll(".compare-suggestions").forEach((list) => {
 if (list !== exceptList) list.hidden = true;
 });
}
function handleCompareOutsidePointerDown(event) {
 const target =
 event.target instanceof Element
 ? event.target
 : event.target?.parentElement;
 if (!target?.closest(".compare-picker-wrap")) hideCompareSuggestions();
}
function setCompareList(kind, ids) {
 const items = kind === "model" ? models : hardwareCandidates();
 const host = $(`#${kind}SelectedList`);
 if (!host) return;
 host.innerHTML = renderCompareSelectedList(kind, items, ids);
 host.querySelectorAll(".compare-check").forEach((input) => {
 input.addEventListener("change", renderCompareResult);
 });
 host.querySelectorAll(".compare-remove").forEach((button) => {
 button.addEventListener("click", () =>
 removeCompareItem(button.dataset.kind, button.dataset.id),
 );
 });
}
function addCompareItem(kind, id) {
 const existing = allListedCompareIds(kind);
 if (!existing.includes(id)) existing.push(id);
 setCompareList(kind, existing);
 const input = $(`#${kind}Picker`);
 if (input) input.value = "";
 hideCompareSuggestions();
 renderCompareResult();
 input?.focus();
}
function removeCompareItem(kind, id) {
 setCompareList(
 kind,
 allListedCompareIds(kind).filter((itemId) => itemId !== id),
 );
 renderCompareResult();
}
function renderComparePage() {
 const host = $("#comparePage");
 if (!host) return;
 if (!models.length) {
 host.innerHTML = `<div class="empty">No model metadata is loaded.</div>`;
 return;
 }
 const hardwareRows = hardwareCandidates();
 const selection = compareSelectionFromUrl(hardwareRows);
 const assumptions = MODEL_DATA.assumptions || {};
 const assumptionControls = compareAssumptionControls(assumptions);
 host.innerHTML = `
 <section class="detail-block">
 <div class="compare-builder">
 <div id="compareReactRoot"></div>
 <div class="compare-vector" aria-label="Hardware by model selection">
 <div class="compare-column">
 <h3>Hardware</h3>
 <div class="compare-picker-wrap">
 <label>Find hardware
 <input id="hardwarePicker" class="compare-picker" type="search" autocomplete="off" placeholder="Select hardware">
 </label>
 <div id="hardwareSuggestionList" class="compare-suggestions" hidden></div>
 </div>
 <div id="hardwareSelectedList"></div>
 </div>
 <div class="compare-times" aria-hidden="true">×</div>
 <div class="compare-column">
 <h3>Models</h3>
 <div class="compare-picker-wrap">
 <label>Find model
 <input id="modelPicker" class="compare-picker" type="search" autocomplete="off" placeholder="Select model">
 </label>
 <div id="modelSuggestionList" class="compare-suggestions" hidden></div>
 </div>
 <div id="modelSelectedList"></div>
 </div>
 </div>
 <div class="bound-controls compare-assumptions">
 ${assumptionControls
 .map(
 (control) => `<label>${escapeHTML(control.label)}
 <input id="${escapeHTML(control.id)}" type="number" min="${escapeHTML(control.min)}" step="${escapeHTML(control.step)}" value="${escapeHTML(control.value)}">
 </label>`,
 )
 .join("")}
 </div>
 </div>
 <div id="compareResultReactRoot"></div>
 <div id="boundsResult" class="bounds-result"></div>
 </section>
 `;
 setCompareList("hardware", selection.hardwareIds);
 setCompareList("model", selection.modelIds);
 setupComparePicker({
 kind: "hardware",
 inputId: "hardwarePicker",
 listId: "hardwareSuggestionList",
 items: hardwareRows,
 popularIds: popularHardwareIds(hardwareRows),
 });
 setupComparePicker({
 kind: "model",
 inputId: "modelPicker",
 listId: "modelSuggestionList",
 items: models,
 popularIds: popularModelIds(),
 });
 document.removeEventListener(
 "pointerdown",
 handleCompareOutsidePointerDown,
 true,
 );
 document.addEventListener(
 "pointerdown",
 handleCompareOutsidePointerDown,
 true,
 );
 document.querySelectorAll(".compare-suggestions").forEach((list) => {
 list.addEventListener("click", (event) => {
 const button = event.target.closest(".compare-suggestion");
 if (button) addCompareItem(button.dataset.kind, button.dataset.id);
 });
 });
 [
 "boundLAlloc",
 "boundLRead",
 "boundOverhead",
 "boundRStar",
 ].forEach((id) => {
 const el = $(`#${id}`);
 if (el) {
 el.addEventListener("input", renderCompareResult);
 el.addEventListener("change", renderCompareResult);
 }
 });
 renderCompareResult();
 installCompareBridge(hardwareRows, models, assumptionControls);
}
function installCompareBridge(hardwareRows, modelRows, assumptionControls) {
 window.LocalFrontierCompareBridge = {
 getState() {
 return {
 hardwareOptions: hardwareRows.map((item) => ({
 id: item.id,
 label: compareOptionLabel("hardware", item),
 meta: compareOptionMeta("hardware", item),
 })),
 modelOptions: modelRows.map((model) => ({
 id: model.id,
 label: compareOptionLabel("model", model),
 meta: compareOptionMeta("model", model),
 })),
 hardwareIds: allListedCompareIds("hardware"),
 modelIds: allListedCompareIds("model"),
 assumptions: assumptionControls.map((control) => ({
 ...control,
 value: $(`#${control.id}`)?.value || control.value,
 })),
 resultOptions: compareResultOptionsSnapshot(),
 result:
 currentCompareResultSnapshot ||
 compareResultSnapshot({ canonicalPath: "/compare" }),
 };
 },
 setSelectedIds(kind, ids) {
 setCompareList(kind, idList(ids));
 renderCompareResult();
 },
 setAssumptionValue(id, value) {
 const input = $(`#${id}`);
 if (input) {
 input.value = value;
 renderCompareResult();
 }
 },
 setResultOption(id, value) {
 setCompareResultOption(id, value);
 },
 };
 window.dispatchEvent(new CustomEvent("local-frontier:compare-ready"));
}
function numberFromInput(id, fallback) {
 const value = Number($(`#${id}`)?.value);
 return Number.isFinite(value) ? value : fallback;
}
function selectedValues(id) {
 return Array.from($(`#${id}`)?.selectedOptions || []).map(
 (option) => option.value,
 );
}
function boundWarnings(model, result, lAlloc, lRead) {
 const warnings = [...(result.warnings || [])];
 const maxContext = recordedContextLimit(model);
 if (maxContext !== null && lAlloc > maxContext) {
 warnings.push(
 `Reserved context exceeds this model's recorded max context of ${fmtNumber(maxContext)} tokens.`,
 );
 }
 if (maxContext !== null && lRead > maxContext) {
 warnings.push(
 `Read context exceeds this model's recorded max context of ${fmtNumber(maxContext)} tokens.`,
 );
 }
 if (lRead > lAlloc) {
 warnings.push("Read context is greater than reserved context.");
 }
 if (result.status.residentFit.code === "unsupported_profile") {
 warnings.push("No audited production bounds are available for this model profile.");
 } else if (result.status.residentFit.code === "resident_not_fit") {
 warnings.push(
 "Resident model plus overhead does not fit in selected hardware memory.",
 );
 } else if (result.status.sessionFit.code === "no_session_capacity") {
 warnings.push("No active session fits after reserved context allocation.");
 }
 return warnings;
}
function compareWarnings(rows, lAlloc, lRead) {
 const warnings = rows.flatMap(({ result }) => result.warnings || []);
 const contextModels = new Set();
 for (const { model } of rows) {
 const maxContext = recordedContextLimit(model);
 if (
 maxContext !== null &&
 (lAlloc > maxContext || lRead > maxContext)
 ) {
 contextModels.add(model.short_name || model.name);
 }
 }
 if (contextModels.size) {
 warnings.push(
 `Context settings exceed recorded max context for ${[...contextModels].join(", ")}.`,
 );
 }
 if (lRead > lAlloc) {
 warnings.push("Read context is greater than reserved context.");
 }
 const noFit = rows.filter(
 ({ result }) => result.status.residentFit.code === "resident_not_fit",
 ).length;
 const unsupported = rows.filter(
 ({ result }) => result.status.residentFit.code === "unsupported_profile",
 ).length;
 const noSessions = rows.filter(
 ({ result }) => result.status.sessionFit.code === "no_session_capacity",
 ).length;
 if (unsupported)
 warnings.push(
 `${fmtNumber(unsupported)} combinations have no audited production model profile.`,
 );
 if (noFit)
 warnings.push(
 `${fmtNumber(noFit)} combinations do not fit resident model weights plus overhead.`,
 );
 if (noSessions)
 warnings.push(
 `${fmtNumber(noSessions)} combinations fit weights but no active session after reserved context allocation.`,
 );
 return warnings;
}
function memoryFitLabel(result) {
 if (result.status.residentFit.code === "unsupported_profile") {
 return "No audited profile";
 }
 switch (result.status.sessionFit.code) {
 case "fits":
 return `${fmtNumber(result.status.sessionFit.sessionCount)} sessions`;
 case "no_session_capacity":
 return "No active session";
 case "not_evaluated":
 return "Weights do not fit";
 default:
 return "Unknown";
 }
}
function aggregateLabel(result) {
 if (result.status.residentFit.code === "unsupported_profile") {
 return "No profile";
 }
 switch (result.status.floorFit.code) {
 case "meets_floor":
 return fmtTok(result.best.aggregate, 0);
 case "below_floor":
 return "No floor";
 case "not_evaluated":
 return "No fit";
 default:
 return "-";
 }
}
function usableBatchLabel(result) {
 return result.status.floorFit.ok ? fmtNumber(result.best.batch) : "-";
}
function perSessionLabel(result) {
 return result.status.floorFit.ok ? fmtTok(result.best.perSession, 1) : "-";
}
function compareMatrixStatus(result) {
 if (
 result.status.residentFit.code === "unsupported_profile" ||
 result.status.residentFit.code === "resident_not_fit" ||
 result.status.sessionFit.code === "no_session_capacity"
 ) {
 return "bad";
 }
 if (result.status.floorFit.code === "below_floor") return "warn";
 if (result.status.floorFit.ok) return "ok";
 return "neutral";
}
function compareTextValue(label, value) {
 return { label, value };
}
function compareLinkValue(label, href, valueLabel, sublabel = "") {
 return {
 label,
 value: {
 href,
 label: valueLabel,
 ...(sublabel ? { sublabel } : {}),
 },
 };
}
function compareCell(value, subvalue = "") {
 return {
 value,
 ...(subvalue ? { subvalue } : {}),
 };
}
function compareLinkCell(href, label, subvalue = "") {
 return compareCell(
 {
 href,
 label,
 },
 subvalue,
 );
}
function compareResultOptionsSnapshot() {
 return { ...compareResultOptions };
}
function setCompareResultOption(id, value) {
 if (id === "groupBy") {
 compareResultOptions.groupBy = value === "hardware" ? "hardware" : "model";
 }
 if (id === "advanced") {
 compareResultOptions.advanced = Boolean(value);
 }
 renderCompareResult();
}
function compareFitLabel(result) {
 switch (result.status_code) {
 case "ok":
 return "Fits";
 case "unsupported_profile":
 return "No profile";
 case "resident_not_fit":
 return "Weights do not fit";
 case "no_session_capacity":
 return "No active session";
 case "no_floor":
 return "Below floor";
 default:
 return result.status_code || "Unknown";
 }
}
function compareHasAuditedProfile(result) {
 return result.status_code !== "unsupported_profile";
}
function compareHasRunnableSession(result) {
 return (
 compareHasAuditedProfile(result) &&
 result.status.residentFit.code !== "resident_not_fit" &&
 result.status.sessionFit.code !== "no_session_capacity"
 );
}
function compareNumberValue(value, formatter, fallback = "-") {
 return Number.isFinite(Number(value)) ? formatter(value) : fallback;
}
function compareSingleSessionLabel(result) {
 return compareHasRunnableSession(result)
 ? compareNumberValue(result.single?.aggregate, (value) => fmtTok(value, 1))
 : "-";
}
function compareMemoryFitBatchLabel(result) {
 return compareHasAuditedProfile(result)
 ? compareNumberValue(result.bMem, (value) => fmtNumber(value))
 : "-";
}
function compareMemoryPowerCeilingLabel(result) {
 return compareHasAuditedProfile(result)
 ? compareNumberValue(result.memoryPowerCeiling, (value) => fmtTok(value, 0))
 : "-";
}
function compareTraceGB(result, key, digits = 3) {
 return compareNumberValue(result.trace?.[key], (value) =>
 fmtGBDecimal(value, digits),
 );
}
function compareTraceTok(result, key, digits = 1) {
 return compareNumberValue(result.trace?.[key], (value) =>
 fmtTok(value, digits),
 );
}
function compareInputValue(workloadSettings, key, fallback = "-") {
 const value = workloadSettings?.[key];
 return value === null || value === undefined || value === "" ? fallback : value;
}
function compareAdapterKind(profile, adapterKey) {
 return profile?.architecture?.[adapterKey]?.kind || "-";
}
function comparePrecisionLabel(profile) {
 if (!profile?.serving) return "-";
 return [
 profile.serving.weight_format ? `W ${profile.serving.weight_format}` : "",
 profile.serving.kv_store_format
 ? `KV ${profile.serving.kv_store_format}`
 : "",
 profile.serving.kv_read_format
 ? `read ${profile.serving.kv_read_format}`
 : "",
 ]
 .filter(Boolean)
 .join(" / ");
}
function compareUsableRange(result) {
 const summary = result.trace?.usable_batches_summary;
 if (!summary?.count) return "-";
 if (summary.min_batch === summary.max_batch) {
 return fmtNumber(summary.min_batch);
 }
 return `${fmtNumber(summary.min_batch)}-${fmtNumber(summary.max_batch)}`;
}
function compareSubjectCell(groupBy, model, hardware) {
 if (groupBy === "hardware") {
 return compareLinkCell(
 modelHref(model.id),
 model.short_name || model.name,
 model.id,
 );
 }
 return compareLinkCell(
 deviceHref(hardware.id),
 hardware.name,
 `${fmtGB(hardware.memory.capacity_gb)} at ${fmtBandwidth(hardware.memory.bandwidth_gbps)}`,
 );
}
function compareDefaultColumns(groupBy) {
 return [
 {
 key: "subject",
 label: groupBy === "hardware" ? "Model" : "Hardware",
 },
 { key: "fit", label: "Fit" },
 { key: "singleSession", label: "Single-session tok/s" },
 { key: "memoryFitBatch", label: "Max fit sessions" },
 { key: "bStar", label: "Usable sessions b*" },
 { key: "aggregate", label: "Aggregate tok/s at b*" },
 { key: "perSession", label: "Per-session tok/s at b*" },
 { key: "memoryPowerCeiling", label: "Memory-power bound" },
 ];
}
function compareAdvancedColumns() {
 return [
 { key: "profile", label: "Profile" },
 { key: "statusCode", label: "Status code" },
 { key: "capacity", label: "Capacity" },
 { key: "bandwidth", label: "Bandwidth" },
 { key: "memoryPower", label: "Memory power" },
 { key: "resident", label: "Resident GB" },
 { key: "free", label: "Free GB" },
 { key: "kAlloc", label: "K alloc/session" },
 { key: "wBatchOne", label: "W batch(1)" },
 { key: "wBatchBStar", label: "W batch(b*)" },
 { key: "kRead", label: "K read/token" },
 { key: "qBStar", label: "Q at b*" },
 { key: "usableRange", label: "Usable b range" },
 { key: "inputs", label: "Inputs" },
 { key: "weightAdapter", label: "Weight adapter" },
 { key: "kvAdapter", label: "KV adapter" },
 { key: "precision", label: "Precision" },
 { key: "warnings", label: "Warnings" },
 ];
}
function compareTableColumns(groupBy, advanced) {
 return [
 ...compareDefaultColumns(groupBy),
 ...(advanced ? compareAdvancedColumns() : []),
 ];
}
function compareResultTableRow(row, groupBy, workloadSettings) {
 const { model, hardware, profile, result } = row;
 const usableBatch = result.status.floorFit.ok ? result.best?.batch : null;
 const aggregate = result.status.floorFit.ok ? result.best?.aggregate : null;
 const perSession = result.status.floorFit.ok ? result.best?.perSession : null;
 const bStarLabel =
 usableBatch === null || usableBatch === undefined
 ? "-"
 : fmtNumber(usableBatch);
 const aggregateLabel =
 aggregate === null || aggregate === undefined ? "-" : fmtTok(aggregate, 0);
 const perSessionValue =
 perSession === null || perSession === undefined
 ? "-"
 : fmtTok(perSession, 1);
 const warnings = result.warnings?.length
 ? result.warnings.join("; ")
 : result.status_code === "ok"
 ? "-"
 : compareFitLabel(result);
return {
 subject: compareSubjectCell(groupBy, model, hardware),
 fit: compareCell(compareFitLabel(result), result.status_code),
 singleSession: compareCell(compareSingleSessionLabel(result)),
 memoryFitBatch: compareCell(compareMemoryFitBatchLabel(result)),
 bStar: compareCell(bStarLabel),
 aggregate: compareCell(aggregateLabel),
 perSession: compareCell(perSessionValue),
 memoryPowerCeiling: compareCell(compareMemoryPowerCeilingLabel(result)),
 profile: compareCell(
 result.profile_resolution?.model_profile || "-",
 result.profile_resolution?.model_profile_status || "",
 ),
 statusCode: compareCell(result.status_code || "-"),
 capacity: compareCell(compareTraceGB(result, "capacity_gb", 0)),
 bandwidth: compareCell(compareNumberValue(result.trace?.bandwidth_gbps, fmtBandwidth)),
 memoryPower: compareCell(
 compareNumberValue(result.memoryPower, (value) =>
 `${fmtNumber(value, 0)} GB^2/s`,
 ),
 ),
 resident: compareCell(compareTraceGB(result, "w_resident_gb", 3)),
 free: compareCell(compareTraceGB(result, "free_gb", 3)),
 kAlloc: compareCell(compareTraceGB(result, "k_alloc_gb", 4)),
 wBatchOne: compareCell(
 compareNumberValue(result.single?.batchWeight, (value) =>
 fmtGBDecimal(value, 3),
 ),
 ),
 wBatchBStar: compareCell(compareTraceGB(result, "w_batch_at_b_star_gb", 3)),
 kRead: compareCell(compareTraceGB(result, "k_read_gb", 4)),
 qBStar: compareCell(compareTraceGB(result, "q_at_b_star_gb_per_output_token", 4)),
 usableRange: compareCell(compareUsableRange(result)),
 inputs: compareCell(
 `${fmtNumber(compareInputValue(workloadSettings, "l_alloc_tokens"))}/${fmtNumber(compareInputValue(workloadSettings, "l_read_tokens"))} ctx`,
 `floor ${fmtTok(compareInputValue(workloadSettings, "min_toks_per_session"), 1)}, overhead ${fmtGBDecimal(compareInputValue(workloadSettings, "overhead_gb"), 1)}`,
 ),
 weightAdapter: compareCell(compareAdapterKind(profile, "weight_adapter")),
 kvAdapter: compareCell(compareAdapterKind(profile, "kv_adapter")),
 precision: compareCell(comparePrecisionLabel(profile)),
 warnings: compareCell(warnings),
 };
}
function compareGroupedSections({
 rows,
 selectedModels,
 selectedHardware,
 groupBy,
 advanced,
 workloadSettings,
}) {
 const columns = compareTableColumns(groupBy, advanced);
 const rowByKey = new Map(
 rows.map((row) => [`${row.model.id}\n${row.hardware.id}`, row]),
 );
 const minWidth = advanced ? "3000px" : "1160px";
if (groupBy === "hardware") {
 return selectedHardware.map((hardware) => ({
 kind: "table",
 title: hardware.name,
 description: `${fmtGB(hardware.memory.capacity_gb)} at ${fmtBandwidth(hardware.memory.bandwidth_gbps)}`,
 minWidth,
 columns,
 rows: selectedModels
 .map((model) => rowByKey.get(`${model.id}\n${hardware.id}`))
 .filter(Boolean)
 .map((row) => compareResultTableRow(row, groupBy, workloadSettings)),
 }));
 }
return selectedModels.map((model) => ({
 kind: "table",
 title: model.short_name || model.name,
 description: model.id,
 minWidth,
 columns,
 rows: selectedHardware
 .map((hardware) => rowByKey.get(`${model.id}\n${hardware.id}`))
 .filter(Boolean)
 .map((row) => compareResultTableRow(row, groupBy, workloadSettings)),
 }));
}
function comparePairDetailSection(row, workloadSettings) {
 const { model, hardware, profile, result } = row;
 return {
 kind: "list",
 title: "Calculation Details",
 description:
 "KV-aware bound: T(b) <= R / (W_batch(b) / b + K_read). The loose memory-power bound keeps C x R explicit and drops private read traffic.",
 rows: [
 compareLinkValue("Model", modelHref(model.id), model.id, model.name),
 compareLinkValue("Hardware", deviceHref(hardware.id), hardware.name),
 compareTextValue(
 "Hardware memory",
 `${fmtGB(hardware.memory.capacity_gb)} at ${fmtBandwidth(hardware.memory.bandwidth_gbps)}`,
 ),
 compareTextValue(
 "Profile",
 result.profile_resolution?.model_profile || "-",
 ),
 compareTextValue(
 "Profile status",
 result.profile_resolution?.model_profile_status || "-",
 ),
 compareTextValue(
 "Weight adapter",
 compareAdapterKind(profile, "weight_adapter"),
 ),
 compareTextValue("KV adapter", compareAdapterKind(profile, "kv_adapter")),
 compareTextValue("Precision", comparePrecisionLabel(profile)),
 compareTextValue(
 "Reserved / read context",
 `${fmtNumber(compareInputValue(workloadSettings, "l_alloc_tokens"))} / ${fmtNumber(compareInputValue(workloadSettings, "l_read_tokens"))} tokens`,
 ),
 compareTextValue(
 "Floor",
 fmtTok(compareInputValue(workloadSettings, "min_toks_per_session"), 1),
 ),
 compareTextValue(
 "Resident model",
 compareTraceGB(result, "w_resident_gb", 3),
 ),
 compareTextValue(
 "Free after overhead",
 compareTraceGB(result, "free_gb", 3),
 ),
 compareTextValue(
 "K_alloc per session",
 compareTraceGB(result, "k_alloc_gb", 4),
 ),
 compareTextValue(
 "K_read per output token",
 compareTraceGB(result, "k_read_gb", 4),
 ),
 compareTextValue(
 "W_batch(1)",
 compareNumberValue(result.single?.batchWeight, (value) =>
 fmtGBDecimal(value, 3),
 ),
 ),
 compareTextValue(
 "W_batch(b*)",
 compareTraceGB(result, "w_batch_at_b_star_gb", 3),
 ),
 compareTextValue(
 "Q at b*",
 compareTraceGB(result, "q_at_b_star_gb_per_output_token", 4),
 ),
 compareTextValue("Usable b range", compareUsableRange(result)),
 ],
 };
}
function compareResultSnapshot({
 canonicalPath,
 warnings = [],
 cards = [],
 sections = [],
 emptyMessage = "",
}) {
 return {
 canonicalPath,
 canonicalUrl: `${window.location.origin}${canonicalPath}`,
 warnings,
 cards,
 sections,
 ...(emptyMessage ? { emptyMessage } : {}),
 };
}
function publishCompareResultSnapshot(snapshot) {
 currentCompareResultSnapshot = snapshot;
 window.dispatchEvent(new CustomEvent("local-frontier:compare-result"));
}
function renderCompareResult() {
 const host = $("#boundsResult");
 if (!host) return;
 const selectedModels = selectedCompareIds("model")
 .map((id) => modelById.get(id))
 .filter(Boolean);
 const selectedHardware = selectedCompareIds("hardware")
 .map((id) => byId.get(id))
 .filter(Boolean);
 const canonicalPath = compareHref(
 selectedModels.map((model) => model.id),
 selectedHardware.map((item) => item.id),
 );
 if (
 `${window.location.pathname}${window.location.search}` !== canonicalPath &&
 window.history?.replaceState
 ) {
 window.history.replaceState(null, "", canonicalPath);
 }
 if (!selectedModels.length || !selectedHardware.length) {
 publishCompareResultSnapshot(
 compareResultSnapshot({
 canonicalPath,
 emptyMessage: "Choose at least one model and one hardware row.",
 }),
 );
 host.innerHTML = `
 <div class="empty">Choose at least one model and one hardware row.</div>
 `;
 return;
 }
 const lAlloc = numberFromInput("boundLAlloc", 100000);
 const lRead = numberFromInput("boundLRead", 32000);
 const overhead = numberFromInput("boundOverhead", 8);
 const rStar = numberFromInput("boundRStar", 20);
 const workloadSettings = {
 l_alloc_tokens: lAlloc,
 l_read_tokens: lRead,
 min_toks_per_session: rStar,
 overhead_gb: overhead,
 decode_policy: {
 kind: "ordinary",
 rho: 1,
 },
 };
 const rows = selectedModels.flatMap((model) =>
 selectedHardware.map((hardware) => {
 const profile = profileByRepo.get(model.id);
 const result = BOUNDS_ENGINE.calculateProfiledBounds({
 profile,
 model,
 hardware,
 workloadSettings,
 });
 return { model, hardware, profile, result };
 }),
 );
 const isPair = selectedModels.length === 1 && selectedHardware.length === 1;
 const warnings = isPair
 ? boundWarnings(rows[0].model, rows[0].result, lAlloc, lRead)
 : compareWarnings(rows, lAlloc, lRead);
 const resultOptions = compareResultOptionsSnapshot();
 const sections = compareGroupedSections({
 rows,
 selectedModels,
 selectedHardware,
 groupBy: resultOptions.groupBy,
 advanced: resultOptions.advanced,
 workloadSettings,
 });
 if (isPair) sections.push(comparePairDetailSection(rows[0], workloadSettings));
 publishCompareResultSnapshot(
 compareResultSnapshot({
 canonicalPath,
 warnings,
 sections,
 }),
 );
 host.innerHTML = "";
}
function sourceList(item) {
 const sources = [];
 for (const source of item.spec_sources || []) {
 sources.push({ name: source.name, url: source.url });
 }
 if (item.memory.bandwidth_source_url) {
 sources.push({
 name: "Memory bandwidth source",
 url: item.memory.bandwidth_source_url,
 });
 }
 for (const event of item.price_history) {
 sources.push({
 name: `${event.start_year}-${event.end_year} price source`,
 url: event.source_url,
 });
 }
 const unique = [];
 const seen = new Set();
 for (const source of sources) {
 if (!source.url || seen.has(source.url)) continue;
 seen.add(source.url);
 unique.push(source);
 }
 if (!unique.length) return `<p class="empty">No source links recorded.</p>`;
 return `<ul class="source-list">${unique.map((source) => `<li><a href="${escapeHTML(source.url)}" rel="noreferrer">${escapeHTML(source.name || source.url)}</a></li>`).join("")}</ul>`;
}
const HOME_SHELL_HTML = document.querySelector(".site-shell")?.outerHTML || "";
let currentCompareResultSnapshot = null;
const DEFAULT_COMPARE_RESULT_OPTIONS = Object.freeze({
 groupBy: "model",
 advanced: false,
});
let compareResultOptions = { ...DEFAULT_COMPARE_RESULT_OPTIONS };
function primaryNav() {
 return `<nav class="top-nav" aria-label="Primary">
 <a class="wordmark" href="/">Local Frontier</a>
 <div class="nav-links">
 <a href="/#frontier">Charts</a>
 <a href="/#database">Database</a>
 <a href="/accelerators">Accelerators</a>
 <a href="/systems">Systems</a>
 <a href="/models">Models</a>
 <a href="/compare">Compare</a>
 </div>
 </nav>`;
}
function renderShell({ title, mainId, backHref = "", backLabel = "" }) {
 const backLink = backHref
 ? `<a class="back-link" href="${backHref}">&larr; ${escapeHTML(backLabel)}</a>`
 : "";
 document.body.innerHTML = `<div class="site-shell device-shell">
 <header class="device-header">
 ${primaryNav()}
 ${backLink}
 <h1>${escapeHTML(title)}</h1>
 </header>
 <main id="${mainId}" class="device-main"></main>
 </div>`;
}
function renderHomeRoute() {
 document.body.innerHTML = `
 <div id="homeReactRoot"></div>
 <div class="home-legacy">${HOME_SHELL_HTML}</div>
 `;
 document.body.dataset.page = "index";
 document.title = "Local Frontier";
 renderStats();
 setupControls();
 renderFrontierChart();
 renderDeviceTable();
 installHardwareBridge();
 installHomeBridge();
 if (window.location.hash) {
 requestAnimationFrame(() => {
 document.querySelector(window.location.hash)?.scrollIntoView();
 });
 }
}
function routeParts() {
 return window.location.pathname
 .replace(/^\/+|\/+$/g, "")
 .split("/")
 .filter(Boolean)
 .map((part) => decodeURIComponent(part));
}
function clearRouteGlobals() {
 delete document.body.dataset.reactAccelerator;
 delete document.body.dataset.reactCompare;
 delete document.body.dataset.reactCompareResult;
 delete document.body.dataset.reactModels;
 delete document.body.dataset.reactModelDetail;
 delete document.body.dataset.reactHardware;
 delete document.body.dataset.reactDevice;
 delete document.body.dataset.reactHome;
 delete document.body.dataset.reactSystem;
 window.LOCAL_FRONTIER_DEVICE_ID = undefined;
 window.LOCAL_FRONTIER_ACCELERATOR_VENDOR = undefined;
 window.LOCAL_FRONTIER_ACCELERATOR_MODEL = undefined;
 window.LOCAL_FRONTIER_SYSTEM_VENDOR = undefined;
 window.LOCAL_FRONTIER_MODEL_ID = undefined;
}
function renderRoute() {
 clearRouteGlobals();
 const parts = routeParts();
 if (parts[0] === "devices" && parts[1]) {
 const item = byId.get(parts[1]);
 document.body.dataset.page = "device";
 document.title = `${item?.name || "Device"} - Local Frontier`;
 window.LOCAL_FRONTIER_DEVICE_ID = parts[1];
 renderShell({
 title: item?.name || "Device",
 mainId: "devicePage",
 backHref: "/#database",
 backLabel: "Back to database",
 });
 renderDevicePage();
 return;
 }
 if (parts[0] === "accelerators") {
 const vendorSlug = parts[1];
 const modelSlug = parts[2];
 const accelerator = modelSlug
 ? acceleratorById.get(`${vendorSlug}/${modelSlug}`)
 : null;
 const vendor = vendorSlug
 ? producers.find((name) => name.toLowerCase() === vendorSlug)
 : null;
 document.body.dataset.page = modelSlug
 ? "accelerator-model"
 : vendorSlug
 ? "accelerator-vendor"
 : "accelerators";
 window.LOCAL_FRONTIER_ACCELERATOR_VENDOR = vendorSlug;
 window.LOCAL_FRONTIER_ACCELERATOR_MODEL = modelSlug;
 const title =
 accelerator?.name || (vendor ? `${vendor} Accelerators` : "Accelerators");
 document.title = `${title} - Local Frontier`;
 renderShell({
 title,
 mainId: "acceleratorPage",
 backHref: vendorSlug ? "/accelerators" : "",
 backLabel: "Back to accelerators",
 });
 renderAcceleratorPage();
 return;
 }
 if (parts[0] === "systems") {
 const vendorSlug = parts[1];
 const vendor = vendorSlug ? systemVendorBySlug.get(vendorSlug) : null;
 document.body.dataset.page = vendorSlug ? "system-vendor" : "systems";
 window.LOCAL_FRONTIER_SYSTEM_VENDOR = vendorSlug;
 const title = vendor ? `${vendor.name} Systems` : "System Vendors";
 document.title = `${title} - Local Frontier`;
 renderShell({
 title,
 mainId: "systemPage",
 backHref: vendorSlug ? "/systems" : "",
 backLabel: "Back to systems",
 });
 renderSystemPage();
 return;
 }
 if (parts[0] === "models") {
 const requestedModelId = parts.length > 1 ? parts.slice(1).join("/") : "";
 const model = requestedModelId ? modelLookup.get(requestedModelId) : null;
 const canonicalModelId = model?.id || requestedModelId;
 document.body.dataset.page = requestedModelId ? "model" : "models";
 window.LOCAL_FRONTIER_MODEL_ID = canonicalModelId;
 const title = model ? model.name : "Models";
 document.title = `${title} - Local Frontier`;
 renderShell({
 title,
 mainId: "modelsPage",
 backHref: requestedModelId ? "/models" : "",
 backLabel: "Back to models",
 });
 renderModelsPage();
 if (
 model &&
 requestedModelId !== model.id &&
 window.history?.replaceState
 ) {
 window.history.replaceState(null, "", modelHref(model.id));
 }
 return;
 }
 if (parts[0] === "compare" || parts[0] === "bounds") {
 document.body.dataset.page = "compare";
 document.title = "Model / Hardware Compare - Local Frontier";
 renderShell({
 title: "Model / Hardware Compare",
 mainId: "comparePage",
 backHref: "/models",
 backLabel: "Back to models",
 });
 renderComparePage();
 return;
 }
 renderHomeRoute();
}
function installRouteInterception() {
 document.addEventListener("click", (event) => {
 const link = event.target.closest("a[href]");
 if (!link) return;
 const url = new URL(link.href, window.location.href);
 if (url.origin !== window.location.origin) return;
 event.preventDefault();
 history.pushState(null, "", `${url.pathname}${url.search}${url.hash}`);
 renderRoute();
 });
 window.addEventListener("popstate", renderRoute);
}
function init() {
 installRouteInterception();
 renderRoute();
}
init();