@hanzo/build 0.2.52 → 0.2.53

package/lib/settings/code.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Code: where and how a new run starts — the model, the effort, the mode and
- * the place — for anyone whose New has no choice of its own kept yet. Saved to
- * the person's own settings. Beside them, the codebases' environments and the
- * organization's machines, each on its own page.
+ * Code: where and how a new run starts — the mode and the place, saved to the
+ * person's own settings for anyone whose New has no choice of its own kept yet
+ * — and the model and effort, which are the one choice Chat and Dev share
+ * (mind.tsx): changed here, changed in both composers. Beside them, the
+ * codebases' environments and the organization's machines, each on its own page.
  */
 import { YStack } from '@hanzo/gui';
 import { ChevronRight } from '@hanzogui/lucide-icons-2';
@@ -11,11 +12,12 @@ import { ChipSelect } from '@hanzo/ui/product';
 import { ModelPicker } from '@hanzo/ui/models';
 import { useState } from 'react';
 import { unhonoured } from '../api/coding.js';
-import { ENSO, models } from '../api/models.js';
+import { ENSO } from '../api/models.js';
 import { SANDBOX } from '../api/places.js';
-import { usePlaces, useRead } from '../data.js';
+import { usePlaces } from '../data.js';
 import { useHost, useTarget } from '../host.js';
-import { EFFORTS, MODES } from '../landing.js';
+import { MODES } from '../landing.js';
+import { EFFORTS, useCatalog, useChoice } from '../mind.js';
 import { usePrefs } from '../prefs.js';
 import { path } from '../route.js';
 import { Card, Group, Heading, Note, Row, Soft } from './ui.js';
