@stigmer/react 3.41.0 → 3.41.1-dev.20261003133619.g58ac1f23a411

package/src/invitation/InvitationRedemption.tsx

@@ -8,6 +8,7 @@ import { timestampDate } from "@bufbuild/protobuf/wkt";
 import { useInvitationPreview } from "./useInvitationPreview.js";
 import { useRedeemInvitation } from "./useRedeemInvitation.js";
 import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -141,13 +142,12 @@ export function InvitationRedemption({
   // Loading state
   if (isLoading) {
     return (
-      <div
+      <LoadingRegion
         className={cn("stg:mx-auto stg:max-w-sm", className)}
-        aria-busy="true"
-        aria-label="Loading invitation"
+        label="Loading invitation"
       >
         <LoadingSkeleton />
-      </div>
+      </LoadingRegion>
     );
   }
 
@@ -174,7 +174,7 @@ export function InvitationRedemption({
 
   // Redemption success
   if (accepted) {
-    const orgName = preview.organizationName || "the organization";
+    const orgName = preview.orgName || "the organization";
     const roleName = iamRoleDisplayName(preview.role);
     return (
       <div className={cn("stg:mx-auto stg:max-w-sm", className)}>
@@ -191,8 +191,8 @@ export function InvitationRedemption({
     );
   }
 
-  const orgName = preview.organizationName || "Unknown organization";
-  const orgLogo = preview.organizationLogoUrl;
+  const orgName = preview.orgName || "Unknown organization";
+  const orgLogo = preview.orgLogoUrl;
   const orgInitial = orgName.charAt(0).toUpperCase();
   const roleName = iamRoleDisplayName(preview.role);
   const expiresAt = preview.expiresAt ? timestampDate(preview.expiresAt) : null;

package/src/invitation/useInvitationPreview.ts

@@ -54,7 +54,7 @@ export interface UseInvitationPreviewReturn {
  * if (!preview) return <NotFound />;
  * if (!preview.isValid) return <Expired reason={preview.invalidReason} />;
  *
- * return <p>Join {preview.organizationName} as {preview.role}</p>;
+ * return <p>Join {preview.orgName} as {preview.role}</p>;
  * ```
  */
 export function useInvitationPreview(

package/src/licenses/LicenseDetail.tsx

@@ -116,8 +116,8 @@ export function LicenseDetail({
         <Row label="Customer">
           <span className="stg:block">{customer?.displayName}</span>
           <span className="stg:block stg:text-muted-foreground">{customer?.contactEmail}</span>
-          {customer?.organization && (
-            <span className="stg:block stg:text-muted-foreground">{`Cloud organization ${customer.organization}`}</span>
+          {customer?.org && (
+            <span className="stg:block stg:text-muted-foreground">{`Cloud organization ${customer.org}`}</span>
           )}
         </Row>
         <Row label="Term">{spec ? termLabel(spec.term) : "Unknown"}</Row>
@@ -140,8 +140,8 @@ export function LicenseDetail({
             {limits?.maxUsers !== undefined ? `${limits.maxUsers} users` : "Unlimited users"}
           </span>
           <span className="stg:block">
-            {limits?.maxOrganizations !== undefined
-              ? `${limits.maxOrganizations} organizations`
+            {limits?.maxOrgs !== undefined
+              ? `${limits.maxOrgs} organizations`
               : "Unlimited organizations"}
           </span>
         </Row>
@@ -157,10 +157,12 @@ export function LicenseDetail({
         <Row label="Issued">
           {issuedAt ? <Instant date={issuedAt}>{formatInstantUtc(issuedAt)}</Instant> : "Unknown"}
           {/* The audit names the account, not only its role-like display name:
-              with several operators, "who issued this contract" needs the address. */}
+              with several operators, "who issued this contract" needs the address.
+              An account with no name of its own is called by its email, so
+              the address is shown once. */}
           {issuer && (issuer.email || issuer.displayName) && (
             <span className="stg:block stg:text-muted-foreground">
-              {issuer.displayName && issuer.email
+              {issuer.displayName && issuer.email && issuer.displayName !== issuer.email
                 ? `by ${issuer.displayName} (${issuer.email})`
                 : `by ${issuer.displayName || issuer.email}`}
             </span>

package/src/licenses/LicenseIssueForm.tsx

@@ -87,7 +87,7 @@ const VIOLATION_COPY: Readonly<Record<string, string>> = {
   "spec.customer.display_name": "Name the customer.",
   "spec.customer.contact_email": "Enter the address renewal notices go to.",
   "spec.entitlements.limits.max_users": "Enter at least 1, or leave it empty for unlimited.",
-  "spec.entitlements.limits.max_organizations": "Enter at least 1, or leave it empty for unlimited.",
+  "spec.entitlements.limits.max_orgs": "Enter at least 1, or leave it empty for unlimited.",
   "spec.notes": "Notes are limited to 4,096 characters.",
 };
 
@@ -134,7 +134,7 @@ export function LicenseIssueForm({
   });
   const [maxUsers, setMaxUsers] = useState(limitText(renewing?.spec?.entitlements?.limits?.maxUsers));
   const [maxOrganizations, setMaxOrganizations] = useState(
-    limitText(renewing?.spec?.entitlements?.limits?.maxOrganizations),
+    limitText(renewing?.spec?.entitlements?.limits?.maxOrgs),
   );
   const [features, setFeatures] = useState<readonly GrantableFeature[]>(() =>
     (renewing?.spec?.entitlements?.features ?? []).filter(isGrantableFeature),
@@ -154,9 +154,9 @@ export function LicenseIssueForm({
           id: selected.customer.id,
           displayName: selected.customer.displayName,
           contactEmail: selected.customer.contactEmail,
-          organization: selected.customer.organization,
+          org: selected.customer.org,
         }
-      : { id: mintedId, displayName: newName, contactEmail: newEmail, organization: newOrganization };
+      : { id: mintedId, displayName: newName, contactEmail: newEmail, org: newOrganization };
   const matches =
     mode === "new" ? findCustomerMatches(customers, { displayName: newName, contactEmail: newEmail }) : [];
 
@@ -179,7 +179,7 @@ export function LicenseIssueForm({
       lastCoveredDay,
       graceDays: grace.value,
       maxUsers: users.value,
-      maxOrganizations: organizations.value,
+      maxOrgs: organizations.value,
       features,
       notes,
     };
@@ -473,7 +473,7 @@ export function LicenseIssueForm({
               message={shown(
                 maxOrganizations !== "",
                 organizations.ok
-                  ? violationAt("spec.entitlements.limits.max_organizations")
+                  ? violationAt("spec.entitlements.limits.max_orgs")
                   : organizations.error,
               )}
             />

package/src/licenses/license-draft.ts

@@ -65,7 +65,7 @@ export interface LicenseDraft {
   /** `undefined` means unlimited, as the contract reads an absent limit. */
   readonly maxUsers: number | undefined;
   /** `undefined` means unlimited, as the contract reads an absent limit. */
-  readonly maxOrganizations: number | undefined;
+  readonly maxOrgs: number | undefined;
   readonly features: readonly GrantableFeature[];
   /** Operator notes; never signed, never shown to the customer. */
   readonly notes: string;
@@ -148,9 +148,9 @@ export function toLicenseInput(draft: LicenseDraft): LicenseInput {
   const graceUntil = new Date(expiresAt.getTime() + draft.graceDays * DAY_MS);
   const limits: EntitlementLimitsInput = {
     ...(draft.maxUsers !== undefined && { maxUsers: draft.maxUsers }),
-    ...(draft.maxOrganizations !== undefined && { maxOrganizations: draft.maxOrganizations }),
+    ...(draft.maxOrgs !== undefined && { maxOrgs: draft.maxOrgs }),
   };
-  const organization = draft.customer.organization?.trim();
+  const organization = draft.customer.org?.trim();
   const notes = draft.notes.trim();
 
   return {
@@ -162,7 +162,7 @@ export function toLicenseInput(draft: LicenseDraft): LicenseInput {
       id: draft.customer.id,
       displayName: collapse(draft.customer.displayName),
       contactEmail: draft.customer.contactEmail.trim(),
-      ...(organization ? { organization } : {}),
+      ...(organization ? { org: organization } : {}),
     },
     entitlements: {
       ...(Object.keys(limits).length > 0 && { limits }),

package/src/licenses/license-format.ts

@@ -157,7 +157,7 @@ export function entitlementParts(entitlements: Entitlements | undefined): readon
   const features = entitlements?.features.filter(isGrantableFeature).length ?? 0;
   return [
     limitPart(limits?.maxUsers, "user"),
-    limitPart(limits?.maxOrganizations, "organization"),
+    limitPart(limits?.maxOrgs, "organization"),
     features === 0 ? "No features" : plural(features, "feature"),
   ];
 }

package/src/mcp-server/McpServerDetailView.tsx

@@ -50,6 +50,7 @@ import { InlineEditKeyValue } from "../inline-edit/InlineEditKeyValue.js";
 import type { KeyValueRow, SelectOption } from "../inline-edit/types.js";
 import { ManagedByPluginNotice } from "../plugin/ManagedByPluginNotice.js";
 import { useManagingPlugin } from "../plugin/useManagingPlugin.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 /** Tab identifier for the MCP server capability panel. */
 export type CapabilityTab = "tools" | "policies" | "resources";
@@ -2202,10 +2203,9 @@ function Dot() {
 
 function LoadingSkeleton({ className }: { readonly className?: string }) {
   return (
-    <div
+    <LoadingRegion
       className={cn("stg:flex stg:flex-col stg:gap-6", className)}
-      aria-busy="true"
-      aria-label="Loading MCP server details"
+      label="Loading MCP server details"
     >
       <div className="stg:flex stg:items-start stg:gap-3">
         <div className="stg:mt-1 stg:size-6 stg:shrink-0 stg:animate-pulse stg:rounded stg:bg-muted" />
@@ -2224,7 +2224,7 @@ function LoadingSkeleton({ className }: { readonly className?: string }) {
           />
         </div>
       ))}
-    </div>
+    </LoadingRegion>
   );
 }
 

package/src/memory/MemoryListPanel.tsx

@@ -14,6 +14,7 @@ import { useDeleteMemory } from "./useDeleteMemory.js";
 import { useMemories } from "./useMemories.js";
 import { useRejectMemory } from "./useRejectMemory.js";
 import { useUpdateMemoryContent } from "./useUpdateMemoryContent.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -71,10 +72,9 @@ export function MemoryListPanel({ org, className, now }: MemoryListPanelProps) {
 
   if (isLoading) {
     return (
-      <div
+      <LoadingRegion
         className={cn("stg:space-y-2", className)}
-        aria-busy="true"
-        aria-label="Loading memories"
+        label="Loading memories"
       >
         {Array.from({ length: 2 }, (_, i) => (
           <div
@@ -82,7 +82,7 @@ export function MemoryListPanel({ org, className, now }: MemoryListPanelProps) {
             className="stg:bg-muted-subtle stg:h-14 stg:animate-pulse stg:rounded-lg"
           />
         ))}
-      </div>
+      </LoadingRegion>
     );
   }
 

package/src/oauth-app/OAuthAppListPanel.tsx

@@ -7,6 +7,7 @@ import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type { OAuthApp } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/api_pb";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { useOAuthAppList } from "./useOAuthAppList.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -76,10 +77,9 @@ export function OAuthAppListPanel({
 
   if (isLoading) {
     return (
-      <div
+      <LoadingRegion
         className={cn("stg:space-y-2", className)}
-        aria-busy="true"
-        aria-label="Loading OAuth apps"
+        label="Loading OAuth apps"
       >
         {Array.from({ length: 2 }, (_, i) => (
           <div
@@ -87,7 +87,7 @@ export function OAuthAppListPanel({
             className="stg:bg-muted-subtle stg:h-14 stg:animate-pulse stg:rounded-lg"
           />
         ))}
-      </div>
+      </LoadingRegion>
     );
   }
 

package/src/organization/OrgPreferencesPanel.tsx

@@ -11,6 +11,7 @@ import { useServerInfo } from "../server-info.js";
 import { MemoryEnabledRow } from "../internal/MemoryEnabledRow.js";
 import { StandingContextField } from "../internal/StandingContextField.js";
 import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 /** The memory row's copy where each member's own switch must also be on. */
 const MEMBER_CONSENT_MEMORY_HELPER_TEXT =
@@ -23,7 +24,7 @@ const ORG_ALONE_MEMORY_HELPER_TEXT =
 /** Props for {@link OrgPreferencesPanel}. */
 export interface OrgPreferencesPanelProps {
   /** The ID of the organization whose preferences to display and edit. */
-  readonly orgId: string;
+  readonly org: string;
   /** Fired with the updated resource after a successful save. */
   readonly onUpdated?: (org: Organization) => void;
   /** Additional CSS class names for the root container. */
@@ -47,11 +48,11 @@ export interface OrgPreferencesPanelProps {
  *
  * @example
  * ```tsx
- * <OrgPreferencesPanel orgId="org-id-123" />
+ * <OrgPreferencesPanel org="org-id-123" />
  * ```
  */
 export function OrgPreferencesPanel({
-  orgId,
+  org,
   onUpdated,
   className,
 }: OrgPreferencesPanelProps) {
@@ -61,7 +62,7 @@ export function OrgPreferencesPanel({
     isLoading: isFetching,
     error: fetchError,
     refetch,
-  } = useOrganization(orgId || null);
+  } = useOrganization(org || null);
 
   const {
     update,
@@ -90,7 +91,7 @@ export function OrgPreferencesPanel({
   // Fail-open: OSS local mode has no IAM service, so editing stays
   // available there; cloud gets a genuine server verdict.
   const { allowed: canEdit } = useCheckPermission(
-    orgId ? { kind: "organization", id: orgId } : null,
+    org ? { kind: "organization", id: org } : null,
     "can_edit",
   );
 
@@ -177,14 +178,13 @@ export function OrgPreferencesPanel({
 
   if (isFetching && !organization) {
     return (
-      <div
+      <LoadingRegion
         className={cn("stg:space-y-4", className)}
-        aria-busy="true"
-        aria-label="Loading organization preferences"
+        label="Loading organization preferences"
       >
         <div className="stg:bg-muted-subtle stg:h-28 stg:animate-pulse stg:rounded" />
         <div className="stg:bg-muted-subtle stg:h-8 stg:w-32 stg:animate-pulse stg:rounded" />
-      </div>
+      </LoadingRegion>
     );
   }
 

package/src/organization/OrgProfilePanel.tsx

@@ -12,6 +12,7 @@ import { useResourceAvailable, ApiResourceKind } from "../deployment-mode.js";
 import { useCheckPermission } from "../iam-policy/useCheckPermission.js";
 import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 import { useCopyFeedback } from "../internal/useCopyFeedback.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -27,7 +28,7 @@ const LOGO_URL_MAX_LEN = 2048;
 /** Props for {@link OrgProfilePanel}. */
 export interface OrgProfilePanelProps {
   /** The ID of the organization to display and edit. */
-  readonly orgId: string;
+  readonly org: string;
   /** Fired with the updated resource after a successful save. */
   readonly onUpdated?: (org: Organization) => void;
   /** Additional CSS class names for the root container. */
@@ -48,13 +49,13 @@ export interface OrgProfilePanelProps {
  * @example
  * ```tsx
  * <OrgProfilePanel
- *   orgId="org-id-123"
+ *   org="org-id-123"
  *   onUpdated={(org) => console.log("Saved:", org.metadata?.name)}
  * />
  * ```
  */
 export function OrgProfilePanel({
-  orgId,
+  org,
   onUpdated,
   className,
 }: OrgProfilePanelProps) {
@@ -64,7 +65,7 @@ export function OrgProfilePanel({
     isLoading: isFetching,
     error: fetchError,
     refetch,
-  } = useOrganization(orgId || null);
+  } = useOrganization(org || null);
 
   const {
     update,
@@ -152,10 +153,9 @@ export function OrgProfilePanel({
 
   if (isFetching && !organization) {
     return (
-      <div
+      <LoadingRegion
         className={cn("stg:space-y-4", className)}
-        aria-busy="true"
-        aria-label="Loading organization profile"
+        label="Loading organization profile"
       >
         {Array.from({ length: 4 }, (_, i) => (
           <div
@@ -164,7 +164,7 @@ export function OrgProfilePanel({
             style={{ width: `${90 - i * 12}%` }}
           />
         ))}
-      </div>
+      </LoadingRegion>
     );
   }
 
@@ -342,7 +342,7 @@ export function OrgProfilePanel({
       </div>
 
       {/* -- Identity Providers summary -- */}
-      <IdentityProvidersSummary orgId={orgId} orgSlug={serverSlug} />
+      <IdentityProvidersSummary org={org} orgSlug={serverSlug} />
     </form>
   );
 }
@@ -357,10 +357,10 @@ export function OrgProfilePanel({
  * not create providers; otherwise it says who manages them.
  */
 function IdentityProvidersSummary({
-  orgId,
+  org,
   orgSlug,
 }: {
-  orgId: string;
+  org: string;
   orgSlug: string;
 }) {
   const idpAvailable = useResourceAvailable(ApiResourceKind.identity_provider);
@@ -368,7 +368,7 @@ function IdentityProvidersSummary({
     idpAvailable && orgSlug ? orgSlug : null,
   );
   const createCheck = useCheckPermission(
-    idpAvailable && orgId ? { kind: "organization", id: orgId } : null,
+    idpAvailable && org ? { kind: "organization", id: org } : null,
     "can_create_idp",
   );
   const deniedCreate = !createCheck.isLoading && !createCheck.allowed;

package/src/organization/index.ts

@@ -1,5 +1,6 @@
 export { OrgProvider, useOrg, useActiveOrgSlug, useActiveOrgId } from "./OrgProvider.js";
 export type { OrgContextValue } from "./OrgProvider.js";
+export { useFollowSessionOrganization } from "./useFollowSessionOrganization.js";
 export { useOrgGate } from "./useOrgGate.js";
 export type {
   UseOrgGateOptions,

package/src/organization/useFollowSessionOrganization.ts

@@ -0,0 +1,54 @@
+"use client";
+
+/**
+ * useFollowSessionOrganization: a session page's shell follows the session
+ * into its own organization (stigmer/stigmer#1580).
+ *
+ * Session URLs name no organization, so a link can open a conversation
+ * that belongs to an organization other than the active one. The session
+ * surface already acts in the session's organization (SessionViewer reads
+ * `session.metadata.org`); this hook makes the rest of the shell agree
+ * with it: when the loaded session's organization is one of the person's
+ * and is not the active one, it becomes the active one, so the
+ * organization menu, the sidebar and every host control keyed on the
+ * active organization name the conversation's.
+ *
+ * It aligns once per visit to a conversation, when that session and the
+ * organization list have both loaded. A choice the person makes while the
+ * conversation stays open stands, so the hook never fights the
+ * organization menu; opening a conversation again is a new visit, and it
+ * follows that conversation again, as a link to it would. A session in an organization
+ * the person does not belong to (a guest's view of a share) switches
+ * nothing. The switch goes through OrgProvider's `setActiveOrg`, the
+ * programmatic path: it persists the choice and clears the fetch cache
+ * like any switch, and it fires no host `onOrgChanged` navigation.
+ */
+import { useEffect, useRef } from "react";
+import type { Session } from "@stigmer/protos/ai/stigmer/agentic/session/v1/api_pb";
+
+import { useOrg } from "./OrgProvider.js";
+
+/**
+ * Makes the loaded session's organization the active one, once per visit
+ * to the conversation, when the person belongs to it.
+ *
+ * @param session - The session the page shows, or null while it loads.
+ */
+export function useFollowSessionOrganization(session: Session | null): void {
+  const { orgs, activeOrg, setActiveOrg, isLoading } = useOrg();
+  const followedSessionRef = useRef<string | null>(null);
+
+  const sessionId = session?.metadata?.id ?? "";
+  const sessionOrg = session?.metadata?.org ?? "";
+  const activeSlug = activeOrg?.metadata?.slug ?? "";
+
+  useEffect(() => {
+    if (sessionId === "" || sessionOrg === "" || isLoading || activeSlug === "")
+      return;
+    if (followedSessionRef.current === sessionId) return;
+    followedSessionRef.current = sessionId;
+    if (sessionOrg === activeSlug) return;
+    const target = orgs.find((org) => org.metadata?.slug === sessionOrg);
+    if (target !== undefined) setActiveOrg(target);
+  }, [sessionId, sessionOrg, activeSlug, isLoading, orgs, setActiveOrg]);
+}

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

@@ -81,7 +81,7 @@ export function planInputFromDraft(draft: PlanDraft): PlanDraftResult {
   }
   const managed = draft.features.includes(Feature.managed_organizations);
   let includedManagedOrganizations: number | undefined;
-  let perExtraOrganizationMicros: bigint | undefined;
+  let perExtraOrgMicros: bigint | undefined;
   if (managed && draft.includedManagedOrganizations.trim() !== "") {
     const included = Number(draft.includedManagedOrganizations.trim());
     if (!Number.isInteger(included) || included < 0) {
@@ -92,7 +92,7 @@ export function planInputFromDraft(draft: PlanDraft): PlanDraftResult {
     if (fee === null) {
       return { ok: false, field: "perExtraOrganizationUsd", message: "A dollar amount per organization, e.g. 25." };
     }
-    perExtraOrganizationMicros = fee;
+    perExtraOrgMicros = fee;
   }
   return {
     ok: true,
@@ -108,7 +108,7 @@ export function planInputFromDraft(draft: PlanDraft): PlanDraftResult {
       terms: {
         monthlyMinimumMicros: minimum,
         usageShareBasisPoints: share,
-        ...(perExtraOrganizationMicros === undefined ? {} : { perExtraOrganizationMicros }),
+        ...(perExtraOrgMicros === undefined ? {} : { perExtraOrgMicros }),
       },
     },
   };

package/src/platform-client/PlatformClientListPanel.tsx

@@ -13,6 +13,7 @@ import { usePlatformClientList } from "./usePlatformClientList.js";
 import { useDeletePlatformClient } from "./useDeletePlatformClient.js";
 import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 import { isPlatformClientExpired } from "./expiry.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 /** Props for {@link PlatformClientListPanel}. */
 export interface PlatformClientListPanelProps {
@@ -87,10 +88,9 @@ export function PlatformClientListPanel({
 
   if (isLoading) {
     return (
-      <div
+      <LoadingRegion
         className={cn("stg:space-y-2", className)}
-        aria-busy="true"
-        aria-label="Loading platform clients"
+        label="Loading platform clients"
       >
         {Array.from({ length: 2 }, (_, i) => (
           <div
@@ -98,7 +98,7 @@ export function PlatformClientListPanel({
             className="stg:bg-muted-subtle stg:h-14 stg:animate-pulse stg:rounded-lg"
           />
         ))}
-      </div>
+      </LoadingRegion>
     );
   }
 

package/src/plugin/PluginDetailView.tsx

@@ -49,6 +49,7 @@ import { PluginIcon } from "./PluginIcon.js";
 import { usePlugin } from "./usePlugin.js";
 import { usePluginMembers } from "./usePluginMembers.js";
 import { usePluginVersions } from "./usePluginVersions.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 const OVERVIEW_TAB: TabItem = { id: "overview", label: "Overview" };
 const VERSIONS_TAB: TabItem = { id: "versions", label: "Versions" };
@@ -526,7 +527,7 @@ function stateLabel(state: PluginState): string | undefined {
 
 function LoadingSkeleton({ className }: { readonly className?: string }) {
   return (
-    <div className={cn("stg:flex stg:flex-col stg:gap-6", className)} aria-busy="true" aria-label="Loading plugin details">
+    <LoadingRegion className={cn("stg:flex stg:flex-col stg:gap-6", className)} label="Loading plugin details">
       <div className="stg:flex stg:items-start stg:gap-3">
         <div className="stg:mt-1 stg:size-6 stg:shrink-0 stg:animate-pulse stg:rounded stg:bg-muted" />
         <div className="stg:flex-1 stg:space-y-2">
@@ -535,7 +536,7 @@ function LoadingSkeleton({ className }: { readonly className?: string }) {
         </div>
       </div>
       <div className="stg:h-24 stg:animate-pulse stg:rounded-lg stg:bg-muted" />
-    </div>
+    </LoadingRegion>
   );
 }
 

package/src/portal-container.ts

@@ -29,6 +29,14 @@ import { createContext, useContext } from "react";
  * - an `HTMLElement` (the mounted themed container): portaled content
  *   renders inside it and inherits the `--stgm-*` token scope.
  *
+ * One more source sets the value: an SDK modal dialog (`DialogShell`)
+ * re-provides it with an element inside the `<dialog>`, `null` until that
+ * element mounts. A modal dialog is in the browser's top layer and makes
+ * the rest of the document inert, so a popup portaled to `document.body`
+ * from inside it would paint beneath it and take no input (stigmer#1509).
+ * The element inherits the theme from the provider's in-tree scope, and
+ * carries no `data-stgm-portal` marker.
+ *
  * The default MUST stay `undefined`, never `null`: an explicit `null`
  * makes Base UI portals render NOWHERE, which breaks every popup for
  * consumers embedding components outside a provider (stigmer-cloud#271).

package/src/provider.tsx

@@ -285,7 +285,10 @@ const EMPTY_REVIEW_RENDERERS: ReviewRenderers = {};
  * Two stable selector hooks are part of the public contract:
  * `data-stgm-root` marks the in-tree container (and only it);
  * `data-stgm-portal` marks the portal container appended to
- * `document.body` for portaled surfaces.
+ * `document.body` for portaled surfaces. A popup opened inside an SDK
+ * modal dialog renders inside that dialog instead (the browser's top
+ * layer would otherwise cover it), so it is not under
+ * `[data-stgm-portal]`.
  *
  * The `colorMode` prop controls dark/light appearance via a
  * `data-stgm-color-mode` attribute on the scoping container.

package/src/public-base-url-context.ts

@@ -2,6 +2,7 @@
 
 import { createContext, useContext } from "react";
 import { useStigmer } from "./hooks.js";
+import { trimTrailing } from "./internal/trim.js";
 
 /**
  * React context for the server's public base URL: the address the Stigmer
@@ -50,7 +51,7 @@ export function resolvePublicBaseUrl(
 ): string | null {
   for (const candidate of [hostPublicBaseUrl, clientBaseUrl]) {
     if (candidate !== undefined && isAbsoluteUrl(candidate)) {
-      return candidate.replace(/\/+$/, "");
+      return trimTrailing(candidate, "/");
     }
   }
   return null;

package/src/schedule/ScheduleDetailView.tsx

@@ -78,6 +78,7 @@ import { useSetScheduleEnabled } from "./useSetScheduleEnabled.js";
 import { useTriggerSchedule } from "./useTriggerSchedule.js";
 import { useUpdateScheduleSpec } from "./useUpdateScheduleSpec.js";
 import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 /** Props for {@link ScheduleDetailView}. */
 export interface ScheduleDetailViewProps {
@@ -1552,10 +1553,9 @@ function ReferenceLink({
 
 function LoadingSkeleton({ className }: { readonly className?: string }) {
   return (
-    <div
+    <LoadingRegion
       className={cn("stg:flex stg:flex-col stg:gap-6", className)}
-      aria-busy="true"
-      aria-label="Loading schedule details"
+      label="Loading schedule details"
     >
       <div className="stg:flex stg:items-start stg:gap-3">
         <div className="stg:mt-1 stg:size-6 stg:shrink-0 stg:animate-pulse stg:rounded stg:bg-muted" />
@@ -1578,7 +1578,7 @@ function LoadingSkeleton({ className }: { readonly className?: string }) {
           style={{ height: "160px" }}
         />
       </div>
-    </div>
+    </LoadingRegion>
   );
 }