@copilotz/billing 0.0.0-stage → 1.0.0-rc.34

package/credits/shared/standing.js

@@ -0,0 +1,235 @@
+import { settingsOf } from "./settings.js";
+import { monthOf, periodOf, walk } from "./walk.js";
+/** What stands for "no limit" in `room`: taking prices off it never gets near zero. */
+export const NO_LIMIT = 1e15;
+const HOUR = 3_600_000;
+const PLAN = "plan";
+const ROOM = "room";
+const plans = (ctx) => ctx.as().db.collection("billingPlan");
+const credits = (ctx) => ctx.as().db.collection("credit");
+export const rooms = (ctx) => ctx.as().db.collection("billingRoom");
+export const planOf = (ctx) => plans(ctx).findOne({ _id: PLAN });
+/**
+ * A plan's terms for this org. A trial is one a person: the personal org they
+ * get once. A team's starts without it, and doesn't gain it by falling back.
+ */
+export function termsFor(ctx, name) {
+    const terms = settingsOf(ctx).plans[name];
+    const team = ctx.resources.org?.kind === "team";
+    if (!terms?.credits?.once || !team)
+        return terms;
+    const { once: _once, ...credits } = terms.credits;
+    return { ...terms, credits };
+}
+/**
+ * The org's plan, started on the app's first one the first time it's needed.
+ * While limits are off, its clock doesn't start (`counting`).
+ */
+export async function ensurePlan(ctx, now) {
+    const had = await planOf(ctx);
+    if (had)
+        return had;
+    const set = settingsOf(ctx);
+    const plan = {
+        _id: PLAN,
+        name: set.start,
+        terms: termsFor(ctx, set.start) ?? { title: set.start },
+        since: now,
+        anchor: now,
+        channel: "manual",
+        ...(set.enforce ? { counting: true } : {}),
+        at: now,
+    };
+    try {
+        await plans(ctx).insertOne(plan);
+    }
+    catch (error) {
+        // Another executor made it just now; else it's that it can't be written from here.
+        const found = await planOf(ctx);
+        if (found)
+            return found;
+        throw error;
+    }
+    return plan;
+}
+/** People who count as seats: the org's, guests apart. An app without org roles has one. */
+export const seatsOf = async (ctx, plan) => plan.seats ??
+    await ctx.as().call("org.seats", {}).catch(() => 1);
+/** What's been charged by day since `from`, and up to `to` if it says (USD): a use in its very millisecond was in it. */
+async function chargedByDay(ctx, from, to) {
+    const totals = await ctx.as().db.collection("usage").query("totals", { filter: { at: { $gte: from, ...(to ? { $lte: to } : {}) } }, by: ["day"] });
+    return Object.fromEntries(totals.map((t) => [t.key.day, t.price ?? 0]));
+}
+/** What counts of what it was given: from a test mode, not once the app is live. */
+const counted = (ctx, history) => settingsOf(ctx).live ? history.filter((c) => !c.sandbox) : history;
+/**
+ * A usage waiver's end: what it let through is given back, so it doesn't count
+ * afterwards. Not what was charged, but what the balance lost by it: credits that
+ * would have lapsed anyway aren't given back for good.
+ */
+export async function endWaiver(ctx, plan, at) {
+    const waived = plan.waived?.usage;
+    if (!waived)
+        return;
+    const history = counted(ctx, await credits(ctx).find({}));
+    const spent = await chargedByDay(ctx, plan.since);
+    const from = waived.from > plan.since ? waived.from : plan.since;
+    const during = await chargedByDay(ctx, from, at);
+    const without = Object.fromEntries(Object.entries(spent).map(([day, price]) => [day, price - (during[day] ?? 0)]));
+    const today = at.slice(0, 10);
+    const amount = walk(history, without, today).balance - walk(history, spent, today).balance;
+    if (amount > 0) {
+        await credits(ctx).insertOne({
+            _id: `waived:${waived.from}`,
+            kind: "waived",
+            amount: Math.round(amount * 1e8) / 1e8,
+            at,
+            note: "Usage waived",
+            reason: waived.reason,
+            ...(waived.by ? { by: waived.by } : {}),
+        });
+    }
+    await plans(ctx).updateOne({ _id: PLAN }, { $unset: { "waived.usage": "" } });
+}
+/** Writes what's come due. */
+export async function settle(ctx, now) {
+    let plan = await ensurePlan(ctx, now);
+    // Limits have just come on for it: what it used before they did doesn't count.
+    if (!plan.counting) {
+        await plans(ctx).updateOne({ _id: PLAN }, { $set: { since: now, counting: true } });
+        plan = (await planOf(ctx));
+    }
+    const kept = new Set((await credits(ctx).find({})).map((c) => c._id));
+    const grant = async (doc) => {
+        if (kept.has(doc._id) || !doc.amount)
+            return;
+        kept.add(doc._id);
+        await credits(ctx).insertOne({ at: now, ...doc });
+    };
+    const terms = plan.terms.credits;
+    if (terms?.once) {
+        await grant({ _id: "trial", kind: "trial", amount: terms.once, note: plan.terms.title });
+    }
+    // A plan a provider collects for gets its credits when a period is paid for (`grantPeriod`).
+    const byHand = !plan.channel || plan.channel === "manual";
+    if (byHand && (terms?.monthly || terms?.perSeat)) {
+        const period = periodOf(plan.anchor, now);
+        const id = `plan:${plan.name}:${period.start}`;
+        if (!kept.has(id)) {
+            const seats = terms.perSeat ? await seatsOf(ctx, plan) : 0;
+            await grant({
+                _id: id,
+                kind: "plan",
+                amount: (terms.monthly ?? 0) + (terms.perSeat ?? 0) * seats,
+                expires: period.end,
+                note: plan.terms.title,
+            });
+        }
+    }
+    const until = plan.waived?.usage?.until;
+    if (until && until <= now) {
+        await endWaiver(ctx, plan, until);
+        plan = (await planOf(ctx));
+    }
+    return plan;
+}
+/**
+ * The month's limit: what its people chose; none if they chose none; else what
+ * its plan starts with, so a team's grows with its seats and doesn't stop it with
+ * credits left; else the app's.
+ */
+async function limitOf(ctx, plan) {
+    if (plan.budget === null)
+        return undefined;
+    if (typeof plan.budget === "number")
+        return plan.budget;
+    const perSeat = plan.terms.budget?.perSeat;
+    if (perSeat)
+        return perSeat * await seatsOf(ctx, plan);
+    return settingsOf(ctx).budget;
+}
+/** Where the org stands now, from what's kept. */
+export async function standingOf(ctx, now) {
+    const plan = await planOf(ctx);
+    const history = counted(ctx, await credits(ctx).find({}, { sort: { at: -1 } }));
+    const today = now.slice(0, 10);
+    const month = monthOf(now);
+    // Not started yet (limits off): nothing has counted.
+    const spent = plan?.counting ? await chargedByDay(ctx, plan.since) : {};
+    const limit = plan ? await limitOf(ctx, plan) : undefined;
+    const usageWaiver = plan?.waived?.usage;
+    return {
+        plan,
+        walked: walk(history, spent, today),
+        history,
+        month: {
+            ...month,
+            spent: Object.entries(spent).filter(([day]) => day >= month.start)
+                .reduce((sum, [, price]) => sum + price, 0),
+            ...(limit !== undefined ? { limit } : {}),
+        },
+        ...(plan && (plan.terms.credits?.monthly || plan.terms.credits?.perSeat)
+            ? { period: periodOf(plan.anchor, now) }
+            : {}),
+        waivedUsage: !!usageWaiver && (!usageWaiver.until || usageWaiver.until > now),
+    };
+}
+/** The soonest a date changes what `room` should say. */
+function untilOf(standing, now) {
+    const days = [
+        standing.month.end,
+        standing.period?.end,
+        ...standing.walked.buckets.map((bucket) => bucket.expires),
+    ].filter((day) => !!day).map((day) => `${day}T00:00:00.000Z`);
+    const times = [
+        ...days,
+        standing.plan?.waived?.usage?.until,
+        new Date(new Date(now).getTime() + HOUR).toISOString(),
+    ].filter((at) => !!at);
+    return times.sort()[0];
+}
+/** `room`, worked out from where it stands. */
+function roomFrom(ctx, standing, now) {
+    const { warnAt } = settingsOf(ctx);
+    const { limit, spent } = standing.month;
+    const granted = standing.walked.buckets.reduce((sum, bucket) => sum + bucket.amount, 0);
+    return {
+        _id: ROOM,
+        credits: standing.waivedUsage ? NO_LIMIT : standing.walked.balance,
+        budget: limit === undefined ? NO_LIMIT : limit - spent,
+        ...(limit !== undefined ? { limit, lowBudget: limit * (1 - warnAt) } : {}),
+        ...(standing.waivedUsage ? {} : { lowCredits: granted * (1 - warnAt) }),
+        until: untilOf(standing, now),
+    };
+}
+/** Settles, works out `room` again, and keeps it. */
+export async function refresh(ctx, now) {
+    await settle(ctx, now);
+    const room = roomFrom(ctx, await standingOf(ctx, now), now);
+    await rooms(ctx).replaceOne({ _id: ROOM }, room, { upsert: true });
+    return room;
+}
+/** Something changed what's left: the next check works it out again. */
+export const forget = (ctx) => rooms(ctx).deleteOne({ _id: ROOM });
+const usd = (amount) => `$${amount % 1 ? amount.toFixed(2) : amount}`;
+/** Where it's changed, as a link where the words are shown as a message. */
+const BILLING = "[Billing](/org?tab=billing)";
+/** What a check answers for `room`, in the words people see when it stops them. */
+export function verdictOf(room) {
+    if (room.credits <= 0) {
+        return {
+            ok: false,
+            why: "credits",
+            message: `This org is out of credits. Its owners and admins can add more in ${BILLING}.`,
+        };
+    }
+    if (room.budget <= 0) {
+        const limit = room.limit !== undefined ? `its ${usd(room.limit)} budget` : "its budget";
+        return {
+            ok: false,
+            why: "budget",
+            message: `This org has reached ${limit} for the month. Its owners and admins can raise it in ${BILLING}.`,
+        };
+    }
+    return { ok: true };
+}

