@stigmer/react 3.12.1 → 3.12.2

package/src/session/useNewSessionFlow.ts

@@ -15,9 +15,11 @@ import { withTimeout } from "../internal/withTimeout.js";
 import { useCreateAgentExecution } from "../execution/useCreateAgentExecution.js";
 import type { ExecutionTargetOption } from "./execution-target.js";
 import { useExecutionTarget } from "../execution-target-context.js";
+import { useApprovalDefaults } from "../approval-defaults-context.js";
 import { useRunnerAdapter } from "../runner-adapter.js";
 import { resolveExecutionRuntimeEnv, type RuntimeEnvProvider } from "./runtime-env.js";
 import type { SessionAudience } from "./audience.js";
+import { assertValidRunConfig, type SessionRunConfig } from "./run-config.js";
 
 const DEFAULT_AGENT_TIMEOUT_MS = 10_000;
 
@@ -141,6 +143,16 @@ export interface UseNewSessionFlowOptions {
    * or Environment resources. Large values bloat every prompt.
    */
   readonly sessionContext?: string;
+  /**
+   * Owner-pinned model/tier for the session's first execution
+   * (stigmer/stigmer#664). Stamped at submit, winning over the
+   * composer's selection and the restored Console preference. Pair
+   * with the same pin on the conversation surface
+   * (`useSessionPageFlow` / `SessionViewer`) so follow-ups match.
+   * Ignored for the `"guest"` audience (the platform share policy owns
+   * guest execution config). See {@link SessionRunConfig}.
+   */
+  readonly runConfig?: SessionRunConfig;
 }
 
 /** Return value of {@link useNewSessionFlow}. */
@@ -257,9 +269,24 @@ export function useNewSessionFlow(
     sessionContext,
   } = options;
   const isGuest = options.audience === "guest";
+  // Guests never carry a client pin: guest execution config is owned by
+  // the server-side share policy (GUEST_HARNESS reasoning). Validated at
+  // render so a statically-wrong pin (fast tier, no model) fails in the
+  // embedder's dev loop, not as the end user's failed send.
+  const runConfig = isGuest ? undefined : options.runConfig;
+  if (runConfig) assertValidRunConfig(runConfig);
+  const pinnedModelName = runConfig?.modelName;
+  const pinnedServiceTier = runConfig?.serviceTier;
   const contextTarget = useExecutionTarget();
   const executionTarget = options.executionTarget ?? contextTarget;
   const adapter = useRunnerAdapter();
