@stigmer/react 1.0.3 → 2.0.0

package/src/workflow/WorkflowDiffGraph.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import {
+  ReactFlow,
+  Controls,
+  Background,
+  BackgroundVariant,
+  MarkerType,
+  useReactFlow,
+  ReactFlowProvider,
+} from "@xyflow/react";
+import type { Node } 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 } from "./workflow-graph-conversions";
+import type { CanvasTaskNodeData } from "./workflow-graph-conversions";
+import { WorkflowGraphModeProvider } from "./WorkflowGraphModeContext";
+import { useWorkflowDiffGraph } from "./useWorkflowDiffGraph";
+import type { NodeDiffEntry } from "./diff";
+import { DiffSummaryBar } from "./diff";
+
+/** Props for {@link WorkflowDiffGraph}. */
+export interface WorkflowDiffGraphProps {
+  /** YAML content of the original (before) workflow. Empty string for generate scenarios. */
+  readonly beforeYaml: string;
+  /** YAML content of the updated (after) workflow. */
+  readonly afterYaml: string;
+  /** Callback when a task node is clicked. */
+  readonly onTaskClick?: (taskName: string, entry: NodeDiffEntry) => void;
+  /** 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 visual diff graph canvas for comparing two workflow versions.
+ *
+ * Reuses the same `WorkflowNode` / `NodeShell` rendering system from the
+ * visual editor, wrapped in diff mode context to show change badges and
+ * status highlighting instead of editing affordances.
+ *
+ * Follows the `WorkflowExecutionGraph` outer/inner pattern with
+ * `ReactFlowProvider`.
+ *
+ * @since T14 (AI-Assisted Workflow Creation)
+ */
+export const WorkflowDiffGraph = memo(function WorkflowDiffGraph(
+  props: WorkflowDiffGraphProps,
+) {
+  return (
+    <ReactFlowProvider>
+      <WorkflowDiffGraphInner {...props} />
+    </ReactFlowProvider>
+  );
+});
+
+function WorkflowDiffGraphInner({
+  beforeYaml,
+  afterYaml,
+  onTaskClick,
+  className,
+}: WorkflowDiffGraphProps) {
+  const {
+    nodes,
+    edges,
+    diff,
+    error,
+    selectedTaskName,
+    setSelectedTaskName,
+  } = useWorkflowDiffGraph({ beforeYaml, afterYaml });
+
+  const { fitView } = useReactFlow();
+  const didFitRef = useRef(false);
+
+  useEffect(() => {
+    if (nodes.length > 0 && !didFitRef.current) {
+      didFitRef.current = true;
+      setTimeout(() => fitView({ padding: 0.15, duration: 300 }), 50);
+    }
+  }, [nodes.length, fitView]);
+
+  const handleNodeClick = useCallback(
+    (_event: React.MouseEvent, node: Node) => {
+      const data = node.data as CanvasTaskNodeData;
+      if (data.isSentinel) return;
+      const name = data.taskName;
+      const next = name === selectedTaskName ? null : name;
+      setSelectedTaskName(next);
+
+      if (next && onTaskClick && diff) {
+        const entry = diff.nodes.get(node.id);
+        if (entry) onTaskClick(next, entry);
+      }
+    },
+    [selectedTaskName, setSelectedTaskName, onTaskClick, diff],
+  );
+
+  const handlePaneClick = useCallback(() => {
+    setSelectedTaskName(null);
+  }, [setSelectedTaskName]);
+
+  const nodesWithSelection = useMemo(
+    () =>
+      nodes.map((n) => ({
+        ...n,
+        selected: (n.data as CanvasTaskNodeData).taskName === selectedTaskName,
+      })),
+    [nodes, selectedTaskName],
+  );
+
+  if (error) {
+    return (
+      <div className={cn("flex h-full flex-col items-center justify-center gap-2 px-6 text-center", className)}>
+        <p className="text-sm text-[var(--stgm-muted-foreground,#737373)]">{error}</p>
+      </div>
+    );
+  }
+
+  if (nodes.length === 0) {
+    return (
+      <div className={cn("flex h-full items-center justify-center text-sm text-[var(--stgm-muted-foreground,#737373)]", className)}>
+        No changes to display
+      </div>
+    );
+  }
+
+  return (
+    <WorkflowGraphModeProvider mode="diff">
+      <div className={cn("relative h-full w-full", className)}>
+        {diff && (
+          <div className="absolute left-3 top-3 z-50">
+            <DiffSummaryBar diff={diff} />
+          </div>
+        )}
+        <ReactFlow
+          nodes={nodesWithSelection}
+          edges={edges}
+          nodeTypes={nodeTypes}
+          edgeTypes={edgeTypes}
+          defaultEdgeOptions={defaultEdgeOptions}
+          onNodeClick={handleNodeClick}
+          onPaneClick={handlePaneClick}
+          nodesDraggable={false}
+          nodesConnectable={false}
+          elementsSelectable={true}
+          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} />
+        </ReactFlow>
+      </div>
+    </WorkflowGraphModeProvider>
+  );
+}