package/credits/shared/walk.d.ts

@@ -0,0 +1,50 @@
+/**
+ * The balance: credits and what was spent, walked day by day (UTC), so each
+ * day's spending comes out of what was there that day and what lapses, lapses.
+ * Pure: no store, no clock.
+ *
+ * Each day: what's expired goes, what was granted comes (paying any debt
+ * first), then what was spent is taken: what expires soonest first, then, among
+ * those alike, plan credits, the trial, gifts, and last what was bought.
+ * Spending beyond the credits is debt, which the next grant pays. A refund comes
+ * out of what the money bought, not of what was about to lapse anyway.
+ */
+export type Grant = {
+    _id: string;
+    kind: string;
+    amount: number;
+    at: string;
+    expires?: string;
+    /** Taken away: what it comes out of first. */
+    takes?: string;
+};
+export type Bucket = {
+    id: string;
+    kind: string;
+    amount: number;
+    left: number;
+    expires?: string;
+};
+export type Walked = {
+    /** Credits left less any debt: negative when more was spent than there was. */
+    balance: number;
+    /** The credits still there, in the order they'll be spent. */
+    buckets: Bucket[];
+    debt: number;
+    /** Credits that lapsed unspent. */
+    expired: number;
+};
+export declare function walk(grants: Grant[], spent: Record<string, number>, today: string): Walked;
+/**
+ * The period `now` falls in, for an `anchor`: from its day of the month to the
+ * same day the next (a shorter month's last, where it has none).
+ */
+export declare function periodOf(anchor: string, now: string): {
+    start: string;
+    end: string;
+};
+/** The first day of the month `now` falls in, and of the next. */
+export declare function monthOf(now: string): {
+    start: string;
+    end: string;
+};

