feat: configure control flows tasks

Signed-off-by: Simon Emms <simon@simonemms.com>

Author: mrsimonemms

src/lib/i18n/messages/en.json

@@ -37,11 +37,22 @@
     "branches": "Branches",
     "removeBranch": "Remove branch {{label}}",
     "addBranch": "+ Add branch",
+    "switch": {
+      "branches": "Branches",
+      "branchName": "Branch name",
+      "condition": "Condition (when)",
+      "targetWorkflow": "Target workflow",
+      "addBranch": "+ Add branch",
+      "addDefaultBranch": "+ Add default branch",
+      "defaultBranch": "Default branch",
+      "errorDuplicateName": "Duplicate branch name",
+      "errorEmptyCondition": "Condition is required",
+      "errorNoTarget": "Target workflow is required"
+    },
     "sections": "Sections",
     "enterTryBody": "Enter try body",
     "enterCatchBlock": "Enter catch block",
     "addCatchBlock": "+ Add catch block",
-    "enterLoopBody": "Enter loop body",
     "comingSoon": "Full editing UI coming soon.",
     "moveUp": "↑ Move up",
     "moveUpLabel": "Move task up",
@@ -76,11 +87,12 @@
       "competeHint": "First branch to finish wins"
     },
     "loop": {
-      "title": "Loop configuration",
-      "in": "Collection",
-      "each": "Item variable",
-      "at": "Index variable",
-      "while": "Break condition"
+      "configuration": "Loop configuration",
+      "collection": "Collection",
+      "itemVariable": "Item variable",
+      "indexVariable": "Index variable",
+      "breakCondition": "Break condition",
+      "enterBody": "Enter loop body"
     },
     "callGrpc": {
       "title": "Call gRPC",
@@ -349,7 +361,7 @@
     "switch": "Switch",
     "fork": "Fork",
     "try": "Try / Catch",
-    "loop": "Loop"
+    "loop": "For Loop"
   },
   "sidebar": {
     "document": "Document",
@@ -372,7 +384,20 @@
   "canvas": {
     "ariaLabel": "Workflow canvas",
     "tryBody": "try body",
-    "catchBlock": "catch block",
-    "loopBody": "body"
+    "catchBlock": "catch block"
+  },
+  "node": {
+    "loop": {
+      "for": "for",
+      "body": "body",
+      "bodyEmpty": "body (empty)",
+      "bodyCount": "body ({{count}} tasks)"
+    }
+  },
+  "validation": {
+    "loop": {
+      "collectionRequired": "Collection is required",
+      "invalidIdentifier": "Must be a valid identifier (letters, digits, underscores; cannot start with a digit)"
+    }
   }
 }

src/lib/tasks/actions.ts

@@ -461,6 +461,32 @@ export function renameSwitchBranch(
   };
 }
 
+export function updateSwitchBranchCondition(
+  node: SwitchNode,
+  branchId: string,
+  condition: string | undefined,
+): SwitchNode {
+  return {
+    ...node,
+    branches: node.branches.map((b) =>
+      b.id === branchId ? { ...b, condition } : b,
+    ),
+  };
+}
+
+export function updateSwitchBranchTarget(
+  node: SwitchNode,
+  branchId: string,
+  thenWorkflowName: string | undefined,
+): SwitchNode {
+  return {
+    ...node,
+    branches: node.branches.map((b) =>
+      b.id === branchId ? { ...b, thenWorkflowName } : b,
+    ),
+  };
+}
+
 // ---------------------------------------------------------------------------
 // ForkNode
 // ---------------------------------------------------------------------------
