@stigmer/react 3.0.5 → 3.0.7-dev.20260611143057

package/src/session/__tests__/useSessionPageFlow.runtimeEnv.test.tsx

@@ -0,0 +1,170 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+
+// ---------------------------------------------------------------------------
+// Mocks — useSessionPageFlow composes many hooks; we stub them to isolate the
+// host runtime-env behavior (per-follow-up evaluation, host-wins merge, and
+// fail-fast into submitError before any optimistic UI).
+// ---------------------------------------------------------------------------
+
+const mockSendFollowUp = vi.fn();
+
+const mockConv = {
+  session: { spec: {} },
+  isLoading: false,
+  completedExecutions: [] as unknown[],
+  activeStreamExecution: null,
+  workspaceEntries: [] as unknown[],
+  submitApproval: vi.fn(),
+  sendFollowUp: mockSendFollowUp,
+};
+vi.mock("../useSessionConversation", () => ({
+  useSessionConversation: () => mockConv,
+}));
+
+vi.mock("../../hooks", () => ({
+  useStigmer: () => ({ agent: { getByReference: vi.fn() } }),
+}));
+
+vi.mock("../../agent", () => ({
+  useDefaultAgent: () => ({ agent: null, isLoading: false, error: null }),
+}));
+
+const mockWorkspace = {
+  entries: [],
+  hasEntries: false,
+  toInput: vi.fn().mockReturnValue([]),
+  addGitRepo: vi.fn(),
+  addLocalPath: vi.fn(),
+  removeEntry: vi.fn(),
+  clear: vi.fn(),
+};
+vi.mock("../../workspace", () => ({
+  useWorkspaceEntries: () => mockWorkspace,
+}));
+
+const mockSessionVariables = {
+  variables: [],
+  isEmpty: true,
+  clear: vi.fn(),
+};
+vi.mock("../../execution/useSessionVariables", () => ({
+  useSessionVariables: () => mockSessionVariables,
+}));
+
+vi.mock("../usePersistedModel", () => ({
+  usePersistedModel: () => ["model-x", vi.fn()] as const,
+}));
+
+vi.mock("../useAgentRefFromSession", () => ({
+  useAgentRefFromSession: () => ({ agentRef: null }),
+}));
+
+import { useSessionPageFlow } from "../useSessionPageFlow";
+
+const OPTS = { sessionId: "ses_1", org: "acme" };
+
+describe("useSessionPageFlow — host runtime env (getRuntimeEnv)", () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("merges host env into follow-ups, host wins on collisions", async () => {
+    const getRuntimeEnv = vi.fn().mockResolvedValue({
+      PLATFORM_TOKEN: { value: "fresh-token", isSecret: true },
+    });
+    const { result } = renderHook(() =>
+      useSessionPageFlow({ ...OPTS, getRuntimeEnv }),
+    );
+
+    await act(async () => {
+      await result.current.handleSubmit("follow up", undefined, {
+        runtimeEnv: {
+          PLATFORM_TOKEN: { value: "stale-token", isSecret: true },
+          USER_VAR: { value: "kept" },
+        },
+      });
+    });
+
+    expect(mockSendFollowUp).toHaveBeenCalledTimes(1);
+    expect(mockSendFollowUp.mock.calls[0][1].runtimeEnv).toEqual({
+      PLATFORM_TOKEN: { value: "fresh-token", isSecret: true },
+      USER_VAR: { value: "kept" },
+    });
+  });
+
+  it("evaluates the provider fresh on every follow-up", async () => {
+    let mint = 0;
+    const getRuntimeEnv = vi.fn(() => ({ TOKEN: { value: `token-${++mint}` } }));
+    const { result } = renderHook(() =>
+      useSessionPageFlow({ ...OPTS, getRuntimeEnv }),
+    );
+
+    await act(async () => {
+      await result.current.handleSubmit("first");
+    });
+    await act(async () => {
+      await result.current.handleSubmit("second");
+    });
+
+    expect(getRuntimeEnv).toHaveBeenCalledTimes(2);
+    expect(mockSendFollowUp.mock.calls[0][1].runtimeEnv).toEqual({
+      TOKEN: { value: "token-1" },
+    });
+    expect(mockSendFollowUp.mock.calls[1][1].runtimeEnv).toEqual({
+      TOKEN: { value: "token-2" },
+    });
+  });
+
+  it("blocks the send and sets submitError when the provider throws", async () => {
+    const getRuntimeEnv = vi.fn().mockRejectedValue(new Error("token mint failed"));
+    const { result } = renderHook(() =>
+      useSessionPageFlow({ ...OPTS, getRuntimeEnv }),
+    );
+
+    await act(async () => {
+      await result.current.handleSubmit("follow up");
+    });
+
+    // Nothing was sent: no optimistic message, no session-variable clear.
+    expect(mockSendFollowUp).not.toHaveBeenCalled();
+    expect(mockSessionVariables.clear).not.toHaveBeenCalled();
+    expect(result.current.submitError).toBeInstanceOf(Error);
+    expect(result.current.submitError?.message).toBe("token mint failed");
+  });
+
+  it("clears submitError at the start of the next submission", async () => {
+    const getRuntimeEnv = vi
+      .fn()
+      .mockRejectedValueOnce(new Error("transient failure"))
+      .mockResolvedValue({ TOKEN: { value: "ok" } });
+    const { result } = renderHook(() =>
+      useSessionPageFlow({ ...OPTS, getRuntimeEnv }),
+    );
+
+    await act(async () => {
+      await result.current.handleSubmit("fails");
+    });
+    expect(result.current.submitError).not.toBeNull();
+
+    await act(async () => {
+      await result.current.handleSubmit("succeeds");
+    });
+    expect(result.current.submitError).toBeNull();
+    expect(mockSendFollowUp).toHaveBeenCalledTimes(1);
+  });
+
+  it("passes composer env through untouched when no provider is configured", async () => {
+    const { result } = renderHook(() => useSessionPageFlow(OPTS));
+
+    await act(async () => {
+      await result.current.handleSubmit("follow up", undefined, {
+        runtimeEnv: { USER_VAR: { value: "composer-only" } },
+      });
+    });
+
+    expect(mockSendFollowUp.mock.calls[0][1].runtimeEnv).toEqual({
+      USER_VAR: { value: "composer-only" },
+    });
+  });
+});