@@ -24,13 +26,14 @@ export function Code() {
     const t = useTarget();
     const signed = Boolean(host.person);
     const { prefs, save } = usePrefs();
-    const catalog = useRead(signed ? () => models(t) : null, [], [t, signed]);
+    const catalog = useCatalog(t);
+    const [choice, choose] = useChoice();
     const places = usePlaces(t, signed);
     const [note, setNote] = useState('');
     if (!signed) {
         return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Code" }), _jsx(Soft, { children: "Sign in to set how your runs start." })] }));
     }
-    const now = { model: ENSO, effort: 'medium', mode: 'build', place: '', ...prefs.code };
+    const now = { mode: 'build', place: '', ...prefs.code };
     const keep = (change) => {
         setNote('');
         save({ code: { ...prefs.code, ...change } }).catch((e) => setNote(e.message));
@@ -45,11 +48,11 @@ export function Code() {
     // The sandbox is always listed, so a place not found is a machine that is not: it reads as its id.
     const place = where.find((w) => w.place === now.place) ?? { id: now.place, label: now.place, place: now.place };
     // A default is never premium: a premium model is picked for one run, in New.
-    const offered = catalog.value.filter((m) => m.class !== 'premium');
+    const offered = catalog.models.filter((m) => m.class !== 'premium');
     const go = (section) => host.go(path({ kind: 'settings', section }));
-    const effort = EFFORTS.find((e) => e.id === now.effort);
+    const effort = EFFORTS.find((e) => e.id === choice.effort);
     const mode = MODES.find((m) => m.id === now.mode);
-    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Code", detail: "How a new run starts. New begins from these until you choose otherwise there." }), _jsxs(Group, { title: "Defaults", children: [_jsxs(Card, { children: [_jsx(Row, { first: true, title: "Model", detail: "Enso picks one for each step; any other model runs them all.", trailing: _jsx(ModelPicker, { size: "sm", name: "Default model", models: offered, scope: "chat", value: now.model || ENSO, onChange: (id) => keep({ model: id }), loading: catalog.loading, error: catalog.error?.message ?? null }) }), _jsx(Row, { title: "Effort", detail: "How long the agent thinks before it acts.", trailing: _jsx(ChipSelect, { name: "Default effort", label: effort.label, chosen: effort, items: EFFORTS, onChange: (e) => keep({ effort: e.id }), placement: "bottom-end", width: 180 }) }), _jsx(Row, { title: "Mode", detail: mode.hint, trailing: _jsx(ChipSelect, { name: "Default mode", label: mode.label, chosen: mode, items: MODES, onChange: (m) => keep({ mode: m.id }), placement: "bottom-end", width: 260 }) }), _jsx(Row, { title: "Where it runs", detail: "The Hanzo sandbox, or one of your organization\u2019s machines.", trailing: _jsx(ChipSelect, { name: "Default place", label: place.label, chosen: place, items: where, onChange: (w) => keep({ place: w.place }), placeholder: "Search machines\u2026", placement: "bottom-end", loading: places.loading, error: places.error?.message ?? null }) })] }), _jsx(Note, { children: unhonoured(now.mode, now.place) })] }), _jsx(Group, { title: "Workspace", children: _jsxs(Card, { children: [_jsx(Row, { first: true, title: "Environments", detail: "What a run installs and starts in each codebase, and the secrets it exports.", trailing: _jsx(Link, { label: "Environments", onPress: () => go('environments') }) }), _jsx(Row, { title: "Machines", detail: "Your organization\u2019s own computers that take runs.", trailing: _jsx(Link, { label: "Machines", onPress: () => go('machines') }) })] }) }), _jsx(Note, { children: note })] }));
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Code", detail: "How a new run starts. The model and effort are the ones Chat uses too." }), _jsxs(Group, { title: "Defaults", children: [_jsxs(Card, { children: [_jsx(Row, { first: true, title: "Model", detail: "Enso picks one for each step; any other model runs them all.", trailing: _jsx(ModelPicker, { size: "sm", name: "Default model", models: offered, scope: "chat", value: choice.model || ENSO, onChange: (id) => choose({ model: id }), loading: catalog.loading, error: catalog.error }) }), _jsx(Row, { title: "Effort", detail: "How long the agent thinks before it acts.", trailing: _jsx(ChipSelect, { name: "Default effort", label: effort.label, chosen: effort, items: EFFORTS, onChange: (e) => choose({ effort: e.id }), placement: "bottom-end", width: 180 }) }), _jsx(Row, { title: "Mode", detail: mode.hint, trailing: _jsx(ChipSelect, { name: "Default mode", label: mode.label, chosen: mode, items: MODES, onChange: (m) => keep({ mode: m.id }), placement: "bottom-end", width: 260 }) }), _jsx(Row, { title: "Where it runs", detail: "The Hanzo sandbox, or one of your organization\u2019s machines.", trailing: _jsx(ChipSelect, { name: "Default place", label: place.label, chosen: place, items: where, onChange: (w) => keep({ place: w.place }), placeholder: "Search machines\u2026", placement: "bottom-end", loading: places.loading, error: places.error?.message ?? null }) })] }), _jsx(Note, { children: unhonoured(now.mode, now.place) })] }), _jsx(Group, { title: "Workspace", children: _jsxs(Card, { children: [_jsx(Row, { first: true, title: "Environments", detail: "What a run installs and starts in each codebase, and the secrets it exports.", trailing: _jsx(Link, { label: "Environments", onPress: () => go('environments') }) }), _jsx(Row, { title: "Machines", detail: "Your organization\u2019s own computers that take runs.", trailing: _jsx(Link, { label: "Machines", onPress: () => go('machines') }) })] }) }), _jsx(Note, { children: note })] }));
 }
 function Link({ label, onPress }) {
     return (_jsx(YStack, { render: "button", "aria-label": `Open ${label}`, p: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, onPress: onPress, children: _jsx(ChevronRight, { size: 16 }) }));

package/lib/settings/credits.d.ts

@@ -0,0 +1,9 @@
+import type { Target } from '../api/call.ts';
+/** What the credits section says first, on every surface. */
+export declare const SEPARATE = "Credits are separate from your plan\u2019s usage allowance. They pay for usage past it when you choose to continue with credits, and for all usage when there is no plan.";
+export declare function Credits({ target: t, admin, add, onCard }: {
+    target: Target;
+    admin: boolean;
+    add?: string;
+    onCard?: () => void;
+}): import("react").JSX.Element;

package/lib/settings/credits.js

@@ -0,0 +1,110 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Credits, as the one view every Billing page draws: Dev's Settings, the
+ * rooms' Settings and hanzo.ai's organization settings.
+ *
+ * CREDITS ARE NOT THE PLAN. A plan includes usage, measured in shares on Usage;
+ * credits are money — the prepaid balance bought with a card and the credit
+ * Hanzo granted — and they pay for usage past the plan when the payer chose to
+ * continue with credits, and for everything when there is no plan. So the
+ * balance, the grants, top-ups, auto-reload, this month's spend and the monthly
+ * limit on it live here, and nowhere a plan is named.
+ *
+ * Money moves two ways, the host's choice: `add` names a page that takes it (the
+ * pay site); without one a saved card is charged here (POST /v1/billing/topup)
+ * and a person with no card is sent to add one (`onCard`).
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Button, Input, Switch } from '@hanzo/ui';
+import { useEffect, useState } from 'react';
+import { arm, balance, caps, cents, chosen, credit, grants, label, lift, limit, methods, money, monthly, recharge, spend, topup, } from '../api/billing.js';
+import { useRead } from '../data.js';
+import { Card, day, Group, Note, Row, Soft } from './ui.js';
+/** What the credits section says first, on every surface. */
+export const SEPARATE = 'Credits are separate from your plan’s usage allowance. They pay for usage past it when you choose to continue with credits, and for all usage when there is no plan.';
+/** A money figure as read: the amount, or why there is none. */
+function Figure({ read }) {
+    return (_jsx(SizableText, { size: "$2", color: read.error ? '$soft' : '$ink', numberOfLines: 1, maxW: 200, children: read.error ? 'Unavailable' : read.loading ? '…' : money(read.value) }));
+}
+/** A thin bar of a whole, red once a limit is used up. */
+function Bar({ part, whole, limit }) {
+    const pct = Math.min(100, Math.max(0, (part / whole) * 100));
+    return (_jsx(YStack, { height: 6, rounded: 999, bg: "$hover", overflow: "hidden", role: "progressbar", "aria-valuenow": Math.round(pct), "aria-valuemin": 0, "aria-valuemax": 100, children: _jsx(YStack, { height: 6, width: `${pct}%`, rounded: 999, bg: limit && pct >= 100 ? '$red10' : '$ink' }) }));
+}
+function Meter({ title, used, of, says, first, limit = true }) {
+    return (_jsxs(YStack, { gap: "$2", px: "$3", py: "$3", borderTopWidth: first ? 0 : 1, borderColor: "$borderColor", children: [_jsxs(XStack, { items: "baseline", justify: "space-between", flexWrap: "wrap", columnGap: "$3", rowGap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: title }), _jsx(SizableText, { size: "$1", color: "$soft", children: says })] }), _jsx(Bar, { part: used, whole: of, limit: limit })] }));
+}
+/** `Resets Oct 1, 2026`, or '' for none. */
+const resets = (iso) => (day(iso) ? `Resets ${day(iso)}` : '');
+export function Credits({ target: t, admin, add, onCard }) {
+    const left = useRead(() => balance(t), 0, [t]);
+    const granted = useRead(() => credit(t), 0, [t]);
+    const rows = useRead(() => grants(t), [], [t]);
+    const spent = useRead(() => spend(t), null, [t]);
+    const rule = useRead(() => recharge(t), null, [t]);
+    const ceilings = useRead(() => caps(t), [], [t]);
+    const cards = useRead(add ? null : () => methods(t), [], [t, add]);
+    const [buying, setBuying] = useState(false);
+    const [amount, setAmount] = useState('25');
+    const [ceiling, setCeiling] = useState('');
+    const [below, setBelow] = useState('');
+    const [reload, setReload] = useState('');
+    const [working, setWorking] = useState(false);
+    const [note, setNote] = useState('');
+    // The rule's figures are what the form starts from, once read.
+    useEffect(() => {
+        if (!rule.value)
+            return;
+        setBelow(rule.value.threshold ? String(rule.value.threshold / 100) : '');
+        setReload(rule.value.amount ? String(rule.value.amount / 100) : '');
+    }, [rule.value]);
+    const act = async (what, done, after) => {
+        setWorking(true);
+        setNote('');
+        try {
+            await what();
+            after();
+            setNote(done);
+        }
+        catch (e) {
+            setNote(e.message);
+        }
+        finally {
+            setWorking(false);
+        }
+    };
+    const card = chosen(cards.value);
+    const adding = cents(amount);
+    const cap = monthly(ceilings.value);
+    const others = ceilings.value.filter((c) => c !== cap);
+    const s = spent.value;
+    const top = Math.max(0, ...(s?.categories ?? []).map((c) => c.cents));
+    const live = rows.value.filter((g) => g.active && g.remaining > 0);
+    const buy = () => {
+        if (!adding)
+            return setNote('Enter an amount in dollars');
+        void act(() => topup(t, adding, card.id), `${money(adding)} is added to the balance`, () => {
+            setBuying(false);
+            left.reload();
+        });
+    };
+    const setLimit = () => {
+        const c = cents(ceiling);
+        if (!c)
+            return setNote('Enter a monthly limit in dollars');
+        void act(() => limit(t, ceilings.value, c), `Spend stops at ${money(c)} a month`, () => {
+            setCeiling('');
+            ceilings.reload();
+        });
+    };
+    const saveRule = (enabled) => {
+        const threshold = below.trim() === '' || below.trim() === '0' ? 0 : cents(below);
+        const each = cents(reload);
+        if (enabled && (threshold === null || !each))
+            return setNote('Enter the balance to reload below and the amount to add, in dollars');
+        void act(() => arm(t, { enabled, threshold: threshold ?? 0, amount: each ?? rule.value?.amount ?? 0 }), enabled ? `Adds ${money(each ?? 0)} whenever the balance falls below ${money(threshold ?? 0)}` : 'Auto-reload is off', rule.reload);
+    };
+    return (_jsxs(YStack, { gap: "$6", "data-slot": "credits", children: [_jsxs(Group, { title: "Credits", detail: SEPARATE, action: add ? (_jsx(Button, { size: "sm", variant: "outline", onPress: () => window.open(add, '_blank', 'noopener'), children: "Add funds" })) : buying || !admin ? undefined : (_jsx(Button, { size: "sm", variant: "outline", onPress: () => setBuying(true), children: "Buy more" })), children: [_jsxs(Card, { children: [_jsx(Row, { first: true, title: "Prepaid balance", detail: "Bought with a card", trailing: _jsx(Figure, { read: left }) }), _jsx(Row, { title: "Granted credit", detail: "Given by Hanzo; some models take only prepaid", trailing: _jsx(Figure, { read: granted }) }), _jsx(Row, { title: "Spent this month", detail: s && !s.known ? 'The ledger did not answer, so this is not a measurement' : undefined, trailing: _jsx(Figure, { read: { ...spent, value: s?.total ?? 0 } }) }), buying ? (_jsx(YStack, { gap: "$2", px: "$3", py: "$3", borderTopWidth: 1, borderColor: "$borderColor", children: card ? (_jsxs(_Fragment, { children: [_jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsx(YStack, { width: 140, children: _jsx(Input, { value: amount, onChangeText: setAmount, "aria-label": "Amount in dollars", placeholder: "25", inputMode: "decimal" }) }), _jsxs(SizableText, { flex: 1, minW: 160, size: "$1", color: "$soft", children: ["Charged to ", label(card)] })] }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setBuying(false), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: buy, children: adding ? `Add ${money(adding)}` : 'Add funds' })] })] })) : (_jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsx(SizableText, { flex: 1, minW: 160, size: "$2", color: "$soft", children: cards.loading ? 'Reading cards…' : 'Add a card to buy more.' }), onCard ? (_jsx(Button, { size: "sm", variant: "outline", onPress: onCard, children: "Add card" })) : null] })) })) : null] }), live.length ? (_jsx(Card, { children: live.map((g, i) => (_jsx(Row, { first: i === 0, title: g.name || 'Credit grant', detail: [`${money(g.remaining, g.currency)} left of ${money(g.amount, g.currency)}`, g.expires ? `expires ${day(g.expires)}` : ''].filter(Boolean).join(' · ') }, g.id))) })) : null] }), _jsx(Group, { title: "Auto-reload", detail: "Tops the balance up from the card on file whenever it falls below a floor.", children: rule.error ? (_jsx(Soft, { children: rule.error.message })) : !rule.value ? (_jsx(Soft, { children: "Reading auto-reload\u2026" })) : (_jsxs(Card, { children: [_jsx(Row, { first: true, title: rule.value.enabled ? `Adds ${money(rule.value.amount)} below ${money(rule.value.threshold)}` : 'Off', detail: rule.value.last ? `Last reloaded ${day(rule.value.last)}` : admin ? undefined : 'An org admin sets auto-reload.', trailing: admin ? (_jsx(Switch, { "aria-label": "Auto-reload", checked: rule.value.enabled, disabled: working, onCheckedChange: (on) => saveRule(on) })) : undefined }), admin ? (_jsxs(XStack, { gap: "$2", items: "center", px: "$3", py: "$3", borderTopWidth: 1, borderColor: "$borderColor", flexWrap: "wrap", children: [_jsx(YStack, { width: 150, children: _jsx(Input, { value: below, onChangeText: setBelow, "aria-label": "Reload below, in dollars", placeholder: "Below $5", inputMode: "decimal" }) }), _jsx(YStack, { width: 150, children: _jsx(Input, { value: reload, onChangeText: setReload, "aria-label": "Amount to add, in dollars", placeholder: "Add $25", inputMode: "decimal" }) }), _jsx(XStack, { flex: 1, justify: "flex-end", children: _jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => saveRule(true), children: rule.value.enabled ? 'Save' : 'Turn on' }) })] })) : null] })) }), _jsx(Group, { title: "Spend this month", detail: "What credits paid for, by kind.", children: spent.error ? (_jsx(Soft, { children: spent.error.message })) : !s ? (_jsx(Soft, { children: "Reading spend\u2026" })) : s.categories.length === 0 ? (_jsx(Card, { children: _jsx(Soft, { children: "Nothing spent this month." }) })) : (_jsx(Card, { children: s.categories.map((c, i) => (_jsx(Meter, { first: i === 0, title: c.name, used: c.cents, of: top, says: money(c.cents), limit: false }, c.name))) })) }), _jsxs(Group, { title: "Monthly limit", detail: "Spend from credits past it is refused until the month starts over.", children: [ceilings.error ? (_jsx(Soft, { children: ceilings.error.message })) : (_jsxs(Card, { children: [cap ? (_jsx(Meter, { first: true, title: `${money(cap.threshold)} a month`, used: cap.spent ?? 0, of: cap.threshold, says: [cap.spent === null ? 'Spend unknown' : `${money(cap.spent)} spent`, resets(cap.resets)].filter(Boolean).join(' · ') })) : (_jsx(Row, { first: true, title: "No monthly limit", detail: "Spend is bounded by the balance alone." })), others.map((c) => (_jsx(Row, { title: c.title || 'Limit', detail: [c.project && `project ${c.project}`, c.service && `service ${c.service}`, c.enforce ? 'refuses spend past it' : 'warns only']
+                                    .filter(Boolean)
+                                    .join(' · '), trailing: _jsx(SizableText, { size: "$2", color: "$ink", children: c.threshold ? money(c.threshold) : '—' }) }, c.id))), admin ? (_jsxs(XStack, { gap: "$2", items: "center", px: "$3", py: "$3", borderTopWidth: 1, borderColor: "$borderColor", flexWrap: "wrap", children: [_jsx(YStack, { width: 160, children: _jsx(Input, { value: ceiling, onChangeText: setCeiling, "aria-label": "Monthly limit in dollars", placeholder: cap ? String(cap.threshold / 100) : '500', inputMode: "decimal" }) }), _jsxs(XStack, { flex: 1, gap: "$2", justify: "flex-end", children: [cap ? (_jsx(Button, { size: "sm", variant: "ghost", disabled: working, onPress: () => void act(() => lift(t, cap.id), 'The monthly limit is lifted', ceilings.reload), children: "Remove" })) : null, _jsx(Button, { size: "sm", variant: "outline", disabled: working || !ceiling.trim(), onPress: setLimit, children: cap ? 'Change limit' : 'Set limit' })] })] })) : null] })), !admin ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin sets the monthly limit." })) : null] }), _jsx(Note, { children: note })] }));
+}

package/lib/settings/plan.d.ts

@@ -0,0 +1,17 @@
+import type { Target } from '../api/call.ts';
+import { type Standing } from '../standing.ts';
+/** The view, once read. */
+export declare function Reading({ s, target, onPlans, onBilling, now, }: {
+    s: Standing;
+    target: Target;
+    onPlans?: () => void;
+    onBilling: () => void;
+    now?: number;
+}): import("react").JSX.Element;
+/** The plan's usage, read as `target`. */
+export declare function Plan({ target, onPlans, onBilling, now }: {
+    target: Target;
+    onPlans?: () => void;
+    onBilling: () => void;
+    now?: number;
+}): import("react").JSX.Element;

package/lib/settings/plan.js

@@ -0,0 +1,108 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The plan's usage, as the one view every Usage page draws: Dev's Settings,
+ * the rooms' Settings and hanzo.ai's organization settings.
+ *
+ * On a PLAN: its name, its period, the request windows (session, day) and each
+ * class of model's share of the period with its shorter window — shares only,
+ * never money — and the choice of what happens when the allowance runs out:
+ * `Use credits when my plan's allowance runs out` (PUT /v1/ai/limits), off
+ * until the payer turns it on, and saying what it spends. Once a class is used
+ * up it leads with that, its reset, and the two ways on.
+ *
+ * On FREE: the share of today's free allowance left and the shared pool's
+ * state, and Upgrade. With CREDITS and no plan: the balance, because it is
+ * what the account spends.
+ *
+ * It reads as `target`, so it needs no host: a host says where the plans and
+ * Billing are (`onPlans`, `onBilling`).
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Button, Switch } from '@hanzo/ui';
+import { useState } from 'react';
+import { money } from '../api/billing.js';
+import { allow, CLASSES } from '../api/limits.js';
+import { INK, Title } from '../meter.js';
+import { spent, ways, when } from '../plan.js';
+import { left, useStanding } from '../standing.js';
+import { Card, day, Group, Note, Row, Soft } from './ui.js';
+const NAME = { premium: 'Premium models', ours: 'Hanzo models' };
+const FILL = { ok: '$ink', near: '$yellow10', limited: '$red10' };
+/** A thin bar of a share used. */
+function Bar({ percent, state }) {
+    return (_jsx(YStack, { height: 6, rounded: 999, bg: "$hover", overflow: "hidden", role: "progressbar", "aria-valuenow": percent, "aria-valuemin": 0, "aria-valuemax": 100, children: _jsx(YStack, { height: 6, width: `${percent}%`, rounded: 999, bg: FILL[state] }) }));
+}
+/** One measured row: what, how much of it is used, when it starts over, its bar, and what hangs under it. */
+function Gauge({ title, w, first, says, now, children }) {
+    const at = when(w.resets, now);
+    return (_jsxs(YStack, { gap: "$2", px: "$3", py: "$3", borderTopWidth: first ? 0 : 1, borderColor: "$borderColor", "data-slot": "plan-window", "data-state": w.state, children: [_jsxs(XStack, { items: "baseline", justify: "space-between", flexWrap: "wrap", columnGap: "$3", rowGap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: title }), _jsx(SizableText, { size: "$1", color: INK[w.state], style: { fontVariantNumeric: 'tabular-nums' }, children: [says ?? `${w.percent}% used`, at ? `Resets ${at}` : ''].filter(Boolean).join(' · ') })] }), _jsx(Bar, { percent: w.percent, state: w.state }), children] }));
+}
+/** The view, once read. */
+export function Reading({ s, target, onPlans, onBilling, now, }) {
+    const [after, setAfter] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [note, setNote] = useState('');
+    const l = after ?? s.limits;
+    const upgrade = l?.actions.find((a) => a.kind === 'upgrade');
+    const choose = async (on) => {
+        setBusy(true);
+        setNote('');
+        try {
+            setAfter(await allow(target, on));
+        }
+        catch (e) {
+            setNote(e.message);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const go = (a) => {
+        if (a.kind === 'credits')
+            return void choose(true);
+        if (a.kind === 'upgrade' && onPlans)
+            return onPlans();
+        if (a.kind === 'topup')
+            return onBilling();
+        if (a.url)
+            window.location.assign(a.url);
+    };
+    // On a plan: a class used up, or one model paused, leads with its ways on, the upgrade among them.
+    const used = s.kind === 'plan' && l ? CLASSES.filter((c) => l.classes[c]?.state === 'limited') : [];
+    const capped = s.kind === 'plan' ? (l?.paused[0] ?? null) : null;
+    const resets = used.map((c) => l.classes[c].resets).sort()[0] ?? '';
+    const notice = used.length
+        ? spent(s.label, used, resets, now)
+        : capped
+            ? `${capped.model.replace(/\*$/, '')} is paused${when(capped.resets, now) ? ` until ${when(capped.resets, now)}` : ''}${capped.fallback ? `; chat continues on ${capped.fallback}` : ''}.`
+            : '';
+    const head = (_jsxs(XStack, { items: "center", gap: "$3", flexWrap: "wrap", "data-slot": "plan-head", children: [_jsxs(YStack, { flex: 1, minW: 200, gap: "$1", children: [s.label ? _jsx(Title, { label: s.label, size: "$5" }) : null, _jsx(SizableText, { size: "$2", color: "$soft", children: s.kind === 'plan'
+                            ? l?.start && l.end
+                                ? `Current period ${day(l.start)} – ${day(l.end)}`
+                                : 'Your plan'
+                            : s.kind === 'free'
+                                ? 'Limited usage of free models, from a pool every free account shares.'
+                                : 'No plan. Usage is paid from your credits.' })] }), (upgrade && !notice) || (s.kind !== 'plan' && onPlans) ? (_jsx(Button, { size: "sm", variant: s.kind === 'plan' ? 'outline' : 'primary', onPress: () => (upgrade ? go(upgrade) : onPlans?.()), children: upgrade?.label || 'Upgrade' })) : null] }));
+    if (s.kind === 'free') {
+        const share = left(s.allowance);
+        const a = s.allowance;
+        return (_jsxs(YStack, { gap: "$5", "data-slot": "plan-usage", "data-kind": "free", children: [head, a && share !== null ? (_jsxs(Card, { children: [_jsx(Gauge, { first: true, title: a.window === 'hour' ? 'This hour' : 'Today', w: { percent: 100 - share, state: share === 0 ? 'limited' : share <= 20 ? 'near' : 'ok', resets: a.resets }, says: `${share}% left`, now: now }), a.pool ? (_jsx(Row, { title: "Shared pool", detail: a.pool.state === 'exhausted' ? `Used up${when(a.pool.resets, now) ? ` until ${when(a.pool.resets, now)}` : ''}` : a.pool.state === 'busy' ? 'Busy. Try again in a minute.' : 'Every free request is being served.' })) : null] })) : (_jsx(Soft, { children: "The free allowance could not be read." })), _jsxs(XStack, { items: "center", gap: "$3", flexWrap: "wrap", children: [_jsx(SizableText, { size: "$2", color: "$soft", flex: 1, minW: 200, children: "Credits pay as you go for any model, with or without a plan." }), _jsx(Button, { size: "sm", variant: "outline", onPress: onBilling, children: "Add credits" })] })] }));
+    }
+    if (s.kind === 'credits') {
+        return (_jsxs(YStack, { gap: "$5", "data-slot": "plan-usage", "data-kind": "credits", children: [head, _jsx(Card, { children: _jsx(Row, { first: true, title: "Credits", detail: "What your usage is paid from, at each model\u2019s list price.", trailing: _jsx(SizableText, { size: "$2", color: "$ink", "data-slot": "plan-balance", children: s.balance === null ? 'Unavailable' : money(s.balance) }) }) }), _jsx(XStack, { children: _jsx(Button, { size: "sm", variant: "outline", onPress: onBilling, children: "Add funds" }) })] }));
+    }
+    const on = l?.credits ?? false;
+    return (_jsxs(YStack, { gap: "$5", "data-slot": "plan-usage", "data-kind": "plan", children: [head, notice ? (_jsxs(XStack, { items: "center", gap: "$2.5", flexWrap: "wrap", px: "$3", py: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", "data-slot": "plan-spent", children: [_jsx(YStack, { width: 8, height: 8, rounded: 4, bg: "$red10", shrink: 0, "aria-hidden": true }), _jsx(SizableText, { size: "$2", color: "$ink", flex: 1, minW: 200, children: notice }), _jsx(XStack, { gap: "$2", flexWrap: "wrap", children: ways(l?.actions ?? []).map((a, i) => (_jsx(Button, { size: "sm", variant: i === 0 ? 'primary' : 'outline', disabled: busy, "data-kind": a.kind, onPress: () => go(a), children: a.label }, a.kind))) })] })) : null, !l ? (_jsx(Soft, { children: "The plan\u2019s usage could not be read." })) : !l.session && !l.day && !Object.keys(l.classes).length ? (_jsx(Soft, { children: "This plan sets no usage limits." })) : (_jsxs(_Fragment, { children: [l.session || l.day ? (_jsx(Group, { title: "Requests", detail: "Every request the plan covers counts in both.", children: _jsxs(Card, { children: [l.session ? _jsx(Gauge, { first: true, title: "Session", w: l.session, says: l.session.resets ? undefined : `${l.session.percent}% used · Starts with your next request`, now: now }) : null, l.day ? _jsx(Gauge, { first: !l.session, title: "Today", w: l.day, now: now }) : null] }) })) : null, Object.keys(l.classes).length ? (_jsx(Group, { title: "By model class", detail: "Each class\u2019s share of the billing period, and of its shorter window where the plan sets one.", children: _jsx(Card, { children: CLASSES.filter((c) => l.classes[c]).map((c, i) => {
+                                const k = l.classes[c];
+                                return (_jsx(YStack, { "data-class": c, children: _jsx(Gauge, { first: i === 0, title: NAME[c], w: k, says: k.paying === 'credits' ? `${k.percent}% used · Paying from credits` : undefined, now: now, children: k.window ? (_jsxs(XStack, { gap: "$2", items: "center", "data-slot": "plan-short", children: [_jsx(SizableText, { size: "$1", color: "$soft", shrink: 0, children: "Shorter window" }), _jsx(YStack, { flex: 1, children: _jsx(Bar, { percent: k.window.percent, state: k.window.state }) }), _jsx(SizableText, { size: "$1", color: "$soft", shrink: 0, children: [`${k.window.percent}%`, when(k.window.resets, now) ? `Resets ${when(k.window.resets, now)}` : ''].filter(Boolean).join(' · ') })] })) : null }) }, c));
+                            }) }) })) : null, _jsx(Group, { title: "When the allowance runs out", detail: "Credits are separate from your plan\u2019s usage allowance. They live in Billing.", children: _jsxs(Card, { children: [_jsx(Row, { first: true, title: "Use credits when my plan\u2019s allowance runs out", detail: on
+                                        ? 'On. A model whose included usage is used keeps working, paid from credits — prepaid first, then granted credit where the model takes it — at its list price.'
+                                        : 'Off. Chat continues on a free model, and other requests wait for the plan to reset.', trailing: _jsx(Switch, { "aria-label": "Use credits when my plan\u2019s allowance runs out", checked: on, disabled: busy, onCheckedChange: (next) => void choose(next) }) }), _jsx(Row, { title: "Credits", detail: s.balance === 0 ? 'There are no credits to spend yet.' : 'The balance, top-ups and auto-reload.', trailing: _jsx(Button, { size: "sm", variant: "ghost", onPress: onBilling, children: s.balance === 0 ? 'Add credits' : 'Billing' }) })] }) })] })), _jsx(Note, { children: note })] }));
+}
+/** The plan's usage, read as `target`. */
+export function Plan({ target, onPlans, onBilling, now }) {
+    const read = useStanding(target);
+    if (read.value)
+        return _jsx(Reading, { s: read.value, target: target, onPlans: onPlans, onBilling: onBilling, now: now });
+    return _jsx(Soft, { children: read.error ? read.error.message : 'Reading the plan…' });
+}

