@stigmer/react 3.0.6 → 3.0.7

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/visibilityLevels.ts

@@ -14,11 +14,33 @@ export interface VisibilityLevelOption {
   /** One-line explanation shown under the selector for the current level. */
   readonly description: string;
   /**
-   * Inline confirmation question shown when the user escalates TO this
-   * level. Omitted for the least-exposed level (de-escalation never
-   * confirms — revoking access is always safe).
+   * 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";
 }
@@ -42,7 +64,11 @@ const PLATFORM_OPTION: VisibilityLevelOption = {
   value: ApiResourceVisibility.visibility_platform,
   label: "Platform",
   description: "All organizations managed by your platform",
-  confirmPrompt: "Share with every organization 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",
 };
 
@@ -50,7 +76,11 @@ const PUBLIC_OPTION: VisibilityLevelOption = {
   value: ApiResourceVisibility.visibility_public,
   label: "Public",
   description: "Anyone on Stigmer",
-  confirmPrompt: "Make visible to all authenticated users?",
+  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",
 };
 

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}

package/src/session/SessionViewer.tsx

@@ -17,6 +17,8 @@ import { SessionComposer } from "../composer";
 import { SecretFlowErrorGuide, isSecretFlowError } from "../error";
 import { useSessionPageFlow } from "./useSessionPageFlow";
 import { SessionInspector } from "./inspector/SessionInspector";
+import type { RuntimeEnvProvider } from "./runtime-env";
+import type { SessionAudience } from "./audience";
 
 /**
  * Message submitted when the user implements a plan. References the published
@@ -67,6 +69,27 @@ export interface SessionViewerProps {
    * expandable file tree. (DD-004 capability injection, DD-011 opt-in.)
    */
   readonly workspaceFileLister?: WorkspaceFileLister;
+  /**
+   * Supplies host-app environment variables for every follow-up
+   * execution (e.g. short-lived credentials for MCP tools, minted as
+   * the signed-in user). Evaluated fresh at each send; host values win
+   * over composer-collected env on key collisions. If the provider
+   * throws, the send is blocked and an error banner is shown — see
+   * {@link RuntimeEnvProvider}.
+   */
+  readonly getRuntimeEnv?: RuntimeEnvProvider;
+  /**
+   * Presentation audience for the viewer. `"endUser"` locks the
+   * session's agent and hides the MCP server, skill, and
+   * session-variable configuration in both the composer and the
+   * inspector's Setup tab — for product-embedded chat where the agent
+   * is configured upstream by the platform. The model selector,
+   * interaction mode, attachments, and workspace picker remain. See
+   * {@link SessionAudience}.
+   *
+   * @default "integrator"
+   */
+  readonly audience?: SessionAudience;
   /**
    * Slot for host-injected header actions (e.g., Share button with
    * PermissionGate). Rendered in the top-right corner of the viewer.
@@ -126,12 +149,15 @@ export function SessionViewer({
   enableLocal = false,
   onBrowseLocalFolder,
   workspaceFileLister,
+  getRuntimeEnv,
+  audience = "integrator",
   headerActions,
   onApplied,
   className,
 }: SessionViewerProps) {
-  const flow = useSessionPageFlow({ sessionId, org });
+  const flow = useSessionPageFlow({ sessionId, org, getRuntimeEnv });
   const { conv } = flow;
+  const isEndUser = audience === "endUser";
 
   const [modelId, setModelId] = flow.model;
   const [interactionMode, setInteractionMode] = flow.interactionMode;
@@ -202,6 +228,7 @@ export function SessionViewer({
               enableLocal={enableLocal}
               onBrowseLocalFolder={onBrowseLocalFolder}
               onBuildFromPlan={handleBuildFromPlan}
+              isEndUser={isEndUser}
             />
           }
           secondary={
@@ -216,6 +243,7 @@ export function SessionViewer({
               gitHubConnection={gitHubConnection}
               onBrowseLocalFolder={onBrowseLocalFolder}
               workspaceFileLister={workspaceFileLister}
+              isEndUser={isEndUser}
             />
           }
         />
@@ -241,6 +269,7 @@ interface ConversationColumnProps {
   readonly enableLocal: boolean;
   readonly onBrowseLocalFolder?: () => Promise<string | null>;
   readonly onBuildFromPlan: () => void;
+  readonly isEndUser: boolean;
 }
 
 function ConversationColumn({
@@ -256,8 +285,10 @@ function ConversationColumn({
   enableLocal,
   onBrowseLocalFolder,
   onBuildFromPlan,
+  isEndUser,
 }: ConversationColumnProps) {
   const { conv } = flow;
+  const sendError = flow.submitError ?? conv.sendError ?? conv.approvalError;
 
   return (
     <div className="flex h-full min-w-0 flex-col">
@@ -282,9 +313,7 @@ function ConversationColumn({
             onReconnect={conv.reconnectStream}
           />
         )}
-        {(conv.sendError || conv.approvalError) && (
-          <SendErrorBanner error={(conv.sendError ?? conv.approvalError)!} />
-        )}
+        {sendError && <SendErrorBanner error={sendError} />}
         {flow.autoApproveAll && (
           <AutoApproveIndicator onTurnOff={() => flow.setAutoApproveAll(false)} />
         )}
@@ -309,11 +338,12 @@ function ConversationColumn({
           onAgentRefChange={flow.setAgentRef}
           onAgentResolutionChange={flow.setResolution}
           isDefaultAgent={flow.isDefaultAgent}
-          mcpServerUsages={flow.mcpServerUsages}
-          onMcpServerUsagesChange={flow.setMcpServerUsages}
-          skillRefs={flow.skillRefs}
-          onSkillRefsChange={flow.setSkillRefs}
-          sessionVariables={flow.sessionVariables}
+          lockAgent={isEndUser}
+          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}
           className="px-4 py-3"
         />
       </div>
@@ -337,6 +367,7 @@ interface InspectorPanelProps {
   readonly gitHubConnection?: UseGitHubConnectionReturn;
   readonly onBrowseLocalFolder?: () => Promise<string | null>;
   readonly workspaceFileLister?: WorkspaceFileLister;
+  readonly isEndUser: boolean;
 }
 
 function InspectorPanel({
@@ -350,6 +381,7 @@ function InspectorPanel({
   gitHubConnection,
   onBrowseLocalFolder,
   workspaceFileLister,
+  isEndUser,
 }: InspectorPanelProps) {
   const selectedItem = useSelectedThreadItem();
 
@@ -390,16 +422,20 @@ function InspectorPanel({
       harness: flow.harness,
       executionTarget: flow.executionTarget,
       modelId: flow.model[0],
-      mutations: {
-        onRemoveAgent: flow.isDefaultAgent ? undefined : handleRemoveAgent,
-        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.isDefaultAgent ? undefined : handleRemoveAgent,
+            onRemoveMcp: handleRemoveMcp,
+            onRemoveSkill: handleRemoveSkill,
+          },
     }),
     [
       flow.agentRef, flow.isDefaultAgent, flow.mcpServerUsages, flow.skillRefs,
       flow.sessionVariables, flow.harness, flow.executionTarget, flow.model,
-      handleRemoveAgent, handleRemoveMcp, handleRemoveSkill,
+      isEndUser, handleRemoveAgent, handleRemoveMcp, handleRemoveSkill,
     ],
   );