@stigmer/react 3.39.1-dev.20260928194002 → 3.40.1

package/src/channel-app/ChannelAppDetailPanel.tsx

@@ -18,6 +18,7 @@ import {
   whatsappChannelAppWebhookUrl,
 } from "./whatsappAppSetup.js";
 import { CopyBlock, CopyRow, FormField } from "./internal.js";
+import { PermissionGate } from "../iam-policy/PermissionGate.js";
 import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 // ---------------------------------------------------------------------------
@@ -66,6 +67,11 @@ export interface ChannelAppDetailPanelProps {
  * untouched preserves the stored values (rotate one secret without
  * re-entering the others). Deletion is refused server-side while any
  * agent channel still installs through this app.
+ *
+ * The credentials form is offered to a caller who may edit the app
+ * (`can_edit`) and the deletion section to one who may delete it
+ * (`can_delete`): its creator and the organization's admins. Someone
+ * granted viewer on an app sees its setup values with no actions.
  */
 export function ChannelAppDetailPanel({
   channelApp,
@@ -127,50 +133,55 @@ export function ChannelAppDetailPanel({
       ) : null}
 
       {/* Deletion */}
-      <section className="stg:border-t stg:border-border stg:pt-3" aria-label="Danger zone">
-        {deleteError && (
-          <p className="stg:text-destructive stg:mb-2 stg:text-[0.65rem]" role="alert">
-            {getUserMessage(deleteError)}
-          </p>
-        )}
-        {confirmingDelete ? (
-          <div className="stg:flex stg:items-center stg:gap-2">
-            <p className="stg:text-xs stg:text-foreground">
-              Delete this channel app? Channels installing through it must be
-              disconnected first.
+      <PermissionGate
+        resource={{ kind: "channel_app", id: appId }}
+        relation="can_delete"
+      >
+        <section className="stg:border-t stg:border-border stg:pt-3" aria-label="Danger zone">
+          {deleteError && (
+            <p className="stg:text-destructive stg:mb-2 stg:text-[0.65rem]" role="alert">
+              {getUserMessage(deleteError)}
             </p>
+          )}
+          {confirmingDelete ? (
+            <div className="stg:flex stg:items-center stg:gap-2">
+              <p className="stg:text-xs stg:text-foreground">
+                Delete this channel app? Channels installing through it must be
+                disconnected first.
+              </p>
+              <button
+                type="button"
+                onClick={handleDelete}
+                disabled={isDeleting}
+                className={cn(
+                  "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium",
+                  "stg:bg-destructive stg:text-destructive-foreground stg:hover:opacity-90",
+                  "stg:disabled:pointer-events-none stg:disabled:opacity-40",
+                )}
+              >
+                {isDeleting && <SpinnerIcon size={12} />}
+                Delete
+              </button>
+              <button
+                type="button"
+                onClick={() => setConfirmingDelete(false)}
+                disabled={isDeleting}
+                className="stg:text-muted-foreground stg:hover:text-foreground stg:text-xs stg:transition-colors"
+              >
+                Keep
+              </button>
+            </div>
+          ) : (
             <button
               type="button"
-              onClick={handleDelete}
-              disabled={isDeleting}
-              className={cn(
-                "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium",
-                "stg:bg-destructive stg:text-destructive-foreground stg:hover:opacity-90",
-                "stg:disabled:pointer-events-none stg:disabled:opacity-40",
-              )}
-            >
-              {isDeleting && <SpinnerIcon size={12} />}
-              Delete
-            </button>
-            <button
-              type="button"
-              onClick={() => setConfirmingDelete(false)}
-              disabled={isDeleting}
-              className="stg:text-muted-foreground stg:hover:text-foreground stg:text-xs stg:transition-colors"
+              onClick={() => setConfirmingDelete(true)}
+              className="stg:text-destructive stg:text-xs stg:font-medium stg:hover:opacity-80"
             >
-              Keep
+              Delete channel app
             </button>
-          </div>
-        ) : (
-          <button
-            type="button"
-            onClick={() => setConfirmingDelete(true)}
-            className="stg:text-destructive stg:text-xs stg:font-medium stg:hover:opacity-80"
-          >
-            Delete channel app
-          </button>
-        )}
-      </section>
+          )}
+        </section>
+      </PermissionGate>
     </div>
   );
 }
@@ -270,63 +281,68 @@ function SlackAppDetail({
       </section>
 
       {/* Credential rotation */}
-      <form onSubmit={handleSave} className="stg:space-y-3" aria-label="Credentials">
-        <p className="stg:text-xs stg:font-medium stg:text-foreground">Credentials</p>
-        <p className="stg:-mt-2 stg:text-[0.65rem] stg:text-muted-foreground">
-          Secrets show as <code className="stg:font-mono">***REDACTED***</code>;
-          leave a field untouched to keep its stored value, or paste a new
-          one to rotate it.
-        </p>
-
-        <FormField
-          id={`${baseId}-client-id`}
-          label="Client ID"
-          value={clientId}
-          onChange={setClientId}
-          placeholder="1234567890.0987654321"
-          disabled={isUpdating}
-          required
-        />
-        <FormField
-          id={`${baseId}-client-secret`}
-          label="Client secret"
-          value={clientSecret}
-          onChange={setClientSecret}
-          placeholder="Client secret"
-          type="password"
-          disabled={isUpdating}
-          required
-        />
-        <FormField
-          id={`${baseId}-signing-secret`}
-          label="Signing secret"
-          value={signingSecret}
-          onChange={setSigningSecret}
-          placeholder="Signing secret"
-          type="password"
-          disabled={isUpdating}
-          required
-        />
-
-        {updateError && (
-          <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
-            {getUserMessage(updateError)}
+      <PermissionGate
+        resource={{ kind: "channel_app", id: appId }}
+        relation="can_edit"
+      >
+        <form onSubmit={handleSave} className="stg:space-y-3" aria-label="Credentials">
+          <p className="stg:text-xs stg:font-medium stg:text-foreground">Credentials</p>
+          <p className="stg:-mt-2 stg:text-[0.65rem] stg:text-muted-foreground">
+            Secrets show as <code className="stg:font-mono">***REDACTED***</code>;
+            leave a field untouched to keep its stored value, or paste a new
+            one to rotate it.
           </p>
-        )}
 
-        <button
-          type="submit"
-          disabled={!canSave}
-          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",
+          <FormField
+            id={`${baseId}-client-id`}
+            label="Client ID"
+            value={clientId}
+            onChange={setClientId}
+            placeholder="1234567890.0987654321"
+            disabled={isUpdating}
+            required
+          />
+          <FormField
+            id={`${baseId}-client-secret`}
+            label="Client secret"
+            value={clientSecret}
+            onChange={setClientSecret}
+            placeholder="Client secret"
+            type="password"
+            disabled={isUpdating}
+            required
+          />
+          <FormField
+            id={`${baseId}-signing-secret`}
+            label="Signing secret"
+            value={signingSecret}
+            onChange={setSigningSecret}
+            placeholder="Signing secret"
+            type="password"
+            disabled={isUpdating}
+            required
+          />
+
+          {updateError && (
+            <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
+              {getUserMessage(updateError)}
+            </p>
           )}
-        >
-          {isUpdating && <SpinnerIcon size={12} />}
-          Save credentials
-        </button>
-      </form>
+
+          <button
+            type="submit"
+            disabled={!canSave}
+            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",
+            )}
+          >
+            {isUpdating && <SpinnerIcon size={12} />}
+            Save credentials
+          </button>
+        </form>
+      </PermissionGate>
     </>
   );
 }
