@stigmer/react 3.12.0 → 3.12.2

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);
@@ -344,24 +413,38 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
   // Thread view. One always-visible announcer serves both center views.
   const announcement = useExecutionAnnouncements(effectiveTaskStates);
 
-  // Terminal-phase snapshot refetch (T04, DD-T04-4). While a run streams,
-  // the cards' collapsed lines and bodies work from the TRUNCATED event
-  // summaries; the full per-task output lands on `status.tasks[]` only when
-  // the runner persists the terminal snapshot. The stream store's stage is
-  // the live end-of-run signal (`"complete"` on the terminal event) — the
-  // snapshot's own `phase` cannot be the trigger, since it only moves on a
-  // refetch (the circularity behind the stale "Pending" header, R1-5).
-  // Scoped to the live→complete TRANSITION: a terminal-replay mount starts
-  // at "complete" without ever streaming and already fetched a settled
-  // snapshot, so it must not refetch again.
+  // Boundary-transition snapshot refetches. The snapshot fetch is one-shot
+  // (`useWorkflowExecution` never polls), so the stream store's stage
+  // transitions are the only live signals that the mount snapshot went
+  // stale — the snapshot's own `phase` cannot be the trigger, since it
+  // only moves on a refetch (the circularity behind the stale "Pending"
+  // header, R1-5). Two transitions matter, one per direction:
+  //
+  // - ENTERING "complete" (T04, DD-T04-4): while a run streams, the cards'
+  //   collapsed lines and bodies work from the TRUNCATED event summaries;
+  //   the full per-task output lands on `status.tasks[]` only when the
+  //   runner persists the terminal snapshot.
+  // - ENTERING "streaming" (oss#571): the store flips connecting→streaming
+  //   on the FIRST delivered event, so this transition is the "run
+  //   started" signal for a page that landed on a still-pending execution
+  //   — without the refetch, the phase badge and the phase-gated
+  //   Pause/Cancel would freeze at "Pending" for the entire run. It also
+  //   covers reconnecting→streaming, where the snapshot slept through the
+  //   outage.
+  //
+  // Both are TRANSITION-scoped (never fire on mount): a terminal-replay
+  // mount starts at "complete" and a mid-run mount starts at "streaming",
+  // and each already fetched a fresh snapshot.
   const prevStreamStageRef = useRef(streamState.stage);
   useEffect(() => {
     const prev = prevStreamStageRef.current;
     prevStreamStageRef.current = streamState.stage;
-    if (
+    const enteredComplete =
       streamState.stage === "complete" &&
-      (prev === "streaming" || prev === "reconnecting")
-    ) {
+      (prev === "streaming" || prev === "reconnecting");
+    const enteredStreaming =
+      streamState.stage === "streaming" && prev !== "streaming";
+    if (enteredComplete || enteredStreaming) {
       refetchExecution();
     }
   }, [streamState.stage, refetchExecution]);
@@ -453,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={
           <>
@@ -463,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}
+              />
+            )}
           </>
         }
       />
@@ -599,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

