@stigmer/react 3.39.1-dev.20260928194002 → 3.40.1

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);
+    }
+  }
+}
+

package/src/billing/PlanPicker.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+import type { Plan } from "@stigmer/protos/ai/stigmer/billing/plan/v1/api_pb";
+import { Button } from "../button/index.js";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
+import {
+  formatManagedOrganizations,
+  formatMonthlyMinimum,
+  explainUsageShare,
+  offeredFeatures,
+} from "./plan-features.js";
+import { planMove, type PlanMove, type PlanStanding } from "./plan-state.js";
+
+/** Where Enterprise enquiries go by default. */
+export const ENTERPRISE_CONTACT_URL = "https://stigmer.ai/contact-sales";
+
+/** Props for {@link PlanPicker}. */
+export interface PlanPickerProps {
+  /** The plans that can be bought, cheapest first, as `buyablePlans` orders them. */
+  readonly plans: readonly Plan[];
+  /** Where the organization stands. */
+  readonly standing: PlanStanding;
+  /** The live period's end, which a cancel runs to. */
+  readonly periodEnd?: Date;
+  /**
+   * Whether the viewer may change the plan (`can_manage_billing`). Without
+   * it the comparison is read-only.
+   */
+  readonly canManage: boolean;
+  /** Called with the move a choice makes; the host confirms it. */
+  readonly onChoose: (move: PlanMove) => void;
+  /** Disables every choice, e.g. while a change is in flight. */
+  readonly disabled?: boolean;
+  /** Where "Talk to us" for Enterprise links. Defaults to {@link ENTERPRISE_CONTACT_URL}. */
+  readonly enterpriseHref?: string;
+  /** Additional CSS class names. */
+  readonly className?: string;
+}
+
+/**
+ * The plan comparison: Free, each plan that can be bought, and
+ * Enterprise, each with its price and what it offers today. A choice
+ * reports the move it makes (subscribe, switch, resume or cancel) for the
+ * host to confirm; the plan in force reads "Current plan".
+ */
+export function PlanPicker({
+  plans,
+  standing,
+  periodEnd,
+  canManage,
+  onChoose,
+  disabled,
+  enterpriseHref = ENTERPRISE_CONTACT_URL,
+  className,
+}: PlanPickerProps) {
+  const freeMove = planMove(standing, "free", periodEnd);
+  return (
+    <ul className={cn(UNSTYLED_LIST, "stg:grid stg:gap-3 stg:sm:grid-cols-2", className)} aria-label="Plans">
+      <PlanOption
+        name="Free"
+        price="$0/month"
+        detail="Usage is paid from credits."
+        features={["Channels", "Sharing", "Unlimited members"]}
+        current={standing.kind === "free"}
+        action={canManage && freeMove !== null ? { label: "Move to Free", move: freeMove } : undefined}
+        disabled={disabled}
+        onChoose={onChoose}
+      />
+      {plans.map((plan) => {
+        const move = planMove(standing, plan, periodEnd);
+        const managed = formatManagedOrganizations(plan.spec?.entitlements, plan.spec?.terms);
+        return (
+          <PlanOption
+            key={plan.metadata?.id ?? plan.metadata?.slug}
+            name={plan.metadata?.name ?? ""}
+            price={formatMonthlyMinimum(plan.spec?.terms)}
+            detail={explainUsageShare(plan.spec?.terms)}
+            features={[
+              ...offeredFeatures(plan.spec?.entitlements).map((feature) => feature.label),
+              ...(managed === "" ? [] : [managed]),
+            ]}
+            current={move === null && standing.kind !== "free"}
+            action={canManage && move !== null ? { label: actionLabel(move), move } : undefined}
+            disabled={disabled}
+            onChoose={onChoose}
+          />
+        );
+      })}
+      <li className="stg:flex stg:flex-col stg:rounded-lg stg:border stg:border-border stg:bg-card stg:p-4">
+        <p className="stg:text-sm stg:font-medium stg:text-foreground">Enterprise</p>
+        <p className="stg:mt-1 stg:text-xs stg:text-muted-foreground">
+          A dedicated deployment, SSO enforcement, an SLA and annual invoicing, quoted for your organization.
+        </p>
+        <a
+          href={enterpriseHref}
+          target="_blank"
+          rel="noreferrer"
+          className="stg:mt-3 stg:self-start stg:text-xs stg:font-medium stg:text-primary stg:hover:underline"
+        >
+          Talk to us
+        </a>
+      </li>
+    </ul>
+  );
+}
+
+function PlanOption({
+  name,
+  price,
+  detail,
+  features,
+  current,
+  action,
+  disabled,
+  onChoose,
+}: {
+  readonly name: string;
+  readonly price: string;
+  readonly detail: string;
+  readonly features: readonly string[];
+  readonly current: boolean;
+  readonly action?: { readonly label: string; readonly move: PlanMove };
+  readonly disabled?: boolean;
+  readonly onChoose: (move: PlanMove) => void;
+}) {
+  return (
+    <li
+      className={cn(
+        "stg:flex stg:flex-col stg:rounded-lg stg:border stg:bg-card stg:p-4",
+        current ? "stg:border-primary" : "stg:border-border",
+      )}
+      aria-current={current ? "true" : undefined}
+    >
+      <div className="stg:flex stg:items-baseline stg:justify-between stg:gap-2">
+        <p className="stg:text-sm stg:font-medium stg:text-foreground">{name}</p>
+        <p className="stg:text-xs stg:tabular-nums stg:text-foreground">{price}</p>
+      </div>
+      {detail !== "" && <p className="stg:mt-1 stg:text-xs stg:text-muted-foreground">{detail}</p>}
+      <ul className={cn(UNSTYLED_LIST, "stg:mt-2 stg:space-y-0.5 stg:text-xs stg:text-muted-foreground")}>
+        {features.map((feature) => (
+          <li key={feature}>{feature}</li>
+        ))}
+      </ul>
+      <div className="stg:mt-auto stg:pt-3">
+        {current ? (
+          <span className="stg:text-xs stg:font-medium stg:text-primary">Current plan</span>
+        ) : action ? (
+          <Button
+            variant={action.move.kind === "cancel" ? "outline" : "primary"}
+            size="xs"
+            disabled={disabled}
+            onClick={() => onChoose(action.move)}
+          >
+            {action.label}
+          </Button>
+        ) : null}
+      </div>
+    </li>
+  );
+}
+
+function actionLabel(move: PlanMove): string {
+  switch (move.kind) {
+    case "subscribe":
+      return "Subscribe";
+    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);
+    }
+  }
+}

