@stigmer/react 3.0.7 → 3.0.8-dev.20260612073024

package/src/workflow/WorkflowExecutionHeader.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { memo, useMemo } from "react";
+import { memo, useMemo, type ReactNode } from "react";
 import type { WorkflowExecution } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/api_pb";
 import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/enum_pb";
 import { cn } from "@stigmer/theme";
@@ -21,6 +21,12 @@ export interface WorkflowExecutionHeaderProps {
   readonly isDiagnosing?: boolean;
   /** Called when the user clicks "Compare with..." on a terminal execution. */
   readonly onCompare?: () => void;
+  /**
+   * Host-supplied action elements rendered at the trailing edge of the
+   * header (e.g. a Share control). Kept routing/auth-agnostic per DD-004 —
+   * the SDK renders the slot; the host owns its behavior.
+   */
+  readonly headerActions?: ReactNode;
   readonly className?: string;
 }
 
@@ -53,6 +59,7 @@ export const WorkflowExecutionHeader = memo(function WorkflowExecutionHeader({
   onDiagnose,
   isDiagnosing,
   onCompare,
+  headerActions,
   className,
 }: WorkflowExecutionHeaderProps) {
   const phase = execution.status?.phase ?? ExecutionPhase.EXECUTION_PHASE_UNSPECIFIED;
@@ -160,6 +167,10 @@ export const WorkflowExecutionHeader = memo(function WorkflowExecutionHeader({
             />
           </>
         )}
+
+        {headerActions && (
+          <div className="relative flex items-center">{headerActions}</div>
+        )}
       </div>
     </header>
   );

package/src/workflow/WorkflowExecutionViewer.tsx

@@ -42,8 +42,13 @@ export interface WorkflowExecutionViewerProps {
    * application handles navigation to the workflow editor (DD-004).
    */
   readonly onNavigateToWorkflowEditor?: (yaml: string, workflowSlug: string) => void;
-  /** Additional action elements to render in the header. */
+  /** Additional action elements to render in the sidebar inspector footer. */
   readonly additionalActions?: ReactNode;
+  /**
+   * Host-supplied action elements rendered in the header action group
+   * (e.g. a Share control). Routing/auth-agnostic per DD-004.
+   */
+  readonly headerActions?: ReactNode;
   /**
    * Whether task nodes in the execution graph can be dragged to
    * rearrange the layout for presentations. Drag positions are
@@ -80,6 +85,7 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
   onNavigateToAgentExecution,
   onNavigateToWorkflowEditor,
   additionalActions,
+  headerActions,
   nodesDraggable,
   className,
 }: WorkflowExecutionViewerProps) {
@@ -268,6 +274,7 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
         onDiagnose={org ? handleDiagnose : undefined}
         isDiagnosing={showDiagnosis}
         onCompare={handleOpenComparePicker}
+        headerActions={headerActions}
       />
 
       {/* Comparison picker dialog */}

package/src/workflow/index.ts

@@ -705,6 +705,8 @@ export {
   type UseCreateWorkflowInstanceReturn,
   useUpdateWorkflowInstance,
   type UseUpdateWorkflowInstanceReturn,
+  useUpdateWorkflowInstanceExecutionVisibility,
+  type UseUpdateWorkflowInstanceExecutionVisibilityReturn,
   useDeleteWorkflowInstance,
   type UseDeleteWorkflowInstanceReturn,
   WorkflowInstanceEmptyState,
@@ -715,6 +717,8 @@ export {
   type CreateWorkflowInstanceDialogProps,
   WorkflowInstanceDetailPanel,
   type WorkflowInstanceDetailPanelProps,
+  RunVisibilityControl,
+  type RunVisibilityControlProps,
 } from "./instance";
 
 // Execution Comparison — run-vs-run comparison

package/src/workflow/instance/RunVisibilityControl.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useCallback } from "react";
+import { cn } from "@stigmer/theme";
+import { WorkflowExecutionVisibility } from "@stigmer/protos/ai/stigmer/agentic/workflowinstance/v1/spec_pb";
+import { getUserMessage } from "@stigmer/sdk";
+import { useUpdateWorkflowInstanceExecutionVisibility } from "./useUpdateWorkflowInstanceExecutionVisibility";
+
+/** Props for {@link RunVisibilityControl}. */
+export interface RunVisibilityControlProps {
+  /** Id of the workflow instance whose run visibility is edited. */
+  readonly instanceId: string;
+  /** Current `execution_visibility` from the instance spec. */
+  readonly executionVisibility: WorkflowExecutionVisibility;
+  /** Called after a successful change so the host can refresh the instance. */
+  readonly onChanged?: () => void;
+}
+
+interface RunVisibilityOption {
+  readonly value: WorkflowExecutionVisibility;
+  readonly label: string;
+  readonly description: string;
+}
+
+const RUN_VISIBILITY_OPTIONS: readonly RunVisibilityOption[] = [
+  {
+    value: WorkflowExecutionVisibility.private,
+    label: "Only the person who runs it",
+    description: "Each run is visible only to whoever started it (and explicit shares).",
+  },
+  {
+    value: WorkflowExecutionVisibility.organization,
+    label: "All organization members",
+    description: "Everyone in the organization can observe every run of this instance.",
+  },
+];
+
+/**
+ * Segmented control for an instance's run (execution) visibility — a separate
+ * axis from the instance's own visibility: an owner can keep the instance
+ * private while letting the whole org observe its runs.
+ *
+ * Writes the `execution_visibility` spec field via the dedicated RPC, which
+ * reconciles the dormant `workflow_instance#execution_viewer` FGA relation in
+ * Cloud mode. `unspecified` is treated as private (the default).
+ *
+ * Only meaningful while the instance itself is private; an ORG/PUBLIC instance
+ * already exposes its runs to org members by inheritance, so callers should
+ * render this only in the private case.
+ */
+export function RunVisibilityControl({
+  instanceId,
+  executionVisibility,
+  onChanged,
+}: RunVisibilityControlProps) {
+  const { updateExecutionVisibility, isUpdating, error } =
+    useUpdateWorkflowInstanceExecutionVisibility();
+
+  const current =
+    executionVisibility === WorkflowExecutionVisibility.unspecified
+      ? WorkflowExecutionVisibility.private
+      : executionVisibility;
+
+  const handleSelect = useCallback(
+    async (value: WorkflowExecutionVisibility) => {
+      if (value === current || isUpdating) return;
+      try {
+        await updateExecutionVisibility(instanceId, value);
+        onChanged?.();
+      } catch {
+        // error surfaced below
+      }
+    },
+    [current, isUpdating, updateExecutionVisibility, instanceId, onChanged],
+  );
+
+  return (
+    <div className="space-y-2">
+      <div
+        role="radiogroup"
+        aria-label="Run visibility"
+        className="flex flex-col gap-1.5"
+      >
+        {RUN_VISIBILITY_OPTIONS.map((option) => {
+          const selected = option.value === current;
+          return (
+            <button
+              key={option.value}
+              type="button"
+              role="radio"
+              aria-checked={selected}
+              disabled={isUpdating}
+              onClick={() => handleSelect(option.value)}
+              className={cn(
+                "flex flex-col items-start gap-0.5 rounded-md border px-3 py-2 text-left",
+                "focus:outline-none focus:ring-2 focus:ring-ring",
+                "disabled:opacity-60",
+                selected
+                  ? "border-primary bg-primary/5"
+                  : "border-border hover:bg-accent-hover",
+              )}
+            >
+              <span className="text-xs font-medium text-foreground">{option.label}</span>
+              <span className="text-[0.65rem] text-muted-foreground">{option.description}</span>
+            </button>
+          );
+        })}
+      </div>
+      {error && (
+        <p className="text-xs text-destructive" role="alert">
+          {getUserMessage(error)}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/workflow/instance/WorkflowInstanceDetailPanel.tsx

@@ -6,13 +6,16 @@ import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type { WorkflowInstance } from "@stigmer/protos/ai/stigmer/agentic/workflowinstance/v1/api_pb";
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
+import { WorkflowExecutionVisibility } from "@stigmer/protos/ai/stigmer/agentic/workflowinstance/v1/spec_pb";
 import type { ResourceRef } from "@stigmer/sdk";
 import { getUserMessage } from "@stigmer/sdk";
 import { useUpdateWorkflowInstance } from "./useUpdateWorkflowInstance";
 import { useDeleteWorkflowInstance } from "./useDeleteWorkflowInstance";
-import { ResourceVisibilityControl } from "../../library/ResourceVisibilityControl";
+import { RunVisibilityControl } from "./RunVisibilityControl";
+import { VisibilityBadge } from "../../library/VisibilitySelector";
 import { PermissionGate } from "../../iam-policy/PermissionGate";
-import { SharePanel } from "../../iam-policy/SharePanel";
+import { useCheckPermission } from "../../iam-policy/useCheckPermission";
+import { ManageAccessButton } from "../../access/ManageAccessButton";
 import { EnvironmentPicker } from "../../environment/EnvironmentPicker";
 import { useEnvironmentList } from "../../environment/useEnvironmentList";
 
@@ -58,10 +61,37 @@ export function WorkflowInstanceDetailPanel({
 
   const [isEditingEnvs, setIsEditingEnvs] = useState(false);
   const [editEnvRefs, setEditEnvRefs] = useState<ResourceRef[]>([]);
-  const [showSharePanel, setShowSharePanel] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [deleteError, setDeleteError] = useState<Error | null>(null);
 
+  const visibility = meta?.visibility ?? ApiResourceVisibility.visibility_private;
+  // Run observability is a separate axis from instance visibility, and only
+  // meaningful while the instance is private (ORG/PUBLIC already expose runs
+  // by inheritance). It is offered only to those who can grant access, so it
+  // rides into the dialog as the resource-specific section — present only when
+  // both conditions hold.
+  const { allowed: canGrantAccess } = useCheckPermission(
+    id ? { kind: "workflow_instance", id } : null,
+    "can_grant_access",
+  );
+  const runVisibilitySection =
+    visibility === ApiResourceVisibility.visibility_private && canGrantAccess
+      ? {
+          title: "Run visibility",
+          description:
+            "Keep the instance private while choosing who can observe its runs.",
+          content: (
+            <RunVisibilityControl
+              instanceId={id}
+              executionVisibility={
+                spec?.executionVisibility ?? WorkflowExecutionVisibility.unspecified
+              }
+              onChanged={onUpdated}
+            />
+          ),
+        }
+      : undefined;
+
   const handleStartEditEnvs = useCallback(() => {
     const currentRefs: ResourceRef[] = (spec?.environmentRefs ?? []).map((ref) => ({
       org: ref.org || org,
@@ -115,9 +145,12 @@ export function WorkflowInstanceDetailPanel({
       {/* Header */}
       <div className="flex items-center justify-between border-b border-border px-4 py-3">
         <div>
-          <h3 className="text-sm font-semibold text-foreground">
-            {meta?.name || meta?.slug || "Instance"}
-          </h3>
+          <div className="flex items-center gap-2">
+            <h3 className="text-sm font-semibold text-foreground">
+              {meta?.name || meta?.slug || "Instance"}
+            </h3>
+            <VisibilityBadge visibility={visibility} />
+          </div>
           <p className="text-[0.65rem] text-muted-foreground">
             {createdAt && `Created ${createdAt.toLocaleDateString()}`}
             {updatedAt && ` · Updated ${updatedAt.toLocaleDateString()}`}
@@ -137,19 +170,21 @@ export function WorkflowInstanceDetailPanel({
               Run
             </button>
           )}
-          <PermissionGate resource={{ kind: "workflow_instance", id }} relation="can_grant_access">
-            <button
-              type="button"
-              onClick={() => setShowSharePanel((v) => !v)}
-              className={cn(
-                "rounded-md px-2.5 py-1 text-xs font-medium",
-                "border border-border text-foreground hover:bg-accent-hover",
-                "focus:outline-none focus:ring-2 focus:ring-ring",
-              )}
-            >
-              Share
-            </button>
-          </PermissionGate>
+          <ManageAccessButton
+            resource={{
+              kind: ApiResourceKind.workflow_instance,
+              kindString: "workflow_instance",
+              id,
+              org: meta?.org ?? "",
+              name: meta?.name,
+            }}
+            visibility={{
+              kind: "workflowInstance",
+              current: visibility,
+              onChanged: onUpdated,
+            }}
+            extraSection={runVisibilitySection}
+          />
           <button
             type="button"
             onClick={onClose}
@@ -241,29 +276,6 @@ export function WorkflowInstanceDetailPanel({
           )}
         </div>
 
-        {/* Visibility */}
-        <div className="px-4 py-3">
-          <h4 className="text-xs font-medium text-muted-foreground mb-2">Visibility</h4>
-          <ResourceVisibilityControl
-            kind="workflowInstance"
-            resourceId={id}
-            visibility={meta?.visibility ?? ApiResourceVisibility.visibility_private}
-            onChanged={onUpdated}
-          />
-        </div>
-
-        {/* Share Panel */}
-        {showSharePanel && (
-          <div className="px-4 py-3">
-            <SharePanel
-              resource={{ kind: "workflow_instance", id, resourceKind: ApiResourceKind.workflow_instance }}
-              resourceKindString="workflow_instance"
-              resourceKind={ApiResourceKind.workflow_instance}
-              onClose={() => setShowSharePanel(false)}
-            />
-          </div>
-        )}
-
         {/* Delete */}
         <PermissionGate resource={{ kind: "workflow_instance", id }} relation="can_delete">
           <div className="px-4 py-3">
@@ -331,3 +343,4 @@ function CloseIcon() {
     </svg>
   );
 }
+

package/src/workflow/instance/index.ts

@@ -1,8 +1,13 @@
 export { useWorkflowInstance, type UseWorkflowInstanceReturn } from "./useWorkflowInstance";
 export { useCreateWorkflowInstance, type UseCreateWorkflowInstanceReturn } from "./useCreateWorkflowInstance";
 export { useUpdateWorkflowInstance, type UseUpdateWorkflowInstanceReturn } from "./useUpdateWorkflowInstance";
+export {
+  useUpdateWorkflowInstanceExecutionVisibility,
+  type UseUpdateWorkflowInstanceExecutionVisibilityReturn,
+} from "./useUpdateWorkflowInstanceExecutionVisibility";
 export { useDeleteWorkflowInstance, type UseDeleteWorkflowInstanceReturn } from "./useDeleteWorkflowInstance";
 export { WorkflowInstanceEmptyState, type WorkflowInstanceEmptyStateProps } from "./WorkflowInstanceEmptyState";
 export { WorkflowInstanceList, type WorkflowInstanceListProps } from "./WorkflowInstanceList";
 export { CreateWorkflowInstanceDialog, type CreateWorkflowInstanceDialogProps } from "./CreateWorkflowInstanceDialog";
 export { WorkflowInstanceDetailPanel, type WorkflowInstanceDetailPanelProps } from "./WorkflowInstanceDetailPanel";
+export { RunVisibilityControl, type RunVisibilityControlProps } from "./RunVisibilityControl";

package/src/workflow/instance/useUpdateWorkflowInstanceExecutionVisibility.ts

@@ -0,0 +1,74 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { create } from "@bufbuild/protobuf";
+import type { WorkflowInstance } from "@stigmer/protos/ai/stigmer/agentic/workflowinstance/v1/api_pb";
+import { UpdateExecutionVisibilityInputSchema } from "@stigmer/protos/ai/stigmer/agentic/workflowinstance/v1/io_pb";
+import type { WorkflowExecutionVisibility } from "@stigmer/protos/ai/stigmer/agentic/workflowinstance/v1/spec_pb";
+import { useStigmer } from "../../hooks";
+import { toError } from "../../internal/toError";
+
+/** Return value of {@link useUpdateWorkflowInstanceExecutionVisibility}. */
+export interface UseUpdateWorkflowInstanceExecutionVisibilityReturn {
+  /**
+   * Update who can observe the runs (executions) of a workflow instance.
+   *
+   * This is distinct from the instance's own visibility: it controls run
+   * observability via the `workflow_instance#execution_viewer` relation,
+   * letting an owner keep the instance private while opting all org members
+   * into watching its executions.
+   */
+  readonly updateExecutionVisibility: (
+    resourceId: string,
+    executionVisibility: WorkflowExecutionVisibility,
+  ) => Promise<WorkflowInstance>;
+  /** `true` while the update RPC is in flight. */
+  readonly isUpdating: boolean;
+  /** Error from the last failed update, or `null` when healthy. */
+  readonly error: Error | null;
+  /** Clear the error state. */
+  readonly clearError: () => void;
+}
+
+/**
+ * Mutation hook that updates the execution (run) visibility of a
+ * WorkflowInstance.
+ *
+ * Wraps `stigmer.workflowInstance.updateExecutionVisibility()` with
+ * loading/error state. The caller is responsible for refreshing the instance
+ * after a successful update.
+ */
+export function useUpdateWorkflowInstanceExecutionVisibility(): UseUpdateWorkflowInstanceExecutionVisibilityReturn {
+  const stigmer = useStigmer();
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const clearError = useCallback(() => setError(null), []);
+
+  const updateExecutionVisibility = useCallback(
+    async (
+      resourceId: string,
+      executionVisibility: WorkflowExecutionVisibility,
+    ): Promise<WorkflowInstance> => {
+      setIsUpdating(true);
+      setError(null);
+
+      try {
+        return await stigmer.workflowInstance.updateExecutionVisibility(
+          create(UpdateExecutionVisibilityInputSchema, {
+            resourceId,
+            executionVisibility,
+          }),
+        );
+      } catch (err) {
+        setError(toError(err));
+        throw err;
+      } finally {
+        setIsUpdating(false);
+      }
+    },
+    [stigmer],
+  );
+
+  return { updateExecutionVisibility, isUpdating, error, clearError };
+}