@stigmer/react 3.39.0 → 3.40.0

package/src/billing/useEntitlements.ts

@@ -0,0 +1,80 @@
+"use client";
+
+import { useMemo } from "react";
+import { create } from "@bufbuild/protobuf";
+import {
+  GetEntitlementsInputSchema,
+  type GetEntitlementsOutput,
+} from "@stigmer/protos/ai/stigmer/billing/subscription/v1/io_pb";
+import type { Feature } from "@stigmer/protos/ai/stigmer/platform/v1/entitlement_pb";
+import { useStigmer } from "../hooks.js";
+import { useFetch } from "../internal/useFetch.js";
+
+/** Options for {@link useEntitlements}. */
+export interface UseEntitlementsOptions {
+  /** Skip fetching while `false` (stable no-op). Default `true`. */
+  readonly enabled?: boolean;
+}
+
+/** Return value of {@link useEntitlements}. */
+export interface UseEntitlementsReturn {
+  /**
+   * What the organization may do right now and the plan that permits it
+   * (`planId` empty on Free), or `null` before the first successful fetch.
+   */
+  readonly entitlements: GetEntitlementsOutput | null;
+  /**
+   * Whether the organization's plan includes `feature` right now; `null`
+   * until the entitlements have loaded, so a caller never refuses on a
+   * guess.
+   */
+  readonly allows: (feature: Feature) => boolean | null;
+  /** `true` while the initial fetch is in flight. */
+  readonly isLoading: boolean;
+  /** Error from the last failed request, or `null` when healthy. */
+  readonly error: Error | null;
+  /** Discard cached data and re-fetch from the server. */
+  readonly refetch: () => void;
+}
+
+/**
+ * Data hook that resolves what an organization's plan permits right now.
+ *
+ * The answer is derived by the server on every read: the live
+ * subscription's plan, else Free's. A platform-managed organization
+ * resolves through its integrator's plan. Every member may read it
+ * (`can_view_billing` is granted to viewers).
+ *
+ * Cloud-only. Self-hosted editions answer from their license, not a plan,
+ * so callers gate on the edition before reading (see `UpgradeNotice`).
+ *
+ * @example
+ * ```tsx
+ * const { allows } = useEntitlements(orgId);
+ * if (allows(Feature.teams) === false) return <UpgradeNotice feature={Feature.teams} />;
+ * ```
+ */
+export function useEntitlements(
+  orgId: string | null,
+  options?: UseEntitlementsOptions,
+): UseEntitlementsReturn {
+  const stigmer = useStigmer();
+  const enabled = (options?.enabled ?? true) && orgId !== null && orgId !== "";
+  const { data: entitlements, isLoading, error, refetch } = useFetch(
+    enabled && orgId ? () => stigmer.subscription.getEntitlements(create(GetEntitlementsInputSchema, { orgId })) : null,
+    [enabled, orgId, stigmer],
+    null as GetEntitlementsOutput | null,
+    { refetchOnWindowFocus: true },
+  );
+  const features = entitlements?.entitlements?.features;
+  return useMemo(
+    () => ({
+      entitlements,
+      allows: (feature: Feature) => (features === undefined ? null : features.includes(feature)),
+      isLoading,
+      error,
+      refetch,
+    }),
+    [entitlements, features, isLoading, error, refetch],
+  );
+}

package/src/billing/usePeriodEstimate.ts

