@stigmer/react 3.39.1-dev.20260928194002 → 3.40.1

package/settings/ChannelAppsSection.js

@@ -4,9 +4,11 @@ import { useCallback, useId, useRef, useState } from "react";
 import { ChannelAppListPanel } from "../channel-app/ChannelAppListPanel.js";
 import { CreateChannelAppForm, } from "../channel-app/CreateChannelAppForm.js";
 import { ChannelAppDetailPanel } from "../channel-app/ChannelAppDetailPanel.js";
+import { CHANNEL_APPS_MANAGED_BY_ADMINS } from "../channel-app/copy.js";
 import { useDeploymentMode } from "../deployment-mode.js";
+import { useCheckPermission } from "../iam-policy/useCheckPermission.js";
 import { CloudFeatureNotice } from "../internal/CloudFeatureNotice.js";
-import { useActiveOrgSlug } from "../organization/OrgProvider.js";
+import { useActiveOrgId, useActiveOrgSlug } from "../organization/OrgProvider.js";
 /**
  * Settings section for the organization's channel apps — customer-owned
  * provider apps (Slack apps, Meta WhatsApp apps) that agent channels
@@ -17,13 +19,24 @@ import { useActiveOrgSlug } from "../organization/OrgProvider.js";
  *
  * After registering an app here, the connect dialog on any agent's
  * Channels tab offers it as the serving app.
+ *
+ * "New channel app" is offered once the server confirms the caller holds
+ * `can_create_channel_app` on the organization. The list shows only the
+ * apps the caller may view (their creator, anyone granted viewer on one,
+ * and the organization's admins), so a caller who may not create channel
+ * apps is told that the organization's admins manage them rather than that
+ * none is registered.
  */
 export function ChannelAppsSection() {
     const headingId = useId();
     const org = useActiveOrgSlug();
+    const orgId = useActiveOrgId();
     // Channel installs (the consumer of these credentials) are cloud-only;
     // gate the whole section the way the Channels tab gates connects.
     const installsAvailable = useDeploymentMode() === "cloud";
+    const createCheck = useCheckPermission(installsAvailable && orgId ? { kind: "organization", id: orgId } : null, "can_create_channel_app");
+    const canCreate = !createCheck.isLoading && createCheck.allowed;
+    const deniedCreate = !createCheck.isLoading && !createCheck.allowed;
     const [flow, setFlow] = useState({ phase: "idle" });
     const listRefetchRef = useRef(null);
     const handleRefetchRef = useCallback((refetch) => {
@@ -44,6 +57,6 @@ export function ChannelAppsSection() {
         listRefetchRef.current?.();
         setFlow({ phase: "idle" });
     }, []);
-    return (_jsxs("section", { "aria-labelledby": headingId, children: [_jsxs("div", { className: "stg:mb-3 stg:flex stg:items-center stg:justify-between", children: [_jsx("h2", { id: headingId, className: "stg:text-foreground stg:text-sm stg:font-semibold", children: "Channel Apps" }), installsAvailable && org && flow.phase === "idle" && (_jsx("button", { type: "button", onClick: () => setFlow({ phase: "creating" }), className: "stg:text-primary stg:hover:text-foreground stg:text-xs stg:font-medium stg:transition-colors", children: "+ New channel app" }))] }), _jsx("p", { className: "stg:text-muted-foreground stg:mb-4 stg:text-xs", children: "Your own provider apps for serving agent channels. A Slack app gives the bot your name and icon, and lets multiple agents serve the same workspace \u2014 one per app. A Meta app is how WhatsApp channels connect \u2014 every WhatsApp channel installs through one." }), !installsAvailable ? (_jsx(CloudFeatureNotice, { children: "Channel apps are not available in local mode. Channel installs require Stigmer Cloud." })) : flow.phase === "creating" ? (_jsx("div", { className: "stg:border-border stg:bg-card stg:rounded-lg stg:border stg:p-4", children: _jsx(CreateChannelAppForm, { org: org, onCreated: handleCreated, onCancel: () => setFlow({ phase: "idle" }) }) })) : flow.phase === "editing" ? (_jsx("div", { className: "stg:border-border stg:bg-card stg:rounded-lg stg:border stg:p-4", children: _jsx(ChannelAppDetailPanel, { channelApp: flow.channelApp, createHandoff: flow.createHandoff, onUpdated: handleUpdated, onDeleted: handleDeleted, onBack: () => setFlow({ phase: "idle" }) }) })) : (_jsx(ChannelAppListPanel, { org: org, onEdit: (app) => setFlow({ phase: "editing", channelApp: app }), onRefetchRef: handleRefetchRef }))] }));
+    return (_jsxs("section", { "aria-labelledby": headingId, children: [_jsxs("div", { className: "stg:mb-3 stg:flex stg:items-center stg:justify-between", children: [_jsx("h2", { id: headingId, className: "stg:text-foreground stg:text-sm stg:font-semibold", children: "Channel Apps" }), installsAvailable && org && canCreate && flow.phase === "idle" && (_jsx("button", { type: "button", onClick: () => setFlow({ phase: "creating" }), className: "stg:text-primary stg:hover:text-foreground stg:text-xs stg:font-medium stg:transition-colors", children: "+ New channel app" }))] }), _jsx("p", { className: "stg:text-muted-foreground stg:mb-4 stg:text-xs", children: "Your own provider apps for serving agent channels. A Slack app gives the bot your name and icon, and lets multiple agents serve the same workspace \u2014 one per app. A Meta app is how WhatsApp channels connect \u2014 every WhatsApp channel installs through one." }), !installsAvailable ? (_jsx(CloudFeatureNotice, { children: "Channel apps are not available in local mode. Channel installs require Stigmer Cloud." })) : flow.phase === "creating" ? (_jsx("div", { className: "stg:border-border stg:bg-card stg:rounded-lg stg:border stg:p-4", children: _jsx(CreateChannelAppForm, { org: org, onCreated: handleCreated, onCancel: () => setFlow({ phase: "idle" }) }) })) : flow.phase === "editing" ? (_jsx("div", { className: "stg:border-border stg:bg-card stg:rounded-lg stg:border stg:p-4", children: _jsx(ChannelAppDetailPanel, { channelApp: flow.channelApp, createHandoff: flow.createHandoff, onUpdated: handleUpdated, onDeleted: handleDeleted, onBack: () => setFlow({ phase: "idle" }) }) })) : (_jsx(ChannelAppListPanel, { org: org, onEdit: (app) => setFlow({ phase: "editing", channelApp: app }), onRefetchRef: handleRefetchRef, emptyState: deniedCreate ? CHANNEL_APPS_MANAGED_BY_ADMINS : undefined }))] }));
 }
 //# sourceMappingURL=ChannelAppsSection.js.map

package/settings/ChannelAppsSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelAppsSection.js","sourceRoot":"","sources":["../src/settings/ChannelAppsSection.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChannelAppsSection.js","sourceRoot":"","sources":["../src/settings/ChannelAppsSection.tsx"],"names":[],"mappings":"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"}

package/settings/TeamsSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TeamsSection.d.ts","sourceRoot":"","sources":["../src/settings/TeamsSection.tsx"],"names":[],"mappings":"AA+BA,oDAAoD;AACpD,wBAAgB,YAAY,4CAgG3B"}
+{"version":3,"file":"TeamsSection.d.ts","sourceRoot":"","sources":["../src/settings/TeamsSection.tsx"],"names":[],"mappings":"AA2CA,oDAAoD;AACpD,wBAAgB,YAAY,4CAsG3B"}

package/settings/TeamsSection.js

@@ -12,9 +12,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * 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 { 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";
@@ -29,6 +41,11 @@ export function TeamsSection() {
     const teamsServed = useResourceAvailable(ApiResourceKind.team);
     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({ phase: "idle" });
@@ -44,6 +61,6 @@ export function TeamsSection() {
         refetch();
         setFlow({ phase: "idle" });
     }, [refetch]);
-    return (_jsxs("section", { "aria-labelledby": headingId, children: [_jsxs("div", { className: "stg:mb-3 stg:flex stg:items-center stg:justify-between", children: [_jsx("h2", { id: headingId, className: "stg:text-foreground stg:text-sm stg:font-semibold", children: "Teams" }), teamsServed && orgId && flow.phase === "idle" && (_jsx(PermissionGate, { resource: { kind: "organization", id: orgId }, relation: "can_create_team", children: _jsx("button", { type: "button", onClick: () => setFlow({ phase: "creating" }), className: "stg:text-primary stg:hover:text-foreground stg:text-xs stg:font-medium stg:transition-colors", children: "+ New team" }) }))] }), _jsx("p", { className: "stg:text-muted-foreground stg:mb-4 stg:text-xs", children: "Teams group people so agents, workflows and other resources can be shared with everyone in the team at once. Adding someone to a team gives them everything shared with it. Removing them from the team, or their leaving the organization, takes that access away." }), !teamsServed ? (_jsx(CloudFeatureNotice, { children: "Teams are available in Stigmer Enterprise and Cloud. This edition shares resources with people and with the whole organization." })) : !orgSlug ? (_jsx("p", { className: "stg:text-muted-foreground stg:py-4 stg:text-center stg:text-xs", children: "Select an organization to manage teams." })) : flow.phase === "creating" ? (_jsx("div", { className: "stg:border-border stg:bg-card stg:rounded-lg stg:border stg:p-4", children: _jsx(CreateTeamForm, { org: orgSlug, onCreated: handleCreated, onCancel: () => setFlow({ phase: "idle" }) }) })) : flow.phase === "viewing" ? (_jsx("div", { className: "stg:border-border stg:bg-card stg:rounded-lg stg:border stg:p-4", children: _jsx(TeamDetailPanel, { team: flow.team, orgId: orgId, onUpdated: handleUpdated, onDeleted: handleDeleted, onBack: () => setFlow({ phase: "idle" }) }, flow.team.metadata?.id) })) : (_jsx(TeamListPanel, { teams: list.teams, isLoading: list.isLoading, error: list.error, onOpen: (team) => setFlow({ phase: "viewing", team }) }))] }));
+    return (_jsxs("section", { "aria-labelledby": headingId, children: [_jsxs("div", { className: "stg:mb-3 stg:flex stg:items-center stg:justify-between", children: [_jsx("h2", { id: headingId, className: "stg:text-foreground stg:text-sm stg:font-semibold", children: "Teams" }), teamsServed && orgId && flow.phase === "idle" && !planLacksTeams && (_jsx(PermissionGate, { resource: { kind: "organization", id: orgId }, relation: "can_create_team", children: _jsx("button", { type: "button", onClick: () => setFlow({ phase: "creating" }), className: "stg:text-primary stg:hover:text-foreground stg:text-xs stg:font-medium stg:transition-colors", children: "+ New team" }) }))] }), _jsx("p", { className: "stg:text-muted-foreground stg:mb-4 stg:text-xs", children: "Teams group people so agents, workflows and other resources can be shared with everyone in the team at once. Adding someone to a team gives them everything shared with it. Removing them from the team, or their leaving the organization, takes that access away." }), teamsServed && orgId && planLacksTeams && _jsx(UpgradeNotice, { feature: Feature.teams, unlockingPlanName: unlockingPlanName, className: "stg:mb-3" }), !teamsServed ? (_jsx(CloudFeatureNotice, { children: "Teams are available in Stigmer Enterprise and Cloud. This edition shares resources with people and with the whole organization." })) : !orgSlug ? (_jsx("p", { className: "stg:text-muted-foreground stg:py-4 stg:text-center stg:text-xs", children: "Select an organization to manage teams." })) : flow.phase === "creating" ? (_jsx("div", { className: "stg:border-border stg:bg-card stg:rounded-lg stg:border stg:p-4", children: _jsx(CreateTeamForm, { org: orgSlug, onCreated: handleCreated, onCancel: () => setFlow({ phase: "idle" }) }) })) : flow.phase === "viewing" ? (_jsx("div", { className: "stg:border-border stg:bg-card stg:rounded-lg stg:border stg:p-4", children: _jsx(TeamDetailPanel, { team: flow.team, orgId: orgId, onUpdated: handleUpdated, onDeleted: handleDeleted, onBack: () => setFlow({ phase: "idle" }) }, flow.team.metadata?.id) })) : (_jsx(TeamListPanel, { teams: list.teams, isLoading: list.isLoading, error: list.error, onOpen: (team) => setFlow({ phase: "viewing", team }) }))] }));
 }
 //# sourceMappingURL=TeamsSection.js.map

package/settings/TeamsSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"TeamsSection.js","sourceRoot":"","sources":["../src/settings/TeamsSection.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TeamsSection.js","sourceRoot":"","sources":["../src/settings/TeamsSection.tsx"],"names":[],"mappings":"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"}

package/settings/settings-nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-nav.d.ts","sourceRoot":"","sources":["../src/settings/settings-nav.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAuB3C,sDAAsD;AACtD,MAAM,WAAW,eAAe;IAC9B,yCAAyC;IACzC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,oDAAoD;IACpD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,wDAAwD;IACxD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;QAC3B,mDAAmD;QACnD,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;IACH;;;;;;OAMG;IACH,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CACtC;AAED,kEAAkE;AAClE,MAAM,WAAW,gBAAgB;IAC/B,sDAAsD;IACtD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,gDAAgD;IAChD,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,yCAAyC;IACzC,QAAQ,CAAC,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;CAC5C;AAED,2DAA2D;AAC3D,eAAO,MAAM,mBAAmB,EAAE,SAAS,gBAAgB,EA8D1D,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,2BAA2B,EAAE,gBA8BzC,CAAC"}
+{"version":3,"file":"settings-nav.d.ts","sourceRoot":"","sources":["../src/settings/settings-nav.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAwB3C,sDAAsD;AACtD,MAAM,WAAW,eAAe;IAC9B,yCAAyC;IACzC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,oDAAoD;IACpD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,wDAAwD;IACxD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;QAC3B,mDAAmD;QACnD,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;IACH;;;;;;OAMG;IACH,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CACtC;AAED,kEAAkE;AAClE,MAAM,WAAW,gBAAgB;IAC/B,sDAAsD;IACtD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,gDAAgD;IAChD,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,yCAAyC;IACzC,QAAQ,CAAC,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;CAC5C;AAED,2DAA2D;AAC3D,eAAO,MAAM,mBAAmB,EAAE,SAAS,gBAAgB,EA8D1D,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,2BAA2B,EAAE,gBAoCzC,CAAC"}

package/settings/settings-nav.js

@@ -1,4 +1,4 @@
-import { Activity, AppWindow, BarChart3, Box, Brain, Building2, CreditCard, FileBadge, KeyRound, Link, MessageSquare, MousePointerClick, Plug, Scale, ShieldCheck, SlidersHorizontal, UserCog, Users, UsersRound, } from "lucide-react";
+import { Activity, AppWindow, BarChart3, Box, Brain, Building2, CreditCard, FileBadge, Layers, KeyRound, Link, MessageSquare, MousePointerClick, Plug, Scale, ShieldCheck, SlidersHorizontal, UserCog, Users, UsersRound, } from "lucide-react";
 /** Canonical settings sidebar/grouped navigation model. */
 export const SETTINGS_NAV_GROUPS = [
     {
@@ -102,6 +102,12 @@ export const PLATFORM_SETTINGS_NAV_GROUP = {
             icon: FileBadge,
             requiredPermission: "can_issue_license",
         },
+        {
+            href: "/settings/plans",
+            label: "Plans",
+            icon: Layers,
+            requiredPermission: "can_manage_plans",
+        },
     ],
 };
 //# sourceMappingURL=settings-nav.js.map

package/settings/settings-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings-nav.js","sourceRoot":"","sources":["../src/settings/settings-nav.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"settings-nav.js","sourceRoot":"","sources":["../src/settings/settings-nav.ts"],"names":[],"mappings":"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"}

package/settings/useSettingsNavGroups.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSettingsNavGroups.d.ts","sourceRoot":"","sources":["../src/settings/useSettingsNavGroups.ts"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,mBAAmB,CAAC;AAS3B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,oBAAoB,IAAI,SAAS,gBAAgB,EAAE,CAmDlE"}
+{"version":3,"file":"useSettingsNavGroups.d.ts","sourceRoot":"","sources":["../src/settings/useSettingsNavGroups.ts"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,mBAAmB,CAAC;AAS3B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,oBAAoB,IAAI,SAAS,gBAAgB,EAAE,CA0DlE"}

package/settings/useSettingsNavGroups.js

@@ -39,16 +39,19 @@ export function useSettingsNavGroups() {
     const cursorAccounts = useCheckPermission(PLATFORM_RESOURCE, "can_manage_cursor_accounts", { fail: "closed" });
     const providerStanding = useCheckPermission(PLATFORM_RESOURCE, "can_view_provider_standing", { fail: "closed" });
     const licenses = useCheckPermission(PLATFORM_RESOURCE, "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 = {
             can_manage_model_pricing: pricingAllowed,
             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(
         // Fail closed on both axes: an item with no declared permission or
@@ -62,6 +65,6 @@ export function useSettingsNavGroups() {
             ...SETTINGS_NAV_GROUPS,
             { ...PLATFORM_SETTINGS_NAV_GROUP, items: visibleItems },
         ];
-    }, [pricingAllowed, cursorAccountsAllowed, providerStandingAllowed, licensesAllowed]);
+    }, [pricingAllowed, cursorAccountsAllowed, providerStandingAllowed, licensesAllowed, plansAllowed]);
 }
 //# sourceMappingURL=useSettingsNavGroups.js.map

