@stigmer/react 3.12.1 → 3.12.2

package/src/settings/OrgProfileSection.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import { useCallback } from "react";
+import { useCallback, useId } from "react";
 import type { Organization } from "@stigmer/protos/ai/stigmer/tenancy/organization/v1/api_pb";
 import { OrgProfilePanel } from "../organization/OrgProfilePanel.js";
 import { useOrg } from "../organization/OrgProvider.js";
 
 /** Settings section for editing the active organization profile. */
 export function OrgProfileSection() {
+  const headingId = useId();
   const { activeOrg, refresh } = useOrg();
   const orgId = activeOrg?.metadata?.id ?? "";
 
@@ -18,9 +19,9 @@ export function OrgProfileSection() {
   );
 
   return (
-    <section aria-labelledby="org-profile-heading">
+    <section aria-labelledby={headingId}>
       <h2
-        id="org-profile-heading"
+        id={headingId}
         className="stg:text-foreground stg:mb-1 stg:text-sm stg:font-semibold"
       >
         Organization Profile

package/src/settings/PlatformClientsSection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useId, useRef, useState } from "react";
 import type { PlatformClient } from "@stigmer/protos/ai/stigmer/iam/platformclient/v1/api_pb";
 import type { PlatformClientCreateResponse } from "@stigmer/protos/ai/stigmer/iam/platformclient/v1/io_pb";
 import { PlatformClientListPanel } from "../platform-client/PlatformClientListPanel.js";
@@ -24,6 +24,7 @@ type FlowState =
 
 /** Settings section for creating and maintaining platform clients. */
 export function PlatformClientsSection() {
+  const headingId = useId();
   const org = useActiveOrgSlug();
   const pcAvailable = useResourceAvailable(ApiResourceKind.platform_client);
 
@@ -71,10 +72,10 @@ export function PlatformClientsSection() {
   }, []);
 
   return (
-    <section aria-labelledby="platform-clients-heading">
+    <section aria-labelledby={headingId}>
       <div className="stg:mb-3 stg:flex stg:items-center stg:justify-between">
         <h2
-          id="platform-clients-heading"
+          id={headingId}
           className="stg:text-foreground stg:text-sm stg:font-semibold"
         >
           Platform Clients

package/src/settings/UsageSection.tsx

@@ -1,17 +1,19 @@
 "use client";
 
+import { useId } from "react";
 import { OrgUsagePanel } from "../usage/OrgUsagePanel.js";
 import { useOrg } from "../organization/OrgProvider.js";
 
 /** Settings section for organization usage and cost reporting. */
 export function UsageSection() {
+  const headingId = useId();
   const { activeOrg } = useOrg();
   const orgId = activeOrg?.metadata?.id ?? "";
 
   return (
-    <section aria-labelledby="usage-heading">
+    <section aria-labelledby={headingId}>
       <h2
-        id="usage-heading"
+        id={headingId}
         className="stg:text-foreground stg:mb-1 stg:text-sm stg:font-semibold"
       >
         Usage

package/src/sharing/ShareAgentDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useMemo, useRef, useState, type FormEvent } from "react";
+import { useCallback, useId, useMemo, useRef, useState, type FormEvent } from "react";
 import { cn } from "@stigmer/theme";
 import {
   MAX_ALLOWED_ORIGINS,
@@ -139,6 +139,12 @@ export function ShareAgentDialog({
 }: ShareAgentDialogProps) {
   const dialogRef = useRef<HTMLDialogElement>(null);
 
+  // Instance-scoped title id (oss#593): a reusable component must not
+  // hardcode DOM ids — hosts legitimately mount this dialog more than once
+  // per page (e.g. zone-cached detail pages), and duplicate ids break the
+  // aria-labelledby association for every copy after the first.
+  const titleId = useId();
+
   const handleClose = useCallback(() => {
     dialogRef.current?.close();
     onOpenChange(false);
@@ -168,9 +174,9 @@ export function ShareAgentDialog({
       onClose={handleClose}
       className={cn(
         "stg:w-full stg:max-w-lg stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
-        modal ? "stg:fixed stg:inset-0 stg:m-auto stg:backdrop:bg-black/50" : "stg:relative",
+        modal ? "stg:fixed stg:inset-0 stg:m-auto stg:backdrop:bg-backdrop" : "stg:relative",
       )}
-      aria-labelledby="share-agent-title"
+      aria-labelledby={titleId}
     >
       {/* Body mounts only while open so its draft state resets per
           session — reopening the dialog never shows a stale draft. */}
@@ -182,6 +188,7 @@ export function ShareAgentDialog({
           buildShareUrl={buildShareUrl}
           onSharingChanged={onSharingChanged}
           onClose={handleClose}
+          titleId={titleId}
         />
       )}
     </dialog>
@@ -207,6 +214,7 @@ function ShareAgentDialogBody({
   buildShareUrl,
   onSharingChanged,
   onClose,
+  titleId,
 }: {
   readonly agent: Agent;
   readonly share: AgentShare | null;
@@ -214,6 +222,8 @@ function ShareAgentDialogBody({
   readonly buildShareUrl?: (org: string, slug: string) => string;
   readonly onSharingChanged?: () => void;
   readonly onClose: () => void;
+  /** Heading id minted by the outer dialog for its aria-labelledby. */
+  readonly titleId: string;
 }) {
   const [created, setCreated] = useState<AgentShare | null>(null);
   const activeShare = share ?? created;
@@ -229,7 +239,7 @@ function ShareAgentDialogBody({
       <div className="stg:flex stg:items-start stg:justify-between stg:border-b stg:border-border stg:px-6 stg:py-4">
         <div className="stg:min-w-0">
           <h2
-            id="share-agent-title"
+            id={titleId}
             className="stg:text-base stg:font-semibold stg:text-foreground"
           >
             {isCreating ? "Create share" : "Share"}
@@ -322,6 +332,11 @@ function CreateShareForm({
   const agentName = agent.metadata?.name || (agent.metadata?.slug ?? "");
   const isCrossOrg = shareOrg !== (agent.metadata?.org ?? "");
 
+  // Instance-scoped field ids (oss#593) — see the outer dialog's titleId.
+  const baseId = useId();
+  const nameId = `${baseId}-name`;
+  const slugId = `${baseId}-slug`;
+
   const [name, setName] = useState(agentName);
   const [slug, setSlug] = useState(agent.metadata?.slug ?? "");
   // Once the user manually edits the slug field, stop auto-deriving.
@@ -421,13 +436,13 @@ function CreateShareForm({
       {/* ---- Name ---- */}
       <div className="stg:space-y-1">
         <label
-          htmlFor="stgm-new-share-name"
+          htmlFor={nameId}
           className="stg:text-xs stg:font-medium stg:text-foreground"
         >
           Name
         </label>
         <input
-          id="stgm-new-share-name"
+          id={nameId}
           type="text"
           value={name}
           onChange={(e) => handleNameChange(e.target.value)}
@@ -457,13 +472,13 @@ function CreateShareForm({
       {/* ---- Slug ---- */}
       <div className="stg:space-y-1">
         <label
-          htmlFor="stgm-new-share-slug"
+          htmlFor={slugId}
           className="stg:text-xs stg:font-medium stg:text-foreground"
         >
           Slug
         </label>
         <input
-          id="stgm-new-share-slug"
+          id={slugId}
           type="text"
           value={slug}
           onChange={(e) => handleSlugChange(e.target.value)}
@@ -533,6 +548,9 @@ function ShareAgentForm({
 }) {
   const agentName = agent.metadata?.name || (agent.metadata?.slug ?? "");
 
+  // Instance-scoped label id (oss#593) — see the outer dialog's titleId.
+  const enabledLabelId = useId();
+
   // The latest server share is the single baseline: the draft, the link
   // token, and the share id for rotation all derive from it.
   const [share, setShare] = useState<AgentShare>(initialShare);
@@ -644,7 +662,7 @@ function ShareAgentForm({
         <div className="stg:flex stg:items-start stg:justify-between stg:gap-4">
           <div className="stg:min-w-0">
             <span
-              id="share-enabled-label"
+              id={enabledLabelId}
               className="stg:text-sm stg:font-medium stg:text-foreground"
             >
               {isOrgAudience
@@ -657,7 +675,7 @@ function ShareAgentForm({
             checked={draft.enabled}
             onCheckedChange={handleToggle}
             disabled={isPending}
-            aria-labelledby="share-enabled-label"
+            aria-labelledby={enabledLabelId}
           />
         </div>
         {!isCrossOrg && (

package/src/sidebar/__tests__/WorkspaceSidebar.test.tsx

@@ -274,7 +274,10 @@ describe("WorkspaceSidebar — chrome", () => {
     expect(screen.getByTestId("footer-slot")).toBeTruthy();
     const toggle = screen.getByLabelText("Collapse sidebar");
     expect(toggle.getAttribute("aria-expanded")).toBe("false");
-    expect(toggle.getAttribute("aria-controls")).toBe("sidebar");
+    // The nav id is minted per mount; assert the association, not the value.
+    const controlsId = toggle.getAttribute("aria-controls");
+    expect(controlsId).toBeTruthy();
+    expect(document.getElementById(controlsId!)?.tagName).toBe("NAV");
   });
 
   it("resolves the org switcher from the mocked transport", async () => {

package/src/sidebar/chrome.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { ReactNode } from "react";
+import { useId, type ReactNode } from "react";
 import { PanelLeft } from "lucide-react";
 import { cn } from "@stigmer/theme";
 import type { Organization } from "@stigmer/protos/ai/stigmer/tenancy/organization/v1/api_pb";
@@ -46,9 +46,8 @@ export interface SidebarChromeProps {
 /**
  * Outer sidebar frame: `<nav>` container, top row, content, footer band.
  *
- * The `id="sidebar"` / `aria-controls` pairing matches the console's DOM
- * contract (the app shell's floating "Open sidebar" button targets it);
- * only one sidebar renders at a time, so the id cannot collide.
+ * The nav id exists solely for the collapse toggle's `aria-controls`
+ * association; it is minted per mount like every SDK DOM id.
  */
 export function SidebarChrome({
   ariaLabel,
@@ -58,9 +57,10 @@ export function SidebarChrome({
   footer,
   children,
 }: SidebarChromeProps) {
+  const navId = useId();
   return (
     <nav
-      id="sidebar"
+      id={navId}
       aria-label={ariaLabel}
       className="stg:bg-sidebar stg:text-sidebar-foreground stg:flex stg:h-full stg:flex-col"
     >
@@ -70,7 +70,7 @@ export function SidebarChrome({
           type="button"
           onClick={onCollapse}
           aria-expanded={isOpen}
-          aria-controls="sidebar"
+          aria-controls={navId}
           aria-label="Collapse sidebar"
           className={cn(
             "stg:inline-flex stg:size-7 stg:shrink-0 stg:items-center stg:justify-center stg:rounded-md",

package/src/skill/SkillDiffDialog.tsx

@@ -100,7 +100,7 @@ export function SkillDiffDialog({ state, onClose }: SkillDiffDialogProps) {
       onClick={handleBackdropClick}
       className={cn(
         "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:h-[85vh] stg:w-full stg:max-w-4xl 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",
       )}
     >

package/src/styles.css

@@ -331,6 +331,40 @@
     animation: stgm-running-pulse 2s ease-in-out infinite;
   }
 
+  /* Ambient liveness (stigmer#277): a left-to-right light sweep across the
+     text of whatever is currently in flight — a running tool's label, the
+     thinking indicator, the thread's bottom status line. The sweep rides the
+     WORDS describing the current activity (not a spinner beside them), so
+     the screen is never still while the agent is alive.
+
+     Token-driven: the text settles to the muted base with a foreground-
+     colored band sweeping through, which reads correctly in both color
+     modes and every preset. background-clip:text needs the -webkit- prefix
+     in Safari; the transparent fill is what lets the gradient show through
+     the glyphs. */
+  @keyframes stgm-shimmer {
+    to {
+      background-position: -200% 0;
+    }
+  }
+
+  .stgm-shimmer-label {
+    background-image: linear-gradient(
+      90deg,
+      var(--stgm-muted-foreground) 0%,
+      var(--stgm-muted-foreground) 35%,
+      var(--stgm-foreground) 50%,
+      var(--stgm-muted-foreground) 65%,
+      var(--stgm-muted-foreground) 100%
+    );
+    background-size: 200% 100%;
+    background-position: 0 0;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: stgm-shimmer 2s linear infinite;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .stgm {
       --stgm-motion-duration: 0ms;
@@ -344,6 +378,15 @@
       animation-iteration-count: 1 !important;
       transition-duration: 0.01ms !important;
     }
+
+    /* The shimmer is pure decoration: under reduced motion the label drops
+       the clipped gradient entirely and reads as ordinary text (DD-015) —
+       a frozen gradient band would look like a rendering glitch. */
+    .stgm-shimmer-label {
+      background-image: none;
+      color: inherit;
+      animation: none;
+    }
   }
 }
 

package/src/version-history/VersionTimelineEntry.tsx

@@ -3,6 +3,7 @@
 import { cn } from "@stigmer/theme";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import type { VersionTimelineEntryProps } from "./types.js";
+import { formatRelativeTime } from "../activity/format-relative-time.js";
 
 /**
  * A single row in a version timeline.
@@ -205,27 +206,6 @@ function GitProvenanceRow({
 // 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,
-  });
-}
-
 function normalizeGitUrl(url: string): string | null {
   if (!url) return null;
   const cleaned = url.replace(/\.git$/, "");

package/src/workflow/FailedRunsWidget.tsx

@@ -4,6 +4,7 @@ import { memo } from "react";
 import type { WorkflowExecution } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/api_pb";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import { cn } from "@stigmer/theme";
+import { formatRelativeTime } from "../activity/format-relative-time.js";
 
 export interface FailedRunsWidgetProps {
   /** Recent failed executions to display. */
@@ -14,14 +15,6 @@ export interface FailedRunsWidgetProps {
   readonly className?: string;
 }
 
-function formatTimeAgo(date: Date): string {
-  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
-  if (seconds < 60) return "just now";
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
-  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
-  return `${Math.floor(seconds / 86400)}d ago`;
-}
-
 /**
  * Dashboard widget showing recent failed workflow executions.
  *
@@ -85,7 +78,7 @@ export const FailedRunsWidget = memo(function FailedRunsWidget({
                     </p>
                     {failedDate && (
                       <p className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground">
-                        {formatTimeAgo(failedDate)}
+                        {formatRelativeTime(failedDate)}
                       </p>
                     )}
                   </div>

package/src/workflow/PendingApprovalsWidget.tsx

@@ -4,6 +4,7 @@ import { memo } from "react";
 import type { PendingApproval } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/io_pb";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import { cn } from "@stigmer/theme";
+import { formatRelativeTime } from "../activity/format-relative-time.js";
 
 export interface PendingApprovalsWidgetProps {
   readonly approvals: readonly PendingApproval[];
@@ -14,14 +15,6 @@ export interface PendingApprovalsWidgetProps {
   readonly className?: string;
 }
 
-function formatTimeAgo(date: Date): string {
-  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
-  if (seconds < 60) return "just now";
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
-  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
-  return `${Math.floor(seconds / 86400)}d ago`;
-}
-
 /**
  * Dashboard widget showing pending human_input approvals.
  *
@@ -98,7 +91,7 @@ export const PendingApprovalsWidget = memo(function PendingApprovalsWidget({
                     <p className="stg:mt-0.5 stg:truncate stg:text-xs stg:text-muted-foreground">
                       Task: {approval.taskName}
                       {requestedAt && (
-                        <> &middot; {formatTimeAgo(requestedAt)}</>
+                        <> &middot; {formatRelativeTime(requestedAt)}</>
                       )}
                     </p>
                   </div>

package/src/workflow/ViewYamlDialog.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useRef } from "react";
 import { cn } from "@stigmer/theme";
 import type { WorkflowGraphModel } from "./workflow-graph-model.js";
 import { taskToYaml } from "./inspector/task-to-yaml.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 /** Props for {@link ViewYamlDialog}. */
 export interface ViewYamlDialogProps {
@@ -32,7 +33,7 @@ export const ViewYamlDialog = memo(function ViewYamlDialog({
   onClose,
 }: ViewYamlDialogProps) {
   const dialogRef = useRef<HTMLDialogElement>(null);
-  const [copied, setCopied] = useState(false);
+  const { copy, copied } = useCopyFeedback();
 
   const node = nodeId && graph
     ? graph.nodes.find((n) => n.id === nodeId) ?? null
@@ -58,25 +59,9 @@ export const ViewYamlDialog = memo(function ViewYamlDialog({
     return () => dialog.removeEventListener("close", handleClose);
   }, [onClose]);
 
-  const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(yaml);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // Fallback for environments without clipboard API
-      const textarea = document.createElement("textarea");
-      textarea.value = yaml;
-      textarea.style.position = "fixed";
-      textarea.style.opacity = "0";
-      document.body.appendChild(textarea);
-      textarea.select();
-      document.execCommand("copy");
-      document.body.removeChild(textarea);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
-  }, [yaml]);
+  const handleCopy = useCallback(() => {
+    void copy(yaml);
+  }, [copy, yaml]);
 
   const handleBackdropClick = useCallback(
     (e: React.MouseEvent<HTMLDialogElement>) => {
@@ -92,7 +77,7 @@ export const ViewYamlDialog = memo(function ViewYamlDialog({
       ref={dialogRef}
       className={cn(
         "stgm stg:m-auto stg:max-h-[80vh] stg:w-full stg:max-w-lg stg:rounded-lg stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-background,#fff)] stg:p-0 stg:shadow-xl",
-        "stg:backdrop:bg-black/40",
+        "stg:backdrop:bg-backdrop",
       )}
       onClick={handleBackdropClick}
       aria-label={node ? `YAML for ${node.taskName}` : "View YAML"}

package/src/workflow/WorkflowArchitectDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
 import {
   useWorkflowArchitectFlow,
@@ -8,6 +8,7 @@ import {
 } from "./useWorkflowArchitectFlow.js";
 import { MessageThread } from "../execution/MessageThread.js";
 import { WorkflowDiffGraph } from "./WorkflowDiffGraph.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /** Props for {@link WorkflowArchitectDialog}. */
 export interface WorkflowArchitectDialogProps {
@@ -119,7 +120,7 @@ export function WorkflowArchitectDialog({
       onClick={handleBackdropClick}
       className={cn(
         "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-3xl 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",
       )}
     >
@@ -176,6 +177,7 @@ function InputPhase({
   readonly flow: ReturnType<typeof useWorkflowArchitectFlow>;
   readonly onClose: () => void;
 }) {
+  const promptId = useId();
   return (
     <>
       <div className="stg:border-b stg:border-border stg:px-6 stg:py-4">
@@ -200,7 +202,7 @@ function InputPhase({
 
         <div className="stg:flex stg:flex-col stg:gap-1">
           <label
-            htmlFor="architect-prompt"
+            htmlFor={promptId}
             className="stg:text-xs stg:font-medium stg:text-foreground"
           >
             Description
@@ -209,7 +211,7 @@ function InputPhase({
             </span>
           </label>
           <textarea
-            id="architect-prompt"
+            id={promptId}
             value={flow.prompt}
             onChange={(e) => flow.setPrompt(e.target.value)}
             placeholder="e.g., A workflow that enriches customer data using my data-agent, validates the output, and sends a Slack notification on failure"
@@ -279,7 +281,7 @@ function StreamingPhase({
             Workflow Architect
           </h3>
           <span className="stg:inline-flex stg:items-center stg:gap-1.5 stg:text-xs stg:text-muted-foreground">
-            <SpinnerIcon />
+            <SpinnerIcon size={14} />
             {flow.phase === "starting" ? "Starting…" : "Working…"}
           </span>
         </div>
@@ -436,7 +438,7 @@ function ResultPhase({
               "stg:disabled:pointer-events-none stg:disabled:opacity-40",
             )}
           >
-            {isApplying && <SpinnerIcon />}
+            {isApplying && <SpinnerIcon size={14} />}
             {isApplying ? "Creating…" : "Create Workflow"}
           </button>
         </div>
@@ -502,24 +504,3 @@ function ErrorPhase({
   );
 }
 
-// ---------------------------------------------------------------------------
-// Shared components
-// ---------------------------------------------------------------------------
-
-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/WorkflowArtifactDocument.tsx

@@ -3,16 +3,15 @@
 // Editor-area document rendering one workflow Artifact resource's content.
 // Domain: workflow (the Artifact-resource counterpart of execution/ArtifactDocument).
 
-import { useCallback, useState } from "react";
+import { useCallback } from "react";
 import type { Artifact } from "@stigmer/protos/ai/stigmer/agentic/artifact/v1/api_pb";
 import { cn } from "@stigmer/theme";
 import { ArtifactFileContent } from "../execution/ArtifactFileContent.js";
 import { formatArtifactSize } from "../execution/artifact-utils.js";
 import { useArtifactContentById } from "../execution/useArtifactContentById.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 import { useWorkflowArtifactDownload } from "./useWorkflowArtifactDownload.js";
 
-const COPIED_FEEDBACK_MS = 2000;
-
 /** Props for {@link WorkflowArtifactDocument}. */
 export interface WorkflowArtifactDocumentProps {
   /** The workflow artifact to render. */
@@ -78,14 +77,11 @@ export function WorkflowArtifactDocument({
 
   const { download, isDownloading } = useWorkflowArtifactDownload();
 
-  const [copied, setCopied] = useState(false);
+  const { copy: copyToClipboard, copied } = useCopyFeedback();
   const copy = useCallback(() => {
     if (!content) return;
-    void navigator.clipboard.writeText(content).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
-    });
-  }, [content]);
+    void copyToClipboard(content);
+  }, [content, copyToClipboard]);
 
   const showCopy = content !== null;
 

package/src/workflow/WorkflowCanvasEditor.tsx

@@ -636,6 +636,8 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
               edges={canvas.edges}
               onNodesChange={canvas.onNodesChange}
               onEdgesChange={canvas.onEdgesChange}
+              onNodeDragStart={canvas.onNodeDragStart}
+              onNodeDragStop={canvas.onNodeDragStop}
               onNodeClick={handleNodeClick}
               onEdgeClick={handleEdgeClick}
               onPaneClick={handlePaneClick}