@@ -0,0 +1,59 @@
+"use client";
+
+import { useMemo } from "react";
+import { create } from "@bufbuild/protobuf";
+import {
+  GetPeriodEstimateInputSchema,
+  type PeriodEstimate,
+} from "@stigmer/protos/ai/stigmer/billing/subscription/v1/io_pb";
+import { useStigmer } from "../hooks.js";
+import { useFetch } from "../internal/useFetch.js";
+
+/** Options for {@link usePeriodEstimate}. */
+export interface UsePeriodEstimateOptions {
+  /** Skip fetching while `false`: read only while a subscription is live. Default `true`. */
+  readonly enabled?: boolean;
+}
+
+/** Return value of {@link usePeriodEstimate}. */
+export interface UsePeriodEstimateReturn {
+  /** The current period's estimated invoice, or `null` before the first successful fetch. */
+  readonly estimate: PeriodEstimate | null;
+  /** `true` while the initial fetch is in flight. */
+  readonly isLoading: boolean;
+  /** Error from the last failed request, or `null` when healthy. */
+  readonly error: Error | null;
+  /** Discard cached data and re-fetch from the server. */
+  readonly refetch: () => void;
+}
+
+/**
+ * Data hook that estimates what an organization's current subscription
+ * period will be invoiced.
+ *
+ * The estimate is the invoice the period would close with if no further
+ * usage occurred: the plan's minimum for the whole period (or its share of
+ * the period's provider cost, whichever is greater), less the commission
+ * already collected on tokens, plus managed organizations beyond those
+ * included. The server rates it by the same rule the monthly close
+ * invoices by, so it agrees with the invoice to the cent.
+ *
+ * The server answers NOT_FOUND when nothing is live to invoice (Free, or a
+ * managed organization), so enable it only while a subscription is live.
+ *
+ * Cloud-only; the caller needs `can_view_billing` on the organization.
+ */
+export function usePeriodEstimate(
+  orgId: string | null,
+  options?: UsePeriodEstimateOptions,
+): UsePeriodEstimateReturn {
+  const stigmer = useStigmer();
+  const enabled = (options?.enabled ?? true) && orgId !== null && orgId !== "";
+  const { data: estimate, isLoading, error, refetch } = useFetch(
+    enabled && orgId ? () => stigmer.subscription.getPeriodEstimate(create(GetPeriodEstimateInputSchema, { orgId })) : null,
+    [enabled, orgId, stigmer],
+    null as PeriodEstimate | null,
+    { refetchOnWindowFocus: true },
+  );
+  return useMemo(() => ({ estimate, isLoading, error, refetch }), [estimate, isLoading, error, refetch]);
+}

package/src/billing/usePlans.ts

@@ -0,0 +1,65 @@
+"use client";
+
+import { useMemo } from "react";
+import { create } from "@bufbuild/protobuf";
+import type { Plan } from "@stigmer/protos/ai/stigmer/billing/plan/v1/api_pb";
+import { ListPlansInputSchema } from "@stigmer/protos/ai/stigmer/billing/plan/v1/io_pb";
+import { useStigmer } from "../hooks.js";
+import { useFetch } from "../internal/useFetch.js";
+
+/** Options for {@link usePlans}. */
+export interface UsePlansOptions {
+  /** Include retired plans beside the ones that can still be bought. Default `false`. */
+  readonly includeRetired?: boolean;
+  /** Skip fetching while `false` (stable no-op). Default `true`. */
+  readonly enabled?: boolean;
+}
+
+/** Return value of {@link usePlans}. */
+export interface UsePlansReturn {
+  /** The catalog's plans, or `null` before the first successful fetch. */
+  readonly plans: readonly Plan[] | null;
+  /** `true` while the initial fetch is in flight. */
+  readonly isLoading: boolean;
+  /** `true` while a background refetch is in flight and stale data is shown. */
+  readonly isRefetching: boolean;
+  /** Error from the last failed request, or `null` when healthy. */
+  readonly error: Error | null;
+  /** Discard cached data and re-fetch from the server. */
+  readonly refetch: () => void;
+}
+
+/**
+ * Data hook that lists the Stigmer Cloud plan catalog.
+ *
+ * Every signed-in caller may read it. By default it lists only the plans
+ * that can still be bought; `includeRetired` adds the retired rows an
+ * operator audits. Free is not a row: an organization with no live
+ * subscription is on Free.
+ *
+ * Cloud-only: other editions serve no plans.
+ *
+ * @example
+ * ```tsx
+ * const { plans } = usePlans();
+ * ```
+ */
+export function usePlans(options?: UsePlansOptions): UsePlansReturn {
+  const stigmer = useStigmer();
+  const enabled = options?.enabled ?? true;
+  const includeRetired = options?.includeRetired ?? false;
+  const { data: plans, isLoading, isRefetching, error, refetch } = useFetch(
+    enabled
+      ? () =>
+          stigmer.plan
+            .list(create(ListPlansInputSchema, { includeRetired }))
+            .then((result): readonly Plan[] => result.entries)
+      : null,
+    [enabled, includeRetired, stigmer],
+    null as readonly Plan[] | null,
+  );
+  return useMemo(
+    () => ({ plans, isLoading, isRefetching, error, refetch }),
+    [plans, isLoading, isRefetching, error, refetch],
+  );
+}

package/src/billing/useSubscription.ts