package/src/billing/PlanSection.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { timestampDate } from "@bufbuild/protobuf/wkt";
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import { ApiResourceKind, useResourceAvailable } from "../deployment-mode.js";
+import { useCheckPermission } from "../iam-policy/useCheckPermission.js";
+import { ChangePlanDialog } from "./ChangePlanDialog.js";
+import { PlanCard } from "./PlanCard.js";
+import { PlanPicker } from "./PlanPicker.js";
+import { buyablePlans, featuresLost } from "./plan-features.js";
+import { planMove, planStanding, standingPlanId, type PlanMove } from "./plan-state.js";
+import type { BillingRedirect } from "./redirect.js";
+import { useCancelSubscription, useChangePlan } from "./useChangePlan.js";
+import { useCreatePaymentMethodSetupSession } from "./useCreatePaymentMethodSetupSession.js";
+import { usePeriodEstimate } from "./usePeriodEstimate.js";
+import { usePlans } from "./usePlans.js";
+import { useSubscription } from "./useSubscription.js";
+
+/** How often, and how long, the section waits for a just-saved card to reach the account. */
+const CARD_POLL_MS = 2_000;
+const CARD_WAIT_MS = 30_000;
+
+/** Props for {@link PlanSection}. */
+export interface PlanSectionProps {
+  /** The organization whose plan is shown. */
+  readonly orgId: string;
+  /**
+   * The organization is platform-managed: it runs on its integrator's
+   * plan, and the section says so instead of offering plans.
+   */
+  readonly managed?: boolean;
+  /** Whether the organization's billing account holds a saved card. */
+  readonly hasPaymentMethod: boolean;
+  /** Re-read the billing account, so a card saved on Stripe's page shows. */
+  readonly onRefreshAccount?: () => void;
+  /** The host's seam for Stripe-hosted pages (see {@link BillingRedirect}). */
+  readonly redirect?: BillingRedirect;
+  /**
+   * The plan the person was choosing when they left to save a card (the
+   * `plan` query Stripe returns with). The section reopens that choice for
+   * an explicit confirm; it never subscribes on its own.
+   */
+  readonly resumePlanId?: string;
+  /** Called once the resumed choice has been taken up, so the host can clear its query. */
+  readonly onResumeHandled?: () => void;
+  /** The clock the standing reads. Defaults to each render's time. */
+  readonly now?: Date;
+  /** Additional CSS class names. */
+  readonly className?: string;
+}
+
+/**
+ * An organization's plan on Stigmer Cloud: the current plan with its
+ * standing and the period's estimated invoice, the plan comparison, and
+ * the confirm step for a subscribe, switch, resume or cancel.
+ *
+ * Everyone who can view the organization's billing reads it; only those
+ * who can manage billing (its admins) see the choices. Renders nothing on
+ * an edition that serves no subscriptions.
+ *
+ * @example
+ * ```tsx
+ * <PlanSection orgId={orgId} hasPaymentMethod={hasCard} />
+ * ```
+ */
+export function PlanSection({
+  orgId,
+  managed = false,
+  hasPaymentMethod,
+  onRefreshAccount,
+  redirect,
+  resumePlanId,
+  onResumeHandled,
+  now,
+  className,
+}: PlanSectionProps) {
+  const available = useResourceAvailable(ApiResourceKind.subscription);
+  const renderNow = now ?? new Date();
+  const catalog = usePlans({ includeRetired: true, enabled: available });
+  const current = useSubscription(available ? orgId : null);
+  const standing = planStanding(current.subscription, renderNow);
+  const livePlanId = standingPlanId(standing);
+  const estimate = usePeriodEstimate(orgId, { enabled: available && !managed && livePlanId !== "" });
+  const manage = useCheckPermission(available && orgId ? { kind: "organization", id: orgId } : null, "can_manage_billing");
+  const canManage = !managed && !manage.isLoading && manage.allowed;
+
+  const changer = useChangePlan();
+  const canceler = useCancelSubscription();
+  const setup = useCreatePaymentMethodSetupSession(redirect);
+  const [move, setMove] = useState<PlanMove | null>(null);
+  const [awaitingCard, setAwaitingCard] = useState(false);
+
+  const buyable = useMemo(() => buyablePlans(catalog.plans ?? []), [catalog.plans]);
+  const planById = useCallback(
+    (planId: string) => catalog.plans?.find((plan) => plan.metadata?.id === planId),
+    [catalog.plans],
+  );
+  const planName = useCallback((planId: string) => planById(planId)?.metadata?.name ?? "your plan", [planById]);
+  const periodEndStamp = current.subscription?.status?.currentPeriodEnd;
+  const periodEnd = periodEndStamp === undefined ? undefined : timestampDate(periodEndStamp);
+
+  // Back from Stripe's card page: reopen the choice the person was making.
+  // Keyed by the plan resumed, and cleared once the host drops the query,
+  // because a desktop host stays mounted across returns and may resume again.
+  const resumedFor = useRef<string | null>(null);
+  useEffect(() => {
+    if (resumePlanId === undefined || resumePlanId === "") {
+      resumedFor.current = null;
+      return;
+    }
+    if (resumedFor.current === resumePlanId || catalog.plans === null || current.isLoading) {
+      return;
+    }
+    resumedFor.current = resumePlanId;
+    const target = buyable.find((plan) => plan.metadata?.id === resumePlanId);
+    const resumedMove = target === undefined ? null : planMove(standing, target, periodEnd);
+    if (resumedMove !== null) {
+      setMove(resumedMove);
+      setAwaitingCard(!hasPaymentMethod);
+    }
+    onResumeHandled?.();
+  }, [resumePlanId, catalog.plans, current.isLoading, buyable, standing, periodEnd, hasPaymentMethod, onResumeHandled]);
+
+  // The card lands on the account by webhook a few seconds after Stripe's
+  // page returns; poll the account until it does, bounded.
+  useEffect(() => {
+    if (!awaitingCard) return;
+    if (hasPaymentMethod) {
+      setAwaitingCard(false);
+      return;
+    }
+    const started = Date.now();
+    const timer = setInterval(() => {
+      if (Date.now() - started > CARD_WAIT_MS) {
+        setAwaitingCard(false);
+        clearInterval(timer);
+        return;
+      }
+      onRefreshAccount?.();
+    }, CARD_POLL_MS);
+    return () => clearInterval(timer);
+  }, [awaitingCard, hasPaymentMethod, onRefreshAccount]);
+
+  const close = useCallback(() => {
+    setMove(null);
+    setAwaitingCard(false);
+    changer.clearError();
+    canceler.clearError();
+    setup.clearError();
+  }, [changer.clearError, canceler.clearError, setup.clearError]);
+
+  const refreshAll = useCallback(() => {
+    current.refetch();
+    estimate.refetch();
+  }, [current.refetch, estimate.refetch]);
+
+  const confirm = useCallback(() => {
+    if (move === null) return;
+    const done = move.kind === "cancel" ? canceler.cancel(orgId) : changer.changePlan(orgId, move.to.metadata?.id ?? "");
+    done.then(
+      () => {
+        setMove(null);
+        refreshAll();
+      },
+      () => undefined,
+    );
+  }, [move, orgId, canceler.cancel, changer.changePlan, refreshAll]);
+
+  const addPaymentMethod = useCallback(() => {
+    const planId = move !== null && move.kind !== "cancel" ? move.to.metadata?.id : undefined;
+    setup.addPaymentMethod(orgId, planId).catch(() => undefined);
+  }, [move, orgId, setup.addPaymentMethod]);
+
+  if (!available) {
+    return null;
+  }
+
+  if (current.isLoading || catalog.isLoading) {
+    return (
+      <div className={cn("stg:space-y-3", className)} aria-busy="true" aria-label="Loading plan">
+        <div className="stg:h-24 stg:animate-pulse stg:rounded-lg stg:bg-muted-subtle" />
+      </div>
+    );
+  }
+
+  const readError = current.error ?? catalog.error;
+  if (readError) {
+    return (
+      <p className={cn("stg:text-xs stg:text-destructive", className)} role="alert">
+        {getUserMessage(readError)}
+      </p>
+    );
+  }
+
+  const nameInForce = livePlanId === "" ? "Free" : planName(livePlanId);
+  const moveError = move?.kind === "cancel" ? canceler.error : (changer.error ?? setup.error);
+  const losing = move?.kind === "switch" ? featuresLost(planById(move.fromPlanId), move.to) : [];
+
+  return (
+    <section className={cn("stg:space-y-3", className)} aria-label="Plan">
+      <PlanCard
+        planName={nameInForce}
+        standing={standing}
+        estimate={estimate.estimate}
+        estimateError={estimate.error}
+        managed={managed}
+      />
+      {!managed && (
+        <PlanPicker
+          plans={buyable}
+          standing={standing}
+          periodEnd={periodEnd}
+          canManage={canManage}
+          onChoose={setMove}
+          disabled={changer.isSubmitting || canceler.isSubmitting}
+        />
+      )}
+      <ChangePlanDialog
+        move={move}
+        planName={planName}
+        losing={losing}
+        hasPaymentMethod={hasPaymentMethod}
+        awaitingPaymentMethod={awaitingCard}
+        isSubmitting={changer.isSubmitting || canceler.isSubmitting || setup.isSubmitting}
+        error={moveError}
+        onConfirm={confirm}
+        onAddPaymentMethod={addPaymentMethod}
+        onClose={close}
+      />
+    </section>
+  );
+}