/* ═══════════════════════════════════════════════════════════════════ HeaderUsageMeters.jsx — persistent top-bar usage-meter widget (OL-054) Session: 2026-07-02 PM-2 ═══════════════════════════════════════════════════════════════════ Compact top-bar pill (worst-meter % + color state) → click opens a popover with all four per-cost-type meters (AI Actions · Image Ops · Doc Ops · SEO/GEO Data), each rendering: · floor progress bar (use-or-lose monthly floor) · pack-credits-remaining line (non-expiring — distinct visual, so the Consumption-Order Rule floor→pack→overage is VISIBLE) · days-left-in-cycle · pack_cta button (routes to Billing) · auto-refill toggle (opt-in framing — never pre-checked; reflects the server's real state, which defaults OFF) ── LOCKED contract (work-order 2026-07-02 PM-2; api lane builds in parallel) ──────────────────────────────────────────────────────── GET {apiBase}/api/usage/meters → { cycle_days_left, resets_at, meters: [{ key, label, floor_used, included_floor, // LIVE api#121 name (floor_limit tolerated); // null ⇒ no allowance (inert Nerve / not on plan) pack_remaining, // non-expiring pack/add-on credits byok_exempt, // true → AI-cost portion is "your key" hard_stopped, // true → meter is hard-stopped auto_refill, // server's current opt-in state days_left, // optional per-meter override pack_cta: { label, tab }, // upsell target sub_caps: [{ label, used, limit }] // infra caps (always shown) }, ...] } Field names are read defensively (snake/camel tolerated) so a rename can't silently blank the surface. ── Honest states (Radical Transparency §3 #27 — no false zeros) ────── · endpoint 404 / absent (api round not merged yet) → render NOTHING. · fetch error → render NOTHING. · loading → skeleton pill, never a fabricated 0%. · included_floor: null (inert Nerve / not on plan) → "No allowance on your plan yet" — never 0/0, never a bar, never NaN%. · byok_exempt → "Unlimited — your key"; any pack credits shown as PAUSED (non-spendable), not decrementing. ── Role completeness (work-order top-bar rule) ────────────────────── Rendered by Topbar (Shell.jsx) ONLY when the effective VIEW role (s.role) is 'customer' or 'internal_partner'. A real customer / internal_partner sees it directly; every staff persona sees it ONLY inside an SA "View as customer/partner" account-context view (View-As sets s.role to the account role — so the same s.role gate covers both the customer path AND the SA account-context path). Staff own-views (super_admin, admin, dev, support, marketing staff) → hidden. CSS-only colors (var(--ok)/var(--warn)/var(--danger) with token fallbacks) — never hardcoded semantic hex (§3 #5). ── Analytics (§6 #32) ─────────────────────────────────────────────── usage.meters.viewed (dotted KNOWN_EVENT_TYPES key, api main post-#122) fires once per popover-open to the customer-scoped ingest POST /client/events/track (account_id/user_id from the JWT, fire-and-forget, never blocks UI). Load order: after Toggle.jsx (reused) + Icon.jsx; before Shell.jsx. Registers: window.HeaderUsageMeters (Topbar consumer). ═══════════════════════════════════════════════════════════════════ */ (function () { 'use strict'; if (typeof window === 'undefined' || !window.React) return; const { useState, useEffect, useRef, useCallback } = React; const tx = (k, v, f) => (window.WPSB && window.WPSB.t) ? window.WPSB.t(k, v, f) : (f != null ? f : k); /* LOCKED path per work-order. apiBase is set at boot (index.html); the hardcoded origin is the belt-and-suspenders fallback (never resolve to the app's own origin — that Vercel-404s). */ const METERS_PATH = '/api/usage/meters'; function apiBase() { return (window.WPSBD && window.WPSBD.apiBase) || (window.WPSB_CONFIG && window.WPSB_CONFIG.RAILWAY_URL) || window.RAILWAY_URL || 'https://api.wpsitebeam.io'; } function authToken() { return (window.WPSB && window.WPSB.getToken && window.WPSB.getToken()) || (window.WPSBD && window.WPSBD.getToken && window.WPSBD.getToken()) || null; } function switchTab(tab) { if (window.WPSBD && window.WPSBD.switchTab) window.WPSBD.switchTab(tab || 'billing'); } /* Customer-scoped client analytics ingest — account_id/user_id come from the JWT server-side; NEVER sent in the body. Fire-and-forget: any failure is swallowed so analytics can never block or break the surface. Targets /client/events/track (NOT the SA-only /events/track). */ function emitClientEvent(eventType, props) { try { const token = authToken(); if (!token) return; fetch(apiBase() + '/client/events/track', { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token }, body: JSON.stringify({ event_type: eventType, props: props || {} }), }).catch(function () {}); } catch (_) { /* swallow */ } } /* ── defensive readers (snake/camel tolerant) ────────────────────── */ function pick(o, keys, dflt) { for (let i = 0; i < keys.length; i++) { if (o && o[keys[i]] != null) return o[keys[i]]; } return dflt === undefined ? null : dflt; } function num(v) { const n = Number(v); return Number.isFinite(n) ? n : null; } function readMeter(m) { return { key: pick(m, ['key', 'id', 'meter'], ''), label: pick(m, ['label', 'name', 'title'], tx('page.usagemeters.meter_fallback', null, 'Meter')), floorUsed: num(pick(m, ['floor_used', 'floorUsed', 'used'])), /* included_floor is the LIVE api#121 field (returns null while a Nerve — e.g. seo_geo — is inert / not on the plan). Null floor ⇒ no-allowance state, never 0/0 or a NaN% bar. */ floorLimit: num(pick(m, ['included_floor', 'includedFloor', 'floor_limit', 'floorLimit', 'limit'])), packRemaining:num(pick(m, ['pack_remaining', 'packRemaining', 'pack_credits_remaining', 'packCreditsRemaining'])), byokExempt: !!pick(m, ['byok_exempt', 'byokExempt'], false), hardStopped: !!pick(m, ['hard_stopped', 'hardStopped'], false), autoRefill: !!pick(m, ['auto_refill', 'autoRefill'], false), daysLeft: num(pick(m, ['days_left', 'daysLeft'])), packCta: pick(m, ['pack_cta', 'packCta'], null), subCaps: (pick(m, ['sub_caps', 'subCaps'], []) || []).map(function (s) { return { label: pick(s, ['label', 'name'], tx('page.usagemeters.cap_fallback', null, 'Cap')), used: num(pick(s, ['used', 'value'])), limit: num(pick(s, ['limit', 'max'])), }; }), }; } /* Percentage a meter fills its floor (0..100). Null floor → null. */ function floorPct(mm) { if (mm.floorLimit == null || mm.floorLimit <= 0 || mm.floorUsed == null) return null; return Math.max(0, Math.min(100, Math.round((mm.floorUsed / mm.floorLimit) * 100))); } /* Worst sub-cap pressure for a meter (infra caps still bind under BYOK). */ function subCapPct(mm) { let worst = null; (mm.subCaps || []).forEach(function (s) { if (s.limit == null || s.limit <= 0 || s.used == null) return; const p = Math.max(0, Math.min(100, Math.round((s.used / s.limit) * 100))); worst = worst == null ? p : Math.max(worst, p); }); return worst; } /* A meter's overall pressure for the pill: hard-stop pins 100; a BYOK-exempt meter contributes only its infra sub-caps (AI portion is unlimited); otherwise the floor %. */ function meterPressure(mm) { if (mm.hardStopped) return 100; if (mm.byokExempt) { const s = subCapPct(mm); return s == null ? 0 : s; } const f = floorPct(mm); if (f == null) { const s = subCapPct(mm); return s == null ? 0 : s; } const s = subCapPct(mm); return s == null ? f : Math.max(f, s); } /* No plan allowance: floor is null/absent (e.g. included_floor:null for an inert Nerve like seo_geo) AND no pack credits. Render an honest "no allowance" line — never 0/0, never a bar, never NaN%. A BYOK-exempt meter is "unlimited", not "no allowance". */ function hasNoAllowance(mm) { return !mm.byokExempt && mm.floorLimit == null && !(mm.packRemaining != null && mm.packRemaining > 0); } /* State → color token (CSS vars only; fallbacks because --ok/--danger are used-with-fallback elsewhere in the app and not base-defined). */ function toneFor(pct, hardStopped) { if (hardStopped || pct >= 90) return 'var(--danger, var(--red))'; if (pct >= 75) return 'var(--warn)'; return 'var(--ok, var(--green))'; } function toneTintFor(pct, hardStopped) { if (hardStopped || pct >= 90) return 'rgba(255,112,112,.12)'; if (pct >= 75) return 'rgba(245,184,0,.12)'; return 'rgba(0,217,122,.10)'; } /* ── small bits ──────────────────────────────────────────────────── */ function Bar({ pct, tone, height }) { const h = height || 6; return (
); } function MeterRow({ mm, onCta, onAutoRefill }) { const pct = floorPct(mm); const press = meterPressure(mm); const tone = toneFor(press, mm.hardStopped); const cta = mm.packCta; const ctaLabel = cta && (cta.label || cta.cta) || tx('page.usagemeters.buy_a_pack', null, 'Buy a pack'); const ctaTab = cta && (cta.tab || cta.target) || 'billing'; return (
{/* header line: label + state chip */}
{mm.label} {mm.hardStopped ? ( {tx('page.usagemeters.limit_reached', null, 'LIMIT REACHED')} ) : mm.byokExempt ? ( {tx('page.usagemeters.your_key', null, 'YOUR KEY')} ) : pct != null ? ( {pct}% ) : null}
{/* floor line: use-or-lose monthly allowance. Cycle days-left lives once in the popover header, not repeated per meter. */} {mm.byokExempt ? (
{tx('page.usagemeters.unlimited_your_key', null, 'Unlimited — your key')}
) : pct != null ? ( <>
{(mm.floorUsed || 0).toLocaleString()} {tx('page.usagemeters.floor_suffix', { limit: (mm.floorLimit || 0).toLocaleString() }, ' / {limit} monthly')}
) : ( /* included_floor:null (inert Nerve / not on plan) — honest no-allowance state, never 0/0 or a bar (Radical Transparency §3 #27). */
{tx('page.usagemeters.no_allowance', null, 'No allowance on your plan yet')}
)} {/* pack credits — NON-EXPIRING. Rendered as a spendable dashed pill only when they can actually decrement. Under BYOK the AI-cost meter is billed to the customer's key, so its pack credits are PAUSED — render a muted, non-spendable annotation instead (never show frozen credits as spendable). */} {mm.packRemaining != null && mm.packRemaining > 0 && ( mm.byokExempt ? (
{tx('page.usagemeters.pack_paused', { count: mm.packRemaining.toLocaleString() }, '{count} pack credits · not consumed while your key is active')}
) : (
{tx('page.usagemeters.pack_spendable', { count: mm.packRemaining.toLocaleString() }, '+{count} pack credits · never expire')}
) )} {/* infra sub-caps — always shown (bind even under BYOK) */} {(mm.subCaps || []).map(function (s, i) { const sp = (s.limit != null && s.limit > 0 && s.used != null) ? Math.max(0, Math.min(100, Math.round((s.used / s.limit) * 100))) : null; return (
{s.label} {sp != null ? {(s.used || 0).toLocaleString()} / {(s.limit || 0).toLocaleString()} : —}
{sp != null && }
); })} {/* controls: pack CTA + auto-refill (opt-in framing) */}
{/*
); } /* ── main widget ─────────────────────────────────────────────────── */ function HeaderUsageMeters() { const [state, setState] = useState('loading'); /* loading | ready | hidden */ const [data, setData] = useState(null); const [open, setOpen] = useState(false); const rootRef = useRef(null); const viewedRef = useRef(false); /* fetch once on mount. 404 / absent / error → hidden (render nothing). */ useEffect(function () { let live = true; const token = authToken(); if (!token) { setState('hidden'); return; } fetch(apiBase() + METERS_PATH, { headers: { Authorization: 'Bearer ' + token } }) .then(function (r) { if (!r.ok) return null; /* 404/5xx → hidden */ return r.json().catch(function () { return null; }); }) .then(function (j) { if (!live) return; const meters = j && (j.meters || j.data || j.usage); if (!Array.isArray(meters) || !meters.length) { setState('hidden'); return; } setData({ cycleDaysLeft: num(pick(j, ['cycle_days_left', 'cycleDaysLeft', 'days_left'])), resetsAt: pick(j, ['resets_at', 'resetsAt'], null), meters: meters.map(readMeter), }); setState('ready'); }) .catch(function () { if (live) setState('hidden'); }); return function () { live = false; }; }, []); /* close popover on outside click + Escape */ useEffect(function () { if (!open) return; const onDoc = function (e) { if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false); }; const onKey = function (e) { if (e.key === 'Escape') setOpen(false); }; document.addEventListener('mousedown', onDoc); document.addEventListener('keydown', onKey); return function () { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); }; }, [open]); const togglePopover = useCallback(function () { setOpen(function (v) { const next = !v; if (next && !viewedRef.current) { viewedRef.current = true; /* once per mount is enough for the view event */ emitClientEvent('usage.meters.viewed', { meters: data ? data.meters.length : 0 }); } return next; }); }, [data]); const onCta = useCallback(function (tab) { setOpen(false); switchTab(tab); }, []); /* Auto-refill write — optimistic; reverts + toasts honestly on failure (Radical Transparency: never claim a write that didn't land). The write contract mirrors the read path; a 404 (api round not merged) reverts. */ const onAutoRefill = useCallback(function (mm, enabled) { setData(function (d) { if (!d) return d; return { ...d, meters: d.meters.map(function (x) { return x.key === mm.key ? { ...x, autoRefill: enabled } : x; }) }; }); const token = authToken(); fetch(apiBase() + METERS_PATH + '/auto-refill', { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token }, body: JSON.stringify({ meter: mm.key, enabled: enabled }), }).then(function (r) { if (!r.ok) throw new Error('HTTP ' + r.status); if (window.wpsbToast) window.wpsbToast(tx('page.usagemeters.auto_refill_toast', { state: enabled ? tx('page.usagemeters.on', null, 'on') : tx('page.usagemeters.off', null, 'off'), label: mm.label }, 'Auto-refill {state} — {label}'), 'ok'); }).catch(function () { /* revert */ setData(function (d) { if (!d) return d; return { ...d, meters: d.meters.map(function (x) { return x.key === mm.key ? { ...x, autoRefill: !enabled } : x; }) }; }); if (window.wpsbToast) window.wpsbToast(tx('page.usagemeters.auto_refill_error', null, "Couldn't update auto-refill — try again"), 'err'); }); }, []); if (state === 'hidden') return null; if (state === 'loading') { /* skeleton pill — never a fabricated 0% */ return ( ); } /* ready */ const meters = data.meters; const stopped = meters.filter(function (m) { return m.hardStopped; }); const anyStopped = stopped.length > 0; /* Banner names the meter(s) so the customer knows WHICH limit hit. CTA routes to the stopped meter's own pack CTA when there's exactly one, else Billing. */ const stoppedNames = stopped.map(function (m) { return m.label; }); const stopBannerText = stopped.length === 1 ? tx('page.usagemeters.stop_banner_one', { name: stoppedNames[0] }, '{name} has reached its limit. Buy a pack or turn on auto-refill to keep going.') : tx('page.usagemeters.stop_banner_many', { count: stoppedNames.length }, '{count} meters have reached their limit. Buy a pack or turn on auto-refill to keep going.'); const stopCtaTab = (stopped.length === 1 && stopped[0].packCta && (stopped[0].packCta.tab || stopped[0].packCta.target)) || 'billing'; const worst = meters.reduce(function (a, m) { return Math.max(a, meterPressure(m)); }, 0); const tone = toneFor(worst, anyStopped); const tint = toneTintFor(worst, anyStopped); return (
{open && (
{tx('page.usagemeters.usage_this_cycle', null, 'Usage this cycle')} {data.cycleDaysLeft != null && ( {tx('page.usagemeters.days_left', { days: data.cycleDaysLeft }, '{days}d left')} )}
{anyStopped && (
{stopBannerText}
)}
{meters.map(function (mm, i) { return ; })}
{tx('page.usagemeters.footer_note', null, 'Monthly floor is use-or-lose; pack credits never expire and are used after the floor.')}
)}
); } window.HeaderUsageMeters = HeaderUsageMeters; console.log('[WPSB] HeaderUsageMeters (OL-054) loaded'); })();