/* Billing & contract panels: hybrid seat-based vs enterprise prepaid commit, plus Metronome threshold alerts. */ (function () { const { useState, useEffect } = React; const Icon = window.Icon; const { fmtUSD, fmtNum, fmtCompact } = window.FMT; const U = window.UI; const { Card, Badge, Progress, Donut, Segmented, MetronomeBadge, useMeasure, C, cx } = U; const MODEL_COLORS = [C.indigoDeep || "#008A8E", C.indigo, C.sky, C.slate]; // ---- small local helpers ---- function Stat({ label, value, sub }) { return (
{label}
{value}
{sub &&
{sub}
}
); } // ================= Threshold alert (Metronome notification) ================= function AlertBanner({ client, model }) { const h = client.billing.hybrid, cm = client.billing.commit; let a = null; if (model === "hybrid") { if (h.gated) a = { tone: "rose", title: "AI access paused — monthly credits depleted", body: `All ${fmtNum(h.included)} pooled credits for this cycle are consumed and no top-up packs are active. Agents are gated until a top-up is purchased or credits reset ${h.resetDate}.`, cta: "Purchase top-up", }; else if (h.pct >= 88) a = { tone: "amber", title: `Low credit balance — ${Math.max(0, 100 - h.pct).toFixed(0)}% of pool remaining`, body: `${fmtNum(h.monthlyRemaining)} of ${fmtNum(h.included)} pooled credits left this cycle. Metronome low-balance threshold fired. Enable auto top-up to avoid an interruption.`, cta: "Review top-up", }; } else if (cm.willOverage) a = { tone: "amber", title: `Commit pacing ahead — projected to exhaust in ${cm.exhaustMonthLabel}`, body: `${cm.currentPeriod.label} allotment of ${fmtUSD(cm.currentPeriod.allotment, { compact: true })} is ${cm.currentPeriod.pct.toFixed(0)}% drawn down by month ${cm.currentPeriod.elapsedMonths}. At the current burn rate the prepaid commit is exhausted before period end and rolls into overage.`, cta: "Accelerate Year 3 allotment", }; if (!a) return null; const tone = a.tone === "rose" ? { wrap: "border-rose-500/30 bg-rose-500/[0.07]", ic: "text-rose-400 bg-rose-500/12", btn: "bg-rose-500 hover:bg-rose-600" } : { wrap: "border-amber-500/30 bg-amber-500/[0.07]", ic: "text-amber-400 bg-amber-500/12", btn: "bg-amber-500 hover:bg-amber-600" }; return (
{a.title}

{a.body}

); } // ================= Commit burn-down chart ================= function CommitBurnDown({ commit, height = 178 }) { const [ref, w] = useMeasure(); const data = commit.burn, cap = commit.currentPeriod.allotment; const padL = 46, padR = 14, padT = 14, padB = 22; const W = Math.max(w, 220), H = height, iw = W - padL - padR, ih = H - padT - padB; const maxV = Math.max(cap, data[11].projected) * 1.08; const x = (i) => padL + (i / 11) * iw; const y = (v) => padT + ih - (v / maxV) * ih; const actualPts = data.filter((d) => d.actual != null); const aLine = actualPts.map((d, i) => (i ? "L" : "M") + x(i).toFixed(1) + " " + y(d.actual).toFixed(1)).join(" "); const aArea = aLine + ` L${x(actualPts.length - 1).toFixed(1)} ${padT + ih} L${x(0)} ${padT + ih} Z`; const pLine = data.map((d, i) => (i ? "L" : "M") + x(i).toFixed(1) + " " + y(d.projected).toFixed(1)).join(" "); const crossIdx = commit.willOverage ? Math.min(11, Math.max(0, commit.projectedExhaust - 1)) : null; return (
{w > 0 && ( {fmtCompact(cap)} 0 {data.map((d, i) => i % 2 === 0 && {d.month})} {crossIdx != null && ( )} )}
); } // ================= Allotment ramp ================= function AllotmentRamp({ commit }) { const max = Math.max(...commit.accessSchedule.map((s) => s.amount)); return (
{commit.accessSchedule.map((s, i) => { const isCurrent = s.status === "current"; const consumedPct = isCurrent ? commit.currentPeriod.pct : (s.status === "complete" ? 100 : 0); return (
{s.label} {isCurrent && Current} {s.status === "complete" && Complete} {s.status === "upcoming" && Upcoming} {fmtUSD(s.amount, { compact: true })}
); })}
); } // ================= Commit panel ================= function CommitPanel({ client }) { const cm = client.billing.commit, cp = cm.currentPeriod; return (
Allotment schedule (usage ramp)
Invoice schedule (installments)
{cm.invoiceSchedule.map((iv, i) => (
{iv.label}
{iv.when}
{fmtUSD(iv.amount, { compact: true })}{iv.status === "paid" ? Paid : Scheduled}
))}
{cp.label} commit burn-down {cm.willOverage ? Exhausts ~{cm.exhaustMonthLabel} : Under commit}
Negotiated discounts
{cm.discounts.map((d, i) => (
−{Math.round(d.pct * 100)}%{d.tag} · {d.scope}
))}
Applied via rate-card overrides on product tags.
Rollover clause
Up to {Math.round(cm.rolloverFraction * 100)}% of unused commit rolls over on on-time renewal.
Projected: {fmtUSD(cm.rolloverEligible, { compact: true })}
Scheduled charges
{cm.scheduledCharges.map((s, i) => (
{s.label} · {s.when}{fmtUSD(s.amount, { compact: true })}
))}
); } // ================= Hybrid (seat-based) panel ================= function HybridCreditPanel({ client }) { const h = client.billing.hybrid; const models = client.models.map((m, i) => ({ label: m[0], value: m[1], color: MODEL_COLORS[i % MODEL_COLORS.length] })); const monthlyPct = h.included ? (h.used / h.included) * 100 : 0; return (
{h.seats} seats × {fmtNum(h.creditsPerSeat)} credits/seat·mo = {fmtNum(h.included)} pooled credits / month
Monthly includedUse-it-or-lose-it
{fmtNum(h.monthlyRemaining)}
credits left of {fmtNum(h.included)}
= 100 ? C.rose : monthlyPct > 88 ? C.amber : C.emerald} />
Resets {h.resetDate}
Top-up credits1-yr · payment-gated
{h.topups.length ? ( <>
{fmtNum(h.topupTotal)}
credits remaining
{h.topups.map((t, i) => (
{fmtNum(t.credits)} pack · {t.purchased}exp {t.expires}
))}
) : (
No active packs. Top-ups are released only once the Stripe payment confirms, then last a full year.
)}
Spend by model
); } // ================= Section shell with model toggle ================= function BillingSection({ client, model, setModel }) { const isActive = model === client.billing.model; return (

Billing & contract

{model === "commit" ? "Enterprise prepaid commitment, metered against allotment" : "Hybrid subscription + usage-based AI credits"}

{model === "commit" ? : }
{isActive ? <>Active model. {client.name} is billed on this structure today. : <>Preview. Showing how this account would model under a {model === "commit" ? "prepaid enterprise commit" : "hybrid seat-based"} agreement — toggle back to see the live model.}
); } window.Billing = { AlertBanner, BillingSection, CommitPanel, HybridCreditPanel }; })();