diff --git a/src/modules/manager/workflowTemplates/components/VisualisetTab.tsx b/src/modules/manager/workflowTemplates/components/VisualisetTab.tsx
index e624347..3461fd1 100644
--- a/src/modules/manager/workflowTemplates/components/VisualisetTab.tsx
+++ b/src/modules/manager/workflowTemplates/components/VisualisetTab.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from "react";
+import React from "react";
 import { CreateWorkflowTemplateVersion } from "../services/WorkflowTemplateService";
 import ValidationErrorIcon from "../../../../components/validationErrorIcon";
 
@@ -7,1224 +7,37 @@ interface VisualiserTabProps {
   taskValidation: Record<string, boolean>;
 }
 
-interface ArrowPositions {
-  levelIndex: number;
-  positions: number[];
-}
-
 const VisualiserTab: React.FC<VisualiserTabProps> = ({
   data,
   taskValidation,
 }) => {
   const tasks = data.tasks;
-  const levels: CreateWorkflowTemplateVersion["tasks"][] = [];
-  const levelRowRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const [arrowPositions, setArrowPositions] = useState<ArrowPositions[]>([]);
-  const taskColumnMap = useRef<Map<string, number>>(new Map());
-  const visualiserContainerRef = useRef<HTMLDivElement>(null);
-  const [taskDOMPositions, setTaskDOMPositions] = useState<
-    Map<string, { x: number; y: number; width: number; height: number }>
-  >(new Map());
-  const [columnGap, setColumnGap] = useState<number>(80);
-
-  // Vertical spacing between stacked verdict labels in merged outcome connectors
-  const VERDICT_LABEL_SPACING = 3;
-
-  // SVG coordinate constants
-  const SVG_CENTER_POSITION = 50;
-  const SVG_COORDINATE_MAX = 100;
-
-  // Column layout constants
-  const COLUMN_MIN_WIDTH = 220;
-  const BASE_COLUMN_GAP = 16;
-  const COLUMN_GAP_MARGIN = 35;
-
-  // Outcome connector curve constants
-  const CURVE_BASE_OFFSET = 20;
-  const CURVE_OFFSET_MULTIPLIER = 0.3;
-  const CURVE_CONTROL_OFFSET_FACTOR = 0.3;
-  const CURVE_OFFSET_STEP = 15;
-
-  // Bezier curve position constants
-  const BEZIER_LABEL_POSITION = 0.5; // Midpoint for label placement
-  const BEZIER_ARROW_POSITION = 0.3; // Position along curve for directional arrow
-  const BEZIER_ARROW_TANGENT_DELTA = 0.01; // Small offset for tangent calculation
-
-  // Arrow dimensions
-  const ARROW_HALF_WIDTH = 1.5;
-  const DIRECTIONAL_ARROW_SIZE = 3;
-  const END_ARROW_OFFSET = 3;
-  const END_ARROW_HALF_WIDTH = 1;
-
-  // Calculate column range directly from taskColumnMap in render
-  const allColumns = Array.from(taskColumnMap.current.values());
-  const columnRange = {
-    min: allColumns.length > 0 ? Math.min(...allColumns) : 0,
-    max: allColumns.length > 0 ? Math.max(...allColumns) : 0,
-  };
-
-  if (tasks.length > 0) {
-    const byGuid = new Map<string, CreateWorkflowTemplateVersion["tasks"][0]>();
-    tasks.forEach((task) => {
-      byGuid.set(task.config.guid as string, task);
-    });
-
-    const levelByGuid = new Map<string, number>();
-    const columnByGuid = new Map<string, number>();
-
-    const getLevel = (task: CreateWorkflowTemplateVersion["tasks"][0]) => {
-      const guid = task.config.guid as string;
-      const cached = levelByGuid.get(guid);
-      if (cached !== undefined) {
-        return cached;
-      }
-
-      const predecessors = task.config.predecessors as string[] | undefined;
-      if (!predecessors || predecessors.length === 0) {
-        levelByGuid.set(guid, 1);
-        return 1;
-      }
-
-      const predecessorLevels = predecessors.map((pred) => {
-        const predTask = byGuid.get(pred);
-        if (!predTask) {
-          return 1;
-        }
-        return getLevel(predTask);
-      });
-
-      const nextLevel = Math.max(...predecessorLevels, 0) + 1;
-      levelByGuid.set(guid, nextLevel);
-      return nextLevel;
-    };
-
-    // First pass: calculate levels for all tasks
-    tasks.forEach((task) => {
-      getLevel(task);
-    });
-
-    // Second pass: assign columns based on predecessor-child relationships
-    const getColumn = (
-      task: CreateWorkflowTemplateVersion["tasks"][0],
-    ): number => {
-      const guid = task.config.guid as string;
-      const cached = columnByGuid.get(guid);
-      if (cached !== undefined) {
-        return cached;
-      }
-
-      const predecessors = task.config.predecessors as string[] | undefined;
-      if (!predecessors || predecessors.length === 0) {
-        // Spread root tasks across columns when there are multiple starts
-        const rootTasks = tasks.filter((t) => {
-          const preds = t.config.predecessors as string[] | undefined;
-          return !preds || preds.length === 0;
-        });
-
-        rootTasks.sort((a, b) => {
-          const nameA = (a.config.name as string) || a.type || "";
-          const nameB = (b.config.name as string) || b.type || "";
-          return nameA.localeCompare(nameB);
-        });
-
-        const rootIndex = rootTasks.findIndex(
-          (t) => (t.config.guid as string) === guid,
-        );
-
-        const column = Math.max(0, rootIndex);
-        columnByGuid.set(guid, column);
-        return column;
-      }
-
-      // If multiple predecessors, position task at the average of their columns
-      if (predecessors.length > 1) {
-        const predColumns = predecessors
-          .map((predGuid) => {
-            const predTask = byGuid.get(predGuid);
-            return predTask ? getColumn(predTask) : 0;
-          })
-          .filter((col) => col !== undefined);
-
-        if (predColumns.length > 0) {
-          const avgColumn =
-            predColumns.reduce((sum, col) => sum + col, 0) / predColumns.length;
-          const column = Math.round(avgColumn);
-          columnByGuid.set(guid, column);
-          return column;
-        }
-      }
-
-      // Get predecessor column and find which child index this is
-      const predTask = byGuid.get(predecessors[0]);
-      if (!predTask) {
-        columnByGuid.set(guid, 0);
-        return 0;
-      }
-
-      const predColumn = getColumn(predTask);
-
-      // Find all siblings (tasks with same predecessor)
-      const siblings = tasks.filter((t) => {
-        const preds = t.config.predecessors as string[] | undefined;
-        return preds && preds[0] === predecessors[0];
-      });
-
-      // Sort siblings by name for consistent ordering
-      siblings.sort((a, b) => {
-        const nameA = (a.config.name as string) || a.type || "";
-        const nameB = (b.config.name as string) || b.type || "";
-        return nameA.localeCompare(nameB);
-      });
-
-      const siblingIndex = siblings.findIndex(
-        (s) => (s.config.guid as string) === guid,
-      );
-
-      // Assign columns: keep siblings together at or to the right of parent column
-      const startCol = predColumn;
-      const column = startCol + siblingIndex;
-
-      columnByGuid.set(guid, column);
-      return column;
-    };
-
-    // Calculate columns for all tasks
-    tasks.forEach((task) => {
-      const col = getColumn(task);
-      taskColumnMap.current.set(task.config.guid as string, col);
-    });
-
-    const levelsMap = new Map<number, CreateWorkflowTemplateVersion["tasks"]>();
-    tasks.forEach((task) => {
-      const level = getLevel(task);
-      const list = levelsMap.get(level) ?? [];
-      list.push(task);
-      levelsMap.set(level, list);
-    });
-
-    // Sort tasks within each level by column
-    [...levelsMap.entries()]
-      .sort((a, b) => a[0] - b[0])
-      .forEach((entry) => {
-        entry[1].sort((a, b) => {
-          const colA = taskColumnMap.current.get(a.config.guid as string) ?? 0;
-          const colB = taskColumnMap.current.get(b.config.guid as string) ?? 0;
-          return colA - colB;
-        });
-        levels.push(entry[1]);
-      });
-  }
-
-  useEffect(() => {
-    // Measure actual positions of task nodes and calculate arrow positions
-    const positions: ArrowPositions[] = [];
-
-    levelRowRefs.current.forEach((levelRow, levelIndex) => {
-      if (!levelRow) return;
-
-      const levelRect = levelRow.getBoundingClientRect();
-      const nodes = levelRow.querySelectorAll(".visualiser-node");
-      const nodePositions: number[] = [];
-
-      nodes.forEach((node) => {
-        const nodeRect = node.getBoundingClientRect();
-        // Calculate center of node relative to level row
-        const relativeCenter =
-          (nodeRect.left - levelRect.left + nodeRect.width / 2) /
-          levelRect.width;
-        // Convert to SVG coordinates (0-100)
-        nodePositions.push(relativeCenter * SVG_COORDINATE_MAX);
-      });
-
-      if (nodePositions.length > 0) {
-        positions.push({ levelIndex, positions: nodePositions });
-      }
-    });
-
-    setArrowPositions(positions);
-  }, [tasks]);
-
-  useEffect(() => {
-    // Measure task DOM positions for outcome connectors
-    const measurePositions = () => {
-      if (!visualiserContainerRef.current) return;
-
-      const containerRect =
-        visualiserContainerRef.current.getBoundingClientRect();
-      const positions = new Map<
-        string,
-        { x: number; y: number; width: number; height: number }
-      >();
-
-      const nodes =
-        visualiserContainerRef.current.querySelectorAll(".visualiser-node");
-      nodes.forEach((node) => {
-        const guid = node.getAttribute("data-guid");
-        if (!guid) return;
-
-        // Find task by GUID
-        const task = tasks.find((t) => (t.config.guid as string) === guid);
-        if (!task) return;
-
-        const nodeRect = node.getBoundingClientRect();
-        const relX =
-          ((nodeRect.left - containerRect.left + nodeRect.width / 2) /
-            containerRect.width) *
-          100;
-        const relY =
-          ((nodeRect.top - containerRect.top + nodeRect.height / 2) /
-            containerRect.height) *
-          100;
-        const widthPercent = (nodeRect.width / containerRect.width) * 100;
-        const heightPercent = (nodeRect.height / containerRect.height) * 100;
-
-        positions.set(task.config.guid as string, {
-          x: relX,
-          y: relY,
-          width: widthPercent,
-          height: heightPercent,
-        });
-      });
-
-      setTaskDOMPositions(positions);
-    };
-
-    // Initial measurement with a delay to ensure DOM and layout are ready
-    const timer = setTimeout(() => {
-      measurePositions();
-    }, 50);
-
-    // Re-measure when layout changes
-    if (!visualiserContainerRef.current) {
-      return () => clearTimeout(timer);
-    }
-
-    const resizeObserver = new ResizeObserver(() => {
-      measurePositions();
-    });
-
-    resizeObserver.observe(visualiserContainerRef.current);
-
-    return () => {
-      clearTimeout(timer);
-      resizeObserver.disconnect();
-    };
-  }, [tasks]);
-
-  const getArrowPositionsForLevel = (levelIndex: number): number[] => {
-    const found = arrowPositions.find((ap) => ap.levelIndex === levelIndex);
-    return found?.positions ?? [];
-  };
-
-  const getColumnPercent = (column: number): number => {
-    const numColumns = columnRange.max - columnRange.min + 1;
-    if (numColumns <= 1) return SVG_CENTER_POSITION;
-    const gridCol = column - columnRange.min;
-    return ((gridCol + 0.5) / numColumns) * SVG_COORDINATE_MAX;
-  };
-
-  // Calculate connector positions based on grid columns
-  const getConnectorPositionsByColumn = (
-    levelTasks: CreateWorkflowTemplateVersion["tasks"][],
-  ): number[] => {
-    const numColumns = columnRange.max - columnRange.min + 1;
-    if (numColumns <= 1) return [SVG_CENTER_POSITION];
-
-    return levelTasks.map((task) => {
-      const predecessors = (task.config.predecessors as string[]) ?? [];
-      const taskColumn =
-        taskColumnMap.current.get(task.config.guid as string) ?? 0;
-
-      if (predecessors.length > 1) {
-        const predColumns = predecessors
-          .map((predGuid) => taskColumnMap.current.get(predGuid))
-          .filter((col) => col !== undefined) as number[];
-
-        if (predColumns.length > 0) {
-          const avgPredColumn =
-            predColumns.reduce((sum, col) => sum + col, 0) / predColumns.length;
-          const gridCol = avgPredColumn - columnRange.min;
-          // Map averaged column to percentage for centered merges
-          return ((gridCol + 0.5) / numColumns) * SVG_COORDINATE_MAX;
-        }
-      }
-
-      const gridCol = taskColumn - columnRange.min;
-      // Map grid column to percentage (e.g., 2 columns: col 0 = 25%, col 1 = 75%)
-      return ((gridCol + 0.5) / numColumns) * SVG_COORDINATE_MAX;
-    });
-  };
-
-  const getPredecessorPositionsByColumn = (
-    levelTasks: CreateWorkflowTemplateVersion["tasks"][],
-    excludeTasks?: Set<string>,
-  ): number[] => {
-    const numColumns = columnRange.max - columnRange.min + 1;
-    if (numColumns <= 1) return [SVG_CENTER_POSITION];
-
-    const predColumns = new Set<number>();
-
-    levelTasks.forEach((task) => {
-      const preds = (task.config.predecessors as string[]) ?? [];
-      preds.forEach((predGuid) => {
-        // Skip excluded tasks (e.g., those with override)
-        if (excludeTasks && excludeTasks.has(predGuid)) return;
-
-        const predColumn = taskColumnMap.current.get(predGuid);
-        if (predColumn !== undefined) {
-          predColumns.add(predColumn);
-        }
-      });
-    });
-
-    return Array.from(predColumns).map((predColumn) =>
-      getColumnPercent(predColumn),
-    );
-  };
-
-  const renderConnector = (
-    count: number,
-    positions?: number[],
-    predecessorPositions?: number[],
-    currentLevelTasks?: CreateWorkflowTemplateVersion["tasks"][],
-  ) => {
-    // Check if any task in this level has multiple predecessors from different columns
-    const hasMultiplePredecessorColumns =
-      currentLevelTasks &&
-      currentLevelTasks.some((task) => {
-        const preds = (task.config.predecessors as string[]) ?? [];
-        if (preds.length <= 1) return false;
-
-        const predColumns = preds
-          .map((predGuid) => taskColumnMap.current.get(predGuid))
-          .filter((col) => col !== undefined) as number[];
-
-        return new Set(predColumns).size > 1; // Multiple different columns
-      });
-
-    // If we have a merging scenario (multiple predecessors converging)
-    if (
-      hasMultiplePredecessorColumns &&
-      predecessorPositions &&
-      predecessorPositions.length > 1 &&
-      positions
-    ) {
-      const minPredX = Math.min(...predecessorPositions);
-      const maxPredX = Math.max(...predecessorPositions);
-
-      return (
-        <svg
-          aria-hidden="true"
-          className="visualiser-connector-branch"
-          viewBox="0 0 100 40"
-          preserveAspectRatio="none"
-        >
-          {/* Vertical lines from each predecessor */}
-          {predecessorPositions.map((x, idx) => (
-            <line
-              key={`pred-${idx}`}
-              className="visualiser-connector-branch-line"
-              x1={x}
-              y1="0"
-              x2={x}
-              y2="14"
-            />
-          ))}
-          {/* Horizontal line connecting all predecessors */}
-          <line
-            className="visualiser-connector-branch-line"
-            x1={minPredX}
-            y1="14"
-            x2={maxPredX}
-            y2="14"
-          />
-          {/* Vertical lines down to children */}
-          {positions.map((x, idx) => (
-            <g key={`child-${idx}`}>
-              <line
-                className="visualiser-connector-branch-line"
-                x1={x}
-                y1="14"
-                x2={x}
-                y2="28"
-              />
-              <polygon
-                className="visualiser-connector-branch-arrow"
-                points={`${x - ARROW_HALF_WIDTH},28 ${x + ARROW_HALF_WIDTH},28 ${x},34`}
-              />
-            </g>
-          ))}
-        </svg>
-      );
-    }
-
-    if (count <= 1) {
-      // For a single child, use predecessor position if available
-      let startX = SVG_CENTER_POSITION;
-      let endX = SVG_CENTER_POSITION;
-
-      // If single child with predecessor positions, connect from the appropriate predecessor
-      if (positions && positions.length === 1) {
-        endX = positions[0];
-
-        if (predecessorPositions && predecessorPositions.length > 0) {
-          // Find the closest predecessor position to the child position
-          const closest = predecessorPositions.reduce((prev, curr) =>
-            Math.abs(curr - endX) < Math.abs(prev - endX) ? curr : prev,
-          );
-          startX = closest;
-        }
-      }
-
-      // If start and end are the same, use simple vertical connector
-      if (!predecessorPositions || predecessorPositions.length === 0) {
-        return (
-          <div aria-hidden="true" className="visualiser-connector">
-            <div className="visualiser-connector-line" />
-            <div className="visualiser-connector-arrow" />
-            <div className="visualiser-connector-tail" />
-          </div>
-        );
-      }
-
-      // Render orthogonal connector (vertical-horizontal-vertical)
-      return (
-        <svg
-          aria-hidden="true"
-          className="visualiser-connector-branch"
-          viewBox="0 0 100 40"
-          preserveAspectRatio="none"
-        >
-          {/* Vertical line from predecessor */}
-          <line
-            className="visualiser-connector-branch-line"
-            x1={startX}
-            y1="0"
-            x2={startX}
-            y2="14"
-          />
-          {/* Horizontal line connecting to child column */}
-          {startX !== endX && (
-            <line
-              className="visualiser-connector-branch-line"
-              x1={startX}
-              y1="14"
-              x2={endX}
-              y2="14"
-            />
-          )}
-          {/* Vertical line down to child */}
-          <line
-            className="visualiser-connector-branch-line"
-            x1={endX}
-            y1="14"
-            x2={endX}
-            y2="34"
-          />
-          <polygon
-            className="visualiser-connector-branch-arrow"
-            points={`${endX - ARROW_HALF_WIDTH},34 ${endX + ARROW_HALF_WIDTH},34 ${endX},40`}
-          />
-        </svg>
-      );
-    }
-
-    // Use measured positions if available and valid, otherwise calculate evenly distributed
-    const displayPositions =
-      positions && positions.length > 0
-        ? positions
-        : Array.from(
-            { length: count },
-            (_, index) => ((index + 1) / (count + 1)) * SVG_COORDINATE_MAX,
-          );
-
-    // Guard against empty or invalid positions
-    if (!displayPositions || displayPositions.length === 0) {
-      return (
-        <div aria-hidden="true" className="visualiser-connector">
-          <div className="visualiser-connector-line" />
-          <div className="visualiser-connector-arrow" />
-          <div className="visualiser-connector-tail" />
-        </div>
-      );
-    }
-
-    const minX = Math.min(...displayPositions);
-    const maxX = Math.max(...displayPositions);
-
-    // Final safety check for Infinity
-    if (!isFinite(minX) || !isFinite(maxX)) {
-      return (
-        <div aria-hidden="true" className="visualiser-connector">
-          <div className="visualiser-connector-line" />
-        </div>
-      );
-    }
-
-    const topX =
-      predecessorPositions && predecessorPositions.length > 0
-        ? predecessorPositions[0]
-        : SVG_CENTER_POSITION;
-
-    return (
-      <svg
-        aria-hidden="true"
-        className="visualiser-connector-branch"
-        viewBox="0 0 100 40"
-        preserveAspectRatio="none"
-      >
-        <line
-          className="visualiser-connector-branch-line"
-          x1={topX}
-          y1="0"
-          x2={topX}
-          y2="14"
-        />
-        <line
-          className="visualiser-connector-branch-line"
-          x1={minX}
-          y1="14"
-          x2={maxX}
-          y2="14"
-        />
-        {displayPositions.map((x) => (
-          <g key={x}>
-            <line
-              className="visualiser-connector-branch-line"
-              x1={x}
-              y1="14"
-              x2={x}
-              y2="28"
-            />
-            <polygon
-              className="visualiser-connector-branch-arrow"
-              points={`${x - ARROW_HALF_WIDTH},28 ${x + ARROW_HALF_WIDTH},28 ${x},34`}
-            />
-          </g>
-        ))}
-      </svg>
-    );
-  };
-
-  // Collect all outcome-based connections
-  const getOutcomeConnections = (): Array<{
-    sourceGuid: string;
-    targetGuid: string;
-    verdicts: string[];
-    sourceX: number;
-    targetX: number;
-    sourceY: number;
-    targetY: number;
-    sourceWidth: number;
-    sourceHeight: number;
-    targetWidth: number;
-    targetHeight: number;
-    curveOffset: number;
-  }> => {
-    const connections: Array<{
-      sourceGuid: string;
-      targetGuid: string;
-      verdicts: string[];
-      sourceX: number;
-      targetX: number;
-      sourceY: number;
-      targetY: number;
-      sourceWidth: number;
-      sourceHeight: number;
-      targetWidth: number;
-      targetHeight: number;
-      curveOffset: number;
-    }> = [];
-
-    // First, collect all outcome connections temporarily
-    const tempConnections: Array<{
-      sourceGuid: string;
-      targetGuid: string;
-      verdict: string;
-      sourceX: number;
-      targetX: number;
-      sourceY: number;
-      targetY: number;
-      sourceWidth: number;
-      sourceHeight: number;
-      targetWidth: number;
-      targetHeight: number;
-    }> = [];
-
-    tasks.forEach((task) => {
-      const outcomes =
-        (task.config.outcomeActions as Array<{
-          verdict: string;
-          task: string | null;
-        }>) ?? [];
-
-      outcomes.forEach((outcome) => {
-        if (outcome.task) {
-          const sourcePos = taskDOMPositions.get(task.config.guid as string);
-          const targetPos = taskDOMPositions.get(outcome.task);
-
-          if (sourcePos && targetPos) {
-            tempConnections.push({
-              sourceGuid: task.config.guid as string,
-              targetGuid: outcome.task,
-              verdict: outcome.verdict,
-              sourceX: sourcePos.x,
-              sourceY: sourcePos.y,
-              targetX: targetPos.x,
-              targetY: targetPos.y,
-              sourceWidth: sourcePos.width,
-              sourceHeight: sourcePos.height,
-              targetWidth: targetPos.width,
-              targetHeight: targetPos.height,
-            });
-          }
-        }
-      });
-    });
-
-    // Group by source+target pair to combine connections with same start and end
-    const connectionGroups = new Map<string, typeof tempConnections>();
-    tempConnections.forEach((conn) => {
-      const key = `${conn.sourceGuid}→${conn.targetGuid}`;
-      const group = connectionGroups.get(key) ?? [];
-      group.push(conn);
-      connectionGroups.set(key, group);
-    });
-
-    // Merge connections with same source and target
-    connectionGroups.forEach((group) => {
-      const first = group[0];
-      connections.push({
-        sourceGuid: first.sourceGuid,
-        targetGuid: first.targetGuid,
-        verdicts: group.map((c) => c.verdict),
-        sourceX: first.sourceX,
-        sourceY: first.sourceY,
-        targetX: first.targetX,
-        targetY: first.targetY,
-        sourceWidth: first.sourceWidth,
-        sourceHeight: first.sourceHeight,
-        targetWidth: first.targetWidth,
-        targetHeight: first.targetHeight,
-        curveOffset: 0, // Will be calculated below
-      });
-    });
-
-    // Separate leftward and rightward curves for different grouping strategies
-    const leftwardCurves = connections.filter(
-      (conn) => conn.sourceY > conn.targetY,
-    );
-    const rightwardCurves = connections.filter(
-      (conn) => conn.sourceY <= conn.targetY,
-    );
-
-    // Group leftward curves by target (multiple sources converging to same target)
-    const leftwardTargetGroups = new Map<string, typeof connections>();
-    leftwardCurves.forEach((conn) => {
-      const group = leftwardTargetGroups.get(conn.targetGuid) ?? [];
-      group.push(conn);
-      leftwardTargetGroups.set(conn.targetGuid, group);
-    });
-
-    // Group rightward curves by source (multiple diverging from same source)
-    const rightwardSourceGroups = new Map<string, typeof connections>();
-    rightwardCurves.forEach((conn) => {
-      const group = rightwardSourceGroups.get(conn.sourceGuid) ?? [];
-      group.push(conn);
-      rightwardSourceGroups.set(conn.sourceGuid, group);
-    });
-
-    // Assign offsets to leftward curves (grouped by target)
-    leftwardTargetGroups.forEach((group) => {
-      if (group.length > 1) {
-        // Longer spans closer to center (first in array gets negative offset)
-        group.sort((a, b) => {
-          const distanceA = Math.abs(a.sourceY - a.targetY);
-          const distanceB = Math.abs(b.sourceY - b.targetY);
-          return distanceB - distanceA; // Descending: longer first
-        });
-
-        group.forEach((conn, idx) => {
-          const totalOffsets = group.length;
-          const offsetStep = CURVE_OFFSET_STEP;
-          const baseOffset = -((totalOffsets - 1) * offsetStep) / 2;
-          conn.curveOffset = baseOffset + idx * offsetStep;
-        });
-      }
-    });
-
-    // Assign offsets to rightward curves (grouped by source)
-    rightwardSourceGroups.forEach((group) => {
-      if (group.length > 1) {
-        // Shorter spans closer to center (first in array gets negative offset)
-        group.sort((a, b) => {
-          const distanceA = Math.abs(a.sourceY - a.targetY);
-          const distanceB = Math.abs(b.sourceY - b.targetY);
-          return distanceA - distanceB; // Ascending: shorter first
-        });
-
-        group.forEach((conn, idx) => {
-          const totalOffsets = group.length;
-          const offsetStep = CURVE_OFFSET_STEP;
-          const baseOffset = -((totalOffsets - 1) * offsetStep) / 2;
-          conn.curveOffset = baseOffset + idx * offsetStep;
-        });
-      }
-    });
-
-    return connections;
-  };
-
-  // Calculate required column gap based on outcome connections
-  const calculateRequiredColumnGap = (): number => {
-    // Get all outcome actions to determine max group size
-    const sourceGroups = new Map<string, number>();
-    const targetGroups = new Map<string, number>();
-
-    tasks.forEach((task) => {
-      const outcomes =
-        (task.config.outcomeActions as Array<{
-          verdict: string;
-          task: string | null;
-        }>) ?? [];
-
-      outcomes.forEach((outcome) => {
-        if (outcome.task) {
-          const sourceGuid = task.config.guid as string;
-          const targetGuid = outcome.task;
-
-          // Count outcomes from same source
-          sourceGroups.set(sourceGuid, (sourceGroups.get(sourceGuid) ?? 0) + 1);
-          // Count outcomes to same target
-          targetGroups.set(targetGuid, (targetGroups.get(targetGuid) ?? 0) + 1);
-        }
-      });
-    });
-
-    // Find maximum group size
-    const maxSourceGroup = Math.max(0, ...Array.from(sourceGroups.values()));
-    const maxTargetGroup = Math.max(0, ...Array.from(targetGroups.values()));
-    const maxGroupSize = Math.max(maxSourceGroup, maxTargetGroup);
-
-    // If no outcome connections, use base gap
-    if (maxGroupSize === 0) {
-      return BASE_COLUMN_GAP;
-    }
-
-    // Calculate max offset: half of (groupSize - 1) * offsetStep
-    const maxOffset = ((maxGroupSize - 1) * CURVE_OFFSET_STEP) / 2;
-
-    // Curves extend significantly - use larger multiplier to account for full curve trajectory
-    // For 2 curves (maxOffset ~7.5), this should provide ~100px of space
-    const requiredSpace =
-      CURVE_BASE_OFFSET + maxOffset * 15 + COLUMN_GAP_MARGIN;
-
-    return Math.max(BASE_COLUMN_GAP, requiredSpace);
-  };
-
-  // Update column gap when tasks change
-  useEffect(() => {
-    const newGap = calculateRequiredColumnGap();
-    setColumnGap(newGap);
-  }, [tasks]);
-
-  // Re-measure positions when gap changes to accommodate layout reflow
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      if (!visualiserContainerRef.current) return;
-
-      const containerRect =
-        visualiserContainerRef.current.getBoundingClientRect();
-      const positions = new Map<
-        string,
-        { x: number; y: number; width: number; height: number }
-      >();
-
-      const nodes =
-        visualiserContainerRef.current.querySelectorAll(".visualiser-node");
-      nodes.forEach((node) => {
-        const guid = node.getAttribute("data-guid");
-        if (!guid) return;
-
-        const task = tasks.find((t) => (t.config.guid as string) === guid);
-        if (!task) return;
-
-        const nodeRect = node.getBoundingClientRect();
-        const relX =
-          ((nodeRect.left - containerRect.left + nodeRect.width / 2) /
-            containerRect.width) *
-          100;
-        const relY =
-          ((nodeRect.top - containerRect.top + nodeRect.height / 2) /
-            containerRect.height) *
-          100;
-        const widthPercent = (nodeRect.width / containerRect.width) * 100;
-        const heightPercent = (nodeRect.height / containerRect.height) * 100;
-
-        positions.set(task.config.guid as string, {
-          x: relX,
-          y: relY,
-          width: widthPercent,
-          height: heightPercent,
-        });
-      });
-
-      setTaskDOMPositions(positions);
-    }, 50);
-
-    return () => clearTimeout(timer);
-  }, [columnGap, tasks]);
-
-  const rootTaskCount = tasks.filter((task) => {
-    const preds = task.config.predecessors as string[] | undefined;
-    return !preds || preds.length === 0;
-  }).length;
 
   return (
     <div className="visualiser-root">
-      <div className="visualiser-container" ref={visualiserContainerRef}>
+      <div className="visualiser-container">
         <div className="visualiser-flow">
-          {levels.map((level, index) => (
-            <React.Fragment key={`level-${index}`}>
-              <div className="visualiser-level">
+          <div className="visualiser-level">
+            <div className="visualiser-level-row">
+              {tasks.map((task) => (
                 <div
-                  className="visualiser-level-row"
-                  ref={(el) => {
-                    levelRowRefs.current[index] = el;
-                  }}
-                  style={
-                    {
-                      gridTemplateColumns:
-                        columnRange.max > columnRange.min
-                          ? `repeat(${
-                              columnRange.max - columnRange.min + 1
-                            }, minmax(${COLUMN_MIN_WIDTH}px, 1fr))`
-                          : `${COLUMN_MIN_WIDTH}px`,
-                      gap: `${columnGap}px`,
-                    } as React.CSSProperties
-                  }
+                  key={task.config.guid as string}
+                  className="visualiser-node"
+                  data-guid={task.config.guid as string}
                 >
-                  {level.map((task) => {
-                    const taskColumn =
-                      taskColumnMap.current.get(task.config.guid as string) ??
-                      0;
-                    const isRootTask = !(
-                      task.config.predecessors as string[] | undefined
-                    )?.length;
-                    const numColumns = columnRange.max - columnRange.min + 1;
-
-                    const predecessors = task.config.predecessors as
-                      | string[]
-                      | undefined;
-
-                    let styleObj: React.CSSProperties = {};
-
-                    if (isRootTask && numColumns > 1 && rootTaskCount === 1) {
-                      // Root tasks span all columns and center their content
-                      styleObj = {
-                        gridColumn: `1 / -1`,
-                        display: "flex",
-                        justifyContent: "center",
-                      };
-                    } else if (predecessors && predecessors.length > 1) {
-                      // Tasks with multiple predecessors - span across predecessor columns
-                      const predColumns = predecessors
-                        .map((predGuid) => taskColumnMap.current.get(predGuid))
-                        .filter((col) => col !== undefined) as number[];
-
-                      if (predColumns.length > 1) {
-                        const minPredCol = Math.min(...predColumns);
-                        const maxPredCol = Math.max(...predColumns);
-                        const startGridCol = minPredCol - columnRange.min + 1;
-                        const endGridCol = maxPredCol - columnRange.min + 2;
-
-                        styleObj = {
-                          gridColumn: `${startGridCol} / ${endGridCol}`,
-                          display: "flex",
-                          justifyContent: "center",
-                        };
-                      } else {
-                        // Fallback to normal positioning
-                        const gridColumn = taskColumn - columnRange.min + 1;
-                        styleObj = { gridColumn };
+                  <div className="visualiser-node-content">
+                    <ValidationErrorIcon
+                      visible={
+                        taskValidation[task.config.guid as string] === false
                       }
-                    } else {
-                      // Child tasks positioned in their specific column
-                      const gridColumn = taskColumn - columnRange.min + 1;
-                      styleObj = { gridColumn };
-                    }
-
-                    return (
-                      <div
-                        key={task.config.guid as string}
-                        className="visualiser-node"
-                        data-column={taskColumn}
-                        data-guid={task.config.guid as string}
-                        style={styleObj}
-                      >
-                        <div className="visualiser-node-content">
-                          <ValidationErrorIcon
-                            visible={
-                              taskValidation[task.config.guid as string] ===
-                              false
-                            }
-                          />
-                          <span>
-                            {(task.config.name as string) || task.type}
-                          </span>
-                        </div>
-                      </div>
-                    );
-                  })}
+                    />
+                    <span>{(task.config.name as string) || task.type}</span>
+                  </div>
                 </div>
-              </div>
-              {index < levels.length - 1
-                ? (() => {
-                    const currentLevel = levels[index];
-                    const nextLevel = levels[index + 1];
-
-                    // Tasks with override should not have normal progression connectors
-                    const overrideTasks = new Set(
-                      currentLevel
-                        .filter(
-                          (task) =>
-                            task.config.overrideDefaultTaskProgression === true,
-                        )
-                        .map((task) => task.config.guid as string),
-                    );
-
-                    const hasMergeTask = nextLevel.some((task) => {
-                      const preds =
-                        (task.config.predecessors as string[]) ?? [];
-                      // Only consider predecessors without override
-                      const validPreds = preds.filter(
-                        (predGuid) => !overrideTasks.has(predGuid),
-                      );
-                      if (validPreds.length <= 1) return false;
-
-                      const predColumns = validPreds
-                        .map((predGuid) => taskColumnMap.current.get(predGuid))
-                        .filter((col) => col !== undefined) as number[];
-
-                      return new Set(predColumns).size > 1;
-                    });
-
-                    if (hasMergeTask) {
-                      // Filter to tasks with at least one valid predecessor
-                      const tasksWithValidPreds = nextLevel.filter((task) => {
-                        const preds =
-                          (task.config.predecessors as string[]) ?? [];
-                        return preds.some(
-                          (predGuid) => !overrideTasks.has(predGuid),
-                        );
-                      });
-
-                      return renderConnector(
-                        tasksWithValidPreds.length,
-                        getConnectorPositionsByColumn(tasksWithValidPreds),
-                        getPredecessorPositionsByColumn(
-                          tasksWithValidPreds,
-                          overrideTasks,
-                        ),
-                        tasksWithValidPreds,
-                      );
-                    }
-
-                    const groups = new Map<
-                      string,
-                      CreateWorkflowTemplateVersion["tasks"][]
-                    >();
-
-                    nextLevel.forEach((task) => {
-                      const preds =
-                        (task.config.predecessors as string[]) ?? [];
-                      preds.forEach((predGuid) => {
-                        // Skip predecessors with override
-                        if (overrideTasks.has(predGuid)) return;
-
-                        const list = groups.get(predGuid) ?? [];
-                        list.push(task);
-                        groups.set(predGuid, list);
-                      });
-                    });
-
-                    // If no connectors will be drawn but there are override tasks,
-                    // render a spacer to maintain visual gap
-                    if (groups.size === 0 && overrideTasks.size > 0) {
-                      // Check if next level has predecessors in current level
-                      const hasRelationship = nextLevel.some((task) => {
-                        const preds =
-                          (task.config.predecessors as string[]) ?? [];
-                        return preds.some((predGuid) => {
-                          return currentLevel.some(
-                            (currentTask) =>
-                              (currentTask.config.guid as string) === predGuid,
-                          );
-                        });
-                      });
-
-                      if (hasRelationship) {
-                        return (
-                          <div
-                            aria-hidden="true"
-                            className="visualiser-connector-spacer"
-                          />
-                        );
-                      }
-                    }
-
-                    return Array.from(groups.entries()).map(
-                      ([predGuid, children]) => {
-                        const predColumn = taskColumnMap.current.get(predGuid);
-                        if (predColumn === undefined) return null;
-
-                        return renderConnector(
-                          children.length,
-                          getConnectorPositionsByColumn(children),
-                          [getColumnPercent(predColumn)],
-                          children,
-                        );
-                      },
-                    );
-                  })()
-                : null}
-            </React.Fragment>
-          ))}
+              ))}
+            </div>
+          </div>
         </div>
-        {/* Outcome-based loop-back connectors overlay */}
-        <svg
-          aria-hidden="true"
-          className="visualiser-outcome-connectors"
-          viewBox="0 0 100 100"
-          preserveAspectRatio="none"
-        >
-          {getOutcomeConnections().map((conn, idx) => {
-            // Determine curve direction based on flow direction
-            // Backward flow (higher Y to lower Y) curves left, forward flow curves right
-            const isBackwardFlow = conn.sourceY > conn.targetY;
-            const curveDirection = isBackwardFlow ? -1 : 1;
-
-            // Calculate edge points based on curve direction
-            const sourceEdgeX =
-              curveDirection > 0
-                ? conn.sourceX + conn.sourceWidth / 2 // right edge for rightward curves
-                : conn.sourceX - conn.sourceWidth / 2; // left edge for leftward curves
-
-            const targetEdgeX =
-              curveDirection > 0
-                ? conn.targetX + conn.targetWidth / 2 // right edge for rightward curves
-                : conn.targetX - conn.targetWidth / 2; // left edge for leftward curves
-
-            const baseControlOffsetX =
-              CURVE_BASE_OFFSET +
-              Math.abs(conn.curveOffset) * CURVE_OFFSET_MULTIPLIER;
-            const controlOffsetY =
-              (Math.abs(conn.targetY - conn.sourceY) / 2) *
-              CURVE_CONTROL_OFFSET_FACTOR;
-
-            // Apply horizontal offset to spread overlapping curves
-            const offsetX = conn.curveOffset;
-
-            // Calculate text position at the curve's midpoint (t=0.5 on Bezier curve)
-            const t = BEZIER_LABEL_POSITION;
-            const p0 = { x: sourceEdgeX, y: conn.sourceY };
-            const p1 = {
-              x: sourceEdgeX + baseControlOffsetX * curveDirection + offsetX,
-              y: conn.sourceY + controlOffsetY,
-            };
-            const p2 = {
-              x: targetEdgeX + baseControlOffsetX * curveDirection + offsetX,
-              y: conn.targetY - controlOffsetY,
-            };
-            const p3 = { x: targetEdgeX, y: conn.targetY };
-
-            // Cubic Bezier curve formula at t
-            const textX =
-              Math.pow(1 - t, 3) * p0.x +
-              3 * Math.pow(1 - t, 2) * t * p1.x +
-              3 * (1 - t) * Math.pow(t, 2) * p2.x +
-              Math.pow(t, 3) * p3.x;
-            const textY =
-              Math.pow(1 - t, 3) * p0.y +
-              3 * Math.pow(1 - t, 2) * t * p1.y +
-              3 * (1 - t) * Math.pow(t, 2) * p2.y +
-              Math.pow(t, 3) * p3.y;
-
-            // Calculate arrow position at t=0.3 for directional indicator
-            const tArrow = BEZIER_ARROW_POSITION;
-            const arrowX =
-              Math.pow(1 - tArrow, 3) * p0.x +
-              3 * Math.pow(1 - tArrow, 2) * tArrow * p1.x +
-              3 * (1 - tArrow) * Math.pow(tArrow, 2) * p2.x +
-              Math.pow(tArrow, 3) * p3.x;
-            const arrowY =
-              Math.pow(1 - tArrow, 3) * p0.y +
-              3 * Math.pow(1 - tArrow, 2) * tArrow * p1.y +
-              3 * (1 - tArrow) * Math.pow(tArrow, 2) * p2.y +
-              Math.pow(tArrow, 3) * p3.y;
-
-            // Calculate tangent for arrow rotation
-            const tArrowDelta =
-              BEZIER_ARROW_POSITION + BEZIER_ARROW_TANGENT_DELTA;
-            const arrowX2 =
-              Math.pow(1 - tArrowDelta, 3) * p0.x +
-              3 * Math.pow(1 - tArrowDelta, 2) * tArrowDelta * p1.x +
-              3 * (1 - tArrowDelta) * Math.pow(tArrowDelta, 2) * p2.x +
-              Math.pow(tArrowDelta, 3) * p3.x;
-            const arrowY2 =
-              Math.pow(1 - tArrowDelta, 3) * p0.y +
-              3 * Math.pow(1 - tArrowDelta, 2) * tArrowDelta * p1.y +
-              3 * (1 - tArrowDelta) * Math.pow(tArrowDelta, 2) * p2.y +
-              Math.pow(tArrowDelta, 3) * p3.y;
-
-            const angle =
-              Math.atan2(arrowY2 - arrowY, arrowX2 - arrowX) * (180 / Math.PI);
-
-            return (
-              <g
-                key={`outcome-${idx}`}
-                className="visualiser-outcome-connector"
-              >
-                <path
-                  className="visualiser-outcome-connector-line"
-                  d={`M ${sourceEdgeX} ${conn.sourceY} 
-                     C ${p1.x} ${p1.y}, 
-                       ${p2.x} ${p2.y}, 
-                       ${targetEdgeX} ${conn.targetY}`}
-                />
-                {/* Directional arrow along curve */}
-                <polygon
-                  className="visualiser-outcome-connector-arrow"
-                  points={`-${DIRECTIONAL_ARROW_SIZE},-${ARROW_HALF_WIDTH} -${DIRECTIONAL_ARROW_SIZE},${ARROW_HALF_WIDTH} 0,0`}
-                  transform={`translate(${arrowX},${arrowY}) rotate(${angle})`}
-                />
-                {/* End arrow */}
-                <polygon
-                  className="visualiser-outcome-connector-arrow"
-                  points={`${targetEdgeX - END_ARROW_HALF_WIDTH},${conn.targetY - END_ARROW_OFFSET} ${targetEdgeX + END_ARROW_HALF_WIDTH},${conn.targetY - END_ARROW_OFFSET} ${targetEdgeX},${conn.targetY}`}
-                />
-                {/* Render verdict labels - multiple if merged */}
-                {conn.verdicts.map((verdict, vIdx) => {
-                  const labelOffsetY =
-                    (vIdx - (conn.verdicts.length - 1) / 2) *
-                    VERDICT_LABEL_SPACING;
-                  return (
-                    <text
-                      key={`verdict-${vIdx}`}
-                      x={textX}
-                      y={textY + labelOffsetY}
-                      className="visualiser-outcome-connector-label"
-                      textAnchor="middle"
-                      dominantBaseline="middle"
-                    >
-                      {verdict}
-                    </text>
-                  );
-                })}
-              </g>
-            );
-          })}
-        </svg>
       </div>
     </div>
   );