package/lib/settings/usage.js

@@ -1,128 +1,20 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Usage: what the plan includes and how much of it is used, what the
- * organization has left to spend and has spent this month, and the monthly
- * limit that stops spend past it. Buying more charges the saved card into the
- * balance; the limit is an org admin's to set.
+ * Usage: the plan's windows and what each class of model has used of it, as
+ * shares; the free allowance on Free; the balance with no plan. What happens
+ * when a plan's allowance runs out is chosen here. Credits themselves — the
+ * balance, top-ups, auto-reload, spend and its limit — are Billing's.
  */
-import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { Button, Input } from '@hanzo/ui';
-import { useState } from 'react';
-import { allowance, balance, caps, cents, chosen, credit, label, lift, limit, methods, money, month, monthly, spend, topup, } from '../api/billing.js';
-import { useRead } from '../data.js';
+import { YStack } from '@hanzo/gui';
 import { useHost, useTarget } from '../host.js';
 import { path } from '../route.js';
-import { Card, day, Group, Heading, Note, Row, Soft } from './ui.js';
-const SPAN = { hour: 'This hour', day: 'Today', week: 'This week', month: 'This month' };
-/** A thin bar: how much of a whole is used. Every whole drawn is above zero: a limit of none is not drawn. */
-function Bar({ part, whole, limit }) {
-    const pct = Math.min(100, Math.max(0, (part / whole) * 100));
-    return (_jsx(YStack, { height: 6, rounded: 999, bg: "$hover", overflow: "hidden", role: "progressbar", "aria-valuenow": Math.round(pct), "aria-valuemin": 0, "aria-valuemax": 100, children: _jsx(YStack, { height: 6, width: `${pct}%`, rounded: 999, bg: limit && pct >= 100 ? '$red10' : '$ink' }) }));
-}
-/**
- * One measured row: what, how much, when it starts over, and its bar. A limit's
- * bar turns red when it is used up; a share of a total never does.
- */
-function Meter({ title, used, of, says, first, limit = true }) {
-    return (_jsxs(YStack, { gap: "$2", px: "$3", py: "$3", borderTopWidth: first ? 0 : 1, borderColor: "$borderColor", children: [_jsxs(XStack, { items: "baseline", justify: "space-between", flexWrap: "wrap", columnGap: "$3", rowGap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: title }), _jsx(SizableText, { size: "$1", color: "$soft", children: says })] }), _jsx(Bar, { part: used, whole: of, limit: limit })] }));
-}
-/** `in 3 hr 12 min` or `Oct 1, 2026`, for when a window starts over. */
-function resets(iso) {
-    const at = iso ? new Date(iso).getTime() : NaN;
-    if (Number.isNaN(at))
-        return '';
-    const mins = Math.round((at - Date.now()) / 60000);
-    if (mins <= 0)
-        return 'Resets now';
-    if (mins < 60)
-        return `Resets in ${mins} min`;
-    if (mins < 24 * 60)
-        return `Resets in ${Math.floor(mins / 60)} hr ${mins % 60} min`;
-    return `Resets ${day(iso)}`;
-}
-const POOL = { available: 'Available', busy: 'Busy', exhausted: 'Used up' };
-const POOL_SAYS = {
-    available: () => 'Every free request is being served',
-    busy: () => 'Try again in a minute',
-    exhausted: (refill) => refill || 'Refills when the accounts reset',
-};
-/** `Refills at 16:00 UTC`, for a window or the pool: the UTC time it opens again, with the date when not today. */
-function refills(iso) {
-    const at = iso ? new Date(iso) : null;
-    if (!at || Number.isNaN(at.getTime()))
-        return '';
-    const hhmm = `${String(at.getUTCHours()).padStart(2, '0')}:${String(at.getUTCMinutes()).padStart(2, '0')} UTC`;
-    return at.toISOString().slice(0, 10) === new Date().toISOString().slice(0, 10) ? `Refills at ${hhmm}` : `Refills ${day(iso)}, ${hhmm}`;
-}
+import { useStanding } from '../standing.js';
+import { Reading } from './plan.js';
+import { Heading, Soft } from './ui.js';
 export function Usage() {
     const host = useHost();
     const t = useTarget();
     const signed = Boolean(host.person);
-    const plan = useRead(signed ? () => month(t) : null, null, [t, signed]);
-    const free = useRead(signed ? () => allowance(t) : null, null, [t, signed]);
-    const left = useRead(signed ? () => balance(t) : null, 0, [t, signed]);
-    const granted = useRead(signed ? () => credit(t) : null, 0, [t, signed]);
-    const spent = useRead(signed ? () => spend(t) : null, null, [t, signed]);
-    const ceilings = useRead(signed ? () => caps(t) : null, [], [t, signed]);
-    const cards = useRead(signed ? () => methods(t) : null, [], [t, signed]);
-    const [buying, setBuying] = useState(false);
-    const [amount, setAmount] = useState('25');
-    const [ceiling, setCeiling] = useState('');
-    const [working, setWorking] = useState(false);
-    const [note, setNote] = useState('');
-    if (!signed) {
-        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Usage" }), _jsx(Soft, { children: "Sign in to see this organization\u2019s usage." })] }));
-    }
-    const act = async (what, done, after) => {
-        setWorking(true);
-        setNote('');
-        try {
-            await what();
-            after();
-            setNote(done);
-        }
-        catch (e) {
-            setNote(e.message);
-        }
-        finally {
-            setWorking(false);
-        }
-    };
-    const m = plan.value;
-    const windows = (m?.windows ?? []).filter((w) => w.limit > 0);
-    const card = chosen(cards.value);
-    const cap = monthly(ceilings.value);
-    const others = ceilings.value.filter((c) => c !== cap);
-    const s = spent.value;
-    const top = Math.max(0, ...(s?.categories ?? []).map((c) => c.cents));
-    const adding = cents(amount);
-    // Offered only with a card to charge.
-    const buy = () => {
-        if (!adding) {
-            setNote('Enter an amount in dollars');
-            return;
-        }
-        void act(() => topup(t, adding, card.id), `${money(adding)} is added to the balance`, () => {
-            setBuying(false);
-            left.reload();
-        });
-    };
-    const setLimit = () => {
-        const c = cents(ceiling);
-        if (!c) {
-            setNote('Enter a monthly limit in dollars');
-            return;
-        }
-        void act(() => limit(t, ceilings.value, c), `Spend stops at ${money(c)} a month`, () => {
-            setCeiling('');
-            ceilings.reload();
-        });
-    };
-    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Usage", detail: `What ${host.org ?? 'this organization'} has used, has left, and may spend.` }), free.value?.pooled && free.value.limit > 0 ? (_jsx(Group, { title: "Free plan", detail: "Free \u2014 limited usage, from a pool shared by all free users.", action: _jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'plans' })), children: "Upgrade" }), children: _jsxs(Card, { children: [_jsx(Meter, { first: true, title: `${Math.max(0, free.value.limit - free.value.used).toLocaleString()} of ${free.value.limit.toLocaleString()} left ${free.value.window === 'hour' ? 'this hour' : free.value.window === 'day' ? 'today' : 'this period'}`, used: free.value.used, of: free.value.limit, says: [`${free.value.used.toLocaleString()} used`, refills(free.value.resets)].filter(Boolean).join(' · ') }), free.value.pool ? (_jsx(Row, { title: "Shared pool", detail: POOL_SAYS[free.value.pool.state]?.(refills(free.value.pool.resets)) ?? '', trailing: _jsx(SizableText, { size: "$2", color: free.value.pool.state === 'exhausted' ? '$red10' : '$ink', children: POOL[free.value.pool.state] ?? free.value.pool.state }) })) : null] }) })) : null, _jsx(Group, { title: "Plan usage limits", detail: m?.plan ? `Included with ${m.plan}.` : 'What the plan includes.', children: plan.error ? (_jsx(Soft, { children: plan.error.message })) : plan.loading && !m ? (_jsx(Soft, { children: "Reading the plan\u2019s limits\u2026" })) : !m || (windows.length === 0 && m.included === 0) ? (_jsx(Card, { children: _jsx(Soft, { children: "This plan sets no usage limits. Usage is paid from the balance." }) })) : (_jsxs(Card, { children: [m.included > 0 ? (_jsx(Meter, { first: true, title: "Included spend", used: m.used, of: m.included, says: `${money(m.used)} of ${money(m.included)}${m.overage ? ` · ${money(m.overage)} over` : ''}` })) : null, windows.map((w, i) => (_jsx(Meter, { first: i === 0 && m.included === 0, title: `${SPAN[w.span] ?? w.span} · ${w.used.toLocaleString()} of ${w.limit.toLocaleString()} requests`, used: w.used, of: w.limit, says: `${Math.round((Math.min(w.used, w.limit) / w.limit) * 100)}% used${resets(w.resets) ? ` · ${resets(w.resets)}` : ''}` }, w.span)))] })) }), _jsx(Group, { title: "Balance", detail: "Prepaid money pays for usage past the plan. Credits are spent first.", action: buying || !host.admin ? undefined : (_jsx(Button, { size: "sm", variant: "outline", onPress: () => setBuying(true), children: "Buy more" })), children: _jsxs(Card, { children: [_jsx(Row, { first: true, title: "Balance", detail: "What is left to spend", trailing: _jsx(Figure, { read: left }) }), _jsx(Row, { title: "Credits", detail: "Granted, and spent before the balance", trailing: _jsx(Figure, { read: granted }) }), _jsx(Row, { title: "Spent this month", detail: s && !s.known ? 'The ledger did not answer, so this is not a measurement' : undefined, trailing: _jsx(Figure, { read: { ...spent, value: s?.total ?? 0 } }) }), buying ? (_jsx(YStack, { gap: "$2", px: "$3", py: "$3", borderTopWidth: 1, borderColor: "$borderColor", children: card ? (_jsxs(_Fragment, { children: [_jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsx(YStack, { width: 140, children: _jsx(Input, { value: amount, onChangeText: setAmount, "aria-label": "Amount in dollars", placeholder: "25", inputMode: "decimal" }) }), _jsxs(SizableText, { flex: 1, minW: 160, size: "$1", color: "$soft", children: ["Charged to ", label(card)] })] }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setBuying(false), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: buy, children: adding ? `Add ${money(adding)}` : 'Add funds' })] })] })) : (_jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsx(SizableText, { flex: 1, minW: 160, size: "$2", color: "$soft", children: cards.loading ? 'Reading cards…' : 'Add a card in Billing to buy more.' }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'settings', section: 'billing' })), children: "Billing" })] })) })) : null] }) }), _jsx(Group, { title: "Spend this month", detail: "By what it paid for.", children: spent.error ? (_jsx(Soft, { children: spent.error.message })) : !s ? (_jsx(Soft, { children: "Reading spend\u2026" })) : s.categories.length === 0 ? (_jsx(Card, { children: _jsx(Soft, { children: "Nothing spent this month." }) })) : (_jsx(Card, { children: s.categories.map((c, i) => (_jsx(Meter, { first: i === 0, title: c.name, used: c.cents, of: top, says: money(c.cents), limit: false }, c.name))) })) }), _jsxs(Group, { title: "Monthly limit", detail: "Spend past it is refused until the month starts over.", children: [ceilings.error ? (_jsx(Soft, { children: ceilings.error.message })) : (_jsxs(Card, { children: [cap ? (_jsx(Meter, { first: true, title: `${money(cap.threshold)} a month`, used: cap.spent ?? 0, of: cap.threshold, says: [cap.spent === null ? 'Spend unknown' : `${money(cap.spent)} spent`, resets(cap.resets)].filter(Boolean).join(' · ') })) : (_jsx(Row, { first: true, title: "No monthly limit", detail: "Spend is bounded by the balance alone." })), others.map((c) => (_jsx(Row, { title: c.title || 'Limit', detail: [c.project && `project ${c.project}`, c.service && `service ${c.service}`, c.enforce ? 'refuses spend past it' : 'warns only']
-                                    .filter(Boolean)
-                                    .join(' · '), trailing: _jsx(SizableText, { size: "$2", color: "$ink", children: c.threshold ? money(c.threshold) : '—' }) }, c.id))), host.admin ? (_jsxs(XStack, { gap: "$2", items: "center", px: "$3", py: "$3", borderTopWidth: 1, borderColor: "$borderColor", flexWrap: "wrap", children: [_jsx(YStack, { width: 160, children: _jsx(Input, { value: ceiling, onChangeText: setCeiling, "aria-label": "Monthly limit in dollars", placeholder: cap ? String(cap.threshold / 100) : '500', inputMode: "decimal" }) }), _jsxs(XStack, { flex: 1, gap: "$2", justify: "flex-end", children: [cap ? (_jsx(Button, { size: "sm", variant: "ghost", disabled: working, onPress: () => void act(() => lift(t, cap.id), 'The monthly limit is lifted', ceilings.reload), children: "Remove" })) : null, _jsx(Button, { size: "sm", variant: "outline", disabled: working || !ceiling.trim(), onPress: setLimit, children: cap ? 'Change limit' : 'Set limit' })] })] })) : null] })), !host.admin ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin sets the monthly limit." })) : null] }), _jsx(Note, { children: note })] }));
-}
-/** A money figure as read: the amount, or why there is none. */
-function Figure({ read }) {
-    return (_jsx(SizableText, { size: "$2", color: read.error ? '$soft' : '$ink', numberOfLines: 1, maxW: 200, children: read.error ? 'Unavailable' : read.loading ? '…' : money(read.value) }));
+    const read = useStanding(t, signed);
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Usage", detail: `What ${host.org ?? 'this organization'}’s plan includes, and how much of it is used.` }), !signed ? (_jsx(Soft, { children: "Sign in to see this organization\u2019s usage." })) : read.value ? (_jsx(Reading, { s: read.value, target: t, onPlans: () => host.go(path({ kind: 'screen', screen: 'plans' })), onBilling: () => host.go(path({ kind: 'settings', section: 'billing' })) })) : (_jsx(Soft, { children: read.error ? read.error.message : 'Reading the plan…' }))] }));
 }