+  // Host approval default (#302): pre-arm auto_approve_all on the bootstrap
+  // create when the provider says so. Guests never inherit it — a share-link
+  // visitor is not the operator the host's trust judgment covers (the
+  // GUEST_HARNESS fixed-platform-policy reasoning).
+  const approvalDefaults = useApprovalDefaults();
+  const autoApproveAll =
+    (!isGuest && approvalDefaults?.autoApproveAll) || undefined;
 
   const [harness, setHarnessRaw] = useState<HarnessOption>(() => {
     // Guests get the fixed platform policy (see GUEST_HARNESS) and never
@@ -385,12 +412,19 @@ export function useNewSessionFlow(
         const executionFields = {
           org,
           message,
-          modelName: selectedModel ?? validModelId,
+          // The owner pin wins over the composer and the restored
+          // preference (#664); the pinned tier is stamped only as
+          // "fast" — standard stays off the wire, preserving the #357
+          // UNSPECIFIED-vs-explicit telemetry distinction.
+          modelName: pinnedModelName ?? selectedModel ?? validModelId,
           runtimeEnv,
           attachments: context?.attachments,
           interactionMode: context?.interactionMode,
-          serviceTier: context?.serviceTier,
+          serviceTier: pinnedModelName
+            ? (pinnedServiceTier === "fast" ? "fast" : undefined)
+            : context?.serviceTier,
           workspaceFileRefs: context?.workspaceFileRefs,
+          autoApproveAll,
         };
 
         // Resolve which agent the bootstrapped session runs against: an
@@ -477,9 +511,12 @@ export function useNewSessionFlow(
       isGuest,
       harness,
       executionTarget,
+      autoApproveAll,
       adapter,
       getRuntimeEnv,
       validModelId,
+      pinnedModelName,
+      pinnedServiceTier,
       workspace,
       mcpServerUsages,
       skillRefs,

package/src/session/useSessionConversation.ts

@@ -21,7 +21,9 @@ import type { ServiceTierOption } from "../models/service-tier.js";
 import { useStigmer } from "../hooks.js";
 import { toError } from "../internal/toError.js";
 import { useConversationStoreRef } from "../internal/store/index.js";
-import { useCreateAgentExecution } from "../execution/useCreateAgentExecution.js";
+// Type-only import so the SharedAgentExecutionFields doc links below resolve;
+// the strict tsdoc gate (tsdoc:check) guards it against removal.
+import { useCreateAgentExecution, type SharedAgentExecutionFields } from "../execution/useCreateAgentExecution.js";
 import { useExecutionStream } from "../execution/useExecutionStream.js";
 import { useAgentExecutionActions } from "../execution/useAgentExecutionActions.js";
 import { useSubmitApproval } from "../execution/useSubmitApproval.js";
@@ -79,7 +81,7 @@ export interface SendFollowUpOptions {
    * instance. Keys must be declared in the agent's env declarations
    * (a whitelist, not a value source) or they are dropped.
    *
-   * @see {@link CreateAgentExecutionInput.runtimeEnv}
+   * @see {@link SharedAgentExecutionFields.runtimeEnv}
    */
   readonly runtimeEnv?: Record<string, EnvVarInput>;
   /**
@@ -89,7 +91,7 @@ export interface SendFollowUpOptions {
    * `agentExecution.uploadAttachment()`. Forwarded directly to
    * execution creation.
    *
-   * @see {@link CreateAgentExecutionInput.attachments}
+   * @see {@link SharedAgentExecutionFields.attachments}
    */
   readonly attachments?: AttachmentInput[];
   /**
@@ -106,19 +108,19 @@ export interface SendFollowUpOptions {
    * the unspecified-vs-explicit distinction (unset resolves to standard on
    * the platform side — never the provider account default).
    *
-   * @see {@link CreateAgentExecutionInput.serviceTier}
+   * @see {@link SharedAgentExecutionFields.serviceTier}
    */
   readonly serviceTier?: ServiceTierOption;
   /**
    * Marks this execution as a Build-from-plan turn.
    *
-   * @see {@link CreateAgentExecutionInput.buildFromPlan}
+   * @see {@link SharedAgentExecutionFields.buildFromPlan}
    */
   readonly buildFromPlan?: boolean;
   /**
    * Auto-approve every tool call for this execution (bypass the HITL gate).
    *
-   * @see {@link CreateAgentExecutionInput.autoApproveAll}
+   * @see {@link SharedAgentExecutionFields.autoApproveAll}
    */
   readonly autoApproveAll?: boolean;
   /**
@@ -127,7 +129,7 @@ export interface SendFollowUpOptions {
    * Lightweight "attention" signals — no upload, no injection. The agent
    * reads these files directly from the workspace filesystem.
    *
-   * @see {@link CreateAgentExecutionInput.workspaceFileRefs}
+   * @see {@link SharedAgentExecutionFields.workspaceFileRefs}
    */
   readonly workspaceFileRefs?: string[];
   /**
@@ -136,7 +138,7 @@ export interface SendFollowUpOptions {
    * The conversation read model hides the superseded execution so the
    * edited message replaces the original in place.
    *
-   * @see {@link CreateAgentExecutionInput.supersedesExecutionId}
+   * @see {@link SharedAgentExecutionFields.supersedesExecutionId}
    */
   readonly supersedesExecutionId?: string;
 }

package/src/session/useSessionPageFlow.ts

@@ -6,6 +6,7 @@ import { ApprovalAction } from "@stigmer/protos/ai/stigmer/agentic/agentexecutio
 import type { AgentResolution } from "../agent/index.js";
 import { useDefaultAgent } from "../agent/index.js";
 import { useStigmer } from "../hooks.js";
+import { useApprovalDefaults } from "../approval-defaults-context.js";
 import { useWorkspaceEntries, type UseWorkspaceEntriesReturn } from "../workspace/index.js";
 import { useSessionVariables, type UseSessionVariablesReturn } from "../execution/useSessionVariables.js";
 import type { SessionComposerSubmitContext, InteractionModeOption } from "../composer/index.js";
@@ -19,6 +20,7 @@ import { useAgentRefFromSession } from "./useAgentRefFromSession.js";
 import { usePersistedModel, type UsePersistedModelReturn } from "./usePersistedModel.js";
 import { specMcpUsagesToInput, specSkillRefsToInput } from "./session-spec-converters.js";
 import type { SessionAudience } from "./audience.js";
+import { assertValidRunConfig, type SessionRunConfig } from "./run-config.js";
 
 /**
  * Well-known Daytona sandbox workspace root. Used as the SDK safety-net
@@ -56,6 +58,16 @@ export interface UseSessionPageFlowOptions {
    * @default "integrator"
    */
   readonly audience?: SessionAudience;
+  /**
+   * Owner-pinned model/tier for every follow-up on this surface
+   * (stigmer/stigmer#664). Stamped at submit — after the composer, so
+   * it wins over composer state, the persisted Console preference, and
+   * the last execution's model — and therefore also covers retries,
+   * which re-enter the same submit path. Ignored for the `"guest"`
+   * audience (the server-side share policy owns guest execution
+   * config). See {@link SessionRunConfig}.
+   */
+  readonly runConfig?: SessionRunConfig;
 }
 
 /** Return value of {@link useSessionPageFlow}. */
@@ -130,10 +142,13 @@ export interface UseSessionPageFlowReturn {
   /**
    * Session-scoped "auto-approve tool calls" preference.
    *
-   * `false` by default. Flipped to `true` when the user chooses
-   * "Approve & don't ask again" at an approval gate (see {@link submitApproval}),
-   * and carried into every subsequent follow-up via {@link handleSubmit}. Held in
-   * memory only — reset on reload / new session, never persisted server-side.
+   * `false` by default; a host can pre-arm it app-wide via
+   * `StigmerProvider`'s `approvalDefaults` (#302, guests excluded). Flipped
+   * to `true` when the user chooses "Approve & don't ask again" at an
+   * approval gate (see {@link submitApproval}), and carried into every
+   * subsequent follow-up via {@link handleSubmit}. Held in memory only —
+   * reset on reload / new session back to the host default, never persisted
+   * server-side.
    */
   readonly autoApproveAll: boolean;
   /**
@@ -240,6 +255,18 @@ export function useSessionPageFlow(
 ): UseSessionPageFlowReturn {
   const { sessionId, org, getRuntimeEnv } = options;
   const isGuest = options.audience === "guest";
+  // Guests never carry a client pin: guest execution config is owned by
+  // the server-side share policy, and the no-modelName guest invariant
+  // is test-pinned.
+  const runConfig = isGuest ? undefined : options.runConfig;
+  // Render-time, not submit-time: the pin is static host configuration,
+  // so a statically-wrong shape (fast tier, no model) should fail at
+  // mount in the embedder's dev loop — not as an end user's failed send.
+  if (runConfig) assertValidRunConfig(runConfig);
+  // Scalars, not the object: hosts pass inline literals, and the submit
+  // callback's identity must not churn on every render (DD-010).
+  const pinnedModelName = runConfig?.modelName;
+  const pinnedServiceTier = runConfig?.serviceTier;
 
   const stigmer = useStigmer();
   const conv = useSessionConversation(sessionId, org);
@@ -294,9 +321,17 @@ export function useSessionPageFlow(
   const [skillRefs, setSkillRefs] = useState<ResourceRef[]>([]);
   const initialSyncDone = useRef(false);
 
-  // Session-scoped auto-approve, set at the approval gate (not pre-armed in the
-  // composer). Lives only in memory for the life of this page — reset on reload.
-  const [autoApproveAll, setAutoApproveAll] = useState(false);
+  // Session-scoped auto-approve. Armed either at the approval gate ("Approve &
+  // don't ask again") or from the host's provider-level approvalDefaults
+  // (#302) — an app-level trust judgment, so it seeds the INITIAL state only;
+  // the user's in-session "Turn off" always wins from then on. Guests never
+  // inherit the host default (a share-link visitor is not the operator the
+  // host's trust judgment covers). Lives only in memory for the life of this
+  // page — reset on reload re-applies the host default, never a user choice.
+  const approvalDefaults = useApprovalDefaults();
+  const [autoApproveAll, setAutoApproveAll] = useState(
+    () => !isGuest && (approvalDefaults?.autoApproveAll ?? false),
+  );
 
   const submitApproval = useCallback<UseSessionConversationReturn["submitApproval"]>(
     async (toolCallId, action, comment) => {
@@ -429,7 +464,11 @@ export function useSessionPageFlow(
 
       conv.sendFollowUp(message, {
         agentInstanceId: agentInstanceIdOverride,
-        modelName: selectedModel ?? modelId,
+        // The owner pin wins over everything the user or the SDK
+        // resolved (#664); the pinned tier is stamped only as "fast" —
+        // an untouched/standard tier stays off the wire, preserving the
+        // #357 UNSPECIFIED-vs-explicit telemetry distinction.
+        modelName: pinnedModelName ?? selectedModel ?? modelId,
         workspaceEntries: workspace.hasEntries
           ? workspace.toInput()
           : undefined,
@@ -438,7 +477,9 @@ export function useSessionPageFlow(
         runtimeEnv,
         attachments: context?.attachments,
         interactionMode: context?.interactionMode,
-        serviceTier: context?.serviceTier,
+        serviceTier: pinnedModelName
+          ? (pinnedServiceTier === "fast" ? "fast" : undefined)
+          : context?.serviceTier,
         buildFromPlan: context?.buildFromPlan,
         // Sourced from the session-scoped preference set at the approval gate,
         // not from the composer (the pre-arm toggle was removed).
@@ -449,7 +490,7 @@ export function useSessionPageFlow(
 
       sessionVariables.clear();
     },
-    [conv.sendFollowUp, modelId, workspace, mcpServerUsages, skillRefs, sessionVariables.clear, resolution, agentRef, sessionInstanceId, stigmer, autoApproveAll, getRuntimeEnv],
+    [conv.sendFollowUp, modelId, pinnedModelName, pinnedServiceTier, workspace, mcpServerUsages, skillRefs, sessionVariables.clear, resolution, agentRef, sessionInstanceId, stigmer, autoApproveAll, getRuntimeEnv],
   );
 
   // -------------------------------------------------------------------------

package/src/session/useSessionPanel.ts

@@ -58,6 +58,37 @@ export interface UseSessionPanelOptions {
    * @default "files"
    */
   readonly defaultView?: string;
+  /**
+   * Controlled open state. When provided, the host owns whether the panel is
+   * expanded: internal open intents (the chip toggle, a file/artifact/plan
+   * open, plan auto-open) no longer flip state themselves — they surface
+   * through {@link UseSessionPanelOptions.onOpenChange} and the panel follows
+   * this value. Leave `undefined` for the self-managing default.
+   */
+  readonly open?: boolean;
+  /**
+   * Initial open state in uncontrolled mode. Ignored when
+   * {@link UseSessionPanelOptions.open} is provided.
+   *
+   * @default false
+   */
+  readonly defaultOpen?: boolean;
+  /**
+   * Called on every effective open/close transition — in BOTH modes, unlike
+   * `useDetailTabs`'s DD-T05A-001 convention of swallowing the callback when
+   * uncontrolled. The difference is principled, not stylistic: tabs change
+   * only through user clicks, so an uncontrolled host loses nothing by not
+   * hearing about them — but this panel opens ITSELF (`openFile`,
+   * `openArtifact`, `openPlanDocument`, and the plan-key auto-open all expand
+   * a collapsed panel), and an embedding host that must react to those
+   * moments (widen a dock, make room for a streaming plan) has no other seam.
+   * Passing only this callback observes the panel without controlling it.
+   *
+   * In controlled mode this fires once per open/close REQUEST (the host may
+   * decline by not updating `open` — a later identical request re-fires); in
+   * uncontrolled mode it fires once per actual transition.
+   */
+  readonly onOpenChange?: (open: boolean) => void;
 }
 
 /**
@@ -81,7 +112,11 @@ export interface UseSessionPanelOptions {
 export interface SessionPanelController {
   /** The open-editor group store; subscribe with `useWorkspaceEditors`. */
   readonly editorsStore: WorkspaceEditorsStore;
-  /** Whether the panel is expanded (chat narrow) or collapsed to the chip. */
+  /**
+   * Whether the panel is expanded (chat narrow) or collapsed to the chip.
+   * In controlled mode ({@link UseSessionPanelOptions.open}) this mirrors
+   * the host's value.
+   */
   readonly isOpen: boolean;
   /** The active rail view id (`"files"`, `"search"`, or an injected facet). */
   readonly view: string;
@@ -149,9 +184,49 @@ export function useSessionPanel({
   hasChanges,
   planKey = null,
   defaultView = "files",
+  open,
+  defaultOpen = false,
+  onOpenChange,
 }: UseSessionPanelOptions): SessionPanelController {
   const editorsStore = useWorkspaceEditorsStoreRef();
-  const [isOpen, setIsOpen] = useState(false);
+
+  // Uncontrolled-by-default / controlled-when-`open`-is-provided (React's own
+  // value/defaultValue convention — presence of the value prop decides, so an
+  // observe-only host can pass just `onOpenChange`). Everything below reads
+  // the EFFECTIVE value: the render-adjust triggers (first write-back) and
+  // the returned controller must agree with the host's state, never a stale
+  // internal one.
+  const isControlled = open !== undefined;
+  const [internalIsOpen, setInternalIsOpen] = useState(defaultOpen);
+  const isOpen = isControlled ? open : internalIsOpen;
+
+  // Latest-ref idiom (see YamlEditor's onChangeRef): the host's callback and
+  // the mode/value mirrors live in refs so `requestOpenChange` — and every
+  // action callback built on it — stays referentially stable regardless of
+  // how the host authored `onOpenChange` (DD-010: an inline lambda must not
+  // churn the memoized controller and re-render the panel subtree).
+  const onOpenChangeRef = useRef(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
+  const isControlledRef = useRef(isControlled);
+  isControlledRef.current = isControlled;
+  const isOpenRef = useRef(isOpen);
+  isOpenRef.current = isOpen;
+
+  // The single seam every open/close intent routes through — the chip
+  // toggle, file/artifact/plan opens, the surface's collapse affordance, and
+  // the plan-key auto-open. Uncontrolled: apply + notify (the ref is updated
+  // eagerly so two same-tick intents produce one notification). Controlled:
+  // notify only — the host owns the state, and the panel follows the `open`
+  // prop; the ref is NOT updated, so a declined request stays re-fireable.
+  const requestOpenChange = useCallback((next: boolean) => {
+    if (isOpenRef.current === next) return;
+    if (!isControlledRef.current) {
+      isOpenRef.current = next;
+      setInternalIsOpen(next);
+    }
+    onOpenChangeRef.current?.(next);
+  }, []);
+
   const [view, setViewState] = useState(defaultView);
 
   // Sticky explicit pick (rail click) — auto-switching yields to it until a
@@ -184,8 +259,8 @@ export function useSessionPanel({
 
   const openPlanDocument = useCallback(() => {
     editorsStore.openPinned(PLAN_DOCUMENT_ENTRY_ID, PLAN_DOCUMENT_PATH);
-    setIsOpen(true);
-  }, [editorsStore]);
+    requestOpenChange(true);
+  }, [editorsStore, requestOpenChange]);
 
   // A new plan arrived (first plan, or a refinement superseding it) → open the
   // plan document tab, expanding a collapsed panel (see the planKey option doc
@@ -204,9 +279,15 @@ export function useSessionPanel({
     }
   }, [planKey, openPlanDocument]);
 
-  const openPanel = useCallback(() => setIsOpen(true), []);
+  const openPanel = useCallback(
+    () => requestOpenChange(true),
+    [requestOpenChange],
+  );
 
-  const closePanel = useCallback(() => setIsOpen(false), []);
+  const closePanel = useCallback(
+    () => requestOpenChange(false),
+    [requestOpenChange],
+  );
 
   const setView = useCallback((viewId: string) => {
     userPickedViewRef.current = true;
@@ -216,17 +297,17 @@ export function useSessionPanel({
   const openFile = useCallback(
     (entryId: string, path: string, options?: OpenFileOptions) => {
       editorsStore.openPreview(entryId, path, options);
-      setIsOpen(true);
+      requestOpenChange(true);
     },
-    [editorsStore],
+    [editorsStore, requestOpenChange],
   );
 
   const openArtifact = useCallback(
     (artifact: ExecutionArtifact) => {
       editorsStore.openPreview(ARTIFACT_DOCUMENT_ENTRY_ID, artifactKey(artifact));
-      setIsOpen(true);
+      requestOpenChange(true);
     },
-    [editorsStore],
+    [editorsStore, requestOpenChange],
   );
 
   const pinArtifact = useCallback(

package/src/settings/ApiKeysSection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useId, useRef, useState } from "react";
 import type { ApiKey } from "@stigmer/protos/ai/stigmer/iam/apikey/v1/api_pb";
 import { ApiKeyListPanel } from "../api-key/ApiKeyListPanel.js";
 import { CreateApiKeyForm } from "../api-key/CreateApiKeyForm.js";
@@ -16,6 +16,7 @@ type FlowState =
 
 /** Settings section for listing and creating organization API keys. */
 export function ApiKeysSection() {
+  const headingId = useId();
   const org = useActiveOrgSlug();
   const apiKeysAvailable = useResourceAvailable(ApiResourceKind.api_key);
   const [flow, setFlow] = useState<FlowState>({ phase: "idle" });
@@ -37,10 +38,10 @@ export function ApiKeysSection() {
   }, []);
 
   return (
-    <section aria-labelledby="api-keys-heading">
+    <section aria-labelledby={headingId}>
       <div className="stg:mb-3 stg:flex stg:items-center stg:justify-between">
         <h2
-          id="api-keys-heading"
+          id={headingId}
           className="stg:text-foreground stg:text-sm stg:font-semibold"
         >
           API Keys

package/src/settings/ChannelAppsSection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useId, useRef, useState } from "react";
 import type { ChannelApp } from "@stigmer/protos/ai/stigmer/agentic/channelapp/v1/api_pb";
 import { ChannelAppListPanel } from "../channel-app/ChannelAppListPanel.js";
 import {
@@ -38,6 +38,7 @@ type FlowState =
  * Channels tab offers it as the serving app.
  */
 export function ChannelAppsSection() {
+  const headingId = useId();
   const org = useActiveOrgSlug();
   // Channel installs (the consumer of these credentials) are cloud-only;
   // gate the whole section the way the Channels tab gates connects.
@@ -72,10 +73,10 @@ export function ChannelAppsSection() {
   }, []);
 
   return (
-    <section aria-labelledby="channel-apps-heading">
+    <section aria-labelledby={headingId}>
       <div className="stg:mb-3 stg:flex stg:items-center stg:justify-between">
         <h2
-          id="channel-apps-heading"
+          id={headingId}
           className="stg:text-foreground stg:text-sm stg:font-semibold"
         >
           Channel Apps

package/src/settings/EnvironmentsSection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { getUserMessage } from "@stigmer/sdk";
 import { usePersonalEnvironment } from "../environment/usePersonalEnvironment.js";
 import { EnvironmentVariableEditor } from "../environment/EnvironmentVariableEditor.js";
@@ -47,12 +47,13 @@ function PersonalEnvironmentCard({ org }: { org: string }) {
   }, [org, isLoading, environment, getOrCreate]);
 
   const environmentId = environment?.metadata?.id;
+  const headingId = useId();
 
   return (
-    <section aria-labelledby="personal-env-heading">
+    <section aria-labelledby={headingId}>
       <div className="stg:mb-3 stg:flex stg:items-baseline stg:gap-2">
         <h2
-          id="personal-env-heading"
+          id={headingId}
           className="stg:text-foreground stg:text-sm stg:font-semibold"
         >
           Personal Environment
@@ -97,11 +98,13 @@ function EnvironmentsCard({ org }: { org: string }) {
     listRefetchRef.current?.();
   }, []);
 
+  const headingId = useId();
+
   return (
-    <section aria-labelledby="org-env-heading">
+    <section aria-labelledby={headingId}>
       <div className="stg:mb-3 stg:flex stg:items-center stg:justify-between">
         <h2
-          id="org-env-heading"
+          id={headingId}
           className="stg:text-foreground stg:text-sm stg:font-semibold"
         >
           Environments

package/src/settings/IdentityProvidersSection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useId, useRef, useState } from "react";
 import type { IdentityProvider } from "@stigmer/protos/ai/stigmer/iam/identityprovider/v1/api_pb";
 import { IdentityProviderListPanel } from "../identity-provider/IdentityProviderListPanel.js";
 import { IdentityProviderWizard } from "../identity-provider/IdentityProviderWizard.js";
@@ -28,6 +28,7 @@ type FlowState =
 export function IdentityProvidersSection({
   ssoLoginBaseUrl,
 }: IdentityProvidersSectionProps = {}) {
+  const headingId = useId();
   const { activeOrg } = useOrg();
   const idpAvailable = useResourceAvailable(ApiResourceKind.identity_provider);
   const orgSlug = activeOrg?.metadata?.slug ?? "";
@@ -54,10 +55,10 @@ export function IdentityProvidersSection({
     (typeof window !== "undefined" ? window.location.origin : "");
 
   return (
-    <section aria-labelledby="identity-providers-heading">
+    <section aria-labelledby={headingId}>
       <div className="stg:mb-3 stg:flex stg:items-center stg:justify-between">
         <h2
-          id="identity-providers-heading"
+          id={headingId}
           className="stg:text-foreground stg:text-sm stg:font-semibold"
         >
           Identity Providers

package/src/settings/InvitationsSection.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useId } from "react";
 import { InvitationManager } from "../invitation/InvitationManager.js";
 import { useResourceAvailable, ApiResourceKind } from "../deployment-mode.js";
 import { CloudFeatureNotice } from "../internal/CloudFeatureNotice.js";
@@ -7,14 +8,15 @@ import { useActiveOrgSlug } from "../organization/OrgProvider.js";
 
 /** Settings section for creating and managing organization invitations. */
 export function InvitationsSection() {
+  const headingId = useId();
   const org = useActiveOrgSlug();
   const invitationsAvailable = useResourceAvailable(ApiResourceKind.invitation);
 
   return (
-    <section aria-labelledby="invitations-heading">
+    <section aria-labelledby={headingId}>
       <div className="stg:mb-3">
         <h2
-          id="invitations-heading"
+          id={headingId}
           className="stg:text-foreground stg:text-sm stg:font-semibold"
         >
           Invitations

package/src/settings/MembersSection.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useId } from "react";
 import { OrgMembersPanel } from "../iam-policy/OrgMembersPanel.js";
 import { useResourceAvailable, ApiResourceKind } from "../deployment-mode.js";
 import { CloudFeatureNotice } from "../internal/CloudFeatureNotice.js";
@@ -8,6 +9,7 @@ import { useIdentityProviderList } from "../identity-provider/useIdentityProvide
 
 /** Settings section for organization membership and role management. */
 export function MembersSection() {
+  const headingId = useId();
   const { activeOrg } = useOrg();
   const membersAvailable = useResourceAvailable(ApiResourceKind.iam_policy);
   const idpAvailable = useResourceAvailable(ApiResourceKind.identity_provider);
@@ -23,9 +25,9 @@ export function MembersSection() {
   );
 
   return (
-    <section aria-labelledby="members-heading">
+    <section aria-labelledby={headingId}>
       <h2
-        id="members-heading"
+        id={headingId}
         className="stg:text-foreground stg:mb-1 stg:text-sm stg:font-semibold"
       >
         Members

package/src/settings/OAuthAppsSection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useId, useRef, useState } from "react";
 import type { OAuthApp } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/api_pb";
 import { OAuthAppListPanel } from "../oauth-app/OAuthAppListPanel.js";
 import { CreateOAuthAppForm } from "../oauth-app/CreateOAuthAppForm.js";
@@ -16,6 +16,7 @@ type FlowState =
 
 /** Settings section for organization OAuth app credentials. */
 export function OAuthAppsSection() {
+  const headingId = useId();
   const org = useActiveOrgSlug();
   const oauthAppsAvailable = useResourceAvailable(ApiResourceKind.oauth_app);
 
@@ -42,10 +43,10 @@ export function OAuthAppsSection() {
   }, []);
 
   return (
-    <section aria-labelledby="oauth-apps-heading">
+    <section aria-labelledby={headingId}>
       <div className="stg:mb-3 stg:flex stg:items-center stg:justify-between">
         <h2
-          id="oauth-apps-heading"
+          id={headingId}
           className="stg:text-foreground stg:text-sm stg:font-semibold"
         >
           OAuth Apps