package/src/session/audience.ts

@@ -0,0 +1,20 @@
+/**
+ * Who the session organisms (`SessionViewer` / `NewSessionViewer`) are
+ * presented to.
+ *
+ * - `"integrator"` (default) — the full configuration surface: agent
+ *   picker, MCP servers, skills, and session variables. The presentation
+ *   used by the Stigmer Console, where the person at the keyboard is
+ *   composing the session's configuration.
+ * - `"endUser"` — a curated, product-embedded chat. The agent (and its
+ *   MCP servers, skills, and identity) is configured upstream by the
+ *   embedding platform; the end user chats, picks a model, toggles
+ *   Agent/Plan mode, and attaches workspaces, but never reconfigures
+ *   the agent. The organisms lock the agent and hide the integrator
+ *   pickers, in both the composer and the inspector's Setup tab.
+ *
+ * A preset rather than individual flags: "end user" is a product intent,
+ * and keeping it in one place lets the SDK evolve what that presentation
+ * means without breaking embedders.
+ */
+export type SessionAudience = "integrator" | "endUser";

package/src/session/index.ts

@@ -1,6 +1,9 @@
 export { toProtoExecutionTarget, fromProtoExecutionTarget } from "./execution-target";
 export type { ExecutionTargetOption } from "./execution-target";
 