@@ -0,0 +1,70 @@
+"use client";
+
+import { useMemo } from "react";
+import { create } from "@bufbuild/protobuf";
+import { isNotFound } from "@stigmer/sdk";
+import type { Subscription } from "@stigmer/protos/ai/stigmer/billing/subscription/v1/api_pb";
+import { GetSubscriptionForOrganizationInputSchema } from "@stigmer/protos/ai/stigmer/billing/subscription/v1/io_pb";
+import { useStigmer } from "../hooks.js";
+import { useFetch } from "../internal/useFetch.js";
+
+/** Return value of {@link useSubscription}. */
+export interface UseSubscriptionReturn {
+  /**
+   * The organization's subscription as stored; `null` when it never
+   * subscribed (it is on Free) or before the first successful fetch.
+   * A subscription that ended reads `canceled` with its period in the
+   * past; {@link useEntitlements} says what the organization may do now.
+   */
+  readonly subscription: Subscription | null;
+  /** `true` while the initial fetch is in flight. */
+  readonly isLoading: boolean;
+  /** `true` while a background refetch is in flight and stale data is shown. */
+  readonly isRefetching: boolean;
+  /** Error from the last failed request, or `null` when healthy. Never NOT_FOUND. */
+  readonly error: Error | null;
+  /** Discard cached data and re-fetch from the server. */
+  readonly refetch: () => void;
+}
+
+/**
+ * Data hook that reads an organization's subscription.
+ *
+ * The server answers NOT_FOUND for an organization that never subscribed;
+ * this hook reads that as `null`, because never subscribed is a state (the
+ * Free plan), not a failure.
+ *
+ * Pass `null` as `orgId` to skip fetching. Refetches when the window
+ * regains focus, so a plan changed in another window, or a card saved in
+ * the system browser, shows on return.
+ *
+ * Cloud-only; the caller needs `can_view_billing` on the organization.
+ *
+ * @example
+ * ```tsx
+ * const { subscription } = useSubscription(orgId);
+ * ```
+ */
+export function useSubscription(orgId: string | null): UseSubscriptionReturn {
+  const stigmer = useStigmer();
+  const { data: subscription, isLoading, isRefetching, error, refetch } = useFetch(
+    orgId
+      ? () =>
+          stigmer.subscription
+            .getForOrganization(create(GetSubscriptionForOrganizationInputSchema, { orgId }))
+            .catch((err: unknown) => {
+              if (isNotFound(err)) {
+                return null;
+              }
+              throw err;
+            })
+      : null,
+    [orgId, stigmer],
+    null as Subscription | null,
+    { refetchOnWindowFocus: true },
+  );
+  return useMemo(
+    () => ({ subscription, isLoading, isRefetching, error, refetch }),
+    [subscription, isLoading, isRefetching, error, refetch],
+  );
+}

package/src/index.ts