package/src/workflow/WorkflowEditorView.tsx

@@ -4,9 +4,11 @@ import { memo, useCallback, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { useWorkflowEditor } from "./useWorkflowEditor";
 import { WorkflowYamlEditor } from "./WorkflowYamlEditor";
-import { WorkflowTopologyGraph } from "./WorkflowTopologyGraph";
+import { WorkflowCodePreviewGraph } from "./WorkflowCodePreviewGraph";
 import { WorkflowCanvasEditor } from "./WorkflowCanvasEditor";
+import type { LayoutEngine } from "./layout";
 import { WorkflowRefinePanel } from "./WorkflowRefinePanel";
+import { WorkflowExplainDialog } from "./WorkflowExplainDialog";
 import { yamlToGraph } from "./workflow-graph-conversions";
 
 /** Props for {@link WorkflowEditorView}. */
@@ -23,6 +25,12 @@ export interface WorkflowEditorViewProps {
   readonly defaultMode?: WorkflowEditorMode;
   /** Additional CSS class names for the root container. */
   readonly className?: string;
+  /**
+   * Layout engine for the visual canvas "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;
 }
 
 /**
@@ -59,6 +67,7 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
   onSaveError,
   defaultMode = "code",
   className,
+  layoutEngine,
 }: WorkflowEditorViewProps) {
   const editor = useWorkflowEditor(initialYaml, { org });
   const [isFullPage, setIsFullPage] = useState(false);
@@ -66,6 +75,8 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
   const [showModeWarning, setShowModeWarning] = useState(false);
   const [canvasIsSaving, setCanvasIsSaving] = useState(false);
   const [showRefinePanel, setShowRefinePanel] = useState(false);
+  const [pendingFixInstruction, setPendingFixInstruction] = useState<string | undefined>(undefined);
+  const [showExplainDialog, setShowExplainDialog] = useState(false);
 
   // Track canvas dirty state separately for mode switch prompts
   const [canvasDirty, setCanvasDirty] = useState(false);
@@ -146,8 +157,26 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
 
   const toggleRefinePanel = useCallback(() => {
     setShowRefinePanel((prev) => !prev);
+    setPendingFixInstruction(undefined);
   }, []);
 
+  const handleFixWithAI = useCallback(() => {
+    const errorDiags = editor.diagnostics.filter((d) => d.severity === "error");
+    if (errorDiags.length === 0) return;
+
+    const lines = errorDiags.map((d, i) => `${i + 1}. ${d.message}`);
+    const instruction = [
+      "Fix the following validation errors in this workflow:",
+      "",
+      ...lines,
+      "",
+      "Please fix these issues and return the corrected workflow.",
+    ].join("\n");
+
+    setPendingFixInstruction(instruction);
+    setShowRefinePanel(true);
+  }, [editor.diagnostics]);
+
   const handleRefineAccept = useCallback(
     (updatedYaml: string) => {
       editor.setYaml(updatedYaml);
@@ -218,12 +247,41 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
             errorCount={editor.errorCount}
             warningCount={editor.warningCount}
           />
+          {editor.errorCount > 0 && (
+            <button
+              type="button"
+              onClick={handleFixWithAI}
+              className={cn(
+                "inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium transition-colors",
+                "text-muted-foreground hover:bg-muted hover:text-foreground",
+              )}
+              aria-label="Fix validation errors with AI"
+            >
+              <FixSparklesIcon />
+              Fix with AI
+            </button>
+          )}
           {(editor.isDirty || canvasDirty) && (
             <span className="text-xs text-muted-foreground">Unsaved changes</span>
           )}
         </div>
 
         <div className="flex items-center gap-2">
+          {mode === "code" && (editor.isDirty || editor.versionMessage) && (
+            <input
+              type="text"
+              value={editor.versionMessage}
+              onChange={(e) => editor.setVersionMessage(e.target.value)}
+              placeholder="Version message (optional)"
+              disabled={editor.isSaving}
+              className={cn(
+                "h-7 w-48 rounded border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-2 text-xs",
+                "text-[var(--stgm-foreground,#1a1a2e)] placeholder:text-[var(--stgm-muted-foreground,#a3a3a3)]",
+                "focus:border-[var(--stgm-primary,#6366f1)] focus:outline-none focus:ring-1 focus:ring-[var(--stgm-primary,#6366f1)]",
+                "disabled:opacity-40",
+              )}
+            />
+          )}
           {mode === "code" && (
             <button
               type="button"
@@ -252,6 +310,18 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
               {editor.isSaving ? "Saving\u2026" : "Save"}
             </button>
           )}
+          <button
+            type="button"
+            onClick={() => setShowExplainDialog(true)}
+            className={cn(
+              "inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium transition-colors",
+              "text-muted-foreground hover:bg-muted hover:text-foreground",
+            )}
+            aria-label="Explain this workflow"
+          >
+            <ExplainIcon />
+            Explain
+          </button>
           <button
             type="button"
             onClick={toggleFullPage}
@@ -280,6 +350,14 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
         <DirtyPromptDialog onDiscard={confirmDiscardAndSwitchToCode} onCancel={cancelSwitchToCode} />
       )}
 
+      {/* Explain dialog */}
+      <WorkflowExplainDialog
+        open={showExplainDialog}
+        onOpenChange={setShowExplainDialog}
+        org={org}
+        currentYaml={editor.yaml}
+      />
+
       {/* Main content area */}
       <div className="flex min-h-0 flex-1">
         {mode === "code" ? (
@@ -299,11 +377,12 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
                   currentYaml={editor.yaml}
                   onAccept={handleRefineAccept}
                   onClose={toggleRefinePanel}
+                  initialInstruction={pendingFixInstruction}
                   className="h-full"
                 />
               ) : (
-                <WorkflowTopologyGraph
-                  topology={editor.topology}
+                <WorkflowCodePreviewGraph
+                  yaml={editor.yaml}
                   className="h-full"
                 />
               )}
@@ -317,6 +396,7 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
               isSaving={canvasIsSaving}
               onDirtyChange={setCanvasDirty}
               nodeErrors={nodeErrors}
+              layoutEngine={layoutEngine}
               className={showRefinePanel ? "w-[60%]" : "flex-1"}
             />
             {showRefinePanel && (
@@ -326,6 +406,7 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
                   currentYaml={editor.yaml}
                   onAccept={handleRefineAccept}
                   onClose={toggleRefinePanel}
+                  initialInstruction={pendingFixInstruction}
                   className="h-full"
                 />
               </div>
@@ -436,7 +517,7 @@ function DirtyPromptDialog({
           <button
             type="button"
             onClick={onDiscard}
-            className="rounded bg-[var(--stgm-destructive,#ef4444)] px-2.5 py-1 text-xs font-medium text-white hover:opacity-90"
+            className="rounded bg-[var(--stgm-destructive,#ef4444)] px-2.5 py-1 text-xs font-medium text-[var(--stgm-destructive-foreground,#fff)] hover:opacity-90"
           >
             Discard &amp; Switch
           </button>
@@ -519,6 +600,44 @@ function RefineSparklesIcon() {
   );
 }
 
+function ExplainIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="8" cy="8" r="6.5" />
+      <path d="M6.5 6a1.5 1.5 0 1 1 1.5 1.5V9" />
+      <circle cx="8" cy="11.5" r="0.5" fill="currentColor" />
+    </svg>
+  );
+}
+
+function FixSparklesIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M8 2l1.5 4.5L14 8l-4.5 1.5L8 14l-1.5-4.5L2 8l4.5-1.5z" />
+    </svg>
+  );
+}
+
 function ExpandIcon({ expanded }: { readonly expanded: boolean }) {
   return (
     <svg

package/src/workflow/WorkflowExecutionArtifactPanel.tsx

@@ -4,6 +4,7 @@ import { memo, useCallback, useState } from "react";
 import type { Artifact } from "@stigmer/protos/ai/stigmer/agentic/artifact/v1/api_pb";
 import { cn } from "@stigmer/theme";
 import { useStigmer } from "../hooks";
+import { formatBytes } from "./format-utils";
 
 /** Props for {@link WorkflowExecutionArtifactPanel}. */
 export interface WorkflowExecutionArtifactPanelProps {
@@ -104,9 +105,3 @@ function FileIcon() {
   );
 }
 
-function formatBytes(bytes: bigint): string {
-  const n = Number(bytes);
-  if (n < 1024) return `${n} B`;
-  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
-  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
-}

package/src/workflow/WorkflowExecutionCostPanel.tsx

@@ -3,6 +3,7 @@
 import { memo, useMemo } from "react";
 import { cn } from "@stigmer/theme";
 import type { DerivedCostSummary } from "../internal/store/workflow-execution-event-store";
+import { formatMicroUsd, formatTokenCount } from "./format-utils";
 
 /** Props for {@link WorkflowExecutionCostPanel}. */
 export interface WorkflowExecutionCostPanelProps {
@@ -61,8 +62,8 @@ export const WorkflowExecutionCostPanel = memo(function WorkflowExecutionCostPan
       {hasTokens && (
         <BudgetGauge
           label="Tokens"
-          consumed={formatTokens(costSummary.tokensConsumed)}
-          limit={tokenLimit ? formatTokens(tokenLimit) : undefined}
+          consumed={formatTokenCount(costSummary.tokensConsumed)}
+          limit={tokenLimit ? formatTokenCount(tokenLimit) : undefined}
           percentage={tokenLimit && tokenLimit > BZ
             ? Number((costSummary.tokensConsumed * BigInt(100)) / tokenLimit)
             : undefined}
@@ -117,15 +118,3 @@ function BudgetGauge({
   );
 }
 
-function formatMicroUsd(micros: bigint): string {
-  const val = Number(micros) / 1_000_000;
-  if (val < 0.01) return `$${val.toFixed(4)}`;
-  return `$${val.toFixed(2)}`;
-}
-
-function formatTokens(tokens: bigint): string {
-  const n = Number(tokens);
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
-  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
-  return n.toLocaleString();
-}