@stigmer/react 3.12.1 → 3.12.3

package/src/workflow/WorkflowExecutionViewer.tsx

@@ -85,12 +85,64 @@ function readStoredCenterView(): CenterView {
   return "thread";
 }
 
+/**
+ * Whether {@link WorkflowExecutionViewer} offers the execution panel surface.
+ *
+ * - `"auto"` (default) — the panel and its toggle chip are available.
+ * - `"none"` — the panel and chip are absent entirely, and Diagnose is
+ *   withheld with them (the diagnosis conversation renders inside the
+ *   panel, so without one the affordance would be a dead end). For hosts
+ *   whose surrounding surface already renders artifacts/changes/usage.
+ *
+ * The workflow twin of the session organisms' `SessionPanelMode` — a
+ * deliberately separate union, like the panel controllers themselves, so
+ * each organism's vocabulary can grow domain-specific modes. A union (not
+ * a boolean) so a future mode — e.g. a host-rendered panel fed by the
+ * SDK's controller — extends the vocabulary instead of breaking it.
+ */
+export type WorkflowExecutionPanelMode = "auto" | "none";
+
 /** Props for {@link WorkflowExecutionViewer}. */
 export interface WorkflowExecutionViewerProps {
   /** ID of the workflow execution to display. */
   readonly executionId: string;
   /** Organization slug — needed for AI diagnosis authorization. */
   readonly org?: string;
+  /**
+   * Whether the viewer offers the execution panel at all. `"none"` removes
+   * the panel AND its toggle chip and withholds the Diagnose action (its
+   * conversation renders inside the panel) — for hosts whose surrounding
+   * surface already presents the execution's artifacts and usage.
+   *
+   * @default "auto"
+   */
+  readonly panel?: WorkflowExecutionPanelMode;
+  /**
+   * Initial open state of the execution panel in uncontrolled mode — a
+   * docking host that wants the artifacts rail visible from the first paint
+   * passes `true`. Ignored when
+   * {@link WorkflowExecutionViewerProps.panelOpen} is provided.
+   *
+   * @default false
+   */
+  readonly defaultPanelOpen?: boolean;
+  /**
+   * Controlled open state of the execution panel. When provided, the host
+   * owns the panel: the chip toggle, Diagnose, and artifact/file-change
+   * opens surface through
+   * {@link WorkflowExecutionViewerProps.onPanelOpenChange} instead of
+   * flipping state, and the panel follows this value. Leave `undefined`
+   * for the self-managing default.
+   */
+  readonly panelOpen?: boolean;
+  /**
+   * Called on every panel open/close transition, in BOTH modes — pass it
+   * alone (uncontrolled) to simply observe the panel, e.g. widening a
+   * docked pane when Diagnose expands it and reclaiming the room on close.
+   * See {@link UseWorkflowExecutionPanelOptions.onOpenChange} for the exact
+   * request-vs-transition semantics in each mode.
+   */
+  readonly onPanelOpenChange?: (open: boolean) => void;
   /**
    * Callback when the user clicks a link to a child agent execution.
    * Receives the AgentExecution ID. The host application is responsible
@@ -150,6 +202,10 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
   onNavigateToWorkflowEditor,
   headerActions,
   nodesDraggable,
+  panel: panelMode = "auto",
+  defaultPanelOpen,
+  panelOpen,
+  onPanelOpenChange,
   className,
 }: WorkflowExecutionViewerProps) {
   const {
@@ -306,11 +362,24 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
     ],
   );
 
+  // The one flag every panel affordance keys on: the host opted out
+  // (`panel="none"`). Everything the panel touches — the chip, the split's
+  // secondary pane, and Diagnose (whose conversation renders inside the
+  // panel) — gates on this, so the affordances can never drift apart.
+  const panelEnabled = panelMode !== "none";
+
   // The execution-level workspace panel (facets + virtual document
   // tabs). The controller lives at the owner level — the editors-store
   // SUBSCRIPTION stays inside ExecutionWorkspacePanel so tab churn re-renders
   // only the panel subtree, never the streaming graph (DD-009/DD-010).
-  const panel = useWorkflowExecutionPanel();
+  const panel = useWorkflowExecutionPanel({
+    // With the panel disabled the controller is pinned controlled-closed
+    // and unobserved — airtight inertness, not just hidden UI: no intent
+    // can flip state or reach the host's callback.
+    open: panelEnabled ? panelOpen : false,
+    defaultOpen: defaultPanelOpen,
+    onOpenChange: panelEnabled ? onPanelOpenChange : undefined,
+  });
 
   const [showComparePicker, setShowComparePicker] = useState(false);
   const [compareTargetId, setCompareTargetId] = useState<string | null>(null);
@@ -467,8 +536,11 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
         actions={actions}
         // Diagnose opens (or focuses) the singleton diagnosis document tab —
         // the tab itself is the "diagnosis is active" state, so there is no
-        // owner-level isDiagnosing boolean to keep in sync (SSOT).
-        onDiagnose={org ? panel.openDiagnosis : undefined}
+        // owner-level isDiagnosing boolean to keep in sync (SSOT). A viewer
+        // without a panel (panel="none") withholds the action: the
+        // conversation renders inside the panel, so offering it would be a
+        // dead end.
+        onDiagnose={org && panelEnabled ? panel.openDiagnosis : undefined}
         onCompare={handleOpenComparePicker}
         headerActions={
           <>
@@ -477,12 +549,15 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
                 Usage facet gives the panel data-independent content (its
                 empty state is honest even before any usage accrues). The
                 badge stays the artifact count: artifacts are countable
-                collateral, usage is a continuous quantity. */}
-            <PanelChip
-              isOpen={panel.isOpen}
-              onToggle={panel.isOpen ? panel.closePanel : panel.openPanel}
-              badgeCount={artifacts.length}
-            />
+                collateral, usage is a continuous quantity. A viewer without
+                a panel (panel="none") has no toggle: it is simply absent. */}
+            {panelEnabled && (
+              <PanelChip
+                isOpen={panel.isOpen}
+                onToggle={panel.isOpen ? panel.closePanel : panel.openPanel}
+                badgeCount={artifacts.length}
+              />
+            )}
           </>
         }
       />
