@stigmer/react 3.39.1-dev.20260928194002 → 3.40.0

package/src/plan-catalog/PlanCreateForm.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import type { Plan } from "@stigmer/protos/ai/stigmer/billing/plan/v1/api_pb";
+import { Feature } from "@stigmer/protos/ai/stigmer/platform/v1/entitlement_pb";
+import { Button } from "../button/index.js";
+import { UNSTYLED_FIELDSET } from "../internal/element-resets.js";
+import { FEATURE_COPY, type NamedFeature } from "../internal/features.js";
+import { Field, INPUT_CLASSES } from "../internal/form-primitives.js";
+import { EMPTY_PLAN_DRAFT, planInputFromDraft, type PlanDraft } from "./plan-draft.js";
+import { useCreatePlan } from "./usePlanMutations.js";
+
+/** The features a subscription plan can list, in contract order. */
+const PLAN_FEATURES: readonly NamedFeature[] = [
+  Feature.channels,
+  Feature.sharing,
+  Feature.teams,
+  Feature.managed_organizations,
+  Feature.byo_provider_keys,
+  Feature.sso_enforcement,
+];
+
+/** Props for {@link PlanCreateForm}. */
+export interface PlanCreateFormProps {
+  /** Fired with the created plan. */
+  readonly onCreated: (plan: Plan) => void;
+  /** Fired when the operator leaves without creating. */
+  readonly onCancel: () => void;
+}
+
+/**
+ * Adds a subscription plan to the catalog: its name and handle, its
+ * monthly minimum and usage share, its features, and the managed
+ * organizations it includes. The form states before submitting that a
+ * plan's terms are final: a change of terms is a new plan, and the old
+ * one is retired.
+ */
+export function PlanCreateForm({ onCreated, onCancel }: PlanCreateFormProps) {
+  const creator = useCreatePlan();
+  const [draft, setDraft] = useState<PlanDraft>(EMPTY_PLAN_DRAFT);
+  const [confirming, setConfirming] = useState(false);
+  const result = planInputFromDraft(draft);
+  const set = <K extends keyof PlanDraft>(key: K, value: PlanDraft[K]) => {
+    setConfirming(false);
+    setDraft((current) => ({ ...current, [key]: value }));
+  };
+  const toggle = (feature: Feature, on: boolean) =>
+    set("features", on ? [...draft.features, feature] : draft.features.filter((f) => f !== feature));
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    if (!result.ok) return;
+    if (!confirming) {
+      setConfirming(true);
+      return;
+    }
+    creator.createPlan(result.input).then(onCreated, () => undefined);
+  };
+
+  const fieldError = (field: keyof PlanDraft) =>
+    !result.ok && result.field === field && draft[field] !== "" ? (
+      <span className="stg:block stg:text-xs stg:text-destructive">{result.message}</span>
+    ) : null;
+
+  return (
+    <form onSubmit={submit} className="stg:space-y-4" aria-label="New plan">
+      <div className="stg:grid stg:gap-3 stg:sm:grid-cols-2">
+        <Field label="Name" required>
+          <input className={INPUT_CLASSES} value={draft.name} onChange={(e) => set("name", e.target.value)} />
+        </Field>
+        <Field label="Handle (slug)" required>
+          <input
+            className={INPUT_CLASSES}
+            value={draft.slug}
+            placeholder="team-2027"
+            onChange={(e) => set("slug", e.target.value)}
+          />
+          {fieldError("slug")}
+        </Field>
+        <Field label="Monthly minimum (USD)" required>
+          <input
+            className={INPUT_CLASSES}
+            inputMode="decimal"
+            value={draft.monthlyMinimumUsd}
+            onChange={(e) => set("monthlyMinimumUsd", e.target.value)}
+          />
+          {fieldError("monthlyMinimumUsd")}
+        </Field>
+        <Field label="Usage share (% of provider cost)" required>
+          <input
+            className={INPUT_CLASSES}
+            inputMode="decimal"
+            value={draft.usageSharePercent}
+            onChange={(e) => set("usageSharePercent", e.target.value)}
+          />
+          {fieldError("usageSharePercent")}
+        </Field>
+      </div>
+
+      <fieldset className={cn(UNSTYLED_FIELDSET, "stg:space-y-2")}>
+        <legend className="stg:mb-1 stg:text-xs stg:font-medium stg:text-muted-foreground">Features</legend>
+        {PLAN_FEATURES.map((feature) => (
+          <label key={feature} className="stg:flex stg:items-start stg:gap-2 stg:text-sm">
+            <input
+              type="checkbox"
+              className="stg:mt-0.5"
+              checked={draft.features.includes(feature)}
+              onChange={(e) => toggle(feature, e.target.checked)}
+            />
+            <span>
+              <span className="stg:block stg:text-foreground">{FEATURE_COPY[feature].label}</span>
+              <span className="stg:block stg:text-xs stg:text-muted-foreground">
+                {FEATURE_COPY[feature].description}
+              </span>
+            </span>
+          </label>
+        ))}
+      </fieldset>
+
+      {draft.features.includes(Feature.managed_organizations) && (
+        <div className="stg:grid stg:gap-3 stg:sm:grid-cols-2">
+          <Field label="Managed organizations included (empty: unlimited)">
+            <input
+              className={INPUT_CLASSES}
+              inputMode="numeric"
+              value={draft.includedManagedOrganizations}
+              onChange={(e) => set("includedManagedOrganizations", e.target.value)}
+            />
+            {fieldError("includedManagedOrganizations")}
+          </Field>
+          <Field label="Each one beyond (USD/month)">
+            <input
+              className={INPUT_CLASSES}
+              inputMode="decimal"
+              value={draft.perExtraOrganizationUsd}
+              onChange={(e) => set("perExtraOrganizationUsd", e.target.value)}
+            />
+            {fieldError("perExtraOrganizationUsd")}
+          </Field>
+        </div>
+      )}
+
+      {confirming && (
+        <p className="stg:rounded-md stg:bg-muted-subtle stg:px-3 stg:py-2 stg:text-xs stg:text-foreground" role="status">
+          A plan&apos;s terms are final once it exists: every subscriber on it is invoiced by them. A change of terms is
+          a new plan, and this one is retired. Create it?
+        </p>
+      )}
+      {creator.error && (
+        <p className="stg:text-xs stg:text-destructive" role="alert">
+          {getUserMessage(creator.error)}
+        </p>
+      )}
+
+      <div className="stg:flex stg:justify-end stg:gap-2">
+        <Button variant="ghost" size="sm" type="button" onClick={onCancel} disabled={creator.isSubmitting}>
+          Cancel
+        </Button>
+        <Button size="sm" type="submit" disabled={!result.ok || creator.isSubmitting}>
+          {confirming ? "Create plan" : "Review"}
+        </Button>
+      </div>
+    </form>
+  );
+}

