No data in range.
`;
+ const max = Math.max(...data.map((d) => d.val), 1);
+ const total = data.reduce((s, d) => s + d.val, 0);
+ const rowH = 30, padR = 64, nameW = opts.nameW ?? 142;
+ // The name budget is a character count, so it has to track nameW or wide
+ // panels truncate names that had ~100 viewBox units of free gutter beside them.
+ const nameChars = opts.nameChars ?? Math.max(12, Math.floor(nameW / 7.1));
+ const W = 540, H = data.length * rowH + 6;
+ const barX = nameW + 8, barW = W - barX - padR;
+ const valFmt = opts.valFmt || fmtMoney;
+ const titleFmt = opts.titleFmt || (opts.valFmt ? valFmt : fmtMoneyFull);
+ // filterDim: by default use nameKey; pass null to opt-out of filtering
+ const filterDim = "filterDim" in opts ? opts.filterDim : nameKey;
+ const activeVals = filterDim && state.filters[filterDim];
+ const hasFilter = activeVals && activeVals.length > 0;
+ let g = "";
+ data.forEach((d, i) => {
+ const yy = i * rowH + 4;
+ const cy = yy + rowH / 2;
+ const w = Math.max(2, (d.val / max) * barW);
+ const color = opts.color || PALETTE[i % PALETTE.length];
+ const pct = total > 0 ? (d.val / total) : 0;
+ const isSelected = hasFilter && activeVals.includes(d.name);
+ const isDimmed = hasFilter && !isSelected;
+ let cls = "hbar-row";
+ if (filterDim) cls += " hbar-filterable";
+ if (isSelected) cls += " hbar-selected";
+ if (isDimmed) cls += " hbar-dimmed";
+ const isTruncated = d.name.length > nameChars;
+ const dimAttr = filterDim ? ` data-filter-dim="${esc(filterDim)}" data-filter-val="${esc(d.name)}"` : "";
+ const interactiveAttrs = filterDim
+ ? ` tabindex="0" role="button" aria-pressed="${isSelected ? 'true' : 'false'}" aria-label="Filter by ${esc(d.name)}, ${valFmt(d.val)}"`
+ : ` tabindex="0" aria-label="${esc(d.name)}, ${valFmt(d.val)}"`;
+ g += `No data in range.
`;
+ const size = 180, cx = size / 2, cy = size / 2, R = 80, r = 50;
+ let a0 = 0, g = "";
+ if (data.length === 1) {
+ g += `}] — filled area with a stroked top edge.
+ const { valueKey, color = PALETTE[0], valFmt = fmtMoney, tipFmt = valFmt, label = "Trend" } = opts;
+ const W = 760, H = 200;
+ const m = { l: 56, r: 18, t: 16, b: 34 };
+ const iw = W - m.l - m.r, ih = H - m.t - m.b;
+ const data = (rows || []).filter((r) => isFinite(r[valueKey]));
+ if (data.length === 0) return emptyChart(W, H, `${label} — no data`);
+
+ const yMax = niceMax(Math.max(...data.map((r) => r[valueKey]), 1) * 1.02, 4);
+ const n = data.length;
+ const cx = (i) => m.l + ((i + 0.5) / n) * iw;
+ const y = (v) => m.t + ih - (v / yMax) * ih;
+
+ let g = yAxisGrid(m, W, ih, yMax, 4, valFmt);
+ const pts = data.map((r, i) => `${cx(i)},${y(r[valueKey])}`);
+ const base = m.t + ih;
+ g += `${esc(fmtMonth(r.Month))}\n${tipFmt(r[valueKey])} ${esc(fmtMonth(mo))} `;
+ }
+ });
+ // baseline (dashed) + cost line
+ const base = rows.map((r, i) => `${x(i)},${y(r.Baseline || 0)}`).join(" L");
+ g += `${esc(String(r.Day).slice(0, 10))}\n${fmtMoneyFull(r.Cost)} (${up ? "spike" : "drop"})\nbaseline ${fmtMoneyFull(r.Baseline)} ${esc(fmtMonth(r.Month))}\n${v > 0 ? "+" : ""}${v.toFixed(1)}% ${esc(fmtMonth(r.Month))}\n${isFc ? "forecast " + fmtMoneyFull(r.Forecast) : "actual " + fmtMoneyFull(r.Actual)}
+ ${esc(title)}
+ ${display}
+ ${badge}
+ ${esc(cue)}
+ `;
+}
+
+function renderTriageStrip(d) {
+ // Anomalies: reuse anomaly tab cache when loaded (use same cache key for consistency)
+ const anomPayload = state.cache["anomaly"]?.[cacheKey()];
+ const daily = anomPayload?.data?.daily || [];
+ const anomCount = anomPayload ? daily.filter((r) => r.Flag !== 0).length : null;
+ const anomCue = anomCount === null ? "Visit Anomalies & forecast tab to load"
+ : anomCount === 0 ? "No anomalies detected"
+ : "Review flagged cost days";
+
+ // Overspend: months in trend where effective cost rose >20% vs prior month
+ const trend = d.trend || [];
+ let overspendCount = 0;
+ for (let i = 1; i < trend.length; i++) {
+ const prev = trend[i - 1].Effective || 0;
+ const curr = trend[i].Effective || 0;
+ if (prev > 0 && curr > prev * 1.20) overspendCount++;
+ }
+ const overspendCue = overspendCount === 0
+ ? "Spend within expected range"
+ : `${overspendCount} month${overspendCount === 1 ? "" : "s"} with >20% spike`;
+
+ // Savings opportunities: underutilized commitments from rate tab cache when loaded
+ const ratePayload = state.cache["rate"]?.[cacheKey()];
+ const byCommitment = ratePayload?.data?.byCommitment || [];
+ const savingsCount = ratePayload ? byCommitment.filter((r) => (r.Unused || 0) > 0).length : null;
+ const savingsCue = savingsCount === null ? "Visit Rate optimization tab to load"
+ : savingsCount === 0 ? "Commitments fully utilized"
+ : "Underutilized commitments found";
+
+ return `
+ ${buildTriageTile("Anomalies", anomCount, anomCue, "anomaly")}
+ ${buildTriageTile("Overspend", overspendCount, overspendCue, "usage")}
+ ${buildTriageTile("Savings Opportunities", savingsCount, savingsCue, "rate")}
+
`;
+}
+
+function isPartialMonth() {
+ const now = new Date();
+ return now.getDate() < new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
+}
+
+const KPI_TIPS = {
+ "Untagged cost": "% of spend on resources missing tags. Target: <10% · Review: <25% · Urgent: ≥25%. Tagging enables accurate showback and chargeback.",
+ "Commitment waste": "% of RI/savings-plan spend on unused capacity. Target: <10% · Review: <20% · Urgent: ≥20%. Idle commitments erode net savings.",
+ "Effective savings rate": "Negotiated + commitment savings as % of list price. Higher = better. Enterprise customers typically target ≥15–20%.",
+ "Commitment coverage": "Compute spend covered by RIs or savings plans. Target: ≥60% for steady workloads. Higher coverage → lower effective rate.",
+ "Compute coverage": "On-demand core-hours offset by commitments. Target: ≥60%. Tracks whether savings plan scope is sufficient.",
+ "Anomaly days": "Days where daily cost deviated significantly from the expected baseline (STL decomposition). Review flagged dates for unexpected spend.",
+ "Hourly cost / core": "Compute effective cost per core-hour actually consumed this period — the real, paid-for unit rate.",
+ "Effective cost / core": "Compute effective cost per core-hour, including unused commitment waste spread across usage — the fully-loaded unit cost if that waste is charged back.",
+ "Unpredicted variance": "Net effective cost variance between actual spend and the anomaly baseline on flagged days (FinOps KPI: Total Unpredicted Variance of Spend). Positive = spent more than expected.",
+ "Anomaly detection rate": "Effective cost on anomaly-flagged days as % of total effective spend (FinOps KPI: Anomaly Cost %). The day-count ratio shown alongside is a separate reference stat, not the derivation of this percentage.",
+ "Last month change": "Month-over-month % change in effective cost vs. the prior month. Watch for spikes or drops that don't match expected seasonality.",
+ "Forecast next month": "Projected effective cost for next month using time-series decomposition (FinOps KPI: Cost Forecasting). Based on historical trend + seasonality, not a guarantee.",
+ "Visibility delay": "Median (P50) delay between when cost was incurred and when it appeared in the FinOps hub (FinOps KPI: Cost Visibility Delay). On local/demo data without a live Cost Management connector, a large delay is expected.",
+ "Tag policy compliance": "% of effective cost on resources with all required tag keys present and non-empty (FinOps KPI: Tagging Policy Compliance).",
+ "Subscriptions": "Distinct subscriptions (billing accounts) with cost activity in the selected period.",
+ "Allocated cost": "Effective cost with ownership attribution — a cost center, owner, or ownership tag — the complement of Unallocated cost.",
+};
+
+function kpiCard(label, value, meta, accent, thresholdClass, tier) {
+ // Hierarchy tier is now explicitly assigned by each tab's render*() call
+ // site (via the 6th `tier` argument) rather than an incomplete global
+ // label allow-list, so every tab consciously designates its own hero
+ // metric. `accent` is kept for call-site compatibility but unused.
+ const hierarchyClass = tier === "primary" ? "kpi--primary" : tier === "reference" ? "kpi--reference" : "";
+
+ // Combine threshold and hierarchy classes
+ const classArray = [thresholdClass, hierarchyClass].filter(Boolean);
+ const cls = classArray.length > 0 ? ` ${classArray.join(" ")}` : "";
+
+ const tip = KPI_TIPS[label];
+ const tipHtml = tip ? ` ? ` : "";
+
+ return `
+
${esc(label)}${tipHtml}
+
${value}
+
${meta}
+
${sub}
` : "";
+ return ``;
+}
+
+function openKqlDialog(panelId) {
+ _kqlPanelId = panelId;
+ // Prefer the query the server actually executed for this panel; fall back to
+ // the static map for tabs that don't publish their queries yet.
+ const served = currentPayload()?.kql?.[PANEL_QUERY[panelId]];
+ el("kql-text").value = served || PANEL_KQL[panelId] || "";
+ el("kql-error").textContent = "";
+ const prev = document.getElementById("kql-result");
+ if (prev) prev.remove();
+ el("kql-dialog").showModal();
+}
+
+async function executeKql() {
+ const kql = el("kql-text").value.trim();
+ const errEl = el("kql-error");
+ const runBtn = el("kql-run");
+ if (!kql) return;
+ errEl.textContent = "";
+ const prev = document.getElementById("kql-result");
+ if (prev) prev.remove();
+ runBtn.disabled = true;
+ runBtn.textContent = "Running…";
+ try {
+ const res = await fetch("/api/kql", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ kql }),
+ });
+ if (!res.ok) { errEl.textContent = `Server error ${res.status}`; return; }
+ const data = await res.json();
+ if (data.error) {
+ errEl.textContent = data.error;
+ } else {
+ const rows = data.rows || [];
+ if (!rows.length) {
+ errEl.textContent = "Query returned no rows.";
+ } else {
+ el("kql-dialog").close();
+ renderKqlResultInPanel(_kqlPanelId, rows);
+ }
+ }
+ } catch (err) {
+ errEl.textContent = "Request failed: " + err.message;
+ } finally {
+ runBtn.disabled = false;
+ runBtn.textContent = "Run";
+ }
+}
+
+function renderKqlResultInPanel(panelId, rows) {
+ const panelBody = document.querySelector(`[data-panel-id="${panelId}"] .panel-body`);
+ if (!panelBody) return;
+ const cols = Object.keys(rows[0]);
+ const head = cols.map((c) => `${esc(c)} `).join("");
+ const body = rows.slice(0, 200).map((r) =>
+ `${cols.map((c) => `${esc(String(r[c] ?? ""))} `).join("")} `
+ ).join("");
+ panelBody.innerHTML = `${rows.length} rows${rows.length > 200 ? " (showing first 200)" : ""}
`;
+}
+
+function renderOverview(p) {
+ const content = el("content");
+ if (!p) return;
+ if (p.error) return renderError(p);
+ if (p.empty) {
+ content.innerHTML = `No cost data The Hub database has no rows yet. Ingest cost data, then refresh.
partial month ` : "";
+ const kpis = [
+ // primary KPIs first
+ kpiCard("Untagged cost", fmtPct(k.untaggedPct),
+ `${fmtMoney(k.untagged)} on untagged resources`, PALETTE[3],
+ kpiThreshold(k.untaggedPct, 0.10, 0.25), "primary"),
+ // supporting KPIs
+ kpiCard("Effective cost", fmtMoney(k.eff), `Billed ${fmtMoney(k.billed)}`, PALETTE[0]),
+ kpiCard("Total savings", fmtMoney(k.savings),
+ `${fmtPct(k.esr)} effective savings rate`, PALETTE[1]),
+ // reference KPIs
+ kpiCard("Commitment coverage", fmtPct(k.coverage),
+ `${fmtMoney(k.committed)} of compute spend`, PALETTE[5], undefined, "reference"),
+ // supporting KPIs
+ kpiCard("Tracked resources", fmtInt(k.resources),
+ `${fmtInt(k.services)} services · ${fmtInt(k.subscriptions)} subs · ${fmtInt(k.regions)} regions`, PALETTE[2]),
+ kpiCard("Latest month", k.lastMonthVal == null ? "—" : fmtMoney(k.lastMonthVal),
+ k.mom == null ? (k.lastMonthLabel ? `${esc(k.lastMonthLabel)}${partialHtml}` : (isPartialMonth() ? `partial month ` : "")) : `${momTxt} vs prior · ${esc(k.lastMonthLabel)}${partialHtml}`, PALETTE[4]),
+ ].join("");
+
+ const d = p.data;
+ const html = `
+ ${renderTriageStrip(d)}
+ ${kpis}
+
+
Understand usage & cost FinOps Framework
+
+ ${panelHtml("overview-trend", 12, "Monthly cost trend", "Billed vs effective cost by month — executive run-rate view.", lineChart(d.trend))}
+ ${panelHtml("overview-top-services", 6, "Top services by cost", "Effective cost by Azure service.", hbar(d.topServices, "ServiceName", "Cost", { label: "Top services by cost" }))}
+ ${panelHtml("overview-service-category", 6, "Cost by service category", "Where spend concentrates across categories.", hbar(d.serviceCategory, "ServiceCategory", "Cost", { label: "Cost by service category" }))}
+
+
+
Optimize usage & cost FinOps Framework
+
+ ${panelHtml("overview-top-rgs", 6, "Top resource groups", "Largest cost owners for allocation & accountability.", hbar(d.topResourceGroups, "x_ResourceGroupName", "Cost", { label: "Top resource groups" }))}
+ ${panelHtml("overview-top-regions", 6, "Cost by region", "Regional spend for placement & sustainability review.", hbar(d.topRegions, "RegionId", "Cost", { label: "Cost by region" }))}
+
+
+
Quantify business value FinOps Framework
+
+ ${panelHtml("overview-rate-coverage", 4, "Rate coverage", "Committed vs on-demand (standard) effective cost.", donut([
+ { label: "Committed", value: k.committed, color: PALETTE[1] },
+ { label: "On-demand", value: Math.max(0, k.eff - k.committed), color: PALETTE[0] },
+ ], { centerBig: fmtPct(k.coverage), centerSmall: "covered", label: "Rate coverage" }))}
+ ${panelHtml("overview-savings", 4, "Savings breakdown", "List → effective, by discount type.", savingsTable(k))}
+ ${panelHtml("overview-cost-allocation", 4, "Cost allocation", "Tagged vs untagged effective cost.", donut([
+ { label: "Tagged", value: k.tagged, color: PALETTE[1] },
+ { label: "Untagged", value: k.untagged, color: UNKNOWN_COLOR, isUnknown: true },
+ ], { centerBig: fmtPct(1 - k.untaggedPct), centerSmall: "tagged", label: "Cost allocation" }))}
+
+ `;
+ content.innerHTML = html;
+}
+
+function savingsTable(k) {
+ return costBreakdownTable([
+ { label: "List cost", val: k.list, accent: "var(--muted)" },
+ { label: "Negotiated savings", val: k.negotiated, accent: PALETTE[8] },
+ { label: "Commitment savings", val: k.commitment, accent: PALETTE[1] },
+ { label: "Effective cost", val: k.eff, accent: PALETTE[0] },
+ ], "Effective savings rate", fmtPct(k.esr));
+}
+
+/* ----------------------------------------------------- tokenomics render */
+
+function deriveTokenKpis(d) {
+ const s = d.summary?.[0] || {};
+ const tokens = s.Tokens || 0, eff = s.Effective || 0;
+ const cloud = d.totalCloud?.[0]?.Effective || 0;
+ const dir = Object.fromEntries((d.direction || []).map((r) => [r.Direction, r]));
+ const inTok = dir["Input"]?.Tokens || 0;
+ const cachedTok = dir["Cached input"]?.Tokens || 0;
+ const cachedShare = inTok + cachedTok > 0 ? cachedTok / (inTok + cachedTok) : 0;
+ return {
+ tokens, eff, cloud,
+ blendedPer1K: tokens > 0 ? eff / tokens * 1000 : 0,
+ cachedShare,
+ aiShare: cloud > 0 ? eff / cloud : 0,
+ models: s.Models || 0,
+ resources: s.Resources || 0,
+ };
+}
+
+function renderTokenomics(p) {
+ const content = el("content");
+ if (!p) return;
+ if (p.error) return renderError(p);
+ if (p.empty) {
+ content.innerHTML = `No AI token data
+
No Azure OpenAI token meters were found in the Hub database for this period.
+
Tokenomics tracks meters where x_SkuMeterSubcategory contains “OpenAI” and the SKU is billed in tokens. Ingest Azure OpenAI usage, then refresh.
${fmtPct(k.cachedShare)} of input tokens cached`, PALETTE[1]),
+ kpiCard("AI resources", fmtInt(k.resources), `Azure OpenAI deployments`, PALETTE[4]),
+ kpiCard("Models in use", fmtInt(k.models), `distinct model families`, PALETTE[8]),
+ ].join("");
+
+ content.innerHTML = `
+ ${kpis}
+
+
AI token economics Token Consumption Metrics KPI
+
+ ${panelHtml("token-trend", 12, "Token volume & AI cost trend", "Monthly token consumption (bars) and effective AI cost (line).", tokenTrendChart(d.trend))}
+ ${panelHtml("token-by-model", 6, "AI cost by model", "Effective cost per model family.",
+ hbar((d.models || []).map((m) => ({ Model: m.Model, Cost: m.Cost })), "Model", "Cost", { label: "AI cost by model" }))}
+ ${panelHtml("token-direction", 6, "Token direction mix", "Input vs cached input vs output — by token volume.",
+ donut(dirSlices, {
+ centerBig: fmtTokens(k.tokens), centerSmall: "tokens",
+ valueFmt: (s) => `${fmtTokens(s.value)} · ${fmtMoney(s.cost)}`,
+ label: "Token direction mix",
+ }))}
+
+
+
Model efficiency Rate & usage optimization
+
+ ${panelHtml("token-model-table", 12, "Cost per 1M tokens by model", "Unit economics for model selection — sorted by effective cost.", tokenModelTable(d.models, k.eff))}
+
+
+
AI cost allocation Showback & chargeback
+
+ ${panelHtml("token-by-app", 12, "AI cost by application", "Azure OpenAI effective cost and token volume by application, team, environment, and cost center.", aiByAppTable(d.byApplication))}
+
+ `;
+}
+
+function tokenModelTable(models, totalCost) {
+ const rows = (models || []).filter((m) => (m.Tokens || 0) > 0);
+ if (rows.length === 0) return `No token data in range.
`;
+ const maxPer1K = Math.max(...rows.map((m) => m.CostPer1K || 0), 1e-9);
+ const body = rows.map((m, i) => {
+ const color = PALETTE[i % PALETTE.length];
+ const share = totalCost > 0 ? (m.Cost || 0) / totalCost : 0;
+ const barW = Math.max(2, ((m.CostPer1K || 0) / maxPer1K) * 90);
+ return `
+ ${swatchHtml(color)}${esc(m.Model)} ${fmtTokens(m.Tokens)}
+ ${fmtMoneyFull(m.Cost)}
+ ${fmtPerM(m.CostPer1K)}
+ ${fmtPct(share)}
+ `;
+ }).join("");
+ return `
+ Model Tokens Effective cost $ / 1M tokens % of AI cost ${body}
+
`;
+}
+
+function aiByAppTable(rows) {
+ const data = (rows || []).filter((r) => (r.EffectiveCost || 0) > 0);
+ if (data.length === 0) return `No tagged AI cost data. Tag Azure OpenAI resources with application, team, or environment tags.
`;
+ const totalCost = data.reduce((a, r) => a + (r.EffectiveCost || 0), 0);
+ const untaggedCount = data.filter((r) => !r.Application).length;
+ const callout = untaggedCount === data.length
+ ? `⚠ 100% of AI cost (${fmtMoney(totalCost)}) is untagged — no application-level chargeback is currently possible. Tag Azure OpenAI resources with an application tag to enable it.
`
+ : "";
+ return callout + `
+ Application Team Environment Cost center Tokens Effective cost $/1M tokens % of AI ${data.map((r, i) => {
+ const share = totalCost > 0 ? (r.EffectiveCost || 0) / totalCost : 0;
+ const isUnknown = !r.Application;
+ const color = PALETTE[i % PALETTE.length];
+ return `
+ ${swatchHtml(color, isUnknown)}${esc(r.Application || "(untagged)")}
+ ${esc(r.Team || "—")}
+ ${esc(r.Environment || "—")}
+ ${esc(r.CostCenter || "—")}
+ ${fmtTokens(r.TokenCount)}
+ ${fmtMoney(r.EffectiveCost)}
+ ${fmtPerM(r.CostPer1KTokens)}
+ ${fmtPct(share)}
+ `;
+ }).join("")}
+
`;
+}
+
+function foundryAccountLabel(account) {
+ return `${account.name} · ${account.location} · ${account.resourceGroup}`;
+}
+
+function foundryPriceMetadata(payload) {
+ const summary = payload.data.summary;
+ const billingScopeNote = "Prices can't be estimated for AI resources outside this Hub's billing scope.";
+ if (payload.pricing?.status === "unavailable") {
+ return `Hub Prices() unavailable. Operational metrics are unaffected; no cost estimate was calculated. ${billingScopeNote}`;
+ }
+ if (payload.pricing?.status === "partial") {
+ return `Partial Hub Prices() coverage: ${fmtPct(summary.PriceCoverage)} of estimated tokens. ${billingScopeNote}`;
+ }
+ if (payload.pricing?.status === "empty") {
+ return `No current or previous-month Hub token rates matched. Operational metrics are unaffected. ${billingScopeNote}`;
+ }
+ if (summary.PreviousMonthEstimatedTokens > 0) {
+ return `Provisional Hub estimate: ${fmtPct(summary.PriceCoverage)} coverage; ${fmtPct(summary.PreviousMonthPriceCoverage)} uses the previous month's price sheet. ${billingScopeNote}`;
+ }
+ return `Hub Prices() estimate: ${fmtPct(summary.PriceCoverage)} token coverage. Costs() remains authoritative for billed and effective cost. ${billingScopeNote}`;
+}
+
+function foundryTiles(tiles, unit, currency) {
+ const data = tiles || [];
+ if (!data.length) return `—
`;
+ return `${data.map((tile, index) => {
+ const tileValue = tile.EstimatedCost ?? tile.Value;
+ const tileLabel = tile.Model ?? tile.Name;
+ const value = unit === "currency"
+ ? fmtCurrency(tileValue, tile.Currency || currency)
+ : foundryValue(tileValue, unit);
+ const hasCostCompanion = unit !== "currency" && "EstimatedCost" in tile;
+ const companion = tile.EstimatedCost == null
+ ? "Estimated cost —"
+ : `Estimated cost ${fmtCurrency(tile.EstimatedCost, tile.Currency || currency)}`;
+ const coverage = tile.PriceCoverage != null && tile.PriceCoverage < 1
+ ? ` · ${fmtPct(tile.PriceCoverage)} priced`
+ : "";
+ return `
+ ${esc(tileLabel)}
+ ${esc(value)}
+ ${hasCostCompanion ? `${esc(companion + coverage)} ` : ""}
+
`;
+ }).join("")}
+
+ ${body}
+ ${footer ? `${esc(footer)}
` : ""}
+ `;
+}
+
+function foundryChartOptions(panel) {
+ const calculations = {
+ 2: ["Sum", "Mean", "Max"],
+ 16: ["Sum", "Max"],
+ 7: ["Mean", "Max", "Last"],
+ 17: ["Mean", "Max", "Last"],
+ 4: ["Sum", "Mean", "Max"],
+ 5: ["Sum", "Mean", "Max"],
+ 8: ["Sum", "Mean", "Max"],
+ 14: ["Mean", "Max", "Last"],
+ };
+ return {
+ title: panel.title,
+ unit: panel.unit,
+ style: panel.style === "bars" ? "bars" : "lines",
+ fillOpacity: (Number(panel.fillOpacity) || 0) / 100,
+ calculations: calculations[panel.id] || ["Mean", "Max", "Last"],
+ companion: [4, 5, 8].includes(panel.id) ? { label: "Estimated cost" } : null,
+ };
+}
+
+function agentAuthoritativeCostSummary(costs = []) {
+ if (!costs.length) return "—";
+ return costs.map((cost) => fmtCurrency(cost.BilledCost, cost.BillingCurrency)).join(" · ");
+}
+
+function agentTimestamp(value) {
+ const date = new Date(value || "");
+ if (!Number.isFinite(date.getTime())) return "—";
+ return `${esc(fmtRelativeTime(date))} `;
+}
+
+function foundryScopeToolbar(payload, label) {
+ const accountOptions = [
+ `Entire estate · ${fmtInt(payload.accounts.length)} Foundry resources `,
+ ...payload.accounts.map((account) =>
+ `${esc(foundryAccountLabel(account))} `
+ ),
+ ].join("");
+ const presetButtons = [
+ ["24h", "24H"],
+ ["7d", "7D"],
+ ["30d", "30D"],
+ ["93d", "93D"],
+ ].map(([id, text]) =>
+ `${text} `
+ ).join("");
+ return ``;
+}
+
+function agentTrendSeries(rows, valueField, nameField = "AgentName") {
+ const series = new Map();
+ for (const row of rows || []) {
+ const bucket = row.BucketStart;
+ if (!bucket) continue;
+ const name = String(row[nameField] || "All agents");
+ const current = series.get(name) || new Map();
+ current.set(bucket, (current.get(bucket) || 0) + Number(row[valueField] || 0));
+ series.set(name, current);
+ }
+ return [...series].map(([Name, points]) => ({
+ Name,
+ Points: [...points].map(([Bucket, Value]) => ({ Bucket, Value }))
+ .sort((left, right) => left.Bucket.localeCompare(right.Bucket)),
+ }));
+}
+
+function agentTokenTrendSeries(rows) {
+ const components = [
+ ["Uncached input tokens", "UncachedInputTokens", "UncachedInputCost"],
+ ["Cached input tokens", "CachedInputTokens", "CachedInputCost"],
+ ["Output tokens", "OutputTokens", "OutputCost"],
+ ];
+ return components.map(([Name, tokenField, costField]) => {
+ const buckets = new Map();
+ for (const row of rows || []) {
+ const current = buckets.get(row.BucketStart) || {
+ Value: 0,
+ Cost: 0,
+ HasCost: false,
+ Currencies: new Set(),
+ };
+ const tokens = tokenField === "UncachedInputTokens"
+ ? Math.max(0, Number(row.InputTokens || 0) - Number(row.CachedInputTokens || 0))
+ : Number(row[tokenField] || 0);
+ current.Value += tokens;
+ if (row[costField] != null) {
+ current.Cost += Number(row[costField]);
+ current.HasCost = true;
+ if (row.Currency) current.Currencies.add(row.Currency);
+ }
+ buckets.set(row.BucketStart, current);
+ }
+ return {
+ Name,
+ Points: [...buckets].map(([Bucket, bucket]) => ({
+ Bucket,
+ Value: bucket.Value,
+ Cost: bucket.HasCost && bucket.Currencies.size <= 1 ? bucket.Cost : null,
+ Currency: bucket.Currencies.size === 1 ? [...bucket.Currencies][0] : null,
+ }))
+ .sort((left, right) => left.Bucket.localeCompare(right.Bucket)),
+ };
+ });
+}
+
+function agentDailyCostSeries(rows) {
+ return agentTrendSeries((rows || []).map((row) => ({
+ ...row,
+ BucketStart: row.BucketStart ? `${String(row.BucketStart).slice(0, 10)}T00:00:00Z` : null,
+ })), "EstimatedCost");
+}
+
+function agentPanel(title, body, wide = false, note = "") {
+ return `
+
+ ${body}
+ ${note ? `${esc(note)}
` : ""}
+ `;
+}
+
+function agentEstimatedComponent(row, field) {
+ return row?.[field] == null ? "—" : fmtCurrency(row[field], row.Currency);
+}
+
+function renderFoundry(payload) {
+ const content = el("content");
+ if (!payload) return;
+ if (payload.error) return renderError(payload);
+ if (payload.empty) {
+ content.innerHTML = `No AI Foundry resources Azure Resource Graph found no accessible Cognitive Services accounts in the configured tenant.
${panels}
+ `;
+}
+
+function renderAgents(payload) {
+ const content = el("content");
+ if (!payload) return;
+ if (payload.error) return renderError(payload);
+ const summary = payload.summary || {};
+ const estimate = summary.EstimatedCost == null
+ ? "—"
+ : fmtCurrency(summary.EstimatedCost, summary.Currency);
+ const agentRows = payload.agents || [];
+ const tokenRows = payload.charts?.tokens || [];
+ const costRows = payload.charts?.estimatedCost || [];
+ const latencyRows = payload.charts?.latency || [];
+ const operationsRows = payload.charts?.throughput || [];
+ const successRows = payload.charts?.success || [];
+ const costSeries = agentDailyCostSeries(costRows);
+ const resultSeries = [
+ ...agentTrendSeries(successRows, "Successes").map((row) => ({ ...row, Name: `${row.Name} · success` })),
+ ...agentTrendSeries(successRows, "Errors").map((row) => ({ ...row, Name: `${row.Name} · errors` })),
+ ];
+ const kpis = [
+ [estimate, "Estimated run cost", `Prices() · ${fmtPct(summary.PriceCoverage || 0)} coverage`],
+ [agentAuthoritativeCostSummary(summary.AuthoritativeCosts), "Authoritative billed cost", "Exact Costs() matches only"],
+ [fmtInt(summary.Operations || 0), "Agent operations", `${fmtInt(summary.AgentCount || 0)} discovered agents`],
+ [fmtPct(summary.SuccessRate || 0), "Success rate", `${fmtInt(summary.Errors || 0)} errors`],
+ [foundryValue(summary.AverageLatencyMs || 0, "ms"), "Average run latency", "Invoke-agent spans"],
+ [fmtInt(Math.max(0, Number(summary.InputTokens || 0) - Number(summary.CachedInputTokens || 0))),
+ "Uncached input tokens", `Estimated ${agentEstimatedComponent(summary, "UncachedInputCost")}`],
+ [fmtInt(summary.CachedInputTokens || 0), "Cached input tokens",
+ `Estimated ${agentEstimatedComponent(summary, "CachedInputCost")} · ${fmtPct(summary.CacheRate || 0)} of input`],
+ [fmtInt(summary.OutputTokens || 0), "Output tokens",
+ `Estimated ${agentEstimatedComponent(summary, "OutputCost")}`],
+ ].map(([value, label, meta]) => `${esc(value)} ${esc(label)} ${esc(meta)}
`).join("");
+
+ const agentTable = agentRows.length
+ ? ``
+ : `No Foundry agent telemetry No Foundry agent identity was found in the selected scope and time range.
`;
+
+ const modelTable = (payload.models || []).length
+ ? ``
+ : `No chat model usage Chat spans did not report model and token fields.
`;
+
+ const finishTable = (payload.finishReasons || []).length
+ ? `Finish reason Agent Chats ${payload.finishReasons.slice(0, 12).map((row) => `${nameCell(row.FinishReason, 32)}
+ ${nameCell(row.AgentName || row.AgentKey, 28)} ${fmtInt(row.Count)}
`
+ : `No finish reasons This field wasn't reported by chat spans.
`;
+ const toolTable = (payload.tools || []).length
+ ? `Tool Agent Calls Errors Average latency ${payload.tools.slice(0, 15).map((row) => `${nameCell(row.ToolName, 30)}
+ ${nameCell(row.AgentName || row.AgentKey, 26)} ${fmtInt(row.Calls)}
+ ${fmtInt(row.Errors)} ${foundryValue(row.AverageLatencyMs, "ms")}
`
+ : `No tool spans No execute_tool operations were reported.
`;
+
+ const recentRuns = (payload.recentRuns || []).length
+ ? ``
+ : `No recent runs No invoke_agent operations were reported.
`;
+
+ const recentErrors = (payload.recentErrors || []).length
+ ? ``
+ : `No recent errors No failed invoke_agent operations were found.
`;
+
+ content.innerHTML = `
+ ${foundryScopeToolbar(payload, "Agent telemetry scope")}
+
+ Estimated run cost uses trace token usage and Hub Prices() rates. Authoritative billed cost is shown separately only for exact Costs() resource matches.
+
+ ${agentPanel("Token consumption over time", foundryMetricChart(agentTokenTrendSeries(tokenRows), {
+ title: "Token consumption over time", unit: "short", style: "bars", fillOpacity: 0.58, calculations: ["Sum", "Mean", "Max"],
+ companion: { label: "Estimated cost" },
+ }))}
+ ${agentPanel("Daily estimated run cost", foundryMetricChart(costSeries, {
+ title: "Daily estimated run cost", unit: "currency", style: "bars", fillOpacity: 0.65, calculations: ["Sum", "Mean", "Max"],
+ }), false, "Price-sheet estimate from chat token spans. This is not Costs().")}
+ ${agentPanel("Agent response time trends", foundryMetricChart(agentTrendSeries(latencyRows, "AverageLatencyMs"), {
+ title: "Agent response time trends", unit: "ms", style: "lines", fillOpacity: 0.14, calculations: ["Mean", "Max", "Last"],
+ }))}
+ ${agentPanel("Success, errors, and throughput", foundryMetricChart([
+ ...agentTrendSeries(operationsRows, "Operations"),
+ ...resultSeries,
+ ], {
+ title: "Success, errors, and throughput", unit: "short", style: "lines", fillOpacity: 0.12, calculations: ["Sum", "Mean", "Max"],
+ }))}
+ ${agentPanel("Agent performance", agentTable, true)}
+ ${agentPanel("Model, latency, and cache insights", modelTable, true)}
+ ${agentPanel("Chat finish reasons", finishTable)}
+ ${agentPanel("Tool usage leaderboard", toolTable)}
+ ${agentPanel("Recent runs", recentRuns, true)}
+ ${agentPanel("Recent errors", recentErrors, true)}
+
+ ${fmtInt(payload.workspaceCount || 0)} accessible workspaces queried. Every panel and control derives from the same cached tenant and time-range result.
+ `;
+}
+
+/* --------------------------------------------- AI & emerging workloads render */
+
+// Middle-ellipsis a cell value and expose the full string on hover, so long
+// meter and series names shorten predictably instead of overflowing the
+// `white-space: nowrap` table cells.
+function nameCell(value, n) {
+ // `??` alone lets an empty string through, which renders as a blank cell and
+ // reads as a rendering failure rather than as absent data.
+ const s = String(value ?? "").trim() || "—";
+ const short = trunc(s, n);
+ return short === s ? esc(s) : `${esc(short)} `;
+}
+
+// Wrap a table that can exceed its panel width. The first column stays pinned
+// while the numeric columns scroll, so a row never loses its label.
+function wideTable(html) {
+ return `${html}
`;
+}
+
+function aiCapabilityTable(rows, estate) {
+ const money = moneyColumn(rows, "Cost");
+ return wideTable(tableHtml([
+ { label: "Capability", align: "left", get: (r) =>
+ `${swatchHtml(aiColor(r.Capability))}${nameCell(r.Capability, 26)} ` },
+ { label: "Services", get: (r) => fmtInt(r.Services) },
+ { label: "Cost", get: (r) => money(r.Cost) },
+ { label: "Share", get: (r) => estate > 0 ? fmtShare(r.Cost / estate, 1) : "—" },
+ ], rows, "No AI/ML estate cost in range."));
+}
+
+function aiModelBenchTable(rows) {
+ const money = moneyColumn(rows, "Cost");
+ const rate = rateColumn(rows, "Cpmt");
+ return wideTable(tableHtml([
+ { label: "Model family", align: "left", get: (r) => nameCell(r.Family, 26) },
+ { label: "Tokens", get: (r) => fmtTokens(r.Tokens) },
+ { label: "Cost", get: (r) => money(r.Cost) },
+ { label: "$ / 1M tokens", get: (r) => rate(r.Cpmt) },
+ ], rows, "No foundation model token meters in range."));
+}
+
+function aiDirectionTable(rows) {
+ const rate = rateColumn(rows, "Cpmt");
+ const total = (rows || []).reduce((s, r) => s + (r.Tokens || 0), 0);
+ return wideTable(tableHtml([
+ { label: "Direction", align: "left", get: (r) => nameCell(r.Direction, 26) },
+ { label: "Tokens", get: (r) => fmtTokens(r.Tokens) },
+ { label: "Share", get: (r) => total > 0 ? fmtShare(r.Tokens / total, 1) : "—" },
+ { label: "$ / 1M tokens", get: (r) => rate(r.Cpmt) },
+ ], rows, "No foundation model token meters in range."));
+}
+
+export function deriveAiKpis(d, lastClosedMonth) {
+ const months = d.monthly || [];
+ const sum = (key) => months.reduce((s, r) => s + (r[key] || 0), 0);
+ const cloud = sum("Cloud"), estate = sum("Estate"), mlGpu = sum("MlGpu");
+ const tokens = sum("Tokens"), tokenCost = sum("TokenCost");
+
+ // Anchor month-over-month to the last *closed* month reported by the server.
+ // The newest month in the window is normally a partial ingestion month, and
+ // comparing it against a full month reports a collapse that isn't real.
+ const closedIdx = lastClosedMonth ? months.findIndex((r) => r.Month === lastClosedMonth) : -1;
+ const closed = closedIdx >= 0 ? months[closedIdx] : null;
+ const prior = closedIdx > 0 ? months[closedIdx - 1] : null;
+ const mom = closed && prior && prior.Estate > 0 ? (closed.Estate - prior.Estate) / prior.Estate : null;
+
+ const a = (d.allocation || [])[0] || {};
+ const allocTotal = a.Total || 0;
+ const appCoverage = allocTotal > 0 ? (a.App || 0) / allocTotal : null;
+
+ const posture = (d.posture || [])[0] || {};
+
+ return {
+ cloud, estate, mlGpu, tokens, tokenCost,
+ estateShare: cloud > 0 ? estate / cloud : 0,
+ mlGpuShare: estate > 0 ? mlGpu / estate : 0,
+ cpmt: tokens > 0 ? (tokenCost / tokens) * 1000000 : null,
+ mom, closedMonth: lastClosedMonth, hasClosedMonth: !!closed,
+ partialMonth: months.length > 0 && months[months.length - 1].Month !== lastClosedMonth
+ ? months[months.length - 1].Month : null,
+ alloc: a, allocTotal, appCoverage,
+ committedShare: posture.Total > 0 ? (posture.Committed || 0) / posture.Total : null,
+ recommendations: ((d.recommendations || [])[0] || {}).Count ?? 0,
+ transactions: ((d.transactions || [])[0] || {}).Count ?? 0,
+ };
+}
+
+function aiAllocationTable(k) {
+ const rows = [
+ { Dimension: "Application tag", Covered: k.alloc.App || 0 },
+ { Dimension: "Owner / team tag", Covered: k.alloc.Owner || 0 },
+ { Dimension: "Cost center", Covered: k.alloc.CostCenter || 0 },
+ { Dimension: "Resource group", Covered: k.alloc.ResourceGroup || 0 },
+ ];
+ if (k.allocTotal <= 0) return `No AI/ML estate cost in range.
`;
+ const money = moneyColumn(rows, "Covered");
+ return wideTable(tableHtml([
+ { label: "Dimension", align: "left", get: (r) => esc(r.Dimension) },
+ { label: "Covered cost", get: (r) => money(r.Covered) },
+ { label: "Coverage", get: (r) => {
+ const pct = r.Covered / k.allocTotal;
+ const cls = pct >= 0.85 ? "pos" : pct >= 0.65 ? "warn" : "neg";
+ return `${fmtShare(pct)} `;
+ } },
+ ], rows));
+}
+
+function aiPostureTable(k) {
+ // Counts are descriptive: a zero means no AI-scoped records were ingested,
+ // which is a different statement from "no opportunity exists".
+ const rows = [
+ {
+ Signal: "Commitment coverage",
+ Value: k.committedShare == null ? "—" : fmtPct(k.committedShare),
+ Note: k.committedShare ? "AI/ML estate cost on a commitment discount" : "No AI/ML spend is on a commitment discount",
+ },
+ {
+ Signal: "AI-scoped rate recommendations",
+ Value: fmtInt(k.recommendations),
+ Note: k.recommendations > 0 ? "Open recommendations touching AI/ML resource types" : "None ingested for AI/ML resource types",
+ },
+ {
+ Signal: "AI-scoped commitment transactions",
+ Value: fmtInt(k.transactions),
+ Note: k.transactions > 0 ? "Purchase or refund events matching AI/GPU descriptions" : "None ingested matching AI/GPU descriptions",
+ },
+ ];
+ return wideTable(tableHtml([
+ { label: "Signal", align: "left", get: (r) => esc(r.Signal) },
+ { label: "Value", get: (r) => r.Value },
+ { label: "Detail", align: "left", get: (r) => `${esc(r.Note)} ` },
+ ], rows));
+}
+
+function aiDriversTable(rows, k) {
+ const money = moneyColumn(rows, "Prev", "Cost");
+ const delta = moneyColumn(rows, "Change");
+ // Below half a cent the change is a rounding artefact, not a movement: format
+ // it as a flat zero so it can't render as a signed "-$0.00 (-0.0%)" and can't
+ // pick up a directional colour.
+ const EPS = 0.005;
+ return wideTable(tableHtml([
+ { label: "Service", align: "left", get: (r) => nameCell(r.Service, 26) },
+ { label: "Meter", align: "left", get: (r) => nameCell(r.Meter, 26) },
+ { label: "Prior month", get: (r) => money(r.Prev) },
+ { label: k.closedMonth ? fmtMonth(k.closedMonth) : "Latest month", get: (r) => money(r.Cost) },
+ { label: "Change", get: (r) => {
+ const chg = Math.abs(r.Change || 0) < EPS ? 0 : r.Change;
+ const cls = chg > 0 ? "neg" : chg < 0 ? "pos" : "muted";
+ if (chg === 0) return `no change `;
+ // A zero baseline has no percentage; say so rather than leaving the
+ // cell ragged against the rows that carry one.
+ const pct = r.Prev > 0
+ ? ` (${chg > 0 ? "+" : ""}${fmtShare(chg / r.Prev, 1)})`
+ : ` (new)`;
+ return `${chg > 0 ? "+" : ""}${delta(chg)}${pct} `;
+ } },
+ ], rows, "No month-over-month movement in range."));
+}
+
+function renderAi(p) {
+ const content = el("content");
+ if (!p) return;
+ if (p.error) return renderError(p);
+ if (p.empty) {
+ content.innerHTML = `No AI or emerging workload data
+
No AI, machine learning, or GPU-accelerated spend was found in the Hub database for this period.
+
This view scopes to the AI and Machine Learning service category, Azure AI Search, Azure Databricks, and GPU VM series (NC/ND/NV/NG). Ingest cost data covering those workloads, then refresh.
${momTxt} vs prior · ${esc(fmtMonth(k.closedMonth))}`
+ : `${fmtPct(k.estateShare, 1)} of all cloud cost`;
+
+ const covCls = k.appCoverage == null ? undefined
+ : k.appCoverage >= 0.85 ? "threshold-green" : k.appCoverage >= 0.65 ? "threshold-amber" : "threshold-red";
+
+ const cpmtTrend = (d.monthly || [])
+ .filter((r) => (r.Tokens || 0) > 0)
+ .map((r) => ({ Month: r.Month, Cpmt: (r.TokenCost / r.Tokens) * 1000000 }));
+
+ const kpis = [
+ kpiCard("AI/ML estate spend", fmtMoney(k.estate), estateMeta, PALETTE[2], undefined, "primary"),
+ kpiCard("ML & GPU compute", fmtMoney(k.mlGpu), `${fmtPct(k.mlGpuShare, 1)} of AI/ML estate`, PALETTE[9]),
+ kpiCard("Token volume", fmtTokens(k.tokens), `${fmtMoney(k.tokenCost)} in token meters`, PALETTE[0]),
+ kpiCard("Cost per 1M tokens", k.cpmt == null ? "—" : fmtRate(k.cpmt),
+ k.cpmt == null ? "No token meters in range" : "Blended across all model families", PALETTE[5]),
+ kpiCard("AI allocation coverage", k.appCoverage == null ? "—" : fmtPct(k.appCoverage),
+ k.appCoverage == null ? "No AI/ML estate cost in range" : "Carrying an application tag",
+ PALETTE[3], covCls),
+ kpiCard("AI share of cloud", fmtPct(k.estateShare, 1), `${fmtMoney(k.estate)} of ${fmtMoney(k.cloud)}`, PALETTE[1], undefined, "reference"),
+ ].join("");
+
+ // One money scale per detail table, derived from that table's own maximum.
+ const mlGpuMoney = moneyColumn(d.mlGpu, "Cost");
+ const mlUnitMoney = moneyColumn(d.mlUnit, "Cost");
+ const mlUnitVmRate = rateColumn(d.mlUnit, "PerVmHour");
+ const mlUnitCoreRate = rateColumn(d.mlUnit, "Per1KCoreHours");
+ const searchMoney = moneyColumn(d.search, "Cost");
+ const cognitiveMoney = moneyColumn(d.cognitive, "Cost");
+
+ const partialNote = k.partialMonth
+ ? ` Month-over-month figures compare ${esc(fmtMonth(k.closedMonth))} against the month before it; ${esc(fmtMonth(k.partialMonth))} is still ingesting and is excluded from those comparisons.`
+ : "";
+
+ content.innerHTML = `
+ ${kpis}
+
+ This view scopes to the AI and Machine Learning service category plus Azure AI Search, Azure Databricks, and GPU VM series (NC/ND/NV/NG). GPU capacity bought outside those services — or AI work running on general-purpose compute — will not appear here.${partialNote}
+
+
AI/ML estate Workload composition
+
+ ${panelHtml("ai-capability-trend", 12, "AI spend by capability over time", "Monthly effective cost split across AI capability groups.", aiCapabilityChart(d.capabilityTrend))}
+ ${panelHtml("ai-capability", 6, "Estate composition", "Effective cost and distinct services per capability.", aiCapabilityTable(d.capability, k.estate))}
+ ${panelHtml("ai-by-service", 6, "Estate spend by service", "Top billing services in the AI/ML estate.",
+ hbar(d.byService, "Service", "Cost", { filterDim: "ServiceName", nameW: 210, color: PALETTE[2], label: "AI/ML estate spend by service" }))}
+
+
+
Token & model economics Unit economics
+
+ ${panelHtml("ai-token-demand", 6, "Token demand", "Monthly token volume across all foundation model meters.",
+ monthAreaChart(d.monthly, { valueKey: "Tokens", color: PALETTE[2], valFmt: fmtTokens, label: "Monthly token volume" }))}
+ ${panelHtml("ai-cpmt-trend", 6, "Cost per 1M tokens", "Blended effective rate — the direction of travel matters more than the level.",
+ monthAreaChart(cpmtTrend, { valueKey: "Cpmt", color: PALETTE[5], valFmt: axisRate, tipFmt: fmtRate, label: "Blended cost per 1M tokens" }))}
+ ${panelHtml("ai-model-bench", 6, "Model family benchmark", "Cost per 1M tokens by model family — the input to model selection.", aiModelBenchTable(d.modelBench))}
+ ${panelHtml("ai-direction", 6, "Token direction mix", "Input, cached input, output, and embedding meters.", aiDirectionTable(d.direction))}
+
+
+
Workload detail Compute, retrieval & applied AI
+
+ ${panelHtml("ai-ml-gpu", 12, "ML platform & GPU compute", "Components behind machine learning and accelerated compute spend.",
+ wideTable(tableHtml([
+ { label: "Component", align: "left", get: (r) => nameCell(r.Component, 28) },
+ { label: "Unit", align: "left", get: (r) => nameCell(r.Unit, 16) },
+ { label: "Quantity", get: (r) => fmtQty(r.Quantity) },
+ { label: "Cost", get: (r) => mlGpuMoney(r.Cost) },
+ ], d.mlGpu)))}
+ ${panelHtml("ai-search", 12, "AI Search / retrieval", "Azure AI Search meters supporting retrieval-augmented generation.",
+ wideTable(tableHtml([
+ { label: "Meter", align: "left", get: (r) => nameCell(r.Meter, 28) },
+ { label: "Unit", align: "left", get: (r) => nameCell(r.Unit, 16) },
+ { label: "Quantity", get: (r) => fmtQty(r.Quantity) },
+ { label: "Cost", get: (r) => searchMoney(r.Cost) },
+ ], d.search, "No Azure AI Search meters in range.")))}
+ ${panelHtml("ai-ml-unit", 6, "ML compute unit economics", "Effective rate per VM-hour and per 1K core-hours by VM series.",
+ wideTable(tableHtml([
+ { label: "Series", align: "left", get: (r) => nameCell(r.Series, 24) },
+ { label: "VM hours", get: (r) => fmtQty(r.VmHours) },
+ { label: "$ / VM-hour", get: (r) => mlUnitVmRate(r.PerVmHour) },
+ { label: "$ / 1K core-hours", get: (r) => mlUnitCoreRate(r.Per1KCoreHours) },
+ { label: "Cost", get: (r) => mlUnitMoney(r.Cost) },
+ ], d.mlUnit, "No ML virtual machine meters in range.")))}
+ ${panelHtml("ai-cognitive", 6, "Cognitive & applied AI", "Speech, vision, language, and video services, excluding token meters.",
+ wideTable(tableHtml([
+ { label: "Service", align: "left", get: (r) => nameCell(r.Service, 30) },
+ { label: "Quantity", get: (r) => fmtQty(r.Units) },
+ { label: "Cost", get: (r) => cognitiveMoney(r.Cost) },
+ ], d.cognitive, "No cognitive or applied AI meters in range.")))}
+
+
+
Allocation & posture Accountability & rate optimization
+
+ ${panelHtml("ai-allocation", 6, "Allocation coverage", "Share of AI/ML estate cost carrying each accountability dimension.", aiAllocationTable(k))}
+ ${panelHtml("ai-by-owner", 6, "Estate spend by owner", "Owner or team tag, falling back to cost center then resource group. Tag values are folded case-insensitively.",
+ hbar(d.byOwner, "Owner", "Cost", { filterDim: null, nameW: 210, color: PALETTE[2], label: "AI/ML estate spend by owner" }))}
+ ${panelHtml("ai-posture", 12, "Commitment & rate posture", "Whether AI/ML spend is on a commitment, and which AI-scoped rate signals were ingested.", aiPostureTable(k))}
+ ${panelHtml("ai-drivers", 12, "Top movers", `Largest AI/ML meters, ${k.closedMonth ? `${esc(fmtMonth(k.closedMonth))} against the month before it` : "latest month against the month before it"}.`, aiDriversTable(d.drivers, k))}
+
+ `;
+}
+
+/* --------------------------------------------- anomalies & forecast render */
+
+function renderAnomaly(p) {
+ const content = el("content");
+ if (!p) return;
+ if (p.error) return renderError(p);
+ if (p.empty) {
+ content.innerHTML = `No cost data The Hub database has no rows yet.
${mcArrow} ${fmtPct(Math.abs(lastMc.EffChangePct) / 100)} `;
+
+ const kpis = [
+ // reference KPIs first (no primaries in this tab)
+ kpiCard("Anomaly days", fmtInt(anomDays.length),
+ `${fmtMoney(anomCost)} on flagged days`, undefined, undefined, "reference"),
+ // supporting KPIs
+ kpiCard("Anomaly detection rate", fmtPct(rate, 2),
+ `% of effective spend on flagged days · ${fmtInt(anomDays.length)} of ${fmtInt(daily.length)} days flagged`, undefined),
+ kpiCard("Unpredicted variance", fmtMoney(variance),
+ `net spend vs baseline on anomaly days`, undefined),
+ kpiCard("Last month change", mcValue,
+ lastMc ? `effective cost · ${esc(fmtMonth(lastMc.Month))}` : "", undefined),
+ kpiCard("Forecast next month", nextFc ? fmtMoney(nextFc.Forecast) : "—",
+ nextFc ? `projected · ${esc(fmtMonth(nextFc.Month))}` : "", undefined),
+ kpiCard("Visibility delay", p50Days != null ? `${p50Days.toFixed(0)}d` : "—",
+ `median ingestion lag (P50)`, undefined),
+ ].join("");
+
+ const triageCallout = anomDays.length > 0
+ ? `⚠ ${fmtInt(anomDays.length)} anomal${anomDays.length === 1 ? "y day" : "y days"} detected — ${fmtMoney(anomCost)} in flagged spend. Review the chart below.
`
+ : "";
+
+ content.innerHTML = `
+ ${triageCallout}
+ ${kpis}
+
+
Cost anomalies Anomaly management capability
+
+ ${panelHtml("anomaly-daily", 12, "Daily cost & detected anomalies", "Daily effective cost vs the expected baseline (STL decomposition); markers flag spikes & drops.", anomalyChart(daily))}
+
+
+
Trend & forecast Forecasting · Data freshness
+
+ ${panelHtml("anomaly-mom", 6, "Month-over-month change", "Effective cost % change vs prior month (red = increase).", momBars(mc))}
+ ${panelHtml("anomaly-forecast", 6, "Cost forecast", "Monthly effective cost, actual vs forecast (next 3 months).", forecastChart(fc, dataMaxMonth))}
+
+ `;
+}
+
+/* ----------------------------------------------- usage & unit economics render */
+
+function renderUsage(p) {
+ const content = el("content");
+ if (!p) return;
+ if (p.error) return renderError(p);
+ if (p.empty) {
+ content.innerHTML = `No cost data The Hub database has no rows yet.
${swatchHtml(PALETTE[i % PALETTE.length])}${esc(r.type)} ` },
+ { label: "Resources", get: (r) => fmtInt(r.count) },
+ { label: "Effective cost", get: (r) => fmtMoneyFull(r.cost) },
+ { label: "% of total", get: (r) => fmtPct(r.pct) },
+ ], typeRows);
+
+ const tierColors = { "Frequent": PALETTE[1], "Infrequent": PALETTE[5], "Unclassified": UNKNOWN_COLOR };
+ const tierSlices = (d.storageTiers || []).map((r) => ({ label: r.Tier, value: r.Cost || 0, color: tierColors[r.Tier] || PALETTE[6], isUnknown: r.Tier === "Unclassified" }));
+ const freqShare = (() => {
+ const t = tierSlices.reduce((a, x) => a + x.value, 0);
+ const f = (d.storageTiers || []).find((r) => r.Tier === "Frequent");
+ return t > 0 ? (f?.Cost || 0) / t : 0;
+ })();
+
+ content.innerHTML = `
+ ${kpis}
+
+
Usage & unit economics Usage optimization · Unit economics
+
+ ${panelHtml("usage-top-types", 12, "Top resource types by cost", "Resource count and effective spend per resource type.", typeTable)}
+ ${panelHtml("usage-per-core-series", 6, "Compute cost per core by VM series", "Effective cost per vCPU-hour — highlights expensive (e.g. GPU) cores.",
+ hbar(d.perCoreSeries, "x_SkuMeterSubcategory", "PerCore", { valFmt: (v) => `$${v.toFixed(3)}`, label: "Compute cost per core by VM series" }))}
+ ${panelHtml("usage-storage-tiers", 6, `Storage tier distribution`, `Effective storage cost by access tier (${fmtPct(freqShare)} classified frequent).`,
+ donut(tierSlices, { centerBig: fmtMoney(s.Cost), centerSmall: "storage", label: "Storage tier distribution" }))}
+
+ `;
+}
+
+function renderRate(p) {
+ const content = el("content");
+ if (!p) return;
+ if (p.error) return renderError(p);
+ if (p.empty) {
+ content.innerHTML = `No cost data The Hub database has no rows yet.
${fmtMoney(s.Total)} total savings · vs. list price`, PALETTE[1], undefined, "primary"),
+ kpiCard("Commitment waste", fmtPct(waste),
+ `${fmtMoney(cm.Unused)} unused · of commitment spend`, PALETTE[3],
+ wasteThreshold, "primary"),
+ // supporting KPIs
+ kpiCard("Total savings", fmtMoney(s.Total),
+ `of ${fmtMoney(s.List)} list cost`, PALETTE[2]),
+ (() => {
+ const cusRow = (d.commitmentUtilScore || []).find((r) => r.CommitmentDiscountName === '(Grand Total)');
+ const cusScore = cusRow ? cusRow.Score / 100 : util;
+ return kpiCard("Commitment utilization", fmtPct(cusScore),
+ cusRow
+ ? `${fmtMoney(cusRow.Amount)} utilized of ${fmtMoney(cusRow.Potential)} potential`
+ : `${fmtMoney(cmTotal - (cm.Unused || 0))} of ${fmtMoney(cmTotal)} used`,
+ PALETTE[0]);
+ })(),
+ // reference KPIs
+ kpiCard("Compute coverage", fmtPct(coverage),
+ `compute spend on commitments`, PALETTE[5], undefined, "reference"),
+ // supporting KPIs
+ kpiCard("Committed core-hours", fmtPct(coreShare),
+ `RI + savings plan vs on-demand`, PALETTE[8], undefined, "reference"),
+ ].join("");
+
+ const savingsBreak = costBreakdownTable([
+ { label: "List cost (excl. commitment purchases)", val: s.List, accent: "var(--muted)" },
+ { label: "Negotiated savings", val: s.Negotiated, accent: PALETTE[8] },
+ { label: "Commitment savings", val: s.Commitment, accent: PALETTE[1] },
+ { label: "Effective cost", val: s.Effective, accent: PALETTE[0] },
+ ], "Effective savings rate", fmtPct(esr));
+
+ const coreColors = { "On Demand": PALETTE[0], "Reservation": PALETTE[1], "Savings Plan": PALETTE[4] };
+ const coreSlices = (d.coreHours || []).map((r) => ({ label: r.t, value: r.CoreHours || 0, color: coreColors[r.t] || PALETTE[6] }));
+
+ const underutilCount = (d.byCommitment || []).filter((r) => (r.Unused || 0) > 0).length;
+ const rateCallout = underutilCount > 0
+ ? `⚠ ${fmtInt(underutilCount)} underutilized commitment${underutilCount === 1 ? "" : "s"} found — ${fmtMoney(cm.Unused)} in unused spend. See the commitments panel below.
`
+ : "";
+
+ content.innerHTML = `
+ ${rateCallout}
+ ${kpis}
+
+
Rate optimization Rate optimization capability
+
+ ${panelHtml("rate-savings", 6, "Savings breakdown", "List → effective cost by discount type (effective savings rate).", savingsBreak)}
+ ${panelHtml("rate-commit-util", 6, "Commitment utilization", "Used vs unused commitment effective cost.",
+ donut([
+ { label: "Used", value: cmTotal - (cm.Unused || 0), color: PALETTE[1] },
+ { label: "Unused (waste)", value: cm.Unused || 0, color: PALETTE[3] },
+ ], { centerBig: fmtPct(util), centerSmall: "utilized", label: "Commitment utilization" }))}
+ ${panelHtml("rate-core-hours", 6, "Core-hour coverage", "Consumed core-hours by commitment type.",
+ donut(coreSlices, {
+ centerBig: fmtPct(coreShare), centerSmall: "committed",
+ valueFmt: (s) => `${fmtTokens(s.value)} core-hrs`,
+ label: "Core-hour coverage",
+ }))}
+ ${panelHtml("rate-underutil", 6, "Underutilized commitments", "Reservations & plans with the most unused cost.",
+ hbar(d.byCommitment, "CommitmentDiscountName", "Unused", { label: "Underutilized commitments" }))}
+
+
+
Commitment transactions Rate optimization · Commitment purchasing
+
+ ${panelHtml("rate-commit-score", 6, "Commitment utilization score", "Per-commitment utilization (used vs potential) from the formal CUS KPI.", commitUtilTable(d.commitmentUtilScore))}
+ ${panelHtml("rate-top-txns", 6, "Top commitment transactions", "Largest RI and savings plan purchases by billed cost. Effective cost is $0 by design — amortization credits the cost to the months the commitment is consumed, not the purchase month.", topCommitTxnTable(d.topCommitmentTxns))}
+
+ `;
+}
+
+function commitUtilTable(rows) {
+ const data = (rows || []).filter((r) => r.CommitmentDiscountName !== '(Grand Total)' && (r.Potential || 0) > 0);
+ if (data.length === 0) return `No commitment data in range.
`;
+ return `
+ Commitment Type Score Utilized Potential ${data.map((r) => {
+ const score = r.Score || 0;
+ const cls = score < 70 ? "neg" : score < 90 ? "warn" : "pos";
+ const barW = Math.max(2, (score / 100) * 90);
+ return `
+ ${esc(r.CommitmentDiscountName)}
+ ${esc(r.CommitmentDiscountType || r.CommitmentDiscountCategory || "")}
+ ${fmtPct(score / 100)} ${fmtMoney(r.Amount)}
+ ${fmtMoney(r.Potential)}
+ `;
+ }).join("")}
+
`;
+}
+
+function topCommitTxnTable(rows) {
+ const data = rows || [];
+ if (data.length === 0) return `No commitment transactions in range.
`;
+ return `
+ Commitment Type Billed cost Effective cost ${data.map((r) => `
+ ${esc(r.CommitmentDiscountName || "(unknown)")}
+ ${esc(r.CommitmentDiscountType || "")}
+ ${fmtMoney(r.BilledCost)}
+ ${fmtMoney(r.EffectiveCost)}
+ `).join("")}
+
`;
+}
+
+/* ----------------------------------------------------- allocation render */
+
+function renderAllocation(p) {
+ const content = el("content");
+ if (!p) return;
+ if (p.error) return renderError(p);
+ if (p.empty) {
+ content.innerHTML = `No cost data The Hub database has no rows yet.
directly attributed effective cost`, PALETTE[1]),
+ kpiCard("Unallocated cost", fmtPct(unallocPct),
+ `${fmtMoney(total - c.Attributed)} lacks ownership attribution`, PALETTE[4]),
+ kpiCard("Tag policy compliance", fmtPct(compliancePct),
+ `keys: CostCenter · env · org`, PALETTE[5]),
+ kpiCard("Subscriptions", fmtInt(c.Subs),
+ `billing scopes in range`, PALETTE[0]),
+ kpiCard("Allocated cost", fmtMoney(c.Attributed),
+ `of ${fmtMoney(total)} total`, PALETTE[2]),
+ ].join("");
+
+ const hierRows = (d.hierarchy || []).map((r) => ({
+ org: r.Org || "—", project: r.Project || "—", env: r.Env || "—", cost: r.Cost || 0,
+ pct: total > 0 ? (r.Cost || 0) / total : 0,
+ }));
+ const hierTable = tableHtml([
+ {
+ label: "Org", align: "left", get: (r, i) => {
+ const isUnknown = r.org === "—" && r.project === "—" && r.env === "—";
+ return `${swatchHtml(PALETTE[i % PALETTE.length], isUnknown)}${esc(r.org)} `;
+ },
+ },
+ { label: "Project", align: "left", get: (r) => esc(r.project) },
+ { label: "Environment", align: "left", get: (r) => esc(r.env) },
+ { label: "Effective cost", get: (r) => fmtMoneyFull(r.cost) },
+ { label: "% of total", get: (r) => fmtPct(r.pct) },
+ ], hierRows);
+
+ // Flag case-variant duplicate tag keys (e.g. "CostCenter" vs "costcenter")
+ // so the governance issue is called out, not hidden by treating them as
+ // separate keys.
+ const tagKeyRows = d.tagKeys || [];
+ const lowerCounts = {};
+ tagKeyRows.forEach((r) => { const lk = String(r.k).toLowerCase(); lowerCounts[lk] = (lowerCounts[lk] || 0) + 1; });
+ const dupKeys = tagKeyRows.filter((r) => lowerCounts[String(r.k).toLowerCase()] > 1).map((r) => r.k);
+ const tagKeyNote = dupKeys.length > 0
+ ? ` Note: ${dupKeys.map((k) => `${esc(k)}`).join(" vs ")} are case-variant duplicates of the same governance key — likely inconsistent tagging, not distinct keys.`
+ : "";
+
+ content.innerHTML = `
+ ${kpis}
+
+
Cost allocation Allocation capability
+
+ ${panelHtml("alloc-hierarchy", 8, "Cost by financial hierarchy", "Org → project → environment (from resource tags), with share of total.", hierTable)}
+ ${panelHtml("alloc-tagging", 4, "Tagging coverage", "Tagged vs untagged effective cost.",
+ donut([
+ { label: "Tagged", value: total - c.Untagged, color: PALETTE[1] },
+ { label: "Untagged", value: c.Untagged, color: UNKNOWN_COLOR, isUnknown: true },
+ ], { centerBig: fmtPct(1 - untaggedPct), centerSmall: "tagged", label: "Tagging coverage" }))}
+ ${panelHtml("alloc-tag-keys", 6, "Cost by tag key", `Effective cost touched by each governance tag.${tagKeyNote}`, hbar(d.tagKeys, "k", "Cost", { filterDim: null, label: "Cost by tag key" }))}
+ ${panelHtml("alloc-by-subscription", 6, "Cost by subscription", "Spend per billing scope for showback.", hbar(d.bySubscription, "SubAccountName", "Cost", { label: "Cost by subscription" }))}
+
+ `;
+}
+
+const CAPACITY_ACTIONS = Object.freeze({
+ "app-service": "Validate region access and SKU availability separately before requesting an exact SKU quota increase.",
+ "azure-ai": "Validate model availability, deployment scope, and actual capacity separately from the provider quota row.",
+ compute: "Check both total regional and applicable VM-family vCPU quota, then validate SKU, zone, and physical capacity separately.",
+ "azure-sql": "Use the exact SQL metric and service workflow. Validate region and zone-redundant access separately; do not treat countdown or negative-limit rows as generic utilization.",
+ storage: "Validate ingestion and expected subscription-region coverage before drawing a Storage quota conclusion.",
+ "capacity-reservations": "Inspect reservation quantity, SKU, zones, sharing, associations, and utilization in Azure; inventory count is not reserved capacity.",
+ "premium-ssd-v2": "Inspect disk zone, attachment, IOPS, throughput, and service quota separately; observed GiB is inventory, not quota.",
+});
+
+const CAPACITY_STATE_LABELS = Object.freeze({
+ healthy: "Healthy",
+ watch: "Watch",
+ action: "Action",
+ exhausted: "Exhausted",
+ restricted: "Region restricted",
+ "zone-restricted": "All zones restricted",
+ "no-entitlement": "No quota",
+ inventory: "Observed inventory",
+ unclassified: "Unknown or unclassified",
+ stale: "Stale",
+ invalid: "Invalid or conflict",
+});
+
+export function capacitySelectionFromRow(kind, classId, row) {
+ if (!row || typeof row !== "object") return null;
+ if (kind === "quota") {
+ if (classId === "capacity-reservations" || classId === "premium-ssd-v2") {
+ return { resourceId: String(row.ResourceId || "") };
+ }
+ return {
+ subAccountId: String(row.SubAccountId || ""),
+ location: String(row.location || ""),
+ resourceName: String(row.ResourceName || ""),
+ unit: String(row.unit || ""),
+ sourceVersion: String(row.x_SourceVersion || ""),
+ };
+ }
+ if (kind === "metric") {
+ return {
+ resourceName: String(row.ResourceName || ""),
+ unit: String(row.unit || ""),
+ sourceVersion: String(row.x_SourceVersion || ""),
+ };
+ }
+ const selection = {
+ meterCategory: String(row.x_SkuMeterCategory || ""),
+ meterSubcategory: String(row.x_SkuMeterSubcategory || ""),
+ meter: String(row.SkuMeter || ""),
+ priceId: String(row.SkuPriceId || ""),
+ currency: String(row.BillingCurrency || ""),
+ };
+ if (classId === "premium-ssd-v2") selection.resourceId = String(row.InventoryResourceId || "");
+ else selection.unit = String(row.ConsumedUnit || "");
+ if (classId === "capacity-reservations") {
+ selection.capacityReservationId = String(row.CapacityReservationId || "");
+ selection.capacityReservationStatus = String(row.CapacityReservationStatus || "");
+ }
+ return selection;
+}
+
+function sameCapacitySelection(left, right) {
+ return JSON.stringify(left || null) === JSON.stringify(right || null);
+}
+
+function capacityNavigationHtml() {
+ return `
+ ${CAPACITY_TABS.map((item) => {
+ const active = item.id === state.capacityClass;
+ return `${esc(item.label)} `;
+ }).join("")}
+ `;
+}
+
+function capacityPanel(title, subtitle, body, wide = false) {
+ return `
+ ${esc(title)} ${subtitle ? `${esc(subtitle)}
` : ""}${body}
+ `;
+}
+
+function capacityStateToken(semantic = {}) {
+ const stateName = semantic.state || "unclassified";
+ const label = CAPACITY_STATE_LABELS[stateName] || stateName;
+ return `${esc(label)} `;
+}
+
+function capacityHomeTable(classes) {
+ const rows = classes || [];
+ return ``;
+}
+
+function capacitySelectorHtml(kind, classId, items, currentSelection) {
+ const isDemand = kind === "demand";
+ const isMetric = kind === "metric";
+ const label = isDemand ? "Billed demand series" : isMetric ? "Quota metric" : "Quota or inventory series";
+ const options = (items || []).map((row, index) => {
+ const selection = capacitySelectionFromRow(kind, classId, row);
+ const selected = sameCapacitySelection(selection, currentSelection);
+ const display = isDemand
+ ? classId === "premium-ssd-v2"
+ ? `${row.DiskName || row.InventoryResourceId} · ${row.SkuMeter || "No matched cost"} · ${row.BillingCurrency || "—"}`
+ : `${row.SkuMeter || row.x_SkuMeterSubcategory || "Unknown meter"} · ${row.ConsumedUnit || "—"} · ${row.BillingCurrency || "—"}`
+ : isMetric
+ ? `${row.displayName || row.ResourceName || "Unknown metric"} · ${row.unit || "—"}`
+ : `${row.ResourceName || row.displayName || "Unknown"} · ${row.SubAccountId || "—"} · ${row.location || "—"}`;
+ const disabled = Object.values(selection || {}).some((value) => !value);
+ return `${esc(display)} `;
+ }).join("");
+ return `
+ ${esc(label)}
+
+ Select an exact ${isDemand ? "meter" : isMetric ? "metric" : "source"} key
+ ${options}
+
+ `;
+}
+
+function formatCapacityValue(value) {
+ const number = Number(value);
+ if (!Number.isFinite(number)) return "—";
+ return number.toLocaleString("en-US", { maximumFractionDigits: 2 });
+}
+
+function capacityCurrentTable(payload) {
+ const inventory = payload.contract?.quotaType === "inventory";
+ const rows = payload.table?.rows || [];
+ const columns = [
+ { label: "Subscription", align: "left", get: (row) => esc(trunc(row.SubAccountId || "—", 28)) },
+ { label: "Region", align: "left", get: (row) => esc(row.location || "—") },
+ { label: inventory ? "Resource" : "Metric", align: "left", get: (row) => `${esc(row.displayName || row.ResourceName || "—")} ` },
+ { label: inventory && payload.classId === "premium-ssd-v2" ? "Size GiB" : "Current", get: (row) => inventory && payload.classId === "capacity-reservations" ? "Observed" : formatCapacityValue(row.currentValue) },
+ { label: "Limit", get: (row) => inventory ? "Not applicable" : formatCapacityValue(row.limit) },
+ { label: "Unit", get: (row) => inventory && payload.classId === "premium-ssd-v2" ? "GiB" : esc(row.unit || "—") },
+ { label: "Quota status", align: "left", get: (row) => `${capacityStateToken(row.semantic)}${esc(row.semantic?.sourceNote || "")} ` },
+ { label: "Ingested", get: (row) => esc(fmtRelativeTime(new Date(row.x_IngestionTime))) },
+ ];
+ return `${tableHtml(columns, rows, payload.contract?.emptyLabel)}
`;
+}
+
+export function capacityHeatmapCell(row, classId) {
+ if (classId === "capacity-reservations") {
+ return { value: Number(row.ObservedObjects || 0), text: `${fmtInt(row.ObservedObjects)} groups`, state: "inventory" };
+ }
+ if (classId === "premium-ssd-v2") {
+ return { value: Number(row.ObservedGiB || 0), text: `${formatCapacityValue(row.ObservedGiB)} GiB`, state: "inventory" };
+ }
+ const semantic = row.semantic || {};
+ return {
+ value: semantic.utilizationPercent,
+ text: Number.isFinite(semantic.utilizationPercent) ? `${semantic.utilizationPercent.toFixed(1)}%` : (CAPACITY_STATE_LABELS[semantic.state] || "Not reported"),
+ state: semantic.state || "unclassified",
+ };
+}
+
+function capacityHeatmap(payload) {
+ const heatmap = payload.heatmap || {};
+ if (heatmap.status === "heatmap-disabled") {
+ return `Heatmap disabled. More than ${fmtInt(heatmap.limit)} observed cells matched. Refine the filters; no partial matrix was rendered.
`;
+ }
+ if (heatmap.status === "no-selection") {
+ return `Select one exact quota metric to enable the subscription-by-region matrix.
`;
+ }
+ const rows = heatmap.rows || [];
+ if (!rows.length) return `No quota data is available for this selection.
`;
+ if (payload.contract?.quotaType !== "inventory" && !rows.some((row) => row.semantic?.capability === "enabled")) {
+ return `Heatmap unavailable. The selected metric is descriptive-only and cannot receive quota-health color.
`;
+ }
+ const subscriptions = [...new Set(rows.map((row) => row.SubAccountId || "Unknown subscription"))].sort();
+ const regions = [...new Set(rows.map((row) => row.location || "Unknown region"))].sort();
+ const cells = new Map(rows.map((row) => [`${row.SubAccountId || "Unknown subscription"}|${row.location || "Unknown region"}`, row]));
+ return ``;
+}
+
+export const MATRIX_STATUS_FILTERS = Object.freeze([
+ { id: "in-use", label: "In use" },
+ { id: "at-limit", label: "At limit" },
+ { id: "available", label: "Available" },
+ { id: "all", label: "All" },
+]);
+const COMPUTE_MATRIX_STATUS_FILTERS = Object.freeze([
+ MATRIX_STATUS_FILTERS[0],
+ MATRIX_STATUS_FILTERS[1],
+ MATRIX_STATUS_FILTERS[2],
+ { id: "restricted", label: "Restricted" },
+ MATRIX_STATUS_FILTERS[3],
+]);
+
+export const HIGH_WATER_MARKS = [60, 70, 80, 90];
+export const DEFAULT_HIGH_WATER_MARK = 70;
+
+const CAPACITY_MATRIX_CONFIG = Object.freeze({
+ compute: Object.freeze({
+ payloadKey: "familyHeatmap",
+ rowHeader: "VM family",
+ searchLabel: "VM family",
+ searchPlaceholder: "Filter by family, such as Dsv5",
+ pairLabel: "family and region combinations",
+ panelTitle: "Estate quota by VM family and region",
+ panelSubtitle: "Provider-reported usage, quota, and headroom from ComputeUsage rows.",
+ detailTab: "Family and region",
+ description: "VM family quota by region across the estate. The left bar and AZ labels use the smallest-vCPU SKU in each family. The percentage is provider-reported family quota utilization. Values are summed across subscriptions.",
+ ariaLabel: "VM family by region matrix, scrollable",
+ empty: "No Compute family quota was reported for this scope. Check ComputeUsage ingestion.",
+ disabled: "Family view disabled.",
+ key: (row) => row.FamilyKey,
+ label: (row) => row.Family || row.FamilyKey,
+ searchText: (row) => `${row.Family || ""} ${row.FamilyKey || ""}`,
+ used: (row) => Number(row.CoresUsed || 0),
+ total: (row) => Number(row.CoresTotal || 0),
+ }),
+ "app-service": Object.freeze({
+ payloadKey: "appServiceHeatmap",
+ rowHeader: "App Service plan SKU",
+ searchLabel: "Plan SKU",
+ searchPlaceholder: "Filter by SKU, such as P1v4",
+ pairLabel: "SKU and region combinations",
+ panelTitle: "Estate quota by plan SKU and region",
+ panelSubtitle: "Provider-reported App Service instance usage, quota, and headroom.",
+ detailTab: "SKU and region",
+ description: "App Service quota by exact plan SKU and region across the estate. Total Regional VMs and the selected SKU both constrain deployment. Quota does not prove physical capacity.",
+ ariaLabel: "App Service plan SKU by region matrix, scrollable",
+ empty: "No App Service SKU quota was reported for this scope. Check AppServiceUsage ingestion.",
+ disabled: "App Service view disabled.",
+ key: (row) => row.SkuKey,
+ label: (row) => row.Sku || row.SkuKey,
+ searchText: (row) => `${row.Sku || ""} ${row.SkuKey || ""} ${row.Unit || ""}`,
+ used: (row) => Number(row.UsedInstances || 0),
+ total: (row) => Number(row.QuotaInstances || 0),
+ subscriptionCoverage: true,
+ }),
+ "azure-sql": Object.freeze({
+ payloadKey: "azureSqlHeatmap",
+ rowHeader: "Azure SQL quota",
+ searchLabel: "Quota",
+ searchPlaceholder: "Filter by quota, such as vCore or server",
+ pairLabel: "quota and region combinations",
+ panelTitle: "Estate quota by Azure SQL metric and region",
+ panelSubtitle: "Provider-reported regional quota for Azure SQL Database, Synapse, and SQL Managed Instance.",
+ detailTab: "Quota and region",
+ description: "Current regional quota only. Legacy subnet and single-vCore counters and subscription-wide free-offer counters are excluded. A zero or negative limit does not receive utilization arithmetic. Quota doesn't prove region or zone-redundant access.",
+ ariaLabel: "Azure SQL quota by region matrix, scrollable",
+ empty: "No supported Azure SQL regional quota was reported for this scope. Check SqlSubscriptionUsage ingestion.",
+ disabled: "Azure SQL view disabled.",
+ key: (row) => row.MetricKey,
+ label: (row) => row.Metric || row.MetricKey,
+ searchText: (row) => `${row.Metric || ""} ${row.MetricKey || ""} ${row.Unit || ""}`,
+ used: (row) => Number(row.Used || 0),
+ total: (row) => Number(row.Quota || 0),
+ subscriptionCoverage: true,
+ }),
+ "azure-ai": Object.freeze({
+ payloadKey: "azureAiHeatmap",
+ rowHeader: "Azure AI model quota",
+ searchLabel: "Model",
+ searchPlaceholder: "Filter by model or tier, such as gpt-4o or GlobalStandard",
+ pairLabel: "model and region combinations",
+ panelTitle: "Estate quota by Azure AI model and region",
+ panelSubtitle: "Provider-reported quota per model deployment tier from Azure AI Foundry and Cognitive Services.",
+ detailTab: "Model and region",
+ description: "Quota by exact model, deployment tier, and region across the estate. Each model/tier pool is independent, so quota is never summed across models. Units vary by model (tokens per minute, requests per minute, provisioned throughput units, and similar); the reported percentage is that model's own utilization.",
+ ariaLabel: "Azure AI model by region matrix, scrollable",
+ empty: "No Azure AI quota was reported for this scope. Check CognitiveServicesUsage ingestion.",
+ disabled: "Azure AI view disabled.",
+ key: (row) => row.ModelKey,
+ label: (row) => row.Model || row.ModelKey,
+ searchText: (row) => `${row.Model || ""} ${row.ModelKey || ""} ${row.Unit || ""}`,
+ used: (row) => Number(row.Used || 0),
+ total: (row) => Number(row.Quota || 0),
+ subscriptionCoverage: true,
+ }),
+});
+
+function matrixStatusMatches(row, classId, status) {
+ const config = CAPACITY_MATRIX_CONFIG[classId];
+ if (!config || status === "all") return true;
+ if (status === "in-use") return config.used(row) > 0;
+ if (status === "at-limit") {
+ return config.subscriptionCoverage
+ ? Number(row.AtLimitSubscriptions || 0) > 0
+ : config.total(row) > 0 && config.used(row) >= config.total(row);
+ }
+ if (status === "available") {
+ return classId === "compute"
+ ? row.semantic?.offerState === "available" && config.total(row) > config.used(row)
+ : Number(row.QuotaSubscriptions || 0) > Number(row.AtLimitSubscriptions || 0);
+ }
+ if (status === "restricted") {
+ return classId === "compute" && (
+ Boolean(row.semantic?.regionRestricted)
+ || (Array.isArray(row.semantic?.zonesRestricted) && row.semantic.zonesRestricted.length > 0)
+ );
+ }
+ return status === "no-quota"
+ ? config.subscriptionCoverage
+ ? Number(row.QuotaSubscriptions || 0) <= 0
+ : config.total(row) <= 0
+ : true;
+}
+
+function compareCapacityMatrixRows(left, right, classId) {
+ const config = CAPACITY_MATRIX_CONFIG[classId];
+ const priority = (row) => {
+ if (matrixStatusMatches(row, classId, "at-limit")) return 0;
+ if (matrixStatusMatches(row, classId, "restricted")) return 1;
+ if (matrixStatusMatches(row, classId, "in-use")) return 2;
+ if (matrixStatusMatches(row, classId, "available")) return 3;
+ if (matrixStatusMatches(row, classId, "no-quota")) return 4;
+ return 5;
+ };
+ const priorityOrder = priority(left) - priority(right);
+ if (priorityOrder) return priorityOrder;
+ const leftUtilization = Number.isFinite(left.semantic?.utilizationPercent)
+ ? left.semantic.utilizationPercent
+ : -1;
+ const rightUtilization = Number.isFinite(right.semantic?.utilizationPercent)
+ ? right.semantic.utilizationPercent
+ : -1;
+ if (leftUtilization !== rightUtilization) return rightUtilization - leftUtilization;
+ const usedOrder = config.used(right) - config.used(left);
+ if (usedOrder) return usedOrder;
+ const labelOrder = config.label(left).localeCompare(config.label(right), undefined, {
+ numeric: true,
+ sensitivity: "base",
+ });
+ return labelOrder || String(left.Location || "").localeCompare(String(right.Location || ""), undefined, {
+ numeric: true,
+ sensitivity: "base",
+ });
+}
+
+function sortCapacityMatrixRows(rows, classId) {
+ return [...rows].sort((left, right) => compareCapacityMatrixRows(left, right, classId));
+}
+
+function matrixStatusFilters(classId) {
+ return classId === "compute" ? COMPUTE_MATRIX_STATUS_FILTERS : MATRIX_STATUS_FILTERS;
+}
+
+export const FAMILY_STATUS_FILTERS = COMPUTE_MATRIX_STATUS_FILTERS.map((lens) => ({
+ ...lens,
+ match: (row) => matrixStatusMatches(row, "compute", lens.id),
+}));
+
+export function capacityDemandTier(utilizationPercent, mark = DEFAULT_HIGH_WATER_MARK) {
+ if (!Number.isFinite(utilizationPercent)) return "none";
+ if (utilizationPercent >= 100) return "exhausted";
+ return utilizationPercent >= mark ? "over" : "under";
+}
+
+export function familyDemandTier(utilizationPercent, mark = DEFAULT_HIGH_WATER_MARK) {
+ return capacityDemandTier(utilizationPercent, mark);
+}
+
+export function filterCapacityMatrixRows(rows, classId, filter = {}) {
+ const config = CAPACITY_MATRIX_CONFIG[classId];
+ if (!config) return [];
+ const list = Array.isArray(rows) ? rows : [];
+ const status = ["in-use", "at-limit", "available", "restricted", "no-quota", "all"].includes(filter.status)
+ ? filter.status
+ : "all";
+ const needle = String(filter.search || "").trim().toLowerCase();
+ const regions = Array.isArray(filter.regions) ? filter.regions : [];
+ return list.filter((row) => {
+ if (!matrixStatusMatches(row, classId, status)) return false;
+ if (regions.length && !regions.includes(row.Location || "Unknown region")) return false;
+ return !needle || config.searchText(row).toLowerCase().includes(needle);
+ });
+}
+
+export function filterFamilyRows(rows, filter = {}) {
+ return filterCapacityMatrixRows(rows, "compute", filter);
+}
+
+function matrixFilterBar(rows, classId, config, filter, shownCells) {
+ const lenses = matrixStatusFilters(classId);
+ const counts = new Map(lenses.map((lens) => [
+ lens.id,
+ rows.filter((row) => matrixStatusMatches(row, classId, lens.id)).length,
+ ]));
+ const status = uiSegmentedControl({
+ name: "matrix-status",
+ label: "Show",
+ labelId: `${classId}-matrix-status-label`,
+ selected: filter.status,
+ items: lenses.map((lens) => ({
+ value: lens.id,
+ label: lens.label,
+ count: fmtInt(counts.get(lens.id) || 0),
+ })),
+ });
+ const search = uiSearchField({
+ name: "matrix",
+ id: `${classId}-matrix-search`,
+ label: config.searchLabel,
+ value: filter.search,
+ placeholder: config.searchPlaceholder,
+ });
+ const reachable = filterCapacityMatrixRows(rows, classId, { ...filter, regions: [] });
+ const regions = [...new Set(reachable.map((row) => row.Location || "Unknown region"))].sort();
+ const regionControl = regions.length > 1
+ ? uiToggleList({
+ name: "matrix-region",
+ label: "Region",
+ labelId: `${classId}-matrix-region-label`,
+ selected: filter.regions,
+ items: regions.map((region) => ({ value: region, label: region })),
+ })
+ : "";
+ const mark = Number(filter.mark) || DEFAULT_HIGH_WATER_MARK;
+ const markControl = uiSegmentedControl({
+ name: "matrix-mark",
+ label: "High-water mark",
+ labelId: `${classId}-matrix-mark-label`,
+ selected: mark,
+ items: HIGH_WATER_MARKS.map((value) => ({
+ value,
+ label: `${value}%`,
+ count: fmtInt(rows.filter((row) => Number.isFinite(row.semantic?.utilizationPercent)
+ && capacityDemandTier(row.semantic.utilizationPercent, value) !== "under").length),
+ })),
+ });
+ const filtered = filter.status !== "all" || filter.search || filter.regions.length;
+ return uiFilterBar({
+ ariaLabel: `${config.rowHeader} matrix filters`,
+ controls: `${status}${search}${regionControl}${markControl}`,
+ summary: `${fmtInt(shownCells)} of ${fmtInt(rows.length)} cells`,
+ resetLabel: filtered ? "Clear filters" : null,
+ resetAction: "matrix-reset",
+ });
+}
+
+function matrixLegend(classId, mark) {
+ const supplyItems = classId === "compute"
+ ? [
+ ["open", "Region and AZ available"],
+ ["partial", "One or more AZs restricted"],
+ ["blocked", "Region restricted"],
+ ["none", "No quota or offer status"],
+ ]
+ : classId === "app-service" ? [
+ ["open", "All subscriptions have SKU quota"],
+ ["partial", "One or more subscriptions lack quota"],
+ ["blocked", "One or more subscriptions are at limit"],
+ ["none", "No SKU quota reported"],
+ ] : [
+ ["open", "All subscriptions have usable quota"],
+ ["partial", "One or more subscriptions lack usable quota"],
+ ["blocked", "One or more subscriptions are at limit"],
+ ["none", "No usable quota reported"],
+ ];
+ const supply = supplyItems.map(([id, label]) =>
+ `00% ${esc(label)}
+
${classId === "compute" ? "Offer status" : "Quota status"}, the left bar
+
Quota utilization, the percentage
+
Over ${mark}% mark `
+ : tier === "exhausted" ? `Quota exhausted `
+ : "";
+ return { tier, note };
+}
+
+function computeMatrixCell(row, label, region, mark) {
+ const semantic = row.semantic || {};
+ const detail = Number.isFinite(semantic.headroomCores) ? `${fmtInt(semantic.headroomCores)} cores free` : "";
+ const { tier, note } = matrixAlarm(semantic, mark);
+ const statusClass = semantic.offerState === "region-restricted" ? "danger"
+ : semantic.offerState === "zone-restricted" ? "warning"
+ : semantic.offerState === "available" ? "available"
+ : "muted";
+ const zones = (semantic.zoneStates || []).map((item) =>
+ `AZ ${esc(item.zone)} · ${item.restricted ? "Restricted" : "Available"} `
+ ).join("");
+ const representative = semantic.representativeSkus?.length ? semantic.representativeSkus.join(", ") : "not reported";
+ const title = `${label} · ${region} · ${fmtInt(row.CoresUsed)} of ${fmtInt(row.CoresTotal)} cores · ${semantic.offerText} · Representative SKU: ${representative}`;
+ return `
+ ${esc(semantic.text || "Not reported")}
+ ${esc(semantic.offerText || "Offer status not reported")}
+ ${zones}${note}${esc(detail)}
+ `;
+}
+
+function appServiceMatrixCell(row, label, region, mark) {
+ const semantic = row.semantic || {};
+ const detail = Number.isFinite(semantic.headroomInstances) ? `${fmtInt(semantic.headroomInstances)} instances free` : "";
+ const { tier, note } = matrixAlarm(semantic, mark);
+ const statusClass = semantic.supply === "blocked" ? "danger"
+ : semantic.supply === "partial" ? "warning"
+ : semantic.supply === "open" ? "available"
+ : "muted";
+ const title = `${label} · ${region} · ${fmtInt(row.UsedInstances)} of ${fmtInt(row.QuotaInstances)} instances · ${semantic.quotaText}`;
+ return `
+ ${esc(semantic.text || "Not reported")}
+ ${esc(semantic.quotaText || "Quota not reported")}
+ ${note}${esc(detail)}
+ `;
+}
+
+function azureSqlMatrixCell(row, label, region, mark) {
+ const semantic = row.semantic || {};
+ const detail = Number.isFinite(semantic.headroomUnits)
+ ? `${fmtInt(semantic.headroomUnits)} ${semantic.unitLabel || "units"} free`
+ : "";
+ const { tier, note } = matrixAlarm(semantic, mark);
+ const statusClass = semantic.supply === "blocked" ? "danger"
+ : semantic.supply === "partial" ? "warning"
+ : semantic.supply === "open" ? "available"
+ : "muted";
+ const title = `${label} · ${region} · ${fmtInt(row.Used)} of ${fmtInt(row.Quota)} ${semantic.unitLabel || "units"} · ${semantic.quotaText}`;
+ return `
+ ${esc(semantic.text || "Not reported")}
+ ${esc(semantic.quotaText || "Quota not reported")}
+ ${note}${esc(detail)}
+ `;
+}
+
+function azureAiMatrixCell(row, label, region, mark) {
+ const semantic = row.semantic || {};
+ const detail = Number.isFinite(semantic.headroomUnits)
+ ? `${fmtInt(semantic.headroomUnits)} ${semantic.unitLabel || "units"} free`
+ : "";
+ const { tier, note } = matrixAlarm(semantic, mark);
+ const statusClass = semantic.supply === "blocked" ? "danger"
+ : semantic.supply === "partial" ? "warning"
+ : semantic.supply === "open" ? "available"
+ : "muted";
+ const title = `${label} · ${region} · ${fmtInt(row.Used)} of ${fmtInt(row.Quota)} ${semantic.unitLabel || "units"} · ${semantic.quotaText}`;
+ return `
+ ${esc(semantic.text || "Not reported")}
+ ${esc(semantic.quotaText || "Quota not reported")}
+ ${note}${esc(detail)}
+ `;
+}
+
+function capacityMatrix(payload) {
+ const config = CAPACITY_MATRIX_CONFIG[payload.classId];
+ const matrix = payload[config.payloadKey] || {};
+ if (matrix.status === "heatmap-disabled") {
+ return `${esc(config.disabled)} More than ${fmtInt(matrix.limit)} ${esc(config.pairLabel)} matched. Narrow the subscription or region filter.
`;
+ }
+ const rows = matrix.rows || [];
+ if (!rows.length) return `${esc(config.empty)}
`;
+ const filter = capacityMatrixFilter(payload.classId, rows);
+ const visible = sortCapacityMatrixRows(
+ filterCapacityMatrixRows(rows, payload.classId, filter),
+ payload.classId,
+ );
+ const filterBar = matrixFilterBar(rows, payload.classId, config, filter, visible.length);
+ if (!visible.length) {
+ return `${filterBar}No ${esc(config.pairLabel)} match these filters. Clear them to see all ${fmtInt(rows.length)} cells.
`;
+ }
+ const matrixRows = [...new Map(visible.map((row) => [
+ config.key(row),
+ { key: config.key(row), label: config.label(row), title: config.key(row) },
+ ])).values()];
+ const regions = [...new Set(visible.map((row) => row.Location || "Unknown region"))].sort();
+ const cells = new Map(visible.map((row) => [`${config.key(row)}|${row.Location || "Unknown region"}`, row]));
+ const mark = Number(filter.mark) || DEFAULT_HIGH_WATER_MARK;
+ const noteId = `${payload.classId}-matrix-note`;
+ return `${filterBar}
+ ${esc(config.description)}
+ ${matrixLegend(payload.classId, mark)}
+ ${uiDataMatrix({
+ ariaLabel: config.ariaLabel,
+ descriptionId: noteId,
+ rowHeader: config.rowHeader,
+ rows: matrixRows,
+ columns: regions,
+ renderCell: (matrixRow, region) => {
+ const row = cells.get(`${matrixRow.key}|${region}`);
+ if (!row) return "";
+ if (payload.classId === "compute") return computeMatrixCell(row, matrixRow.label, region, mark);
+ if (payload.classId === "app-service") return appServiceMatrixCell(row, matrixRow.label, region, mark);
+ if (payload.classId === "azure-ai") return azureAiMatrixCell(row, matrixRow.label, region, mark);
+ return azureSqlMatrixCell(row, matrixRow.label, region, mark);
+ },
+ })}`;
+}
+
+function capacityMatrixDetail(payload) {
+ const config = CAPACITY_MATRIX_CONFIG[payload.classId];
+ const rows = sortCapacityMatrixRows(
+ filterCapacityMatrixRows(payload[config.payloadKey]?.rows || [], payload.classId, capacityMatrixFilter(payload.classId)),
+ payload.classId,
+ );
+ if (!rows.length) return `No ${esc(config.pairLabel)} match the filters above.
`;
+ const pageSize = 50;
+ const totalPages = Math.ceil(rows.length / pageSize);
+ const page = Math.min(state.capacityMatrixPage, totalPages);
+ const pageRows = rows.slice((page - 1) * pageSize, page * pageSize);
+ const columns = payload.classId === "compute"
+ ? [
+ { label: "VM family", align: "left", get: (row) => esc(row.Family || row.FamilyKey || "—") },
+ { label: "Region", align: "left", get: (row) => esc(row.Location || "—") },
+ { label: "Used cores", get: (row) => fmtInt(row.CoresUsed) },
+ { label: "Quota", get: (row) => fmtInt(row.CoresTotal) },
+ { label: "Headroom", get: (row) => Number.isFinite(row.semantic?.headroomCores) ? fmtInt(row.semantic.headroomCores) : "—" },
+ { label: "Subscriptions", get: (row) => fmtInt(row.Subscriptions) },
+ { label: "Utilization", get: (row) => esc(row.semantic?.text || "—") },
+ { label: "Quota status", align: "left", get: (row) => capacityStateToken(row.semantic) },
+ { label: "Offer status", align: "left", get: (row) => esc(row.semantic?.offerText || "Not reported") },
+ { label: "Availability zones", align: "left", get: (row) => esc((row.semantic?.zoneStates || []).map((item) => `AZ ${item.zone} ${item.restricted ? "Restricted" : "Available"}`).join(", ") || "None") },
+ { label: "Representative SKU", align: "left", get: (row) => esc(row.semantic?.representativeSkus?.join(", ") || "Not reported") },
+ ]
+ : payload.classId === "app-service" ? [
+ { label: "Plan SKU", align: "left", get: (row) => esc(row.Sku || row.SkuKey || "—") },
+ { label: "Region", align: "left", get: (row) => esc(row.Location || "—") },
+ { label: "Used instances", get: (row) => fmtInt(row.UsedInstances) },
+ { label: "Quota", get: (row) => fmtInt(row.QuotaInstances) },
+ { label: "Headroom", get: (row) => Number.isFinite(row.semantic?.headroomInstances) ? fmtInt(row.semantic.headroomInstances) : "—" },
+ { label: "Subscriptions", get: (row) => fmtInt(row.Subscriptions) },
+ { label: "At limit", get: (row) => fmtInt(row.AtLimitSubscriptions) },
+ { label: "No quota", get: (row) => fmtInt(row.NoQuotaSubscriptions) },
+ { label: "Utilization", get: (row) => esc(row.semantic?.text || "—") },
+ { label: "Quota coverage", align: "left", get: (row) => esc(row.semantic?.quotaText || "Not reported") },
+ ] : payload.classId === "azure-sql" ? [
+ { label: "Quota metric", align: "left", get: (row) => esc(row.Metric || row.MetricKey || "—") },
+ { label: "Region", align: "left", get: (row) => esc(row.Location || "—") },
+ { label: "Used", get: (row) => fmtInt(row.Used) },
+ { label: "Quota", get: (row) => fmtInt(row.Quota) },
+ { label: "Headroom", get: (row) => Number.isFinite(row.semantic?.headroomUnits) ? fmtInt(row.semantic.headroomUnits) : "—" },
+ { label: "Unit", align: "left", get: (row) => esc(row.semantic?.unitLabel || row.Unit || "—") },
+ { label: "Subscriptions", get: (row) => fmtInt(row.Subscriptions) },
+ { label: "At limit", get: (row) => fmtInt(row.AtLimitSubscriptions) },
+ { label: "No usable quota", get: (row) => fmtInt(row.NoQuotaSubscriptions) },
+ { label: "Negative limit", get: (row) => fmtInt(row.NegativeLimitSubscriptions) },
+ { label: "Utilization", get: (row) => esc(row.semantic?.text || "—") },
+ { label: "Quota coverage", align: "left", get: (row) => esc(row.semantic?.quotaText || "Not reported") },
+ ] : [
+ { label: "Model", align: "left", get: (row) => esc(row.Model || row.ModelKey || "—") },
+ { label: "Region", align: "left", get: (row) => esc(row.Location || "—") },
+ { label: "Used", get: (row) => fmtInt(row.Used) },
+ { label: "Quota", get: (row) => fmtInt(row.Quota) },
+ { label: "Headroom", get: (row) => Number.isFinite(row.semantic?.headroomUnits) ? fmtInt(row.semantic.headroomUnits) : "—" },
+ { label: "Subscriptions", get: (row) => fmtInt(row.Subscriptions) },
+ { label: "At limit", get: (row) => fmtInt(row.AtLimitSubscriptions) },
+ { label: "No usable quota", get: (row) => fmtInt(row.NoQuotaSubscriptions) },
+ { label: "Utilization", get: (row) => esc(row.semantic?.text || "—") },
+ { label: "Quota coverage", align: "left", get: (row) => esc(row.semantic?.quotaText || "Not reported") },
+ ];
+ const table = `${tableHtml(columns, pageRows, `No ${config.pairLabel} match the filters above.`)}
`;
+ const pagination = uiPagination({
+ name: "matrix",
+ page,
+ totalPages,
+ label: `${config.detailTab} pages`,
+ });
+ return `${fmtInt(rows.length)} matching ${esc(config.pairLabel)} · Highest risk and utilization first
${table}${pagination}`;
+}
+
+function capacitySubscriptionDetail(payload) {
+ const config = CAPACITY_MATRIX_CONFIG[payload.classId];
+ const search = `
+ ${uiSearchField({
+ name: "subscription",
+ id: "capacity-subscription-search",
+ label: "Subscription",
+ value: state.capacitySubscriptionSearch,
+ placeholder: "Search by subscription ID",
+ })}
+ Matches the Show, ${esc(config.searchLabel)}, and region filters above.
+
`;
+ if (state.capacitySubscriptionLoading) return `${search}Loading matching subscriptions…
`;
+ if (state.capacitySubscriptionError) {
+ return `${search}Subscriptions unavailable. ${esc(state.capacitySubscriptionError)}
`;
+ }
+ const data = state.capacitySubscriptionData;
+ if (!data) return `${search}Select this tab to load matching subscriptions.
`;
+ const rows = data.rows || [];
+ const totalPages = Number(data.totalPages || 0);
+ const summary = `${fmtInt(data.totalSubscriptions)} matching subscriptions
`;
+ if (!rows.length) return `${search}${summary}No subscription matches these filters.
`;
+ const columns = payload.classId === "compute"
+ ? [
+ { label: "Subscription ID", align: "left", get: (row) => `${esc(row.SubscriptionId || "—")} ` },
+ { label: "Families", get: (row) => fmtInt(row.Families) },
+ { label: "Regions", get: (row) => fmtInt(row.Regions) },
+ { label: "Used cores", get: (row) => fmtInt(row.CoresUsed) },
+ { label: "Quota", get: (row) => fmtInt(row.CoresTotal) },
+ { label: "Headroom", get: (row) => row.HeadroomCores != null && Number.isFinite(Number(row.HeadroomCores)) ? fmtInt(row.HeadroomCores) : "—" },
+ { label: "Last ingested", get: (row) => row.LastIngestion ? esc(fmtRelativeTime(new Date(row.LastIngestion))) : "—" },
+ ]
+ : payload.classId === "app-service" ? [
+ { label: "Subscription ID", align: "left", get: (row) => `${esc(row.SubscriptionId || "—")} ` },
+ { label: "SKUs", get: (row) => fmtInt(row.Skus) },
+ { label: "Regions", get: (row) => fmtInt(row.Regions) },
+ { label: "SKU-region pairs", get: (row) => fmtInt(row.SkuRegionPairs) },
+ { label: "In use", get: (row) => fmtInt(row.InUsePairs) },
+ { label: "At limit", get: (row) => fmtInt(row.AtLimitPairs) },
+ { label: "No quota", get: (row) => fmtInt(row.NoQuotaPairs) },
+ { label: "Last ingested", get: (row) => row.LastIngestion ? esc(fmtRelativeTime(new Date(row.LastIngestion))) : "—" },
+ ] : payload.classId === "azure-sql" ? [
+ { label: "Subscription ID", align: "left", get: (row) => `${esc(row.SubscriptionId || "—")} ` },
+ { label: "Quotas", get: (row) => fmtInt(row.Metrics) },
+ { label: "Regions", get: (row) => fmtInt(row.Regions) },
+ { label: "Quota-region pairs", get: (row) => fmtInt(row.MetricRegionPairs) },
+ { label: "In use", get: (row) => fmtInt(row.InUsePairs) },
+ { label: "At limit", get: (row) => fmtInt(row.AtLimitPairs) },
+ { label: "No usable quota", get: (row) => fmtInt(row.NoQuotaPairs) },
+ { label: "Negative limit", get: (row) => fmtInt(row.NegativeLimitPairs) },
+ { label: "Last ingested", get: (row) => row.LastIngestion ? esc(fmtRelativeTime(new Date(row.LastIngestion))) : "—" },
+ ] : [
+ { label: "Subscription ID", align: "left", get: (row) => `${esc(row.SubscriptionId || "—")} ` },
+ { label: "Models", get: (row) => fmtInt(row.Models) },
+ { label: "Regions", get: (row) => fmtInt(row.Regions) },
+ { label: "Model-region pairs", get: (row) => fmtInt(row.ModelRegionPairs) },
+ { label: "In use", get: (row) => fmtInt(row.InUsePairs) },
+ { label: "At limit", get: (row) => fmtInt(row.AtLimitPairs) },
+ { label: "No usable quota", get: (row) => fmtInt(row.NoQuotaPairs) },
+ { label: "Last ingested", get: (row) => row.LastIngestion ? esc(fmtRelativeTime(new Date(row.LastIngestion))) : "—" },
+ ];
+ const table = `${tableHtml(columns, rows, "No subscription matches these filters.")}
`;
+ return `${search}${summary}${table}${uiPagination({
+ name: "subscriptions",
+ page: Number(data.page || 1),
+ totalPages,
+ label: "Subscription pages",
+ })}`;
+}
+
+function capacityMatrixDetailTabs(payload) {
+ const config = CAPACITY_MATRIX_CONFIG[payload.classId];
+ const tab = state.capacityDetailTab;
+ return uiTabList({
+ name: "capacity-detail",
+ label: `${payload.contract?.title || payload.classId} detail`,
+ tabs: [
+ { id: "matrix", label: config.detailTab },
+ { id: "subscriptions", label: "Subscriptions" },
+ ],
+ active: tab,
+ panelId: "capacity-detail-panel",
+ panel: tab === "subscriptions" ? capacitySubscriptionDetail(payload) : capacityMatrixDetail(payload),
+ });
+}
+
+function capacityHistory(payload) {
+ const history = payload.history || {};
+ if (history.status === "no-selection") return `Select one exact source row to view its observed history.
`;
+ if (history.status === "disabled") return `History is disabled. ${esc(history.reasonCode || "")}
`;
+ if (history.mode === "current-only") {
+ return `Collecting ${payload.contract?.quotaType === "inventory" ? "inventory" : "quota"} history — 1 day available. Trend, growth, forecast, runway, and breach dates remain disabled.
`;
+ }
+ return tableHtml([
+ { label: "UTC day", align: "left", get: (row) => esc(String(row.Day || "").slice(0, 10)) },
+ { label: "Current", get: (row) => formatCapacityValue(row.currentValue) },
+ { label: "Limit", get: (row) => payload.contract?.quotaType === "inventory" ? "Not applicable" : formatCapacityValue(row.limit) },
+ { label: "Unit", get: (row) => payload.classId === "premium-ssd-v2" ? "GiB" : esc(row.unit || "—") },
+ { label: "Ingested", get: (row) => esc(String(row.x_IngestionTime || "")) },
+ ], history.points || [], "No history is available for this exact source key.");
+}
+
+function capacityDemandHistory(payload) {
+ const series = payload.series || {};
+ if (series.status === "disabled") {
+ return `Billed-demand series disabled. ${esc(series.reasonCode || "")}
`;
+ }
+ if (series.status === "no-selection") {
+ return `Select one exact meter, unit, price, and currency series. Different meters and currencies are never combined.
`;
+ }
+ const isDisk = payload.classId === "premium-ssd-v2";
+ return tableHtml([
+ { label: "UTC day", align: "left", get: (row) => esc(String(row.Day || "").slice(0, 10)) },
+ ...(isDisk ? [] : [{ label: "Billed quantity", get: (row) => formatCapacityValue(row.BilledQuantity) }]),
+ { label: "Unit", get: (row) => isDisk ? "Not classified" : esc(row.ConsumedUnit || series.unit || "—") },
+ { label: "Effective cost", get: (row) => `${formatCapacityValue(row.EffectiveCost)} ${esc(row.BillingCurrency || "")}` },
+ { label: "Rows", get: (row) => fmtInt(row.Rows) },
+ ], series.points || [], "No billed usage matched this exact series.");
+}
+
+function capacityReconciliation(payload) {
+ const rows = payload.reconciliation?.rows || [];
+ return tableHtml([
+ { label: "Capacity reservation group", align: "left", get: (row) => `${esc(row.GroupName || trunc(row.GroupResourceId, 36))} ` },
+ { label: "Match", align: "left", get: (row) => esc(row.ReconciliationState || "unknown") },
+ { label: "Used hours", get: (row) => formatCapacityValue(row.UsedHours) },
+ { label: "Unused hours", get: (row) => formatCapacityValue(row.UnusedHours) },
+ { label: "Reservations", get: (row) => fmtInt(row.ReservationCount) },
+ { label: "Linked resources", get: (row) => fmtInt(row.LinkedResources) },
+ { label: "Currency", get: (row) => esc(row.BillingCurrency || "—") },
+ ], rows, "No capacity reservation inventory or linked billing data is available.");
+}
+
+function renderCapacity(payload) {
+ const content = el("content");
+ if (!payload) return;
+ if (payload.error) return renderError(payload);
+ const nav = capacityNavigationHtml();
+ if (payload.classId === "home") {
+ content.innerHTML = `${nav}
+
+ ${capacityPanel("Quota coverage", "Seven independent quota areas; no combined health score or ranking.", capacityHomeTable(payload.classes))}
+ `;
+ return;
+ }
+
+ const rows = payload.table?.rows || [];
+ const statusCounts = rows.reduce((counts, row) => {
+ const key = row.semantic?.state || "unclassified";
+ counts[key] = (counts[key] || 0) + 1;
+ return counts;
+ }, {});
+ const enabledCount = rows.filter((row) => row.semantic?.capability === "enabled").length;
+ const coverage = payload.coverage || {};
+ const notReported = coverage.state === "not-reported"
+ ? `Not reported — collection outcome unknown. ${esc(payload.contract?.emptyLabel || "")}
`
+ : "";
+ const schemaWarnings = [payload.schema?.quota, payload.schema?.costs]
+ .filter((schema) => schema && !schema.available)
+ .map((schema) => `${schema.source}: ${schema.missingFields.join(", ")}`);
+ const schemaNotice = schemaWarnings.length
+ ? `Source fields unavailable. ${esc(schemaWarnings.join(" · "))}
`
+ : "";
+ const quotaSelectors = payload.selectors?.items || [];
+ const demandSelectors = payload.demand?.selectors?.items || [];
+ const familyRows = payload.familyHeatmap?.rows || [];
+ const appServiceRows = payload.appServiceHeatmap?.rows || [];
+ const azureSqlRows = payload.azureSqlHeatmap?.rows || [];
+ const azureAiRows = payload.azureAiHeatmap?.rows || [];
+ const matrixClass = Boolean(CAPACITY_MATRIX_CONFIG[payload.classId]);
+ const kpis = payload.classId === "compute"
+ ? [
+ kpiCard("Family-region pairs", fmtInt(familyRows.length), "Estate totals; subscriptions are aggregated before display"),
+ kpiCard("In use", fmtInt(familyRows.filter((row) => matrixStatusMatches(row, "compute", "in-use")).length), "Family and region pairs using cores"),
+ kpiCard("At limit", fmtInt(familyRows.filter((row) => matrixStatusMatches(row, "compute", "at-limit")).length), "Provider-reported usage is at or over quota"),
+ kpiCard("No quota", fmtInt(familyRows.filter((row) => matrixStatusMatches(row, "compute", "no-quota")).length), "No regional family quota"),
+ ].join("")
+ : payload.classId === "app-service"
+ ? [
+ kpiCard("Quota-region pairs", fmtInt(appServiceRows.length), "Exact plan SKU and Total Regional VMs rows"),
+ kpiCard("In use", fmtInt(appServiceRows.filter((row) => matrixStatusMatches(row, "app-service", "in-use")).length), "SKU and region pairs using instances"),
+ kpiCard("At limit", fmtInt(appServiceRows.filter((row) => matrixStatusMatches(row, "app-service", "at-limit")).length), "One or more subscriptions are at quota"),
+ kpiCard("No quota", fmtInt(appServiceRows.filter((row) => matrixStatusMatches(row, "app-service", "no-quota")).length), "No subscription has quota for the SKU and region"),
+ ].join("")
+ : payload.classId === "azure-sql"
+ ? [
+ kpiCard("Quota-region pairs", fmtInt(azureSqlRows.length), "Current supported regional quota metrics"),
+ kpiCard("In use", fmtInt(azureSqlRows.filter((row) => matrixStatusMatches(row, "azure-sql", "in-use")).length), "Quota and region pairs with provider-reported usage"),
+ kpiCard("At limit", fmtInt(azureSqlRows.filter((row) => matrixStatusMatches(row, "azure-sql", "at-limit")).length), "One or more subscriptions are at quota"),
+ kpiCard("No usable quota", fmtInt(azureSqlRows.filter((row) => matrixStatusMatches(row, "azure-sql", "no-quota")).length), "Only zero, negative, or missing limits were reported"),
+ ].join("")
+ : payload.classId === "azure-ai"
+ ? [
+ kpiCard("Model-region pairs", fmtInt(azureAiRows.length), "Exact model, deployment tier, and region rows"),
+ kpiCard("In use", fmtInt(azureAiRows.filter((row) => matrixStatusMatches(row, "azure-ai", "in-use")).length), "Model and region pairs with provider-reported usage"),
+ kpiCard("At limit", fmtInt(azureAiRows.filter((row) => matrixStatusMatches(row, "azure-ai", "at-limit")).length), "One or more subscriptions are at quota"),
+ kpiCard("No usable quota", fmtInt(azureAiRows.filter((row) => matrixStatusMatches(row, "azure-ai", "no-quota")).length), "No subscription reported usable quota for the model and region"),
+ ].join("")
+ : [
+ kpiCard("Observations", fmtInt(coverage.observations), `${fmtInt(coverage.resources)} current resource keys`, undefined, undefined, "reference"),
+ kpiCard("Snapshot days", fmtInt(coverage.distinctDays), coverage.distinctDays < 2 ? "No trend can be inferred" : "Compatible history is evaluated per exact key"),
+ kpiCard("Latest ingestion", coverage.lastObservation ? esc(fmtRelativeTime(new Date(coverage.lastObservation))) : "—", "ADX arrival time, not provider observation time"),
+ kpiCard("Enabled", fmtInt(enabledCount), "Rows with approved semantics"),
+ kpiCard("Unclassified", fmtInt(statusCounts.unclassified), "Raw rows retained; registry review required"),
+ kpiCard("Stale", fmtInt(statusCounts.stale), "Older than 48 hours; arithmetic disabled"),
+ ].join("");
+ const selectors = payload.classId === "compute"
+ ? capacitySelectorHtml("metric", payload.classId, quotaSelectors, state.capacitySelections.metricSelection)
+ : matrixClass
+ ? ""
+ : `${capacitySelectorHtml("quota", payload.classId, quotaSelectors, state.capacitySelections.quotaSelection)}
+ ${capacitySelectorHtml("demand", payload.classId, demandSelectors, state.capacitySelections.demandSelection)}`;
+
+ content.innerHTML = `${nav}
+
+ ${notReported}${schemaNotice}
+ Next action: ${esc(CAPACITY_ACTIONS[payload.classId] || "Review the source rows before taking action.")}
+ ${kpis}
+ ${selectors ? `${selectors}
` : ""}
+
+ ${matrixClass
+ ? capacityPanel(CAPACITY_MATRIX_CONFIG[payload.classId].panelTitle, CAPACITY_MATRIX_CONFIG[payload.classId].panelSubtitle, capacityMatrix(payload), true)
+ : ""}
+ ${matrixClass
+ ? capacityPanel("Filtered quota detail", "Every row matches the matrix controls above. Switch to Subscriptions for server-paged detail across the full estate.", capacityMatrixDetailTabs(payload), true)
+ : capacityPanel("Current quota", `${payload.table?.rowLimit || 250}-row bound${payload.table?.truncated ? " reached" : ""}. Raw rows remain visible when calculations are disabled.`, capacityCurrentTable(payload))}
+ ${matrixClass ? "" : capacityPanel("Observed history", "Ingestion time is ADX arrival time. Missing days are not inferred.", capacityHistory(payload))}
+ ${["app-service", "azure-sql"].includes(payload.classId) ? "" : capacityPanel("Subscription × region", "Quota color is available only for exact enabled metrics. Inventory uses neutral density.", capacityHeatmap(payload))}
+ ${matrixClass ? "" : capacityPanel("Parallel billed demand", payload.demand?.capability?.sourceNote || "Billed usage stays separate from quota.", capacityDemandHistory(payload))}
+ ${payload.classId === "capacity-reservations"
+ ? capacityPanel("Inventory and billing reconciliation", "Used and Unused are accounting statuses, not reserved-capacity utilization.", capacityReconciliation(payload))
+ : ""}
+
+ `;
+}
+
+function renderError(p) {
+ if (state.tab === "foundry" || state.tab === "agents") {
+ el("content").innerHTML = `
+
Can’t load Azure AI operations
+
Set the tenant ID in Settings, then sign in to that tenant with Azure CLI.
+
+ Show error detail
+ ${esc(p.error)}
+
+
+
Can’t reach the FinOps hub
+
The dashboard queried ${esc(p.clusterUri || "")} (database ${esc(p.database || "Hub")}) but the request failed.
+
+
Start the Kusto emulator, then run:
+
+ Initialize-FinOpsHubLocal
+ Copy
+
+
Then refresh this dashboard.
+
+
+ Show error detail
+ ${esc(p.error)}
+
+
${esc(data.error)}
`;
+ } else {
+ const rows = data.rows || [];
+ if (!rows.length) {
+ resultEl.innerHTML = `Query returned no rows.
`;
+ } else {
+ const cols = Object.keys(rows[0]);
+ const head = cols.map((c) => `${esc(c)} `).join("");
+ const body = rows.slice(0, 200).map((r) =>
+ `${cols.map((c) => `${esc(String(r[c] ?? ""))} `).join("")} `
+ ).join("");
+ const note = rows.length > 200 ? ` (showing first 200)` : "";
+ resultEl.innerHTML = `${rows.length} rows${note}
`;
+ }
+ }
+ } catch (err) {
+ resultEl.innerHTML = `Request failed: ${esc(err.message)}
`;
+ } finally {
+ runBtn.disabled = false;
+ statusEl.textContent = prevStatus;
+ }
+}
+
+/* ----------------------------------------------------------------- driver */
+
+function currentPayload() {
+ return state.cache[state.tab]?.[cacheKey()];
+}
+
+function render() {
+ const p = currentPayload();
+ if (!p) return;
+ try {
+ if (p.error) renderError(p);
+ else if (state.tab === "tokenomics") renderTokenomics(p);
+ else if (state.tab === "ai") renderAi(p);
+ else if (state.tab === "allocation") renderAllocation(p);
+ else if (state.tab === "rate") renderRate(p);
+ else if (state.tab === "usage") renderUsage(p);
+ else if (state.tab === "anomaly") renderAnomaly(p);
+ else if (state.tab === "capacity") renderCapacity(p);
+ else if (state.tab === "foundry") renderFoundry(p);
+ else if (state.tab === "agents") renderAgents(p);
+ else renderOverview(p);
+ } catch (err) {
+ console.error("[ftk-dashboard] render error:", err);
+ renderError({ error: `Render error in ${state.tab}: ${err.message}` });
+ }
+}
+
+async function load() {
+ const tab = state.tab;
+ if (TOOL_TABS.has(tab)) {
+ el("source-line").textContent = "Experimental tab — not part of the FinOps KPI pipeline.";
+ el("footer-meta").textContent = "";
+ renderMonacoTab();
+ return;
+ }
+ const key = cacheKey();
+ if (state.cache[tab]?.[key]) { updateChrome(); render(); return; }
+
+ // Cancel any in-flight request for a superseded tab/preset
+ if (_loadAbort) _loadAbort.abort();
+ _loadAbort = new AbortController();
+ const { signal } = _loadAbort;
+
+ state.cache[tab] = state.cache[tab] || {};
+ state.loading = true;
+ setRefreshSpinning(true);
+ const contentEl = el("content");
+ contentEl.setAttribute("aria-busy", "true");
+ contentEl.innerHTML = `
+
+
+
+ `;
+ try {
+ const res = await fetch("/api/view", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ name: tab,
+ preset: tab === "foundry" || tab === "agents" ? state.foundryPreset : state.preset,
+ filters: state.filters,
+ ...(tab === "capacity"
+ ? { capacityClass: state.capacityClass, capacitySelections: state.capacitySelections }
+ : {}),
+ ...(tab === "foundry" || tab === "agents" ? { accountId: state.foundryAccountId } : {}),
+ ...(tab === "agents" ? { forceRefresh: state.forceRefresh } : {}),
+ }),
+ signal,
+ });
+ state.cache[tab][key] = await res.json();
+ } catch (err) {
+ if (err.name === "AbortError") return; // superseded by a newer load(); discard silently
+ console.error("[ftk-dashboard] fetch failed:", err);
+ state.cache[tab][key] = {
+ error: tab === "foundry" || tab === "agents"
+ ? "Could not load Azure AI operational data. Check the tenant ID and Azure CLI authentication."
+ : "Could not load data. Check the FinOps hub connection and authentication.",
+ };
+ } finally {
+ if (tab === "agents") state.forceRefresh = false;
+ state.loading = false;
+ setRefreshSpinning(false);
+ el("content")?.setAttribute("aria-busy", "false");
+ }
+ updateChrome();
+ render();
+ if (tab === "capacity" && ["compute", "app-service"].includes(state.capacityClass) &&
+ state.capacityDetailTab === "subscriptions" && !state.capacitySubscriptionData) {
+ void loadCapacitySubscriptions();
+ }
+}
+
+function setRefreshSpinning(on) {
+ const b = el("refresh");
+ if (b) b.innerHTML = on ? `↻ Refresh` : `↻ Refresh`;
+}
+
+function renderDiagnosticRail() {
+ const railEl = el("diagnostic-rail");
+ if (!railEl) return;
+ const { rows, health, refreshedAt, dataset } = queryState;
+ const relTime = fmtRelativeTime(refreshedAt);
+ const absTime = refreshedAt ? refreshedAt.toLocaleString() : "";
+ const rowTxt = `${fmtInt(rows)} rows`;
+ const healthLabel = health === "error" ? "● error" : health === "warn" ? "● warn" : "● ok";
+ railEl.innerHTML =
+ `${esc(dataset)} ` +
+ `· ` +
+ `${rowTxt} ` +
+ `· ` +
+ `${healthLabel} ` +
+ `· ` +
+ `${esc(relTime)} `;
+}
+
+function updateChrome() {
+ const p = currentPayload();
+ const w = p && p.window;
+ if (p && state.tab === "agents" && !p.error) {
+ el("source-line").innerHTML =
+ `Microsoft Foundry agent traces · Hub Prices() estimates · exact Costs() matches shown separately`;
+ el("footer-meta").textContent = `${w?.start || ""} → ${w?.end || ""} · ${p.workspaceCount || 0} workspaces`;
+ queryState.rows = (p.agents?.length || 0) + (p.recentRuns?.length || 0) + (p.recentErrors?.length || 0);
+ queryState.health = p.diagnostics?.length ? "warn" : "ok";
+ queryState.refreshedAt = p.generatedAt ? new Date(p.generatedAt) : new Date();
+ queryState.dataset = "Agent operations";
+ renderDiagnosticRail();
+ } else if (p && state.tab === "foundry" && !p.error && !p.empty) {
+ el("source-line").innerHTML =
+ `Azure Monitor platform metrics · Hub Prices() estimates · ${p.selectedAccountId ? "one Foundry resource" : "Foundry estate"}`;
+ el("footer-meta").textContent = `${w?.start || ""} → ${w?.end || ""} · ${w?.interval || ""}`;
+ queryState.rows = Object.values(p.data?.charts || {}).reduce((sum, series) =>
+ sum + series.reduce((seriesSum, item) => seriesSum + item.Points.length, 0), 0);
+ queryState.health = p.data?.diagnostics?.length ? "warn" : "ok";
+ queryState.refreshedAt = p.generatedAt ? new Date(p.generatedAt) : new Date();
+ queryState.dataset = "AI Foundry operations";
+ renderDiagnosticRail();
+ } else if (p && state.tab === "foundry" && p.empty) {
+ el("source-line").textContent = "Azure Resource Graph · no AI Foundry resources found.";
+ el("footer-meta").textContent = "";
+ queryState.rows = 0;
+ queryState.health = "warn";
+ queryState.refreshedAt = p.generatedAt ? new Date(p.generatedAt) : new Date();
+ queryState.dataset = "AI Foundry account discovery";
+ renderDiagnosticRail();
+ } else if (w && w.dataMin) {
+ el("source-line").innerHTML =
+ `Hub database · ${esc(window.__cfg?.clusterUri || "localhost:8082")}`;
+ queryState.dataset = `Hub database · ${fmtDayRange(w.dataMin, w.dataMax)}`;
+ queryState.rows = w.rows || 0;
+ queryState.health = queryState.rows === 0 ? "warn" : "ok";
+ queryState.refreshedAt = p.generatedAt ? new Date(p.generatedAt) : new Date();
+ el("footer-meta").textContent = `window ${w.start} → ${w.end}`;
+ renderDiagnosticRail();
+ } else if (p && p.error) {
+ el("source-line").textContent = "Connection failed — see panel below.";
+ el("footer-meta").textContent = "";
+ queryState.rows = 0;
+ queryState.health = "error";
+ queryState.refreshedAt = new Date();
+ queryState.dataset = state.tab === "foundry" || state.tab === "agents" ? "Azure Monitor" : "Hub database";
+ renderDiagnosticRail();
+ } else if (p && state.tab === "capacity") {
+ const observations = p.classId === "home"
+ ? (p.classes || []).reduce((sum, item) => sum + Number(item.summary?.Observations || 0), 0)
+ : Number(p.coverage?.observations || 0);
+ el("source-line").innerHTML =
+ `Hub capacity · ${esc(window.__cfg?.clusterUri || "localhost:8082")}`;
+ el("footer-meta").textContent = p.classId === "home" ? "seven quota areas" : p.contract?.title || p.classId;
+ queryState.rows = observations;
+ queryState.health = p.error ? "error" : observations > 0 ? "ok" : "warn";
+ queryState.refreshedAt = p.generatedAt ? new Date(p.generatedAt) : new Date();
+ queryState.dataset = p.classId === "home" ? "Capacity overview" : p.contract?.title || "Capacity";
+ renderDiagnosticRail();
+ }
+}
+
+/** Open the connection-settings dialog, prefilled from the current config. */
+function openSettingsDialog() {
+ el("settings-cluster").value = window.__cfg?.clusterUri || "";
+ el("settings-database").value = window.__cfg?.database || "";
+ el("settings-tenant").value = window.__cfg?.tenantId || "";
+ el("settings-error").textContent = "";
+ el("settings-dialog").showModal();
+ el("settings-cluster").focus();
+}
+
+/** POST the edited connection settings, then reconnect and re-query. */
+async function saveSettings() {
+ const clusterUri = el("settings-cluster").value.trim();
+ const database = el("settings-database").value.trim();
+ const tenantId = el("settings-tenant").value.trim();
+ if (!clusterUri) {
+ el("settings-error").textContent = "Cluster URI is required.";
+ return;
+ }
+ const btn = el("settings-save");
+ const original = btn.textContent;
+ btn.disabled = true;
+ btn.textContent = "Saving…";
+ try {
+ const res = await fetch("/api/config", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ clusterUri, database: database || "Hub", tenantId }),
+ });
+ const body = await res.json();
+ if (!res.ok || body.error) throw new Error(body.error || "Save failed");
+ window.__cfg = body;
+ el("settings-dialog").close();
+ state.cache = {}; // stale data belongs to the old connection
+ invalidateCapacitySubscriptions();
+ load();
+ } catch (err) {
+ el("settings-error").textContent = err.message || "Could not save settings.";
+ } finally {
+ btn.disabled = false;
+ btn.textContent = original;
+ }
+}
+
+function wireControls() {
+ el("preset").addEventListener("click", (e) => {
+ const btn = e.target.closest("button[data-preset]");
+ if (!btn || state.loading) return;
+ state.preset = btn.dataset.preset;
+ [...el("preset").querySelectorAll("button")].forEach((b) => b.classList.toggle("active", b === btn));
+ void publishCanvasState({ preset: state.preset });
+ load();
+ });
+ el("tabs").addEventListener("click", (e) => {
+ const btn = e.target.closest("button[data-tab]");
+ if (btn) switchTab(btn.dataset.tab);
+ });
+ el("refresh").addEventListener("click", () => {
+ if (state.loading) return;
+ if (state.cache[state.tab]) delete state.cache[state.tab][cacheKey()]; // force re-query
+ if (state.tab === "capacity" && ["compute", "app-service"].includes(state.capacityClass)) invalidateCapacitySubscriptions();
+ if (state.tab === "agents") state.forceRefresh = true;
+ load();
+ });
+
+ // Settings dialog controls
+ el("settings-open").addEventListener("click", openSettingsDialog);
+ el("settings-close").addEventListener("click", () => el("settings-dialog").close());
+ el("settings-save").addEventListener("click", saveSettings);
+
+ // KQL dialog controls
+ el("kql-close").addEventListener("click", () => el("kql-dialog").close());
+ el("kql-copy").addEventListener("click", () => {
+ const btn = el("kql-copy");
+ navigator.clipboard.writeText(el("kql-text").value)
+ .then(() => { btn.textContent = "Copied!"; setTimeout(() => { btn.textContent = "Copy"; }, 1500); })
+ .catch(() => { btn.textContent = "Failed"; setTimeout(() => { btn.textContent = "Copy"; }, 1500); });
+ });
+ el("kql-run").addEventListener("click", executeKql);
+
+ // KQL escape-hatch buttons (event delegation — buttons injected by panelHtml)
+ document.addEventListener("click", (e) => {
+ const foundryPreset = e.target.closest("[data-foundry-preset]");
+ if (foundryPreset && !state.loading) {
+ state.foundryPreset = foundryPreset.dataset.foundryPreset;
+ void publishCanvasState({ foundryPreset: state.foundryPreset });
+ load();
+ return;
+ }
+ const capacityTab = e.target.closest("[data-capacity-class]");
+ if (capacityTab) {
+ selectCapacityClass(capacityTab.dataset.capacityClass);
+ return;
+ }
+ const btn = e.target.closest(".kql-btn[data-panel-id]");
+ if (btn) openKqlDialog(btn.dataset.panelId);
+ // hbar click-to-filter
+ const hbarRow = e.target.closest(".hbar-filterable[data-filter-dim]");
+ if (hbarRow) {
+ const dim = hbarRow.dataset.filterDim;
+ const val = hbarRow.dataset.filterVal;
+ if (dim && val) toggleFilter(dim, val);
+ }
+ // chip remove
+ const chipRemove = e.target.closest(".chip-remove[data-dim]");
+ if (chipRemove) {
+ const dim = chipRemove.dataset.dim;
+ const val = chipRemove.dataset.val;
+ if (dim && val) toggleFilter(dim, val);
+ }
+ // reset all
+ if (e.target.closest("#filter-reset")) clearFilters();
+
+ const matrixStatus = e.target.closest('[data-ui-segment="matrix-status"]');
+ if (matrixStatus) {
+ setCapacityMatrixFilter({ status: matrixStatus.dataset.uiValue });
+ return;
+ }
+ const regionChip = e.target.closest('[data-ui-toggle="matrix-region"]');
+ if (regionChip) {
+ const region = regionChip.dataset.uiValue;
+ const current = capacityMatrixFilter().regions;
+ setCapacityMatrixFilter({
+ regions: current.includes(region) ? current.filter((item) => item !== region) : [...current, region],
+ });
+ return;
+ }
+ const markChip = e.target.closest('[data-ui-segment="matrix-mark"]');
+ if (markChip) {
+ setCapacityMatrixFilter({ mark: Number(markChip.dataset.uiValue) });
+ return;
+ }
+ if (e.target.closest('[data-ui-action="matrix-reset"]')) {
+ setCapacityMatrixFilter({ status: "all", search: "", regions: [] });
+ return;
+ }
+ const detailTab = e.target.closest('[data-ui-tab="capacity-detail"]');
+ if (detailTab) {
+ setCapacityDetailTab(detailTab.dataset.uiValue);
+ return;
+ }
+ const subscriptionPage = e.target.closest('[data-ui-page="subscriptions"]');
+ if (subscriptionPage && !subscriptionPage.disabled) {
+ state.capacitySubscriptionPage = Number(subscriptionPage.dataset.uiValue);
+ _capacitySubscriptionFocusResults = true;
+ void loadCapacitySubscriptions();
+ return;
+ }
+ const matrixPage = e.target.closest('[data-ui-page="matrix"]');
+ if (matrixPage && !matrixPage.disabled) {
+ state.capacityMatrixPage = Number(matrixPage.dataset.uiValue);
+ render();
+ document.querySelector("#capacity-matrix-summary")?.focus();
+ }
+ });
+
+ document.addEventListener("change", (e) => {
+ const foundryAccount = e.target.closest("select[data-foundry-account]");
+ if (foundryAccount && !state.loading) {
+ state.foundryAccountId = foundryAccount.value || null;
+ void publishCanvasState({ foundryAccountId: state.foundryAccountId });
+ load();
+ return;
+ }
+ const selector = e.target.closest("select[data-capacity-selector]");
+ if (selector) applyCapacitySelection(selector.dataset.capacitySelector, selector.value);
+ });
+
+ let matrixSearchTimer;
+ let subscriptionSearchTimer;
+ document.addEventListener("input", (e) => {
+ const search = e.target.closest('[data-ui-search="matrix"]');
+ if (search) {
+ clearTimeout(matrixSearchTimer);
+ const value = search.value;
+ matrixSearchTimer = setTimeout(() => setCapacityMatrixFilter({ search: value }), 160);
+ return;
+ }
+ const subscriptionSearch = e.target.closest('[data-ui-search="subscription"]');
+ if (subscriptionSearch) {
+ clearTimeout(subscriptionSearchTimer);
+ const value = subscriptionSearch.value;
+ subscriptionSearchTimer = setTimeout(() => {
+ state.capacitySubscriptionSearch = value;
+ state.capacitySubscriptionPage = 1;
+ void loadCapacitySubscriptions();
+ }, 250);
+ }
+ });
+
+ // Keyboard activation and roving focus for interactive data controls.
+ document.addEventListener("keydown", (e) => {
+ const detailTab = e.target.closest('[data-ui-tab="capacity-detail"]');
+ if (detailTab && ["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) {
+ e.preventDefault();
+ const tabs = ["matrix", "subscriptions"];
+ const current = tabs.indexOf(detailTab.dataset.uiValue);
+ const next = e.key === "Home" ? 0
+ : e.key === "End" ? tabs.length - 1
+ : e.key === "ArrowRight" ? (current + 1) % tabs.length
+ : (current - 1 + tabs.length) % tabs.length;
+ setCapacityDetailTab(tabs[next]);
+ return;
+ }
+ const segment = e.target.closest("[data-ui-segment]");
+ if (segment && ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) {
+ e.preventDefault();
+ const order = segment.dataset.uiSegment === "matrix-status"
+ ? matrixStatusFilters(state.capacityClass).map((item) => item.id)
+ : segment.dataset.uiSegment === "matrix-mark"
+ ? HIGH_WATER_MARKS.map(String)
+ : [];
+ if (!order.length) return;
+ const index = order.indexOf(segment.dataset.uiValue);
+ const next = nextCapacityTabIndex(index, e.key, order.length);
+ if (next >= 0) {
+ setCapacityMatrixFilter(segment.dataset.uiSegment === "matrix-status"
+ ? { status: order[next] }
+ : { mark: Number(order[next]) });
+ }
+ return;
+ }
+ const capacityTab = e.target.closest("[data-capacity-class]");
+ if (capacityTab) {
+ if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) {
+ e.preventDefault();
+ moveCapacityTabFocus(capacityTab, e.key);
+ return;
+ }
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ selectCapacityClass(capacityTab.dataset.capacityClass);
+ return;
+ }
+ }
+ if (e.key !== "Enter" && e.key !== " ") return;
+ const hbarRow = e.target.closest(".hbar-filterable[data-filter-dim]");
+ if (hbarRow) {
+ e.preventDefault();
+ const dim = hbarRow.dataset.filterDim;
+ const val = hbarRow.dataset.filterVal;
+ if (dim && val) toggleFilter(dim, val);
+ }
+ });
+
+ let t;
+ window.addEventListener("resize", () => { clearTimeout(t); t = setTimeout(render, 180); });
+}
+
+async function init() {
+ try {
+ const [cfg, sharedState] = await Promise.all([
+ fetch("/api/config").then((r) => r.json()),
+ fetch("/api/session-state").then((r) => r.json()),
+ ]);
+ window.__cfg = cfg;
+ if (Number.isInteger(sharedState.revision)) {
+ state.tab = sharedState.tab;
+ state.preset = sharedState.preset;
+ state.filters = sharedState.filters || {};
+ state.capacityClass = sharedState.capacityClass || "home";
+ state.capacitySelections = sharedState.capacitySelections || {};
+ state.foundryPreset = sharedState.foundryPreset || "7d";
+ state.foundryAccountId = sharedState.foundryAccountId || null;
+ state.revision = sharedState.revision;
+ }
+ } catch { window.__cfg = {}; }
+ wireControls();
+ syncCanvasControls();
+
+ // Restore tab from URL hash (bookmarking / back-forward support), or
+ // normalize the hash to reflect the default tab so the URL is always
+ // shareable.
+ const initialTab = tabFromHash();
+ const initialCapacityClass = capacityClassFromHash();
+ if (initialCapacityClass) state.capacityClass = initialCapacityClass;
+ const initialHash = (initialTab || state.tab) === "capacity"
+ ? `#tab=capacity&capacity=${state.capacityClass}`
+ : `#tab=${initialTab || state.tab}`;
+ if (initialTab && initialTab !== state.tab) {
+ switchTab(initialTab, { skipHash: true });
+ history.replaceState({ tab: initialTab, capacityClass: state.capacityClass }, "", initialHash);
+ } else {
+ history.replaceState({ tab: state.tab, capacityClass: state.capacityClass }, "", initialHash);
+ revealActiveTab();
+ load();
+ }
+
+ window.addEventListener("popstate", () => {
+ const tab = tabFromHash() || "overview";
+ const capacityClass = capacityClassFromHash() || "home";
+ if (tab === "capacity") state.capacityClass = capacityClass;
+ if (tab !== state.tab) switchTab(tab, { skipHash: true });
+ else if (tab === "capacity") selectCapacityClass(capacityClass, { skipHash: true, skipPublish: true, force: true });
+ });
+ setInterval(pollCanvasState, 1000);
+}
+
+if (typeof window !== "undefined" && typeof document !== "undefined") init();
diff --git a/.github/extensions/ftk-local-dashboard/public/index.html b/.github/extensions/ftk-local-dashboard/public/index.html
new file mode 100644
index 000000000..9981ac1aa
--- /dev/null
+++ b/.github/extensions/ftk-local-dashboard/public/index.html
@@ -0,0 +1,104 @@
+
+
+
+ FinOps hub dashboard
+
+ Cost overview
+ Allocation
+ Rate optimization
+ Usage & unit economics
+ Anomalies & forecast
+ Tokenomics
+ AI Foundry
+ Foundry agents
+ AI & emerging workloads
+ Supply
+ Query editor
+
+
+
+
Filtered by
+
+
Reset all
+
+ Loading cost data…
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/.github/extensions/ftk-local-dashboard/public/ui.css b/.github/extensions/ftk-local-dashboard/public/ui.css
new file mode 100644
index 000000000..1f695a04c
--- /dev/null
+++ b/.github/extensions/ftk-local-dashboard/public/ui.css
@@ -0,0 +1,266 @@
+.ui-filter-bar {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-end;
+ gap: 10px 16px;
+ margin-bottom: 12px;
+}
+
+.ui-control-group {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ min-width: 0;
+}
+
+.ui-control-label {
+ color: var(--muted);
+ font-size: 10.5px;
+ font-weight: 600;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+}
+
+.ui-segments {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 4px;
+}
+
+.ui-segments--scroll {
+ max-height: 74px;
+ overflow-y: auto;
+ overscroll-behavior: contain;
+ scrollbar-width: thin;
+}
+
+.ui-segment,
+.ui-button {
+ min-height: 28px;
+ border: 1px solid var(--grid);
+ background: transparent;
+ color: var(--text);
+ font: inherit;
+ font-size: 11.5px;
+ cursor: pointer;
+}
+
+.ui-segment {
+ display: inline-flex;
+ align-items: baseline;
+ gap: 6px;
+ padding: 4px 10px;
+ border-radius: 999px;
+}
+
+.ui-button {
+ padding: 4px 10px;
+ border-radius: 6px;
+}
+
+.ui-segment:hover,
+.ui-button:hover { border-color: var(--muted); }
+
+.ui-segment[aria-checked="true"],
+.ui-segment[aria-pressed="true"],
+.ui-segment[aria-selected="true"] {
+ border-color: var(--accent, var(--text));
+ background: color-mix(in srgb, var(--muted) 14%, transparent);
+ font-weight: 600;
+}
+
+.ui-segment-count {
+ color: var(--muted);
+ font-size: 10.5px;
+ font-variant-numeric: tabular-nums;
+}
+
+.ui-segment[aria-checked="true"] .ui-segment-count,
+.ui-segment[aria-pressed="true"] .ui-segment-count,
+.ui-segment[aria-selected="true"] .ui-segment-count { color: inherit; }
+
+.ui-search {
+ min-width: 190px;
+ min-height: 28px;
+ padding: 4px 9px;
+ border: 1px solid var(--grid);
+ border-radius: 6px;
+ background: var(--card-bg);
+ color: var(--text);
+ font: inherit;
+ font-size: 12px;
+}
+
+.ui-segment:focus-visible,
+.ui-button:focus-visible,
+.ui-search:focus-visible {
+ outline: 2px solid var(--accent, var(--text));
+ outline-offset: 2px;
+}
+
+.ui-button:disabled { opacity: 0.45; cursor: not-allowed; }
+
+.ui-filter-summary {
+ margin-left: auto;
+ color: var(--muted);
+ font-size: 11.5px;
+ font-variant-numeric: tabular-nums;
+}
+
+.ui-filter-summary .ui-button { margin-left: 8px; }
+
+.ui-tabs {
+ display: flex;
+ gap: 4px;
+ margin-bottom: 12px;
+}
+
+.ui-pagination {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 10px;
+ margin-top: 10px;
+ color: var(--muted);
+ font-size: 11.5px;
+ font-variant-numeric: tabular-nums;
+}
+
+.ui-matrix-viewport {
+ max-height: min(70vh, 620px);
+ overflow: auto;
+ overscroll-behavior: contain;
+ scrollbar-gutter: stable;
+ border: 1px solid var(--grid);
+ border-radius: var(--radius);
+ scrollbar-width: auto;
+ scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
+}
+
+.ui-matrix-viewport::-webkit-scrollbar { width: 12px; height: 12px; }
+.ui-matrix-viewport::-webkit-scrollbar-track { background: color-mix(in srgb, var(--muted) 10%, transparent); }
+.ui-matrix-viewport::-webkit-scrollbar-thumb {
+ border: 3px solid var(--card-bg);
+ border-radius: 999px;
+ background: color-mix(in srgb, var(--muted) 45%, transparent);
+}
+.ui-matrix-viewport::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 70%, transparent); }
+.ui-matrix-viewport::-webkit-scrollbar-corner { background: var(--card-bg); }
+
+.ui-matrix {
+ width: auto;
+ border-spacing: 0;
+ border-collapse: separate;
+ font-size: 12px;
+}
+
+.ui-matrix th {
+ min-width: 120px;
+ padding: 7px;
+ color: var(--muted);
+ font-size: 11px;
+ text-align: left;
+}
+
+.ui-matrix thead th {
+ position: sticky;
+ top: 0;
+ z-index: 2;
+ border-bottom: 1px solid var(--grid);
+ background: var(--card-bg);
+ white-space: nowrap;
+}
+
+.ui-matrix tbody th:first-child {
+ position: sticky;
+ left: 0;
+ z-index: 1;
+ min-width: 200px;
+ border-right: 1px solid var(--grid);
+ border-bottom: 1px solid var(--grid);
+ background: var(--card-bg);
+}
+
+.ui-matrix thead th:first-child {
+ z-index: 3;
+ min-width: 200px;
+ border-right: 1px solid var(--grid);
+}
+
+.ui-matrix-cell {
+ min-width: 132px;
+ padding: 9px;
+ border-width: 0 1px 1px 0;
+ border-style: solid;
+ border-color: var(--grid);
+ background: color-mix(in srgb, var(--muted) 5%, var(--card-bg));
+}
+
+.ui-matrix-cell strong,
+.ui-matrix-cell span { display: block; overflow-wrap: anywhere; }
+.ui-matrix-cell strong { font-variant-numeric: tabular-nums; }
+.ui-matrix-cell span { margin-top: 3px; color: var(--muted); font-size: 11px; }
+.ui-matrix-cell--missing { color: var(--muted); }
+
+.ui-matrix-cell.capacity-supply--open { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pos) 55%, transparent); }
+.ui-matrix-cell.capacity-supply--partial { box-shadow: inset 3px 0 0 var(--warn); }
+.ui-matrix-cell.capacity-supply--blocked {
+ box-shadow: inset 3px 0 0 var(--neg);
+ background: color-mix(in srgb, var(--neg) 7%, var(--card-bg));
+}
+.ui-matrix-cell--missing,
+.ui-matrix-cell.capacity-supply--none { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--muted) 35%, transparent); }
+
+.ui-matrix-note {
+ margin: 0 0 8px;
+ color: var(--muted);
+ font-size: 11.5px;
+}
+
+.ui-legend {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px 28px;
+ margin: 0 0 10px;
+ color: var(--muted);
+ font-size: 11px;
+}
+
+.ui-legend-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
+.ui-legend-title { color: var(--text-color-default, #1f2328); font-weight: 600; }
+.ui-legend ul { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; }
+.ui-legend li { display: flex; align-items: center; gap: 5px; }
+.ui-legend-bar { width: 3px; height: 12px; border-radius: 1px; background: var(--grid); }
+.ui-legend-bar--open { background: color-mix(in srgb, var(--pos) 55%, transparent); }
+.ui-legend-bar--partial { background: var(--warn); }
+.ui-legend-bar--blocked { background: var(--neg); }
+.ui-legend-bar--none { background: color-mix(in srgb, var(--muted) 35%, transparent); }
+.ui-legend-ink { font-size: 11px; font-variant-numeric: tabular-nums; }
+.ui-legend-ink.capacity-demand--under { color: var(--text-color-default, #1f2328); }
+.ui-legend-ink.capacity-demand--over,
+.ui-legend-ink.capacity-demand--exhausted { color: var(--neg-ink); font-weight: 700; }
+.ui-legend-ink.capacity-demand--exhausted { text-decoration: underline; text-decoration-thickness: 2px; }
+
+.ui-matrix-cell .capacity-offer-status { margin-top: 4px; font-weight: 600; }
+.ui-matrix-cell .capacity-offer-status--restricted { color: var(--neg-ink); }
+.ui-matrix-cell .capacity-offer-status--warning,
+.ui-matrix-cell .capacity-zone--restricted { color: var(--warn-ink); font-weight: 600; }
+.ui-matrix-cell .capacity-offer-status--available,
+.ui-matrix-cell .capacity-zone--available { color: var(--muted); }
+.ui-matrix-cell .capacity-zone { margin-top: 2px; font-size: 10.5px; white-space: nowrap; }
+.ui-matrix-cell .capacity-cell-mark { color: var(--neg-ink); font-weight: 600; }
+.ui-matrix-cell .capacity-cell-detail { color: var(--muted); font-size: 11px; }
+.ui-matrix-cell.capacity-demand--over strong { color: var(--neg-ink); font-weight: 700; }
+.ui-matrix-cell.capacity-demand--exhausted strong {
+ color: var(--neg-ink);
+ font-weight: 700;
+ text-decoration: underline;
+ text-decoration-thickness: 2px;
+ text-underline-offset: 2px;
+}
+
+.ui-cell-status { margin-top: 4px; font-weight: 600; }
+.ui-cell-status--danger { color: var(--neg-ink) !important; }
+.ui-cell-status--warning { color: var(--warn-ink) !important; }
+.ui-cell-status--available,
+.ui-cell-status--muted { color: var(--muted); }
diff --git a/.github/extensions/ftk-local-dashboard/public/ui.js b/.github/extensions/ftk-local-dashboard/public/ui.js
new file mode 100644
index 000000000..9f1d0bf2c
--- /dev/null
+++ b/.github/extensions/ftk-local-dashboard/public/ui.js
@@ -0,0 +1,111 @@
+"use strict";
+
+function escapeHtml(value) {
+ return String(value ?? "").replace(/[&<>"']/g, (char) => ({
+ "&": "&",
+ "<": "<",
+ ">": ">",
+ '"': """,
+ "'": "'",
+ })[char]);
+}
+
+function controlName(value) {
+ const name = String(value ?? "");
+ if (!/^[a-z][a-z0-9-]*$/.test(name)) throw new Error(`Invalid UI control name '${name}'.`);
+ return name;
+}
+
+export function uiSegmentedControl({ name, label, labelId, items = [], selected }) {
+ const control = controlName(name);
+ return `
+
${escapeHtml(label)}
+
+ ${items.map((item) => {
+ const active = String(item.value) === String(selected);
+ return `${escapeHtml(item.label)}
+ ${item.count == null ? "" : `${escapeHtml(item.count)} `} `;
+ }).join("")}
+
+
+
${escapeHtml(label)}
+
+ ${items.map((item) => `${escapeHtml(item.label)} `).join("")}
+
+
+ ${escapeHtml(label)}
+ `;
+}
+
+export function uiFilterBar({ ariaLabel, controls, summary, resetLabel = null, resetAction = "reset" }) {
+ const action = controlName(resetAction);
+ return `
+ ${controls}
+
${escapeHtml(summary)}
+ ${resetLabel ? `${escapeHtml(resetLabel)} ` : ""}
+
+
+ ${tabs.map((tab) => {
+ const selected = tab.id === active;
+ return `${escapeHtml(tab.label)} `;
+ }).join("")}
+
+ ${panel}
`;
+}
+
+export function uiPagination({ name, page, totalPages, label }) {
+ if (totalPages <= 1) return "";
+ const control = controlName(name);
+ return ``;
+}
+
+export function uiDataMatrix({
+ ariaLabel,
+ descriptionId,
+ rowHeader,
+ rows = [],
+ columns = [],
+ renderCell,
+ missingText = "Not reported",
+}) {
+ return `
+
+ ${escapeHtml(rowHeader)} ${columns.map((column) => `${escapeHtml(column)} `).join("")}${rows.map((row) => `
+ ${escapeHtml(row.label)}
+ ${columns.map((column) => renderCell(row, column) || `${escapeHtml(missingText)} `).join("")}
+ `).join("")}
+
+