@@ -613,8 +688,10 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
         secondary={
           // Content unmounts while collapsed (matching the session panel
           // region); the editors store lives on the controller, so open tabs
-          // survive a collapse/expand cycle.
-          panel.isOpen ? (
+          // survive a collapse/expand cycle. The panelEnabled guard is
+          // belt-and-braces beside the pinned-closed controller: with
+          // panel="none", isOpen can never be true.
+          panel.isOpen && panelEnabled ? (
             <ExecutionWorkspacePanel
               panel={panel}
               executionId={executionId}

package/src/workflow/WorkflowExplainDialog.tsx

@@ -1,9 +1,12 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import { useExplainWorkflowFlow, type ExplainPhase } from "./useExplainWorkflowFlow.js";
 import { MessageThread } from "../execution/MessageThread.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 /** Props for {@link WorkflowExplainDialog}. */
 export interface WorkflowExplainDialogProps {
@@ -34,8 +37,6 @@ export function WorkflowExplainDialog({
   org,
   currentYaml,
 }: WorkflowExplainDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
   const flow = useExplainWorkflowFlow({
     org,
     currentYaml,
@@ -44,54 +45,28 @@ export function WorkflowExplainDialog({
     },
   });
 
-  // Show/hide dialog
+  // Each opening starts a fresh explanation.
   useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (open && !dialog.open) {
+    if (open) {
       flow.reset();
-      dialog.showModal();
       flow.explain();
-    } else if (!open && dialog.open) {
-      dialog.close();
     }
   }, [open, flow.reset, flow.explain]);
 
-  const handleDialogCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onOpenChange(false);
-    },
-    [onOpenChange],
-  );
-
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent<HTMLDialogElement>) => {
-      if (e.target === dialogRef.current) {
-        onOpenChange(false);
-      }
-    },
-    [onOpenChange],
-  );
-
+  const { copy, copied } = useCopyFeedback();
   const handleCopy = useCallback(() => {
     if (flow.explanation) {
-      navigator.clipboard.writeText(flow.explanation).catch(() => {
-        /* Clipboard unavailable in some contexts */
-      });
+      void copy(flow.explanation);
     }
-  }, [flow.explanation]);
+  }, [copy, flow.explanation]);
 
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleDialogCancel}
-      onClick={handleBackdropClick}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-2xl stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
-        "stg:backdrop:bg-black/50",
-        "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
-      )}
+    <DialogShell
+      open={open}
+      onOpenChange={onOpenChange}
+      width="2xl"
+      dismissOnBackdrop
+      aria-label="Workflow Explanation"
     >
       <div className="stg:flex stg:flex-col">
         {/* Header */}
