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

package/src/billing/useCreateBillingPortalSession.ts

@@ -15,7 +15,7 @@ export interface UseCreateBillingPortalSessionReturn {
    * portal returns to `redirect.returnUrl` when given, else to the page
    * the person is on.
    */
-  readonly openPortal: (orgId: string) => Promise<void>;
+  readonly openPortal: (org: string) => Promise<void>;
   /** `true` while the portal session is being created. */
   readonly isLoading: boolean;
   /** Error from the last failed attempt, or `null` when healthy. */
@@ -36,7 +36,7 @@ export interface UseCreateBillingPortalSessionReturn {
  * ```tsx
  * const { openPortal, isLoading } = useCreateBillingPortalSession();
  *
- * <button onClick={() => openPortal(orgId)} disabled={isLoading}>
+ * <button onClick={() => openPortal(org)} disabled={isLoading}>
  *   Manage payment methods
  * </button>
  * ```
@@ -53,7 +53,7 @@ export function useCreateBillingPortalSession(
   const clearError = useCallback(() => setError(null), []);
 
   const openPortal = useCallback(
-    async (orgId: string): Promise<void> => {
+    async (org: string): Promise<void> => {
       setIsLoading(true);
       setError(null);
 
@@ -66,7 +66,7 @@ export function useCreateBillingPortalSession(
               : "";
 
         const response = await stigmer.billing.createBillingPortalSession({
-          orgId,
+          org,
           returnUrl,
         });
 

package/src/billing/useCreateCheckoutSession.ts

@@ -9,7 +9,7 @@ import { leaveForStripe, type BillingRedirect } from "./redirect.js";
 /** Parameters for {@link useCreateCheckoutSession}'s `createSession` callback. */
 export interface CreateCheckoutSessionInput {
   /** Organization purchasing credits. */
-  readonly orgId: string;
+  readonly org: string;
   /** Credit pack to purchase: its id, e.g. "starter", "growth" or "team" (the pack named Scale). */
   readonly packId: string;
   /** URL to redirect to after successful payment. */
@@ -54,7 +54,7 @@ export interface UseCreateCheckoutSessionReturn {
  *
  * const handleBuy = () => {
  *   createSession({
- *     orgId,
+ *     org,
  *     packId: "growth",
  *     successUrl: `${window.location.origin}/settings/billing?checkout=success`,
  *     cancelUrl: `${window.location.origin}/settings/billing`,
@@ -81,7 +81,7 @@ export function useCreateCheckoutSession(
 
       try {
         const response = await stigmer.billing.createCreditCheckoutSession({
-          orgId: input.orgId,
+          org: input.org,
           packId: input.packId,
           successUrl: input.successUrl,
           cancelUrl: input.cancelUrl,

package/src/billing/useCreatePaymentMethodSetupSession.ts

@@ -14,7 +14,7 @@ export interface UseCreatePaymentMethodSetupSessionReturn {
    * page can reopen that choice), or without a query when they leave.
    * The saved card becomes the organization's default for every invoice.
    */
-  readonly addPaymentMethod: (orgId: string, planId?: string) => Promise<void>;
+  readonly addPaymentMethod: (org: string, planId?: string) => Promise<void>;
   /** `true` while the setup session is being created. */
   readonly isSubmitting: boolean;
   /** Error from the last failed attempt, or `null` when healthy. */
@@ -41,7 +41,7 @@ export function useCreatePaymentMethodSetupSession(
   const [error, setError] = useState<Error | null>(null);
 
   const addPaymentMethod = useCallback(
-    async (orgId: string, planId?: string): Promise<void> => {
+    async (org: string, planId?: string): Promise<void> => {
       setIsSubmitting(true);
       setError(null);
       try {
@@ -51,7 +51,7 @@ export function useCreatePaymentMethodSetupSession(
           success.set("plan", planId);
         }
         const response = await stigmer.billing.createPaymentMethodSetupSession({
-          orgId,
+          org,
           successUrl: `${billingPage}?${success.toString()}`,
           cancelUrl: billingPage,
         });

package/src/billing/useCreditLedger.ts

@@ -48,14 +48,14 @@ export interface UseCreditLedgerOptions {
  * filtering. Returns the entries and total page count for building
  * pagination controls.
  *
- * Pass `null` as `orgId` to skip fetching (stable no-op).
+ * Pass `null` as `org` to skip fetching (stable no-op).
  *
- * @param orgId - Organization ID, or `null` to skip.
+ * @param org - Organization ID, or `null` to skip.
  * @param options - Pagination and filter options.
  *
  * @example
  * ```tsx
- * const { ledger, isLoading } = useCreditLedger(orgId, { pageNum: 1 });
+ * const { ledger, isLoading } = useCreditLedger(org, { pageNum: 1 });
  *
  * if (isLoading) return <Skeleton />;
  * if (!ledger) return null;
@@ -64,7 +64,7 @@ export interface UseCreditLedgerOptions {
  * ```
  */
 export function useCreditLedger(
-  orgId: string | null,
+  org: string | null,
   options: UseCreditLedgerOptions = {},
 ): UseCreditLedgerReturn {
   const stigmer = useStigmer();
@@ -73,10 +73,10 @@ export function useCreditLedger(
   const typeFilterKey = typeFilter?.join(",") ?? "";
 
   const { data: ledger, isLoading, isRefetching, error, refetch } = useFetch(
-    orgId
+    org
       ? () =>
           stigmer.billing.getCreditLedger({
-            orgId,
+            org,
             // The SDK page number is 0-based (matches the proto/backend); the
             // hook's pageNum is 1-based for ergonomic UI controls.
             page: { num: pageNum - 1, size: pageSize },
@@ -84,7 +84,7 @@ export function useCreditLedger(
             view,
           })
       : null,
-    [orgId, pageNum, pageSize, typeFilterKey, view, stigmer],
+    [org, pageNum, pageSize, typeFilterKey, view, stigmer],
     null as CreditLedgerResponse | null,
   );
 

package/src/billing/useCustomerModelPricing.ts

@@ -27,15 +27,15 @@ export interface UseCustomerModelPricingReturn {
  * billing policy markup already applied, organized by harness
  * and cost tier.
  *
- * Pass `null` as `orgId` to skip fetching (stable no-op).
+ * Pass `null` as `org` to skip fetching (stable no-op).
  * Pass `undefined` to fetch default pricing (no org override).
  *
- * @param orgId - Organization ID for org-specific overrides,
+ * @param org - Organization ID for org-specific overrides,
  *   `undefined` for default pricing, or `null` to skip.
  *
  * @example
  * ```tsx
- * const { pricing, isLoading } = useCustomerModelPricing(orgId);
+ * const { pricing, isLoading } = useCustomerModelPricing(org);
  *
  * if (isLoading) return <Skeleton />;
  * if (!pricing) return null;
@@ -46,20 +46,20 @@ export interface UseCustomerModelPricingReturn {
  * ```
  */
 export function useCustomerModelPricing(
-  orgId: string | undefined | null,
+  org: string | undefined | null,
 ): UseCustomerModelPricingReturn {
   const stigmer = useStigmer();
 
-  const skip = orgId === null;
+  const skip = org === null;
 
   const { data: pricing, isLoading, isRefetching, error, refetch } = useFetch(
     skip
       ? null
       : () =>
           stigmer.billing.getCustomerModelPricing(
-            orgId ? { orgId } : undefined,
+            org ? { org } : undefined,
           ),
-    [orgId, stigmer],
+    [org, stigmer],
     null as CustomerModelPricingResponse | null,
   );
 

package/src/billing/useEntitlements.ts

@@ -50,19 +50,19 @@ export interface UseEntitlementsReturn {
  *
  * @example
  * ```tsx
- * const { allows } = useEntitlements(orgId);
+ * const { allows } = useEntitlements(org);
  * if (allows(Feature.teams) === false) return <UpgradeNotice feature={Feature.teams} />;
  * ```
  */
 export function useEntitlements(
-  orgId: string | null,
+  org: string | null,
   options?: UseEntitlementsOptions,
 ): UseEntitlementsReturn {
   const stigmer = useStigmer();
-  const enabled = (options?.enabled ?? true) && orgId !== null && orgId !== "";
+  const enabled = (options?.enabled ?? true) && org !== null && org !== "";
   const { data: entitlements, isLoading, error, refetch } = useFetch(
-    enabled && orgId ? () => stigmer.subscription.getEntitlements(create(GetEntitlementsInputSchema, { orgId })) : null,
-    [enabled, orgId, stigmer],
+    enabled && org ? () => stigmer.subscription.getEntitlements(create(GetEntitlementsInputSchema, { org })) : null,
+    [enabled, org, stigmer],
     null as GetEntitlementsOutput | null,
     { refetchOnWindowFocus: true },
   );

package/src/billing/usePeriodEstimate.ts

@@ -44,14 +44,14 @@ export interface UsePeriodEstimateReturn {
  * Cloud-only; the caller needs `can_view_billing` on the organization.
  */
 export function usePeriodEstimate(
-  orgId: string | null,
+  org: string | null,
   options?: UsePeriodEstimateOptions,
 ): UsePeriodEstimateReturn {
   const stigmer = useStigmer();
-  const enabled = (options?.enabled ?? true) && orgId !== null && orgId !== "";
+  const enabled = (options?.enabled ?? true) && org !== null && org !== "";
   const { data: estimate, isLoading, error, refetch } = useFetch(
-    enabled && orgId ? () => stigmer.subscription.getPeriodEstimate(create(GetPeriodEstimateInputSchema, { orgId })) : null,
-    [enabled, orgId, stigmer],
+    enabled && org ? () => stigmer.subscription.getPeriodEstimate(create(GetPeriodEstimateInputSchema, { org })) : null,
+    [enabled, org, stigmer],
     null as PeriodEstimate | null,
     { refetchOnWindowFocus: true },
   );

package/src/billing/useProviderKeys.ts

@@ -0,0 +1,129 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import { create } from "@bufbuild/protobuf";
+import type { ProviderKey } from "@stigmer/protos/ai/stigmer/billing/providerkey/v1/api_pb";
+import {
+  DeleteProviderKeyInputSchema,
+  ListProviderKeysInputSchema,
+  SetProviderKeyInputSchema,
+} from "@stigmer/protos/ai/stigmer/billing/providerkey/v1/io_pb";
+import { useStigmer } from "../hooks.js";
+import { toError } from "../internal/toError.js";
+import { useFetch } from "../internal/useFetch.js";
+
+/** The providers an organization may bring its own key for, by their wire names. */
+export type ProviderKeyProvider = "anthropic" | "openai";
+
+/** Options for {@link useProviderKeys}. */
+export interface UseProviderKeysOptions {
+  /** Skip fetching while `false` (stable no-op). Default `true`. */
+  readonly enabled?: boolean;
+}
+
+/** Return value of {@link useProviderKeys}. */
+export interface UseProviderKeysReturn {
+  /**
+   * The keys that serve the organization, its own and any it inherits from
+   * its integrator, without their secrets; `null` before the first
+   * successful fetch.
+   */
+  readonly keys: readonly ProviderKey[] | null;
+  /** `true` while the initial fetch is in flight. */
+  readonly isLoading: boolean;
+  /** Error from the last failed request, or `null` when healthy. */
+  readonly error: Error | null;
+  /** Discard cached data and re-fetch from the server. */
+  readonly refetch: () => void;
+}
+
+/**
+ * Data hook that lists an organization's own LLM provider keys.
+ *
+ * No answer carries a key: each row names the provider, the key's last
+ * four characters, who saved it and when, when it last served a call, and
+ * whether the organization's plan still lets it be used. A managed
+ * organization's list includes its integrator's keys for the providers it
+ * holds none of (`inheritedFromOrg`). Every member may read it
+ * (`can_view_billing`).
+ *
+ * Cloud-only.
+ *
+ * @example
+ * ```tsx
+ * const { keys } = useProviderKeys(org);
+ * ```
+ */
+export function useProviderKeys(org: string | null, options?: UseProviderKeysOptions): UseProviderKeysReturn {
+  const stigmer = useStigmer();
+  const enabled = (options?.enabled ?? true) && org !== null && org !== "";
+  const { data, isLoading, error, refetch } = useFetch(
+    enabled && org ? () => stigmer.providerkey.list(create(ListProviderKeysInputSchema, { org })) : null,
+    [enabled, org, stigmer],
+    null as { readonly keys: readonly ProviderKey[] } | null,
+  );
+  const keys = data?.keys ?? null;
+  return useMemo(() => ({ keys, isLoading, error, refetch }), [keys, isLoading, error, refetch]);
+}
+
+/** Return value of {@link useProviderKeyActions}. */
+export interface UseProviderKeyActionsReturn {
+  /**
+   * Save the organization's key for a provider, replacing any it holds.
+   * The provider is asked about the key once first, and a key it rejects is
+   * refused. Refused with the `PLAN_UPGRADE_REQUIRED` reason when the
+   * organization's plan does not include bring-your-own provider keys.
+   * Resolves with the saved key, without its secret.
+   */
+  readonly setKey: (org: string, provider: ProviderKeyProvider, apiKey: string) => Promise<ProviderKey>;
+  /** Remove the organization's key for a provider; allowed on every plan. */
+  readonly removeKey: (org: string, provider: ProviderKeyProvider) => Promise<ProviderKey>;
+  /** `true` while a save or a removal is in flight. */
+  readonly isSubmitting: boolean;
+  /** Error from the last failed attempt, or `null` when healthy. */
+  readonly error: Error | null;
+  /** Reset `error` to `null`. */
+  readonly clearError: () => void;
+}
+
+/**
+ * Behaviour hook that saves and removes an organization's own provider
+ * keys. The caller needs `can_manage_billing` on the organization (its
+ * admins). Refetch {@link useProviderKeys} after a change.
+ */
+export function useProviderKeyActions(): UseProviderKeyActionsReturn {
+  const stigmer = useStigmer();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const run = useCallback(async (call: () => Promise<ProviderKey>): Promise<ProviderKey> => {
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      return await call();
+    } catch (e) {
+      const err = toError(e);
+      setError(err);
+      throw err;
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, []);
+
+  const setKey = useCallback(
+    (org: string, provider: ProviderKeyProvider, apiKey: string) =>
+      run(() => stigmer.providerkey.set(create(SetProviderKeyInputSchema, { org, provider, apiKey }))),
+    [run, stigmer.providerkey],
+  );
+  const removeKey = useCallback(
+    (org: string, provider: ProviderKeyProvider) =>
+      run(() => stigmer.providerkey.delete(create(DeleteProviderKeyInputSchema, { org, provider }))),
+    [run, stigmer.providerkey],
+  );
+  const clearError = useCallback(() => setError(null), []);
+
+  return useMemo(
+    () => ({ setKey, removeKey, isSubmitting, error, clearError }),
+    [setKey, removeKey, isSubmitting, error, clearError],
+  );
+}

package/src/billing/useSetAutoRechargeConfig.ts

@@ -8,7 +8,7 @@ import type { BillingAccount } from "@stigmer/protos/ai/stigmer/billing/v1/billi
 /** Input for {@link useSetAutoRechargeConfig}. */
 export interface SetAutoRechargeConfigInput {
   /** Organization ID to configure auto-recharge for. */
-  readonly orgId: string;
+  readonly org: string;
   /** Whether auto-recharge is enabled. */
   readonly enabled: boolean;
   /** Trigger threshold in micro-USD. */
@@ -46,7 +46,7 @@ export interface UseSetAutoRechargeConfigReturn {
  * const { setConfig, isSubmitting, error } = useSetAutoRechargeConfig();
  *
  * await setConfig({
- *   orgId,
+ *   org,
  *   enabled: true,
  *   thresholdMicros: BigInt(5_000_000),
  *   rechargeAmountMicros: BigInt(50_000_000),
@@ -68,7 +68,7 @@ export function useSetAutoRechargeConfig(): UseSetAutoRechargeConfigReturn {
 
       try {
         const account = await stigmer.billing.setAutoRechargeConfig({
-          orgId: input.orgId,
+          org: input.org,
           enabled: input.enabled,
           thresholdMicros: input.thresholdMicros,
           rechargeAmountMicros: input.rechargeAmountMicros,

package/src/billing/useSubscription.ts

@@ -4,7 +4,7 @@ import { useMemo } from "react";
 import { create } from "@bufbuild/protobuf";
 import { isNotFound } from "@stigmer/sdk";
 import type { Subscription } from "@stigmer/protos/ai/stigmer/billing/subscription/v1/api_pb";
-import { GetSubscriptionForOrganizationInputSchema } from "@stigmer/protos/ai/stigmer/billing/subscription/v1/io_pb";
+import { GetSubscriptionForOrgInputSchema } from "@stigmer/protos/ai/stigmer/billing/subscription/v1/io_pb";
 import { useStigmer } from "../hooks.js";
 import { useFetch } from "../internal/useFetch.js";
 
@@ -34,7 +34,7 @@ export interface UseSubscriptionReturn {
  * this hook reads that as `null`, because never subscribed is a state (the
  * Free plan), not a failure.
  *
- * Pass `null` as `orgId` to skip fetching. Refetches when the window
+ * Pass `null` as `org` to skip fetching. Refetches when the window
  * regains focus, so a plan changed in another window, or a card saved in
  * the system browser, shows on return.
  *
@@ -42,16 +42,16 @@ export interface UseSubscriptionReturn {
  *
  * @example
  * ```tsx
- * const { subscription } = useSubscription(orgId);
+ * const { subscription } = useSubscription(org);
  * ```
  */
-export function useSubscription(orgId: string | null): UseSubscriptionReturn {
+export function useSubscription(org: string | null): UseSubscriptionReturn {
   const stigmer = useStigmer();
   const { data: subscription, isLoading, isRefetching, error, refetch } = useFetch(
-    orgId
+    org
       ? () =>
           stigmer.subscription
-            .getForOrganization(create(GetSubscriptionForOrganizationInputSchema, { orgId }))
+            .getForOrg(create(GetSubscriptionForOrgInputSchema, { org }))
             .catch((err: unknown) => {
               if (isNotFound(err)) {
                 return null;
@@ -59,7 +59,7 @@ export function useSubscription(orgId: string | null): UseSubscriptionReturn {
               throw err;
             })
       : null,
-    [orgId, stigmer],
+    [org, stigmer],
     null as Subscription | null,
     { refetchOnWindowFocus: true },
   );

package/src/channel/AgentChannelsPanel.tsx

@@ -119,19 +119,21 @@ export function AgentChannelsPanel({
   // label worth showing.
   const { channelApps } = useChannelAppList(agent.metadata?.org || null);
 
-  // Mirrors the server's create bar (agent can_edit — the permission the
-  // create/apply handlers enforce on the referenced agent) so the connect
-  // affordance never appears to a viewer whose create would be refused.
+  // Mirrors the server's create bar (agent can_manage_audience — the
+  // permission the create/apply handlers enforce on the referenced agent:
+  // a channel puts the agent in front of a wider audience, the owner's
+  // decision, not an editor's) so the connect affordance never appears to
+  // someone whose create would be refused.
   const { allowed: canCreate } = useCheckPermission(
     agentId ? { kind: "agent", id: agentId } : null,
-    "can_edit",
+    "can_manage_audience",
   );
 
-  // Installs go through the shared platform Slack/WhatsApp apps, a
-  // cloud-only facility (editions program, DD-001); CRUD is not. Outside
-  // Cloud the cards render and toggles work, but connect affordances give
-  // way to the notice. Installs through a customer's own ChannelApp in
-  // Enterprise are that edition's work, not assumed here.
+  // Installs need a channel delivery runtime, and only Stigmer Cloud
+  // composes one today; CRUD needs none. Outside Cloud the cards render and
+  // toggles work, but connect affordances give way to the notice. When a
+  // self-hosted edition composes a runtime, this becomes a probe of that
+  // runtime rather than an edition compare.
   const installsAvailable = useDeploymentMode() === "cloud";
 
   const { deleteChannel } = useDeleteAgentChannel();

package/src/channel/connect/ServingAppSection.tsx

@@ -175,7 +175,7 @@ function ServingAppOption({
         checked={checked}
         onChange={onSelect}
         disabled={disabled}
-        className="stg:mt-0.5 stg:accent-current"
+        className="stg:mt-0.5"
       />
       <span className="stg:min-w-0">
         <span className="stg:block stg:text-xs stg:font-medium stg:text-foreground">{label}</span>

package/src/channel-app/ChannelAppDetailPanel.tsx

@@ -4,7 +4,7 @@ import { type FormEvent, useCallback, useId, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage, toChannelAppUpdateInput } from "@stigmer/sdk";
 import type { ChannelApp } from "@stigmer/protos/ai/stigmer/agentic/channelapp/v1/api_pb";
-import { useStigmer } from "../hooks.js";
+import { usePublicBaseUrl } from "../public-base-url-context.js";
 import { useUpdateChannelApp } from "./useUpdateChannelApp.js";
 import { useDeleteChannelApp } from "./useDeleteChannelApp.js";
 import type { ChannelAppCreateHandoff } from "./CreateChannelAppForm.js";
@@ -17,7 +17,7 @@ import {
   WHATSAPP_CHANNEL_APP_WEBHOOK_FIELDS,
   whatsappChannelAppWebhookUrl,
 } from "./whatsappAppSetup.js";
-import { CopyBlock, CopyRow, FormField } from "./internal.js";
+import { CopyBlock, CopyRow, FormField, UnknownAddressRow } from "./internal.js";
 import { PermissionGate } from "../iam-policy/PermissionGate.js";
 import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
@@ -70,8 +70,8 @@ export interface ChannelAppDetailPanelProps {
  *
  * The credentials form is offered to a caller who may edit the app
  * (`can_edit`) and the deletion section to one who may delete it
- * (`can_delete`): its creator and the organization's admins. Someone
- * granted viewer on an app sees its setup values with no actions.
+ * (`can_delete`): the organization's admins. Someone granted viewer on an
+ * app sees its setup values with no actions.
  */
 export function ChannelAppDetailPanel({
   channelApp,
@@ -200,7 +200,7 @@ function SlackAppDetail({
   readonly onUpdated?: (app: ChannelApp) => void;
 }) {
   const baseId = useId();
-  const stigmer = useStigmer();
+  const publicBaseUrl = usePublicBaseUrl();
   const { update, isUpdating, error: updateError, clearError } = useUpdateChannelApp();
 
   const slack = channelApp.spec?.providerConfig?.case === "slack"
@@ -214,9 +214,14 @@ function SlackAppDetail({
   const appId = channelApp.metadata?.id ?? "";
   const name = channelApp.metadata?.name ?? "";
 
+  // `undefined` while the server's public address is unknown: the row
+  // says so, and the manifest leaves out its event subscriptions.
   const webhookUrl = useMemo(
-    () => slackChannelAppWebhookUrl(stigmer.baseUrl, appId),
-    [stigmer.baseUrl, appId],
+    () =>
+      publicBaseUrl === null
+        ? undefined
+        : slackChannelAppWebhookUrl(publicBaseUrl, appId),
+    [publicBaseUrl, appId],
   );
   const redirectUrl = useMemo(
     () => slackChannelAppRedirectUrl(consoleOrigin),
@@ -271,11 +276,15 @@ function SlackAppDetail({
           below (Slack verifies it immediately). The completed manifest is
           also available for review or re-paste.
         </p>
-        <CopyRow
-          label="Events request URL"
-          value={webhookUrl}
-          copyTargetId="stgm-chapp-webhook-copy"
-        />
+        {webhookUrl !== undefined ? (
+          <CopyRow
+            label="Events request URL"
+            value={webhookUrl}
+            copyTargetId="stgm-chapp-webhook-copy"
+          />
+        ) : (
+          <UnknownAddressRow label="Events request URL" subject="the events request URL" />
+        )}
         <CopyRow label="OAuth redirect URL" value={redirectUrl} />
         <CopyBlock label="Completed app manifest" value={manifest} />
       </section>
@@ -361,7 +370,7 @@ function WhatsAppAppDetail({
   readonly onUpdated?: (app: ChannelApp) => void;
 }) {
   const baseId = useId();
-  const stigmer = useStigmer();
+  const publicBaseUrl = usePublicBaseUrl();
   const { update, isUpdating, error: updateError, clearError } = useUpdateChannelApp();
 
   const whatsapp = channelApp.spec?.providerConfig?.case === "whatsapp"
@@ -376,9 +385,13 @@ function WhatsAppAppDetail({
   const appId = channelApp.metadata?.id ?? "";
   const name = channelApp.metadata?.name ?? "";
 
+  // `undefined` while the server's public address is unknown: the row says so.
   const webhookUrl = useMemo(
-    () => whatsappChannelAppWebhookUrl(stigmer.baseUrl, appId),
-    [stigmer.baseUrl, appId],
+    () =>
+      publicBaseUrl === null
+        ? undefined
+        : whatsappChannelAppWebhookUrl(publicBaseUrl, appId),
+    [publicBaseUrl, appId],
   );
 
   const canSave =
@@ -432,11 +445,15 @@ function WhatsAppAppDetail({
           </span>{" "}
           webhook field.
         </p>
-        <CopyRow
-          label="Callback URL"
-          value={webhookUrl}
-          copyTargetId="stgm-chapp-webhook-copy"
-        />
+        {webhookUrl !== undefined ? (
+          <CopyRow
+            label="Callback URL"
+            value={webhookUrl}
+            copyTargetId="stgm-chapp-webhook-copy"
+          />
+        ) : (
+          <UnknownAddressRow label="Callback URL" subject="the callback URL" />
+        )}
         {createHandoff?.verifyToken ? (
           <CopyRow
             label="Verify token"

package/src/channel-app/ChannelAppListPanel.tsx

@@ -7,6 +7,7 @@ import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type { ChannelApp } from "@stigmer/protos/ai/stigmer/agentic/channelapp/v1/api_pb";
 import { channelProviderOf } from "../channel/providers.js";
 import { useChannelAppList } from "./useChannelAppList.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -25,8 +26,8 @@ export interface ChannelAppListPanelProps {
   readonly onRefetchRef?: (refetch: () => void) => void;
   /**
    * Shown when the list is empty. Defaults to "No channel apps registered
-   * yet." The list holds only the apps the caller may view (their creator,
-   * anyone granted viewer on one, and the organization's admins), so a host
+   * yet." The list holds only the apps the caller may view (the
+   * organization's admins, and anyone granted viewer on an app), so a host
    * that knows the caller may not manage channel apps should say who does
    * instead.
    */
@@ -69,15 +70,14 @@ export function ChannelAppListPanel({
 
   if (isLoading) {
     return (
-      <div
+      <LoadingRegion
         className={cn("stg:space-y-2", className)}
-        aria-busy="true"
-        aria-label="Loading channel apps"
+        label="Loading channel apps"
       >
         {Array.from({ length: 2 }, (_, i) => (
           <div key={i} className="stg:bg-muted-subtle stg:h-14 stg:animate-pulse stg:rounded-lg" />
         ))}
-      </div>
+      </LoadingRegion>
     );
   }
 

package/src/channel-app/CreateChannelAppForm.tsx

@@ -311,7 +311,6 @@ function ProviderPicker({
                 checked={checked}
                 onChange={() => onChange(p.id)}
                 disabled={disabled}
-                className="stg:accent-current"
               />
               <p.Icon className="stg:size-3.5 stg:shrink-0 stg:text-foreground" />
               <span className="stg:text-xs stg:font-medium stg:text-foreground">{p.label}</span>

package/src/channel-app/copy.ts

@@ -4,9 +4,9 @@
  * thing.
  *
  * A channel app carries its organization's Slack or Meta app secrets, so the
- * model shows it to its creator, anyone granted viewer on it and the
- * organization's admins, and plain members and viewers may not see it at all
- * (stigmer/stigmer#1384). An empty list is therefore not evidence that none
+ * model shows it to the organization's admins and anyone granted viewer on
+ * it, and plain members and viewers may not see it at all
+ * (stigmer/stigmer#1384, #1409). An empty list is therefore not evidence that none
  * is registered, so a caller who may not create channel apps is told who
  * manages them instead of being told that nothing exists.
  */