package/credits/shared/walk.js

@@ -0,0 +1,127 @@
+const RANK = {
+    plan: 0,
+    trial: 1,
+    gift: 2,
+    referral: 3,
+    waived: 4,
+    adjustment: 5,
+    purchase: 6,
+};
+/** USD to a millionth of a cent, as the ledger keeps it. */
+const round = (usd) => Math.round(usd * 1e8) / 1e8;
+const order = (a, b) => (a.expires ?? "9999").localeCompare(b.expires ?? "9999") ||
+    (RANK[a.kind] ?? 9) - (RANK[b.kind] ?? 9) || a.id.localeCompare(b.id);
+export function walk(grants, spent, today) {
+    const byDay = new Map();
+    for (const grant of grants) {
+        const day = grant.at.slice(0, 10);
+        byDay.set(day, [...byDay.get(day) ?? [], grant]);
+    }
+    const days = [...new Set([...byDay.keys(), ...Object.keys(spent), today])]
+        .filter((day) => day <= today).sort();
+    let buckets = [];
+    let debt = 0;
+    let expired = 0;
+    const take = (amount, first) => {
+        let owed = amount;
+        const ordered = first
+            ? [...buckets.filter((b) => b.kind === first), ...buckets.filter((b) => b.kind !== first)]
+            : buckets;
+        for (const bucket of ordered) {
+            if (owed <= 0)
+                break;
+            const taken = Math.min(bucket.left, owed);
+            bucket.left -= taken;
+            owed -= taken;
+        }
+        debt += owed;
+        buckets = buckets.filter((bucket) => bucket.left > 1e-9);
+    };
+    for (const day of days) {
+        buckets = buckets.filter((bucket) => {
+            if (bucket.expires && bucket.expires <= day) {
+                expired += bucket.left;
+                return false;
+            }
+            return true;
+        });
+        let out = spent[day] ?? 0;
+        const taken = [];
+        for (const grant of byDay.get(day) ?? []) {
+            if (grant.amount < 0) {
+                if (grant.takes)
+                    taken.push(grant);
+                else
+                    out -= grant.amount;
+                continue;
+            }
+            if (grant.expires && grant.expires <= day)
+                continue;
+            const paid = Math.min(debt, grant.amount);
+            debt -= paid;
+            if (grant.amount > paid) {
+                buckets.push({
+                    id: grant._id,
+                    kind: grant.kind,
+                    amount: grant.amount,
+                    left: grant.amount - paid,
+                    ...(grant.expires ? { expires: grant.expires } : {}),
+                });
+            }
+        }
+        buckets.sort(order);
+        for (const grant of taken)
+            take(-grant.amount, grant.takes);
+        if (out >= 0)
+            take(out);
+        else {
+            // More came back than went (a correction): it pays debt, then it's credit like any other.
+            const back = -out;
+            const paid = Math.min(debt, back);
+            debt -= paid;
+            if (back > paid) {
+                buckets.push({
+                    id: `back:${day}`,
+                    kind: "adjustment",
+                    amount: back - paid,
+                    left: back - paid,
+                });
+                buckets.sort(order);
+            }
+        }
+    }
+    const left = buckets.reduce((sum, bucket) => sum + bucket.left, 0);
+    return {
+        balance: round(left - debt),
+        buckets: buckets.map((bucket) => ({
+            ...bucket,
+            left: round(bucket.left),
+            amount: round(bucket.amount),
+        })),
+        debt: round(debt),
+        expired: round(expired),
+    };
+}
+const dayIn = (year, month, day) => {
+    const last = new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
+    return new Date(Date.UTC(year, month, Math.min(day, last))).toISOString().slice(0, 10);
+};
+/**
+ * The period `now` falls in, for an `anchor`: from its day of the month to the
+ * same day the next (a shorter month's last, where it has none).
+ */
+export function periodOf(anchor, now) {
+    const day = new Date(anchor).getUTCDate();
+    const at = new Date(now);
+    const [y, m] = [at.getUTCFullYear(), at.getUTCMonth()];
+    const here = dayIn(y, m, day);
+    return now.slice(0, 10) >= here
+        ? { start: here, end: dayIn(y, m + 1, day) }
+        : { start: dayIn(y, m - 1, day), end: here };
+}
+/** The first day of the month `now` falls in, and of the next. */
+export function monthOf(now) {
+    const at = new Date(now);
+    const [y, m] = [at.getUTCFullYear(), at.getUTCMonth()];
+    return { start: dayIn(y, m, 1), end: dayIn(y, m + 1, 1) };
+}