package/src/plan-catalog/PlansAccessNotice.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { EmptyState } from "../empty-state/index.js";
+
+/**
+ * The access-denied state for the plan catalog's operator surface.
+ * Server-side authorization (`can_manage_plans` on `platform:stigmer`) is
+ * the real gate; this is the designed face of it for anyone who reaches
+ * the route without the permission.
+ */
+export function PlansAccessNotice({ className }: { readonly className?: string }) {
+  return (
+    <EmptyState
+      variant="permission"
+      className={className}
+      title="Platform operator access required"
+      description="The plan catalog is managed by Stigmer's platform operators: a plan's terms are what every subscriber on it is invoiced. Organization roles do not grant access; organizations choose their plan under Billing."
+    />
+  );
+}

package/src/plan-catalog/index.ts

@@ -0,0 +1,14 @@
+// Plan catalog: the platform-operator console for the Stigmer Cloud plans
+// organizations subscribe to (gated on can_manage_plans). Choosing a plan
+// is the customer-facing billing surface's (../billing).
+
+// Behavior hooks
+export { useCreatePlan, useRetirePlan } from "./usePlanMutations.js";
+export type { UseCreatePlanReturn, UseRetirePlanReturn } from "./usePlanMutations.js";
+
+// Styled components
+export { PlanCatalogConsole } from "./PlanCatalogConsole.js";
+export type { PlanCatalogConsoleProps } from "./PlanCatalogConsole.js";
+export { PlanCreateForm } from "./PlanCreateForm.js";
+export type { PlanCreateFormProps } from "./PlanCreateForm.js";
+export { PlansAccessNotice } from "./PlansAccessNotice.js";