@@ -1160,6 +1160,25 @@ export {
   useCreateCheckoutSession,
   useCreateBillingPortalSession,
   useSetAutoRechargeConfig,
+  usePlans,
+  useSubscription,
+  useEntitlements,
+  usePeriodEstimate,
+  useChangePlan,
+  useCancelSubscription,
+  useCreatePaymentMethodSetupSession,
+  planStanding,
+  planMove,
+  PlanSection,
+  PlanCard,
+  PlanPicker,
+  ENTERPRISE_CONTACT_URL,
+  ChangePlanDialog,
+  PAYMENT_METHOD_REQUIRED,
+  UpgradeNotice,
+  planUpgradeFeature,
+  PLAN_UPGRADE_REQUIRED,
+  DEFAULT_BILLING_HREF,
   BillingSection,
   CreditBalanceCard,
   PaymentMethodCard,
@@ -1178,7 +1197,26 @@ export {
   formatLedgerDate,
 } from "./billing/index.js";
 export type {
+  UseBillingAccountOptions,
   UseBillingAccountReturn,
+  UsePlansOptions,
+  UsePlansReturn,
+  UseSubscriptionReturn,
+  UseEntitlementsOptions,
+  UseEntitlementsReturn,
+  UsePeriodEstimateOptions,
+  UsePeriodEstimateReturn,
+  UseChangePlanReturn,
+  UseCancelSubscriptionReturn,
+  UseCreatePaymentMethodSetupSessionReturn,
+  BillingRedirect,
+  PlanStanding,
+  PlanMove,
+  PlanSectionProps,
+  PlanCardProps,
+  PlanPickerProps,
+  ChangePlanDialogProps,
+  UpgradeNoticeProps,
   UseCreditLedgerReturn,
   UseCreditLedgerOptions,
   UseBillingUsageReportReturn,
@@ -1285,6 +1323,22 @@ export type {
   LicensesConsoleProps,
 } from "./licenses/index.js";
 
+// Plan catalog — platform-operator management of the Stigmer Cloud plans
+// organizations subscribe to (gated on can_manage_plans)
+export {
+  useCreatePlan,
+  useRetirePlan,
+  PlanCatalogConsole,
+  PlanCreateForm,
+  PlansAccessNotice,
+} from "./plan-catalog/index.js";
+export type {
+  UseCreatePlanReturn,
+  UseRetirePlanReturn,
+  PlanCatalogConsoleProps,
+  PlanCreateFormProps,
+} from "./plan-catalog/index.js";
+
 // Settings — navigation structure + section components shared across app shells
 export {
   SETTINGS_NAV_GROUPS,

package/src/internal/features.ts

@@ -0,0 +1,49 @@
+// The one vocabulary for entitlement features: a label and a line per
+// feature, shared by every surface that names one (the licenses console,
+// the plan comparison, the upgrade notice), so a feature reads the same
+// wherever it appears.
+//
+// Keyed by every feature that grants something, so a value added to the
+// contract fails to compile here until it has words. `platform_client` is
+// not one: it gates nothing (platform/v1/entitlement.proto), so no surface
+// names it.
+
+import { Feature } from "@stigmer/protos/ai/stigmer/platform/v1/entitlement_pb";
+
+/** A feature that grants something: every value but the zero value and `platform_client`. */
+export type NamedFeature = Exclude<Feature, Feature.feature_unspecified | Feature.platform_client>;
+
+/** Label and one-line explanation per named feature. */
+export const FEATURE_COPY: Readonly<
+  Record<NamedFeature, { readonly label: string; readonly description: string }>
+> = {
+  [Feature.sso_enforcement]: {
+    label: "SSO enforcement",
+    description: "Require members to sign in through a registered identity provider.",
+  },
+  [Feature.byo_provider_keys]: {
+    label: "Bring your own provider keys",
+    description: "Use the customer's own LLM provider keys instead of the metered proxy.",
+  },
+  [Feature.channels]: {
+    label: "Channels",
+    description: "Deliver agents over messaging channels through a channel runtime.",
+  },
+  [Feature.sharing]: {
+    label: "Sharing",
+    description: "Share agents with individuals and guests through hosted links.",
+  },
+  [Feature.teams]: {
+    label: "Teams",
+    description: "Group members into teams and grant access to a team at once.",
+  },
+  [Feature.managed_organizations]: {
+    label: "Managed organizations",
+    description: "Run organizations for your own customers under your identity provider.",
+  },
+};
+
+/** Whether a stored feature value is one the vocabulary names. */
+export function isNamedFeature(feature: number): feature is NamedFeature {
+  return feature in FEATURE_COPY;
+}

package/src/licenses/license-format.ts

@@ -20,6 +20,7 @@ import {
   type Entitlements,
 } from "@stigmer/protos/ai/stigmer/platform/v1/entitlement_pb";
 import { LicenseTerm } from "@stigmer/protos/ai/stigmer/platform/v1/license_pb";
+import { FEATURE_COPY } from "../internal/features.js";
 
 /** A term an operator can issue; the unspecified zero value is not one. */
 export type IssuableTerm = LicenseTerm.trial | LicenseTerm.paid;
@@ -59,29 +60,19 @@ export const TERM_LABELS: Readonly<Record<IssuableTerm, string>> = {
 };
 
 /**
- * Label and one-line explanation per grantable feature. Keyed by every
- * grantable `Feature` value, so a feature added to the contract fails to
- * compile here until it has words an operator can read.
+ * Label and one-line explanation per grantable feature: the shared
+ * vocabulary (../internal/features.ts), narrowed to what a license may
+ * carry. Keyed by every grantable `Feature` value, so a feature added to
+ * the contract fails to compile here until it has words an operator can
+ * read.
  */
 export const FEATURE_LABELS: Readonly<
   Record<GrantableFeature, { readonly label: string; readonly description: string }>
 > = {
-  [Feature.sso_enforcement]: {
-    label: "SSO enforcement",
-    description: "Require members to sign in through a registered identity provider.",
-  },
-  [Feature.byo_provider_keys]: {
-    label: "Bring your own provider keys",
-    description: "Use the customer's own LLM provider keys instead of the metered proxy.",
-  },
-  [Feature.channels]: {
-    label: "Channels",
-    description: "Deliver agents over messaging channels through a channel runtime.",
-  },
-  [Feature.sharing]: {
-    label: "Sharing",
-    description: "Share agents with individuals and guests through hosted links.",
-  },
+  [Feature.sso_enforcement]: FEATURE_COPY[Feature.sso_enforcement],
+  [Feature.byo_provider_keys]: FEATURE_COPY[Feature.byo_provider_keys],
+  [Feature.channels]: FEATURE_COPY[Feature.channels],
+  [Feature.sharing]: FEATURE_COPY[Feature.sharing],
 };
 
 /** Every grantable feature, in contract order (derived from the label map). */

package/src/plan-catalog/PlanCatalogConsole.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage, isUnimplemented } from "@stigmer/sdk";
+import type { Plan } from "@stigmer/protos/ai/stigmer/billing/plan/v1/api_pb";
+import { PlanInstrument } from "@stigmer/protos/ai/stigmer/billing/plan/v1/spec_pb";
+import { PlanLifecycle } from "@stigmer/protos/ai/stigmer/billing/plan/v1/status_pb";
+import { formatCreditBalance } from "../billing/format.js";
+import { formatManagedOrganizations, formatUsageShare, offeredFeatures } from "../billing/plan-features.js";
+import { usePlans } from "../billing/usePlans.js";
+import { Button } from "../button/index.js";
+import { ApiResourceKind, 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 { FEATURE_COPY, isNamedFeature } from "../internal/features.js";
+import { ConfirmDialog } from "../resource-detail/ConfirmDialog.js";
+import { useConfirmAction } from "../resource-detail/useConfirmAction.js";
+import { StatusBadge } from "../resource-workbench/components/StatusBadge.js";
+import { PlanCreateForm } from "./PlanCreateForm.js";
+import { PlansAccessNotice } from "./PlansAccessNotice.js";
+import { useRetirePlan } from "./usePlanMutations.js";
+
+/** The platform object the catalog's permission is held on. */
+const PLATFORM = { kind: "platform", id: "stigmer" } as const;
+
+/** Props for {@link PlanCatalogConsole}. */
+export interface PlanCatalogConsoleProps {
+  /** Additional CSS class names. */
+  readonly className?: string;
+}
+
+/**
+ * The platform-operator console for the Stigmer Cloud plan catalog: every
+ * plan, retired ones included, with its terms and what it offers; retiring
+ * a plan; and creating one.
+ *
+ * Every signed-in caller may read the catalog, so the page gates on
+ * `can_manage_plans` on `platform:stigmer` itself, and anyone without it
+ * sees the designed access notice. Organizations choose their plan under
+ * Billing, not here.
+ *
+ * @example
+ * ```tsx
+ * <PlanCatalogConsole />
+ * ```
+ */
+export function PlanCatalogConsole({ className }: PlanCatalogConsoleProps) {
+  const available = useResourceAvailable(ApiResourceKind.plan);
+  const operator = useCheckPermission(available ? PLATFORM : null, "can_manage_plans", { fail: "closed" });
+  const catalog = usePlans({ includeRetired: true, enabled: available && operator.allowed });
+  const retirer = useRetirePlan();
+  const { confirmState, confirm, handleConfirm, handleCancel } = useConfirmAction();
+  const [creating, setCreating] = useState(false);
+
+  const header = <ConsoleHeader onCreate={operator.allowed && !creating ? () => setCreating(true) : undefined} />;
+
+  if (!available || (catalog.error && isUnimplemented(catalog.error))) {
+    return (
+      <div className={cn("stg:space-y-3", className)}>
+        {header}
+        <CloudFeatureNotice>
+          Plans are sold on Stigmer Cloud. The server this console is connected to serves no plan catalog.
+        </CloudFeatureNotice>
+      </div>
+    );
+  }
+  if (operator.isLoading || (operator.allowed && catalog.plans === null && catalog.error === null)) {
+    return (
+      <div className={cn("stg:space-y-2", className)} aria-busy="true">
+        {Array.from({ length: 3 }, (_, i) => (
+          <div key={i} className="stg:h-12 stg:animate-pulse stg:rounded-lg stg:bg-muted-subtle" />
+        ))}
+      </div>
+    );
+  }
+  if (!operator.allowed) {
+    return (
+      <div className={cn("stg:space-y-3", className)}>
+        {header}
+        <PlansAccessNotice />
+      </div>
+    );
+  }
+  if (catalog.error) {
+    return (
+      <div className={cn("stg:space-y-3", className)}>
+        {header}
+        <p className="stg:text-sm stg:text-destructive" role="alert">
+          {getUserMessage(catalog.error)}
+        </p>
+        <Button variant="outline" onClick={catalog.refetch}>
+          Try again
+        </Button>
+      </div>
+    );
+  }
+
+  const retire = async (plan: Plan) => {
+    const ok = await confirm({
+      title: `Retire ${plan.metadata?.name ?? "this plan"}?`,
+      description:
+        "It can no longer be bought. Every organization already on it keeps it, invoiced by its terms. Retiring is final.",
+      confirmLabel: "Retire",
+      variant: "destructive",
+    });
+    if (ok) {
+      retirer.retirePlan(plan.metadata?.id ?? "").then(catalog.refetch, () => undefined);
+    }
+  };
+
+  return (
+    <div className={cn("stg:space-y-4", className)}>
+      {header}
+      {creating ? (
+        <div className="stg:rounded-lg stg:border stg:border-border stg:bg-card stg:p-4">
+          <PlanCreateForm
+            onCreated={() => {
+              setCreating(false);
+              catalog.refetch();
+            }}
+            onCancel={() => setCreating(false)}
+          />
+        </div>
+      ) : null}
+      {retirer.error && (
+        <p className="stg:text-xs stg:text-destructive" role="alert">
+          {getUserMessage(retirer.error)}
+        </p>
+      )}
+      <ul className={cn(UNSTYLED_LIST, "stg:space-y-2")} aria-label="Plan catalog">
+        {(catalog.plans ?? []).map((plan) => (
+          <PlanRow key={plan.metadata?.id} plan={plan} onRetire={() => void retire(plan)} busy={retirer.isSubmitting} />
+        ))}
+      </ul>
+      <ConfirmDialog state={confirmState} onConfirm={handleConfirm} onCancel={handleCancel} />
+    </div>
+  );
+}
+
+function ConsoleHeader({ onCreate }: { readonly onCreate?: () => void }) {
+  return (
+    <div className="stg:flex stg:items-start stg:justify-between stg:gap-3">
+      <div>
+        <h2 className="stg:text-sm stg:font-semibold stg:text-foreground">Plans</h2>
+        <p className="stg:text-xs stg:text-muted-foreground">
+          The plans organizations subscribe to. A plan&apos;s terms are final; change them with a new plan and retire the
+          old one.
+        </p>
+      </div>
+      {onCreate && (
+        <Button size="xs" onClick={onCreate}>
+          New plan
+        </Button>
+      )}
+    </div>
+  );
+}
+
+function PlanRow({ plan, onRetire, busy }: { readonly plan: Plan; readonly onRetire: () => void; readonly busy: boolean }) {
+  const active = plan.status?.lifecycle === PlanLifecycle.active;
+  const license = plan.spec?.instrument === PlanInstrument.license;
+  const terms = plan.spec?.terms;
+  const listed = (plan.spec?.entitlements?.features ?? []).filter(isNamedFeature).map((f) => FEATURE_COPY[f].label);
+  const offered = new Set(offeredFeatures(plan.spec?.entitlements).map((f) => f.label));
+  const managed = formatManagedOrganizations(plan.spec?.entitlements, terms);
+  return (
+    <li className="stg:rounded-lg stg:border stg:border-border stg:bg-card stg:p-3">
+      <div className="stg:flex stg:items-center stg:justify-between stg:gap-3">
+        <div className="stg:min-w-0">
+          <p className="stg:truncate stg:text-sm stg:font-medium stg:text-foreground">
+            {plan.metadata?.name}{" "}
+            <span className="stg:font-normal stg:text-muted-foreground">({plan.metadata?.slug})</span>
+          </p>
+          <p className="stg:text-xs stg:text-muted-foreground">
+            {license
+              ? "Issued as a license"
+              : `${formatCreditBalance(terms?.monthlyMinimumMicros ?? BigInt(0))}/month ${formatUsageShare(terms)}`}
+          </p>
+        </div>
+        <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-2">
+          <StatusBadge phase={active ? "ready" : "disabled"} label={active ? "On sale" : "Retired"} />
+          {active && (
+            <Button variant="outline" size="xs" onClick={onRetire} disabled={busy}>
+              Retire
+            </Button>
+          )}
+        </div>
+      </div>
+      <p className="stg:mt-1 stg:text-xs stg:text-muted-foreground">
+        {listed.map((label) => (offered.has(label) ? label : `${label} (not offered yet)`)).join(" · ")}
+        {managed === "" ? "" : ` · ${managed}`}
+      </p>
+    </li>
+  );
+}