@stigmer/react 3.0.5 → 3.0.7-dev.20260611143057

package/src/library/InstanceVisibilitySelector.tsx

@@ -1,18 +1,29 @@
 "use client";
 
-import { useCallback, useRef, useState } from "react";
-import { cn } from "@stigmer/theme";
-import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
+import type { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
+import {
+  VisibilitySelector,
+  type VisibilitySelectorMode,
+} from "./VisibilitySelector";
+import { INSTANCE_VISIBILITY_LEVELS } from "./visibilityLevels";
 
 /** Props for {@link InstanceVisibilitySelector}. */
 export interface InstanceVisibilitySelectorProps {
   /** Current visibility of the instance. */
   readonly visibility: ApiResourceVisibility;
   /**
-   * Called when the user confirms a visibility change.
-   * Escalating visibility (to org or public) shows an inline confirmation.
+   * Called when the user selects (and, for escalations in `"manage"` mode,
+   * confirms) a visibility change. Escalating to Organization shows a light
+   * inline confirm; escalating to Public opens a blocking confirm dialog.
    */
   readonly onVisibilityChange: (v: ApiResourceVisibility) => void;
+  /**
+   * Presentation + confirmation mode, forwarded to {@link VisibilitySelector}.
+   * Use `"create"` when picking an initial value inside a create dialog
+   * (inline list, applies immediately); defaults to `"manage"` (popover with
+   * escalation confirmation) for live instances.
+   */
+  readonly mode?: VisibilitySelectorMode;
   /** Shows a spinner/disabled state while the RPC is in flight. */
   readonly isPending?: boolean;
   /** Disables all interaction (e.g., when the user lacks can_edit). */
@@ -21,303 +32,53 @@ export interface InstanceVisibilitySelectorProps {
   readonly className?: string;
 }
 
-const OPTIONS: readonly {
-  readonly value: ApiResourceVisibility;
-  readonly label: string;
-  readonly description: string;
-}[] = [
-  {
-    value: ApiResourceVisibility.visibility_private,
-    label: "Private",
-    description: "Only you can access",
-  },
-  {
-    value: ApiResourceVisibility.visibility_org,
-    label: "Organization",
-    description: "All org members can view executions",
-  },
-  {
-    value: ApiResourceVisibility.visibility_public,
-    label: "Public",
-    description: "All authenticated users can view",
-  },
-];
-
 /**
- * Three-state visibility selector for instances (AgentInstance,
- * WorkflowInstance).
+ * Visibility selector for instances (AgentInstance, WorkflowInstance):
+ * {@link VisibilitySelector} preconfigured with the instance level set
+ * (Private / Organization / Public — platform is excluded by design to
+ * preserve tenant isolation).
  *
- * Unlike the binary {@link VisibilityToggle} used for blueprints,
- * instances support the full visibility spectrum: Private, Organization,
- * and Public. Escalating visibility (private -> org, or any -> public)
- * shows an inline confirmation prompt since expanding access is
- * consequential.
+ * For workflow instances, ORG visibility has cascading effects: all org
+ * members automatically see all executions via FGA inheritance (zero
+ * per-execution tuples needed).
  *
- * For workflow instances, ORG visibility has cascading effects:
- * all org members automatically see all executions via FGA
- * inheritance (zero per-execution tuples needed).
- *
- * WAI-ARIA Radio Group with roving tabindex. All visual properties
- * flow through `--stgm-*` design tokens.
+ * For live instances, prefer {@link ResourceVisibilityControl} (which adds
+ * the read-only {@link VisibilityBadge} fallback for non-editors). This thin
+ * preset is used directly when picking an initial value inside a create
+ * dialog, where `mode="create"` renders an inline list instead of a popover
+ * (a portaled popover would stack beneath a native `<dialog>`'s top layer).
  *
  * @example
  * ```tsx
- * const { updateVisibility, isPending } = useUpdateVisibility(
- *   "workflowInstance",
- *   instance.metadata.id,
+ * const [visibility, setVisibility] = useState(
+ *   ApiResourceVisibility.visibility_private,
  * );
  *
  * <InstanceVisibilitySelector
- *   visibility={instance.metadata.visibility}
- *   onVisibilityChange={updateVisibility}
- *   isPending={isPending}
+ *   mode="create"
+ *   visibility={visibility}
+ *   onVisibilityChange={setVisibility}
  * />
  * ```
  */
 export function InstanceVisibilitySelector({
   visibility,
   onVisibilityChange,
+  mode,
   isPending = false,
   disabled = false,
   className,
 }: InstanceVisibilitySelectorProps) {
-  const [confirming, setConfirming] = useState<ApiResourceVisibility | null>(
-    null,
-  );
-  const optionRefs = useRef<(HTMLButtonElement | null)[]>([]);
-  const effectivelyDisabled = disabled || isPending;
-
-  const isEscalation = useCallback(
-    (target: ApiResourceVisibility) => {
-      const order = [
-        ApiResourceVisibility.visibility_private,
-        ApiResourceVisibility.visibility_org,
-        ApiResourceVisibility.visibility_public,
-      ];
-      return order.indexOf(target) > order.indexOf(visibility);
-    },
-    [visibility],
-  );
-
-  const handleSelect = useCallback(
-    (value: ApiResourceVisibility) => {
-      if (value === visibility) return;
-
-      if (isEscalation(value)) {
-        setConfirming(value);
-        return;
-      }
-
-      onVisibilityChange(value);
-    },
-    [visibility, onVisibilityChange, isEscalation],
-  );
-
-  const confirmChange = useCallback(() => {
-    if (confirming === null) return;
-    setConfirming(null);
-    onVisibilityChange(confirming);
-  }, [confirming, onVisibilityChange]);
-
-  const cancelConfirm = useCallback(() => {
-    setConfirming(null);
-  }, []);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => {
-      let nextIndex: number | null = null;
-
-      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
-        e.preventDefault();
-        nextIndex = (index + 1) % OPTIONS.length;
-      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
-        e.preventDefault();
-        nextIndex = (index - 1 + OPTIONS.length) % OPTIONS.length;
-      }
-
-      if (nextIndex !== null) {
-        optionRefs.current[nextIndex]?.focus();
-        handleSelect(OPTIONS[nextIndex].value);
-      }
-    },
-    [handleSelect],
-  );
-
-  const confirmingOption = confirming
-    ? OPTIONS.find((o) => o.value === confirming)
-    : null;
-
-  return (
-    <div className={cn("inline-flex flex-col gap-1.5", className)}>
-      <div
-        role="radiogroup"
-        aria-label="Instance visibility"
-        aria-disabled={effectivelyDisabled || undefined}
-        className={cn(
-          "inline-flex rounded-md bg-muted p-0.5",
-          effectivelyDisabled && "pointer-events-none opacity-50",
-        )}
-      >
-        {OPTIONS.map((option, index) => {
-          const isSelected = visibility === option.value;
-
-          return (
-            <button
-              key={option.value}
-              ref={(el) => {
-                optionRefs.current[index] = el;
-              }}
-              type="button"
-              role="radio"
-              aria-checked={isSelected}
-              aria-label={`${option.label}: ${option.description}`}
-              tabIndex={isSelected ? 0 : -1}
-              disabled={effectivelyDisabled}
-              onClick={() => handleSelect(option.value)}
-              onKeyDown={(e) => handleKeyDown(e, index)}
-              className={cn(
-                "inline-flex cursor-pointer items-center gap-1 rounded-sm px-2.5 py-1 text-xs font-medium transition-colors",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                isSelected
-                  ? getSelectedStyle(option.value)
-                  : "text-muted-foreground hover:text-foreground",
-              )}
-            >
-              {isPending && isSelected ? (
-                <span
-                  className="inline-block size-3 animate-spin rounded-full border-2 border-current border-t-transparent"
-                  aria-hidden="true"
-                />
-              ) : (
-                getIcon(option.value)
-              )}
-              {option.label}
-            </button>
-          );
-        })}
-      </div>
-
-      {/* Description of current state */}
-      {!confirming && (
-        <p className="text-[0.65rem] text-muted-foreground">
-          {OPTIONS.find((o) => o.value === visibility)?.description}
-        </p>
-      )}
-
-      {/* Confirmation prompt for escalation */}
-      {confirming !== null && confirmingOption && (
-        <div
-          className={cn(
-            "flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs",
-            confirming === ApiResourceVisibility.visibility_public
-              ? "border-amber-200 bg-amber-50 dark:border-amber-800/50 dark:bg-amber-950/30"
-              : "border-blue-200 bg-blue-50 dark:border-blue-800/50 dark:bg-blue-950/30",
-          )}
-          role="alert"
-        >
-          <span
-            className={cn(
-              confirming === ApiResourceVisibility.visibility_public
-                ? "text-amber-800 dark:text-amber-200"
-                : "text-blue-800 dark:text-blue-200",
-            )}
-          >
-            {confirming === ApiResourceVisibility.visibility_public
-              ? "Make visible to all authenticated users?"
-              : "Make visible to all org members?"}
-          </span>
-          <button
-            type="button"
-            onClick={confirmChange}
-            className={cn(
-              "rounded px-2 py-0.5 text-xs font-medium text-white",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              confirming === ApiResourceVisibility.visibility_public
-                ? "bg-amber-600 hover:bg-amber-700 dark:bg-amber-600 dark:hover:bg-amber-500"
-                : "bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500",
-            )}
-          >
-            Confirm
-          </button>
-          <button
-            type="button"
-            onClick={cancelConfirm}
-            className={cn(
-              "rounded px-2 py-0.5 text-xs font-medium",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              confirming === ApiResourceVisibility.visibility_public
-                ? "text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100"
-                : "text-blue-700 hover:text-blue-900 dark:text-blue-300 dark:hover:text-blue-100",
-            )}
-          >
-            Cancel
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function getSelectedStyle(value: ApiResourceVisibility): string {
-  switch (value) {
-    case ApiResourceVisibility.visibility_private:
-      return "bg-amber-50 text-amber-800 shadow-sm dark:bg-amber-900/30 dark:text-amber-300";
-    case ApiResourceVisibility.visibility_org:
-      return "bg-blue-100 text-blue-800 shadow-sm dark:bg-blue-900/40 dark:text-blue-300";
-    case ApiResourceVisibility.visibility_public:
-      return "bg-emerald-100 text-emerald-800 shadow-sm dark:bg-emerald-900/40 dark:text-emerald-300";
-    default:
-      return "bg-background text-foreground shadow-sm";
-  }
-}
-
-function getIcon(value: ApiResourceVisibility) {
-  switch (value) {
-    case ApiResourceVisibility.visibility_private:
-      return <LockIcon className="size-3" />;
-    case ApiResourceVisibility.visibility_org:
-      return <UsersIcon className="size-3" />;
-    case ApiResourceVisibility.visibility_public:
-      return <GlobeIcon className="size-3" />;
-    default:
-      return null;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Icons
-// ---------------------------------------------------------------------------
-
-function LockIcon({ className }: { readonly className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-      <rect x="3.5" y="7" width="9" height="7" rx="1.5" />
-      <path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2" />
-    </svg>
-  );
-}
-
-function UsersIcon({ className }: { readonly className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-      <circle cx="6" cy="5" r="2.5" />
-      <path d="M2 13c0-2.21 1.79-4 4-4s4 1.79 4 4" />
-      <circle cx="11.5" cy="5.5" r="2" />
-      <path d="M14 13c0-1.66-1.12-3-2.5-3-.5 0-1 .14-1.4.4" />
-    </svg>
-  );
-}
-
-function GlobeIcon({ className }: { readonly className?: string }) {
   return (
-    <svg className={className} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-      <circle cx="8" cy="8" r="6" />
-      <path d="M2 8h12" />
-      <path d="M8 2c1.66 1.46 2.6 3.63 2.6 6s-.94 4.54-2.6 6c-1.66-1.46-2.6-3.63-2.6-6s.94-4.54 2.6-6Z" />
-    </svg>
+    <VisibilitySelector
+      visibility={visibility}
+      options={INSTANCE_VISIBILITY_LEVELS}
+      onVisibilityChange={onVisibilityChange}
+      mode={mode}
+      isPending={isPending}
+      disabled={disabled}
+      ariaLabel="Instance visibility"
+      className={className}
+    />
   );
 }

package/src/library/ResourceVisibilityControl.tsx

@@ -2,8 +2,14 @@
 
 import { useCallback } from "react";
 import type { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
+import { useDeploymentMode } from "../deployment-mode";
 import { PermissionGate } from "../iam-policy/PermissionGate";
-import { VisibilityBadge, VisibilityToggle } from "./VisibilityToggle";
+import { useSsoProvider } from "../identity-provider/useSsoProvider";
+import { VisibilityBadge, VisibilitySelector } from "./VisibilitySelector";
+import {
+  blueprintVisibilityLevels,
+  INSTANCE_VISIBILITY_LEVELS,
+} from "./visibilityLevels";
 import {
   useUpdateVisibility,
   type VisibilityResourceKind,
@@ -24,6 +30,11 @@ const FGA_KIND: Record<VisibilityResourceKind, string> = {
   workflowInstance: "workflow_instance",
 };
 
+const INSTANCE_KINDS: ReadonlySet<VisibilityResourceKind> = new Set([
+  "agentInstance",
+  "workflowInstance",
+]);
+
 /** Props for {@link ResourceVisibilityControl}. */
 export interface ResourceVisibilityControlProps {
   /** Resource kind, selecting both the updateVisibility RPC and the FGA type. */
@@ -32,6 +43,13 @@ export interface ResourceVisibilityControlProps {
   readonly resourceId: string;
   /** Current visibility of the resource. */
   readonly visibility: ApiResourceVisibility;
+  /**
+   * Slug of the organization that OWNS the resource (`metadata.org`).
+   * Used to look up whether the org operates an IdentityProvider, which
+   * gates the Platform option for blueprints. When omitted, Platform is
+   * simply not offered (the other levels need no org context).
+   */
+  readonly org?: string;
   /**
    * Called after a successful visibility change so the host can refresh the
    * resource (e.g. `refetch`) and reflect the new state.
@@ -46,24 +64,50 @@ export interface ResourceVisibilityControlProps {
  *
  * Behavior:
  * - Always renders a legible state: a read-only {@link VisibilityBadge}
- *   (Private/Public) is shown to viewers without `can_edit` and while the
+ *   (all four levels) is shown to viewers without `can_edit` and while the
  *   permission check is in flight — never a silent blank.
- * - Upgrades to the interactive {@link VisibilityToggle} for users with
+ * - Upgrades to the interactive {@link VisibilitySelector} for users with
  *   `can_edit`, persisting changes via {@link useUpdateVisibility} and invoking
  *   {@link ResourceVisibilityControlProps.onChanged} on success.
  *
- * Blueprints (agent/workflow/skill/mcp_server) expose Private/Public; the toggle
- * intentionally offers only those two levels (org-scoped sharing for instances is
- * handled by `InstanceVisibilitySelector`).
+ * Offered levels are kind- and context-aware (`visibilityLevels.ts`):
+ * - Blueprints (agent/workflow/skill/mcp_server): Private / Organization /
+ *   Public, plus Platform when the deployment is `cloud` AND the owning org
+ *   operates an IdentityProvider (checked via {@link useSsoProvider}, the
+ *   only permission-free IdP lookup — blueprint owners editing visibility
+ *   are not necessarily org admins). In `local` mode (OSS Go backend) the
+ *   set collapses to Private / Public.
+ * - Instances: Private / Organization / Public — platform is excluded by
+ *   design to preserve tenant isolation.
+ *
+ * The backend remains the enforcer (`ValidateVisibilityStep` rejects
+ * platform without an IdP); the gate here only prevents offering an option
+ * that is guaranteed to fail.
  */
 export function ResourceVisibilityControl({
   kind,
   resourceId,
   visibility,
+  org,
   onChanged,
   className,
 }: ResourceVisibilityControlProps) {
   const { updateVisibility, isPending } = useUpdateVisibility(kind, resourceId);
+  const deploymentMode = useDeploymentMode();
+
+  const isInstance = INSTANCE_KINDS.has(kind);
+  // The IdP lookup only matters for blueprints in cloud mode; passing null
+  // makes the hook a stable no-op everywhere else.
+  const idpLookupOrg =
+    !isInstance && deploymentMode === "cloud" ? (org ?? null) : null;
+  const { ssoProvider } = useSsoProvider(idpLookupOrg);
+
+  const options = isInstance
+    ? INSTANCE_VISIBILITY_LEVELS
+    : blueprintVisibilityLevels({
+        deploymentMode,
+        hasIdentityProvider: ssoProvider !== null,
+      });
 
   const handleChange = useCallback(
     async (next: ApiResourceVisibility) => {
@@ -72,7 +116,7 @@ export function ResourceVisibilityControl({
         onChanged?.();
       } catch {
         // The RPC error is captured in useUpdateVisibility's `error` state;
-        // swallow here so the toggle's promise settles without an unhandled
+        // swallow here so the selector's promise settles without an unhandled
         // rejection. Surfacing a toast is the host app's concern.
       }
     },
@@ -88,10 +132,12 @@ export function ResourceVisibilityControl({
       fallback={badge}
       loading={badge}
     >
-      <VisibilityToggle
+      <VisibilitySelector
         visibility={visibility}
+        options={options}
         onVisibilityChange={handleChange}
         isPending={isPending}
+        ariaLabel={isInstance ? "Instance visibility" : "Resource visibility"}
         className={className}
       />
     </PermissionGate>

package/src/library/ScopeToggle.tsx

@@ -48,7 +48,7 @@ const OPTIONS: readonly {
  *
  * Renders as a WAI-ARIA Radio Group with roving tabindex and
  * arrow-key navigation. Follows the same visual pattern as
- * {@link VisibilityToggle}.
+ * {@link VisibilitySelector}.
  *
  * The component is controlled — the consumer owns the `value` state
  * and handles persistence (e.g., localStorage).