data-primals-engine 1.6.2 → 1.6.5

package/client/package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "name": "client",
       "version": "0.0.0",
+      "hasInstallScript": true,
       "dependencies": {
         "@babel/runtime": "^7.28.3",
         "@codeium/react-code-editor": "^1.0.12",
@@ -1134,7 +1135,7 @@
         "globals": "^14.0.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
-        "js-yaml": "^4.1.0",
+        "js-yaml": ">=4.1.1",
         "minimatch": "^3.1.2",
         "strip-json-comments": "^3.1.1"
       },
@@ -3223,23 +3224,28 @@
       }
     },
     "node_modules/body-parser": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.0.tgz",
-      "integrity": "sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.1.tgz",
+      "integrity": "sha512-nfDwkulwiZYQIGwxdy0RUmowMhKcFVcYXUU7m4QlKYim1rUtg83xm2yjZ40QjDuc291AJjjeSc9b++AWHSgSHw==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "bytes": "^3.1.2",
         "content-type": "^1.0.5",
-        "debug": "^4.4.0",
+        "debug": "^4.4.3",
         "http-errors": "^2.0.0",
-        "iconv-lite": "^0.6.3",
+        "iconv-lite": "^0.7.0",
         "on-finished": "^2.4.1",
         "qs": "^6.14.0",
-        "raw-body": "^3.0.0",
-        "type-is": "^2.0.0"
+        "raw-body": "^3.0.1",
+        "type-is": "^2.0.1"
       },
       "engines": {
         "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/brace-expansion": {
@@ -3323,6 +3329,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
       "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "license": "MIT",
       "peer": true,
       "engines": {
         "node": ">= 0.8"
@@ -3766,9 +3773,10 @@
       "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
     },
     "node_modules/debug": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -4440,7 +4448,7 @@
       "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
-        "body-parser": "^2.2.0",
+        "body-parser": ">=2.2.1",
         "content-disposition": "^1.0.0",
         "content-type": "^1.0.5",
         "cookie": "^0.7.1",
@@ -5020,19 +5028,24 @@
       }
     },
     "node_modules/http-errors": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
-      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
-        "depd": "2.0.0",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "toidentifier": "1.0.1"
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
       },
       "engines": {
         "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/i18next": {
@@ -5067,15 +5080,20 @@
       }
     },
     "node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.0.tgz",
+      "integrity": "sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
       "engines": {
         "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/ignore": {
@@ -5575,15 +5593,16 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
       },
       "bin": {
-        "js-yaml": "bin/js-yaml.js"
+        "js-yaml": ">=4.1.1"
       }
     },
     "node_modules/jsesc": {
@@ -6559,18 +6578,19 @@
       }
     },
     "node_modules/raw-body": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.0.tgz",
-      "integrity": "sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
+      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
-        "bytes": "3.1.2",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.6.3",
-        "unpipe": "1.0.0"
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.7.0",
+        "unpipe": "~1.0.0"
       },
       "engines": {
-        "node": ">= 0.8"
+        "node": ">= 0.10"
       }
     },
     "node_modules/react": {
@@ -6952,7 +6972,7 @@
         "highlight.js": "^10.4.1",
         "highlightjs-vue": "^1.0.0",
         "lowlight": "^1.17.0",
-        "prismjs": "^1.27.0",
+        "prismjs": ">=1.30.0",
         "refractor": "^3.6.0"
       },
       "peerDependencies": {
@@ -7068,7 +7088,7 @@
       "dependencies": {
         "hastscript": "^6.0.0",
         "parse-entities": "^2.0.0",
-        "prismjs": "~1.27.0"
+        "prismjs": ">=1.30.0"
       },
       "funding": {
         "type": "github",
@@ -7167,15 +7187,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/refractor/node_modules/prismjs": {
-      "version": "1.27.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
-      "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
-      "peer": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
@@ -7422,6 +7433,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT",
       "peer": true
     },
     "node_modules/sass": {
@@ -8021,9 +8033,10 @@
       "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
     },
     "node_modules/statuses": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "license": "MIT",
       "peer": true,
       "engines": {
         "node": ">= 0.8"
@@ -8440,6 +8453,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
       "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "license": "MIT",
       "peer": true,
       "engines": {
         "node": ">= 0.8"
@@ -8808,4 +8822,4 @@
       }
     }
   }
