@stigmer/react 3.12.1 → 3.12.2

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}

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

@@ -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/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 {
@@ -154,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",
       )}
     >
@@ -225,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>
@@ -234,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
 // ---------------------------------------------------------------------------