package/lib/shelf.js

@@ -10,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { Boxes, ExternalLink, Globe, Lock, MoreHorizontal } from '@hanzogui/lucide-icons-2';
-import { DropdownMenu } from '@hanzo/ui';
+import { Button, DropdownMenu } from '@hanzo/ui';
 import { useState } from 'react';
 import { change, fork, remove, templates } from './api/projects.js';
 import { Confirm, Rename } from './ask.js';
@@ -97,7 +97,7 @@ export function Artifacts() {
         }
     };
     const said = failed || note;
-    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", items: "center", "$max-md": { px: '$4' }, children: [_jsxs(YStack, { width: "100%", maxW: 1080, children: [_jsx(Head, { title: "Artifacts", says: "What this organization has built. Open one to keep building it." }), said ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", pb: "$3", children: said })) : null, starters.value.length ? (_jsxs(YStack, { gap: "$3", pb: "$6", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: "Make something new" }), _jsx(XStack, { flexWrap: "wrap", gap: "$3", children: starters.value.slice(0, 4).map((x) => (_jsxs(Card, { small: true, label: `Start from ${x.title}`, onPress: () => void take(x.slug), children: [_jsx(Shot, { slug: x.slug }), _jsx(YStack, { px: "$3", py: "$2.5", children: _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: busy === x.slug ? 'Copying…' : x.title }) })] }, x.slug))) })] })) : null, list.error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: list.error.message })) : !host.person ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Sign in to see what your organization has built." })) : list.loading && list.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Reading your projects\u2026" })) : list.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Nothing built yet. Describe something on the New page and it lands here." })) : (_jsx(YStack, { gap: "$5", children: months(list.value).map((g) => (_jsxs(YStack, { gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: g.label }), _jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: g.rows.map((p, i) => (_jsxs(XStack, { items: "center", pr: "$2", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsxs(XStack, { flex: 1, minW: 0, render: "button", "aria-label": `Open ${p.name}`, onPress: () => host.go(p.slug), items: "center", gap: "$3", px: "$3", py: "$2.5", cursor: "pointer", style: { textAlign: 'left' }, children: [p.visibility === 'private' ? _jsx(Lock, { size: 16, opacity: 0.7 }) : _jsx(Globe, { size: 16, opacity: 0.7 }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, children: p.name }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: [p.visibility === 'private' ? 'Private' : 'Public', edited(when(p)), p.live ? new URL(p.live).host : 'Not deployed yet']
+    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", items: "center", "$max-md": { px: '$4' }, children: [_jsxs(YStack, { width: "100%", maxW: 1080, children: [_jsx(Head, { title: "Artifacts", says: "What this organization has built. Open one to keep building it." }), said ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", pb: "$3", children: said })) : null, starters.value.length ? (_jsxs(YStack, { gap: "$3", pb: "$6", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: "Make something new" }), _jsx(XStack, { flexWrap: "wrap", gap: "$3", children: starters.value.slice(0, 4).map((x) => (_jsxs(Card, { small: true, label: `Start from ${x.title}`, onPress: () => void take(x.slug), children: [_jsx(Shot, { slug: x.slug }), _jsx(YStack, { px: "$3", py: "$2.5", children: _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: busy === x.slug ? 'Copying…' : x.title }) })] }, x.slug))) })] })) : null, list.error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: list.error.message })) : !host.person ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Sign in to see what your organization has built." })) : list.loading && list.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Reading your projects\u2026" })) : list.value.length === 0 ? (_jsxs(YStack, { gap: "$3", items: "flex-start", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "Nothing built yet. Describe something on the New page and it lands here." }), _jsx(Button, { size: "sm", onPress: () => host.go(''), children: "New run" })] })) : (_jsx(YStack, { gap: "$5", children: months(list.value).map((g) => (_jsxs(YStack, { gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: g.label }), _jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: g.rows.map((p, i) => (_jsxs(XStack, { items: "center", pr: "$2", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsxs(XStack, { flex: 1, minW: 0, render: "button", "aria-label": `Open ${p.name}`, onPress: () => host.go(p.slug), items: "center", gap: "$3", px: "$3", py: "$2.5", cursor: "pointer", style: { textAlign: 'left' }, children: [p.visibility === 'private' ? _jsx(Lock, { size: 16, opacity: 0.7 }) : _jsx(Globe, { size: 16, opacity: 0.7 }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, children: p.name }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: [p.visibility === 'private' ? 'Private' : 'Public', edited(when(p)), p.live ? new URL(p.live).host : 'Not deployed yet']
                                                                     .filter(Boolean)
                                                                     .join(' · ') })] })] }), _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": `Actions for ${p.name}`, px: "$1.5", py: "$1", rounded: "$2", hoverStyle: { bg: '$raised' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [
                                                     { key: 'rename', label: 'Rename', onSelect: () => setRenaming(p) },
@@ -127,5 +127,5 @@ export function Templates() {
     const t = useTarget();
     const list = useRead(() => templates(t), [], [t.api]);
     const { busy, failed, take } = useFork();
-    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", items: "center", children: _jsxs(YStack, { width: "100%", maxW: 1080, children: [_jsx(Head, { title: "Templates", says: "Start from a working app. Picking one copies its repository into a project of yours." }), failed ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", pb: "$3", children: failed })) : null, list.error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: list.error.message })) : (_jsx(XStack, { flexWrap: "wrap", gap: "$3", children: list.value.map((x) => (_jsxs(Card, { label: `Start from ${x.title}`, onPress: () => void take(x.slug), children: [_jsx(Shot, { slug: x.slug }), _jsxs(YStack, { p: "$3", gap: "$1", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, flex: 1, children: busy === x.slug ? 'Copying…' : x.title }), x.framework ? (_jsx(SizableText, { size: "$1", color: "$soft", children: x.framework })) : null] }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 2, children: x.description })] })] }, x.slug))) })), _jsx(YStack, { pt: "$5", children: _jsxs(Out, { href: "https://gallery.hanzo.ai", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "The whole catalog" }), _jsx(ExternalLink, { size: 12, opacity: 0.6 })] }) })] }) }));
+    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", items: "center", children: _jsxs(YStack, { width: "100%", maxW: 1080, children: [_jsx(Head, { title: "Templates", says: "Start from a working app. Picking one copies its repository into a project of yours." }), failed ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", pb: "$3", children: failed })) : null, list.error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: list.error.message })) : list.loading && !list.value.length ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Reading templates\u2026" })) : !list.value.length ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "No templates here right now. The whole catalog has more." })) : (_jsx(XStack, { flexWrap: "wrap", gap: "$3", children: list.value.map((x) => (_jsxs(Card, { label: `Start from ${x.title}`, onPress: () => void take(x.slug), children: [_jsx(Shot, { slug: x.slug }), _jsxs(YStack, { p: "$3", gap: "$1", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, flex: 1, children: busy === x.slug ? 'Copying…' : x.title }), x.framework ? (_jsx(SizableText, { size: "$1", color: "$soft", children: x.framework })) : null] }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 2, children: x.description })] })] }, x.slug))) })), _jsx(YStack, { pt: "$5", children: _jsxs(Out, { href: "https://gallery.hanzo.ai", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "The whole catalog" }), _jsx(ExternalLink, { size: 12, opacity: 0.6 })] }) })] }) }));
 }

