@stigmer/react 3.40.1 → 3.41.1-dev.20261003094357.g39d6aa748646

package/src/provider.tsx

@@ -15,6 +15,7 @@ import { StigmerContext } from "./context.js";
 import { DeploymentModeContext } from "./deployment-mode.js";
 import { ExecutionTargetContext } from "./execution-target-context.js";
 import { ApprovalDefaultsContext } from "./approval-defaults-context.js";
+import { PublicBaseUrlContext } from "./public-base-url-context.js";
 import type { ApprovalDefaults } from "./approval-defaults-context.js";
 import type { ExecutionTargetOption } from "./session/execution-target.js";
 import type { RunnerAdapter } from "./runner-adapter.js";
@@ -121,6 +122,32 @@ export interface StigmerProviderProps {
    * ```
    */
   readonly approvalDefaults?: ApprovalDefaults;
+  /**
+   * The address the Stigmer API is reached at from outside this page, for
+   * the URLs the SDK shows a user to copy (the Slack and WhatsApp webhook
+   * URLs a channel app registers, and the platform client snippet in the
+   * Share dialog). A session's MCP servers get their
+   * `STIGMER_SERVER_ADDRESS` from the platform, never from this value.
+   *
+   * Omit it when the client's `baseUrl` is absolute: that address is used,
+   * exactly as before. Pass it when the client talks to the server through
+   * a relative `baseUrl` (a same-origin proxy), because the page's own
+   * origin need not be where Slack, Meta, a backend or a remote MCP server
+   * can reach the API. Without it, the copy surfaces say they do not know
+   * the server's public address and offer nothing to copy. Only an
+   * absolute `http(s)` URL is used.
+   *
+   * @example
+   * ```tsx
+   * // The browser reaches the API through the page's own origin
+   * const client = new Stigmer({ baseUrl: "/", getAccessToken });
+   *
+   * <StigmerProvider client={client} publicBaseUrl="https://api.example.com">
+   *   <App />
+   * </StigmerProvider>
+   * ```
+   */
+  readonly publicBaseUrl?: string;
   /**
    * Built-in theme preset to apply.
    *
@@ -258,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.
@@ -288,6 +318,7 @@ export function StigmerProvider({
   executionTarget,
   runnerAdapter,
   approvalDefaults,
+  publicBaseUrl,
   preset,
   className,
   colorMode = "light",
@@ -310,32 +341,34 @@ export function StigmerProvider({
         <ExecutionTargetContext.Provider value={executionTarget}>
           <ApprovalDefaultsContext.Provider value={approvalDefaults}>
             <RunnerAdapterContext.Provider value={runnerAdapter ?? null}>
-              <ColorModeContext.Provider value={resolvedMode}>
-                <ModelRegistryContext.Provider value={registryState}>
-                  <TaskKindRegistryContext.Provider value={taskKindRegistryState}>
-                    <ReviewRendererContext.Provider value={reviewRenderers ?? EMPTY_REVIEW_RENDERERS}>
-                      <PortalContainerContext.Provider value={portalContainer}>
-                        {/*
-                          The in-tree scoping container. `data-stgm-root` is a
-                          stable public selector — the documented seam for hosts
-                          to style THIS element only (e.g. the fixed-height
-                          embedding recipe, #260). It must never be mirrored
-                          onto the portal container, whose own `data-stgm-portal`
-                          marker keeps host in-tree-only CSS away from the
-                          off-tree element.
-                        */}
-                        <div
-                          className={scope.className}
-                          data-stgm-root=""
-                          data-stgm-color-mode={scope.colorMode}
-                        >
-                          {children}
-                        </div>
-                      </PortalContainerContext.Provider>
-                    </ReviewRendererContext.Provider>
-                  </TaskKindRegistryContext.Provider>
-                </ModelRegistryContext.Provider>
-              </ColorModeContext.Provider>
+              <PublicBaseUrlContext.Provider value={publicBaseUrl}>
+                <ColorModeContext.Provider value={resolvedMode}>
+                  <ModelRegistryContext.Provider value={registryState}>
+                    <TaskKindRegistryContext.Provider value={taskKindRegistryState}>
+                      <ReviewRendererContext.Provider value={reviewRenderers ?? EMPTY_REVIEW_RENDERERS}>
+                        <PortalContainerContext.Provider value={portalContainer}>
+                          {/*
+                            The in-tree scoping container. `data-stgm-root` is a
+                            stable public selector — the documented seam for hosts
+                            to style THIS element only (e.g. the fixed-height
+                            embedding recipe, #260). It must never be mirrored
+                            onto the portal container, whose own `data-stgm-portal`
+                            marker keeps host in-tree-only CSS away from the
+                            off-tree element.
+                          */}
+                          <div
+                            className={scope.className}
+                            data-stgm-root=""
+                            data-stgm-color-mode={scope.colorMode}
+                          >
+                            {children}
+                          </div>
+                        </PortalContainerContext.Provider>
+                      </ReviewRendererContext.Provider>
+                    </TaskKindRegistryContext.Provider>
+                  </ModelRegistryContext.Provider>
+                </ColorModeContext.Provider>
+              </PublicBaseUrlContext.Provider>
             </RunnerAdapterContext.Provider>
           </ApprovalDefaultsContext.Provider>
         </ExecutionTargetContext.Provider>

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

@@ -0,0 +1,71 @@
+"use client";
+
+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
+ * API is reached at from outside the page, supplied by the host through
+ * `StigmerProvider`'s `publicBaseUrl`.
+ *
+ * Separated from the provider to mirror the `ExecutionTargetContext`
+ * pattern and avoid circular imports.
+ *
+ * `undefined` means the host named no public address; the client's own
+ * `baseUrl` then stands in when it is absolute.
+ */
+export const PublicBaseUrlContext = createContext<string | undefined>(
+  undefined,
+);
+
+/**
+ * The server's public base URL for URLs the SDK shows a user to copy (a
+ * webhook URL pasted into Slack or Meta, a platform client snippet run by
+ * a backend), or `null` when it cannot be known.
+ *
+ * The host owns public addresses, and the SDK never guesses one (the
+ * `buildShareUrl` precedent in `ShareAgentDialog`): the provider's
+ * `publicBaseUrl` wins, the client's `baseUrl` stands in for it, and only
+ * an absolute `http(s)` URL counts. A relative `baseUrl` (a same-origin
+ * proxy, the documentation tours) with no `publicBaseUrl` answers `null`,
+ * because the page's own origin need not be where the API is reached from
+ * outside; the surface then says the address is unknown instead of offering
+ * one nobody can call. A `publicBaseUrl` that is not absolute is a host
+ * mistake and counts for nothing. Trailing slashes are trimmed.
+ */
+export function usePublicBaseUrl(): string | null {
+  const hostPublicBaseUrl = useContext(PublicBaseUrlContext);
+  const { baseUrl } = useStigmer();
+  return resolvePublicBaseUrl(hostPublicBaseUrl, baseUrl);
+}
+
+/**
+ * The pure rule behind {@link usePublicBaseUrl}: the first of the host's
+ * public base URL and the client's base URL that is an absolute `http(s)` URL,
+ * trailing slashes trimmed, or `null` when neither is.
+ */
+export function resolvePublicBaseUrl(
+  hostPublicBaseUrl: string | undefined,
+  clientBaseUrl: string,
+): string | null {
+  for (const candidate of [hostPublicBaseUrl, clientBaseUrl]) {
+    if (candidate !== undefined && isAbsoluteUrl(candidate)) {
+      return trimTrailing(candidate, "/");
+    }
+  }
+  return null;
+}
+
+/**
+ * Whether `value` is an absolute `http(s)` URL. The protocol check matters:
+ * `new URL("localhost:7234")` parses, with `localhost:` as its scheme.
+ */
+function isAbsoluteUrl(value: string): boolean {
+  try {
+    const { protocol } = new URL(value);
+    return protocol === "http:" || protocol === "https:";
+  } catch {
+    return false;
+  }
+}

package/src/resource-workbench/components/SelectionCheckbox.tsx

@@ -43,7 +43,7 @@ export function SelectionCheckbox({
       onChange={(e) => onChange(e.target.checked)}
       aria-label={ariaLabel}
       className={cn(
-        "stg:size-3.5 stg:shrink-0 stg:cursor-pointer stg:rounded stg:border stg:border-input stg:accent-primary",
+        "stg:size-3.5 stg:shrink-0 stg:cursor-pointer stg:rounded stg:border stg:border-input",
         "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:ring-offset-1",
         className,
       )}

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>
   );
 }
 

package/src/session/SessionViewer.tsx

@@ -144,7 +144,12 @@ const CONVERSATION_COLUMN_CLASS = "stg:mx-auto stg:w-full stg:max-w-3xl";
 export interface SessionViewerProps {
   /** Session ID to load and display. */
   readonly sessionId: string;
-  /** Organization slug. */
+  /**
+   * Organization slug to act in until the session has loaded. After that
+   * the viewer acts in the session's own organization (`session.metadata.org`),
+   * whatever this prop says: a turn in a session belongs to that session's
+   * organization.
+   */
   readonly org: string;
   /**
    * GitHub connection state. Platform-specific — web passes
@@ -384,7 +389,7 @@ export interface SessionViewerProps {
  */
 export function SessionViewer({
   sessionId,
-  org,
+  org: orgProp,
   gitHubConnection,
   enableGitHub = true,
   enableLocal = false,
@@ -410,13 +415,18 @@ export function SessionViewer({
 }: SessionViewerProps) {
   const flow = useSessionPageFlow({
     sessionId,
-    org,
+    org: orgProp,
     getRuntimeEnv,
     audience,
     runConfig,
     accountDefaults,
   });
   const { conv } = flow;
+  // Everything org-scoped below acts in the session's own organization once
+  // it has loaded (the pickers, artifacts, plan actions and the reply), so a
+  // session opened while another organization is active never files its
+  // turns there (stigmer/stigmer#1580).
+  const org = conv.org;
   const isGuest = audience === "guest";
   // A pinned model makes the picker a dead control (the pin wins over any
   // choice it could offer), so the pin forces it hidden; the guest strip

package/src/session/useLocalSessionWorker.ts

@@ -3,6 +3,7 @@
 import { useEffect, useMemo } from "react";
 import type { Session } from "@stigmer/protos/ai/stigmer/agentic/session/v1/api_pb";
 import { ExecutionTarget } from "@stigmer/protos/ai/stigmer/agentic/session/v1/enum_pb";
+import { useWhoAmI } from "../iam-policy/useWhoAmI.js";
 import { useRunnerAdapter } from "../runner-adapter.js";
 import { useExecutionTarget } from "../execution-target-context.js";
 import { fromProtoExecutionTarget } from "./execution-target.js";
@@ -25,12 +26,28 @@ import { fromProtoExecutionTarget } from "./execution-target.js";
  * free. It is a no-op unless a `runnerAdapter` is configured **and** the
  * session resolves to local execution (cloud sessions are server-provisioned).
  *
- * The effect depends only on stable primitives (`adapter`, `sessionId`, and
- * the derived `effectiveTarget` string) and **never on the `session` object**.
+ * **Only the session's own person serves it.** Anyone a session is shared
+ * with can open it, and every desktop that attached would poll the same
+ * queue, each turn going to whichever worker asks first. A server with
+ * sign-in credentials a local session's runner for the person who created
+ * the session, so another viewer's desktop would take turns it cannot run
+ * (or, where it could, run someone else's turn on its own machine). The
+ * worker is therefore kept off exactly when the signed-in account is known
+ * and is not the session's creator — the creator stamp read the two ways
+ * the server reads it, as the account id and as the account's identity
+ * provider subject. Every other case attaches as before: while the account
+ * is loading the attach waits (as it waits for the session), and when there
+ * is no account (a single-user server answers `whoAmI` NOT_FOUND, and every
+ * session there is its operator's) the desktop serves the session.
+ *
+ * The effect depends only on stable primitives (`adapter`, `sessionId`, the
+ * derived `effectiveTarget` string and the derived `servesHere` flag) and
+ * **never on the `session` object**.
  * `useSessionConversation` refetches the session frequently; keying the effect
  * on the object would tear down and restart the worker on every refetch
  * (DD-010 / reference-stability). `executionTarget` is immutable after the
- * first execution, so the derived string stays stable across refetches.
+ * first execution, and a session's creator never changes, so both derived
+ * values stay stable across refetches.
  *
  * @param sessionId - The session being viewed, or `null` to skip.
  * @param session - The loaded session, or `null` while loading. The worker is
@@ -43,6 +60,7 @@ export function useLocalSessionWorker(
 ): void {
   const adapter = useRunnerAdapter();
   const contextTarget = useExecutionTarget();
+  const { account, isLoading: accountLoading } = useWhoAmI();
 
   // Resolve the session's effective execution target as a stable primitive.
   // `undefined` until the session loads — so we never attach a local worker
@@ -59,8 +77,21 @@ export function useLocalSessionWorker(
     );
   }, [isLoaded, specTarget, contextTarget]);
 
+  // Whether this viewer's desktop may serve the session, as a stable
+  // primitive: `undefined` while the account is loading, `true` when there
+  // is no account to compare or the account is the session's creator.
+  const creatorStamp = session?.status?.audit?.specAudit?.createdBy?.id ?? "";
+  const accountId = account?.metadata?.id ?? "";
+  const accountSubject = account?.spec?.idpId ?? "";
+  const servesHere = useMemo(() => {
+    if (accountLoading) return undefined;
+    if (accountId === "" || creatorStamp === "") return true;
+    return creatorStamp === accountId || creatorStamp === accountSubject;
+  }, [accountLoading, accountId, accountSubject, creatorStamp]);
+
   useEffect(() => {
     if (!adapter || !sessionId || effectiveTarget !== "local") return;
+    if (servesHere !== true) return;
 
     // Fire-and-forget: a runner-start failure must not crash the session view.
     // The host adapter's add/remove are idempotent, so React's cleanup-driven
@@ -69,5 +100,5 @@ export function useLocalSessionWorker(
     return () => {
       adapter.onSessionClosed(sessionId).catch(() => {});
     };
-  }, [adapter, sessionId, effectiveTarget]);
+  }, [adapter, sessionId, effectiveTarget, servesHere]);
 }

package/src/session/useSessionConversation.ts

@@ -161,6 +161,15 @@ export interface SendFollowUpOptions {
 export interface UseSessionConversationReturn {
   /** The session object, or null while loading. */
   readonly session: Session | null;
+  /**
+   * The organization this conversation's turns are filed under: the
+   * session's own (`session.metadata.org`) once it has loaded, the `org`
+   * argument until then. A turn in a session belongs to that session's
+   * organization, and the server refuses any other (stigmer/stigmer#1580),
+   * so every org-scoped control of a session surface reads this value
+   * rather than the caller's active organization.
+   */
+  readonly org: string;
   /**
    * Executions in terminal phases, in chronological order.
    *
@@ -373,7 +382,7 @@ export interface UseSessionConversationReturn {
  * locally, so it is safe in every environment.
  *
  * @param sessionId - Session to display and converse in. Pass `null` to skip.
- * @param org - Organization slug for creating follow-up executions.
+ * @param org - Organization slug to act in until the session has loaded; after that the session's own organization is used (the returned `org`).
  *
  * @example
  * ```tsx
@@ -433,6 +442,7 @@ export function useSessionConversation(
     clearError: clearCreateError,
   } = useCreateAgentExecution();
   const { update: updateSession } = useUpdateSession();
+  const turnOrg = session?.metadata?.org || org;
   const {
     submitApproval: rawSubmitApproval,
     submittingToolCallIds,
@@ -667,7 +677,7 @@ export function useSessionConversation(
         }
 
         const result = await create({
-          org,
+          org: turnOrg,
           sessionId,
           message,
           modelName: options?.modelName,
@@ -698,7 +708,7 @@ export function useSessionConversation(
         }
       }
     },
-    [sessionId, session, org, stigmer, create, updateSession, refetch, refetchSession],
+    [sessionId, session, turnOrg, stigmer, create, updateSession, refetch, refetchSession],
   );
 
   const retryLastSend = useCallback(() => {
@@ -763,6 +773,7 @@ export function useSessionConversation(
 
   return {
     session,
+    org: turnOrg,
     completedExecutions,
     activeStreamExecution,
     activePhase,

package/src/settings/ChannelAppsSection.tsx

@@ -41,10 +41,10 @@ type FlowState =
  *
  * "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.
+ * apps the caller may view (the organization's admins, and anyone granted
+ * viewer on an app), 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();

package/src/settings/EnvironmentsSection.tsx

@@ -7,6 +7,7 @@ import { EnvironmentVariableEditor } from "../environment/EnvironmentVariableEdi
 import { EnvironmentListPanel } from "../environment/EnvironmentListPanel.js";
 import { CreateEnvironmentForm } from "../environment/CreateEnvironmentForm.js";
 import { useActiveOrgSlug } from "../organization/OrgProvider.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 const ENV_EXCLUDE_LABELS: Record<string, string>[] = [
   { "stigmer.ai/personal": "true" },
@@ -152,7 +153,7 @@ function EnvironmentsCard({ org }: { org: string }) {
 
 function SkeletonRows({ count }: { count: number }) {
   return (
-    <div className="stg:space-y-2" aria-busy="true" aria-label="Loading">
+    <LoadingRegion className="stg:space-y-2" label="Loading">
       {Array.from({ length: count }, (_, i) => (
         <div
           key={i}
@@ -160,6 +161,6 @@ function SkeletonRows({ count }: { count: number }) {
           style={{ width: `${85 - i * 10}%` }}
         />
       ))}
-    </div>
+    </LoadingRegion>
   );
 }

package/src/settings/MembersSection.tsx

@@ -24,7 +24,7 @@ export function MembersSection() {
     ApiResourceKind.invitation,
   );
   const idpAvailable = useResourceAvailable(ApiResourceKind.identity_provider);
-  const orgId = activeOrg?.metadata?.id ?? "";
+  const org = activeOrg?.metadata?.id ?? "";
   const orgSlug = activeOrg?.metadata?.slug ?? "";
 
   const { identityProviders } = useIdentityProviderList(
@@ -57,7 +57,7 @@ export function MembersSection() {
         )}
       </p>
 
-      {!orgId ? (
+      {!org ? (
         <p className="stg:text-muted-foreground stg:py-4 stg:text-center stg:text-xs">
           Select an organization to manage members.
         </p>
@@ -72,7 +72,7 @@ export function MembersSection() {
               </p>
             </div>
           )}
-          <OrgMembersPanel orgId={orgId} />
+          <OrgMembersPanel org={org} />
         </>
       )}
     </section>

package/src/settings/OrgPreferencesSection.tsx

@@ -28,7 +28,7 @@ export function OrgPreferencesSection() {
           Select an organization to view its preferences.
         </p>
       ) : (
-        <OrgPreferencesPanel orgId={orgId} />
+        <OrgPreferencesPanel org={orgId} />
       )}
     </section>
   );

package/src/settings/OrgProfileSection.tsx

@@ -35,7 +35,7 @@ export function OrgProfileSection() {
           Select an organization to view its profile.
         </p>
       ) : (
-        <OrgProfilePanel orgId={orgId} onUpdated={handleUpdated} />
+        <OrgProfilePanel org={orgId} onUpdated={handleUpdated} />
       )}
     </section>
   );

package/src/settings/ProviderKeysSection.tsx

@@ -0,0 +1,4 @@
+"use client";
+
+export { ProviderKeysSection } from "../billing/ProviderKeysSection.js";
+export type { ProviderKeysSectionProps } from "../billing/ProviderKeysSection.js";

package/src/settings/TeamsSection.tsx

@@ -128,7 +128,7 @@ export function TeamsSection() {
           <TeamDetailPanel
             key={flow.team.metadata?.id}
             team={flow.team}
-            orgId={orgId}
+            org={orgId}
             onUpdated={handleUpdated}
             onDeleted={handleDeleted}
             onBack={() => setFlow({ phase: "idle" })}

package/src/settings/UsageSection.tsx

@@ -28,7 +28,7 @@ export function UsageSection() {
           Select an organization to view usage.
         </p>
       ) : (
-        <OrgUsagePanel orgId={orgId} />
+        <OrgUsagePanel org={orgId} />
       )}
     </section>
   );

package/src/settings/index.ts

@@ -22,3 +22,5 @@ export { TeamsSection } from "./TeamsSection.js";
 export { OAuthAppsSection } from "./OAuthAppsSection.js";
 export { ChannelAppsSection } from "./ChannelAppsSection.js";
 export { UsageSection } from "./UsageSection.js";
+export { ProviderKeysSection } from "./ProviderKeysSection.js";
+export type { ProviderKeysSectionProps } from "./ProviderKeysSection.js";

package/src/settings/settings-nav.ts

@@ -10,6 +10,7 @@ import {
   FileBadge,
   Layers,
   KeyRound,
+  KeySquare,
   Link,
   MessageSquare,
   MousePointerClick,
@@ -102,6 +103,7 @@ export const SETTINGS_NAV_GROUPS: readonly SettingsNavGroup[] = [
     items: [
       { href: "/settings/billing", label: "Billing", icon: CreditCard },
       { href: "/settings/usage", label: "Usage", icon: BarChart3 },
+      { href: "/settings/provider-keys", label: "Provider keys", icon: KeySquare },
     ],
   },
   {

package/src/sharing/ShareAgentDialog.tsx

@@ -23,7 +23,8 @@ import { ApiResourceMetadataSchema } from "@stigmer/protos/ai/stigmer/commons/ap
 import { Switch } from "../switch/Switch.js";
 import { Tabs, type TabItem } from "../tabs/Tabs.js";
 import { toast } from "../feedback/toast.js";
-import { useStigmer } from "../hooks.js";
+import { usePublicBaseUrl } from "../public-base-url-context.js";
+import { UnknownPublicAddressNotice } from "../internal/UnknownPublicAddressNotice.js";
 import { useCopyResource } from "../resource-detail/useCopyResource.js";
 import { useDeploymentMode } from "../deployment-mode.js";
 import { useBillingAccount } from "../billing/useBillingAccount.js";
@@ -40,6 +41,7 @@ import {
 } from "./useSaveAgentShare.js";
 import { useRotateShareLink } from "./useRotateShareLink.js";
 import { useShareToolReadiness } from "./useShareToolReadiness.js";
+import { trimTrailing } from "../internal/trim.js";
 
 /** Maximum length of each visitor message (proto: `string.max_len = 300`). */
 const MAX_MESSAGE_LENGTH = 300;
@@ -1510,17 +1512,17 @@ function MessageField({
 
 /**
  * The platform client snippet, aimed at the server the console is connected
- * to (`stigmer.baseUrl`) — a self-hosted admin copies code for their own
- * server, not Stigmer Cloud. The base URL is normalised as the channel-app
- * webhook URLs normalise it, and JSON-quoted so the line is always a valid
- * string literal.
+ * to — a self-hosted admin copies code for their own server, not Stigmer
+ * Cloud. `apiBaseUrl` is the server's public base URL (`usePublicBaseUrl`),
+ * the address the channel-app webhook URLs are built from too, JSON-quoted
+ * so the line is always a valid string literal.
  */
 function buildDeveloperSnippet(
   apiBaseUrl: string,
   org: string,
   slug: string,
 ): string {
-  const baseUrl = JSON.stringify(apiBaseUrl.replace(/\/+$/, ""));
+  const baseUrl = JSON.stringify(trimTrailing(apiBaseUrl, "/"));
   return [
     `import { createPlatformClientAuth } from "@stigmer/sdk/node";`,
     ``,
@@ -1544,10 +1546,14 @@ function DeveloperTab({
   readonly org: string;
   readonly slug: string;
 }) {
-  const stigmer = useStigmer();
+  const publicBaseUrl = usePublicBaseUrl();
+  // `null` while the server's public address is unknown: the field says so.
   const snippet = useMemo(
-    () => buildDeveloperSnippet(stigmer.baseUrl, org, slug),
-    [stigmer.baseUrl, org, slug],
+    () =>
+      publicBaseUrl === null
+        ? null
+        : buildDeveloperSnippet(publicBaseUrl, org, slug),
+    [publicBaseUrl, org, slug],
   );
 
   return (
@@ -1557,12 +1563,23 @@ function DeveloperTab({
         integrate this agent with the Stigmer SDK — the same runtime, full
         control.
       </p>
-      <CopyField
-        label="Platform client integration"
-        value={snippet}
-        copyLabel="Code"
-        multiline
-      />
+      {snippet !== null ? (
+        <CopyField
+          label="Platform client integration"
+          value={snippet}
+          copyLabel="Code"
+          multiline
+        />
+      ) : (
+        <section>
+          <h3 className="stg:text-xs stg:font-medium stg:text-muted-foreground">
+            Platform client integration
+          </h3>
+          <div className="stg:mt-1.5">
+            <UnknownPublicAddressNotice subject="the integration code" />
+          </div>
+        </section>
+      )}
       <a
         href={PLATFORM_CLIENT_DOCS_URL}
         target="_blank"