I can save workflow state + uptated css + started Properties Panek

src/components/workflows/assets/Workflows.css

@@ -1,5 +1,6 @@
 .wkf-toolbox-item {
   cursor: grab;
+  color: var(--color-neutral);
 }
 
 .wkf-toolbox-item:active {
@@ -8,7 +9,7 @@
 
 .wkf-canvas {
   position: relative;
-  min-height: 600px;
+  min-height: 230px;
   background-image:
       linear-gradient(rgba(0,0,0,.1) 1px, transparent 1px),
       linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 1px);
@@ -20,6 +21,8 @@
   cursor: move;
   border: 2px solid transparent;
   transition: all 0.2s;
+  height: 64px;
+  color: var(--color-neutral);
 }
 
 .wkf-workflow-component:hover {

src/components/workflows/assets/Workflows.js

@@ -206,6 +206,20 @@ function bindWorkflowDesigner(elementId) {
                 designer.connectionStart = null;
             }
         }
+
+        else {
+          const component = event.target.closest('.wkf-workflow-component');
+          componentId = component ? component.dataset.componentId : null
+          htmx.ajax('POST', '/workflows/select-connection', {
+                      target: `#c_${elementId}`,
+                      headers: {"Content-Type": "application/x-www-form-urlencoded"},
+                      swap: "innerHTML",
+                      values: {
+                          _id: elementId,
+                          component_id: componentId
+                      }
+                  });
+        }
     });
 
     // Canvas drag over event (for dropping new components)
@@ -270,9 +284,9 @@ function bindWorkflowDesigner(elementId) {
         if (!fromComp || !toComp) return;
         // Get current positions
         const fromX = parseInt(fromComp.style.left) + 128; // component width + output point
-        const fromY = parseInt(fromComp.style.top) + 40;   // component height / 2
+        const fromY = parseInt(fromComp.style.top) + 32;   // component height / 2
         const toX = parseInt(toComp.style.left);
-        const toY = parseInt(toComp.style.top) + 40;
+        const toY = parseInt(toComp.style.top) + 32;
         // Create curved path
         const midX = (fromX + toX) / 2;
         const path = `M ${fromX} ${fromY} C ${midX} ${fromY}, ${midX} ${toY}, ${toX} ${toY}`;