-}
+}

package/client/package.json

@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "preinstall": "npx force-resolutions",
     "dev": "vite",
     "build": "vite build --mode development",
     "build:ssr-client": "vite build --ssrManifest --outDir dist/client --mode development",
@@ -11,6 +12,11 @@
     "lint": "eslint .",
     "preview": "vite preview"
   },
+  "resolutions": {
+    "body-parser": ">=2.2.1",
+    "js-yaml": ">=4.1.1",
+    "prismjs": ">=1.30.0"
+  },
   "peerDependencies": {
     "@tiptap/react": "^2.26.1",
     "react-chartjs-2": "^5.3.0",

package/client/src/App.scss

@@ -5,6 +5,35 @@ img {
   width: auto;
 }
 
+/*
+ * Style global pour les barres de défilement (scrollbars)
+ * S'applique à toute l'application, y compris les blocs de code.
+ */
+
+/* Pour les navigateurs WebKit (Chrome, Safari, Edge, etc.) */
+::-webkit-scrollbar {
+  width: 8px;  /* Largeur de la scrollbar verticale */
+  height: 8px; /* Hauteur de la scrollbar horizontale */
+}
+
+/* La piste (le fond de la scrollbar) */
+::-webkit-scrollbar-track {
+  background: $scrollbar-track-color;
+  border-radius: 10px;
+}
+
+/* La poignée (la partie mobile de la scrollbar) */
+::-webkit-scrollbar-thumb {
+  background-color: $scrollbar-thumb-color;
+  border-radius: 10px;
+  border: 2px solid $scrollbar-track-color; /* Crée un petit espacement autour de la poignée */
+}
+
+/* La poignée au survol de la souris */
+::-webkit-scrollbar-thumb:hover {
+  background-color: $scrollbar-thumb-hover-color;
+}
+
 body {
   font-family: "Nunito Sans", sans-serif;
   line-height: 1.6; // Améliore la lisibilité

package/client/src/Dashboard.jsx

@@ -1,6 +1,6 @@
 import React, {useState, useMemo, useEffect} from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import {FaPlus, FaSpinner, FaCog} from "react-icons/fa"; // Ajout FaTrash
+import {FaPlus, FaSpinner, FaCog, FaEye} from "react-icons/fa"; // Ajout FaTrash
 
 import "./Dashboard.scss"
 import {useMutation, useQuery, useQueryClient} from "react-query";

package/client/src/WorkflowEditor.jsx

@@ -12,6 +12,7 @@ import { useModelContext } from './contexts/ModelContext';
 import { useAuthContext } from './contexts/AuthContext';
 import { Trans, useTranslation } from 'react-i18next';
 import { CodeField } from "./Field.jsx";
+import { useData } from './hooks/data.js';
 import { useQuery } from 'react-query';
 
 import "./WorkflowEditor.scss"
@@ -32,6 +33,23 @@ const WorkflowEditor = ({ workflowId }) => {
     const [nodes, setNodes, onNodesChange] = useNodesState([]);
     const [edges, setEdges, onEdgesChange] = useEdgesState([]);
     const [selectedNode, setSelectedNode] = useState(null);
+    const [highlightedElements, setHighlightedElements] = useState({ nodes: new Set(), edges: new Set() });
+    const [workflowRuns, setWorkflowRuns] = useState([]);
+    const [selectedRun, setSelectedRun] = useState(null);
+
+    // --- CORRECTION ---
+    // On utilise le hook `useData` comme prévu, en lui passant directement les paramètres de la requête.
+    // Cela corrige l'erreur "Cannot read properties of undefined (reading 'queryKey')".
+    const { data: runsData, refetch: refetchRuns } = useData(
+        'workflowRun', // queryKey
+        { model: 'workflowRun', filter: { workflow: workflowId }, sort: 'startedAt:DESC', limit: 10 }, // queryParams
+        {
+            queryKey: ['workflowRuns', workflowId],
+            enabled: !!workflowId,
+            // --- CORRECTION ---
+            // Le hook `useData` retourne déjà le tableau de données. On utilise donc `data` directement.
+            onSuccess: (data) => setWorkflowRuns(data || [])
+        });
     const [panelWidth, setPanelWidth] = useState(300);
     const resizeData = useRef({ isResizing: false, initialX: 0, initialWidth: 0 });
 
@@ -157,6 +175,7 @@ const WorkflowEditor = ({ workflowId }) => {
                 const nodePosition = { x: parentPosition.x, y: parentPosition.y + 120 };
                 initialNodes.push({
                     id: step._id,
+                    // --- NOUVEAU --- Ajout d'une classe de base pour le styling
                     type: 'default',
                     className: 'workflow-step-node',
                     position: nodePosition,
@@ -182,6 +201,7 @@ const WorkflowEditor = ({ workflowId }) => {
                     initialNodes.push({
                         id: action._id,
                         type: 'default',
+                        // --- NOUVEAU --- Ajout d'une classe de base pour le styling
                         className: 'workflow-action-node',
                         position: actionNodePosition,
                         data: {
@@ -220,6 +240,62 @@ const WorkflowEditor = ({ workflowId }) => {
         }
     }, [mainWorkflowData, workflowStepsData, workflowActionsData, setNodes, setEdges, t]);
 
+    // --- NOUVEAU ---
+    // Ce `useEffect` est le cœur de la nouvelle fonctionnalité.
+    // Il s'exécute chaque fois que l'utilisateur sélectionne un `workflowRun` différent.
+    useEffect(() => {
+        if (!selectedRun) {
+            // Si aucun run n'est sélectionné, on réinitialise tous les styles.
+            setNodes((nds) =>
+                nds.map((node) => ({
+                    ...node,
+                    className: node.className?.split(' ')[0] // Garde seulement la classe de base (ex: 'workflow-step-node')
+                }))
+            );
+            setEdges((eds) =>
+                eds.map((edge) => ({
+                    ...edge,
+                    animated: false,
+                    className: ''
+                }))
+            );
+            return;
+        }
+
+        // 1. Identifier tous les IDs des nœuds (étapes et actions) qui ont été exécutés.
+        const executedStepIds = new Set(selectedRun.history.map(h => h.stepId));
+        const executedActionIds = new Set(selectedRun.history.flatMap(h => h.actions?.map(a => a.actionId) || []));
+        const allExecutedNodeIds = new Set([
+            `workflow-start-${mainWorkflowData._id}`, // Toujours inclure le nœud de départ
+            ...executedStepIds,
+            ...executedActionIds
+        ]);
+
+        // 2. Mettre à jour les nœuds pour ajouter une classe 'executed'.
+        setNodes((nds) =>
+            nds.map((node) => {
+                const baseClass = node.className?.split(' ')[0] || '';
+                if (allExecutedNodeIds.has(node.id)) {
+                    return { ...node, className: `${baseClass} executed` };
+                }
+                return { ...node, className: baseClass }; // Rétablir la classe de base si non exécuté
+            })
+        );
+
+        // 3. Mettre à jour les arêtes pour les animer si elles connectent deux nœuds exécutés.
+        setEdges((eds) =>
+            eds.map((edge) => {
+                const isExecuted = allExecutedNodeIds.has(edge.source) && allExecutedNodeIds.has(edge.target);
+                return {
+                    ...edge,
+                    animated: isExecuted,
+                    className: isExecuted ? 'executed' : ''
+                };
+            })
+        );
+
+    }, [selectedRun, setNodes, setEdges, mainWorkflowData]);
+
     const onConnect = useCallback(
         (params) => setEdges((eds) => addEdge(params, eds)),
         [setEdges],
@@ -264,6 +340,11 @@ const WorkflowEditor = ({ workflowId }) => {
             {/* Panneau latéral pour l'édition des propriétés */}
             {selectedNode && (
                 <div className="properties-panel" style={{ width: `${panelWidth}px`, padding: '10px', borderLeft: '1px solid #ccc' }}>
+                    <select onChange={(e) => setSelectedRun(workflowRuns.find(r => r._id === e.target.value))} value={selectedRun?._id || ''}>
+                        <option value="">{t('select_a_run', 'Select a run to debug')}</option>
+                        {workflowRuns.map(run => <option key={run._id} value={run._id}>{new Date(run.startedAt).toLocaleString()} - {run.status}</option>)}
+                    </select>
+                    <button onClick={() => refetchRuns()}>{t('refresh', 'Refresh')}</button>
                     <div
                         className="resizer"
                         onMouseDown={handleMouseDown}
@@ -271,6 +352,26 @@ const WorkflowEditor = ({ workflowId }) => {
                     <h3><Trans i18nKey="properties">Propriétés</Trans></h3>
                     <p><strong>ID:</strong> {selectedNode.id}</p>
 
+                    {/* --- NOUVELLE SECTION POUR L'HISTORIQUE --- */}
+                    {selectedRun && selectedRun.history && selectedRun.history.find(h => h.stepId === selectedNode.id) && (
+                        <div className="mt-2 p-2 border rounded bg-gray-50">
+                            <strong><Trans i18nKey="run_history">Run History</Trans> ({selectedRun.status})</strong>
+                            {selectedRun.history.filter(h => h.stepId === selectedNode.id).map((historyEntry, index) => (
+                                <div key={index} className="mt-1 text-sm">
+                                    <p><strong><Trans i18nKey="executed_at">Executed at:</Trans></strong> {new Date(historyEntry.executedAt).toLocaleTimeString()}</p>
+                                    <p><strong><Trans i18nKey="status">Status:</Trans></strong> {historyEntry.status}</p>
+                                    {historyEntry.actions?.length > 0 && (
+                                        <ul className="pl-4 list-disc">
+                                            {historyEntry.actions.map((actionHist, aIndex) => (
+                                                <li key={aIndex}>{actionHist.actionName}: {actionHist.status} ({actionHist.result})</li>
+                                            ))}
+                                        </ul>
+                                    )}
+                                </div>
+                            ))}
+                        </div>
+                    )}
+
                     {/* Affiche les conditions pour un workflowStep */}
                     {selectedNode.data.conditions && (
                         <div className="mt-2">

package/client/src/WorkflowEditor.scss

@@ -1,16 +1,41 @@
 
 .workflow-step-node {
-  background-color: #e0e7ff; /* Un bleu clair pour les étapes */
-  border-color: #a5b4fc;
+  background-color: #f3f4f6; /* Gris clair par défaut */
+  border-color: #d1d5db;
   border-width: 2px;
   font-weight: bold;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
 .workflow-action-node {
-  background-color: #f0f9ff; /* Un bleu très clair pour les actions */
-  border-color: #bae6fd;
+  background-color: #f9fafb; /* Gris très clair par défaut */
+  border-color: #e5e7eb;
   border-width: 1px;
   border-style: dashed;
   width: auto;
   min-width: 150px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+/* --- NOUVEAU : Styles pour les éléments exécutés --- */
+
+/* Style pour les nœuds (étapes et actions) qui ont été exécutés */
+.react-flow__node.executed {
+  background-color: #dcfce7; /* Vert clair */
+  border-color: #4ade80; /* Vert plus prononcé */
+}
+
+/* Style pour les arêtes qui font partie du chemin d'exécution */
+.react-flow__edge.executed .react-flow__edge-path {
+  stroke: #2563eb; /* Bleu vif */
+  stroke-width: 2.5;
+}
+
+/* Style pour l'animation sur les arêtes exécutées */
+.react-flow__edge.executed.animated .react-flow__edge-path {
+  animation-duration: 1s;
+}
+
+.react-flow__edge-textbg {
+  fill: #f9fafb;
 }

package/client/src/_variables.scss

@@ -17,5 +17,8 @@ $danger-color: #ff1e00;
 $shadow-color: rgba(0, 0, 0, 0.15);
 $shadow-color-hover: rgba(0, 0, 0, 0.25);
 
+$scrollbar-track-color: #f1f1f1; // Couleur de fond de la scrollbar (très clair)
+$scrollbar-thumb-color: #c1c1c1; // Couleur de la barre de défilement
+$scrollbar-thumb-hover-color: #a8a8a8; // Couleur au survol
 
 // Appliquer cette palette aux différents éléments

package/doc/automation-workflows.md

@@ -0,0 +1,102 @@
+# Automation with Workflows: Create Automated Processes
+
+The `data-primals-engine` features a powerful **Workflow** system that enables you to define and automate complex business processes. Workflows are sequences of steps and actions that can be triggered by various events or on a schedule, allowing for sophisticated automation directly within your backend.
+
+## Core Workflow Models
+
+The workflow system is composed of several interconnected data models:
+
+### 1. `workflow`
+
+The `workflow` model is the top-level definition of an automated process. It outlines the overall flow and its starting point.
+
+-   **`name`** (string, required): A unique, descriptive name for the workflow (e.g., "Order Validation", "Low Stock Notification").
+-   **`description`** (richtext, optional): A detailed explanation of the workflow's purpose.
+-   **`startStep`** (relation to `workflowStep`, optional): The first step to execute when the workflow is initiated.
+
+### 2. `workflowTrigger`
+
+A `workflowTrigger` defines an event or schedule that initiates a workflow.
+
+-   **`workflow`** (relation to `workflow`, required): The workflow that this trigger belongs to.
+-   **`name`** (string, required, unique): A descriptive name for the trigger (e.g., "New Order Created", "Stock < 5", "Monday 9 AM Report").
+-   **`type`** (enum, required): How the workflow is initiated:
+    -   `manual`: Triggered by a data event.
+    -   `scheduled`: Triggered by a cron schedule.
+-   **`onEvent`** (enum, for `manual` type): The data event that triggers the workflow: `DataAdded`, `DataEdited`, `DataDeleted`, `ModelAdded`, `ModelEdited`, `ModelDeleted`.
+-   **`targetModel`** (string, for `manual` type): The name of the model targeted by the `onEvent`.
+-   **`dataFilter`** (code - JSON, optional, for `manual` type): Optional MongoDB filter conditions checked against the `triggerData` before executing the workflow.
+-   **`cronExpression`** (string, for `scheduled` type): A cron expression (e.g., `'0 9 * * 1'` for Monday 9 AM) to schedule the workflow.
+-   **`isActive`** (boolean): Whether the trigger is currently active.
+-   **`env`** (code - JSON, optional): Environment variables (JSON key/value pairs) specific to this trigger.
+
+### 3. `workflowStep`
+
+A `workflowStep` represents a single stage within a workflow process. It can contain conditions, actions, and define the next steps based on success or failure.
+
+-   **`workflow`** (relation to `workflow`, required): The workflow this step belongs to.
+-   **`name`** (string, optional): A descriptive name for the step (e.g., "Check Inventory", "Send Confirmation Email").
+-   **`conditions`** (code - JSON, optional): Optional conditions (MongoDB filter syntax) that must be met before the step's actions are executed. These can reference `contextData`.
+-   **`actions`** (multiple relation to `workflowAction`, required): The main operations performed by this step.
+-   **`onSuccessStep`** (relation to `workflowStep`, optional): The next step to execute if this step's conditions are met and actions succeed.
+-   **`onFailureStep`** (relation to `workflowStep`, optional): The next step if conditions fail or any action within this step fails.
+-   **`isTerminal`** (boolean, default: `false`): Indicates if this step marks the end of a workflow path.
+
+### 4. `workflowAction`
+
+A `workflowAction` defines a specific operation to be performed by a `workflowStep`. This is where the actual work of the workflow happens.
+
+-   **`name`** (string, required): Name of the action (e.g., "Update Order Status", "Send Email", "Call Payment API").
+-   **`type`** (enum, required): The type of operation to perform:
+    -   `UpdateData`: Modify existing data in a `targetModel`.
+    -   `CreateData`: Add new data to a `targetModel`.
+    -   `DeleteData`: Remove data from a `targetModel`.
+    -   `ExecuteScript`: Run custom JavaScript code.
+    -   `HttpRequest`: Make an HTTP request to an external service.
+    -   `SendEmail`: Send an email.
+    -   `Wait`: Pause the workflow for a specified duration.
+    -   `GenerateAIContent`: Generate content using an AI model (e.g., OpenAI, Google Gemini).
+    -   `ExecuteServiceFunction`: Call a function from a registered internal service (e.g., 'stripe').
+-   **`targetModel`** (string, for data operations): The model to target.
+-   **`targetSelector`** (code - JSON, for `UpdateData`/`DeleteData`): Expression to filter the target document(s).
+-   **`fieldsToUpdate`** (code - JSON, for `UpdateData`): Key-value pairs of fields to update.
+-   **`dataToCreate`** (code - JSON, for `CreateData`): Object template for the new document.
+-   **`script`** (code - JavaScript, for `ExecuteScript`): The JavaScript code to execute.
+-   **`url`, `method`, `headers`, `body`** (for `HttpRequest`): Details for the HTTP request.
+-   **`emailRecipients`, `emailSubject`, `emailContent`** (for `SendEmail`): Email details.
+-   **`duration`, `durationUnit`** (for `Wait`): How long to pause.
+-   **`aiProvider`, `aiModel`, `prompt`** (for `GenerateAIContent`): AI model and prompt details.
+-   **`serviceName`, `functionName`, `args`** (for `ExecuteServiceFunction`): Service call details.
+
+## Workflow Execution (`workflowRun`)
+
+Each time a workflow is triggered, a `workflowRun` document is created to track its execution.
+
+-   **`workflow`** (relation to `workflow`): The workflow definition that was executed.
+-   **`contextData`** (code - JSON): A snapshot of the data or event that triggered this run, and any data generated during execution.
+-   **`status`** (enum): The current status (`pending`, `running`, `completed`, `failed`, `waiting`, `cancelled`).
+-   **`history`** (array of objects): Detailed execution history of each step and action.
+-   **`startedAt`, `completedAt`**: Timestamps for the run.
+-   **`error`**: Error message if the workflow run failed.
+
+## Example Workflow Scenario
+
+Consider a workflow to "Send a Welcome Email to New Users":
+
+1.  **`workflow`**: "New User Onboarding"
+2.  **`workflowTrigger`**:
+    -   `name`: "On New User Added"
+    -   `type`: `manual`
+    -   `onEvent`: `DataAdded`
+    -   `targetModel`: `user`
+3.  **`workflowStep`**: "Send Welcome Email"
+    -   `workflow`: "New User Onboarding"
+    -   `actions`: [ID of "Send Welcome Email Action"]
+    -   `onSuccessStep`: (optional) "Create Onboarding Task"
+4.  **`workflowAction`**: "Send Welcome Email Action"
+    -   `type`: `SendEmail`
+    -   `emailRecipients`: `{triggerData.contact.email}`
+    -   `emailSubject`: "Welcome to Our Platform, {triggerData.contact.firstName}!"
+    -   `emailContent`: "Hello {triggerData.contact.firstName}, welcome aboard..."
+
+This powerful system allows you to automate virtually any process, from simple notifications to complex data transformations and integrations with external services.