@@ -593,7 +619,7 @@ export function insertNode(
 // Resolve the FlowGraph at the given GraphPath. Throws on invalid paths.
 //
 // Segment consumption rules per node type:
-//   loop   → 1 segment  (nodeId → bodyGraph)
+//   loop   → 2 segments (nodeId + 'body' → bodyGraph)
 //   switch → 2 segments (nodeId + branchId → branch.graph)
 //   fork   → 2 segments (nodeId + branchId → branch.graph)
 //   try    → 2 segments (nodeId + 'tryGraph'|'catchGraph' → section)
@@ -615,13 +641,7 @@ export function getGraphAtPath(file: WorkflowFile, path: GraphPath): FlowGraph {
       throw new Error(`Node ${nodeId} is a task and has no sub-graph`);
     }
 
-    if (node.type === 'loop') {
-      graph = node.bodyGraph;
-      i += 1;
-      continue;
-    }
-
-    // switch, fork, try — consume one additional segment for the sub-graph id
+    // switch, fork, try, loop — consume one additional segment for the sub-graph id
     i += 1;
     if (i >= path.segments.length) {
       throw new Error(
@@ -630,6 +650,17 @@ export function getGraphAtPath(file: WorkflowFile, path: GraphPath): FlowGraph {
     }
     const subId = path.segments[i]!;
 
+    if (node.type === 'loop') {
+      if (subId !== 'body') {
+        throw new Error(
+          `Expected "body" after loop node ${nodeId}, got "${subId}"`,
+        );
+      }
+      graph = node.bodyGraph;
+      i += 1;
+      continue;
+    }
+
     if (node.type === 'switch') {
       const branch = node.branches.find((b) => b.id === subId);
       if (!branch) {
@@ -693,17 +724,7 @@ function applyTransformAt(
   const node = graph.nodes[nodeId];
   if (!node) throw new Error(`Node ${nodeId} not found at segment ${i}`);
 
-  if (node.type === 'loop') {
-    const newBody = applyTransformAt(
-      node.bodyGraph,
-      segments,
-      i + 1,
-      transform,
-    );
-    return replaceNode(graph, { ...node, bodyGraph: newBody });
-  }
-
-  // switch, fork, try — next segment identifies which sub-graph to descend into
+  // switch, fork, try, loop — next segment identifies which sub-graph to descend into
   const subIndex = i + 1;
   if (subIndex >= segments.length) {
     throw new Error(
@@ -756,6 +777,17 @@ function applyTransformAt(
     }
   }
 
+  if (node.type === 'loop') {
+    // subId is the 'body' literal — descend into bodyGraph.
+    const newBody = applyTransformAt(
+      node.bodyGraph,
+      segments,
+      subIndex + 1,
+      transform,
+    );
+    return replaceNode(graph, { ...node, bodyGraph: newBody });
+  }
+
   throw new Error(
     `Node ${nodeId} (type: ${node.type}) cannot be navigated into`,
   );

src/lib/tasks/registry.ts

@@ -254,7 +254,9 @@ export const TASK_REGISTRY: readonly TaskDefinition[] = [
         id: nid,
         type: 'loop',
         name: 'loop',
-        in: '$.',
+        in: '${ $input.items }',
+        each: 'item',
+        at: 'index',
         bodyGraph: emptyGraph(),
         metadata: { [ZIGFLOW_ID_KEY]: nid },
       };

src/lib/ui/Canvas.svelte

@@ -98,7 +98,10 @@
         ROW_HEADER + rows * ROW_HEIGHT + ROW_PADDING,
       );
     }
-    // loop: header(28) + body row(22) + padding(8) = 58 ≈ 60
+    // loop: header(28) + expression line(22) + body row(22) + padding(8) = 80
+    if (node.type === 'loop') {
+      return ROW_HEADER + ROW_HEIGHT + ROW_HEIGHT + ROW_PADDING;
+    }
     return NODE_HEIGHT_TASK;
   }
 
@@ -133,6 +136,8 @@
     nodeType: string;
     typeLabel: string;
     navRows?: NavRow[];
+    // Loop nodes only: the collection expression shown under the header.
+    loopExpression?: string;
   };
 
   type SFNode = {
@@ -177,7 +182,12 @@
       return rows;
     }
     if (node.type === 'loop') {
-      return [{ id: 'body', label: t('canvas.loopBody'), kind: 'enter' }];
+      const count = Object.keys(node.bodyGraph.nodes).length;
+      const label =
+        count === 0
+          ? t('node.loop.bodyEmpty')
+          : t('node.loop.bodyCount', { count });
+      return [{ id: 'body', label, kind: 'enter' }];
     }
     return [];
   }
@@ -188,6 +198,7 @@
       nodeType: node.type,
       typeLabel: nodeTypeLabel(node.type),
       navRows: node.type !== 'task' ? buildNavRows(node) : undefined,
+      loopExpression: node.type === 'loop' ? node.in : undefined,
     };
   }
 

src/lib/ui/FlowNode.svelte

@@ -30,6 +30,7 @@
 -->
 
 <script lang="ts">
+  import { t } from '$lib/i18n/index.svelte';
   import { Handle, Position } from '@xyflow/svelte';
   import { getContext } from 'svelte';
 
@@ -53,6 +54,8 @@
     nodeType: string; // 'task' | 'switch' | 'fork' | 'try' | 'loop'
     typeLabel: string;
     navRows?: NavRow[];
+    // Loop nodes only: the 'in' collection expression shown under the header.
+    loopExpression?: string;
   };
 
   interface Props {
@@ -110,6 +113,15 @@
       <span class="flow-node-name">{data.label}</span>
     </div>
 
+    {#if data.loopExpression !== undefined}
+      <div class="flow-node-loop-expr">
+        <span class="flow-node-loop-for" aria-hidden="true"
+          >{t('node.loop.for')}</span
+        >
+        <span class="flow-node-loop-expr-val">{data.loopExpression}</span>
+      </div>
+    {/if}
+
     {#if data.navRows && data.navRows.length > 0}
       <ul class="flow-node-rows" role="list">
         {#each data.navRows as row (row.id)}
@@ -267,4 +279,38 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  /* -------------------------------------------------------------------------
+     Loop expression line
+  ------------------------------------------------------------------------- */
+
+  .flow-node-loop-expr {
+    height: 22px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0 0.5rem;
+    border-bottom: 1px solid #eee;
+    overflow: hidden;
+  }
+
+  .flow-node-loop-for {
+    font-size: 0.62rem;
+    font-weight: 700;
+    text-transform: lowercase;
+    letter-spacing: 0.04em;
+    color: var(--accent);
+    flex-shrink: 0;
+  }
+
+  .flow-node-loop-expr-val {
+    font-size: 0.68rem;
+    font-family: monospace;
+    color: #444;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+  }
 </style>