package/lib/standing.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Where an account stands: which plan it is on, which meter it reads, and the
+ * reads behind it — the tier for the plan's name, the limits for its windows,
+ * the free allowance, and the prepaid balance. One read for every surface that
+ * shows a plan (the account menus, Usage, Billing), so they cannot disagree.
+ *
+ * Each read stands alone: one that fails leaves its part empty and the rest
+ * drawn. Only when none answers is the whole read an error.
+ */
+import { type Allowance } from './api/billing.ts';
+import type { Target } from './api/call.ts';
+import { type Limits } from './api/limits.ts';
+import { type Read } from './data.ts';
+import { type Kind, type Label, type State } from './plan.ts';
+export interface Standing {
+    kind: Kind;
+    /** What the account is on, as a title: the plan's name, Free, or Pay as you go. */
+    label: Label | null;
+    limits: Limits | null;
+    /** The free allowance, where the platform answered it. */
+    allowance: Allowance | null;
+    /** The prepaid balance in cents, or null where it could not be read. */
+    balance: number | null;
+}
+/** Every read at once. Rejects only when all of them were refused, with the first refusal. */
+export declare function stand(t: Target): Promise<Standing>;
+/** The standing for `t`, read when `enabled` (a menu that is open) and again when the org changes. */
+export declare function useStanding(t: Target, enabled?: boolean): Read<Standing | null>;
+/** One window of a plan as a menu lists it. */
+export interface Row {
+    name: 'Session' | 'Today' | 'Month';
+    percent: number;
+    state: State;
+    /** `Resets 5:00 PM`, or '' where nothing is running yet. */
+    resets: string;
+}
+/**
+ * A plan's windows, shortest first: the session, the UTC day, and the month —
+ * the billing period of whichever class of model has used the most of it,
+ * because that is the one that stops a request first.
+ */
+export declare function rows(l: Limits | null, now?: number): Row[];
+/** The share of the free allowance left in its window, 0 to 100, or null where none bounds the account. */
+export declare function left(a: Allowance | null): number | null;