@@ -440,74 +456,79 @@ function WhatsAppAppDetail({
       </section>
 
       {/* Credential rotation */}
-      <form onSubmit={handleSave} className="stg:space-y-3" aria-label="Credentials">
-        <p className="stg:text-xs stg:font-medium stg:text-foreground">Credentials</p>
-        <p className="stg:-mt-2 stg:text-[0.65rem] stg:text-muted-foreground">
-          Secrets show as <code className="stg:font-mono">***REDACTED***</code>;
-          leave a field untouched to keep its stored value, or paste a new
-          one to rotate it.
-        </p>
-
-        <FormField
-          id={`${baseId}-app-id`}
-          label="App ID"
-          value={metaAppId}
-          onChange={setMetaAppId}
-          placeholder="1234567890123456"
-          disabled={isUpdating}
-          required
-        />
-        <FormField
-          id={`${baseId}-app-secret`}
-          label="App secret"
-          value={appSecret}
-          onChange={setAppSecret}
-          placeholder="App secret"
-          type="password"
-          disabled={isUpdating}
-          required
-        />
-        <FormField
-          id={`${baseId}-access-token`}
-          label="Access token"
-          value={accessToken}
-          onChange={setAccessToken}
-          placeholder="Long-lived system-user access token"
-          type="password"
-          disabled={isUpdating}
-          required
-        />
-        <FormField
-          id={`${baseId}-verify-token`}
-          label="Verify token"
-          value={verifyToken}
-          onChange={setVerifyToken}
-          placeholder="Verify token"
-          type="password"
-          hint="Rotating it? Update Meta's webhook configuration to the same value."
-          disabled={isUpdating}
-          required
-        />
-
-        {updateError && (
-          <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
-            {getUserMessage(updateError)}
+      <PermissionGate
+        resource={{ kind: "channel_app", id: appId }}
+        relation="can_edit"
+      >
+        <form onSubmit={handleSave} className="stg:space-y-3" aria-label="Credentials">
+          <p className="stg:text-xs stg:font-medium stg:text-foreground">Credentials</p>
+          <p className="stg:-mt-2 stg:text-[0.65rem] stg:text-muted-foreground">
+            Secrets show as <code className="stg:font-mono">***REDACTED***</code>;
+            leave a field untouched to keep its stored value, or paste a new
+            one to rotate it.
           </p>
-        )}
 
-        <button
-          type="submit"
-          disabled={!canSave}
-          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",
+          <FormField
+            id={`${baseId}-app-id`}
+            label="App ID"
+            value={metaAppId}
+            onChange={setMetaAppId}
+            placeholder="1234567890123456"
+            disabled={isUpdating}
+            required
+          />
+          <FormField
+            id={`${baseId}-app-secret`}
+            label="App secret"
+            value={appSecret}
+            onChange={setAppSecret}
+            placeholder="App secret"
+            type="password"
+            disabled={isUpdating}
+            required
+          />
+          <FormField
+            id={`${baseId}-access-token`}
+            label="Access token"
+            value={accessToken}
+            onChange={setAccessToken}
+            placeholder="Long-lived system-user access token"
+            type="password"
+            disabled={isUpdating}
+            required
+          />
+          <FormField
+            id={`${baseId}-verify-token`}
+            label="Verify token"
+            value={verifyToken}
+            onChange={setVerifyToken}
+            placeholder="Verify token"
+            type="password"
+            hint="Rotating it? Update Meta's webhook configuration to the same value."
+            disabled={isUpdating}
+            required
+          />
+
+          {updateError && (
+            <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
+              {getUserMessage(updateError)}
+            </p>
           )}
-        >
-          {isUpdating && <SpinnerIcon size={12} />}
-          Save credentials
-        </button>
-      </form>
+
+          <button
+            type="submit"
+            disabled={!canSave}
+            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",
+            )}
+          >
+            {isUpdating && <SpinnerIcon size={12} />}
+            Save credentials
+          </button>
+        </form>
+      </PermissionGate>
     </>
   );
 }

