@stigmer/react 3.0.5 → 3.0.7-dev.20260611143057

package/src/library/__tests__/VisibilitySelector.test.tsx

@@ -0,0 +1,256 @@
+import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
+import {
+  render,
+  screen,
+  within,
+  fireEvent,
+  waitFor,
+  cleanup,
+} from "@testing-library/react";
+import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
+import {
+  VisibilitySelector,
+  VisibilityBadge,
+} from "../VisibilitySelector";
+import {
+  INSTANCE_VISIBILITY_LEVELS,
+  blueprintVisibilityLevels,
+} from "../visibilityLevels";
+
+// Without a StigmerProvider the portal container is null, and Base UI's
+// Portal renders nothing — pin it to document.body so the popover mounts.
+vi.mock("../../portal-container", () => ({
+  useStigmerPortalContainer: () => document.body,
+}));
+
+// Base UI's Popover positioner observes its anchor; happy-dom lacks
+// ResizeObserver, so provide a no-op shim.
+beforeAll(() => {
+  if (!("ResizeObserver" in globalThis)) {
+    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      };
+  }
+});
+
+afterEach(cleanup);
+
+const BLUEPRINT_LEVELS = blueprintVisibilityLevels({
+  deploymentMode: "cloud",
+  hasIdentityProvider: true,
+});
+
+// Option accessible names are "<label> <description>"; anchor on the label so
+// e.g. /^Organization/ does not also match Platform's "All organizations …".
+const optionByLabel = (label: string) =>
+  screen.getByRole("option", { name: new RegExp(`^${label}`, "i") });
+
+/** Opens the manage-mode popover, resolving once its option rows are mounted. */
+async function openPopover() {
+  fireEvent.click(screen.getByRole("button", { name: /Resource visibility:/i }));
+  await screen.findByRole("option", { name: /^Private/i });
+}
+
+describe("VisibilitySelector — create mode (inline list)", () => {
+  it("renders every offered level with its label and description", () => {
+    render(
+      <VisibilitySelector
+        mode="create"
+        visibility={ApiResourceVisibility.visibility_private}
+        options={INSTANCE_VISIBILITY_LEVELS}
+        onVisibilityChange={() => {}}
+      />,
+    );
+
+    const group = screen.getByRole("radiogroup", { name: "Resource visibility" });
+    const radios = within(group).getAllByRole("radio");
+    expect(radios).toHaveLength(3);
+    expect(within(group).getByText("Private")).toBeTruthy();
+    expect(within(group).getByText("Organization")).toBeTruthy();
+    expect(within(group).getByText("Public")).toBeTruthy();
+    expect(within(group).getByText("Only you can access")).toBeTruthy();
+  });
+
+  it("applies any selection immediately, with no confirmation", () => {
+    const onChange = vi.fn();
+    render(
+      <VisibilitySelector
+        mode="create"
+        visibility={ApiResourceVisibility.visibility_private}
+        options={INSTANCE_VISIBILITY_LEVELS}
+        onVisibilityChange={onChange}
+      />,
+    );
+
+    // Public is an escalation, but in create mode there is nothing to escalate.
+    fireEvent.click(screen.getByRole("radio", { name: /Public/i }));
+    expect(onChange).toHaveBeenCalledWith(ApiResourceVisibility.visibility_public);
+    expect(screen.queryByRole("alert")).toBeNull();
+  });
+
+  it("renders the current level even when it is not offerable", () => {
+    render(
+      <VisibilitySelector
+        mode="create"
+        visibility={ApiResourceVisibility.visibility_platform}
+        options={INSTANCE_VISIBILITY_LEVELS}
+        onVisibilityChange={() => {}}
+      />,
+    );
+
+    const group = screen.getByRole("radiogroup", { name: "Resource visibility" });
+    const platformRow = within(group).getByText("Platform").closest("button");
+    expect(platformRow).not.toBeNull();
+    expect(platformRow?.getAttribute("aria-checked")).toBe("true");
+  });
+
+  it("disables interaction when disabled", () => {
+    const onChange = vi.fn();
+    render(
+      <VisibilitySelector
+        mode="create"
+        disabled
+        visibility={ApiResourceVisibility.visibility_private}
+        options={INSTANCE_VISIBILITY_LEVELS}
+        onVisibilityChange={onChange}
+      />,
+    );
+    for (const radio of screen.getAllByRole("radio")) {
+      expect((radio as HTMLButtonElement).disabled).toBe(true);
+    }
+  });
+});
+
+describe("VisibilitySelector — manage mode (popover + confirmation)", () => {
+  it("shows the current level on the trigger and lists levels on open", async () => {
+    render(
+      <VisibilitySelector
+        visibility={ApiResourceVisibility.visibility_org}
+        options={BLUEPRINT_LEVELS}
+        onVisibilityChange={() => {}}
+      />,
+    );
+
+    expect(
+      screen.getByRole("button", { name: "Resource visibility: Organization" }),
+    ).toBeTruthy();
+
+    await openPopover();
+    expect(screen.getAllByRole("option")).toHaveLength(4);
+  });
+
+  it("applies a de-escalation immediately, without confirmation", async () => {
+    const onChange = vi.fn();
+    render(
+      <VisibilitySelector
+        visibility={ApiResourceVisibility.visibility_public}
+        options={BLUEPRINT_LEVELS}
+        onVisibilityChange={onChange}
+      />,
+    );
+
+    await openPopover();
+    fireEvent.click(optionByLabel("Private"));
+    expect(onChange).toHaveBeenCalledWith(ApiResourceVisibility.visibility_private);
+    expect(screen.queryByRole("alert")).toBeNull();
+  });
+
+  it("requires an inline confirm before escalating to Organization", async () => {
+    const onChange = vi.fn();
+    render(
+      <VisibilitySelector
+        visibility={ApiResourceVisibility.visibility_private}
+        options={BLUEPRINT_LEVELS}
+        onVisibilityChange={onChange}
+      />,
+    );
+
+    await openPopover();
+    fireEvent.click(optionByLabel("Organization"));
+
+    // Not applied yet — an inline prompt appears first.
+    expect(onChange).not.toHaveBeenCalled();
+    const alert = await screen.findByRole("alert");
+    expect(alert).toBeTruthy();
+
+    fireEvent.click(within(alert).getByRole("button", { name: "Confirm" }));
+    expect(onChange).toHaveBeenCalledWith(ApiResourceVisibility.visibility_org);
+  });
+
+  it("requires the confirm dialog before escalating to Public", async () => {
+    const onChange = vi.fn();
+    render(
+      <VisibilitySelector
+        visibility={ApiResourceVisibility.visibility_org}
+        options={BLUEPRINT_LEVELS}
+        onVisibilityChange={onChange}
+      />,
+    );
+
+    await openPopover();
+    fireEvent.click(optionByLabel("Public"));
+
+    // Not applied until the modal is confirmed.
+    expect(onChange).not.toHaveBeenCalled();
+    expect(await screen.findByText("Make this public?")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Make Public" }));
+    // The confirm resolves on a microtask, so the apply is asynchronous.
+    await waitFor(() =>
+      expect(onChange).toHaveBeenCalledWith(ApiResourceVisibility.visibility_public),
+    );
+  });
+
+  it("moves focus between options with the arrow keys", async () => {
+    render(
+      <VisibilitySelector
+        visibility={ApiResourceVisibility.visibility_org}
+        options={BLUEPRINT_LEVELS}
+        onVisibilityChange={() => {}}
+      />,
+    );
+
+    await openPopover();
+    // Opening focuses the current level.
+    await waitFor(() =>
+      expect(document.activeElement).toBe(optionByLabel("Organization")),
+    );
+
+    fireEvent.keyDown(optionByLabel("Organization"), { key: "ArrowDown" });
+    expect(document.activeElement).toBe(optionByLabel("Platform"));
+
+    fireEvent.keyDown(optionByLabel("Platform"), { key: "ArrowUp" });
+    expect(document.activeElement).toBe(optionByLabel("Organization"));
+  });
+
+  it("does not apply when the confirm dialog is cancelled", async () => {
+    const onChange = vi.fn();
+    render(
+      <VisibilitySelector
+        visibility={ApiResourceVisibility.visibility_org}
+        options={BLUEPRINT_LEVELS}
+        onVisibilityChange={onChange}
+      />,
+    );
+
+    await openPopover();
+    fireEvent.click(optionByLabel("Public"));
+    await screen.findByText("Make this public?");
+
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+    await waitFor(() =>
+      expect(screen.queryByText("Make this public?")).toBeNull(),
+    );
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+describe("VisibilityBadge", () => {
+  it("renders the human label for a visibility value", () => {
+    render(<VisibilityBadge visibility={ApiResourceVisibility.visibility_platform} />);
+    expect(screen.getByText("Platform")).toBeTruthy();
+  });
+});

package/src/library/index.ts

@@ -68,8 +68,19 @@ export type {
 export { ImportResourceDialog } from "./ImportResourceDialog";
 export type { ImportResourceDialogProps } from "./ImportResourceDialog";
 
-export { VisibilityToggle, VisibilityBadge } from "./VisibilityToggle";
-export type { VisibilityToggleProps } from "./VisibilityToggle";
+export { VisibilitySelector, VisibilityBadge } from "./VisibilitySelector";
+export type { VisibilitySelectorProps } from "./VisibilitySelector";
+
+export {
+  blueprintVisibilityLevels,
+  INSTANCE_VISIBILITY_LEVELS,
+  visibilityLabel,
+  visibilityOption,
+} from "./visibilityLevels";
+export type {
+  BlueprintVisibilityLevelsContext,
+  VisibilityLevelOption,
+} from "./visibilityLevels";
 
 export { ResourceVisibilityControl } from "./ResourceVisibilityControl";
 export type { ResourceVisibilityControlProps } from "./ResourceVisibilityControl";

package/src/library/useUpdateVisibility.ts

@@ -34,9 +34,9 @@ export interface UseUpdateVisibilityReturn {
 /**
  * Behavior hook that updates the visibility of a resource.
  *
- * Supports blueprints (Agent, Workflow, Skill, MCP Server) with
- * private/public visibility, and instances (AgentInstance,
- * WorkflowInstance) with the full private/org/public spectrum.
+ * Supports blueprints (Agent, Workflow, Skill, MCP Server) with the
+ * full private/org/public/platform spectrum, and instances
+ * (AgentInstance, WorkflowInstance) with private/org/public.
  *
  * Wraps the generated `stigmer.{kind}.updateVisibility()` SDK method
  * with loading and error state management. The hook is stateless with
@@ -51,8 +51,9 @@ export interface UseUpdateVisibilityReturn {
  * ```tsx
  * const { updateVisibility, isPending } = useUpdateVisibility("workflow", workflow.metadata.id);
  *
- * <VisibilityToggle
+ * <VisibilitySelector
  *   visibility={workflow.metadata.visibility}
+ *   options={options}
  *   onVisibilityChange={updateVisibility}
  *   isPending={isPending}
  * />

package/src/library/visibilityLevels.ts

@@ -0,0 +1,174 @@
+import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
+
+/**
+ * A selectable visibility level: label, explanation, and escalation copy.
+ *
+ * Options are always declared in escalation order (least to most exposed:
+ * private < org < platform < public); {@link VisibilitySelector} derives
+ * "is this an escalation?" from array position, and shows
+ * {@link confirmPrompt} before applying one.
+ */
+export interface VisibilityLevelOption {
+  readonly value: ApiResourceVisibility;
+  readonly label: string;
+  /** One-line explanation shown under the selector for the current level. */
+  readonly description: string;
+  /**
+   * Light inline confirmation question shown inside the selector when the
+   * user escalates TO this level (e.g. private → org). Omitted for the
+   * least-exposed level (de-escalation never confirms — revoking access is
+   * always safe).
+   *
+   * Levels that expand access far beyond the owning org carry a
+   * {@link confirmDialog} instead; see the severity ladder on
+   * {@link VisibilityLevelOption}.
+   */
+  readonly confirmPrompt?: string;
+  /**
+   * Heavy confirmation shown as a modal {@link ConfirmDialog} when the user
+   * escalates TO this level. Reserved for levels that expose the resource
+   * beyond the owning organization (platform, public), where a blocking,
+   * audience-naming confirmation is warranted.
+   *
+   * The selector derives escalation severity purely from this data:
+   * `confirmDialog` present → modal; else `confirmPrompt` present → inline;
+   * else apply immediately. There is no per-level branching in the
+   * component.
+   */
+  readonly confirmDialog?: {
+    /** Modal title, phrased as a question (e.g. "Make this public?"). */
+    readonly title: string;
+    /** Body copy that names the exact audience and the consequence. */
+    readonly description: string;
+  };
+  /** Color treatment for the selected segment and the confirmation prompt. */
+  readonly tone: "private" | "org" | "platform" | "public";
+}
+
+const PRIVATE_OPTION: VisibilityLevelOption = {
+  value: ApiResourceVisibility.visibility_private,
+  label: "Private",
+  description: "Only you can access",
+  tone: "private",
+};
+
+const ORG_OPTION: VisibilityLevelOption = {
+  value: ApiResourceVisibility.visibility_org,
+  label: "Organization",
+  description: "All members of your organization",
+  confirmPrompt: "Make visible to all org members?",
+  tone: "org",
+};
+
+const PLATFORM_OPTION: VisibilityLevelOption = {
+  value: ApiResourceVisibility.visibility_platform,
+  label: "Platform",
+  description: "All organizations managed by your platform",
+  confirmDialog: {
+    title: "Share with your whole platform?",
+    description:
+      "Every organization managed by your platform will be able to view and use this resource. You can return it to a narrower visibility at any time.",
+  },
+  tone: "platform",
+};
+
+const PUBLIC_OPTION: VisibilityLevelOption = {
+  value: ApiResourceVisibility.visibility_public,
+  label: "Public",
+  description: "Anyone on Stigmer",
+  confirmDialog: {
+    title: "Make this public?",
+    description:
+      "Anyone signed in to Stigmer will be able to view and use this resource. You can return it to a narrower visibility at any time.",
+  },
+  tone: "public",
+};
+
+/**
+ * Inputs that gate which levels a blueprint selector offers.
+ *
+ * Mirrors the backend's per-kind `VisibilityConfig` plus runtime context the
+ * proto cannot know:
+ *
+ * - `deploymentMode`: the OSS Go backend (`local`) is single-user and
+ *   performs no org/platform visibility gating, so only Private/Public are
+ *   meaningful there.
+ * - `hasIdentityProvider`: `visibility_platform` requires the owning org to
+ *   operate an IdentityProvider — the backend rejects it otherwise
+ *   (`ValidateVisibilityStep`), so the option only renders when the signal
+ *   is present (use `useSsoProvider`, the permission-free lookup).
+ */
+export interface BlueprintVisibilityLevelsContext {
+  readonly deploymentMode: "cloud" | "local";
+  readonly hasIdentityProvider: boolean;
+}
+
+/**
+ * The levels a blueprint (agent, skill, workflow, mcp_server) selector
+ * offers, in escalation order.
+ *
+ * Cloud: Private / Organization [/ Platform] / Public — Organization is the
+ * creation default (blueprints are shared org assets; Private is an explicit
+ * opt-in). Local: Private / Public.
+ */
+export function blueprintVisibilityLevels(
+  context: BlueprintVisibilityLevelsContext,
+): readonly VisibilityLevelOption[] {
+  if (context.deploymentMode === "local") {
+    return [PRIVATE_OPTION, PUBLIC_OPTION];
+  }
+  return context.hasIdentityProvider
+    ? [PRIVATE_OPTION, ORG_OPTION, PLATFORM_OPTION, PUBLIC_OPTION]
+    : [PRIVATE_OPTION, ORG_OPTION, PUBLIC_OPTION];
+}
+
+/**
+ * The levels an instance (agent_instance, workflow_instance) selector
+ * offers, in escalation order: Private / Organization / Public.
+ *
+ * Platform is deliberately absent — instances are tenant-isolated by
+ * design (each managed org instantiates shared blueprints inside its own
+ * boundary). Descriptions are execution-oriented because org visibility on
+ * an instance is about who can run it and see its executions.
+ */
+export const INSTANCE_VISIBILITY_LEVELS: readonly VisibilityLevelOption[] = [
+  PRIVATE_OPTION,
+  {
+    ...ORG_OPTION,
+    description: "All org members can view executions",
+  },
+  {
+    ...PUBLIC_OPTION,
+    description: "All authenticated users can view",
+  },
+];
+
+/**
+ * Canonical option for a visibility value, independent of any kind's offered
+ * list. Used to render the current level even when it is not offerable in
+ * the current context (e.g. a platform-shared blueprint whose org no longer
+ * operates an IdentityProvider) — the state must stay legible.
+ */
+export function visibilityOption(
+  visibility: ApiResourceVisibility,
+): VisibilityLevelOption {
+  switch (visibility) {
+    case ApiResourceVisibility.visibility_org:
+      return ORG_OPTION;
+    case ApiResourceVisibility.visibility_platform:
+      return PLATFORM_OPTION;
+    case ApiResourceVisibility.visibility_public:
+      return PUBLIC_OPTION;
+    default:
+      return PRIVATE_OPTION;
+  }
+}
+
+/**
+ * Human label for a visibility value — the one place list rows, badges, and
+ * detail panels resolve enum-to-text, so no surface ever falls through to
+ * "Private" (or "unknown") for org/platform.
+ */
+export function visibilityLabel(visibility: ApiResourceVisibility): string {
+  return visibilityOption(visibility).label;
+}

package/src/mcp-server/McpServerDetailView.tsx

@@ -13,7 +13,6 @@ import type {
 import type { ToolApprovalPolicy, McpServerSpec } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/spec_pb";
 import { ValidationState } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/status_pb";
 import type { EnvVarDeclaration } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/spec_pb";
-import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import { useMcpServer } from "./useMcpServer";
 import { useUpdateMcpServer } from "./useUpdateMcpServer";
 import { mcpServerToInput } from "./internal/mcpServerToInput";
@@ -27,8 +26,7 @@ import { OAuthAppForm } from "./OAuthAppForm";
 import { ErrorMessage } from "../error/ErrorMessage";
 import { EnvVarForm } from "../environment/EnvVarForm";
 import type { EnvVarFormVariable } from "../environment/EnvVarForm";
-import { VisibilityToggle } from "../library/VisibilityToggle";
-import { PermissionGate } from "../iam-policy/PermissionGate";
+import { ResourceVisibilityControl } from "../library/ResourceVisibilityControl";
 import { Tabs, type TabItem } from "../tabs/Tabs";
 import { ResourceDetailShell } from "../resource-detail/ResourceDetailShell";
 import { Section } from "../resource-detail/Section";
@@ -58,15 +56,6 @@ export interface McpServerDetailViewProps {
    * Not called on error or not-found states.
    */
   readonly onResourceLoad?: (meta: { name: string; id: string }) => void;
-  /**
-   * Called when the user toggles visibility via the inline control.
-   * When provided, the header renders an interactive
-   * {@link VisibilityToggle} instead of a read-only badge.
-   * When omitted, visibility is displayed as a static "Public" pill.
-   */
-  readonly onVisibilityChange?: (v: ApiResourceVisibility) => void;
-  /** `true` while a visibility update RPC is in flight. */
-  readonly isVisibilityPending?: boolean;
   /**
    * Initial active capability tab. Defaults to `"tools"`.
    * Useful for deep-linking or demo scenarios that need to start on
@@ -147,8 +136,6 @@ export function McpServerDetailView({
   org,
   slug,
   onResourceLoad,
-  onVisibilityChange,
-  isVisibilityPending,
   defaultCapabilityTab = "tools",
   defaultShowCredentialForm = false,
   credentialPoolValues,
@@ -393,27 +380,15 @@ export function McpServerDetailView({
     updatedAt: specAudit?.updatedAt ? timestampDate(specAudit.updatedAt) : null,
   };
 
-  const visibilityBadge =
-    meta?.visibility === ApiResourceVisibility.visibility_public ? (
-      <span className="shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
-        Public
-      </span>
-    ) : undefined;
-
-  const visibilityControl =
-    onVisibilityChange && meta ? (
-      <PermissionGate
-        resource={{ kind: "mcp_server", id: meta.id }}
-        relation="can_edit"
-        fallback={visibilityBadge}
-      >
-        <VisibilityToggle
-          visibility={meta.visibility}
-          onVisibilityChange={onVisibilityChange}
-          isPending={isVisibilityPending}
-        />
-      </PermissionGate>
-    ) : visibilityBadge;
+  const visibilityControl = meta ? (
+    <ResourceVisibilityControl
+      kind="mcpServer"
+      resourceId={meta.id}
+      visibility={meta.visibility}
+      org={meta.org || org}
+      onChanged={refetch}
+    />
+  ) : undefined;
 
   const headerMetaExtra = (
     <>

package/src/resource-detail/types.ts

@@ -151,7 +151,7 @@ export interface ResourceDetailShellProps {
 
   /**
    * Visibility control rendered in the header.
-   * Typically a `<VisibilityToggle />` from the library module.
+   * Typically a `<ResourceVisibilityControl />` from the library module.
    * Rendered inline after the resource name.
    */
   readonly visibilityControl?: ReactNode;

package/src/session/NewSessionViewer.tsx

@@ -7,10 +7,13 @@ import type { UseGitHubConnectionReturn } from "../github/useGitHubConnection";
 import type { WorkspaceFileLister } from "../workspace/WorkspaceFileLister";
 import type { InteractionModeOption } from "../composer";
 import { SessionComposer } from "../composer";
+import type { HarnessOption } from "../models/harness";
 import { ResizableSplit } from "../internal/ResizableSplit";
 import { SessionInspector } from "./inspector/SessionInspector";
 import type { SetupTabProps } from "./inspector/SetupTab";
 import { useNewSessionFlow } from "./useNewSessionFlow";
+import type { RuntimeEnvProvider } from "./runtime-env";
+import type { SessionAudience } from "./audience";
 
 /** Props for {@link NewSessionViewer}. */
 export interface NewSessionViewerProps {
@@ -44,6 +47,37 @@ export interface NewSessionViewerProps {
    */
   readonly workspaceFileLister?: WorkspaceFileLister;
 
+  /**
+   * Supplies host-app environment variables for the session's first
+   * execution (e.g. short-lived credentials for MCP tools, minted as
+   * the signed-in user). Evaluated at submit time, before the session
+   * is created; host values win over composer-collected env on key
+   * collisions. If the provider throws, the submission fails with an
+   * error surfaced via `onError` — see {@link RuntimeEnvProvider}.
+   */
+  readonly getRuntimeEnv?: RuntimeEnvProvider;
+
+  /**
+   * Presentation audience for the launcher. `"endUser"` locks the
+   * pinned agent (when `initialAgentRef` is set) and hides the MCP
+   * server, skill, and session-variable pickers — for product-embedded
+   * chat where the agent is configured upstream by the platform. The
+   * model selector, interaction mode, harness selector, attachments,
+   * and workspace picker remain. See {@link SessionAudience}.
+   *
+   * @default "integrator"
+   */
+  readonly audience?: SessionAudience;
+
+  /**
+   * Harness pre-selected for new sessions when the user has not made
+   * an explicit choice yet. The user can still switch before starting
+   * the session, and their explicit choice wins on subsequent visits.
+   *
+   * @default "native"
+   */
+  readonly defaultHarness?: HarnessOption;
+
   /** Agent to auto-select on mount (used for draft flows). */
   readonly initialAgentRef?: ResourceRef;
   /**
@@ -122,6 +156,9 @@ export function NewSessionViewer({
   enableLocal = false,
   onBrowseLocalFolder,
   workspaceFileLister,
+  getRuntimeEnv,
+  audience = "integrator",
+  defaultHarness,
   initialAgentRef,
   initialInstanceId,
   initialAttachments,
@@ -132,8 +169,15 @@ export function NewSessionViewer({
   footerContent,
   className,
 }: NewSessionViewerProps) {
-  const flow = useNewSessionFlow({ org, onSessionCreated, onError });
+  const flow = useNewSessionFlow({
+    org,
+    onSessionCreated,
+    onError,
+    getRuntimeEnv,
+    defaultHarness,
+  });
   const [interactionMode, setInteractionMode] = useState<InteractionModeOption>("agent");
+  const isEndUser = audience === "endUser";
 
   const hasContext =
     flow.workspace.hasEntries ||
@@ -179,16 +223,20 @@ export function NewSessionViewer({
       harness: flow.harness,
       executionTarget: undefined,
       modelId: flow.modelId,
-      mutations: {
-        onRemoveAgent: flow.agentRef ? handleRemoveAgent : undefined,
-        onRemoveMcp: handleRemoveMcp,
-        onRemoveSkill: handleRemoveSkill,
-      },
+      // End users see the configuration but cannot strip it — the Setup
+      // tab renders read-only without mutation callbacks (DD-011).
+      mutations: isEndUser
+        ? undefined
+        : {
+            onRemoveAgent: flow.agentRef ? handleRemoveAgent : undefined,
+            onRemoveMcp: handleRemoveMcp,
+            onRemoveSkill: handleRemoveSkill,
+          },
     }),
     [
       flow.agentRef, flow.mcpServerUsages, flow.skillRefs,
       flow.sessionVariables, flow.harness, flow.modelId,
-      handleRemoveAgent, handleRemoveMcp, handleRemoveSkill,
+      isEndUser, handleRemoveAgent, handleRemoveMcp, handleRemoveSkill,
     ],
   );
 
@@ -231,11 +279,12 @@ export function NewSessionViewer({
           initialAgentRef={initialAgentRef}
           initialInstanceId={initialInstanceId}
           initialAttachments={initialAttachments}
-          mcpServerUsages={flow.mcpServerUsages}
-          onMcpServerUsagesChange={flow.setMcpServerUsages}
-          skillRefs={flow.skillRefs}
-          onSkillRefsChange={flow.setSkillRefs}
-          sessionVariables={flow.sessionVariables}
+          lockAgent={isEndUser && initialAgentRef != null}
+          mcpServerUsages={isEndUser ? undefined : flow.mcpServerUsages}
+          onMcpServerUsagesChange={isEndUser ? undefined : flow.setMcpServerUsages}
+          skillRefs={isEndUser ? undefined : flow.skillRefs}
+          onSkillRefsChange={isEndUser ? undefined : flow.setSkillRefs}
+          sessionVariables={isEndUser ? undefined : flow.sessionVariables}
           showHarnessSelector
           harness={flow.harness}
           onHarnessChange={flow.setHarness}