+export type { RuntimeEnvProvider } from "./runtime-env";
+export type { SessionAudience } from "./audience";
+
 export { useCreateSession } from "./useCreateSession";
 export type {
   SharedSessionFields,

package/src/session/runtime-env.ts

@@ -0,0 +1,57 @@
+import type { EnvVarInput } from "@stigmer/sdk";
+
+/**
+ * Host-app callback that supplies environment variables for a single
+ * execution.
+ *
+ * Invoked once per execution, at submit time — never cached — so
+ * short-lived credentials (e.g. a freshly minted platform token scoped
+ * to the signed-in user) are always current when the execution starts.
+ * May return the variables synchronously or via a promise.
+ *
+ * Host-provided values take precedence over composer-collected env on
+ * key collisions: the host injects identity material, and a stale or
+ * user-supplied value must never shadow it.
+ *
+ * If the provider throws (or rejects), the submission is aborted and
+ * the error surfaces through the owning flow's error channel — an
+ * execution never runs with missing or stale credentials.
+ *
+ * @example
+ * ```tsx
+ * <SessionViewer
+ *   sessionId={id}
+ *   org={org}
+ *   getRuntimeEnv={async () => ({
+ *     PLATFORM_TOKEN: { value: await mintShortLivedToken(), isSecret: true },
+ *     PLATFORM_ORG: { value: activeOrg },
+ *   })}
+ * />
+ * ```
+ */
+export type RuntimeEnvProvider = () =>
+  | Promise<Record<string, EnvVarInput>>
+  | Record<string, EnvVarInput>;
+
+/**
+ * Resolves the effective `runtimeEnv` for one execution by merging
+ * composer-collected env with host-provided env from a
+ * {@link RuntimeEnvProvider}.
+ *
+ * Host values win on key collisions (see {@link RuntimeEnvProvider}).
+ * Returns `undefined` when neither source contributes any variables,
+ * so callers can pass the result straight to execution creation.
+ *
+ * Provider errors are intentionally not caught here: callers must
+ * treat a failure as fatal for the submission. Callers without a
+ * provider should pass the composer env through directly rather than
+ * paying this function's await.
+ */
+export async function resolveExecutionRuntimeEnv(
+  getRuntimeEnv: RuntimeEnvProvider,
+  composerEnv: Record<string, EnvVarInput> | undefined,
+): Promise<Record<string, EnvVarInput> | undefined> {
+  const hostEnv = await getRuntimeEnv();
+  const merged = { ...composerEnv, ...hostEnv };
+  return Object.keys(merged).length > 0 ? merged : undefined;
+}

package/src/session/useNewSessionFlow.ts

@@ -16,6 +16,7 @@ import { useCreateAgentExecution } from "../execution/useCreateAgentExecution";
 import type { ExecutionTargetOption } from "./execution-target";
 import { useExecutionTarget } from "../execution-target-context";
 import { useRunnerAdapter } from "../runner-adapter";
+import { resolveExecutionRuntimeEnv, type RuntimeEnvProvider } from "./runtime-env";
 
 const DEFAULT_AGENT_TIMEOUT_MS = 10_000;
 
@@ -55,6 +56,30 @@ export interface UseNewSessionFlowOptions {
    * server decides based on deployment context.
    */
   readonly executionTarget?: ExecutionTargetOption;
+  /**
+   * Supplies host-app environment variables for the session's first
+   * execution. Evaluated once per submission, at submit time, so
+   * short-lived credentials stay fresh; evaluated **before** the session
+   * is created so a credential failure never strands an empty session.
+   *
+   * Host values win over composer-collected env on key collisions. If
+   * the provider throws, the submission fails and the error surfaces
+   * via {@link UseNewSessionFlowReturn.submitError} / {@link onError}.
+   * See {@link RuntimeEnvProvider}.
+   */
+  readonly getRuntimeEnv?: RuntimeEnvProvider;
+  /**
+   * Harness pre-selected for new sessions when the user has not made an
+   * explicit choice yet (e.g. an embedder whose agents primarily run
+   * coding tasks defaults to `"cursor"`).
+   *
+   * Read once on mount. The user's own selection — persisted to
+   * localStorage on explicit change — always takes precedence on
+   * subsequent visits.
+   *
+   * @default DEFAULT_HARNESS ("native")
+   */
+  readonly defaultHarness?: HarnessOption;
 }
 
 /** Return value of {@link useNewSessionFlow}. */
@@ -158,15 +183,18 @@ export interface UseNewSessionFlowReturn {
 export function useNewSessionFlow(
   options: UseNewSessionFlowOptions,
 ): UseNewSessionFlowReturn {
-  const { org, onSessionCreated, onError } = options;
+  const { org, onSessionCreated, onError, getRuntimeEnv, defaultHarness } = options;
   const contextTarget = useExecutionTarget();
   const executionTarget = options.executionTarget ?? contextTarget;
   const adapter = useRunnerAdapter();
 
   const [harness, setHarnessRaw] = useState<HarnessOption>(() => {
-    if (typeof window === "undefined") return DEFAULT_HARNESS;
+    if (typeof window === "undefined") return defaultHarness ?? DEFAULT_HARNESS;
+    // Only explicit user choices are persisted (see setHarness), so a
+    // stored value always outranks the embedder's defaultHarness.
     const stored = localStorage.getItem(STORAGE_KEY_HARNESS);
-    return stored === "cursor" ? "cursor" : DEFAULT_HARNESS;
+    if (stored === "native" || stored === "cursor") return stored;
+    return defaultHarness ?? DEFAULT_HARNESS;
   });
 
   const { getModel, isLoading: isModelsLoading } = useModelRegistry({ harness });
@@ -191,14 +219,12 @@ export function useNewSessionFlow(
 
   const validModelId = modelId && getModel(modelId) ? modelId : undefined;
 
-  // Persist harness on change
-  useEffect(() => {
-    localStorage.setItem(STORAGE_KEY_HARNESS, harness);
-  }, [harness]);
-
   const setHarness = useCallback(
     (h: HarnessOption) => {
       setHarnessRaw(h);
+      // Persist only explicit choices — never the seeded value — so the
+      // embedder's defaultHarness keeps applying until the user decides.
+      localStorage.setItem(STORAGE_KEY_HARNESS, h);
       const storedModel = localStorage.getItem(modelStorageKey(h));
       const plain = storedModel ? (parseModelKey(storedModel)?.modelId ?? storedModel) : undefined;
       setModelId(plain);
@@ -246,6 +272,14 @@ export function useNewSessionFlow(
       setSubmitError(null);
 
       try {
+        // Host env is evaluated per submission (short-lived credentials)
+        // and before session creation, so a credential failure can never
+        // strand an empty session. Without a provider the composer env
+        // passes through untouched — no extra await on the hot path.
+        const runtimeEnv = getRuntimeEnv
+          ? await resolveExecutionRuntimeEnv(getRuntimeEnv, context?.runtimeEnv)
+          : context?.runtimeEnv;
+
         const sessionFields = {
           org,
           workspaceEntries: workspace.hasEntries
@@ -261,7 +295,7 @@ export function useNewSessionFlow(
           org,
           message,
           modelName: selectedModel ?? validModelId,
-          runtimeEnv: context?.runtimeEnv,
+          runtimeEnv,
           attachments: context?.attachments,
           interactionMode: context?.interactionMode,
           workspaceFileRefs: context?.workspaceFileRefs,
@@ -344,6 +378,7 @@ export function useNewSessionFlow(
       harness,
       executionTarget,
       adapter,
+      getRuntimeEnv,
       validModelId,
       workspace,
       mcpServerUsages,

package/src/session/useSessionPageFlow.ts

@@ -14,6 +14,7 @@ import { fromProtoHarness, type HarnessOption } from "../models/harness";
 import { Harness, ExecutionTarget } from "@stigmer/protos/ai/stigmer/agentic/session/v1/enum_pb";
 import { fromProtoExecutionTarget, type ExecutionTargetOption } from "./execution-target";
 import { useSessionConversation, type UseSessionConversationReturn } from "./useSessionConversation";
+import { resolveExecutionRuntimeEnv, type RuntimeEnvProvider } from "./runtime-env";
 import { useAgentRefFromSession } from "./useAgentRefFromSession";
 import { usePersistedModel, type UsePersistedModelReturn } from "./usePersistedModel";
 import { specMcpUsagesToInput, specSkillRefsToInput } from "./session-spec-converters";
@@ -30,6 +31,18 @@ export interface UseSessionPageFlowOptions {
   readonly sessionId: string;
   /** Organization slug. */
   readonly org: string;
+  /**
+   * Supplies host-app environment variables for every follow-up
+   * execution. Evaluated once per follow-up, at send time, so
+   * short-lived credentials stay fresh.
+   *
+   * Host values win over composer-collected env on key collisions. If
+   * the provider throws, the follow-up is aborted before any optimistic
+   * UI or session mutation and the error surfaces via
+   * {@link UseSessionPageFlowReturn.submitError}. See
+   * {@link RuntimeEnvProvider}.
+   */
+  readonly getRuntimeEnv?: RuntimeEnvProvider;
 }
 
 /** Return value of {@link useSessionPageFlow}. */
@@ -128,8 +141,10 @@ export interface UseSessionPageFlowReturn {
 
   /**
    * Submit a follow-up message. Handles agent override resolution
-   * (if the user changed the agent mid-session) and delegates to
-   * `conv.sendFollowUp` with all managed state.
+   * (if the user changed the agent mid-session), evaluates the host
+   * runtime-env provider, and delegates to `conv.sendFollowUp` with
+   * all managed state. Never rejects — pre-send failures land in
+   * {@link submitError}.
    */
   readonly handleSubmit: (
     message: string,
@@ -137,6 +152,17 @@ export interface UseSessionPageFlowReturn {
     context?: SessionComposerSubmitContext,
   ) => Promise<void>;
 
+  /**
+   * Error from the most recent follow-up's pre-send work (agent
+   * override resolution, host runtime-env evaluation), or `null`.
+   *
+   * Distinct from `conv.sendError`, which covers the create-execution
+   * RPC itself. Kept as the raw `Error` so consumers can render
+   * contextual guidance (e.g. secret-flow errors). Cleared at the
+   * start of each submission.
+   */
+  readonly submitError: Error | null;
+
   /**
    * The most relevant execution for sidebar display — the active
    * streaming execution, or the last completed one.
@@ -199,7 +225,7 @@ export interface UseSessionPageFlowReturn {
 export function useSessionPageFlow(
   options: UseSessionPageFlowOptions,
 ): UseSessionPageFlowReturn {
-  const { sessionId, org } = options;
+  const { sessionId, org, getRuntimeEnv } = options;
 
   const stigmer = useStigmer();
   const conv = useSessionConversation(sessionId, org);
@@ -324,27 +350,48 @@ export function useSessionPageFlow(
   // Follow-up submission with agent override
   // -------------------------------------------------------------------------
 
+  const [submitError, setSubmitError] = useState<Error | null>(null);
+
   const handleSubmit = useCallback(
     async (
       message: string,
       selectedModel?: string,
       context?: SessionComposerSubmitContext,
     ) => {
-      let agentInstanceIdOverride: string | undefined;
+      setSubmitError(null);
 
-      if (resolution) {
-        if (
-          resolution.mode === "saved" &&
-          resolution.instanceId !== sessionInstanceId
-        ) {
-          agentInstanceIdOverride = resolution.instanceId;
-        } else if (resolution.mode === "direct" && agentRef) {
-          const agent = await stigmer.agent.getByReference(agentRef);
-          const defaultId = agent.status?.defaultInstanceId;
-          if (defaultId && defaultId !== sessionInstanceId) {
-            agentInstanceIdOverride = defaultId;
+      // Pre-send work runs before conv.sendFollowUp so a failure here
+      // aborts cleanly: no optimistic pending message, no session
+      // mutation. The composer fires this handler without awaiting it,
+      // so a rejection would otherwise be an unhandled rejection —
+      // failures must land in submitError instead.
+      let agentInstanceIdOverride: string | undefined;
+      let runtimeEnv: SessionComposerSubmitContext["runtimeEnv"];
+
+      try {
+        if (resolution) {
+          if (
+            resolution.mode === "saved" &&
+            resolution.instanceId !== sessionInstanceId
+          ) {
+            agentInstanceIdOverride = resolution.instanceId;
+          } else if (resolution.mode === "direct" && agentRef) {
+            const agent = await stigmer.agent.getByReference(agentRef);
+            const defaultId = agent.status?.defaultInstanceId;
+            if (defaultId && defaultId !== sessionInstanceId) {
+              agentInstanceIdOverride = defaultId;
+            }
           }
         }
+
+        // Evaluated per follow-up so short-lived host credentials are
+        // current; host values win over composer-collected env.
+        runtimeEnv = getRuntimeEnv
+          ? await resolveExecutionRuntimeEnv(getRuntimeEnv, context?.runtimeEnv)
+          : context?.runtimeEnv;
+      } catch (err) {
+        setSubmitError(err instanceof Error ? err : new Error(String(err)));
+        return;
       }
 
       conv.sendFollowUp(message, {
@@ -355,7 +402,7 @@ export function useSessionPageFlow(
           : undefined,
         mcpServerUsages: mcpServerUsages.length > 0 ? mcpServerUsages : undefined,
         skillRefs: skillRefs.length > 0 ? skillRefs : undefined,
-        runtimeEnv: context?.runtimeEnv,
+        runtimeEnv,
         attachments: context?.attachments,
         interactionMode: context?.interactionMode,
         // Sourced from the session-scoped preference set at the approval gate,
@@ -366,7 +413,7 @@ export function useSessionPageFlow(
 
       sessionVariables.clear();
     },
-    [conv.sendFollowUp, modelId, workspace, mcpServerUsages, skillRefs, sessionVariables.clear, resolution, agentRef, sessionInstanceId, stigmer, autoApproveAll],
+    [conv.sendFollowUp, modelId, workspace, mcpServerUsages, skillRefs, sessionVariables.clear, resolution, agentRef, sessionInstanceId, stigmer, autoApproveAll, getRuntimeEnv],
   );
 
   // -------------------------------------------------------------------------
@@ -416,6 +463,7 @@ export function useSessionPageFlow(
     setAutoApproveAll,
     submitApproval,
     handleSubmit,
+    submitError,
     displayExecution,
     allExecutions,
     sandboxWorkspaceRoot,

package/src/skill/SkillDetailView.tsx

@@ -235,6 +235,7 @@ export function SkillDetailView({
       kind="skill"
       resourceId={meta.id}
       visibility={meta.visibility}
+      org={meta.org || org}
       onChanged={refetch}
     />
   ) : undefined;

package/src/workflow/WorkflowDetailView.tsx

@@ -262,6 +262,7 @@ export function WorkflowDetailView({
       kind="workflow"
       resourceId={meta.id}
       visibility={meta.visibility}
+      org={meta.org || org}
       onChanged={refetch}
     />
   ) : undefined;

package/src/workflow/instance/CreateWorkflowInstanceDialog.tsx

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

package/src/workflow/instance/WorkflowInstanceDetailPanel.tsx

@@ -10,8 +10,7 @@ import type { ResourceRef } from "@stigmer/sdk";
 import { getUserMessage } from "@stigmer/sdk";
 import { useUpdateWorkflowInstance } from "./useUpdateWorkflowInstance";
 import { useDeleteWorkflowInstance } from "./useDeleteWorkflowInstance";
-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 WorkflowInstanceDetailPanel({
 
   const { update, isUpdating } = useUpdateWorkflowInstance();
   const { deleteInstance, isDeleting } = useDeleteWorkflowInstance();
-  const { updateVisibility, isPending: isVisibilityPending } = useUpdateVisibility("workflowInstance", id || null);
   const { environments } = useEnvironmentList(org);
 
   const [isEditingEnvs, setIsEditingEnvs] = useState(false);
@@ -64,14 +62,6 @@ export function WorkflowInstanceDetailPanel({
   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 WorkflowInstanceDetailPanel({
         {/* Visibility */}
         <div className="px-4 py-3">
           <h4 className="text-xs font-medium text-muted-foreground mb-2">Visibility</h4>
-          <PermissionGate
-            resource={{ kind: "workflow_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="workflowInstance"
+            resourceId={id}
+            visibility={meta?.visibility ?? ApiResourceVisibility.visibility_private}
+            onChanged={onUpdated}
+          />
         </div>
 
         {/* Share Panel */}
@@ -343,12 +324,6 @@ export function WorkflowInstanceDetailPanel({
   );
 }
 
-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">