package/src/plan-catalog/plan-draft.ts

@@ -0,0 +1,116 @@
+// The plan create form's draft and its translation to the SDK's
+// PlanInput: dollars typed by an operator become exact micros, a percent
+// becomes basis points, and every field the contract cannot take is
+// refused here with the field that is wrong, before a request is sent.
+
+import type { PlanInput } from "@stigmer/sdk";
+import { PlanInstrument } from "@stigmer/protos/ai/stigmer/billing/plan/v1/spec_pb";
+import { Feature } from "@stigmer/protos/ai/stigmer/platform/v1/entitlement_pb";
+
+// BigInt(...), not literals: the docs site compiles this source for a
+// target below ES2020, which has no BigInt literal syntax.
+const MICROS_PER_CENT = BigInt(10_000);
+const CENTS_PER_USD = BigInt(100);
+
+/** What an operator types to create a subscription plan. */
+export interface PlanDraft {
+  readonly name: string;
+  readonly slug: string;
+  readonly monthlyMinimumUsd: string;
+  readonly usageSharePercent: string;
+  readonly features: readonly Feature[];
+  /** Empty: the plan includes every managed organization. */
+  readonly includedManagedOrganizations: string;
+  readonly perExtraOrganizationUsd: string;
+}
+
+export const EMPTY_PLAN_DRAFT: PlanDraft = {
+  name: "",
+  slug: "",
+  monthlyMinimumUsd: "",
+  usageSharePercent: "10",
+  features: [Feature.channels, Feature.sharing],
+  includedManagedOrganizations: "",
+  perExtraOrganizationUsd: "",
+};
+
+/** The draft as a PlanInput, or the first field that is wrong and why. */
+export type PlanDraftResult =
+  | { readonly ok: true; readonly input: PlanInput }
+  | { readonly ok: false; readonly field: keyof PlanDraft; readonly message: string };
+
+const SLUG = /^[a-z0-9]+(-[a-z0-9]+)*$/;
+
+/** A dollar amount with at most two decimals as exact micros, or `null`. */
+export function parseUsd(text: string): bigint | null {
+  const match = /^(\d+)(?:\.(\d{1,2}))?$/.exec(text.trim());
+  if (match === null) {
+    return null;
+  }
+  const cents = BigInt(match[1] ?? "0") * CENTS_PER_USD + BigInt((match[2] ?? "").padEnd(2, "0"));
+  return cents * MICROS_PER_CENT;
+}
+
+/** A percent with at most two decimals as basis points, or `null`. */
+export function parseBasisPoints(text: string): number | null {
+  const match = /^(\d{1,3})(?:\.(\d{1,2}))?$/.exec(text.trim());
+  if (match === null) {
+    return null;
+  }
+  const points = Number(match[1]) * 100 + Number((match[2] ?? "").padEnd(2, "0"));
+  return points <= 10_000 ? points : null;
+}
+
+/** Translate a draft into the create request, refusing what the contract cannot take. */
+export function planInputFromDraft(draft: PlanDraft): PlanDraftResult {
+  const name = draft.name.trim();
+  if (name === "") {
+    return { ok: false, field: "name", message: "A plan needs a name." };
+  }
+  const slug = draft.slug.trim();
+  if (!SLUG.test(slug)) {
+    return { ok: false, field: "slug", message: "Lowercase letters, digits and single hyphens, e.g. team-2027." };
+  }
+  const minimum = parseUsd(draft.monthlyMinimumUsd);
+  if (minimum === null) {
+    return { ok: false, field: "monthlyMinimumUsd", message: "A dollar amount, e.g. 99 or 99.50." };
+  }
+  const share = parseBasisPoints(draft.usageSharePercent);
+  if (share === null) {
+    return { ok: false, field: "usageSharePercent", message: "A percent from 0 to 100, e.g. 10." };
+  }
+  const managed = draft.features.includes(Feature.managed_organizations);
+  let includedManagedOrganizations: number | undefined;
+  let perExtraOrganizationMicros: bigint | undefined;
+  if (managed && draft.includedManagedOrganizations.trim() !== "") {
+    const included = Number(draft.includedManagedOrganizations.trim());
+    if (!Number.isInteger(included) || included < 0) {
+      return { ok: false, field: "includedManagedOrganizations", message: "A whole number, or empty for unlimited." };
+    }
+    includedManagedOrganizations = included;
+    const fee = parseUsd(draft.perExtraOrganizationUsd === "" ? "0" : draft.perExtraOrganizationUsd);
+    if (fee === null) {
+      return { ok: false, field: "perExtraOrganizationUsd", message: "A dollar amount per organization, e.g. 25." };
+    }
+    perExtraOrganizationMicros = fee;
+  }
+  return {
+    ok: true,
+    input: {
+      name,
+      slug,
+      org: "",
+      instrument: PlanInstrument.subscription,
+      entitlements: {
+        features: [...new Set(draft.features)].sort((a, b) => a - b),
+        ...(includedManagedOrganizations === undefined ? {} : { limits: { includedManagedOrganizations } }),
+      },
+      terms: {
+        monthlyMinimumMicros: minimum,
+        usageShareBasisPoints: share,
+        ...(perExtraOrganizationMicros === undefined ? {} : { perExtraOrganizationMicros }),
+      },
+    },
+  };
+}
+

