Not enough history yet.
;
const vals = series.map((p) => p.value);
const max = Math.max(...vals), min = Math.min(...vals), span = max - min || 1;
const w = 260, hgt = 44;
const pts = series.map((p, i) => `${(i / (series.length - 1)) * w},${hgt - ((p.value - min) / span) * (hgt - 4) - 2}`).join(" ");
return (
{data.status}
checked {fmtAgo(data.checkedAt)}
Refresh
{svc("Postgres", data.checks.postgres)}
{svc("Redis", data.checks.redis)}
{svc("Migrations", data.checks.migrations)}
{gauge("DB connections", cap.connectionsPct, cap.connectionsPct >= 80, `${fmtN(cap.connections)} / ${fmtN(cap.maxConnections)}`)}
{gauge("Database size", Math.min(100, (cap.dbSizeBytes / (8 * 1024 ** 3)) * 100), cap.dbSizeWarn, fmtBytes(cap.dbSizeBytes))}
DB size · 24h
{sizeSeries.data ?
:
}
DB connections · 24h
{connSeries.data ?
:
}
{watchdog.data && (
External watchdog
{watchdog.data.lastCheckedAt ? "last check " + fmtAgo(watchdog.data.lastCheckedAt) : "not running — start apps/watchdog"}
{watchdog.data.targets.length ? (
{watchdog.data.targets.map((t) => (
{dot(t.ok)}{t.target}
{t.uptimePct != null ? t.uptimePct + "% up · 24h" : "—"}{t.latencyMs != null ? " · " + t.latencyMs + "ms" : ""}
))}
) :
No watchdog checks yet. Run apps/watchdog (a separate process) to populate this.
}
)}
{rb.data && rb.data.runbooks && rb.data.runbooks.length > 0 && (
Runbooks — safe, idempotent, rate-limited self-healing
{x.label} },
{ label: "What it does", render: (x) => {x.description} , max: 420 },
{ label: "Last run", render: (x) => x.lastRunAt ? fmtAgo(x.lastRunAt) : "never" },
{ label: "", right: true, render: (x) => !can("security.act") ? — : x.readyInMs > 0 ? cooldown ~{Math.ceil(x.readyInMs / 60000)}m : runRb(x.key)} disabled={rbBusy === x.key} style={{ ...btnGhost, fontSize: 12, padding: "5px 10px", color: "var(--accent)", borderColor: "var(--accent)" }}>{rbBusy === x.key ? "…" : "Run"} },
]} />
)}
Live in-app probe + a 24h metric trend (sampled every 5 min). An in-infra probe can't witness its own infra being fully down — the source of truth for "it's down" is external : the watchdog above runs as a separate process (auto-raises incidents + notifies on state change); pair it with a hosted uptime monitor (Better Stack / UptimeRobot) on /health, Sentry (SENTRY_DSN), and platform auto-restart (Render health checks / Docker restart policy). Runbooks are the first rung of self-healing; auto-remediation stays gated + rate-limited.
);
}
function Security() {
const [hours, setHours] = useState(24);
const [sev, setSev] = useState("");
const summary = useData(() => A.securitySummary(hours), [hours]);
const events = useData(() => A.securityEvents({ sinceHours: hours, severity: sev, limit: 200 }), [hours, sev]);
const blocked = useData(() => A.blockedIps(), []);
const incidents = useData(() => A.incidents({}), []);
const [busy, setBusy] = useState(null);
const block = async (ip) => { const reason = prompt("Reason for blocking " + ip + "?", "manual block from Security board"); if (reason == null) return; setBusy(ip); try { await A.blockIp({ ip, reason, hours: 0 }); await blocked.reload(); await summary.reload(); } catch (e) { alert("Block failed (" + (e.status || "?") + "). Superadmin only."); } setBusy(null); };
const unblock = async (ip) => { if (!confirm("Unblock " + ip + "?")) return; setBusy(ip); try { await A.unblockIp(ip); await blocked.reload(); } catch (e) { alert("Failed"); } setBusy(null); };
const forceLogout = async (userId) => { if (!confirm("Revoke ALL sessions for " + userId + "?")) return; setBusy(userId); try { const r = await A.forceLogout(userId); alert("Revoked " + r.revoked + " session(s)."); } catch (e) { alert("Failed (" + (e.status || "?") + "). Superadmin only."); } setBusy(null); };
const resolveInc = async (id) => { try { await A.updateIncident(id, "resolved"); await incidents.reload(); } catch (e) { alert("Failed"); } };
const s = summary.data;
const sevPill = (v) => {v} ;
return (
SIEM-lite feed from auth / tenant / rate-limit hooks. Detection escalates bursts; response actions need the security capability (support / superadmin) + audited.
setHours(Number(e.target.value))} style={{ ...inp, width: 140, flex: "none" }}>{[1, 24, 168].map((hh) => Last {hh >= 168 ? "7 days" : hh + "h"} )}
{s &&
{[["Events", fmtN(s.total), null], ["High / critical", fmtN((s.bySeverity.high || 0) + (s.bySeverity.critical || 0)), "var(--danger)"], ["Medium", fmtN(s.bySeverity.medium || 0), "var(--warning)"], ["Blocked IPs", fmtN(s.blockedIps), null]].map(([l, v, c], i) => (
))}
}
{blocked.data && blocked.data.blocked.length > 0 &&
Blocked IPs
{b.ip} },
{ label: "Reason", render: (b) => b.reason || "—" },
{ label: "Since", render: (b) => fmtAgo(b.createdAt) },
{ label: "Expires", render: (b) => b.expiresAt ? fmtDate(b.expiresAt) : "permanent" },
{ label: "", right: true, render: (b) => can("security.act") ? unblock(b.ip)} disabled={busy === b.ip} style={{ ...btnGhost, fontSize: 12, padding: "5px 10px" }}>Unblock : — },
]} />
}
{incidents.data && incidents.data.incidents.length > 0 &&
Incidents
{x.kind} },
{ label: "Title", render: (x) => x.title },
{ label: "Severity", render: (x) => sevPill(x.severity) },
{ label: "Status", render: (x) => {x.status} },
{ label: "Opened", render: (x) => fmtAgo(x.openedAt) },
{ label: "", right: true, render: (x) => x.status !== "resolved" && can("security.act") ? resolveInc(x.id)} style={{ ...btnGhost, fontSize: 12, padding: "5px 10px", color: "var(--success)", borderColor: "var(--success)" }}>Resolve : null },
]} />
}
Event feed
setSev(e.target.value)} style={{ ...inp, width: 150, flex: "none", padding: "5px 8px" }}>All severities {["critical", "high", "medium", "low"].map((x) => {x} )}
{events.loading ? {secType(e.type)} },
{ label: "Severity", render: (e) => sevPill(e.severity) },
{ label: "IP", render: (e) => e.ip ? {e.ip} : "—" },
{ label: "User", render: (e) => e.userId ? short(e.userId, 12) : "—" },
{ label: "Path", render: (e) => e.path || "—" },
{ label: "When", render: (e) => fmtAgo(e.createdAt) },
{ label: "", right: true, render: (e) => !can("security.act") ? null :
{e.ip ? block(e.ip)} disabled={busy === e.ip} style={{ ...btnGhost, fontSize: 11.5, padding: "4px 8px", color: "var(--danger)", borderColor: "var(--danger)" }}>Block IP : null}
{e.userId && e.userId.startsWith("usr_") ? forceLogout(e.userId)} disabled={busy === e.userId} style={{ ...btnGhost, fontSize: 11.5, padding: "4px 8px" }}>Force logout : null}
},
]} />}
);
}
function Admins() {
const { loading, data, error, reload } = useData(() => A.adminsList(), []);
const [adding, setAdding] = useState(false);
const [q, setQ] = useState("");
const [busy, setBusy] = useState(null);
const found = useData(() => (q ? A.users({ search: q, limit: 8 }) : Promise.resolve({ users: [] })), [q]);
const setRole = async (userId, role) => { setBusy(userId); try { await A.grantAdmin(userId, role); await reload(); } catch (e) { alert("Failed: " + (e.status || "")); } setBusy(null); };
const revoke = async (userId) => { if (!confirm("Revoke admin access for this user?")) return; setBusy(userId); try { await A.revokeAdmin(userId); await reload(); } catch (e) { alert("Failed"); } setBusy(null); };
const add = async (u, role) => { try { await A.grantAdmin(u.id, role); setAdding(false); setQ(""); await reload(); } catch (e) { alert("Failed: " + (e.status || "")); } };
if (loading) return
Back-office users who can access this cockpit, and their role-rights. Superadmin only.
setAdding((a) => !a)} style={{ ...btnGhost, color: "var(--accent)", borderColor: "var(--accent)" }}>{adding ? "Cancel" : "+ Add admin"}
{adding && (
Grant admin access — find a platform user, then pick a role
setQ(e.target.value)} style={{ ...inp, marginBottom: 8 }} autoFocus />
{((found.data && found.data.users) || []).map((u) => (
{u.email} {u.name || ""}
{ROLE_KEYS.map((role) =>
add(u, role)} style={{ ...btnGhost, fontSize: 12, padding: "5px 9px" }}>{ROLE_LABEL[role]} )}
))}
{q && found.data && !((found.data.users) || []).length &&
No users match.
}
)}
{a.email || short(a.userId, 12)} },
{ label: "Name", render: (a) => a.name || "—" },
{ label: "Role", render: (a) => setRole(a.userId, e.target.value)} style={{ ...inp, padding: "6px 8px", width: 150, flex: "none" }}>{ROLE_KEYS.map((role) => {ROLE_LABEL[role]} )} },
{ label: "Added", render: (a) => fmtDate(a.createdAt) },
{ label: "", right: true, render: (a) => revoke(a.userId)} disabled={busy === a.userId} style={{ ...btnGhost, color: "var(--danger)", borderColor: "var(--danger)", fontSize: 12, padding: "5px 9px" }}>Revoke },
]} />
);
}
// ── Usage & cost (Phase 2) ───────────────────────────────────────────────
function MiniBars({ daily }) {
if (!daily || !daily.length) return null;
const max = Math.max(...daily.map((d) => d.cost), 0.0001);
return (
Metered cost per day
{daily.map((d, i) => (
))}
{daily[0].day} {daily[daily.length - 1].day}
);
}
function Usage() {
const [days, setDays] = useState(30);
const { loading, data, error } = useData(() => A.usage({ days }), [days]);
if (loading) return
{label}
{value}
{sub &&
{sub}
}
);
const avgDaily = t.cost / (overview.days || 30);
return (
Metered platform API calls and their cost. Internal accounting — not billed to customers yet.
setDays(Number(e.target.value))} style={{ ...inp, width: 150, flex: "none" }}>
{[7, 30, 90].map((d) => Last {d} days )}
{card("API calls", fmtN(t.calls), `${fmtN(t.units)} billable units`)}
{card("Metered cost", fmtUsd(t.cost), `${fmtUsd(avgDaily)}/day avg`, "var(--accent)")}
{card("Projected / mo", fmtUsd(avgDaily * 30), "at current run-rate")}
{card("Platforms", fmtN((overview.byPlatform || []).length), (overview.byPlatform || []).filter((p) => p.cost > 0).map((p) => PLAT_LABEL[p.platform] || p.platform).join(", ") || "none metered")}
By platform
PLAT_LABEL[p.platform] || p.platform }, { label: "Calls", right: true, render: (p) => fmtN(p.calls) }, { label: "Cost", right: true, render: (p) => p.cost > 0 ? {fmtUsd(p.cost)} : free }]} rows={overview.byPlatform} empty="No usage yet." />
By operation
OP_LABEL[o.operation] || o.operation }, { label: "Calls", right: true, render: (o) => fmtN(o.calls) }, { label: "Cost", right: true, render: (o) => o.cost > 0 ? {fmtUsd(o.cost)} : free }]} rows={overview.byOperation} empty="No usage yet." />
Top organizations by cost — margin vs. plan price
{o.name} },
{ label: "Category", render: (o) => {CATEGORY[orgCategory(o)]} },
{ label: "Calls", right: true, render: (o) => fmtN(o.calls) },
{ label: "Cost", right: true, render: (o) => {fmtUsd(o.cost)} },
{ label: "Plan / mo", right: true, render: (o) => o.monthlyRevenue != null ? fmtUsd(o.monthlyRevenue) : — },
{ label: "Margin", right: true, render: (o) => { if (o.monthlyRevenue == null) return n/a ; const m = o.monthlyRevenue - o.cost; return = 0 ? "var(--success)" : "var(--danger)" }}>{fmtUsd(m)} ; } },
]} rows={byOrg} empty="No metered usage attributed to any org yet." />
Cost is metered API spend (USD) over the window. Plan price is the org's monthly list price; agency clients bill through their parent agency, so they show n/a margin. Prices are set in Cost catalog .
);
}
// ── AI assistant (read-only) ─────────────────────────────────────────────
// Status + metered spend for the Leap Assistant's LLM. The API key is a deploy
// secret (env var) — it's never read here; we only report configured / not, and
// the metered Anthropic usage. Rotation stays in the hosting secret store.
function AI() {
const [days, setDays] = useState(30);
const { loading, data, error } = useData(() => A.ai({ days }), [days]);
if (loading) return
{label}
{value}
{sub &&
{sub}
}
);
return (
The Leap Assistant's language model — on-arrival briefing and the in-app copilot & support.
setDays(Number(e.target.value))} style={{ ...inp, width: 150, flex: "none" }}>
{[7, 30, 90].map((d) => Last {d} days )}
{/* status banner */}
{on ? "AI assistant active" : "AI assistant not configured"}
{on
? Anthropic key present · model {data.model}
: Set ANTHROPIC_API_KEY in the deploy environment to enable. Without it the assistant serves its deterministic briefing only. }
{on ? "Enabled" : "Fallback"}
{card("LLM calls", fmtN(t.calls), `${fmtN(t.units)} tokens metered`)}
{card("Metered cost", fmtUsd(t.cost), `${fmtUsd(avgDaily)}/day avg`, "var(--accent)")}
{card("Projected / mo", fmtUsd(avgDaily * 30), "at current run-rate")}
{data.caps && (
Daily cap per workspace: {" "}
{data.caps.callCap > 0 ? fmtN(data.caps.callCap) + " calls" : "unlimited calls"} · {data.caps.tokenCap > 0 ? fmtN(data.caps.tokenCap) + " tokens" : "unlimited tokens"}
{data.caps.peakToday
? · busiest workspace today: {fmtN(data.caps.peakToday.calls)} calls / {fmtN(data.caps.peakToday.units)} tokens
: · no assistant usage today }
· resets 00:00 UTC. Set via ASSISTANT_DAILY_CALL_CAP / _TOKEN_CAP .
)}
By operation
OP_LABEL[o.operation] || o.operation },
{ label: "Calls", right: true, render: (o) => fmtN(o.calls) },
{ label: "Tokens", right: true, render: (o) => fmtN(o.units) },
{ label: "Cost", right: true, render: (o) => o.cost > 0 ? {fmtUsd(o.cost)} : free },
]} rows={data.byOperation} empty="No assistant usage yet." />
{/* Engagement analytics (Phase 5) */}
{data.engagement && (() => {
const eng = data.engagement;
const bk = eng.byKind || {};
const kindRows = Object.keys(bk).map((k) => ({ kind: k, n: bk[k] })).sort((a, b) => b.n - a.n);
return (
Engagement
{card("Opens", fmtN(bk.open || 0), `${fmtN((eng.totals || {}).users || 0)} users`)}
{card("Chats", fmtN(bk.chat_message || 0))}
{card("Actions taken", fmtN(eng.confirmed || 0), `${fmtN(eng.dismissed || 0)} dismissed`, "var(--accent)")}
{card("Confirm rate", eng.confirmRate == null ? "—" : Math.round(eng.confirmRate * 100) + "%")}
({ day: r.day, cost: r.n, calls: r.n }))} />
By interaction
KIND_LABEL[r.kind] || r.kind }, { label: "Count", right: true, render: (r) => fmtN(r.n) }]} rows={kindRows} empty="No activity yet." />
Most-actioned topics
r.topic }, { label: "Actions", right: true, render: (r) => fmtN(r.n) }]} rows={eng.topActioned || []} empty="No card actions yet." />
{(eng.topAssist || []).length > 0 && (
Where users ask the copilot for help
r.topic }, { label: "Assist clicks", right: true, render: (r) => fmtN(r.n) }]} rows={eng.topAssist} empty="—" />
)}
);
})()}
The API key is a deploy secret (environment variable) — it is never stored in the app database or shown here. Rotate it in your hosting platform's secret store. Per-token pricing is set in Cost catalog (anthropic ). Engagement is anonymous product telemetry (no message content).
);
}
function CostCatalog() {
const { loading, data, error, reload } = useData(() => A.costRates(), []);
const [edit, setEdit] = useState(null); // {platform, operation, unitCost, active}
const [busy, setBusy] = useState(false);
if (loading) return
Runtime price list — USD per API call/unit. Metering deducts these as calls happen. Seeded from the X pay-per-use model; edit as platform pricing changes. Editing needs the billing capability (finance / superadmin).
{Object.keys(byPlat).sort((a, b) => (a === "x" ? -1 : b === "x" ? 1 : a.localeCompare(b))).map((plat) => (
{PLAT_LABEL[plat] || plat}{plat === "x" &&
metered }
OP_LABEL[r.operation] || r.operation },
{ label: "Unit cost", right: true, render: (r) => edit && edit.id === r.id
? 0 ? "var(--fg1)" : "var(--fg4)" }}>{r.unitCost > 0 ? fmtUnit(r.unitCost) : "free"} },
{ label: "Active", render: (r) => edit && edit.id === r.id
? on : off ) },
{ label: "Updated", render: (r) => fmtDate(r.updatedAt) },
{ label: "", right: true, render: (r) => edit && edit.id === r.id
? {busy ? "…" : "Save"} setEdit(null)} style={{ ...btnGhost, fontSize: 12, padding: "5px 10px" }}>Cancel —
: setEdit({ id: r.id, platform: r.platform, operation: r.operation, unitCost: r.unitCost, active: r.active })} style={{ ...btnGhost, fontSize: 12, padding: "5px 10px" }}>Edit },
]} />
))}
);
}
// ── Promo / free-account codes (Phase 4) ─────────────────────────────────
function Promo() {
const codes = useData(() => A.promoCodes(), []);
const [creating, setCreating] = useState(false);
const [openCode, setOpenCode] = useState(null); // codeId whose redemptions are shown
const reds = useData(() => (openCode ? A.promoRedemptions(openCode) : Promise.resolve({ redemptions: [] })), [openCode]);
const [busy, setBusy] = useState(null);
const [form, setForm] = useState({ code: "", grantType: "free_plan", planKey: "pro", durationMonths: "3", maxRedemptions: "", perUserLimit: "1", campaign: "", percent: "", creditsAmount: "" });
const toggle = async (c) => { setBusy(c.id); try { await A.setPromoActive(c.id, !c.active); await codes.reload(); } catch (e) { alert("Failed (" + (e.status || "?") + "). Superadmin only."); } setBusy(null); };
const revoke = async (id) => { if (!confirm("Revoke this grant? Any promo subscription is cleared.")) return; setBusy(id); try { const r = await A.revokeRedemption(id); await reds.reload(); await codes.reload(); if (r.cleared) alert("Grant revoked and promo subscription cleared."); } catch (e) { alert("Failed (" + (e.status || "?") + ")."); } setBusy(null); };
const submit = async () => {
const body = { code: form.code, grantType: form.grantType, campaign: form.campaign || undefined, perUserLimit: form.perUserLimit || 1, maxRedemptions: form.maxRedemptions || null };
if (form.grantType === "free_plan" || form.grantType === "plan") { body.planKey = form.planKey; body.durationMonths = form.durationMonths || null; }
if (form.grantType === "percent_off") { body.percent = form.percent; body.durationMonths = form.durationMonths || null; }
if (form.grantType === "credits") { body.creditsAmount = form.creditsAmount; }
setBusy("new");
try { await A.createPromoCode(body); setCreating(false); setForm({ ...form, code: "", campaign: "" }); await codes.reload(); }
catch (e) { alert(e.status === 409 ? "That code already exists." : "Create failed (" + (e.status || "?") + "). Superadmin only."); }
setBusy(null);
};
const isPlan = form.grantType === "free_plan" || form.grantType === "plan";
return (
Free-account & promo codes. Redeeming grants an entitlement through the normal engine (plan grants create a promo subscription). Create/disable needs the billing capability + audited.
{can("billing.write") &&
setCreating((v) => !v)} style={{ ...btnGhost, color: "var(--accent)", borderColor: "var(--accent)" }}>{creating ? "Cancel" : "+ New code"} }
{creating && (
Code
Grant type setForm({ ...form, grantType: e.target.value })} style={inp}>{["free_plan", "plan", "percent_off", "credits"].map((g) => {GRANT_LABEL[g]} )}
Campaign
{isPlan && Plan key }
{form.grantType === "percent_off" && Percent off }
{form.grantType === "credits" && Credits }
{form.grantType !== "credits" && Duration (months, blank = perpetual) }
Max redemptions (blank = ∞)
Per-user limit
{busy === "new" ? "Creating…" : "Create code"}
{(form.grantType === "percent_off" || form.grantType === "credits") && Recorded now; applied at Stripe checkout / credit ledger (deferred). }
)}
{codes.loading ?
: codes.error ?
: (
{c.code} },
{ label: "Grant", render: (c) => {GRANT_LABEL[c.grantType]} {grantSummary(c)} setOpenCode(openCode === c.id ? null : c.id)} style={{ ...btnGhost, fontSize: 12, padding: "4px 9px" }}>{fmtN(c.redemptions)}{c.maxRedemptions ? " / " + c.maxRedemptions : ""} },
{ label: "Expires", render: (c) => c.expiresAt ? fmtDate(c.expiresAt) : "—" },
{ label: "Status", render: (c) => c.active ? active : disabled },
{ label: "", right: true, render: (c) => !can("billing.write") ? — : toggle(c)} disabled={busy === c.id} style={{ ...btnGhost, fontSize: 12, padding: "5px 10px", color: c.active ? "var(--danger)" : "var(--success)", borderColor: c.active ? "var(--danger)" : "var(--success)" }}>{c.active ? "Disable" : "Enable"} },
]} />
)}
{openCode && (
Redemptions
{reds.loading ?
:
short(x.userId, 14) },
{ label: "Org", render: (x) => short(x.orgId, 14) },
{ label: "Grant", render: (x) => {GRANT_LABEL[x.grantType]}{x.planKey ? " · " + x.planKey : ""} },
{ label: "Redeemed", render: (x) => fmtAgo(x.grantedAt) },
{ label: "Expires", render: (x) => x.expiresAt ? fmtDate(x.expiresAt) : "perpetual" },
{ label: "Status", render: (x) => x.revokedAt ? revoked : active },
{ label: "", right: true, render: (x) => x.revokedAt || !can("billing.write") ? null : revoke(x.id)} disabled={busy === x.id} style={{ ...btnGhost, fontSize: 12, padding: "5px 10px", color: "var(--danger)", borderColor: "var(--danger)" }}>Revoke },
]} />}
)}
);
}
// ── Landing A/B tests (marketing) ────────────────────────────────────────
// Per-variant views, waitlist signups, and conversion rate for the coming-soon
// page. Variants are assigned client-side (sticky cookie) on www.leap-social.com;
// the public API records a 'view' per session and a 'signup' on waitlist submit.
function Marketing() {
const [days, setDays] = useState(30);
const { loading, data, error } = useData(() => A.ab({ days }), [days]);
if (loading) return
{label}
{value}
{sub &&
{sub}
}
);
return (
Coming-soon landing page — variant performance. Edit variants in www/index.html .
setDays(Number(e.target.value))} style={{ ...inp, width: 150, flex: "none" }}>
{[7, 30, 90].map((d) => Last {d} days )}
{card("Views", fmtN(t.views), `${variants.length} variant${variants.length === 1 ? "" : "s"} live`)}
{card("Signups", fmtN(t.signups), "waitlist conversions", "var(--accent)")}
{card("Conversion", pct(overallCr), "signups ÷ views")}
{card("Leader", leader ? leader.variant.toUpperCase() : "—", leader ? `${pct(leader.conversionRate)} · ${fmtN(leader.views)} views` : "need ≥20 views")}
By variant
{v.variant}{leader && v.variant === leader.variant ? best : null} },
{ label: "Views", right: true, render: (v) => fmtN(v.views) },
{ label: "Signups", right: true, render: (v) => fmtN(v.signups) },
{ label: "Conversion", right: true, render: (v) => v.conversionRate == null ? — : {pct(v.conversionRate)} },
]} rows={variants} empty="No landing traffic yet — once the page is live, views and signups appear here." />
A visitor is assigned one variant (sticky for a year) and counted once per session. Conversion is waitlist signups ÷ views over the window. Give each variant a few hundred views before trusting the winner.
);
}
// ── Early-access waitlist (marketing) ────────────────────────────────────
// The captured signup list from the landing page — searchable, paged, and CSV
// exportable. Sourced from social.WaitlistSignup (leap_admin read).
function Waitlist() {
const [search, setSearch] = useState("");
const [q, setQ] = useState("");
const [offset, setOffset] = useState(0);
const [busy, setBusy] = useState(false);
const LIMIT = 100;
const { loading, data, error } = useData(() => A.waitlist({ search: q, limit: LIMIT, offset }), [q, offset]);
const rows = (data && data.rows) || [];
const total = (data && data.total) || 0;
const download = async () => {
setBusy(true);
try {
const blob = await A.waitlistCsv();
const url = URL.createObjectURL(blob);
const a = document.createElement("a"); a.href = url; a.download = "leap-waitlist.csv";
document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
} catch (e) { /* ignore */ } finally { setBusy(false); }
};
return (
Early-access signups from the landing page — {fmtN(total)} total.
{busy ? "…" : "Export CSV"}
{loading ?
: error ?
: (
{r.email} },
{ label: "Variant", render: (r) => r.variant ? {r.variant} : — },
{ label: "Source", render: (r) => {r.source || "—"} },
{ label: "Signed up", render: (r) => fmtDate(r.createdAt) },
]} rows={rows} empty="No signups yet — they'll appear here as people join from the landing page." />
{total > LIMIT && (
setOffset(Math.max(0, offset - LIMIT))} disabled={offset === 0} style={{ ...btnGhost, fontSize: 12 }}>‹ Prev
{offset + 1}–{Math.min(offset + LIMIT, total)} of {fmtN(total)}
setOffset(offset + LIMIT)} disabled={offset + LIMIT >= total} style={{ ...btnGhost, fontSize: 12 }}>Next ›
)}
)}
);
}
// ── shell ──────────────────────────────────────────────────────────────────
const inp = { flex: 1, fontFamily: "inherit", fontSize: 13.5, padding: "9px 12px", borderRadius: 10, border: "1px solid var(--border-strong)", color: "var(--fg1)", background: "var(--surface)", boxSizing: "border-box", width: "100%" };
const btnGhost = { border: "1px solid var(--border-strong)", background: "var(--surface)", borderRadius: 10, padding: "7px 12px", cursor: "pointer", fontFamily: "inherit", fontSize: 13, color: "var(--fg2)" };
const lbl = { display: "flex", flexDirection: "column", gap: 5, fontSize: 11.5, fontWeight: 600, color: "var(--fg3)" };
const VIEWS = [["overview", "layout-dashboard", "Overview"], ["orgs", "building-2", "Organizations"], ["users", "user", "Platform users"], ["admins", "shield", "Admins & access"], ["connections", "share-2", "Social ops"], ["usage", "gauge", "Usage & cost"], ["ai", "sparkles", "AI assistant"], ["marketing", "flask-conical", "Landing A/B"], ["waitlist", "mail", "Waitlist"], ["costs", "tag", "Cost catalog"], ["promo", "ticket", "Promo codes"], ["security", "shield-alert", "Security"], ["health", "activity", "Health"], ["audit", "scroll-text", "Audit"]];
function Shell({ user, me, onSwitchRole, onLogout }) {
const [view, setView] = useState("overview");
const [orgId, setOrgId] = useState(null);
window.__nav = (id) => { setOrgId(id); setView("orgs"); };
const openOrg = (id) => { setOrgId(id); setView("org"); };
// A role switch can strand you on a view your new role can't see (e.g. admins).
const effView = view === "admins" && !can("admins.manage") ? "overview" : view;
const title = effView === "org" ? "Organization" : (VIEWS.find((v) => v[0] === effView) || [, , "Overview"])[2];
const navItem = ([id, icon, label]) => {
const on = view === id || (id === "orgs" && view === "org");
return { setView(id); }} style={{ display: "flex", alignItems: "center", gap: 11, padding: "10px 12px", borderRadius: 10, width: "100%", textAlign: "left", border: 0, cursor: "pointer", fontFamily: "inherit", fontSize: 14, fontWeight: on ? 600 : 500, color: on ? NAV.activeFg : NAV.fg, background: on ? NAV.activeBg : "transparent" }}
onMouseEnter={(e) => { if (!on) e.currentTarget.style.background = NAV.hover; }} onMouseLeave={(e) => { if (!on) e.currentTarget.style.background = "transparent"; }}>
;
};
return (
Admin cockpit
{VIEWS.filter(([id]) => id !== "admins" || can("admins.manage")).map(navItem)}
{user.email || "admin"}
{me && me.role && {ADMIN_ROLE_LABEL[me.role] || me.role} }
{me && me.dev && (
Simulate role (dev)
onSwitchRole(e.target.value === "superadmin" ? "" : e.target.value)}
style={{ width: "100%", marginTop: 4, fontFamily: "inherit", fontSize: 12.5, padding: "6px 8px", borderRadius: 8, border: "1px solid " + NAV.border, background: "transparent", color: NAV.fgStrong }}>
{["superadmin", "finance", "support", "readonly"].map((rr) => {ADMIN_ROLE_LABEL[rr]} )}
)}
Sign out
{title}
{effView === "overview" &&
}
{(effView === "orgs") &&
}
{effView === "org" &&
setView("orgs")} />}
{effView === "users" &&
);
}
function Login({ onIn }) {
const [busy, setBusy] = useState(false); const [err, setErr] = useState(null);
const dev = async () => { setBusy(true); setErr(null); try { await A.devLogin(); onIn(); } catch (e) { setErr(e); setBusy(false); } };
return (
Leap Admin
Back-office cockpit
A.googleStart()} style={{ width: "100%", padding: "11px", borderRadius: 12, border: 0, cursor: "pointer", fontFamily: "inherit", fontSize: 14, fontWeight: 600, color: "#fff", background: "var(--gradient-core)" }}>Sign in with Google
{busy ? "Signing in…" : "Dev login (local only)"}
{err &&
Sign-in failed ({err.status || "?"}).
}
);
}
// Signed in via SSO but not yet a platform admin — surface the user id so the first
// admin can be bootstrapped (add it to ADMIN_BOOTSTRAP_USER_IDS, then redeploy).
function NotAdmin({ user, onLogout }) {
const [copied, setCopied] = useState(false);
const id = (user && (user.id || user.sub)) || "";
const email = (user && user.email) || "";
const copy = () => { try { navigator.clipboard.writeText(id); setCopied(true); setTimeout(() => setCopied(false), 1500); } catch (e) {} };
return (
Not a platform admin yet
You're signed in{email ? " as " + email : ""}, but this account isn't a platform admin.
To grant the first admin, add this user id to ADMIN_BOOTSTRAP_USER_IDS on the leap-admin service, then redeploy:
{copied ? "Copied" : "Copy"}
Sign out
);
}
function App() {
const [state, setState] = useState({ status: "loading", user: null, me: null });
const loadMe = useCallback(async () => {
try { const me = await A.me(); CAPS = new Set(me.capabilities || []); return me; }
catch { CAPS = new Set(); return null; }
}, []);
const check = useCallback(() => {
A.session()
// Signed in, but /admin/me 403s for a non-admin → show the bootstrap screen
// instead of a broken shell.
.then(async (s) => { const me = await loadMe(); setState({ status: me ? "in" : "notadmin", user: s.user || {}, me }); })
.catch(() => { CAPS = new Set(); setState({ status: "out", user: null, me: null }); });
}, [loadMe]);
// Switch the simulated role (dev): update the header, refetch capabilities, remount.
const switchRole = useCallback(async (role) => { A.setSimRole(role); const me = await loadMe(); setState((s) => ({ ...s, me })); }, [loadMe]);
useEffect(() => { check(); }, [check]);
if (state.status === "loading") return Loading…
;
if (state.status === "out") return { A.setSimRole(""); A.logout().then(check); }} />;
return { A.setSimRole(""); A.logout().then(check); }} />;
}
ReactDOM.createRoot(document.getElementById("root")).render(