package/credits/views/web/add.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Adding to what the org has. **Add credits:** a few amounts to choose from, or
+ * one of their own within the limits; what the balance comes to after, any
+ * debt paid first; then a page of the payment provider's, where they confirm:
+ * the card never reaches the app. If it fails, why, with what they chose kept.
+ * Where nothing can be bought here, it says who credits come from, with no dead
+ * buttons. **Gift code:** typed in, what it added; if it isn't good, why, right
+ * there, with what was typed kept.
+ */
+import { type ReactNode } from "react";
+import { type BillingState } from "./numbers.js";
+import { type Call } from "./types.js";
+/** Leaving for a payment page: what's here now is kept, to tell on coming back what's new. */
+export declare function leavingFor(url: string, state: BillingState): void;
+/** A button left busy on leaving is released on coming back through the browser's Back. */
+export declare function useBackFromLeaving(release: () => void): void;
+export declare function AddCredits({ state, team, call }: {
+    state: BillingState;
+    team: string;
+    call: Call;
+}): ReactNode;
+export declare function Redeem({ call, onRedeemed }: {
+    call: Call;
+    onRedeemed(): Promise<void>;
+}): ReactNode;

package/credits/views/web/add.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Adding to what the org has. **Add credits:** a few amounts to choose from, or
+ * one of their own within the limits; what the balance comes to after, any
+ * debt paid first; then a page of the payment provider's, where they confirm:
+ * the card never reaches the app. If it fails, why, with what they chose kept.
+ * Where nothing can be bought here, it says who credits come from, with no dead
+ * buttons. **Gift code:** typed in, what it added; if it isn't good, why, right
+ * there, with what was typed kept.
+ */
+import { useEffect, useId, useState } from "react";
+import { Button, Card, Field, Icon, Input, Notice } from "copilotz/web";
+import { balanceAfter, beforeOf, dayShown, dollars, money, topUpOf, } from "./numbers.js";
+import { LEFT, useAct } from "./types.js";
+/** Leaving for a payment page: what's here now is kept, to tell on coming back what's new. */
+export function leavingFor(url, state) {
+    try {
+        sessionStorage.setItem(LEFT, JSON.stringify(beforeOf(state)));
+    }
+    catch { /* Coming back, it goes by how recent a payment is. */ }
+    location.assign(url);
+}
+/** A button left busy on leaving is released on coming back through the browser's Back. */
+export function useBackFromLeaving(release) {
+    useEffect(() => {
+        const back = (event) => event.persisted && release();
+        addEventListener("pageshow", back);
+        return () => removeEventListener("pageshow", back);
+    }, []);
+}
+export function AddCredits({ state, team, call }) {
+    const pay = state.pay;
+    const id = useId();
+    const options = pay?.topUps ?? [];
+    const [choice, setChoice] = useState(options[1] ?? options[0] ?? "other");
+    const [typed, setTyped] = useState("");
+    const { busy, error, run, release } = useAct();
+    useBackFromLeaving(release);
+    if (!pay) {
+        return (_jsxs(Card, { as: "section", className: "billing-card", id: "billing-add", "aria-labelledby": `${id}-head`, children: [_jsx("header", { className: "billing-card-head", children: _jsx("h3", { id: `${id}-head`, children: "Add credits" }) }), _jsxs("p", { className: "billing-text", children: ["Credits here come from ", team, ". Ask them for more and they'll show up on this page."] })] }));
+    }
+    const parsed = choice === "other" ? topUpOf(typed, pay) : { amount: choice };
+    const amount = "amount" in parsed ? parsed.amount : undefined;
+    const wrong = choice === "other" && typed.trim() && "error" in parsed ? parsed.error : undefined;
+    const after = amount === undefined ? undefined : balanceAfter(state.balance ?? 0, amount);
+    const go = (event) => {
+        event.preventDefault();
+        if (amount === undefined || busy)
+            return;
+        void run(async () => {
+            const { url } = await call("billing.checkout", { credits: amount });
+            leavingFor(url, state);
+        }, true);
+    };
+    return (_jsxs(Card, { as: "section", className: "billing-card", id: "billing-add", "aria-labelledby": `${id}-head`, children: [_jsx("header", { className: "billing-card-head", children: _jsx("h3", { id: `${id}-head`, children: "Add credits" }) }), _jsxs("form", { className: "billing-add", onSubmit: go, children: [_jsxs("div", { className: "billing-choices", role: "radiogroup", "aria-labelledby": `${id}-head`, children: [options.map((option) => (_jsxs("label", { className: "billing-choice", "data-on": choice === option || undefined, children: [_jsx("input", { type: "radio", name: `${id}-amount`, checked: choice === option, disabled: busy, onChange: () => setChoice(option) }), dollars(option)] }, option))), _jsxs("label", { className: "billing-choice", "data-on": choice === "other" || undefined, children: [_jsx("input", { type: "radio", name: `${id}-amount`, checked: choice === "other", disabled: busy, onChange: () => setChoice("other") }), "Other"] })] }), choice === "other"
+                        ? (_jsx(Field, { label: "Amount", hint: `Between ${dollars(pay.min)} and ${dollars(pay.max)}.`, error: wrong, children: (control) => (_jsx(Input, { ...control, inputMode: "decimal", autoComplete: "off", placeholder: "0", value: typed, disabled: busy, autoFocus: true, className: "billing-money-input", onChange: (event) => setTyped(event.target.value) })) }))
+                        : null, _jsx("p", { className: "billing-after", "aria-live": "polite", children: after !== undefined
+                            ? (_jsxs(_Fragment, { children: ["Your balance will be ", _jsx("b", { children: money(after) })] }))
+                            : " " }), error ? _jsx(Notice, { tone: "destructive", role: "alert", children: error }) : null, _jsx(Button, { type: "submit", variant: "primary", size: "lg", loading: busy, disabled: amount === undefined, className: "billing-go", children: busy
+                            ? "Opening the payment page…"
+                            : amount !== undefined
+                                ? `Continue to pay ${dollars(amount)}`
+                                : "Continue to payment" }), _jsxs("p", { className: "billing-small", children: [_jsx(Icon, { name: "lock", size: 13 }), "You'll confirm on a secure payment page. Credits you buy never lapse, and they're spent last."] })] })] }));
+}
+export function Redeem({ call, onRedeemed }) {
+    const [code, setCode] = useState("");
+    const [added, setAdded] = useState();
+    const { busy, error, run, clear } = useAct();
+    const typed = code.trim();
+    const go = (event) => {
+        event.preventDefault();
+        if (!typed || busy)
+            return;
+        void run(async () => {
+            const answer = await call("billing.redeem", {
+                code: typed,
+            });
+            setAdded(answer);
+            setCode("");
+            await onRedeemed();
+        });
+    };
+    return (_jsxs(Card, { as: "section", className: "billing-card", "aria-labelledby": "billing-redeem", children: [_jsx("header", { className: "billing-card-head", children: _jsx("h3", { id: "billing-redeem", children: "Gift code" }) }), _jsxs("form", { className: "billing-redeem", onSubmit: go, children: [_jsx(Field, { label: "Have a code? Type it here", error: error, hint: error ? undefined : "Its credits go to this org, for everyone here to use.", children: (control) => (_jsx(Input, { ...control, value: code, spellCheck: false, autoCapitalize: "characters", autoComplete: "off", placeholder: "GIFT-XXXXX-XXXXX", className: "billing-code-input", onChange: (event) => {
+                                setCode(event.target.value);
+                                setAdded(undefined);
+                                clear();
+                            } })) }), _jsx(Button, { type: "submit", loading: busy, disabled: !typed, className: "billing-go-small", children: "Redeem" }), added
+                        ? (_jsxs(Notice, { tone: "success", role: "status", children: [_jsxs("b", { children: [money(added.amount), " added."] }), " ", added.expires
+                                    ? `They lapse ${dayShown(added.expires)}, and they're spent before what lasts longer.`
+                                    : "They don't lapse."] }))
+                        : null] })] }));
+}