package/src/plan-catalog/usePlanMutations.ts

@@ -0,0 +1,94 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import type { PlanInput } from "@stigmer/sdk";
+import type { Plan } from "@stigmer/protos/ai/stigmer/billing/plan/v1/api_pb";
+import { useStigmer } from "../hooks.js";
+import { toError } from "../internal/toError.js";
+
+/** Return value of {@link useCreatePlan}. */
+export interface UseCreatePlanReturn {
+  /**
+   * Add a plan to the catalog. A plan's terms are final once it exists:
+   * there is no update, so changed terms are a new plan and the old one
+   * is retired.
+   */
+  readonly createPlan: (input: PlanInput) => Promise<Plan>;
+  /** `true` while a create is in flight. */
+  readonly isSubmitting: boolean;
+  /** Error from the last failed attempt, or `null` when healthy. */
+  readonly error: Error | null;
+  /** Reset `error` to `null`. */
+  readonly clearError: () => void;
+}
+
+/**
+ * Behaviour hook that adds a plan to the Stigmer Cloud catalog.
+ * Platform-operator surface: `can_manage_plans` on `platform:stigmer`.
+ */
+export function useCreatePlan(): UseCreatePlanReturn {
+  const stigmer = useStigmer();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const createPlan = useCallback(
+    async (input: PlanInput): Promise<Plan> => {
+      setIsSubmitting(true);
+      setError(null);
+      try {
+        return await stigmer.plan.create(input);
+      } catch (e) {
+        const err = toError(e);
+        setError(err);
+        throw err;
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [stigmer.plan],
+  );
+  const clearError = useCallback(() => setError(null), []);
+  return useMemo(() => ({ createPlan, isSubmitting, error, clearError }), [createPlan, isSubmitting, error, clearError]);
+}
+
+/** Return value of {@link useRetirePlan}. */
+export interface UseRetirePlanReturn {
+  /**
+   * Retire a plan: it can no longer be bought, and every subscription
+   * already on it keeps it. Retiring is final.
+   */
+  readonly retirePlan: (planId: string) => Promise<Plan>;
+  /** `true` while a retire is in flight. */
+  readonly isSubmitting: boolean;
+  /** Error from the last failed attempt, or `null` when healthy. */
+  readonly error: Error | null;
+  /** Reset `error` to `null`. */
+  readonly clearError: () => void;
+}
+
+/**
+ * Behaviour hook that retires a catalog plan.
+ * Platform-operator surface: `can_manage_plans` on `platform:stigmer`.
+ */
+export function useRetirePlan(): UseRetirePlanReturn {
+  const stigmer = useStigmer();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const retirePlan = useCallback(
+    async (planId: string): Promise<Plan> => {
+      setIsSubmitting(true);
+      setError(null);
+      try {
+        return await stigmer.plan.retire(planId);
+      } catch (e) {
+        const err = toError(e);
+        setError(err);
+        throw err;
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [stigmer.plan],
+  );
+  const clearError = useCallback(() => setError(null), []);
+  return useMemo(() => ({ retirePlan, isSubmitting, error, clearError }), [retirePlan, isSubmitting, error, clearError]);
+}

package/src/settings/TeamsSection.tsx

@@ -12,10 +12,22 @@
  *
  * The section owns the list's data and passes it down, so a create, an edit
  * or a delete refreshes the list here without a child reaching up.
+ *
+ * On Stigmer Cloud, teams are a plan feature: where the organization's plan
+ * lacks them, the section names the cheapest plan that includes them and
+ * links to the plans in place of "New team", and its existing teams stay
+ * readable and usable. Only Cloud reads
+ * the plan; on Enterprise a license never lists teams and every
+ * organization has them, so the read would refuse Enterprise its own teams.
  */
 import { useCallback, useId, useState } from "react";
 import type { Team } from "@stigmer/protos/ai/stigmer/iam/team/v1/api_pb";
-import { useResourceAvailable, ApiResourceKind } from "../deployment-mode.js";
+import { Feature } from "@stigmer/protos/ai/stigmer/platform/v1/entitlement_pb";
+import { UpgradeNotice } from "../billing/UpgradeNotice.js";
+import { lowestPlanWith } from "../billing/plan-features.js";
+import { useEntitlements } from "../billing/useEntitlements.js";
+import { usePlans } from "../billing/usePlans.js";
+import { useDeploymentMode, useResourceAvailable, ApiResourceKind } from "../deployment-mode.js";
 import { CloudFeatureNotice } from "../internal/CloudFeatureNotice.js";
 import { PermissionGate } from "../iam-policy/PermissionGate.js";
 import { useOrg } from "../organization/OrgProvider.js";
@@ -37,6 +49,11 @@ export function TeamsSection() {
   const orgSlug = activeOrg?.metadata?.slug ?? "";
   const orgId = activeOrg?.metadata?.id ?? "";
 
+  const onCloud = useDeploymentMode() === "cloud";
+  const plan = useEntitlements(orgId || null, { enabled: onCloud && teamsServed });
+  const planLacksTeams = plan.allows(Feature.teams) === false;
+  const catalog = usePlans({ enabled: planLacksTeams });
+  const unlockingPlanName = lowestPlanWith(catalog.plans ?? [], Feature.teams)?.metadata?.name;
   const list = useTeamList(teamsServed && orgSlug ? orgSlug : null);
   const { refetch } = list;
   const [flow, setFlow] = useState<FlowState>({ phase: "idle" });
@@ -69,7 +86,7 @@ export function TeamsSection() {
           Teams
         </h2>
 
-        {teamsServed && orgId && flow.phase === "idle" && (
+        {teamsServed && orgId && flow.phase === "idle" && !planLacksTeams && (
           <PermissionGate resource={{ kind: "organization", id: orgId }} relation="can_create_team">
             <button
               type="button"
@@ -88,6 +105,7 @@ export function TeamsSection() {
         their leaving the organization, takes that access away.
       </p>
 
+      {teamsServed && orgId && planLacksTeams && <UpgradeNotice feature={Feature.teams} unlockingPlanName={unlockingPlanName} className="stg:mb-3" />}
       {!teamsServed ? (
         <CloudFeatureNotice>
           Teams are available in Stigmer Enterprise and Cloud. This edition

package/src/settings/settings-nav.ts

@@ -8,6 +8,7 @@ import {
   Building2,
   CreditCard,
   FileBadge,
+  Layers,
   KeyRound,
   Link,
   MessageSquare,
@@ -159,5 +160,11 @@ export const PLATFORM_SETTINGS_NAV_GROUP: SettingsNavGroup = {
       icon: FileBadge,
       requiredPermission: "can_issue_license",
     },
+    {
+      href: "/settings/plans",
+      label: "Plans",
+      icon: Layers,
+      requiredPermission: "can_manage_plans",
+    },
   ],
 };

package/src/settings/useSettingsNavGroups.ts

@@ -62,11 +62,17 @@ export function useSettingsNavGroups(): readonly SettingsNavGroup[] {
     "can_issue_license",
     { fail: "closed" },
   );
+  const plans = useCheckPermission(
+    PLATFORM_RESOURCE,
+    "can_manage_plans",
+    { fail: "closed" },
+  );
 
   const pricingAllowed = pricing.allowed;
   const cursorAccountsAllowed = cursorAccounts.allowed;
   const providerStandingAllowed = providerStanding.allowed;
   const licensesAllowed = licenses.allowed;
+  const plansAllowed = plans.allowed;
 
   return useMemo(() => {
     const verdicts: Record<string, boolean> = {
@@ -74,6 +80,7 @@ export function useSettingsNavGroups(): readonly SettingsNavGroup[] {
       can_manage_cursor_accounts: cursorAccountsAllowed,
       can_view_provider_standing: providerStandingAllowed,
       can_issue_license: licensesAllowed,
+      can_manage_plans: plansAllowed,
     };
 
     const visibleItems = PLATFORM_SETTINGS_NAV_GROUP.items.filter(
@@ -91,5 +98,5 @@ export function useSettingsNavGroups(): readonly SettingsNavGroup[] {
       ...SETTINGS_NAV_GROUPS,
       { ...PLATFORM_SETTINGS_NAV_GROUP, items: visibleItems },
     ];
-  }, [pricingAllowed, cursorAccountsAllowed, providerStandingAllowed, licensesAllowed]);
+  }, [pricingAllowed, cursorAccountsAllowed, providerStandingAllowed, licensesAllowed, plansAllowed]);
 }

package/src/team/CreateTeamForm.tsx

@@ -11,6 +11,7 @@ import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import { Field, INPUT_CLASSES } from "../internal/form-primitives.js";
 import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+import { planUpgradeFeature, UpgradeNotice } from "../billing/UpgradeNotice.js";
 import { useCreateTeam } from "./useTeamMutations.js";
 
 /** The longest description the contract accepts (`TeamSpec.description`). */
@@ -23,6 +24,11 @@ export interface CreateTeamFormProps {
   /** Fired with the created team. */
   readonly onCreated?: (team: Team) => void;
   readonly onCancel?: () => void;
+  /**
+   * Where the plans are, for the notice shown when Stigmer Cloud refuses a
+   * team on the organization's plan. Defaults to `/settings/billing`.
+   */
+  readonly billingHref?: string;
   readonly className?: string;
 }
 
@@ -31,12 +37,13 @@ export interface CreateTeamFormProps {
  *
  * All visual properties flow through `--stgm-*` design tokens.
  */
-export function CreateTeamForm({ org, onCreated, onCancel, className }: CreateTeamFormProps) {
+export function CreateTeamForm({ org, onCreated, onCancel, billingHref, className }: CreateTeamFormProps) {
   const { create, isCreating, error, clearError } = useCreateTeam();
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
 
   const canSubmit = name.trim() !== "" && !isCreating;
+  const upgradeFeature = planUpgradeFeature(error);
 
   const handleSubmit = useCallback(
     async (e: FormEvent) => {
@@ -83,11 +90,13 @@ export function CreateTeamForm({ org, onCreated, onCancel, className }: CreateTe
         />
       </Field>
 
-      {error && (
+      {error && upgradeFeature !== null ? (
+        <UpgradeNotice feature={upgradeFeature} error={error} billingHref={billingHref} />
+      ) : error ? (
         <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
           {getUserMessage(error)}
         </p>
-      )}
+      ) : null}
 
       <div className="stg:flex stg:items-center stg:gap-2">
         <button

package/src/team/TeamMembersPanel.tsx

@@ -18,6 +18,8 @@ import { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/
 import { IamRole } from "@stigmer/protos/ai/stigmer/iam/v1/enum_pb";
 import { cn } from "@stigmer/theme";
 import { getUserMessage, granteeFromView, type Grantee } from "@stigmer/sdk";
+import { Feature } from "@stigmer/protos/ai/stigmer/platform/v1/entitlement_pb";
+import { planUpgradeFeature, UpgradeNotice } from "../billing/UpgradeNotice.js";
 import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 import { AccessRow, accessEntryKey } from "../iam-policy/AccessRow.js";
@@ -152,11 +154,13 @@ export function TeamMembersPanel({ teamId, orgId, className }: TeamMembersPanelP
             Add member
           </button>
         </div>
-        {grantError && (
+        {grantError && planUpgradeFeature(grantError) === Feature.teams ? (
+          <UpgradeNotice feature={Feature.teams} error={grantError} className="stg:mt-1" />
+        ) : grantError ? (
           <p className="stg:mt-1 stg:text-destructive stg:text-[0.65rem]" role="alert">
             {getUserMessage(grantError)}
           </p>
-        )}
+        ) : null}
       </PermissionGate>
     </div>
   );

package/team/CreateTeamForm.d.ts

@@ -8,6 +8,11 @@ export interface CreateTeamFormProps {
     /** Fired with the created team. */
     readonly onCreated?: (team: Team) => void;
     readonly onCancel?: () => void;
+    /**
+     * Where the plans are, for the notice shown when Stigmer Cloud refuses a
+     * team on the organization's plan. Defaults to `/settings/billing`.
+     */
+    readonly billingHref?: string;
     readonly className?: string;
 }
 /**
@@ -15,5 +20,5 @@ export interface CreateTeamFormProps {
  *
  * All visual properties flow through `--stgm-*` design tokens.
  */
-export declare function CreateTeamForm({ org, onCreated, onCancel, className }: CreateTeamFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function CreateTeamForm({ org, onCreated, onCancel, billingHref, className }: CreateTeamFormProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CreateTeamForm.d.ts.map

package/team/CreateTeamForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateTeamForm.d.ts","sourceRoot":"","sources":["../src/team/CreateTeamForm.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,+CAA+C,CAAC;AAO1E,6EAA6E;AAC7E,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,wCAAwC;AACxC,MAAM,WAAW,mBAAmB;IAClC,gDAAgD;IAChD,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAwF1F"}
+{"version":3,"file":"CreateTeamForm.d.ts","sourceRoot":"","sources":["../src/team/CreateTeamForm.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,+CAA+C,CAAC;AAQ1E,6EAA6E;AAC7E,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,wCAAwC;AACxC,MAAM,WAAW,mBAAmB;IAClC,gDAAgD;IAChD,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CA2FvG"}

package/team/CreateTeamForm.js

@@ -10,6 +10,7 @@ import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import { Field, INPUT_CLASSES } from "../internal/form-primitives.js";
 import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+import { planUpgradeFeature, UpgradeNotice } from "../billing/UpgradeNotice.js";
 import { useCreateTeam } from "./useTeamMutations.js";
 /** The longest description the contract accepts (`TeamSpec.description`). */
 export const TEAM_DESCRIPTION_MAX_LENGTH = 500;
@@ -18,11 +19,12 @@ export const TEAM_DESCRIPTION_MAX_LENGTH = 500;
  *
  * All visual properties flow through `--stgm-*` design tokens.
  */
-export function CreateTeamForm({ org, onCreated, onCancel, className }) {
+export function CreateTeamForm({ org, onCreated, onCancel, billingHref, className }) {
     const { create, isCreating, error, clearError } = useCreateTeam();
     const [name, setName] = useState("");
     const [description, setDescription] = useState("");
     const canSubmit = name.trim() !== "" && !isCreating;
+    const upgradeFeature = planUpgradeFeature(error);
     const handleSubmit = useCallback(async (e) => {
         e.preventDefault();
         if (!canSubmit)
@@ -40,6 +42,6 @@ export function CreateTeamForm({ org, onCreated, onCancel, className }) {
             // error state is managed by useCreateTeam
         }
     }, [canSubmit, clearError, create, name, org, description, onCreated]);
-    return (_jsxs("form", { onSubmit: handleSubmit, className: cn("stg:space-y-3", className), children: [_jsx("h3", { className: "stg:text-foreground stg:text-sm stg:font-semibold", children: "New team" }), _jsx(Field, { label: "Name", required: true, children: _jsx("input", { type: "text", value: name, onChange: (e) => setName(e.target.value), placeholder: "Site Reliability", disabled: isCreating, autoFocus: true, className: INPUT_CLASSES }) }), _jsx(Field, { label: "Description", children: _jsx("textarea", { value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Who is on this team and what it is for", maxLength: TEAM_DESCRIPTION_MAX_LENGTH, rows: 2, disabled: isCreating, className: cn(INPUT_CLASSES, "stg:resize-none") }) }), error && (_jsx("p", { className: "stg:text-destructive stg:text-[0.65rem]", role: "alert", children: getUserMessage(error) })), _jsxs("div", { className: "stg:flex stg:items-center stg:gap-2", children: [_jsxs("button", { type: "submit", disabled: !canSubmit, className: cn("stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium", "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover", "stg:disabled:pointer-events-none stg:disabled:opacity-40"), children: [isCreating && _jsx(SpinnerIcon, { size: 12 }), "Create team"] }), onCancel && (_jsx("button", { type: "button", onClick: onCancel, disabled: isCreating, className: cn("stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs", "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover", "stg:disabled:pointer-events-none stg:disabled:opacity-50"), children: "Cancel" }))] })] }));
+    return (_jsxs("form", { onSubmit: handleSubmit, className: cn("stg:space-y-3", className), children: [_jsx("h3", { className: "stg:text-foreground stg:text-sm stg:font-semibold", children: "New team" }), _jsx(Field, { label: "Name", required: true, children: _jsx("input", { type: "text", value: name, onChange: (e) => setName(e.target.value), placeholder: "Site Reliability", disabled: isCreating, autoFocus: true, className: INPUT_CLASSES }) }), _jsx(Field, { label: "Description", children: _jsx("textarea", { value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Who is on this team and what it is for", maxLength: TEAM_DESCRIPTION_MAX_LENGTH, rows: 2, disabled: isCreating, className: cn(INPUT_CLASSES, "stg:resize-none") }) }), error && upgradeFeature !== null ? (_jsx(UpgradeNotice, { feature: upgradeFeature, error: error, billingHref: billingHref })) : error ? (_jsx("p", { className: "stg:text-destructive stg:text-[0.65rem]", role: "alert", children: getUserMessage(error) })) : null, _jsxs("div", { className: "stg:flex stg:items-center stg:gap-2", children: [_jsxs("button", { type: "submit", disabled: !canSubmit, className: cn("stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium", "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover", "stg:disabled:pointer-events-none stg:disabled:opacity-40"), children: [isCreating && _jsx(SpinnerIcon, { size: 12 }), "Create team"] }), onCancel && (_jsx("button", { type: "button", onClick: onCancel, disabled: isCreating, className: cn("stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs", "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover", "stg:disabled:pointer-events-none stg:disabled:opacity-50"), children: "Cancel" }))] })] }));
 }
 //# sourceMappingURL=CreateTeamForm.js.map