@stigmer/react 3.12.1 → 3.12.3

package/src/skill/SkillDiffDialog.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 { useSkillDiff } from "./useSkillDiff.js";
 import { MultiFileDiffView } from "../version-history/MultiFileDiffView.js";
 import { ErrorMessage } from "../error/ErrorMessage.js";
@@ -57,31 +58,9 @@ export interface SkillDiffDialogProps {
  * ```
  */
 export function SkillDiffDialog({ state, onClose }: SkillDiffDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (state && !dialog.open) {
-      dialog.showModal();
-    } else if (!state && dialog.open) {
-      dialog.close();
-    }
-  }, [state]);
-
-  const handleDialogCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onClose();
-    },
-    [onClose],
-  );
-
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent<HTMLDialogElement>) => {
-      if (e.target === e.currentTarget) {
-        onClose();
-      }
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) onClose();
     },
     [onClose],
   );
@@ -94,15 +73,13 @@ export function SkillDiffDialog({ state, onClose }: SkillDiffDialogProps) {
   if (!state) return null;
 
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleDialogCancel}
-      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:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
-      )}
+    <DialogShell
+      open
+      onOpenChange={handleOpenChange}
+      width="4xl"
+      dismissOnBackdrop
+      className="stg:h-[85vh]"
+      aria-label="Skill version diff"
     >
       <div className="stg:flex stg:h-full stg:flex-col">
         {/* Header */}
@@ -142,7 +119,7 @@ export function SkillDiffDialog({ state, onClose }: SkillDiffDialogProps) {
           ) : null}
         </div>
       </div>
-    </dialog>
+    </DialogShell>
   );
 }
 

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 { cn } from "@stigmer/theme";
+import { memo, useCallback } from "react";
 import type { WorkflowGraphModel } from "./workflow-graph-model.js";
 import { taskToYaml } from "./inspector/task-to-yaml.js";
+import { DialogShell } from "../internal/DialogShell.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 /** Props for {@link ViewYamlDialog}. */
 export interface ViewYamlDialogProps {
@@ -31,8 +32,7 @@ export const ViewYamlDialog = memo(function ViewYamlDialog({
   graph,
   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
@@ -40,61 +40,27 @@ export const ViewYamlDialog = memo(function ViewYamlDialog({
 
   const yaml = node ? taskToYaml(node) : "";
 
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (nodeId && node) {
-      if (!dialog.open) dialog.showModal();
-    } else {
-      if (dialog.open) dialog.close();
-    }
-  }, [nodeId, node]);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    const handleClose = () => onClose();
-    dialog.addEventListener("close", handleClose);
-    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 handleBackdropClick = useCallback(
-    (e: React.MouseEvent<HTMLDialogElement>) => {
-      if (e.target === dialogRef.current) {
-        onClose();
-      }
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) onClose();
     },
     [onClose],
   );
 
+  const handleCopy = useCallback(() => {
+    void copy(yaml);
+  }, [copy, yaml]);
+
   return (
-    <dialog
-      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",
-      )}
-      onClick={handleBackdropClick}
+    <DialogShell
+      open={Boolean(nodeId && node)}
+      onOpenChange={handleOpenChange}
+      width="lg"
+      dismissOnBackdrop
+      // `stgm` re-establishes the theme scope (this dialog renders from the
+      // workflow canvas); the var-fallback styling of the body predates the
+      // token utilities and stays untouched here.
+      className="stgm stg:max-h-[80vh] stg:bg-[var(--stgm-background,#fff)] stg:border-[var(--stgm-border,#e5e5e5)]"
       aria-label={node ? `YAML for ${node.taskName}` : "View YAML"}
     >
       {node && (
@@ -136,7 +102,7 @@ export const ViewYamlDialog = memo(function ViewYamlDialog({
           </div>
         </div>
       )}
-    </dialog>
+    </DialogShell>
   );
 });
 

package/src/workflow/WorkflowArchitectDialog.tsx

@@ -1,13 +1,15 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import {
   useWorkflowArchitectFlow,
   type ArchitectPhase,
 } 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 {
@@ -63,8 +65,6 @@ export function WorkflowArchitectDialog({
   onSuccess,
   onError,
 }: WorkflowArchitectDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
   const handleSuccess = useCallback(
     (successOrg: string, slug: string) => {
       onOpenChange(false);
@@ -79,54 +79,23 @@ export function WorkflowArchitectDialog({
     onError,
   });
 
+  // Each opening starts from a clean prompt.
   useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (open && !dialog.open) {
-      flow.reset();
-      dialog.showModal();
-    } else if (!open && dialog.open) {
-      dialog.close();
-    }
+    if (open) flow.reset();
   }, [open, flow.reset]);
 
-  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 isWorking =
-    flow.phase === "starting" ||
-    flow.phase === "streaming" ||
-    flow.phase === "applying";
-
   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-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:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
-      )}
+    <DialogShell
+      open={open}
+      onOpenChange={onOpenChange}
+      width="3xl"
+      dismissOnBackdrop
+      aria-label="Workflow Architect"
     >
       <div className="stg:flex stg:flex-col">
         <DialogPhase flow={flow} onClose={() => onOpenChange(false)} />
       </div>
-    </dialog>
+    </DialogShell>
   );
 }
 
@@ -176,6 +145,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 +170,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 +179,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 +249,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 +406,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 +472,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}

package/src/workflow/WorkflowCanvasInner.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import {
   ReactFlow,
   Controls,
@@ -15,6 +15,7 @@ import type {
   Edge,
   OnNodesChange,
   OnEdgesChange,
+  OnNodeDrag,
   OnConnect,
   IsValidConnection,
 } from "@xyflow/react";
@@ -29,6 +30,8 @@ interface WorkflowCanvasInnerProps {
   edges: Edge[];
   onNodesChange: OnNodesChange;
   onEdgesChange: OnEdgesChange;
+  onNodeDragStart: OnNodeDrag;
+  onNodeDragStop: OnNodeDrag;
   onNodeClick: (event: React.MouseEvent, node: Node) => void;
   onEdgeClick: (event: React.MouseEvent, edge: Edge) => void;
   onPaneClick: () => void;
@@ -72,6 +75,8 @@ export function WorkflowCanvasInner({
   edges,
   onNodesChange,
   onEdgesChange,
+  onNodeDragStart,
+  onNodeDragStop,
   onNodeClick,
   onEdgeClick,
   onPaneClick,
@@ -87,6 +92,11 @@ export function WorkflowCanvasInner({
   onSelectionContextMenu,
   nodeErrors,
 }: WorkflowCanvasInnerProps) {
+  // 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.
+  const flowId = useId();
+
   const enrichedNodes = useMemo(() => {
     if (!nodeErrors || nodeErrors.size === 0) return nodes;
     return nodes.map((node) => {
@@ -109,10 +119,13 @@ export function WorkflowCanvasInner({
 
   return (
     <ReactFlow
+      id={flowId}
       nodes={enrichedNodes}
       edges={edges}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
+      onNodeDragStart={onNodeDragStart}
+      onNodeDragStop={onNodeDragStop}
       onNodeClick={onNodeClick}
       onEdgeClick={onEdgeClick}
       onPaneClick={onPaneClick}

package/src/workflow/WorkflowDiffGraph.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import { memo, useCallback, useEffect, useId, useMemo, useRef } from "react";
 import {
   ReactFlow,
   Controls,
@@ -73,6 +73,11 @@ function WorkflowDiffGraphInner({
   onTaskClick,
   className,
 }: WorkflowDiffGraphProps) {
+  // 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.
+  const flowId = useId();
+
   const {
     nodes,
     edges,
@@ -146,6 +151,7 @@ function WorkflowDiffGraphInner({
           </div>
         )}
         <ReactFlow
+          id={flowId}
           nodes={nodesWithSelection}
           edges={edges}
           nodeTypes={nodeTypes}