@@ -102,7 +77,7 @@ export function WorkflowExplainDialog({
             </h3>
             {flow.isStreaming && (
               <span className="stg:inline-flex stg:items-center stg:gap-1.5 stg:text-xs stg:text-muted-foreground">
-                <SpinnerIcon />
+                <SpinnerIcon size={14} />
                 Analyzing…
               </span>
             )}
@@ -199,30 +174,13 @@ export function WorkflowExplainDialog({
                   "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
                 )}
               >
-                Copy to clipboard
+                {copied ? "Copied" : "Copy to clipboard"}
               </button>
             )}
           </div>
         </div>
       </div>
-    </dialog>
+    </DialogShell>
   );
 }
 
-function SpinnerIcon({ size = 14 }: { readonly size?: number }) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}

package/src/workflow/WorkflowGraphFullscreenDialog.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import type { Workflow } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/api_pb";
 import { WorkflowOverviewGraph } from "./WorkflowOverviewGraph.js";
 
@@ -38,23 +39,9 @@ export function WorkflowGraphFullscreenDialog({
   onClose,
   onOpenInEditor,
 }: WorkflowGraphFullscreenDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-
-    if (open && !dialog.open) {
-      dialog.showModal();
-    } else if (!open && dialog.open) {
-      dialog.close();
-    }
-  }, [open]);
-
-  const handleCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onClose();
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen) onClose();
     },
     [onClose],
   );
