@stigmer/react 3.39.0 → 3.40.0

package/src/billing/BillingSection.tsx

@@ -4,6 +4,7 @@ import { useCallback, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import { BillingAccountStatus } from "@stigmer/protos/ai/stigmer/billing/v1/enum_pb";
+import { ManagementMode } from "@stigmer/protos/ai/stigmer/tenancy/organization/v1/enum_pb";
 import { useDeploymentMode } from "../deployment-mode.js";
 import { CloudFeatureNotice } from "../internal/CloudFeatureNotice.js";
 import { useOrg } from "../organization/OrgProvider.js";
@@ -16,6 +17,9 @@ import { AutoRechargeCard } from "./AutoRechargeCard.js";
 import { CreditPackGrid } from "./CreditPackGrid.js";
 import { CreditLedgerTable } from "./CreditLedgerTable.js";
 import { LowBalanceBanner } from "./LowBalanceBanner.js";
+import { PlanSection } from "./PlanSection.js";
+import { billingReturnUrl, type BillingRedirect } from "./redirect.js";
+import { useCreatePaymentMethodSetupSession } from "./useCreatePaymentMethodSetupSession.js";
 
 /** Props for {@link BillingSection}. */
 export interface BillingSectionProps {
@@ -29,6 +33,22 @@ export interface BillingSectionProps {
   readonly checkoutSuccess?: boolean;
   /** Callback to dismiss the checkout success banner. */
   readonly onDismissCheckoutSuccess?: () => void;
+  /**
+   * The plan the person was choosing when they left to save a card: the
+   * `plan` query Stripe returns with after `?setup=success`. The plan
+   * section reopens that choice for an explicit confirm.
+   */
+  readonly resumePlanId?: string;
+  /** Called once the resumed plan choice is taken up, so the host can clear its query. */
+  readonly onResumeHandled?: () => void;
+  /**
+   * The host's seam for Stripe-hosted pages (checkout, card setup and the
+   * billing portal). Absent, this window navigates to them and Stripe
+   * returns to this origin's `/settings/billing`. A desktop host opens the
+   * system browser and names the web console's billing page instead; its
+   * reads refresh when the window regains focus.
+   */
+  readonly redirect?: BillingRedirect;
   /** Additional CSS class names. */
   readonly className?: string;
 }
@@ -51,12 +71,16 @@ export interface BillingSectionProps {
 export function BillingSection({
   checkoutSuccess,
   onDismissCheckoutSuccess,
+  resumePlanId,
+  onResumeHandled,
+  redirect,
   className,
 }: BillingSectionProps) {
   const headingId = useId();
   const { activeOrg } = useOrg();
   const mode = useDeploymentMode();
   const orgId = activeOrg?.metadata?.id ?? "";
+  const managed = activeOrg?.spec?.managementMode === ManagementMode.platform_managed;
 
   return (
     <section aria-labelledby={headingId} className={className}>
@@ -67,7 +91,7 @@ export function BillingSection({
         Billing
       </h2>
       <p className="stg:text-muted-foreground stg:mb-4 stg:text-xs">
-        Manage credits, purchase credit packs, and view transaction history.
+        Your plan, credits, payment method and transaction history.
       </p>
 
       {mode === "local" ? (
@@ -83,8 +107,12 @@ export function BillingSection({
       ) : (
         <BillingContent
           orgId={orgId}
+          managed={managed}
           checkoutSuccess={checkoutSuccess}
           onDismissCheckoutSuccess={onDismissCheckoutSuccess}
+          resumePlanId={resumePlanId}
+          onResumeHandled={onResumeHandled}
+          redirect={redirect}
         />
       )}
     </section>
@@ -97,16 +125,28 @@ export function BillingSection({
 
 function BillingContent({
   orgId,
+  managed,
   checkoutSuccess,
   onDismissCheckoutSuccess,
+  resumePlanId,
+  onResumeHandled,
+  redirect,
 }: {
   orgId: string;
+  managed: boolean;
   checkoutSuccess?: boolean;
   onDismissCheckoutSuccess?: () => void;
+  resumePlanId?: string;
+  onResumeHandled?: () => void;
+  redirect?: BillingRedirect;
 }) {
-  const { account, isLoading, error, refetch } = useBillingAccount(orgId);
-  const { createSession, isSubmitting, error: checkoutError, clearError } = useCreateCheckoutSession();
-  const { openPortal, isLoading: isPortalLoading } = useCreateBillingPortalSession();
+  const { account, isLoading, error, refetch } = useBillingAccount(orgId, {
+    refetchOnWindowFocus: redirect?.openUrl !== undefined,
+  });
+  const { createSession, isSubmitting, error: checkoutError, clearError } = useCreateCheckoutSession(redirect);
+  const { openPortal, isLoading: isPortalLoading } = useCreateBillingPortalSession(redirect);
+  const setup = useCreatePaymentMethodSetupSession(redirect);
+  const returnUrl = redirect?.returnUrl;
   const [purchasingPackId, setPurchasingPackId] = useState<string | null>(null);
 
   const handlePurchase = useCallback(
@@ -114,8 +154,7 @@ function BillingContent({
       setPurchasingPackId(packId);
       clearError();
 
-      const baseUrl = typeof window !== "undefined" ? window.location.origin : "";
-      const billingPath = `${baseUrl}/settings/billing`;
+      const billingPath = billingReturnUrl({ returnUrl });
 
       createSession({
         orgId,
@@ -126,7 +165,7 @@ function BillingContent({
         setPurchasingPackId(null);
       });
     },
-    [orgId, createSession, clearError],
+    [orgId, createSession, clearError, returnUrl],
   );
 
   if (isLoading) {
@@ -161,6 +200,8 @@ function BillingContent({
 
   const isLowBalance =
     balance.availableMicros < account.lowBalanceThresholdMicros;
+  const hasPaymentMethod =
+    account.defaultPaymentMethod != null && account.defaultPaymentMethod.paymentMethodId !== "";
 
   return (
     <div className="stg:space-y-6">
@@ -173,6 +214,16 @@ function BillingContent({
         thresholdMicros={account.lowBalanceThresholdMicros}
       />
 
+      <PlanSection
+        orgId={orgId}
+        managed={managed}
+        hasPaymentMethod={hasPaymentMethod}
+        onRefreshAccount={refetch}
+        redirect={redirect}
+        resumePlanId={resumePlanId}
+        onResumeHandled={onResumeHandled}
+      />
+
       <CreditBalanceCard balance={balance} isLowBalance={isLowBalance} />
 
       <PaymentMethodCard
@@ -180,15 +231,21 @@ function BillingContent({
         accountStatus={account.status}
         isPortalLoading={isPortalLoading}
         onManage={() => openPortal(orgId)}
+        onAdd={() => {
+          setup.addPaymentMethod(orgId).catch(() => undefined);
+        }}
+        isAdding={setup.isSubmitting}
       />
+      {setup.error && (
+        <p className="stg:text-destructive stg:text-xs" role="alert">
+          {getUserMessage(setup.error)}
+        </p>
+      )}
 
       <AutoRechargeCard
         orgId={orgId}
         autoRecharge={account.autoRecharge}
-        hasPaymentMethod={
-          account.defaultPaymentMethod != null &&
-          account.defaultPaymentMethod.paymentMethodId !== ""
-        }
+        hasPaymentMethod={hasPaymentMethod}
         accountStatus={account.status}
         onSaved={refetch}
       />

package/src/billing/ChangePlanDialog.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import { useId } from "react";
+import { getErrorReason, getUserMessage } from "@stigmer/sdk";
+import type { PlanTerms } from "@stigmer/protos/ai/stigmer/billing/plan/v1/spec_pb";
+import { Button } from "../button/index.js";
+import { DialogShell } from "../internal/DialogShell.js";
+import { formatDay, formatMonthlyMinimum, sharePercent, type OfferedFeature } from "./plan-features.js";
+import type { PlanMove } from "./plan-state.js";
+
+/** The reason a plan change is refused for want of a saved card (billing/subscription/v1/command.proto). */
+export const PAYMENT_METHOD_REQUIRED = "PAYMENT_METHOD_REQUIRED";
+
+/** Props for {@link ChangePlanDialog}. */
+export interface ChangePlanDialogProps {
+  /** The move to confirm; the dialog is open while it is set. */
+  readonly move: PlanMove | null;
+  /** The display name of a plan by id, for the plan being left. */
+  readonly planName: (planId: string) => string;
+  /**
+   * For a switch, what the plan being left offers that the new one does
+   * not (`featuresLost`). Empty, as for an upgrade, the dialog says
+   * nothing is lost.
+   */
+  readonly losing?: readonly OfferedFeature[];
+  /**
+   * Whether the organization has a saved card. Every move but a cancel
+   * needs one, because every period is collected from it.
+   */
+  readonly hasPaymentMethod: boolean;
+  /**
+   * The card was just saved on Stripe's page and is on its way to the
+   * account: say so instead of asking for one again.
+   */
+  readonly awaitingPaymentMethod?: boolean;
+  /** `true` while the move, or the card page, is in flight. */
+  readonly isSubmitting: boolean;
+  /** Why the last attempt failed, or `null`. */
+  readonly error: Error | null;
+  /** Make the move. */
+  readonly onConfirm: () => void;
+  /** Leave to save a card, returning to this choice. */
+  readonly onAddPaymentMethod: () => void;
+  /** Close without moving. */
+  readonly onClose: () => void;
+}
+
+/**
+ * The confirm step for a plan change. It states exactly what the move does
+ * and when money moves: a subscription starts now and every period is
+ * collected when it closes; a switch closes this period early, billed for
+ * the time it ran; a cancel keeps the plan to its period's end and deletes
+ * nothing. Without a saved card it offers the card page first.
+ */
+export function ChangePlanDialog({
+  move,
+  planName,
+  losing = [],
+  hasPaymentMethod,
+  awaitingPaymentMethod,
+  isSubmitting,
+  error,
+  onConfirm,
+  onAddPaymentMethod,
+  onClose,
+}: ChangePlanDialogProps) {
+  const headingId = useId();
+  const needsCard =
+    move !== null &&
+    move.kind !== "cancel" &&
+    (!hasPaymentMethod || getErrorReason(error)?.reason === PAYMENT_METHOD_REQUIRED);
+
+  return (
+    <DialogShell
+      open={move !== null}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+      width="md"
+      aria-labelledby={headingId}
+    >
+      {move && (
+        <div className="stg:space-y-3 stg:p-5">
+          <h2 id={headingId} className="stg:text-sm stg:font-semibold stg:text-foreground">
+            {title(move)}
+          </h2>
+          <div className="stg:space-y-2 stg:text-xs stg:text-muted-foreground">{body(move, planName, losing)}</div>
+
+          {needsCard && (
+            <p className="stg:rounded-md stg:bg-muted-subtle stg:px-3 stg:py-2 stg:text-xs stg:text-foreground" role="status">
+              {awaitingPaymentMethod
+                ? "Your card is being saved. This takes a few seconds; the choice is kept."
+                : "A saved card is needed first: every period is collected from it. You come back here after saving it."}
+            </p>
+          )}
+          {error && getErrorReason(error)?.reason !== PAYMENT_METHOD_REQUIRED && (
+            <p className="stg:text-xs stg:text-destructive" role="alert">
+              {getUserMessage(error)}
+            </p>
+          )}
+
+          <div className="stg:flex stg:justify-end stg:gap-2 stg:pt-1">
+            <Button variant="ghost" size="sm" onClick={onClose} disabled={isSubmitting}>
+              Not now
+            </Button>
+            {needsCard ? (
+              <Button size="sm" onClick={onAddPaymentMethod} disabled={isSubmitting || awaitingPaymentMethod}>
+                Add a payment method
+              </Button>
+            ) : (
+              <Button
+                variant={move.kind === "cancel" ? "destructive" : "primary"}
+                size="sm"
+                onClick={onConfirm}
+                disabled={isSubmitting}
+              >
+                {confirmLabel(move)}
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+    </DialogShell>
+  );
+}
+
+function title(move: PlanMove): string {
+  switch (move.kind) {
+    case "subscribe":
+      return `Subscribe to ${move.to.metadata?.name ?? "this plan"}`;
+    case "switch":
+      return `Switch to ${move.to.metadata?.name ?? "this plan"}`;
+    case "resume":
+      return `Keep ${move.to.metadata?.name ?? "this plan"}`;
+    case "cancel":
+      return "Move to Free";
+    default: {
+      const exhaustive: never = move;
+      return String(exhaustive);
+    }
+  }
+}
+
+function body(move: PlanMove, planName: (planId: string) => string, losing: readonly OfferedFeature[]) {
+  switch (move.kind) {
+    case "subscribe":
+      return (
+        <>
+          <p>
+            {move.to.metadata?.name} starts now. Each monthly period is billed when it ends:{" "}
+            {periodCharge(move.to.spec?.terms)}
+          </p>
+          <p>Nothing is charged today.</p>
+        </>
+      );
+    case "switch":
+      return (
+        <>
+          <p>
+            The switch takes effect now. This period closes early and is billed for the time it ran on{" "}
+            {planName(move.fromPlanId)}; a new monthly period opens on {move.to.metadata?.name} at{" "}
+            {formatMonthlyMinimum(move.to.spec?.terms)}.
+          </p>
+          {losing.length > 0 && (
+            <p>
+              {move.to.metadata?.name} does not include {listFeatures(losing)}. Everything you built keeps working; only
+              creating more is refused.
+            </p>
+          )}
+        </>
+      );
+    case "resume":
+      return <p>The cancellation is withdrawn, and {move.to.metadata?.name} runs on into its next period.</p>;
+    case "cancel":
+      return (
+        <>
+          <p>
+            {planName(move.fromPlanId)} stays in force until {formatDay(move.endsAt)}, then this organization is on
+            Free. The period is billed as usual when it closes.
+          </p>
+          <p>Nothing you built is deleted. Creating what Free does not include is refused until you subscribe again.</p>
+        </>
+      );
+    default: {
+      const exhaustive: never = move;
+      return String(exhaustive);
+    }
+  }
+}
+
+function confirmLabel(move: PlanMove): string {
+  switch (move.kind) {
+    case "subscribe":
+      return "Subscribe";
+    case "switch":
+      return "Switch now";
+    case "resume":
+      return "Keep plan";
+    case "cancel":
+      return "Cancel plan";
+    default: {
+      const exhaustive: never = move;
+      return String(exhaustive);
+    }
+  }
+}
+
+/** "Teams", "Teams and Managed organizations", "A, B and C". */
+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]}`;
+}
+
+/** What a period of the plan is billed at its end, in the customer's words. */
+function periodCharge(terms: PlanTerms | undefined): string {
+  const minimum = formatMonthlyMinimum(terms);
+  const percent = sharePercent(terms);
+  return percent === ""
+    ? `${minimum}.`
+    : `${minimum}, less the ${percent} commission already paid on that period's usage. Usage itself stays paid from credits.`;
+}

package/src/billing/CreditPackGrid.tsx

@@ -24,7 +24,7 @@ export interface CreditPackGridProps {
 /**
  * Grid of credit pack cards with purchase buttons.
  *
- * Displays the 3 self-serve credit packs (Starter, Growth, Team)
+ * Displays the 3 self-serve credit packs (Starter, Growth, Scale)
  * in a responsive grid. Each card shows the pack name, price,
  * credit count, and a buy button. Buttons are disabled when the
  * account is suspended/closed or a purchase is in progress.

package/src/billing/LowBalanceBanner.tsx

@@ -58,7 +58,7 @@ export function LowBalanceBanner({
         </p>
         <p className="stg:mt-0.5 stg:opacity-80">
           {isZeroOrNegative
-            ? "Your credit balance is zero. Purchase credits to continue running agent executions."
+            ? "Your credit balance is zero. Credits pay for agent usage on every plan; purchase credits to keep running agent executions."
             : `Your balance (${formatCreditBalance(availableMicros)}) is below the warning threshold. Consider purchasing additional credits.`}
         </p>
       </div>

package/src/billing/PaymentMethodCard.tsx

@@ -14,6 +14,14 @@ export interface PaymentMethodCardProps {
   readonly isPortalLoading?: boolean;
   /** Called when the user clicks "Manage payment methods". */
   readonly onManage: () => void;
+  /**
+   * Called when the user clicks "Add payment method" with none on file:
+   * the host opens Stripe's page to save a card without a charge. Absent,
+   * the card has no add action.
+   */
+  readonly onAdd?: () => void;
+  /** `true` while the card page is being opened. */
+  readonly isAdding?: boolean;
   /** Additional CSS class names. */
   readonly className?: string;
 }
@@ -61,6 +69,8 @@ export function PaymentMethodCard({
   accountStatus,
   isPortalLoading,
   onManage,
+  onAdd,
+  isAdding,
   className,
 }: PaymentMethodCardProps) {
   const isAccountActive =
@@ -113,9 +123,25 @@ export function PaymentMethodCard({
       ) : (
         <div className="stg:mt-2">
           <p className="stg:text-xs stg:text-muted-foreground">
-            No payment method on file. A card will be saved automatically
-            when you purchase your first credit pack.
+            No payment method on file. A saved card is needed to subscribe to
+            a plan or turn on auto-recharge; buying a credit pack also saves
+            one.
           </p>
+          {onAdd && (
+            <button
+              type="button"
+              disabled={!isAccountActive || isAdding}
+              onClick={onAdd}
+              className={cn(
+                "stg:mt-2 stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium stg:transition-colors",
+                "stg:text-primary stg:hover:bg-accent",
+                "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+              )}
+              aria-busy={isAdding}
+            >
+              {isAdding ? "Opening\u2026" : "Add payment method"}
+            </button>
+          )}
         </div>
       )}
     </div>

package/src/billing/PlanCard.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import {
+  PeriodEstimateLineKind,
+  type PeriodEstimate,
+  type PeriodEstimateLine,
+} from "@stigmer/protos/ai/stigmer/billing/subscription/v1/io_pb";
+import { StatusBadge } from "../resource-workbench/components/StatusBadge.js";
+import { formatCreditBalance, formatLedgerAmount } from "./format.js";
+import { formatDay, formatPeriodDay } from "./plan-features.js";
+import type { PlanStanding } from "./plan-state.js";
+
+/** Props for {@link PlanCard}. */
+export interface PlanCardProps {
+  /** The plan's display name ("Free" when there is none). */
+  readonly planName: string;
+  /** Where the organization stands on it. */
+  readonly standing: PlanStanding;
+  /** The current period's estimated invoice, when a plan is live. */
+  readonly estimate?: PeriodEstimate | null;
+  /** Why the estimate could not be read, shown in its place. */
+  readonly estimateError?: Error | null;
+  /**
+   * The organization is platform-managed: it is on its integrator's plan
+   * and has no plan, period or invoice of its own.
+   */
+  readonly managed?: boolean;
+  /** Additional CSS class names. */
+  readonly className?: string;
+}
+
+/**
+ * The organization's plan: its name, its standing (active, payment
+ * failed, or ending on a date), the period it is in, and the period's
+ * estimated invoice line by line, the way the invoice will read it.
+ */
+export function PlanCard({ planName, standing, estimate, estimateError, managed, className }: PlanCardProps) {
+  return (
+    <div
+      className={cn(
+        "stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-4 stg:py-4",
+        className,
+      )}
+    >
+      <div className="stg:flex stg:items-center stg:justify-between stg:gap-3">
+        <h3 className="stg:text-xs stg:font-semibold stg:text-foreground">Plan</h3>
+        {!managed && <StandingBadge standing={standing} />}
+      </div>
+      <p className="stg:mt-2 stg:text-sm stg:font-medium stg:text-foreground">
+        {managed ? "Your integrator's plan" : planName}
+      </p>
+
+      {managed ? (
+        <p className="stg:mt-1 stg:text-xs stg:text-muted-foreground">
+          This organization is managed by its integrator and runs on the integrator&apos;s plan. It has no plan or
+          invoice of its own.
+        </p>
+      ) : (
+        <StandingDetail standing={standing} />
+      )}
+
+      {!managed && estimate && <EstimateLines planName={planName} estimate={estimate} />}
+      {!managed && !estimate && estimateError && (
+        <p className="stg:mt-3 stg:text-xs stg:text-destructive" role="alert">
+          {getUserMessage(estimateError)}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function StandingBadge({ standing }: { standing: PlanStanding }) {
+  switch (standing.kind) {
+    case "active":
+      return <StatusBadge phase="ready" label="Active" />;
+    case "past-due":
+      return <StatusBadge phase="failed" label="Payment failed" />;
+    case "ending":
+      return <StatusBadge phase="degraded" label={`Ends ${formatDay(standing.endsAt)}`} />;
+    case "free":
+      return <StatusBadge phase="disabled" label="Free" />;
+    default: {
+      const exhaustive: never = standing;
+      return exhaustive;
+    }
+  }
+}
+
+function StandingDetail({ standing }: { standing: PlanStanding }) {
+  switch (standing.kind) {
+    case "free":
+      return (
+        <p className="stg:mt-1 stg:text-xs stg:text-muted-foreground">
+          Channels, sharing and unlimited members. Usage is paid from credits.
+        </p>
+      );
+    case "past-due":
+      return (
+        <p className="stg:mt-1 stg:text-xs stg:text-destructive" role="status">
+          The last period&apos;s payment failed. Stripe retries it; update the card under Payment Method. The plan stays
+          in force meanwhile.
+        </p>
+      );
+    case "ending":
+      return (
+        <p className="stg:mt-1 stg:text-xs stg:text-muted-foreground">
+          Canceled. The plan stays in force until {formatDay(standing.endsAt)}, then this
+          organization is on Free. Nothing you built is deleted.
+        </p>
+      );
+    case "active":
+      return null;
+    default: {
+      const exhaustive: never = standing;
+      return exhaustive;
+    }
+  }
+}
+
+function EstimateLines({ planName, estimate }: { planName: string; estimate: PeriodEstimate }) {
+  return (
+    <div className="stg:mt-4 stg:border-t stg:border-border stg:pt-3">
+      <div className="stg:flex stg:items-baseline stg:justify-between stg:gap-3">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">
+          Estimated invoice on {formatPeriodDay(estimate.periodEnd)}
+        </p>
+        <p className="stg:text-xs stg:text-muted-foreground">
+          Period {formatPeriodDay(estimate.periodStart)} – {formatPeriodDay(estimate.periodEnd)}
+        </p>
+      </div>
+      <dl className="stg:mt-2 stg:space-y-1">
+        {estimate.lines.map((line) => (
+          <div key={line.kind} className="stg:flex stg:justify-between stg:gap-3 stg:text-xs">
+            <dt className="stg:text-muted-foreground">{lineLabel(line, planName, estimate)}</dt>
+            <dd className="stg:tabular-nums stg:text-foreground">
+              {line.amountMicros < BigInt(0) ? formatLedgerAmount(line.amountMicros) : formatCreditBalance(line.amountMicros)}
+            </dd>
+          </div>
+        ))}
+        <div className="stg:flex stg:justify-between stg:gap-3 stg:border-t stg:border-border stg:pt-1 stg:text-xs stg:font-medium">
+          <dt className="stg:text-foreground">Total so far</dt>
+          <dd className="stg:tabular-nums stg:text-foreground">{formatCreditBalance(estimate.totalMicros)}</dd>
+        </div>
+      </dl>
+      <p className="stg:mt-2 stg:text-xs stg:text-muted-foreground">
+        From usage so far. Usage itself is paid from credits; the commission already paid on it counts toward the
+        minimum, which covers the whole period.
+      </p>
+    </div>
+  );
+}
+
+function lineLabel(line: PeriodEstimateLine, planName: string, estimate: PeriodEstimate): string {
+  switch (line.kind) {
+    case PeriodEstimateLineKind.plan:
+      return `${planName} plan`;
+    case PeriodEstimateLineKind.commission_credit:
+      return "Commission already paid on tokens";
+    case PeriodEstimateLineKind.managed_organizations:
+      return `Managed organizations beyond those included (${estimate.managedOrganizationCount} this period)`;
+    case PeriodEstimateLineKind.period_estimate_line_kind_unspecified:
+      return "Other";
+    default: {
+      const exhaustive: never = line.kind;
+      return String(exhaustive);
+    }
+  }
+}
+