@stigmer/react 3.40.1 → 3.41.1-dev.20261003094357.g39d6aa748646

package/src/billing/ChangePlanDialog.tsx

@@ -3,6 +3,7 @@
 import { useId } from "react";
 import { getErrorReason, getUserMessage } from "@stigmer/sdk";
 import type { PlanTerms } from "@stigmer/protos/ai/stigmer/billing/plan/v1/spec_pb";
+import { Feature } from "@stigmer/protos/ai/stigmer/platform/v1/entitlement_pb";
 import { Button } from "../button/index.js";
 import { DialogShell } from "../internal/DialogShell.js";
 import { formatDay, formatMonthlyMinimum, sharePercent, type OfferedFeature } from "./plan-features.js";
@@ -163,8 +164,7 @@ function body(move: PlanMove, planName: (planId: string) => string, losing: read
           </p>
           {losing.length > 0 && (
             <p>
-              {move.to.metadata?.name} does not include {listFeatures(losing)}. Everything you built keeps working; only
-              creating more is refused.
+              {move.to.metadata?.name} does not include {listFeatures(losing)}. {keepsWorking(losing)}
             </p>
           )}
         </>
@@ -206,6 +206,18 @@ function confirmLabel(move: PlanMove): string {
 }
 
 /** "Teams", "Teams and Managed organizations", "A, B and C". */
+/**
+ * What still works after a switch that gives features up. Everything built
+ * keeps working, except an organization's own provider keys: they are kept
+ * but no longer used, so its agents run on Stigmer's keys, billed as usage.
+ */
+function keepsWorking(losing: readonly OfferedFeature[]): string {
+  return losing.some((lost) => lost.feature === Feature.byo_provider_keys)
+    ? "Your own provider keys are kept but stop being used: your agents run on Stigmer's keys, billed as usage. " +
+        "Everything else you built keeps working; only creating more is refused."
+    : "Everything you built keeps working; only creating more is refused.";
+}
+
 function listFeatures(features: readonly OfferedFeature[]): string {
   const labels = features.map((feature) => feature.label);
   return labels.length <= 1 ? (labels[0] ?? "") : `${labels.slice(0, -1).join(", ")} and ${labels[labels.length - 1]}`;

package/src/billing/CreditLedgerTable.tsx

@@ -18,7 +18,7 @@ import { useCreditLedger, type UseCreditLedgerOptions } from "./useCreditLedger.
 /** Props for {@link CreditLedgerTable}. */
 export interface CreditLedgerTableProps {
   /** Organization ID to fetch ledger entries for. */
-  readonly orgId: string;
+  readonly org: string;
   /** Additional CSS class names. */
   readonly className?: string;
 }
@@ -33,11 +33,11 @@ export interface CreditLedgerTableProps {
  *
  * @example
  * ```tsx
- * <CreditLedgerTable orgId={activeOrg.metadata.id} />
+ * <CreditLedgerTable org={activeOrg.metadata.id} />
  * ```
  */
 export function CreditLedgerTable({
-  orgId,
+  org,
   className,
 }: CreditLedgerTableProps) {
   const [pageNum, setPageNum] = useState(1);
@@ -50,7 +50,7 @@ export function CreditLedgerTable({
     pageSize: 10,
     view: LedgerView.statement,
   };
-  const { ledger, isLoading, error } = useCreditLedger(orgId, options);
+  const { ledger, isLoading, error } = useCreditLedger(org, options);
 
   if (isLoading) {
     return (

package/src/billing/CreditPackGrid.tsx

@@ -34,7 +34,7 @@ export interface CreditPackGridProps {
  * <CreditPackGrid
  *   accountStatus={account.status}
  *   purchasingPackId={isSubmitting ? activePackId : null}
- *   onPurchase={(packId) => createSession({ orgId, packId, ... })}
+ *   onPurchase={(packId) => createSession({ org, packId, ... })}
  * />
  * ```
  */

package/src/billing/PaymentMethodCard.tsx

@@ -60,7 +60,7 @@ function formatExpiry(month: number, year: number): string {
  * <PaymentMethodCard
  *   paymentMethod={account.defaultPaymentMethod}
  *   accountStatus={account.status}
- *   onManage={() => openPortal(orgId)}
+ *   onManage={() => openPortal(org)}
  * />
  * ```
  */

package/src/billing/PlanSection.tsx

@@ -17,6 +17,7 @@ import { useCreatePaymentMethodSetupSession } from "./useCreatePaymentMethodSetu
 import { usePeriodEstimate } from "./usePeriodEstimate.js";
 import { usePlans } from "./usePlans.js";
 import { useSubscription } from "./useSubscription.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 /** How often, and how long, the section waits for a just-saved card to reach the account. */
 const CARD_POLL_MS = 2_000;
@@ -25,7 +26,7 @@ const CARD_WAIT_MS = 30_000;
 /** Props for {@link PlanSection}. */
 export interface PlanSectionProps {
   /** The organization whose plan is shown. */
-  readonly orgId: string;
+  readonly org: string;
   /**
    * The organization is platform-managed: it runs on its integrator's
    * plan, and the section says so instead of offering plans.
@@ -62,11 +63,11 @@ export interface PlanSectionProps {
  *
  * @example
  * ```tsx
- * <PlanSection orgId={orgId} hasPaymentMethod={hasCard} />
+ * <PlanSection org={org} hasPaymentMethod={hasCard} />
  * ```
  */
 export function PlanSection({
-  orgId,
+  org: orgId,
   managed = false,
   hasPaymentMethod,
   onRefreshAccount,
@@ -179,9 +180,9 @@ export function PlanSection({
 
   if (current.isLoading || catalog.isLoading) {
     return (
-      <div className={cn("stg:space-y-3", className)} aria-busy="true" aria-label="Loading plan">
+      <LoadingRegion className={cn("stg:space-y-3", className)} label="Loading plan">
         <div className="stg:h-24 stg:animate-pulse stg:rounded-lg stg:bg-muted-subtle" />
-      </div>
+      </LoadingRegion>
     );
   }
 

package/src/billing/ProviderKeysSection.tsx

@@ -0,0 +1,324 @@
+"use client";
+
+import { useCallback, useId, useState } from "react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import { timestampDate } from "@bufbuild/protobuf/wkt";
+import type { ProviderKey } from "@stigmer/protos/ai/stigmer/billing/providerkey/v1/api_pb";
+import { Feature } from "@stigmer/protos/ai/stigmer/platform/v1/entitlement_pb";
+import { Button } from "../button/index.js";
+import { ApiResourceKind, useDeploymentMode, useResourceAvailable } from "../deployment-mode.js";
+import { useCheckPermission } from "../iam-policy/useCheckPermission.js";
+import { CloudFeatureNotice } from "../internal/CloudFeatureNotice.js";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
+import { useOrg } from "../organization/OrgProvider.js";
+import { lowestPlanWith } from "./plan-features.js";
+import { planUpgradeFeature, UpgradeNotice } from "./UpgradeNotice.js";
+import { useEntitlements } from "./useEntitlements.js";
+import { usePlans } from "./usePlans.js";
+import { useProviderKeyActions, useProviderKeys, type ProviderKeyProvider } from "./useProviderKeys.js";
+
+/** The providers, in the order the section lists them. */
+const PROVIDERS: ReadonlyArray<{ readonly id: ProviderKeyProvider; readonly name: string; readonly placeholder: string }> = [
+  { id: "anthropic", name: "Anthropic", placeholder: "sk-ant-…" },
+  { id: "openai", name: "OpenAI", placeholder: "sk-…" },
+];
+
+/** Props for {@link ProviderKeysSection}. */
+export interface ProviderKeysSectionProps {
+  /** Where the plans are, in the host's routing. Defaults to the billing settings route. */
+  readonly billingHref?: string;
+  /** Additional CSS class names. */
+  readonly className?: string;
+}
+
+/**
+ * Settings section for an organization's own LLM provider keys.
+ *
+ * On a plan that includes bring-your-own provider keys (Business and
+ * above), an admin saves an Anthropic or OpenAI key, and the organization's
+ * agents and workflows then run on it: the provider bills the organization
+ * directly, and those tokens carry no Stigmer commission and do not count
+ * toward the plan's usage share. A saved key is never shown again, only its
+ * last four characters. A managed organization is served by its
+ * integrator's key for a provider it holds none of, shown read-only.
+ *
+ * A key the plan no longer allows is kept and listed as not in use, and
+ * can be removed; the organization's calls run on Stigmer's keys again,
+ * billed as usage. Every member sees the list; admins
+ * (`can_manage_billing`) save, replace and remove.
+ *
+ * Cloud-only: in local mode the runner already uses the developer's own
+ * keys directly.
+ *
+ * @example
+ * ```tsx
+ * <ProviderKeysSection />
+ * ```
+ */
+export function ProviderKeysSection({ billingHref, className }: ProviderKeysSectionProps) {
+  const headingId = useId();
+  const { activeOrg } = useOrg();
+  const mode = useDeploymentMode();
+  const available = useResourceAvailable(ApiResourceKind.subscription);
+  const org = activeOrg?.metadata?.id ?? "";
+
+  return (
+    <section aria-labelledby={headingId} className={className}>
+      <h2 id={headingId} className="stg:text-foreground stg:mb-1 stg:text-sm stg:font-semibold">
+        Provider keys
+      </h2>
+      <p className="stg:text-muted-foreground stg:mb-4 stg:text-xs">
+        Run your agents on your organization&apos;s own Anthropic and OpenAI keys. The provider bills you directly;
+        those tokens carry no Stigmer commission and do not count toward your plan&apos;s usage share.
+      </p>
+      {mode === "local" || !available ? (
+        <CloudFeatureNotice>
+          Your own provider keys are a Stigmer Cloud plan feature. Local mode already calls the providers with your
+          own keys directly.
+        </CloudFeatureNotice>
+      ) : !org ? (
+        <p className="stg:text-muted-foreground stg:py-4 stg:text-center stg:text-xs">
+          Select an organization to manage its provider keys.
+        </p>
+      ) : (
+        <ProviderKeysContent org={org} billingHref={billingHref} />
+      )}
+    </section>
+  );
+}
+
+function ProviderKeysContent({ org, billingHref }: { readonly org: string; readonly billingHref?: string }) {
+  const listed = useProviderKeys(org);
+  const entitlements = useEntitlements(org);
+  const plans = usePlans();
+  const manage = useCheckPermission({ kind: "organization", id: org }, "can_manage_billing");
+  const canManage = !manage.isLoading && manage.allowed;
+  const actions = useProviderKeyActions();
+  const [editing, setEditing] = useState<ProviderKeyProvider | null>(null);
+
+  const allowed = entitlements.allows(Feature.byo_provider_keys);
+  const unlockingPlanName = lowestPlanWith(plans.plans ?? [], Feature.byo_provider_keys)?.metadata?.name;
+  const keys = listed.keys ?? [];
+  const refused = planUpgradeFeature(actions.error);
+
+  const refresh = useCallback(() => {
+    listed.refetch();
+    entitlements.refetch();
+  }, [listed, entitlements]);
+
+  if (listed.error) {
+    return <p className="stg:text-destructive stg:text-xs">{getUserMessage(listed.error)}</p>;
+  }
+  if (listed.keys === null || allowed === null) {
+    return <p className="stg:text-muted-foreground stg:text-xs">Loading provider keys…</p>;
+  }
+
+  return (
+    <div className="stg:space-y-3">
+      {!allowed && (
+        <UpgradeNotice feature={Feature.byo_provider_keys} unlockingPlanName={unlockingPlanName} billingHref={billingHref} />
+      )}
+      {!allowed && keys.length > 0 && (
+        <p className="stg:text-muted-foreground stg:text-xs">
+          Your saved keys are kept but not used on this plan: your agents run on Stigmer&apos;s keys, billed as usage.
+          You can remove them at any time.
+        </p>
+      )}
+      <ul
+        aria-label="Provider keys"
+        className={cn(UNSTYLED_LIST, "stg:divide-y stg:divide-border stg:rounded-md stg:border stg:border-border")}
+      >
+        {PROVIDERS.map((provider) => (
+          <ProviderRow
+            key={provider.id}
+            org={org}
+            provider={provider}
+            stored={keys.find((key) => key.provider === provider.id)}
+            canSave={canManage && allowed}
+            canRemove={canManage}
+            editing={editing === provider.id}
+            onEdit={() => {
+              actions.clearError();
+              setEditing(provider.id);
+            }}
+            onDone={() => {
+              setEditing(null);
+              refresh();
+            }}
+            onCancel={() => setEditing(null)}
+            actions={actions}
+          />
+        ))}
+      </ul>
+      {refused !== null ? (
+        <UpgradeNotice feature={refused} error={actions.error} billingHref={billingHref} />
+      ) : actions.error ? (
+        <p role="alert" className="stg:text-destructive stg:text-xs">
+          {getUserMessage(actions.error)}
+        </p>
+      ) : null}
+      <p className="stg:text-muted-foreground stg:text-[0.65rem]">
+        A failure on your own key, such as a rejected key or an exhausted provider balance, is reported as your key&apos;s;
+        calls are never retried on Stigmer&apos;s keys.
+      </p>
+    </div>
+  );
+}
+
+function ProviderRow({
+  org,
+  provider,
+  stored,
+  canSave,
+  canRemove,
+  editing,
+  onEdit,
+  onDone,
+  onCancel,
+  actions,
+}: {
+  readonly org: string;
+  readonly provider: (typeof PROVIDERS)[number];
+  readonly stored: ProviderKey | undefined;
+  readonly canSave: boolean;
+  readonly canRemove: boolean;
+  readonly editing: boolean;
+  readonly onEdit: () => void;
+  readonly onDone: () => void;
+  readonly onCancel: () => void;
+  readonly actions: ReturnType<typeof useProviderKeyActions>;
+}) {
+  const inputId = useId();
+  const [value, setValue] = useState("");
+  const [confirming, setConfirming] = useState(false);
+  const inherited = stored !== undefined && stored.inheritedFromOrg !== "";
+  const own = stored !== undefined && !inherited;
+
+  const save = async () => {
+    try {
+      await actions.setKey(org, provider.id, value.trim());
+      setValue("");
+      onDone();
+    } catch {
+      // The hook holds the error; the section renders it.
+    }
+  };
+  const remove = async () => {
+    try {
+      await actions.removeKey(org, provider.id);
+      setConfirming(false);
+      onDone();
+    } catch {
+      // The hook holds the error; the section renders it.
+    }
+  };
+
+  return (
+    <li className="stg:space-y-2 stg:px-3 stg:py-2.5">
+      <div className="stg:flex stg:items-start stg:justify-between stg:gap-3">
+        <div className="stg:min-w-0">
+          <p className="stg:text-foreground stg:text-xs stg:font-medium">{provider.name}</p>
+          <p className="stg:text-muted-foreground stg:text-[0.7rem]">{describe(stored)}</p>
+        </div>
+        {!editing && !confirming && (
+          <div className="stg:flex stg:shrink-0 stg:gap-2">
+            {canSave && !inherited && (
+              <Button size="sm" variant="outline" onClick={onEdit} disabled={actions.isSubmitting}>
+                {own ? "Replace" : "Add key"}
+              </Button>
+            )}
+            {canRemove && own && (
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={() => {
+                  actions.clearError();
+                  setConfirming(true);
+                }}
+                disabled={actions.isSubmitting}
+              >
+                Remove
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+      {confirming && (
+        <div className="stg:flex stg:flex-wrap stg:items-center stg:justify-between stg:gap-2 stg:rounded-md stg:border stg:border-destructive/30 stg:bg-destructive-subtle stg:px-2.5 stg:py-2">
+          <p className="stg:text-foreground stg:min-w-0 stg:flex-1 stg:text-xs">
+            {stored?.inUse
+              ? `Remove your ${provider.name} key? Your agents' ${provider.name} calls go back to Stigmer's keys, billed as usage.`
+              : `Remove your ${provider.name} key? It is not in use on this plan.`}
+          </p>
+          <div className="stg:flex stg:shrink-0 stg:gap-2">
+            <Button size="sm" variant="destructive" onClick={() => void remove()} disabled={actions.isSubmitting}>
+              {actions.isSubmitting ? "Removing…" : "Remove key"}
+            </Button>
+            <Button size="sm" variant="ghost" onClick={() => setConfirming(false)} disabled={actions.isSubmitting}>
+              Cancel
+            </Button>
+          </div>
+        </div>
+      )}
+      {editing && (
+        <form
+          className="stg:flex stg:flex-wrap stg:items-end stg:gap-2"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void save();
+          }}
+        >
+          <div className="stg:min-w-48 stg:flex-1 stg:space-y-1">
+            <label htmlFor={inputId} className="stg:text-foreground stg:text-xs stg:font-medium">
+              {provider.name} API key
+            </label>
+            <input
+              id={inputId}
+              type="password"
+              autoComplete="off"
+              value={value}
+              onChange={(event) => setValue(event.target.value)}
+              placeholder={provider.placeholder}
+              disabled={actions.isSubmitting}
+              className={cn(
+                "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground",
+                "stg:placeholder:text-muted-foreground",
+                "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+                "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+              )}
+            />
+          </div>
+          <Button size="sm" type="submit" disabled={actions.isSubmitting || value.trim() === ""}>
+            {actions.isSubmitting ? "Saving…" : "Save key"}
+          </Button>
+          <Button size="sm" variant="ghost" type="button" onClick={onCancel} disabled={actions.isSubmitting}>
+            Cancel
+          </Button>
+        </form>
+      )}
+    </li>
+  );
+}
+
+/** One line about a provider's key: none, own, or inherited, with its use. */
+function describe(key: ProviderKey | undefined): string {
+  if (key === undefined) {
+    return "Not set: calls run on Stigmer's keys, billed as usage.";
+  }
+  const parts = [`Key ending in ${key.keyHint}`];
+  if (key.inheritedFromOrg !== "") {
+    parts.push(`provided by ${key.inheritedFromOrg}`);
+  } else if (key.updatedAt !== undefined) {
+    parts.push(`saved ${formatDay(timestampDate(key.updatedAt))}`);
+  }
+  parts.push(key.lastUsedAt === undefined ? "not used yet" : `last used ${formatDay(timestampDate(key.lastUsedAt))}`);
+  if (!key.inUse) {
+    parts.push("not in use on this plan");
+  }
+  return parts.join(" · ");
+}
+
+function formatDay(date: Date): string {
+  return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" });
+}

package/src/billing/UpgradeNotice.tsx

@@ -18,6 +18,7 @@ export const DEFAULT_BILLING_HREF = "/settings/billing";
 const FEATURE_BY_WIRE_NAME: Readonly<Record<string, Feature>> = {
   teams: Feature.teams,
   managed_organizations: Feature.managed_organizations,
+  byo_provider_keys: Feature.byo_provider_keys,
 };
 
 /**

package/src/billing/index.ts

@@ -20,6 +20,13 @@ export { useEntitlements } from "./useEntitlements.js";
 export type { UseEntitlementsOptions, UseEntitlementsReturn } from "./useEntitlements.js";
 export { usePeriodEstimate } from "./usePeriodEstimate.js";
 export type { UsePeriodEstimateOptions, UsePeriodEstimateReturn } from "./usePeriodEstimate.js";
+export { useProviderKeys, useProviderKeyActions } from "./useProviderKeys.js";
+export type {
+  ProviderKeyProvider,
+  UseProviderKeysOptions,
+  UseProviderKeysReturn,
+  UseProviderKeyActionsReturn,
+} from "./useProviderKeys.js";
 
 // Behavior hooks
 export { useCreateCheckoutSession } from "./useCreateCheckoutSession.js";
@@ -43,6 +50,8 @@ export type {
 } from "./useSetAutoRechargeConfig.js";
 
 // Styled components
+export { ProviderKeysSection } from "./ProviderKeysSection.js";
+export type { ProviderKeysSectionProps } from "./ProviderKeysSection.js";
 export { BillingSection } from "./BillingSection.js";
 export type { BillingSectionProps } from "./BillingSection.js";
 export { CreditBalanceCard } from "./CreditBalanceCard.js";

package/src/billing/plan-features.ts

@@ -24,10 +24,11 @@ const ZERO = BigInt(0);
 /**
  * Features a plan may list ahead of the gate that serves them, which
  * Stigmer Cloud does not offer yet. The console leaves them out of every
- * comparison. Bring-your-own provider keys leaves this set when the proxy
- * uses an organization's own key.
+ * comparison. Empty while every listed feature is served; bring-your-own
+ * provider keys left it when the proxy began serving an organization's own
+ * key (stigmer/stigmer#1425).
  */
-export const NOT_YET_OFFERED: ReadonlySet<Feature> = new Set([Feature.byo_provider_keys]);
+export const NOT_YET_OFFERED: ReadonlySet<Feature> = new Set<Feature>();
 
 /** One feature a plan offers today, with its words. */
 export interface OfferedFeature {
@@ -138,7 +139,7 @@ export function formatManagedOrganizations(
     return "";
   }
   const included = entitlements?.limits?.includedManagedOrganizations;
-  const fee = terms?.perExtraOrganizationMicros ?? ZERO;
+  const fee = terms?.perExtraOrgMicros ?? ZERO;
   if (included === undefined) {
     return "Unlimited managed organizations";
   }

package/src/billing/useBillingAccount.ts

@@ -41,13 +41,13 @@ export interface UseBillingAccountReturn {
  * the embedded `CreditBalance` with available, reserved,
  * promotional, and purchased breakdowns.
  *
- * Pass `null` as `orgId` to skip fetching (stable no-op).
+ * Pass `null` as `org` to skip fetching (stable no-op).
  *
- * @param orgId - Organization ID, or `null` to skip.
+ * @param org - Organization ID, or `null` to skip.
  *
  * @example
  * ```tsx
- * const { account, isLoading, error } = useBillingAccount(orgId);
+ * const { account, isLoading, error } = useBillingAccount(org);
  *
  * if (isLoading) return <Skeleton />;
  * if (error) return <ErrorMessage error={error} />;
@@ -57,17 +57,17 @@ export interface UseBillingAccountReturn {
  * ```
  */
 export function useBillingAccount(
-  orgId: string | null,
+  org: string | null,
   options?: UseBillingAccountOptions,
 ): UseBillingAccountReturn {
   const stigmer = useStigmer();
 
   const { data: account, isLoading, isRefetching, error, refetch } = useFetch(
-    orgId
+    org
       ? () =>
-          stigmer.billing.getOrCreateBillingAccount(orgId)
+          stigmer.billing.getOrCreateBillingAccount(org)
       : null,
-    [orgId, stigmer],
+    [org, stigmer],
     null as BillingAccount | null,
     { refetchOnWindowFocus: options?.refetchOnWindowFocus ?? false },
   );

package/src/billing/useBillingUsageReport.ts

@@ -26,16 +26,16 @@ export interface UseBillingUsageReportReturn {
  * Returns total provider cost, total billable amount, execution and LLM
  * call counts, and a per-model breakdown with cost tier attribution.
  *
- * Pass `null` as `orgId` to skip fetching (stable no-op).
+ * Pass `null` as `org` to skip fetching (stable no-op).
  *
- * @param orgId - Organization ID, or `null` to skip.
+ * @param org - Organization ID, or `null` to skip.
  * @param startTime - Start of the reporting period.
  * @param endTime - End of the reporting period.
  *
  * @example
  * ```tsx
  * const { report, isLoading } = useBillingUsageReport(
- *   orgId,
+ *   org,
  *   new Date("2026-05-01"),
  *   new Date("2026-05-31"),
  * );
@@ -47,7 +47,7 @@ export interface UseBillingUsageReportReturn {
  * ```
  */
 export function useBillingUsageReport(
-  orgId: string | null,
+  org: string | null,
   startTime: Date,
   endTime: Date,
 ): UseBillingUsageReportReturn {
@@ -57,15 +57,15 @@ export function useBillingUsageReport(
   const endKey = endTime.toISOString();
 
   const { data: report, isLoading, isRefetching, error, refetch } = useFetch(
-    orgId
+    org
       ? () =>
           stigmer.billing.getBillingUsageReport({
-            orgId,
+            org,
             startTime,
             endTime,
           })
       : null,
-    [orgId, startKey, endKey, stigmer],
+    [org, startKey, endKey, stigmer],
     null as BillingUsageReportResponse | null,
   );
 

package/src/billing/useChangePlan.ts

@@ -24,7 +24,7 @@ export interface UseChangePlanReturn {
    * {@link useCreatePaymentMethodSetupSession}). Resolves with the
    * subscription as it stands after the change.
    */
-  readonly changePlan: (orgId: string, planId: string) => Promise<Subscription>;
+  readonly changePlan: (org: string, planId: string) => Promise<Subscription>;
   /** `true` while a change is in flight. */
   readonly isSubmitting: boolean;
   /** Error from the last failed attempt, or `null` when healthy. */
@@ -45,11 +45,11 @@ export function useChangePlan(): UseChangePlanReturn {
   const [error, setError] = useState<Error | null>(null);
 
   const changePlan = useCallback(
-    async (orgId: string, planId: string): Promise<Subscription> => {
+    async (org: string, planId: string): Promise<Subscription> => {
       setIsSubmitting(true);
       setError(null);
       try {
-        return await stigmer.subscription.changePlan(create(ChangePlanInputSchema, { orgId, planId }));
+        return await stigmer.subscription.changePlan(create(ChangePlanInputSchema, { org, planId }));
       } catch (e) {
         const err = toError(e);
         setError(err);
@@ -75,7 +75,7 @@ export interface UseCancelSubscriptionReturn {
    * of the current period and is on Free after it; nothing it built is
    * deleted. Choosing the same plan again before then resumes it.
    */
-  readonly cancel: (orgId: string) => Promise<Subscription>;
+  readonly cancel: (org: string) => Promise<Subscription>;
   /** `true` while a cancel is in flight. */
   readonly isSubmitting: boolean;
   /** Error from the last failed attempt, or `null` when healthy. */
@@ -94,11 +94,11 @@ export function useCancelSubscription(): UseCancelSubscriptionReturn {
   const [error, setError] = useState<Error | null>(null);
 
   const cancel = useCallback(
-    async (orgId: string): Promise<Subscription> => {
+    async (org: string): Promise<Subscription> => {
       setIsSubmitting(true);
       setError(null);
       try {
-        return await stigmer.subscription.cancel(create(CancelSubscriptionInputSchema, { orgId }));
+        return await stigmer.subscription.cancel(create(CancelSubscriptionInputSchema, { org }));
       } catch (e) {
         const err = toError(e);
         setError(err);