package/src/channel-app/ChannelAppListPanel.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { ReactNode } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
@@ -22,14 +23,22 @@ export interface ChannelAppListPanelProps {
   readonly onEdit?: (app: ChannelApp) => void;
   /** Re-expose refetch so parents can trigger a list refresh. */
   readonly onRefetchRef?: (refetch: () => void) => void;
+  /**
+   * Shown when the list is empty. Defaults to "No channel apps registered
+   * yet." The list holds only the apps the caller may view (their creator,
+   * anyone granted viewer on one, and the organization's admins), so a host
+   * that knows the caller may not manage channel apps should say who does
+   * instead.
+   */
+  readonly emptyState?: ReactNode;
   /** Additional CSS class names for the root container. */
   readonly className?: string;
 }
 
 /**
- * Displays the {@link ChannelApp} resources owned by an organization —
- * the customer's own provider apps (Slack, Meta/WhatsApp) that agent
- * channels can install through.
+ * Displays the {@link ChannelApp} resources of an organization that the
+ * caller may view — the customer's own provider apps (Slack,
+ * Meta/WhatsApp) that agent channels can install through.
  *
  * Each row shows the app name, provider, the provider's non-secret app
  * identifier, and creation date. Secret fields never appear (they
@@ -49,6 +58,7 @@ export function ChannelAppListPanel({
   org,
   onEdit,
   onRefetchRef,
+  emptyState = "No channel apps registered yet.",
   className,
 }: ChannelAppListPanelProps) {
   const { channelApps, isLoading, error, refetch } = useChannelAppList(org);
@@ -87,7 +97,7 @@ export function ChannelAppListPanel({
           className,
         )}
       >
-        No channel apps registered yet.
+        {emptyState}
       </p>
     );
   }

package/src/channel-app/copy.ts

@@ -0,0 +1,16 @@
+/**
+ * Channel-app copy shared by more than one surface, so the settings section
+ * and anything else that lists an organization's channel apps say the same
+ * thing.
+ *
+ * A channel app carries its organization's Slack or Meta app secrets, so the
+ * model shows it to its creator, anyone granted viewer on it and the
+ * organization's admins, and plain members and viewers may not see it at all
+ * (stigmer/stigmer#1384). An empty list is therefore not evidence that none
+ * is registered, so a caller who may not create channel apps is told who
+ * manages them instead of being told that nothing exists.
+ */
+
+/** Shown in place of the empty state to a caller who may not create channel apps. */
+export const CHANNEL_APPS_MANAGED_BY_ADMINS =
+  "Channel apps are managed by your organization's admins.";

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). */