@@ -62,14 +49,15 @@ export function WorkflowGraphFullscreenDialog({
   const workflowName = workflow?.metadata?.name || "Task Flow";
 
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleCancel}
+    <DialogShell
+      open={open}
+      onOpenChange={handleOpenChange}
       aria-label={`${workflowName} — full view`}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:h-[90vh] stg:w-[95vw] stg:rounded-lg stg:border stg:border-border stg:bg-background stg:p-0 stg:text-foreground stg:shadow-2xl stg:outline-none",
-        "stg:[&::backdrop]:bg-black/60",
-      )}
+      // Near-full-viewport outlier: free-form sizing and the background
+      // surface for the graph canvas. The previously hardcoded ::backdrop
+      // color (bg-black/60 — it predated and escaped the #652 fence via the
+      // arbitrary-variant spelling) now rides the shell's token backdrop.
+      className="stg:h-[90vh] stg:w-[95vw] stg:max-w-none stg:bg-background stg:text-foreground stg:outline-none"
     >
       {open && (
         <div className="stg:flex stg:h-full stg:flex-col">
@@ -101,7 +89,7 @@ export function WorkflowGraphFullscreenDialog({
           </div>
         </div>
       )}
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/workflow/WorkflowOverviewGraph.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import {
   ReactFlow,
   Controls,
@@ -96,6 +96,13 @@ function WorkflowOverviewGraphInner({
   nodesDraggable: draggable = false,
   className,
 }: WorkflowOverviewGraphProps) {
+  // Instance-scoped React Flow id (oss#593): React Flow derives its internal
+  // DOM ids (aria descriptions, SVG marker/pattern defs) from this id, so two
+  // mounted graphs without explicit ids collide — e.g. the zone-cached detail
+  // page renders a hidden copy whose defs hijack the visible copy's url(#…)
+  // and aria-describedby references.
+  const flowId = useId();
+
   const {
     nodes: baseNodes,
     nodesWithSelection,
@@ -216,6 +223,7 @@ function WorkflowOverviewGraphInner({
     <WorkflowGraphModeProvider mode="overview">
       <div ref={containerRef} className={cn("stg:relative stg:h-full stg:w-full", className)}>
         <ReactFlow
+          id={flowId}
           nodes={displayNodes}
           edges={edges}
           onNodesChange={draggable ? handleNodesChange : undefined}

package/src/workflow/WorkflowRefinePanel.tsx

@@ -6,6 +6,7 @@ import { useRefineWorkflowFlow, type RefinePhase } from "./useRefineWorkflowFlow
 import { MessageThread } from "../execution/MessageThread.js";
 import { computeUnifiedDiff, type DiffLine } from "./workflow-yaml-diff.js";
 import { WorkflowDiffGraph } from "./WorkflowDiffGraph.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /** Props for {@link WorkflowRefinePanel}. */
 export interface WorkflowRefinePanelProps {
@@ -173,7 +174,7 @@ export function WorkflowRefinePanel({
         {/* Starting indicator (before stream connects) */}
         {flow.phase === "starting" && (
           <div className="stg:flex stg:flex-col stg:items-center stg:justify-center stg:gap-2 stg:py-8">
-            <SpinnerIcon />
+            <SpinnerIcon size={14} />
             <p className="stg:text-xs stg:text-muted-foreground">
               Starting Workflow Architect…
             </p>
@@ -429,20 +430,3 @@ function CloseIcon() {
   );
 }
 
-function SpinnerIcon({ size = 14 }: { readonly size?: number }) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}

package/src/workflow/WorkflowRepairCard.tsx

@@ -6,6 +6,7 @@ import { useDiagnoseExecutionFlow, type DiagnosePhase } from "./useDiagnoseExecu
 import { MessageThread } from "../execution/MessageThread.js";
 import { computeUnifiedDiff, type DiffLine } from "./workflow-yaml-diff.js";
 import { WorkflowDiffGraph } from "./WorkflowDiffGraph.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /** Props for {@link WorkflowRepairCard}. */
 export interface WorkflowRepairCardProps {
@@ -160,7 +161,7 @@ export function WorkflowRepairCard({
         {/* Starting indicator */}
         {flow.phase === "starting" && !hasConversation && (
           <div className="stg:flex stg:flex-col stg:items-center stg:justify-center stg:gap-2 stg:py-8">
-            <SpinnerIcon />
+            <SpinnerIcon size={14} />
             <p className="stg:text-xs stg:text-muted-foreground">
               Starting Workflow Architect…
             </p>
@@ -436,20 +437,3 @@ function CloseIcon() {
   );
 }
 
-function SpinnerIcon({ size = 14 }: { readonly size?: number }) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}

package/src/workflow/WorkflowRunDialog.tsx

@@ -1,11 +1,13 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import type { Workflow } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/api_pb";
 import type { WorkflowInstance } from "@stigmer/protos/ai/stigmer/agentic/workflowinstance/v1/api_pb";
 import { useRunWorkflowFlow } from "./useRunWorkflowFlow.js";
 import { WorkflowRunForm } from "./WorkflowRunForm.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /** Props for {@link WorkflowRunDialog}. */
 export interface WorkflowRunDialogProps {
@@ -81,8 +83,6 @@ export function WorkflowRunDialog({
   onSuccess,
   onError,
 }: WorkflowRunDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
   const handleSuccess = useCallback(
     (executionId: string) => {
       onOpenChange(false);
@@ -99,25 +99,19 @@ export function WorkflowRunDialog({
     onError,
   });
 
-  // Sync open state with the native dialog
+  // Each opening starts from a clean form.
   useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (open && !dialog.open) {
-      flow.reset();
-      // Preselection must follow reset (reset clears the selection back to
-      // the server-resolved default). Guarded against stale ids: an instance
-      // deleted between the caller capturing the id and this open falls back
-      // to the default option instead of a <select> value with no option.
-      if (
-        initialInstanceId &&
-        instances.some((i) => i.metadata?.id === initialInstanceId)
-      ) {
-        flow.setSelectedInstanceId(initialInstanceId);
-      }
-      dialog.showModal();
-    } else if (!open && dialog.open) {
-      dialog.close();
+    if (!open) return;
+    flow.reset();
+    // Preselection must follow reset (reset clears the selection back to
+    // the server-resolved default). Guarded against stale ids: an instance
+    // deleted between the caller capturing the id and this open falls back
+    // to the default option instead of a <select> value with no option.
+    if (
+      initialInstanceId &&
+      instances.some((i) => i.metadata?.id === initialInstanceId)
+    ) {
+      flow.setSelectedInstanceId(initialInstanceId);
     }
   }, [
     open,
@@ -127,36 +121,16 @@ export function WorkflowRunDialog({
     instances,
   ]);
 
-  const handleDialogCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onOpenChange(false);
-    },
-    [onOpenChange],
-  );
-
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent<HTMLDialogElement>) => {
-      if (e.target === dialogRef.current) {
-        onOpenChange(false);
-      }
-    },
-    [onOpenChange],
-  );
-
   const workflowName =
     workflow.metadata?.name || workflow.metadata?.slug || "Workflow";
 
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleDialogCancel}
-      onClick={handleBackdropClick}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-lg stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
-        "stg:backdrop:bg-black/50",
-        "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
-      )}
+    <DialogShell
+      open={open}
+      onOpenChange={onOpenChange}
+      width="lg"
+      dismissOnBackdrop
+      aria-label={`Run ${workflowName}`}
     >
       <div className="stg:flex stg:flex-col">
         {/* Header */}
@@ -225,33 +199,12 @@ export function WorkflowRunDialog({
               "stg:disabled:pointer-events-none stg:disabled:opacity-40",
             )}
           >
-            {flow.isSubmitting && <SpinnerIcon />}
+            {flow.isSubmitting && <SpinnerIcon size={14} />}
             {flow.isSubmitting ? "Starting…" : "Run Workflow"}
           </button>
         </div>
       </div>
-    </dialog>
+    </DialogShell>
   );
 }
 
-// ---------------------------------------------------------------------------
-// Icons
-// ---------------------------------------------------------------------------
-
-function SpinnerIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}

package/src/workflow/WorkflowTaskApprovalSummary.tsx

@@ -13,6 +13,7 @@ import {
   type TaskDetailApprovalDecision,
   type TaskReviewerView,
 } from "./task-detail/task-approval.js";
+import { SpinnerIcon } from "../internal/thread-card/glyphs.js";
 
 /** Props for {@link WorkflowTaskApprovalSummary}. */
 export interface WorkflowTaskApprovalSummaryProps {
@@ -101,7 +102,7 @@ export const WorkflowTaskApprovalSummary = memo(function WorkflowTaskApprovalSum
       {/* Decision header */}
       {isFinalizing ? (
         <div className="stg:flex stg:items-center stg:gap-2 stg:text-xs stg:text-muted-foreground">
-          <SpinnerIcon />
+          <SpinnerIcon size={12} />
           <span>Decision recorded — finalizing…</span>
         </div>
       ) : (
@@ -315,19 +316,3 @@ function ToneIcon({ tone }: { readonly tone: DecisionTone }) {
   );
 }
 
-function SpinnerIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
-    </svg>
-  );
-}

package/src/workflow/WorkflowVersionBadge.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { memo, useCallback, useState } from "react";
+import { memo } from "react";
 import { cn } from "@stigmer/theme";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 /** Props for {@link WorkflowVersionBadge}. */
 export interface WorkflowVersionBadgeProps {
@@ -41,19 +42,9 @@ export const WorkflowVersionBadge = memo(function WorkflowVersionBadge({
   isCurrent,
   className,
 }: WorkflowVersionBadgeProps) {
-  const [copied, setCopied] = useState(false);
+  const { copy, copied } = useCopyFeedback();
   const truncated = versionHash.slice(0, 8);
 
-  const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(versionHash);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    } catch {
-      // Clipboard API may be unavailable in some contexts
-    }
-  }, [versionHash]);
-
   return (
     <span className={cn("stg:inline-flex stg:items-center stg:gap-1.5", className)}>
       {isCurrent && (
@@ -75,7 +66,7 @@ export const WorkflowVersionBadge = memo(function WorkflowVersionBadge({
           render={
             <button
               type="button"
-              onClick={handleCopy}
+              onClick={() => void copy(versionHash)}
               className={cn(
                 "stg:shrink-0 stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-[11px] stg:font-medium stg:text-foreground stg:transition-colors",
                 "stg:hover:bg-accent-hover",