package/credits/views/web/budget.d.ts

@@ -0,0 +1,16 @@
+/**
+ * This month's budget: what's been spent against its limit as a meter, until
+ * when, and changing it (or having none). Before they set one, it says what
+ * happens at the limit: agents stop and computers sleep, nothing is deleted,
+ * and it resets next month; and if what they typed is under what's been spent
+ * already, that work stops right away. Near the limit the meter says so in
+ * words as well as colour; at it, plainly.
+ */
+import { type ReactNode } from "react";
+import { type BillingState } from "./numbers.js";
+import { type Call } from "./types.js";
+export declare function BudgetCard({ state, call, onChanged }: {
+    state: BillingState;
+    call: Call;
+    onChanged(): Promise<void>;
+}): ReactNode;

package/credits/views/web/budget.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * This month's budget: what's been spent against its limit as a meter, until
+ * when, and changing it (or having none). Before they set one, it says what
+ * happens at the limit: agents stop and computers sleep, nothing is deleted,
+ * and it resets next month; and if what they typed is under what's been spent
+ * already, that work stops right away. Near the limit the meter says so in
+ * words as well as colour; at it, plainly.
+ */
+import { useEffect, useState } from "react";
+import { Badge, Button, Card, Checkbox, Dialog, Field, Icon, Input, Notice } from "copilotz/web";
+import { amountOf, budgetStand, dayShown, money } from "./numbers.js";
+import { useAct } from "./types.js";
+export function BudgetCard({ state, call, onChanged }) {
+    const [changing, setChanging] = useState(false);
+    const stand = budgetStand(state);
+    const month = state.month;
+    if (!month)
+        return null;
+    // An org that isn't charged has no limit to think about, unless one was set.
+    if (state.waived && stand.tone === "none")
+        return null;
+    const resets = dayShown(month.end);
+    return (_jsxs(Card, { as: "section", className: "billing-card", id: "billing-budget", "aria-labelledby": "billing-month", children: [_jsxs("header", { className: "billing-card-head", children: [_jsx("h3", { id: "billing-month", children: "This month's budget" }), stand.tone === "at"
+                        ? _jsx(Badge, { tone: "warning", children: "Limit reached" })
+                        : stand.tone === "near"
+                            ? _jsx(Badge, { tone: "warning", children: "Near the limit" })
+                            : null] }), stand.limit !== undefined
+                ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "billing-spent", children: [_jsx("b", { children: money(stand.spent) }), " of ", money(stand.limit)] }), _jsx("div", { className: "billing-meter", "data-tone": stand.tone, role: "meter", "aria-label": "Spent this month, against the limit", "aria-valuemin": 0, "aria-valuemax": stand.limit, "aria-valuenow": Math.min(stand.spent, stand.limit), "aria-valuetext": `${money(stand.spent)} of ${money(stand.limit)}`, children: _jsx("span", { style: { width: `${Math.max(stand.share * 100, stand.spent > 0 ? 1.5 : 0)}%` } }) }), _jsx("p", { className: "billing-text", children: stand.tone === "at"
+                                ? `It resets ${resets}, or raise it to carry on now.`
+                                : `${money(stand.left ?? 0)} left. Resets ${resets}.` })] }))
+                : (_jsxs(_Fragment, { children: [_jsxs("p", { className: "billing-spent", children: [_jsx("b", { children: money(stand.spent) }), " so far"] }), _jsxs("p", { className: "billing-text", children: ["No limit: agents can use what credits you have. A new month starts ", resets, "."] })] })), _jsx("div", { className: "billing-card-end", children: _jsx(Button, { variant: stand.tone === "at" ? "primary" : "outline", onClick: () => setChanging(true), children: stand.limit === undefined ? "Set a limit" : "Change budget" }) }), _jsx(BudgetDialog, { open: changing, close: () => setChanging(false), limit: stand.limit, spent: stand.spent, resets: resets, call: call, onChanged: onChanged })] }));
+}
+function BudgetDialog({ open, close, limit, spent, resets, call, onChanged }) {
+    const [none, setNone] = useState(false);
+    const [typed, setTyped] = useState("");
+    const { busy, error, run, clear } = useAct();
+    useEffect(() => {
+        if (!open)
+            return;
+        setNone(false);
+        setTyped(limit === undefined ? "" : String(limit));
+        clear();
+    }, [open]);
+    const amount = amountOf(typed);
+    const wrong = !none && typed.trim() && amount === undefined ? "That isn't an amount." : undefined;
+    const valid = none || amount !== undefined;
+    const stops = !none && amount !== undefined && amount <= spent;
+    const save = (event) => {
+        event?.preventDefault();
+        if (!valid || busy)
+            return;
+        void run(async () => {
+            await call("billing.budget", { usd: none ? null : amount });
+            await onChanged();
+            close();
+        });
+    };
+    return (_jsx(Dialog, { open: open, onClose: close, size: "sm", title: "This month's budget", description: `${money(spent)} spent so far. It starts over ${resets}.`, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", onClick: close, disabled: busy, children: "Cancel" }), _jsx(Button, { variant: "primary", loading: busy, disabled: !valid, onClick: () => save(), children: none ? "Remove the limit" : amount !== undefined ? `Set to ${money(amount)}` : "Save" })] }), children: _jsxs("form", { className: "billing-dialog", onSubmit: save, children: [_jsx(Field, { label: "Limit for a month", error: wrong, children: (control) => (_jsx(Input, { ...control, inputMode: "decimal", autoComplete: "off", autoFocus: true, placeholder: "50", disabled: none, className: "billing-money-input", value: none ? "" : typed, onChange: (event) => setTyped(event.target.value) })) }), _jsx(Checkbox, { label: "No limit: use whatever credits there are", checked: none, onChange: (event) => setNone(event.target.checked) }), stops
+                    ? (_jsxs(Notice, { tone: "warning", role: "status", children: ["That's no more than what's already been spent, so work stops right away, until", " ", resets, " or until you raise it."] }))
+                    : null, _jsxs("ul", { className: "billing-rules", children: [_jsxs("li", { children: [_jsx(Icon, { name: "pause", size: 14 }), "At the limit, agents stop and computers sleep."] }), _jsxs("li", { children: [_jsx(Icon, { name: "lock", size: 14 }), "Nothing is deleted."] }), _jsxs("li", { children: [_jsx(Icon, { name: "refresh", size: 14 }), "It resets ", resets, ", and every month after."] })] }), error ? _jsx(Notice, { tone: "destructive", role: "alert", children: error }) : null] }) }));
+}

package/credits/views/web/composer.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The note above where you type (kind `billing.composer`, chat's
+ * `composerNotes`): so people know before they send. Nothing at all while it
+ * asks, when there's nothing to say, or if it can't ask. Stopped, it says the
+ * org is out of credits or at its budget: with a way to Billing for those who
+ * run it, and who can help for everyone else; that one can't be put away. Low,
+ * for those who run it, what's left and a way to add more, which they can put
+ * away for this visit. It asks when it appears, when the page comes back, and
+ * when agents finish working (`hints.working`), which is when it changes.
+ */
+import { type ReactNode } from "react";
+import type { ViewContext } from "copilotz";
+export declare const composerNoteView: (_: unknown, ctx: ViewContext<ReactNode>) => ReactNode;