package/settings/useSettingsNavGroups.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSettingsNavGroups.js","sourceRoot":"","sources":["../src/settings/useSettingsNavGroups.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EACL,2BAA2B,EAC3B,mBAAmB,GAEpB,MAAM,mBAAmB,CAAC;AAE3B;;;;GAIG;AACH,MAAM,iBAAiB,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAW,CAAC;AAEvE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,oBAAoB;IAClC,MAAM,OAAO,GAAG,kBAAkB,CAChC,iBAAiB,EACjB,0BAA0B,EAC1B,EAAE,IAAI,EAAE,QAAQ,EAAE,CACnB,CAAC;IACF,MAAM,cAAc,GAAG,kBAAkB,CACvC,iBAAiB,EACjB,4BAA4B,EAC5B,EAAE,IAAI,EAAE,QAAQ,EAAE,CACnB,CAAC;IACF,MAAM,gBAAgB,GAAG,kBAAkB,CACzC,iBAAiB,EACjB,4BAA4B,EAC5B,EAAE,IAAI,EAAE,QAAQ,EAAE,CACnB,CAAC;IACF,MAAM,QAAQ,GAAG,kBAAkB,CACjC,iBAAiB,EACjB,mBAAmB,EACnB,EAAE,IAAI,EAAE,QAAQ,EAAE,CACnB,CAAC;IAEF,MAAM,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC;IACvC,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,CAAC;IACrD,MAAM,uBAAuB,GAAG,gBAAgB,CAAC,OAAO,CAAC;IACzD,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC;IAEzC,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,MAAM,QAAQ,GAA4B;YACxC,wBAAwB,EAAE,cAAc;YACxC,0BAA0B,EAAE,qBAAqB;YACjD,0BAA0B,EAAE,uBAAuB;YACnD,iBAAiB,EAAE,eAAe;SACnC,CAAC;QAEF,MAAM,YAAY,GAAG,2BAA2B,CAAC,KAAK,CAAC,MAAM;QAC3D,mEAAmE;QACnE,+DAA+D;QAC/D,CAAC,IAAI,EAAE,EAAE,CACP,IAAI,CAAC,kBAAkB,KAAK,SAAS;YACrC,QAAQ,CAAC,IAAI,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAC7C,CAAC;QAEF,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC9B,OAAO,mBAAmB,CAAC;QAC7B,CAAC;QACD,OAAO;YACL,GAAG,mBAAmB;YACtB,EAAE,GAAG,2BAA2B,EAAE,KAAK,EAAE,YAAY,EAAE;SACxD,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,eAAe,CAAC,CAAC,CAAC;AACxF,CAAC"}
+{"version":3,"file":"useSettingsNavGroups.js","sourceRoot":"","sources":["../src/settings/useSettingsNavGroups.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EACL,2BAA2B,EAC3B,mBAAmB,GAEpB,MAAM,mBAAmB,CAAC;AAE3B;;;;GAIG;AACH,MAAM,iBAAiB,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAW,CAAC;AAEvE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,oBAAoB;IAClC,MAAM,OAAO,GAAG,kBAAkB,CAChC,iBAAiB,EACjB,0BAA0B,EAC1B,EAAE,IAAI,EAAE,QAAQ,EAAE,CACnB,CAAC;IACF,MAAM,cAAc,GAAG,kBAAkB,CACvC,iBAAiB,EACjB,4BAA4B,EAC5B,EAAE,IAAI,EAAE,QAAQ,EAAE,CACnB,CAAC;IACF,MAAM,gBAAgB,GAAG,kBAAkB,CACzC,iBAAiB,EACjB,4BAA4B,EAC5B,EAAE,IAAI,EAAE,QAAQ,EAAE,CACnB,CAAC;IACF,MAAM,QAAQ,GAAG,kBAAkB,CACjC,iBAAiB,EACjB,mBAAmB,EACnB,EAAE,IAAI,EAAE,QAAQ,EAAE,CACnB,CAAC;IACF,MAAM,KAAK,GAAG,kBAAkB,CAC9B,iBAAiB,EACjB,kBAAkB,EAClB,EAAE,IAAI,EAAE,QAAQ,EAAE,CACnB,CAAC;IAEF,MAAM,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC;IACvC,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,CAAC;IACrD,MAAM,uBAAuB,GAAG,gBAAgB,CAAC,OAAO,CAAC;IACzD,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC;IACzC,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;IAEnC,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,MAAM,QAAQ,GAA4B;YACxC,wBAAwB,EAAE,cAAc;YACxC,0BAA0B,EAAE,qBAAqB;YACjD,0BAA0B,EAAE,uBAAuB;YACnD,iBAAiB,EAAE,eAAe;YAClC,gBAAgB,EAAE,YAAY;SAC/B,CAAC;QAEF,MAAM,YAAY,GAAG,2BAA2B,CAAC,KAAK,CAAC,MAAM;QAC3D,mEAAmE;QACnE,+DAA+D;QAC/D,CAAC,IAAI,EAAE,EAAE,CACP,IAAI,CAAC,kBAAkB,KAAK,SAAS;YACrC,QAAQ,CAAC,IAAI,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAC7C,CAAC;QAEF,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC9B,OAAO,mBAAmB,CAAC;QAC7B,CAAC;QACD,OAAO;YACL,GAAG,mBAAmB;YACtB,EAAE,GAAG,2BAA2B,EAAE,KAAK,EAAE,YAAY,EAAE;SACxD,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC;AACtG,CAAC"}

package/src/billing/AutoRechargeCard.tsx

@@ -161,8 +161,8 @@ export function AutoRechargeCard({
 
       {!hasPaymentMethod && (
         <p className="stg:mt-3 stg:text-xs stg:text-muted-foreground">
-          A saved payment method is required to enable auto-recharge.
-          Purchase a credit pack first to save a card.
+          A saved payment method is required to enable auto-recharge. Add
+          one under Payment Method.
         </p>
       )}
 

package/src/billing/BillingSection.tsx

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

package/src/billing/ChangePlanDialog.tsx

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