@@ -4,6 +4,8 @@ import { useCallback, useEffect, useRef } from "react";
 import { cn } from "@stigmer/theme";
 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 {
@@ -74,13 +76,12 @@ export function WorkflowExplainDialog({
     [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
@@ -89,7 +90,7 @@ export function WorkflowExplainDialog({
       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:backdrop:bg-backdrop",
         "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
       )}
     >
@@ -102,7 +103,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,7 +200,7 @@ 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>
@@ -209,20 +210,3 @@ export function WorkflowExplainDialog({
   );
 }
 
-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/WorkflowNode.tsx

@@ -28,7 +28,7 @@ export const WorkflowNode = memo(function WorkflowNode({
   selected,
 }: NodeProps & { data: CanvasTaskNodeData }) {
   const mode = useWorkflowGraphMode();
-  const visualSpec = getVisualSpec(data.isSentinel ? id : data.kindString);
+  const visualSpec = getVisualSpec(data.kindString);
   const categoryColor = CATEGORY_COLORS[data.category];
   const errorCount = data.errorCount ?? 0;
   const isNested = NESTED_TASK_KINDS.has(data.kindString);
@@ -38,7 +38,10 @@ export const WorkflowNode = memo(function WorkflowNode({
   return (
     <div
       data-visual-class={data.visualClass}
-      data-task-kind={data.kindString}
+      // data-task-kind is a sanctioned e2e/embedding hook meaning "real
+      // workflow task kind" — sentinels omit it and are targeted via
+      // data-id + data-visual-class instead (oss#581).
+      data-task-kind={data.isSentinel ? undefined : data.kindString}
       data-execution-status={executionState?.status}
       data-diff-status={diffState?.status}
       aria-label={buildAriaLabel(data, errorCount, executionState?.status)}

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

@@ -6,6 +6,7 @@ import type { Workflow } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/ap
 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 {
@@ -24,6 +25,16 @@ export interface WorkflowRunDialogProps {
    * Passed through to the form's instance picker to control visibility threshold.
    */
   readonly defaultInstanceId?: string;
+  /**
+   * Instance to preselect when the dialog opens — wire this from a
+   * row-level "Run" action so the form reflects the instance the user
+   * clicked. Applied on each open transition (after the form resets);
+   * ignored when the id is not in `instances`, so a stale id degrades
+   * to the default option. Omit (or pass `null`) for the
+   * server-resolved default. Same convention as
+   * {@link SessionComposer}'s `initialInstanceId`.
+   */
+  readonly initialInstanceId?: string | null;
   /**
    * Called after the execution is created successfully.
    * Receives the execution ID — use for navigation.
@@ -67,6 +78,7 @@ export function WorkflowRunDialog({
   workflow,
   instances,
   defaultInstanceId,
+  initialInstanceId,
   onSuccess,
   onError,
 }: WorkflowRunDialogProps) {
@@ -94,11 +106,27 @@ export function WorkflowRunDialog({
     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();
     }
-  }, [open, flow.reset]);
+  }, [
+    open,
+    flow.reset,
+    flow.setSelectedInstanceId,
+    initialInstanceId,
+    instances,
+  ]);
 
   const handleDialogCancel = useCallback(
     (e: React.SyntheticEvent) => {
@@ -127,7 +155,7 @@ export function WorkflowRunDialog({
       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:backdrop:bg-backdrop",
         "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
       )}
     >
@@ -198,7 +226,7 @@ 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>
@@ -207,24 +235,3 @@ export function WorkflowRunDialog({
   );
 }
 
-// ---------------------------------------------------------------------------
-// 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",

package/src/workflow/WorkflowVersionTimeline.tsx

@@ -6,6 +6,7 @@ import { useWorkflowVersions } from "./useWorkflowVersions.js";
 import { WorkflowVersionBadge } from "./WorkflowVersionBadge.js";
 import type { VersionEntry } from "../version-history/types.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
+import { formatRelativeTime } from "../activity/format-relative-time.js";
 
 /** Props for {@link WorkflowVersionTimeline}. */
 export interface WorkflowVersionTimelineProps {
@@ -250,31 +251,6 @@ function EmptyState({ className }: { readonly className?: string }) {
   );
 }
 
-// ---------------------------------------------------------------------------
-// Utilities
-// ---------------------------------------------------------------------------
-
-function formatRelativeTime(date: Date): string {
-  const now = Date.now();
-  const diffMs = now - date.getTime();
-  const diffSec = Math.floor(diffMs / 1000);
-  const diffMin = Math.floor(diffSec / 60);
-  const diffHr = Math.floor(diffMin / 60);
-  const diffDays = Math.floor(diffHr / 24);
-
-  if (diffSec < 60) return "just now";
-  if (diffMin < 60) return `${diffMin}m ago`;
-  if (diffHr < 24) return `${diffHr}h ago`;
-  if (diffDays < 7) return `${diffDays}d ago`;
-  if (diffDays < 30) return `${Math.floor(diffDays / 7)}w ago`;
-
-  return date.toLocaleDateString(undefined, {
-    month: "short",
-    day: "numeric",
-    year: date.getFullYear() !== new Date().getFullYear() ? "numeric" : undefined,
-  });
-}
-
 // ---------------------------------------------------------------------------
 // Icons
 // ---------------------------------------------------------------------------