@stigmer/react 3.0.5 → 3.0.7-dev.20260611143057

package/src/agent-instance/AgentInstanceDetailPanel.tsx

@@ -10,8 +10,7 @@ import type { ResourceRef } from "@stigmer/sdk";
 import { getUserMessage } from "@stigmer/sdk";
 import { useUpdateAgentInstance } from "./useUpdateAgentInstance";
 import { useDeleteAgentInstance } from "./useDeleteAgentInstance";
-import { useUpdateVisibility } from "../library/useUpdateVisibility";
-import { InstanceVisibilitySelector } from "../library/InstanceVisibilitySelector";
+import { ResourceVisibilityControl } from "../library/ResourceVisibilityControl";
 import { PermissionGate } from "../iam-policy/PermissionGate";
 import { SharePanel } from "../iam-policy/SharePanel";
 import { EnvironmentPicker } from "../environment/EnvironmentPicker";
@@ -55,7 +54,6 @@ export function AgentInstanceDetailPanel({
 
   const { update, isUpdating } = useUpdateAgentInstance();
   const { deleteInstance, isDeleting } = useDeleteAgentInstance();
-  const { updateVisibility, isPending: isVisibilityPending } = useUpdateVisibility("agentInstance", id || null);
   const { environments } = useEnvironmentList(org);
 
   const [isEditingEnvs, setIsEditingEnvs] = useState(false);
@@ -64,14 +62,6 @@ export function AgentInstanceDetailPanel({
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [deleteError, setDeleteError] = useState<Error | null>(null);
 
-  const handleVisibilityChange = useCallback(
-    async (v: ApiResourceVisibility) => {
-      await updateVisibility(v);
-      onUpdated?.();
-    },
-    [updateVisibility, onUpdated],
-  );
-
   const handleStartEditEnvs = useCallback(() => {
     const currentRefs: ResourceRef[] = (spec?.environmentRefs ?? []).map((ref) => ({
       org: ref.org || org,
@@ -254,21 +244,12 @@ export function AgentInstanceDetailPanel({
         {/* Visibility */}
         <div className="px-4 py-3">
           <h4 className="text-xs font-medium text-muted-foreground mb-2">Visibility</h4>
-          <PermissionGate
-            resource={{ kind: "agent_instance", id }}
-            relation="can_edit"
-            fallback={
-              <span className="text-sm text-foreground">
-                {VISIBILITY_LABELS[meta?.visibility ?? 0] ?? "Private"}
-              </span>
-            }
-          >
-            <InstanceVisibilitySelector
-              visibility={meta?.visibility ?? ApiResourceVisibility.visibility_private}
-              onVisibilityChange={handleVisibilityChange}
-              isPending={isVisibilityPending}
-            />
-          </PermissionGate>
+          <ResourceVisibilityControl
+            kind="agentInstance"
+            resourceId={id}
+            visibility={meta?.visibility ?? ApiResourceVisibility.visibility_private}
+            onChanged={onUpdated}
+          />
         </div>
 
         {/* Share Panel */}
@@ -344,12 +325,6 @@ export function AgentInstanceDetailPanel({
   );
 }
 
-const VISIBILITY_LABELS: Record<number, string> = {
-  [ApiResourceVisibility.visibility_private]: "Private",
-  [ApiResourceVisibility.visibility_org]: "Organization",
-  [ApiResourceVisibility.visibility_public]: "Public",
-};
-
 function CloseIcon() {
   return (
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">

package/src/agent-instance/AgentInstanceList.tsx

@@ -6,8 +6,7 @@ import type { AgentInstance } from "@stigmer/protos/ai/stigmer/agentic/agentinst
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import { useAgentInstances } from "./useAgentInstances";
 import { useEnvironmentList } from "../environment/useEnvironmentList";
-import { useUpdateVisibility } from "../library/useUpdateVisibility";
-import { InstanceVisibilitySelector } from "../library/InstanceVisibilitySelector";
+import { ResourceVisibilityControl } from "../library/ResourceVisibilityControl";
 import { PermissionGate } from "../iam-policy/PermissionGate";
 import { AgentInstanceEmptyState } from "./AgentInstanceEmptyState";
 
@@ -175,18 +174,9 @@ function InstanceRow({
   const meta = instance.metadata;
   const id = meta?.id ?? "";
   const isPersonal = meta?.labels?.[PERSONAL_LABEL] === "true";
-  const { updateVisibility, isPending } = useUpdateVisibility("agentInstance", id || null);
 
   const envRefs = instance.spec?.environmentRefs ?? [];
 
-  const handleVisibilityChange = useCallback(
-    async (v: ApiResourceVisibility) => {
-      await updateVisibility(v);
-      refetch();
-    },
-    [updateVisibility, refetch],
-  );
-
   return (
     <tr
       className={cn(
@@ -245,21 +235,12 @@ function InstanceRow({
 
       <td className="px-4 py-2.5" onClick={(e) => e.stopPropagation()}>
         {id ? (
-          <PermissionGate
-            resource={{ kind: "agent_instance", id }}
-            relation="can_edit"
-            fallback={
-              <span className="text-xs text-muted-foreground">
-                {VISIBILITY_LABELS[meta?.visibility ?? 0] ?? "Private"}
-              </span>
-            }
-          >
-            <InstanceVisibilitySelector
-              visibility={meta?.visibility ?? ApiResourceVisibility.visibility_private}
-              onVisibilityChange={handleVisibilityChange}
-              isPending={isPending}
-            />
-          </PermissionGate>
+          <ResourceVisibilityControl
+            kind="agentInstance"
+            resourceId={id}
+            visibility={meta?.visibility ?? ApiResourceVisibility.visibility_private}
+            onChanged={refetch}
+          />
         ) : (
           <span className="text-xs text-muted-foreground">{"\u2014"}</span>
         )}
@@ -304,12 +285,6 @@ function InstanceRow({
   );
 }
 
-const VISIBILITY_LABELS: Record<number, string> = {
-  [ApiResourceVisibility.visibility_private]: "Private",
-  [ApiResourceVisibility.visibility_org]: "Organization",
-  [ApiResourceVisibility.visibility_public]: "Public",
-};
-
 function LoadingSkeleton() {
   return (
     <div className="space-y-2 py-4">

package/src/agent-instance/CreateAgentInstanceDialog.tsx

@@ -203,6 +203,7 @@ export function CreateAgentInstanceDialog({
             <InstanceVisibilitySelector
               visibility={visibility}
               onVisibilityChange={setVisibility}
+              mode="create"
               disabled={isCreating}
             />
           </div>

package/src/composer/SessionComposer.tsx

@@ -309,6 +309,21 @@ export interface SessionComposerProps {
    */
   readonly isDefaultAgent?: boolean;
 
+  /**
+   * Lock the current agent: the Agent entry is removed from the
+   * Configure menu so the user cannot swap or deselect it.
+   *
+   * Locking does not unwire the agent machinery — `initialAgentRef`
+   * resolution still runs on mount, and when the agent requires
+   * credentials the environment form stays reachable in the Configure
+   * menu until setup completes (lock ≠ unwire). Pair with
+   * `initialAgentRef` to pin a pre-configured agent in end-user-facing
+   * embeds (see `SessionViewer` / `NewSessionViewer` `audience`).
+   *
+   * @default false
+   */
+  readonly lockAgent?: boolean;
+
   /**
    * Currently selected MCP server usages.
    * When `onMcpServerUsagesChange` is provided, a MCP server trigger
@@ -496,6 +511,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
   initialAgentRef,
   initialInstanceId,
   isDefaultAgent = false,
+  lockAgent = false,
   mcpServerUsages,
   onMcpServerUsagesChange,
   skillRefs,
@@ -1140,13 +1156,19 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
         (agentSetup.state.status === "needsEnvVars" ||
           agentSetup.state.status === "resolving" ||
           agentSetup.state.status === "submitting");
-      items.push({
-        id: "agent",
-        icon: <AgentIcon />,
-        label: "Agent",
-        count: agentRef || agentPending ? 1 : 0,
-        hasWarning: agentPending && agentSetup.state.status === "needsEnvVars",
-      });
+      // A locked agent stays out of the menu unless setup is pending:
+      // the env-collection form lives in this panel and must remain
+      // reachable until the agent resolves (lock ≠ unwire). Once
+      // resolved, the entry disappears and the agent cannot be swapped.
+      if (!lockAgent || agentPending) {
+        items.push({
+          id: "agent",
+          icon: <AgentIcon />,
+          label: "Agent",
+          count: agentRef || agentPending ? 1 : 0,
+          hasWarning: agentPending && agentSetup.state.status === "needsEnvVars",
+        });
+      }
     }
     if (showMcp) {
       items.push({
@@ -1174,7 +1196,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
       });
     }
     return items;
-  }, [showAgent, agentRef, agentSetup.state, showMcp, mcpCount, mcpSetup.needsSetupCount, showSkills, skillCount, showSessionVars, sessionVarCount]);
+  }, [showAgent, lockAgent, agentRef, agentSetup.state, showMcp, mcpCount, mcpSetup.needsSetupCount, showSkills, skillCount, showSessionVars, sessionVarCount]);
 
   const renderConfigPanel = useCallback(
     (panelId: string): React.ReactNode => {

package/src/composer/__tests__/SessionComposer-lockAgent.test.tsx

@@ -0,0 +1,150 @@
+import { describe, it, expect, vi, beforeAll, beforeEach, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import type { ReactNode } from "react";
+import type { Stigmer } from "@stigmer/sdk";
+import { StigmerContext } from "../../context";
+import { ModelRegistryContext } from "../../models/ModelRegistryContext";
+
+// 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,
+}));
+
+// Controllable agent-setup state — lets these tests drive the lock × setup
+// matrix directly instead of exercising the full resolution state machine
+// (which is covered by useAgentSetup's own tests).
+const mockAgentSetup = {
+  state: { status: "idle" } as Record<string, unknown>,
+  resolveAgent: vi.fn(),
+  resolveToInstance: vi.fn(),
+  submitEnvVars: vi.fn(),
+  reset: vi.fn(),
+};
+vi.mock("../../agent/useAgentSetup", () => ({
+  useAgentSetup: () => mockAgentSetup,
+}));
+
+import { SessionComposer } from "../SessionComposer";
+
+// 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() {}
+      };
+  }
+});
+
+function createMinimalStigmerMock(): Stigmer {
+  return {
+    agentExecution: { uploadAttachment: vi.fn() },
+    environment: { getPersonal: vi.fn().mockResolvedValue(null) },
+    baseUrl: "http://localhost:8080",
+    getAuthCredential: vi.fn().mockResolvedValue("test-token"),
+    config: {
+      baseUrl: "http://localhost:8080",
+      getAccessToken: vi.fn().mockResolvedValue(""),
+    },
+  } as unknown as Stigmer;
+}
+
+function createWrapper(client: Stigmer) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <StigmerContext.Provider value={client}>
+        <ModelRegistryContext.Provider
+          value={{ models: [], isLoading: false, error: null, refetch: vi.fn() }}
+        >
+          {children}
+        </ModelRegistryContext.Provider>
+      </StigmerContext.Provider>
+    );
+  };
+}
+
+function renderComposer(
+  props?: Partial<React.ComponentProps<typeof SessionComposer>>,
+) {
+  const client = createMinimalStigmerMock();
+  return render(
+    <SessionComposer
+      onSubmit={vi.fn()}
+      org="acme"
+      agentRef={null}
+      onAgentRefChange={vi.fn()}
+      onSkillRefsChange={vi.fn()}
+      skillRefs={[]}
+      {...props}
+    />,
+    { wrapper: createWrapper(client) },
+  );
+}
+
+function openConfigureMenu() {
+  fireEvent.click(
+    screen.getByRole("button", { name: "Configure agent, tools, and skills" }),
+  );
+}
+
+beforeEach(() => {
+  mockAgentSetup.state = { status: "idle" };
+});
+
+afterEach(cleanup);
+
+describe("SessionComposer — lockAgent", () => {
+  it("shows the Agent entry in the Configure menu by default", () => {
+    renderComposer();
+    openConfigureMenu();
+
+    expect(screen.getByRole("menuitem", { name: /Agent/ })).toBeTruthy();
+  });
+
+  it("hides the Agent entry when locked, leaving other entries intact", () => {
+    renderComposer({
+      lockAgent: true,
+      agentRef: { org: "acme", slug: "support-bot" },
+    });
+    openConfigureMenu();
+
+    expect(screen.queryByRole("menuitem", { name: /Agent/ })).toBeNull();
+    expect(screen.getByRole("menuitem", { name: /Skills/ })).toBeTruthy();
+  });
+
+  it("keeps the Agent entry reachable while a locked agent needs env vars", () => {
+    // A pinned agent that requires credentials: resolution is pending and
+    // the env form lives in the Configure > Agent panel — lock ≠ unwire.
+    mockAgentSetup.state = {
+      status: "needsEnvVars",
+      agentName: "Support Bot",
+      agentRef: { org: "acme", slug: "support-bot" },
+      missingVariables: [{ key: "API_KEY", isSecret: true }],
+      error: null,
+    };
+    renderComposer({ lockAgent: true });
+
+    // The composer surfaces the pending setup both as a warning banner...
+    expect(screen.getByText("Agent needs configuration before use")).toBeTruthy();
+
+    // ...and as a (warning-marked) Configure menu entry, despite the lock.
+    openConfigureMenu();
+    expect(screen.getByRole("menuitem", { name: /Agent/ })).toBeTruthy();
+  });
+
+  it("removes the Agent entry once the locked agent has resolved", () => {
+    mockAgentSetup.state = { status: "idle" };
+    renderComposer({
+      lockAgent: true,
+      agentRef: { org: "acme", slug: "support-bot" },
+    });
+
+    expect(screen.queryByText("Agent needs configuration before use")).toBeNull();
+    openConfigureMenu();
+    expect(screen.queryByRole("menuitem", { name: /Agent/ })).toBeNull();
+  });
+});

package/src/index.ts

@@ -150,6 +150,8 @@ export type {
   SearchResultGroup,
   SessionViewerProps,
   NewSessionViewerProps,
+  RuntimeEnvProvider,
+  SessionAudience,
   SessionInspectorProps,
   SessionInspectorTabId,
   UseSessionInspectorOptions,
@@ -853,7 +855,11 @@ export {
   useExportResource,
   useImportResource,
   ImportResourceDialog,
-  VisibilityToggle,
+  VisibilitySelector,
+  VisibilityBadge,
+  blueprintVisibilityLevels,
+  INSTANCE_VISIBILITY_LEVELS,
+  visibilityLabel,
   useUpdateVisibility,
 } from "./library";
 export type {
@@ -873,7 +879,9 @@ export type {
   ImportPreview,
   UseImportResourceReturn,
   ImportResourceDialogProps,
-  VisibilityToggleProps,
+  VisibilitySelectorProps,
+  VisibilityLevelOption,
+  BlueprintVisibilityLevelsContext,
   VisibilityResourceKind,
   UseUpdateVisibilityReturn,
 } from "./library";