@stigmer/react 3.0.7 → 3.0.8-dev.20260612062921

package/src/iam-policy/SharePanel.tsx

@@ -1,12 +1,9 @@
 "use client";
 
-import { useCallback, useState } from "react";
 import type { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
-import type { PrincipalAccess } from "@stigmer/protos/ai/stigmer/iam/iampolicy/v1/io_pb";
 import { cn } from "@stigmer/theme";
-import { getUserMessage, iamRoleToString } from "@stigmer/sdk";
-import { useShareFlow, type ShareFlowResource } from "./useShareFlow";
-import { GrantAccessForm } from "./GrantAccessForm";
+import type { ShareFlowResource } from "./useShareFlow";
+import { PeopleWithAccess } from "./PeopleWithAccess";
 
 /** Props for {@link SharePanel}. */
 export interface SharePanelProps {
@@ -16,6 +13,11 @@ export interface SharePanelProps {
   readonly resourceKindString: string;
   /** ApiResourceKind enum value for grantable-role lookup. */
   readonly resourceKind: ApiResourceKind;
+  /**
+   * Organization the resource belongs to (`metadata.org`). Drives the
+   * org-member typeahead in the grant form.
+   */
+  readonly orgId: string;
   /** Fired when the user closes the panel. */
   readonly onClose?: () => void;
   /** Additional CSS class names for the root container. */
@@ -26,9 +28,11 @@ export interface SharePanelProps {
  * Self-contained sharing panel that displays who has access to a
  * resource and allows granting/revoking access.
  *
- * Combines the access list (from {@link useShareFlow}) with the
- * {@link GrantAccessForm} in a single panel suitable for embedding
- * in a popover, sidebar, or dialog.
+ * A thin header-and-close wrapper around {@link PeopleWithAccess} — the same
+ * "people with access" body the unified Manage access dialog renders — so the
+ * two surfaces stay byte-for-byte consistent. Suitable for embedding in a
+ * popover or sidebar; for the full visibility + people experience use the
+ * Manage access dialog instead.
  *
  * All visual properties flow through `--stgm-*` design tokens.
  *
@@ -38,6 +42,7 @@ export interface SharePanelProps {
  *   resource={{ kind: "session", id: sessionId, resourceKind: ApiResourceKind.session }}
  *   resourceKindString="session"
  *   resourceKind={ApiResourceKind.session}
+ *   orgId={orgId}
  *   onClose={() => setOpen(false)}
  * />
  * ```
@@ -46,22 +51,10 @@ export function SharePanel({
   resource,
   resourceKindString,
   resourceKind,
+  orgId,
   onClose,
   className,
 }: SharePanelProps) {
-  const {
-    accessList,
-    isLoading,
-    fetchError,
-    revokeAccess,
-    isRevoking,
-    revokeError,
-    refetch,
-    hasGrantableRoles,
-  } = useShareFlow(resource);
-
-  const [showGrantForm, setShowGrantForm] = useState(false);
-
   return (
     <div
       className={cn("flex flex-col gap-4 p-4", className)}
@@ -88,146 +81,16 @@ export function SharePanel({
         )}
       </div>
 
-      {/* Access list */}
-      <div className="space-y-1">
-        <p className="text-xs text-muted-foreground">
-          {isLoading
-            ? "Loading access list..."
-            : `${accessList.length} ${accessList.length === 1 ? "person" : "people"} with access`}
-        </p>
-
-        {fetchError && (
-          <p className="text-destructive text-[0.65rem]" role="alert">
-            {getUserMessage(fetchError)}
-          </p>
-        )}
-
-        {!isLoading && accessList.length > 0 && (
-          <ul className="space-y-1 mt-2" aria-label="People with access">
-            {accessList.map((entry) => (
-              <AccessEntry
-                key={entry.principal?.id ?? "unknown"}
-                entry={entry}
-                resourceKindString={resourceKindString}
-                resourceId={resource.id}
-                onRevoke={revokeAccess}
-                isRevoking={isRevoking}
-              />
-            ))}
-          </ul>
-        )}
-
-        {revokeError && (
-          <p className="text-destructive text-[0.65rem]" role="alert">
-            {getUserMessage(revokeError)}
-          </p>
-        )}
-      </div>
-
-      {/* Grant form */}
-      {hasGrantableRoles && (
-        <div className="border-t border-border pt-3">
-          {showGrantForm ? (
-            <GrantAccessForm
-              resourceKind={resourceKind}
-              resourceKindString={resourceKindString}
-              resourceId={resource.id}
-              onGranted={() => {
-                setShowGrantForm(false);
-                refetch();
-              }}
-              onCancel={() => setShowGrantForm(false)}
-            />
-          ) : (
-            <button
-              type="button"
-              onClick={() => setShowGrantForm(true)}
-              className={cn(
-                "w-full rounded-md px-3 py-1.5 text-xs font-medium text-center",
-                "border border-dashed border-border",
-                "text-muted-foreground hover:text-foreground hover:border-foreground/30",
-                "hover:bg-accent-hover transition-colors",
-              )}
-            >
-              + Add people
-            </button>
-          )}
-        </div>
-      )}
+      <PeopleWithAccess
+        resource={resource}
+        resourceKindString={resourceKindString}
+        resourceKind={resourceKind}
+        orgId={orgId}
+      />
     </div>
   );
 }
 
-// ---------------------------------------------------------------------------
-// Internal subcomponents
-// ---------------------------------------------------------------------------
-
-function AccessEntry({
-  entry,
-  resourceKindString,
-  resourceId,
-  onRevoke,
-  isRevoking,
-}: {
-  readonly entry: PrincipalAccess;
-  readonly resourceKindString: string;
-  readonly resourceId: string;
-  readonly onRevoke: (principalId: string, role: string) => Promise<void>;
-  readonly isRevoking: boolean;
-}) {
-  const principal = entry.principal;
-  const roles = entry.roles;
-
-  const displayName = principal?.name || principal?.email || principal?.id || "Unknown";
-  const primaryRole = roles[0]?.role;
-
-  const handleRevoke = useCallback(async () => {
-    if (!principal?.id || !primaryRole?.code) return;
-    await onRevoke(principal.id, primaryRole.code);
-  }, [principal?.id, primaryRole?.code, onRevoke]);
-
-  return (
-    <li className="flex items-center justify-between gap-2 rounded-md px-2 py-1.5 hover:bg-accent-hover group">
-      <div className="flex items-center gap-2 min-w-0">
-        <div
-          className="h-6 w-6 rounded-full bg-muted flex items-center justify-center text-[0.6rem] font-medium text-muted-foreground shrink-0"
-          aria-hidden="true"
-        >
-          {(principal?.name?.[0] ?? principal?.email?.[0] ?? "?").toUpperCase()}
-        </div>
-        <div className="min-w-0">
-          <p className="text-xs text-foreground truncate">{displayName}</p>
-          {principal?.email && principal.name && (
-            <p className="text-[0.6rem] text-muted-foreground truncate">
-              {principal.email}
-            </p>
-          )}
-        </div>
-      </div>
-
-      <div className="flex items-center gap-1.5 shrink-0">
-        <span className="text-[0.6rem] text-muted-foreground capitalize">
-          {primaryRole?.name ?? primaryRole?.code ?? "—"}
-        </span>
-        <button
-          type="button"
-          onClick={handleRevoke}
-          disabled={isRevoking}
-          aria-label={`Remove ${displayName}'s access`}
-          className={cn(
-            "rounded p-0.5 text-muted-foreground opacity-0 group-hover:opacity-100",
-            "hover:text-destructive hover:bg-destructive/10",
-            "disabled:pointer-events-none disabled:opacity-50",
-            "transition-opacity",
-          )}
-        >
-          <RemoveIcon />
-        </button>
-      </div>
-    </li>
-  );
-}
-
 function CloseIcon() {
   return (
     <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
@@ -235,11 +98,3 @@ function CloseIcon() {
     </svg>
   );
 }
-
-function RemoveIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
-      <path d="M4 4l8 8M12 4l-8 8" />
-    </svg>
-  );
-}

package/src/iam-policy/index.ts

@@ -43,8 +43,25 @@ export {
 
 export { RoleSelector, type RoleSelectorProps } from "./RoleSelector";
 
+export {
+  PrincipalPicker,
+  type PrincipalPickerProps,
+  type SelectedPrincipal,
+} from "./PrincipalPicker";
+
+export {
+  ProviderBadge,
+  providerLabel,
+  type ProviderBadgeProps,
+} from "./ProviderBadge";
+
 export { GrantAccessForm, type GrantAccessFormProps } from "./GrantAccessForm";
 
+export {
+  PeopleWithAccess,
+  type PeopleWithAccessProps,
+} from "./PeopleWithAccess";
+
 export {
   OrgMembersPanel,
   type OrgMembersPanelProps,

package/src/index.ts

@@ -588,7 +588,11 @@ export {
   useShareFlow,
   useCheckPermission,
   RoleSelector,
+  PrincipalPicker,
+  ProviderBadge,
+  providerLabel,
   GrantAccessForm,
+  PeopleWithAccess,
   OrgMembersPanel,
   SharePanel,
   PermissionGate,
@@ -610,17 +614,39 @@ export type {
   UseCheckPermissionReturn,
   PermissionCheckResource,
   RoleSelectorProps,
+  PrincipalPickerProps,
+  SelectedPrincipal,
+  ProviderBadgeProps,
   GrantAccessFormProps,
+  PeopleWithAccessProps,
   OrgMembersPanelProps,
   SharePanelProps,
   PermissionGateProps,
 } from "./iam-policy";
 
+// Access — unified "Manage access" experience (visibility + people) as one
+// dialog, with a kebab hook and a visible-button trigger.
+export {
+  ManageAccessDialog,
+  ManageAccessButton,
+  useManageAccess,
+} from "./access";
+export type {
+  ManageAccessDialogProps,
+  ManageAccessButtonProps,
+  UseManageAccessArgs,
+  UseManageAccessReturn,
+  AccessResource,
+  AccessVisibility,
+  AccessExtraSection,
+} from "./access";
+
 // Organization — context provider, hooks, data hooks, behavior hooks, styled form, profile panel, and org switcher
 export {
   OrgProvider,
   useOrg,
   useActiveOrgSlug,
+  useActiveOrgId,
   useOrgGate,
   useOrganization,
   useCreateOrganization,
@@ -1240,11 +1266,13 @@ export {
   useWorkflowInstance,
   useCreateWorkflowInstance,
   useUpdateWorkflowInstance,
+  useUpdateWorkflowInstanceExecutionVisibility,
   useDeleteWorkflowInstance,
   WorkflowInstanceEmptyState,
   WorkflowInstanceList,
   CreateWorkflowInstanceDialog,
   WorkflowInstanceDetailPanel,
+  RunVisibilityControl,
   // T15: Workflow Template Gallery
   PATTERN_LABELS,
   WORKFLOW_CATEGORY_LABELS,
@@ -1367,11 +1395,13 @@ export type {
   UseWorkflowInstanceReturn,
   UseCreateWorkflowInstanceReturn,
   UseUpdateWorkflowInstanceReturn,
+  UseUpdateWorkflowInstanceExecutionVisibilityReturn,
   UseDeleteWorkflowInstanceReturn,
   WorkflowInstanceEmptyStateProps,
   WorkflowInstanceListProps,
   CreateWorkflowInstanceDialogProps,
   WorkflowInstanceDetailPanelProps,
+  RunVisibilityControlProps,
   // T15: Workflow Template Gallery types
   WorkflowTemplateData,
   WorkflowTemplateCategory,

package/src/mcp-server/McpServerDetailView.tsx

@@ -23,10 +23,12 @@ import type { OAuthConnectPhase } from "./useMcpServerOAuthConnect";
 import { useDisconnectOAuth } from "./useDisconnectOAuth";
 import { useOrgOAuthApp } from "./useOrgOAuthApp";
 import { OAuthAppForm } from "./OAuthAppForm";
+import { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
 import { ErrorMessage } from "../error/ErrorMessage";
 import { EnvVarForm } from "../environment/EnvVarForm";
 import type { EnvVarFormVariable } from "../environment/EnvVarForm";
-import { ResourceVisibilityControl } from "../library/ResourceVisibilityControl";
+import { VisibilityBadge } from "../library/VisibilitySelector";
+import { useManageAccess } from "../access/useManageAccess";
 import { Tabs, type TabItem } from "../tabs/Tabs";
 import { ResourceDetailShell } from "../resource-detail/ResourceDetailShell";
 import { Section } from "../resource-detail/Section";
@@ -338,6 +340,29 @@ export function McpServerDetailView({
     oauth.clearError();
   }, [connection, oauth]);
 
+  // Unified Manage access — visibility (General access) over explicit grants
+  // (People), opened from the kebab. Closes the blueprint share gap for MCP
+  // servers.
+  const access = useManageAccess({
+    resource: mcpServer?.metadata
+      ? {
+          kind: ApiResourceKind.mcp_server,
+          kindString: "mcp_server",
+          id: mcpServer.metadata.id,
+          org: mcpServer.metadata.org,
+          name: mcpServer.metadata.name,
+        }
+      : null,
+    visibility: mcpServer?.metadata
+      ? {
+          kind: "mcpServer",
+          current: mcpServer.metadata.visibility,
+          org: mcpServer.metadata.org,
+          onChanged: refetch,
+        }
+      : undefined,
+  });
+
   if (isLoading) return <LoadingSkeleton className={className} />;
   if (error)
     return <ErrorMessage error={error} retry={refetch} className={className} />;
@@ -380,16 +405,16 @@ export function McpServerDetailView({
     updatedAt: specAudit?.updatedAt ? timestampDate(specAudit.updatedAt) : null,
   };
 
+  // Inline visibility is read-only (at-a-glance); editing lives in the
+  // Manage access dialog, the single writer for both access axes.
   const visibilityControl = meta ? (
-    <ResourceVisibilityControl
-      kind="mcpServer"
-      resourceId={meta.id}
-      visibility={meta.visibility}
-      org={meta.org || org}
-      onChanged={refetch}
-    />
+    <VisibilityBadge visibility={meta.visibility} />
   ) : undefined;
 
+  const mergedActions = access.action
+    ? [...(actions ?? []), access.action]
+    : actions;
+
   const headerMetaExtra = (
     <>
       {status && <ValidationStateBadge state={status.validationState} />}
@@ -409,13 +434,14 @@ export function McpServerDetailView({
     ) : undefined;
 
   return (
+    <>
     <ResourceDetailShell
       header={headerMeta}
       visibilityControl={visibilityControl}
       headerMetaExtra={headerMetaExtra}
       headerBanner={headerBanner}
       primaryAction={primaryAction}
-      actions={actions}
+      actions={mergedActions}
       className={className}
     >
       {(editable || spec?.description) && (
@@ -576,6 +602,8 @@ export function McpServerDetailView({
         <TagsSection tags={spec?.tags ?? []} editable={editable} isSaving={isUpdating} saveMcpField={saveMcpField} />
       )}
     </ResourceDetailShell>
+    {access.dialog}
+    </>
   );
 }
 

package/src/organization/OrgProvider.tsx

@@ -182,3 +182,16 @@ export function useActiveOrgSlug(): string {
   const { activeOrg } = useOrg();
   return activeOrg?.metadata?.slug ?? "";
 }
+
+/**
+ * Convenience accessor: returns the active org's system ID (`metadata.id`),
+ * or an empty string when no org is selected.
+ *
+ * This is the identifier used as the `organization` object in authorization
+ * (FGA) — e.g. for member lookups in the share picker — as opposed to the
+ * human-readable slug returned by {@link useActiveOrgSlug}.
+ */
+export function useActiveOrgId(): string {
+  const { activeOrg } = useOrg();
+  return activeOrg?.metadata?.id ?? "";
+}

package/src/organization/index.ts

@@ -1,4 +1,4 @@
-export { OrgProvider, useOrg, useActiveOrgSlug } from "./OrgProvider";
+export { OrgProvider, useOrg, useActiveOrgSlug, useActiveOrgId } from "./OrgProvider";
 export type { OrgContextValue } from "./OrgProvider";
 export { useOrgGate } from "./useOrgGate";
 export type {

package/src/skill/SkillDetailView.tsx

@@ -7,10 +7,12 @@ import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type { Skill } from "@stigmer/protos/ai/stigmer/agentic/skill/v1/api_pb";
 import type { GitProvenance } from "@stigmer/protos/ai/stigmer/agentic/skill/v1/status_pb";
 import { SkillState } from "@stigmer/protos/ai/stigmer/agentic/skill/v1/status_pb";
+import { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
 import { useSkill } from "./useSkill";
 import { SkillFileBrowser } from "./SkillFileBrowser";
 import { ErrorMessage } from "../error/ErrorMessage";
-import { ResourceVisibilityControl } from "../library/ResourceVisibilityControl";
+import { VisibilityBadge } from "../library/VisibilitySelector";
+import { useManageAccess } from "../access/useManageAccess";
 import { MARKDOWN_COMPONENTS, REMARK_PLUGINS, stripFrontmatter } from "../internal/markdown-components";
 import { ResourceDetailShell } from "../resource-detail/ResourceDetailShell";
 import { Section } from "../resource-detail/Section";
@@ -207,6 +209,28 @@ export function SkillDetailView({
     }
   }, [skill]);
 
+  // Unified Manage access — visibility (General access) over explicit grants
+  // (People), opened from the kebab. Closes the blueprint share gap for skills.
+  const access = useManageAccess({
+    resource: skill?.metadata
+      ? {
+          kind: ApiResourceKind.skill,
+          kindString: "skill",
+          id: skill.metadata.id,
+          org: skill.metadata.org,
+          name: skill.metadata.name,
+        }
+      : null,
+    visibility: skill?.metadata
+      ? {
+          kind: "skill",
+          current: skill.metadata.visibility,
+          org: skill.metadata.org,
+          onChanged: refetch,
+        }
+      : undefined,
+  });
+
   if (isLoading) return <LoadingSkeleton className={className} />;
   if (error)
     return <ErrorMessage error={error} retry={refetch} className={className} />;
@@ -230,16 +254,16 @@ export function SkillDetailView({
     statusLabel: status ? skillStateLabel(status.state) : undefined,
   };
 
+  // Inline visibility is read-only (at-a-glance); editing lives in the
+  // Manage access dialog, the single writer for both access axes.
   const visibilityControl = meta ? (
-    <ResourceVisibilityControl
-      kind="skill"
-      resourceId={meta.id}
-      visibility={meta.visibility}
-      org={meta.org || org}
-      onChanged={refetch}
-    />
+    <VisibilityBadge visibility={meta.visibility} />
   ) : undefined;
 
+  const mergedActions = access.action
+    ? [...(actions ?? []), access.action]
+    : actions;
+
   let tabContent: React.ReactNode;
   if (activeAdditionalTab) {
     tabContent = activeAdditionalTab.content;
@@ -267,7 +291,7 @@ export function SkillDetailView({
         header={headerMeta}
         visibilityControl={visibilityControl}
         primaryAction={primaryAction}
-        actions={actions}
+        actions={mergedActions}
         tabs={effectiveTabs}
         activeTab={effectiveTabs ? effectiveActiveTab : undefined}
         onTabChange={effectiveTabs ? effectiveOnTabChange : undefined}
@@ -276,6 +300,7 @@ export function SkillDetailView({
       >
         {tabContent}
       </ResourceDetailShell>
+      {access.dialog}
       <SkillDiffDialog state={diffState} onClose={closeDiff} />
     </>
   );

package/src/workflow/WorkflowDetailView.tsx

@@ -22,7 +22,9 @@ import { WorkflowInstanceList } from "./instance/WorkflowInstanceList";
 import { WorkflowVersionsTab } from "./WorkflowVersionsTab";
 import { useWorkflowVersions } from "./useWorkflowVersions";
 import { ErrorMessage } from "../error/ErrorMessage";
-import { ResourceVisibilityControl } from "../library/ResourceVisibilityControl";
+import { VisibilityBadge } from "../library/VisibilitySelector";
+import { useManageAccess } from "../access/useManageAccess";
+import { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
 import { formatDurationSec } from "./format-utils";
 import { ResourceDetailShell } from "../resource-detail/ResourceDetailShell";
 import { Section } from "../resource-detail/Section";
@@ -232,6 +234,28 @@ export function WorkflowDetailView({
     }
   }, [workflow]);
 
+  // Unified Manage access — visibility (General access) over explicit grants
+  // (People), opened from the kebab. Replaces the host's bespoke share popover.
+  const access = useManageAccess({
+    resource: workflow?.metadata
+      ? {
+          kind: ApiResourceKind.workflow,
+          kindString: "workflow",
+          id: workflow.metadata.id,
+          org: workflow.metadata.org || org,
+          name: workflow.metadata.name,
+        }
+      : null,
+    visibility: workflow?.metadata
+      ? {
+          kind: "workflow",
+          current: workflow.metadata.visibility,
+          org: workflow.metadata.org || org,
+          onChanged: refetch,
+        }
+      : undefined,
+  });
+
   if (isLoading) return <LoadingSkeleton className={className} />;
   if (error)
     return <ErrorMessage error={error} retry={refetch} className={className} />;
@@ -257,16 +281,16 @@ export function WorkflowDetailView({
     <ValidationIndicator state={validationState} />
   ) : undefined;
 
+  // Inline visibility is read-only (at-a-glance); editing lives in the
+  // Manage access dialog, the single writer for both access axes.
   const visibilityControl = meta ? (
-    <ResourceVisibilityControl
-      kind="workflow"
-      resourceId={meta.id}
-      visibility={meta.visibility}
-      org={meta.org || org}
-      onChanged={refetch}
-    />
+    <VisibilityBadge visibility={meta.visibility} />
   ) : undefined;
 
+  const mergedActions = access.action
+    ? [...(actions ?? []), access.action]
+    : actions;
+
   let tabContent: React.ReactNode;
   if (activeAdditionalTab) {
     tabContent = activeAdditionalTab.content;
@@ -309,20 +333,23 @@ export function WorkflowDetailView({
   }
 
   return (
-    <ResourceDetailShell
-      header={headerMeta}
-      visibilityControl={visibilityControl}
-      headerMetaExtra={headerMetaExtra}
-      primaryAction={primaryAction}
-      actions={actions}
-      tabs={effectiveTabs}
-      activeTab={effectiveActiveTab}
-      onTabChange={effectiveOnTabChange}
-      tabsAriaLabel="Workflow detail tabs"
-      className={className}
-    >
-      {tabContent}
-    </ResourceDetailShell>
+    <>
+      <ResourceDetailShell
+        header={headerMeta}
+        visibilityControl={visibilityControl}
+        headerMetaExtra={headerMetaExtra}
+        primaryAction={primaryAction}
+        actions={mergedActions}
+        tabs={effectiveTabs}
+        activeTab={effectiveActiveTab}
+        onTabChange={effectiveOnTabChange}
+        tabsAriaLabel="Workflow detail tabs"
+        className={className}
+      >
+        {tabContent}
+      </ResourceDetailShell>
+      {access.dialog}
+    </>
   );
 }
 

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>
   );