@goplasmatic/dataflow-ui 2.0.4 → 2.0.5

package/README.md

@@ -17,10 +17,12 @@ A React component library for visualizing and debugging [dataflow-rs](https://gi
 ## Features
 
 - **Workflow Visualization** - Interactive tree view of workflows, tasks, and conditions
-- **Execution Debugging** - Step-by-step execution trace visualization with change highlighting
+- **Execution Debugging** - Step-by-step execution trace visualization with message snapshots
 - **JSONLogic Viewer** - Visual representation of JSONLogic expressions via [@goplasmatic/datalogic-ui](https://www.npmjs.com/package/@goplasmatic/datalogic-ui)
 - **Theme Support** - Light, dark, and system theme modes
 - **TypeScript** - Full type definitions included
+- **Monaco Editor Integration** - JSON editing with syntax highlighting
+- **Change Highlighting** - Visual diff of message changes at each step
 
 ## Installation
 

package/dist/index.cjs

@@ -243,6 +243,21 @@ const FileJson = createLucideIcon("FileJson", [
     { d: "M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1", key: "mpwhp6" }
   ]
 ]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Folder = createLucideIcon("Folder", [
+  [
+    "path",
+    {
+      d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",
+      key: "1kt360"
+    }
+  ]
+]);
 /**
  * @license lucide-react v0.462.0 - ISC
  *
@@ -19854,31 +19869,38 @@ function TreeNode({
   };
   const debugStateClass = debugState ? `df-tree-node-${debugState}` : "";
   const currentClass = isCurrent ? "df-tree-node-current-step" : "";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `df-tree-node ${debugStateClass} ${currentClass}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: `df-tree-node-content ${isSelected ? "df-tree-node-selected" : ""}`,
-        style: { paddingLeft: `${level * 16 + 8}px` },
-        onClick: handleClick,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "df-tree-toggle",
-              onClick: hasChildren ? handleToggle : void 0,
-              style: { visibility: hasChildren ? "visible" : "hidden" },
-              children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, { size: 14 })
-            }
-          ),
-          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "df-tree-icon", style: iconColor ? { color: iconColor } : void 0, children: icon }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "df-tree-label", children: label }),
-          debugState && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "df-tree-debug-indicator", children: /* @__PURE__ */ jsxRuntime.jsx(DebugStateIcon, { state: debugState, conditionResult }) })
-        ]
-      }
-    ),
-    isExpanded && hasChildren && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "df-tree-children", children: children2 })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `df-tree-node ${debugStateClass} ${currentClass}`,
+      "data-current-step": isCurrent ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `df-tree-node-content ${isSelected ? "df-tree-node-selected" : ""}`,
+            style: { paddingLeft: `${level * 16 + 8}px` },
+            onClick: handleClick,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "df-tree-toggle",
+                  onClick: hasChildren ? handleToggle : void 0,
+                  style: { visibility: hasChildren ? "visible" : "hidden" },
+                  children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, { size: 14 })
+                }
+              ),
+              icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "df-tree-icon", style: iconColor ? { color: iconColor } : void 0, children: icon }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "df-tree-label", children: label }),
+              debugState && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "df-tree-debug-indicator", children: /* @__PURE__ */ jsxRuntime.jsx(DebugStateIcon, { state: debugState, conditionResult }) })
+            ]
+          }
+        ),
+        isExpanded && hasChildren && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "df-tree-children", children: children2 })
+      ]
+    }
+  );
 }
 const TREE_COLORS = {
   workflow: "#0078d4",
@@ -19891,8 +19913,10 @@ const TREE_COLORS = {
   // VSCode teal/green
   validation: "#ce9178",
   // VSCode orange
-  tasks: "#9d9d9d"
+  tasks: "#9d9d9d",
   // VSCode gray
+  folder: "#dcb67a"
+  // VSCode folder yellow/gold
 };
 function TaskNode({
   task,
@@ -20091,20 +20115,177 @@ function WorkflowNode({
     }
   );
 }
+function FolderNode({
+  folder,
+  level,
+  selection: selection2,
+  onSelect,
+  expandedNodes,
+  toggleNode,
+  debugMode = false
+}) {
+  const folderId = `folder-${folder.fullPath}`;
+  const isExpanded = expandedNodes.has(folderId);
+  const hasChildren = folder.folders.size > 0 || folder.workflows.length > 0;
+  const sortedFolders = Array.from(folder.folders.values()).sort(
+    (a, b) => a.name.localeCompare(b.name)
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TreeNode,
+    {
+      label: `${folder.name} (${folder.totalWorkflowCount})`,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(Folder, { size: 14 }),
+      iconColor: TREE_COLORS.folder,
+      isExpanded,
+      hasChildren,
+      level,
+      onToggle: () => toggleNode(folderId),
+      onClick: () => toggleNode(folderId),
+      children: [
+        sortedFolders.map((childFolder) => /* @__PURE__ */ jsxRuntime.jsx(
+          FolderNode,
+          {
+            folder: childFolder,
+            level: level + 1,
+            selection: selection2,
+            onSelect,
+            expandedNodes,
+            toggleNode,
+            debugMode
+          },
+          childFolder.fullPath
+        )),
+        folder.workflows.map((workflow) => /* @__PURE__ */ jsxRuntime.jsx(
+          WorkflowNode,
+          {
+            workflow,
+            level: level + 1,
+            selection: selection2,
+            onSelect,
+            expandedNodes,
+            toggleNode,
+            debugMode
+          },
+          workflow.id
+        ))
+      ]
+    }
+  );
+}
+function parsePath(path) {
+  if (!path) return [];
+  const trimmed = path.replace(/^\/+|\/+$/g, "");
+  if (!trimmed) return [];
+  return trimmed.split("/").filter((segment) => segment.length > 0);
+}
+function createFolderNode(name, fullPath) {
+  return {
+    name,
+    fullPath,
+    folders: /* @__PURE__ */ new Map(),
+    workflows: [],
+    totalWorkflowCount: 0
+  };
+}
+function calculateTotalCount(node) {
+  let count = node.workflows.length;
+  for (const child of node.folders.values()) {
+    count += calculateTotalCount(child);
+  }
+  node.totalWorkflowCount = count;
+  return count;
+}
+function buildFolderTree(workflows) {
+  const tree = {
+    folders: /* @__PURE__ */ new Map(),
+    workflows: []
+  };
+  const sortedWorkflows = [...workflows].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
+  for (const workflow of sortedWorkflows) {
+    const segments = parsePath(workflow.path);
+    if (segments.length === 0) {
+      tree.workflows.push(workflow);
+    } else {
+      let currentLevel = tree.folders;
+      let currentPath = "";
+      for (let i = 0; i < segments.length; i++) {
+        const segment = segments[i];
+        currentPath = currentPath ? `${currentPath}/${segment}` : segment;
+        if (!currentLevel.has(segment)) {
+          currentLevel.set(segment, createFolderNode(segment, currentPath));
+        }
+        const folder = currentLevel.get(segment);
+        if (i === segments.length - 1) {
+          folder.workflows.push(workflow);
+        } else {
+          currentLevel = folder.folders;
+        }
+      }
+    }
+  }
+  for (const folder of tree.folders.values()) {
+    calculateTotalCount(folder);
+  }
+  return tree;
+}
+function getFirstLevelFolderIds(tree) {
+  return Array.from(tree.folders.keys()).map((name) => `folder-${name}`);
+}
+function getParentFolderIds(path) {
+  const segments = parsePath(path);
+  if (segments.length === 0) return [];
+  const ids = [];
+  let currentPath = "";
+  for (const segment of segments) {
+    currentPath = currentPath ? `${currentPath}/${segment}` : segment;
+    ids.push(`folder-${currentPath}`);
+  }
+  return ids;
+}
 function TreeView({ workflows, selection: selection2, onSelect, debugMode = false }) {
   const debuggerContext = useDebugger();
   const effectiveDebugContext = debugMode ? debuggerContext : null;
+  const folderTree = require$$0.useMemo(() => buildFolderTree(workflows), [workflows]);
+  const sortedRootFolders = require$$0.useMemo(() => {
+    return Array.from(folderTree.folders.values()).sort(
+      (a, b) => a.name.localeCompare(b.name)
+    );
+  }, [folderTree]);
+  const rootWorkflows = folderTree.workflows;
   const [expandedNodes, setExpandedNodes] = require$$0.useState(() => {
     const initial = /* @__PURE__ */ new Set(["workflows-root"]);
-    if (workflows.length > 0) {
-      initial.add(`workflow-${workflows[0].id}`);
-    }
+    getFirstLevelFolderIds(folderTree).forEach((id2) => initial.add(id2));
     return initial;
   });
-  const sortedWorkflows = require$$0.useMemo(() => {
-    return [...workflows].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
-  }, [workflows]);
+  require$$0.useEffect(() => {
+    setExpandedNodes((prev) => {
+      const next = new Set(prev);
+      next.add("workflows-root");
+      getFirstLevelFolderIds(folderTree).forEach((id2) => next.add(id2));
+      return next;
+    });
+  }, [folderTree]);
+  require$$0.useEffect(() => {
+    const allWorkflows = [...folderTree.workflows];
+    function collectWorkflows(folders) {
+      for (const folder of folders.values()) {
+        allWorkflows.push(...folder.workflows);
+        collectWorkflows(folder.folders);
+      }
+    }
+    collectWorkflows(folderTree.folders);
+    if (allWorkflows.length > 0) {
+      allWorkflows.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
+      setExpandedNodes((prev) => {
+        const next = new Set(prev);
+        next.add(`workflow-${allWorkflows[0].id}`);
+        getParentFolderIds(allWorkflows[0].path).forEach((id2) => next.add(id2));
+        return next;
+      });
+    }
+  }, [folderTree]);
   const lastSelectedRef = require$$0.useRef(null);
+  const treeContainerRef = require$$0.useRef(null);
   require$$0.useEffect(() => {
     var _a, _b;
     if (!debugMode || !(effectiveDebugContext == null ? void 0 : effectiveDebugContext.currentStep) || effectiveDebugContext.state.currentStepIndex < 0) {
@@ -20114,9 +20295,13 @@ function TreeView({ workflows, selection: selection2, onSelect, debugMode = fals
     if (((_a = lastSelectedRef.current) == null ? void 0 : _a.workflowId) === workflow_id && ((_b = lastSelectedRef.current) == null ? void 0 : _b.taskId) === task_id) {
       return;
     }
+    const workflow = workflows.find((w) => w.id === workflow_id);
     setExpandedNodes((prev) => {
       const next = new Set(prev);
       next.add("workflows-root");
+      if (workflow == null ? void 0 : workflow.path) {
+        getParentFolderIds(workflow.path).forEach((id2) => next.add(id2));
+      }
       next.add(`workflow-${workflow_id}`);
       next.add(`tasks-${workflow_id}`);
       if (task_id) {
@@ -20125,7 +20310,6 @@ function TreeView({ workflows, selection: selection2, onSelect, debugMode = fals
       return next;
     });
     if (task_id) {
-      const workflow = workflows.find((w) => w.id === workflow_id);
       const task = workflow == null ? void 0 : workflow.tasks.find((t) => t.id === task_id);
       if (workflow && task) {
         lastSelectedRef.current = { workflowId: workflow_id, taskId: task_id };
@@ -20134,6 +20318,16 @@ function TreeView({ workflows, selection: selection2, onSelect, debugMode = fals
     } else {
       lastSelectedRef.current = { workflowId: workflow_id };
     }
+    setTimeout(() => {
+      var _a2;
+      const currentStepElement = (_a2 = treeContainerRef.current) == null ? void 0 : _a2.querySelector('[data-current-step="true"]');
+      if (currentStepElement) {
+        currentStepElement.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest"
+        });
+      }
+    }, 50);
   }, [debugMode, effectiveDebugContext == null ? void 0 : effectiveDebugContext.currentStep, effectiveDebugContext == null ? void 0 : effectiveDebugContext.state.currentStepIndex, workflows, onSelect]);
   const toggleNode = (id2) => {
     setExpandedNodes((prev) => {
@@ -20147,30 +20341,46 @@ function TreeView({ workflows, selection: selection2, onSelect, debugMode = fals
     });
   };
   const isRootExpanded = expandedNodes.has("workflows-root");
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `df-tree-view ${debugMode ? "df-tree-view-debug" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+  const totalWorkflowCount = workflows.length;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: treeContainerRef, className: `df-tree-view ${debugMode ? "df-tree-view-debug" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs(
     TreeNode,
     {
       label: "Workflows",
       icon: /* @__PURE__ */ jsxRuntime.jsx(Layers, { size: 14 }),
       iconColor: TREE_COLORS.workflow,
       isExpanded: isRootExpanded,
-      hasChildren: sortedWorkflows.length > 0,
+      hasChildren: totalWorkflowCount > 0,
       level: 0,
       onToggle: () => toggleNode("workflows-root"),
       onClick: () => toggleNode("workflows-root"),
-      children: sortedWorkflows.map((workflow) => /* @__PURE__ */ jsxRuntime.jsx(
-        WorkflowNode,
-        {
-          workflow,
-          level: 1,
-          selection: selection2,
-          onSelect,
-          expandedNodes,
-          toggleNode,
-          debugMode
-        },
-        workflow.id
-      ))
+      children: [
+        sortedRootFolders.map((folder) => /* @__PURE__ */ jsxRuntime.jsx(
+          FolderNode,
+          {
+            folder,
+            level: 1,
+            selection: selection2,
+            onSelect,
+            expandedNodes,
+            toggleNode,
+            debugMode
+          },
+          folder.fullPath
+        )),
+        rootWorkflows.map((workflow) => /* @__PURE__ */ jsxRuntime.jsx(
+          WorkflowNode,
+          {
+            workflow,
+            level: 1,
+            selection: selection2,
+            onSelect,
+            expandedNodes,
+            toggleNode,
+            debugMode
+          },
+          workflow.id
+        ))
+      ]
     }
   ) });
 }

package/dist/index.d.ts

@@ -670,6 +670,8 @@ export declare interface Workflow {
     priority?: number;
     /** Optional description */
     description?: string;
+    /** Optional folder path for grouping (e.g., "orders/processing") */
+    path?: string;
     /** JSONLogic condition (evaluated against metadata only) */
     condition?: JsonLogicValue;
     /** Tasks in this workflow */

package/dist/index.js

@@ -241,6 +241,21 @@ const FileJson = createLucideIcon("FileJson", [
     { d: "M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1", key: "mpwhp6" }
   ]
 ]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Folder = createLucideIcon("Folder", [
+  [
+    "path",
+    {
+      d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",
+      key: "1kt360"
+    }
+  ]
+]);
 /**
  * @license lucide-react v0.462.0 - ISC
  *
@@ -19852,31 +19867,38 @@ function TreeNode({
   };
   const debugStateClass = debugState ? `df-tree-node-${debugState}` : "";
   const currentClass = isCurrent ? "df-tree-node-current-step" : "";
-  return /* @__PURE__ */ jsxs("div", { className: `df-tree-node ${debugStateClass} ${currentClass}`, children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `df-tree-node-content ${isSelected ? "df-tree-node-selected" : ""}`,
-        style: { paddingLeft: `${level * 16 + 8}px` },
-        onClick: handleClick,
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "df-tree-toggle",
-              onClick: hasChildren ? handleToggle : void 0,
-              style: { visibility: hasChildren ? "visible" : "hidden" },
-              children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
-            }
-          ),
-          icon && /* @__PURE__ */ jsx("span", { className: "df-tree-icon", style: iconColor ? { color: iconColor } : void 0, children: icon }),
-          /* @__PURE__ */ jsx("span", { className: "df-tree-label", children: label }),
-          debugState && /* @__PURE__ */ jsx("span", { className: "df-tree-debug-indicator", children: /* @__PURE__ */ jsx(DebugStateIcon, { state: debugState, conditionResult }) })
-        ]
-      }
-    ),
-    isExpanded && hasChildren && /* @__PURE__ */ jsx("div", { className: "df-tree-children", children: children2 })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `df-tree-node ${debugStateClass} ${currentClass}`,
+      "data-current-step": isCurrent ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `df-tree-node-content ${isSelected ? "df-tree-node-selected" : ""}`,
+            style: { paddingLeft: `${level * 16 + 8}px` },
+            onClick: handleClick,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "df-tree-toggle",
+                  onClick: hasChildren ? handleToggle : void 0,
+                  style: { visibility: hasChildren ? "visible" : "hidden" },
+                  children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+                }
+              ),
+              icon && /* @__PURE__ */ jsx("span", { className: "df-tree-icon", style: iconColor ? { color: iconColor } : void 0, children: icon }),
+              /* @__PURE__ */ jsx("span", { className: "df-tree-label", children: label }),
+              debugState && /* @__PURE__ */ jsx("span", { className: "df-tree-debug-indicator", children: /* @__PURE__ */ jsx(DebugStateIcon, { state: debugState, conditionResult }) })
+            ]
+          }
+        ),
+        isExpanded && hasChildren && /* @__PURE__ */ jsx("div", { className: "df-tree-children", children: children2 })
+      ]
+    }
+  );
 }
 const TREE_COLORS = {
   workflow: "#0078d4",
@@ -19889,8 +19911,10 @@ const TREE_COLORS = {
   // VSCode teal/green
   validation: "#ce9178",
   // VSCode orange
-  tasks: "#9d9d9d"
+  tasks: "#9d9d9d",
   // VSCode gray
+  folder: "#dcb67a"
+  // VSCode folder yellow/gold
 };
 function TaskNode({
   task,
@@ -20089,20 +20113,177 @@ function WorkflowNode({
     }
   );
 }
+function FolderNode({
+  folder,
+  level,
+  selection: selection2,
+  onSelect,
+  expandedNodes,
+  toggleNode,
+  debugMode = false
+}) {
+  const folderId = `folder-${folder.fullPath}`;
+  const isExpanded = expandedNodes.has(folderId);
+  const hasChildren = folder.folders.size > 0 || folder.workflows.length > 0;
+  const sortedFolders = Array.from(folder.folders.values()).sort(
+    (a, b) => a.name.localeCompare(b.name)
+  );
+  return /* @__PURE__ */ jsxs(
+    TreeNode,
+    {
+      label: `${folder.name} (${folder.totalWorkflowCount})`,
+      icon: /* @__PURE__ */ jsx(Folder, { size: 14 }),
+      iconColor: TREE_COLORS.folder,
+      isExpanded,
+      hasChildren,
+      level,
+      onToggle: () => toggleNode(folderId),
+      onClick: () => toggleNode(folderId),
+      children: [
+        sortedFolders.map((childFolder) => /* @__PURE__ */ jsx(
+          FolderNode,
+          {
+            folder: childFolder,
+            level: level + 1,
+            selection: selection2,
+            onSelect,
+            expandedNodes,
+            toggleNode,
+            debugMode
+          },
+          childFolder.fullPath
+        )),
+        folder.workflows.map((workflow) => /* @__PURE__ */ jsx(
+          WorkflowNode,
+          {
+            workflow,
+            level: level + 1,
+            selection: selection2,
+            onSelect,
+            expandedNodes,
+            toggleNode,
+            debugMode
+          },
+          workflow.id
+        ))
+      ]
+    }
+  );
+}
+function parsePath(path) {
+  if (!path) return [];
+  const trimmed = path.replace(/^\/+|\/+$/g, "");
+  if (!trimmed) return [];
+  return trimmed.split("/").filter((segment) => segment.length > 0);
+}
+function createFolderNode(name, fullPath) {
+  return {
+    name,
+    fullPath,
+    folders: /* @__PURE__ */ new Map(),
+    workflows: [],
+    totalWorkflowCount: 0
+  };
+}
+function calculateTotalCount(node) {
+  let count = node.workflows.length;
+  for (const child of node.folders.values()) {
+    count += calculateTotalCount(child);
+  }
+  node.totalWorkflowCount = count;
+  return count;
+}
+function buildFolderTree(workflows) {
+  const tree = {
+    folders: /* @__PURE__ */ new Map(),
+    workflows: []
+  };
+  const sortedWorkflows = [...workflows].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
+  for (const workflow of sortedWorkflows) {
+    const segments = parsePath(workflow.path);
+    if (segments.length === 0) {
+      tree.workflows.push(workflow);
+    } else {
+      let currentLevel = tree.folders;
+      let currentPath = "";
+      for (let i = 0; i < segments.length; i++) {
+        const segment = segments[i];
+        currentPath = currentPath ? `${currentPath}/${segment}` : segment;
+        if (!currentLevel.has(segment)) {
+          currentLevel.set(segment, createFolderNode(segment, currentPath));
+        }
+        const folder = currentLevel.get(segment);
+        if (i === segments.length - 1) {
+          folder.workflows.push(workflow);
+        } else {
+          currentLevel = folder.folders;
+        }
+      }
+    }
+  }
+  for (const folder of tree.folders.values()) {
+    calculateTotalCount(folder);
+  }
+  return tree;
+}
+function getFirstLevelFolderIds(tree) {
+  return Array.from(tree.folders.keys()).map((name) => `folder-${name}`);
+}
+function getParentFolderIds(path) {
+  const segments = parsePath(path);
+  if (segments.length === 0) return [];
+  const ids = [];
+  let currentPath = "";
+  for (const segment of segments) {
+    currentPath = currentPath ? `${currentPath}/${segment}` : segment;
+    ids.push(`folder-${currentPath}`);
+  }
+  return ids;
+}
 function TreeView({ workflows, selection: selection2, onSelect, debugMode = false }) {
   const debuggerContext = useDebugger();
   const effectiveDebugContext = debugMode ? debuggerContext : null;
+  const folderTree = useMemo(() => buildFolderTree(workflows), [workflows]);
+  const sortedRootFolders = useMemo(() => {
+    return Array.from(folderTree.folders.values()).sort(
+      (a, b) => a.name.localeCompare(b.name)
+    );
+  }, [folderTree]);
+  const rootWorkflows = folderTree.workflows;
   const [expandedNodes, setExpandedNodes] = useState(() => {
     const initial = /* @__PURE__ */ new Set(["workflows-root"]);
-    if (workflows.length > 0) {
-      initial.add(`workflow-${workflows[0].id}`);
-    }
+    getFirstLevelFolderIds(folderTree).forEach((id2) => initial.add(id2));
     return initial;
   });
-  const sortedWorkflows = useMemo(() => {
-    return [...workflows].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
-  }, [workflows]);
+  useEffect(() => {
+    setExpandedNodes((prev) => {
+      const next = new Set(prev);
+      next.add("workflows-root");
+      getFirstLevelFolderIds(folderTree).forEach((id2) => next.add(id2));
+      return next;
+    });
+  }, [folderTree]);
+  useEffect(() => {
+    const allWorkflows = [...folderTree.workflows];
+    function collectWorkflows(folders) {
+      for (const folder of folders.values()) {
+        allWorkflows.push(...folder.workflows);
+        collectWorkflows(folder.folders);
+      }
+    }
+    collectWorkflows(folderTree.folders);
+    if (allWorkflows.length > 0) {
+      allWorkflows.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
+      setExpandedNodes((prev) => {
+        const next = new Set(prev);
+        next.add(`workflow-${allWorkflows[0].id}`);
+        getParentFolderIds(allWorkflows[0].path).forEach((id2) => next.add(id2));
+        return next;
+      });
+    }
+  }, [folderTree]);
   const lastSelectedRef = useRef(null);
+  const treeContainerRef = useRef(null);
   useEffect(() => {
     var _a, _b;
     if (!debugMode || !(effectiveDebugContext == null ? void 0 : effectiveDebugContext.currentStep) || effectiveDebugContext.state.currentStepIndex < 0) {
@@ -20112,9 +20293,13 @@ function TreeView({ workflows, selection: selection2, onSelect, debugMode = fals
     if (((_a = lastSelectedRef.current) == null ? void 0 : _a.workflowId) === workflow_id && ((_b = lastSelectedRef.current) == null ? void 0 : _b.taskId) === task_id) {
       return;
     }
+    const workflow = workflows.find((w) => w.id === workflow_id);
     setExpandedNodes((prev) => {
       const next = new Set(prev);
       next.add("workflows-root");
+      if (workflow == null ? void 0 : workflow.path) {
+        getParentFolderIds(workflow.path).forEach((id2) => next.add(id2));
+      }
       next.add(`workflow-${workflow_id}`);
       next.add(`tasks-${workflow_id}`);
       if (task_id) {
@@ -20123,7 +20308,6 @@ function TreeView({ workflows, selection: selection2, onSelect, debugMode = fals
       return next;
     });
     if (task_id) {
-      const workflow = workflows.find((w) => w.id === workflow_id);
       const task = workflow == null ? void 0 : workflow.tasks.find((t) => t.id === task_id);
       if (workflow && task) {
         lastSelectedRef.current = { workflowId: workflow_id, taskId: task_id };
@@ -20132,6 +20316,16 @@ function TreeView({ workflows, selection: selection2, onSelect, debugMode = fals
     } else {
       lastSelectedRef.current = { workflowId: workflow_id };
     }
+    setTimeout(() => {
+      var _a2;
+      const currentStepElement = (_a2 = treeContainerRef.current) == null ? void 0 : _a2.querySelector('[data-current-step="true"]');
+      if (currentStepElement) {
+        currentStepElement.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest"
+        });
+      }
+    }, 50);
   }, [debugMode, effectiveDebugContext == null ? void 0 : effectiveDebugContext.currentStep, effectiveDebugContext == null ? void 0 : effectiveDebugContext.state.currentStepIndex, workflows, onSelect]);
   const toggleNode = (id2) => {
     setExpandedNodes((prev) => {
@@ -20145,30 +20339,46 @@ function TreeView({ workflows, selection: selection2, onSelect, debugMode = fals
     });
   };
   const isRootExpanded = expandedNodes.has("workflows-root");
-  return /* @__PURE__ */ jsx("div", { className: `df-tree-view ${debugMode ? "df-tree-view-debug" : ""}`, children: /* @__PURE__ */ jsx(
+  const totalWorkflowCount = workflows.length;
+  return /* @__PURE__ */ jsx("div", { ref: treeContainerRef, className: `df-tree-view ${debugMode ? "df-tree-view-debug" : ""}`, children: /* @__PURE__ */ jsxs(
     TreeNode,
     {
       label: "Workflows",
       icon: /* @__PURE__ */ jsx(Layers, { size: 14 }),
       iconColor: TREE_COLORS.workflow,
       isExpanded: isRootExpanded,
-      hasChildren: sortedWorkflows.length > 0,
+      hasChildren: totalWorkflowCount > 0,
       level: 0,
       onToggle: () => toggleNode("workflows-root"),
       onClick: () => toggleNode("workflows-root"),
-      children: sortedWorkflows.map((workflow) => /* @__PURE__ */ jsx(
-        WorkflowNode,
-        {
-          workflow,
-          level: 1,
-          selection: selection2,
-          onSelect,
-          expandedNodes,
-          toggleNode,
-          debugMode
-        },
-        workflow.id
-      ))
+      children: [
+        sortedRootFolders.map((folder) => /* @__PURE__ */ jsx(
+          FolderNode,
+          {
+            folder,
+            level: 1,
+            selection: selection2,
+            onSelect,
+            expandedNodes,
+            toggleNode,
+            debugMode
+          },
+          folder.fullPath
+        )),
+        rootWorkflows.map((workflow) => /* @__PURE__ */ jsx(
+          WorkflowNode,
+          {
+            workflow,
+            level: 1,
+            selection: selection2,
+            onSelect,
+            expandedNodes,
+            toggleNode,
+            debugMode
+          },
+          workflow.id
+        ))
+      ]
     }
   ) });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goplasmatic/dataflow-ui",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "type": "module",
   "description": "React visualization library for dataflow-rs workflow engine",
   "author": "Plasmatic Engineering <shankar@goplasmatic.io>",
@@ -53,7 +53,7 @@
   },
   "dependencies": {
     "@goplasmatic/dataflow-wasm": "^2.0.4",
-    "@goplasmatic/datalogic-ui": "^4.0.9",
+    "@goplasmatic/datalogic-ui": "^4.0.11",
     "@monaco-editor/react": "^4.7.0",
     "@xyflow/react": "^12.0.0",
     "lucide-react": "^0.462.0"
@@ -67,6 +67,8 @@
     "react-dom": "^18.3.1",
     "typescript": "^5.7.3",
     "vite": "^6.0.7",
-    "vite-plugin-dts": "^4.4.0"
+    "vite-plugin-dts": "^4.4.0",
+    "vite-plugin-top-level-await": "^1.6.0",
+    "vite-plugin-wasm": "^3.5.0"
   }
 }