@stigmer/react 1.0.4 → 2.0.0

package/src/workflow/WorkflowArchitectDialog.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
 import {
   useWorkflowArchitectFlow,
   type ArchitectPhase,
 } from "./useWorkflowArchitectFlow";
 import { MessageThread } from "../execution/MessageThread";
+import { WorkflowDiffGraph } from "./WorkflowDiffGraph";
 
 /** Props for {@link WorkflowArchitectDialog}. */
 export interface WorkflowArchitectDialogProps {
@@ -331,6 +332,7 @@ function ResultPhase({
   readonly onClose: () => void;
 }) {
   const isApplying = flow.phase === "applying";
+  const [showYaml, setShowYaml] = useState(false);
 
   return (
     <>
@@ -367,11 +369,29 @@ function ResultPhase({
         {flow.extractedYaml && (
           <div>
             <h4 className="mb-1 text-xs font-medium text-muted-foreground">
-              Generated YAML
+              Workflow Structure
             </h4>
-            <pre className="max-h-80 overflow-auto rounded-md border border-border bg-muted p-3 text-xs leading-relaxed text-foreground">
-              {flow.extractedYaml}
-            </pre>
+            <div className="h-[280px] overflow-hidden rounded-md border border-border">
+              <WorkflowDiffGraph
+                beforeYaml=""
+                afterYaml={flow.extractedYaml}
+              />
+            </div>
+
+            <div className="mt-3">
+              <button
+                type="button"
+                onClick={() => setShowYaml((v) => !v)}
+                className="text-xs font-medium text-muted-foreground hover:text-foreground"
+              >
+                {showYaml ? "▾ Hide YAML" : "▸ View YAML"}
+              </button>
+              {showYaml && (
+                <pre className="mt-1 max-h-60 overflow-auto rounded-md border border-border bg-muted p-3 text-xs leading-relaxed text-foreground">
+                  {flow.extractedYaml}
+                </pre>
+              )}
+            </div>
           </div>
         )}
       </div>

package/src/workflow/WorkflowCanvasEditor.tsx

@@ -5,14 +5,17 @@ import type { ReactNode } from "react";
 import { cn } from "@stigmer/theme";
 import { ReactFlowProvider } from "@xyflow/react";
 import { useWorkflowCanvas } from "./useWorkflowCanvas";
+import type { LayoutEngine } from "./layout";
 import { WorkflowTaskPalette } from "./WorkflowTaskPalette";
 import { WorkflowInspectorPanel } from "./WorkflowInspectorPanel";
+import { WorkflowSummaryPanel } from "./inspector/WorkflowSummaryPanel";
 import { CanvasActionsContext } from "./CanvasActionsContext";
 import type { CanvasActions } from "./CanvasActionsContext";
 import { CanvasContextMenu } from "./CanvasContextMenu";
 import type { CanvasContextMenuTarget } from "./CanvasContextMenu";
 import { TaskPickerPopover } from "./TaskPickerPopover";
 import { useCanvasKeyboardShortcuts } from "./useCanvasKeyboardShortcuts";
+import { ViewYamlDialog } from "./ViewYamlDialog";
 
 /** Props for {@link WorkflowCanvasEditor}. */
 export interface WorkflowCanvasEditorProps {
@@ -40,6 +43,12 @@ export interface WorkflowCanvasEditorProps {
   readonly className?: string;
   /** Fallback to show while the canvas loads (DD-013 lazy loading). */
   readonly loadingFallback?: ReactNode;
+  /**
+   * Layout engine for the "Auto Layout" action.
+   * Pass the result of {@link useElkLayoutEngine} for ELK-powered layout.
+   * When omitted, dagre is used as the default.
+   */
+  readonly layoutEngine?: LayoutEngine | null;
 }
 
 const LazyCanvasInner = lazy(() =>
@@ -69,9 +78,10 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
   nodeErrors,
   className,
   loadingFallback,
+  layoutEngine,
 }: WorkflowCanvasEditorProps) {
   const containerRef = useRef<HTMLDivElement>(null);
-  const canvas = useWorkflowCanvas(yaml, containerRef);
+  const canvas = useWorkflowCanvas(yaml, containerRef, { layoutEngine: layoutEngine ?? undefined });
   const [paletteCollapsed, setPaletteCollapsed] = useState(false);
   const togglePalette = useCallback(() => setPaletteCollapsed((p) => !p), []);
 
@@ -142,6 +152,9 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
     clearSelection: canvas.clearSelection,
     onRequestTaskPicker: handleRequestTaskPicker,
     onDismiss: handleKeyboardDismiss,
+    copySelection: canvas.copySelection,
+    pasteAtCenter: canvas.pasteAtCenter,
+    cutSelection: canvas.cutSelection,
   });
 
   useEffect(() => {
@@ -282,6 +295,91 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
     setContextMenu(null);
   }, [canvas.autoLayout]);
 
+  const handleContextMenuToggleDisabled = useCallback(
+    (nodeId: string) => {
+      canvas.toggleNodeDisabled(nodeId);
+      setContextMenu(null);
+    },
+    [canvas.toggleNodeDisabled],
+  );
+
+  const handleContextMenuWrapInTryCatch = useCallback(
+    (nodeId: string) => {
+      canvas.wrapInTryCatch(nodeId);
+      setContextMenu(null);
+    },
+    [canvas.wrapInTryCatch],
+  );
+
+  const handleContextMenuCopyNode = useCallback(
+    (nodeId: string) => {
+      canvas.selectNode(nodeId);
+      canvas.copySelection();
+      setContextMenu(null);
+    },
+    [canvas.selectNode, canvas.copySelection],
+  );
+
+  const handleContextMenuRenameNode = useCallback(
+    (nodeId: string) => {
+      canvas.selectNode(nodeId);
+      setContextMenu(null);
+    },
+    [canvas.selectNode],
+  );
+
+  const [viewYamlNodeId, setViewYamlNodeId] = useState<string | null>(null);
+
+  const handleContextMenuViewYaml = useCallback(
+    (nodeId: string) => {
+      setViewYamlNodeId(nodeId);
+      setContextMenu(null);
+    },
+    [],
+  );
+
+  const handleContextMenuPaste = useCallback(() => {
+    canvas.pasteAtCenter();
+    setContextMenu(null);
+  }, [canvas.pasteAtCenter]);
+
+  const handleContextMenuFitView = useCallback(() => {
+    setContextMenu(null);
+  }, []);
+
+  const handleContextMenuCopySelection = useCallback(() => {
+    canvas.copySelection();
+    setContextMenu(null);
+  }, [canvas.copySelection]);
+
+  const handleContextMenuDuplicateSelection = useCallback(() => {
+    canvas.duplicateSelection();
+    setContextMenu(null);
+  }, [canvas.duplicateSelection]);
+
+  const handleContextMenuDisableSelection = useCallback(() => {
+    canvas.disableSelection();
+    setContextMenu(null);
+  }, [canvas.disableSelection]);
+
+  const handleContextMenuDeleteSelection = useCallback(() => {
+    canvas.deleteSelection();
+    setContextMenu(null);
+  }, [canvas.deleteSelection]);
+
+  const handleSelectionContextMenu = useCallback(
+    (event: React.MouseEvent, selectedNodes: { id: string }[]) => {
+      event.preventDefault();
+      const nonSentinels = selectedNodes.filter((n) => n.id !== "__start__" && n.id !== "__end__");
+      if (nonSentinels.length === 0) return;
+      setContextMenu({
+        target: { type: "selection", count: nonSentinels.length },
+        position: { x: event.clientX, y: event.clientY },
+      });
+    },
+    [],
+  );
+
   // ---------------------------------------------------------------------------
   // Pending picker handlers (two-step menu-to-picker flow, AD-T05)
   // ---------------------------------------------------------------------------
@@ -327,6 +425,35 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
     [pendingPicker, canvas.addSuccessorTask, canvas.insertTaskOnEdge, canvas.addNodeAtPosition],
   );
 
+  const pendingInsertionContext = useMemo(() => {
+    if (!pendingPicker) return null;
+    if (pendingPicker.purpose === "add-after-node" && pendingPicker.sourceId) {
+      const graphModel = canvas.getGraphModel();
+      const sourceNode = graphModel.nodes.find((n) => n.id === pendingPicker.sourceId);
+      return {
+        mode: "append-after" as const,
+        sourceNodeId: pendingPicker.sourceId,
+        sourceDisplayName: sourceNode?.taskName ?? pendingPicker.sourceId,
+      };
+    }
+    if (pendingPicker.purpose === "insert-on-edge" && pendingPicker.sourceId) {
+      const graphModel = canvas.getGraphModel();
+      const edge = graphModel.edges.find((e) => e.id === pendingPicker.sourceId);
+      if (!edge) return null;
+      const sourceNode = graphModel.nodes.find((n) => n.id === edge.source);
+      const targetNode = graphModel.nodes.find((n) => n.id === edge.target);
+      return {
+        mode: "edge-splice" as const,
+        edgeId: edge.id,
+        sourceNodeId: edge.source,
+        targetNodeId: edge.target,
+        sourceDisplayName: sourceNode?.taskName ?? edge.source,
+        targetDisplayName: targetNode?.taskName ?? edge.target,
+      };
+    }
+    return { mode: "add-at-position" as const };
+  }, [pendingPicker, canvas]);
+
   const handleSave = useCallback(() => {
     if (!onSave) return;
     const yamlStr = canvas.serializeToYaml();
@@ -360,8 +487,39 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
       deleteNode: handleDeleteNode,
       addSuccessorTask: canvas.addSuccessorTask,
       duplicateNode: handleDuplicateNode,
+      addSwitchCase: canvas.addSwitchCase,
+      addForkBranch: canvas.addForkBranch,
+      addCatchHandler: canvas.addCatchHandler,
+      removeSwitchCase: canvas.removeSwitchCase,
+      reorderSwitchCases: canvas.reorderSwitchCases,
+      removeForkBranch: canvas.removeForkBranch,
+      reorderForkBranches: canvas.reorderForkBranches,
+      renameForkBranch: canvas.renameForkBranch,
+      setForkCompete: canvas.setForkCompete,
+      updateCatchConfig: canvas.updateCatchConfig,
+      removeCatchBlock: canvas.removeCatchBlock,
+      updateForEachConfig: canvas.updateForEachConfig,
+      getGraphModel: canvas.getGraphModel,
     }),
-    [canvas.insertTaskOnEdge, handleDeleteNode, canvas.addSuccessorTask, handleDuplicateNode],
+    [
+      canvas.insertTaskOnEdge,
+      handleDeleteNode,
+      canvas.addSuccessorTask,
+      handleDuplicateNode,
+      canvas.addSwitchCase,
+      canvas.addForkBranch,
+      canvas.addCatchHandler,
+      canvas.removeSwitchCase,
+      canvas.reorderSwitchCases,
+      canvas.removeForkBranch,
+      canvas.reorderForkBranches,
+      canvas.renameForkBranch,
+      canvas.setForkCompete,
+      canvas.updateCatchConfig,
+      canvas.removeCatchBlock,
+      canvas.updateForEachConfig,
+      canvas.getGraphModel,
+    ],
   );
 
   const descriptor = canvas.selection?.type === "node"
@@ -454,6 +612,7 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
               onNodeContextMenu={handleNodeContextMenu}
               onEdgeContextMenu={handleEdgeContextMenu}
               onPaneContextMenu={handlePaneContextMenu}
+              onSelectionContextMenu={handleSelectionContextMenu}
               nodeErrors={nodeErrors}
             />
           </Suspense>
@@ -479,11 +638,23 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
           onDeleteNode={handleContextMenuDeleteNode}
           onDuplicateNode={handleContextMenuDuplicateNode}
           onAddTaskAfter={handleContextMenuAddTaskAfter}
+          onToggleDisabled={handleContextMenuToggleDisabled}
+          onWrapInTryCatch={handleContextMenuWrapInTryCatch}
+          onCopyNode={handleContextMenuCopyNode}
+          onRenameNode={handleContextMenuRenameNode}
+          onViewYaml={handleContextMenuViewYaml}
           onDeleteEdge={handleContextMenuDeleteEdge}
           onInsertTaskOnEdge={handleContextMenuInsertTaskOnEdge}
           onAddTaskAtPosition={handleContextMenuAddTaskAtPosition}
           onSelectAll={handleContextMenuSelectAll}
           onAutoLayout={handleContextMenuAutoLayout}
+          onPaste={handleContextMenuPaste}
+          hasClipboard={canvas.hasClipboard}
+          onFitView={handleContextMenuFitView}
+          onCopySelection={handleContextMenuCopySelection}
+          onDuplicateSelection={handleContextMenuDuplicateSelection}
+          onDisableSelection={handleContextMenuDisableSelection}
+          onDeleteSelection={handleContextMenuDeleteSelection}
         />
 
         <TaskPickerPopover
@@ -491,8 +662,16 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
           onOpenChange={handlePendingPickerOpenChange}
           onSelectKind={handlePendingPickerSelectKind}
           anchorRef={pendingPickerVirtualAnchor}
+          insertionContext={pendingInsertionContext}
+          graph={canvas.getGraphModel()}
           side="bottom"
         />
+
+        <ViewYamlDialog
+          nodeId={viewYamlNodeId}
+          graph={canvas.graph}
+          onClose={() => setViewYamlNodeId(null)}
+        />
       </div>
 
       {showInspector && hasGraph && (
@@ -507,9 +686,15 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
             onUpdateFlow={canvas.updateNodeFlow}
             onDeleteEdge={handleDeleteEdge}
             onDeleteNode={handleDeleteNode}
+            onDuplicateNode={handleDuplicateNode}
+            onToggleDisabled={canvas.toggleNodeDisabled}
+            onWrapInTryCatch={canvas.wrapInTryCatch}
             onUpdateBranchRouting={canvas.updateBranchRouting}
             onMigrateBranchHandle={canvas.migrateBranchHandle}
             onRemoveBranchEdges={canvas.removeBranchEdges}
+            onViewYaml={handleContextMenuViewYaml}
+            validationErrors={nodeErrors}
+            emptyState={canvas.graph ? <WorkflowSummaryPanel graph={canvas.graph} validationErrors={nodeErrors} /> : undefined}
           />
         </div>
       )}

package/src/workflow/WorkflowCanvasInner.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import "@xyflow/react/dist/style.css";
-
 import { useMemo } from "react";
 import {
   ReactFlow,
@@ -20,7 +18,7 @@ import type {
   OnConnect,
   IsValidConnection,
 } from "@xyflow/react";
-import { CanvasTaskNode } from "./CanvasTaskNode";
+import { WorkflowNode } from "./WorkflowNode";
 import { CanvasTransitionEdge } from "./CanvasTransitionEdge";
 import { CATEGORY_COLORS } from "./canvas-constants";
 import type { CanvasTaskNodeData } from "./workflow-graph-conversions";
@@ -43,11 +41,12 @@ interface WorkflowCanvasInnerProps {
   onNodeContextMenu?: (event: React.MouseEvent, node: Node) => void;
   onEdgeContextMenu?: (event: React.MouseEvent, edge: Edge) => void;
   onPaneContextMenu?: (event: React.MouseEvent | MouseEvent) => void;
+  onSelectionContextMenu?: (event: React.MouseEvent, nodes: Node[]) => void;
   nodeErrors?: ReadonlyMap<string, readonly string[]>;
 }
 
 const nodeTypes = {
-  [CANVAS_TASK_NODE_TYPE]: CanvasTaskNode,
+  [CANVAS_TASK_NODE_TYPE]: WorkflowNode,
 } as const;
 
 const edgeTypes = {
@@ -85,6 +84,7 @@ export function WorkflowCanvasInner({
   onNodeContextMenu,
   onEdgeContextMenu,
   onPaneContextMenu,
+  onSelectionContextMenu,
   nodeErrors,
 }: WorkflowCanvasInnerProps) {
   const enrichedNodes = useMemo(() => {
@@ -125,6 +125,7 @@ export function WorkflowCanvasInner({
       onNodeContextMenu={onNodeContextMenu}
       onEdgeContextMenu={onEdgeContextMenu}
       onPaneContextMenu={onPaneContextMenu}
+      onSelectionContextMenu={onSelectionContextMenu}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
       defaultEdgeOptions={defaultEdgeOptions}

package/src/workflow/WorkflowCodePreviewGraph.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { memo, useEffect, useMemo, useRef } from "react";
+import {
+  ReactFlow,
+  Controls,
+  MiniMap,
+  Background,
+  BackgroundVariant,
+  MarkerType,
+  useReactFlow,
+  ReactFlowProvider,
+} from "@xyflow/react";
+import type { Node, Edge } from "@xyflow/react";
+import { cn } from "@stigmer/theme";
+import { WorkflowNode } from "./WorkflowNode";
+import { CanvasTransitionEdge } from "./CanvasTransitionEdge";
+import {
+  CANVAS_TASK_NODE_TYPE,
+  CANVAS_TRANSITION_EDGE_TYPE,
+  yamlToGraph,
+  toReactFlowElements,
+} from "./workflow-graph-conversions";
+import { applyDagreLayout } from "./layout";
+import { WorkflowGraphModeProvider } from "./WorkflowGraphModeContext";
+
+/** Props for {@link WorkflowCodePreviewGraph}. */
+export interface WorkflowCodePreviewGraphProps {
+  /** Workflow YAML to visualize. */
+  readonly yaml: string | null;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+const nodeTypes = {
+  [CANVAS_TASK_NODE_TYPE]: WorkflowNode,
+} as const;
+
+const edgeTypes = {
+  [CANVAS_TRANSITION_EDGE_TYPE]: CanvasTransitionEdge,
+} as const;
+
+const defaultEdgeOptions = {
+  markerEnd: { type: MarkerType.ArrowClosed, width: 16, height: 16 },
+};
+
+/**
+ * Read-only React Flow graph preview for the code-mode editor side panel.
+ *
+ * Accepts YAML directly (unlike `WorkflowOverviewGraph` which requires
+ * a `Workflow` proto). Uses the unified `WorkflowNode` / `CanvasTransitionEdge`
+ * rendering system in `"overview"` mode for DD-001 consistency.
+ */
+export const WorkflowCodePreviewGraph = memo(function WorkflowCodePreviewGraph(
+  props: WorkflowCodePreviewGraphProps,
+) {
+  return (
+    <ReactFlowProvider>
+      <WorkflowCodePreviewGraphInner {...props} />
+    </ReactFlowProvider>
+  );
+});
+
+function WorkflowCodePreviewGraphInner({
+  yaml,
+  className,
+}: WorkflowCodePreviewGraphProps) {
+  const { nodes, edges } = useYamlToReactFlow(yaml);
+  const { fitView } = useReactFlow();
+  const didFitRef = useRef(false);
+  const prevCountRef = useRef(0);
+
+  useEffect(() => {
+    if (nodes.length > 0 && nodes.length !== prevCountRef.current) {
+      prevCountRef.current = nodes.length;
+      setTimeout(() => fitView({ padding: 0.15, duration: 200 }), 50);
+    } else if (nodes.length > 0 && !didFitRef.current) {
+      didFitRef.current = true;
+      setTimeout(() => fitView({ padding: 0.15, duration: 200 }), 50);
+    }
+  }, [nodes.length, fitView]);
+
+  if (!yaml?.trim() || nodes.length === 0) {
+    return (
+      <div className={cn("flex h-full items-center justify-center text-sm text-[var(--stgm-muted-foreground,#737373)]", className)}>
+        No tasks to visualize
+      </div>
+    );
+  }
+
+  return (
+    <WorkflowGraphModeProvider mode="overview">
+      <div className={cn("h-full w-full", className)}>
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          nodeTypes={nodeTypes}
+          edgeTypes={edgeTypes}
+          defaultEdgeOptions={defaultEdgeOptions}
+          nodesDraggable={false}
+          nodesConnectable={false}
+          elementsSelectable={false}
+          panOnDrag={true}
+          zoomOnScroll={true}
+          fitView={false}
+          minZoom={0.2}
+          maxZoom={2}
+          proOptions={{ hideAttribution: true }}
+        >
+          <Background variant={BackgroundVariant.Dots} gap={16} size={1} />
+          <Controls showInteractive={false} />
+          <MiniMap pannable zoomable />
+        </ReactFlow>
+      </div>
+    </WorkflowGraphModeProvider>
+  );
+}
+
+function useYamlToReactFlow(yaml: string | null): { nodes: Node[]; edges: Edge[] } {
+  return useMemo(() => {
+    if (!yaml?.trim()) return { nodes: [], edges: [] };
+    try {
+      const graph = yamlToGraph(yaml);
+      const laid = applyDagreLayout(graph);
+      return toReactFlowElements(laid);
+    } catch {
+      return { nodes: [], edges: [] };
+    }
+  }, [yaml]);
+}