diff --git a/assets/javascripts/discourse/admin/components/workflow-back-button.gjs b/admin/assets/javascripts/discourse/components/workflow-back-button.gjs
similarity index 75%
rename from assets/javascripts/discourse/admin/components/workflow-back-button.gjs
rename to admin/assets/javascripts/discourse/components/workflow-back-button.gjs
index 24971f5..90ab561 100644
--- a/assets/javascripts/discourse/admin/components/workflow-back-button.gjs
+++ b/admin/assets/javascripts/discourse/components/workflow-back-button.gjs
@@ -1,6 +1,6 @@
 import { LinkTo } from "@ember/routing";
-import { or } from "truth-helpers";
-import dIcon from "discourse-common/helpers/d-icon";
+import dIcon from "discourse/helpers/d-icon";
+import { or } from "discourse/truth-helpers";
 import { i18n } from "discourse-i18n";
 
 export default <template>
diff --git a/assets/javascripts/discourse/admin/components/workflow-deep-link-button.gjs b/admin/assets/javascripts/discourse/components/workflow-deep-link-button.gjs
similarity index 74%
rename from assets/javascripts/discourse/admin/components/workflow-deep-link-button.gjs
rename to admin/assets/javascripts/discourse/components/workflow-deep-link-button.gjs
index ca365c9..32e5dce 100644
--- a/assets/javascripts/discourse/admin/components/workflow-deep-link-button.gjs
+++ b/admin/assets/javascripts/discourse/components/workflow-deep-link-button.gjs
@@ -1,6 +1,6 @@
 import { LinkTo } from "@ember/routing";
-import { or } from "truth-helpers";
-import dIcon from "discourse-common/helpers/d-icon";
+import dIcon from "discourse/helpers/d-icon";
+import { or } from "discourse/truth-helpers";
 import { i18n } from "discourse-i18n";
 
 export default <template>
diff --git a/assets/javascripts/discourse/admin/components/workflow-editor.gjs b/admin/assets/javascripts/discourse/components/workflow-editor.gjs
similarity index 83%
rename from assets/javascripts/discourse/admin/components/workflow-editor.gjs
rename to admin/assets/javascripts/discourse/components/workflow-editor.gjs
index 1f56227..ee0d679 100644
--- a/assets/javascripts/discourse/admin/components/workflow-editor.gjs
+++ b/admin/assets/javascripts/discourse/components/workflow-editor.gjs
@@ -15,6 +15,7 @@ import DToggleSwitch from "discourse/components/d-toggle-switch";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import I18n, { i18n } from "discourse-i18n";
 import WorkflowStepListEditor from "./workflow-step-list-editor";
+import WorkflowVisualEditor from "./workflow-visual-editor";
 
 export default class WorkflowEditor extends Component {
   @service adminPluginNavManager;
@@ -26,6 +27,25 @@ export default class WorkflowEditor extends Component {
   @tracked isSaving = false;
   @tracked editingModel = null;
   @tracked showDelete = false;
+  @tracked stepsView = "list";
+
+  get showingStepsList() {
+    return this.stepsView === "list";
+  }
+
+  get showingStepsVisual() {
+    return this.stepsView === "visual";
+  }
+
+  @action
+  showStepsList() {
+    this.stepsView = "list";
+  }
+
+  @action
+  showStepsVisual() {
+    this.stepsView = "visual";
+  }
 
   @action
   updateModel() {
@@ -266,13 +286,45 @@ export default class WorkflowEditor extends Component {
         </div>
       {{/if}}
       {{#if this.showSteps}}
-        <div class="control-group">
-          <WorkflowStepListEditor
-            class="workflow-editor__steps"
-            @workflow={{@workflow}}
-            @disabled={{this.editingModel.system}}
-            @onChange={{this.stepsChanged}}
-          />
+        <div class="control-group workflow-editor__steps-panel">
+          <div class="workflow-editor__steps-tabs">
+            <button
+              type="button"
+              class={{if
+                this.showingStepsList
+                "btn btn-primary workflow-editor__steps-tab"
+                "btn btn-default workflow-editor__steps-tab"
+              }}
+              {{on "click" this.showStepsList}}
+            >
+              {{i18n "admin.discourse_workflow.workflows.steps.tabs.list"}}
+            </button>
+            <button
+              type="button"
+              class={{if
+                this.showingStepsVisual
+                "btn btn-primary workflow-editor__steps-tab"
+                "btn btn-default workflow-editor__steps-tab"
+              }}
+              {{on "click" this.showStepsVisual}}
+            >
+              {{i18n "admin.discourse_workflow.workflows.steps.tabs.visual"}}
+            </button>
+          </div>
+
+          {{#if this.showingStepsList}}
+            <WorkflowStepListEditor
+              class="workflow-editor__steps"
+              @workflow={{@workflow}}
+              @disabled={{this.editingModel.system}}
+              @onChange={{this.stepsChanged}}
+            />
+          {{else}}
+            <WorkflowVisualEditor
+              @workflow={{@workflow}}
+              @disabled={{this.editingModel.system}}
+            />
+          {{/if}}
         </div>
       {{/if}}
       <div class="control-group workflow-editor__action_panel">
diff --git a/assets/javascripts/discourse/admin/components/workflow-link-button.gjs b/admin/assets/javascripts/discourse/components/workflow-link-button.gjs
similarity index 74%
rename from assets/javascripts/discourse/admin/components/workflow-link-button.gjs
rename to admin/assets/javascripts/discourse/components/workflow-link-button.gjs
index d097120..806b2c3 100644
--- a/assets/javascripts/discourse/admin/components/workflow-link-button.gjs
+++ b/admin/assets/javascripts/discourse/components/workflow-link-button.gjs
@@ -1,6 +1,6 @@
 import { LinkTo } from "@ember/routing";
-import { or } from "truth-helpers";
-import dIcon from "discourse-common/helpers/d-icon";
+import dIcon from "discourse/helpers/d-icon";
+import { or } from "discourse/truth-helpers";
 import { i18n } from "discourse-i18n";
 
 export default <template>
diff --git a/assets/javascripts/discourse/admin/components/workflow-list-editor.gjs b/admin/assets/javascripts/discourse/components/workflow-list-editor.gjs
similarity index 100%
rename from assets/javascripts/discourse/admin/components/workflow-list-editor.gjs
rename to admin/assets/javascripts/discourse/components/workflow-list-editor.gjs
diff --git a/assets/javascripts/discourse/admin/components/workflow-step-editor.gjs b/admin/assets/javascripts/discourse/components/workflow-step-editor.gjs
similarity index 100%
rename from assets/javascripts/discourse/admin/components/workflow-step-editor.gjs
rename to admin/assets/javascripts/discourse/components/workflow-step-editor.gjs
diff --git a/assets/javascripts/discourse/admin/components/workflow-step-list-editor.gjs b/admin/assets/javascripts/discourse/components/workflow-step-list-editor.gjs
similarity index 98%
rename from assets/javascripts/discourse/admin/components/workflow-step-list-editor.gjs
rename to admin/assets/javascripts/discourse/components/workflow-step-list-editor.gjs
index 4357081..60af785 100644
--- a/assets/javascripts/discourse/admin/components/workflow-step-list-editor.gjs
+++ b/admin/assets/javascripts/discourse/components/workflow-step-list-editor.gjs
@@ -13,7 +13,7 @@ import DToggleSwitch from "discourse/components/d-toggle-switch";
 import categoryLink from "discourse/helpers/category-link";
 import concatClass from "discourse/helpers/concat-class";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import { bind } from "discourse-common/utils/decorators";
+import { bind } from "discourse/lib/decorators";
 import { i18n } from "discourse-i18n";
 import WorkflowLinkButton from "./workflow-link-button";
 import WorkflowStepEditor from "./workflow-step-editor";
@@ -21,10 +21,14 @@ import WorkflowStepEditor from "./workflow-step-editor";
 export default class WorkflowStepsListEditor extends Component {
   @service adminPluginNavManager;
   @service store;
-  @tracked currentWorkflowStep = this.args.currentWorkflowStep;
+
   @tracked workflowSteps = [];
   @tracked workflowStepsPresent = false;
 
+  get currentWorkflowStep() {
+    return this.args.currentWorkflowStep;
+  }
+
   get newStep() {
     return this.store.createRecord("workflow-step", {
       workflow_id: this.args.workflow.id,
diff --git a/assets/javascripts/discourse/admin/components/workflow-step-option-editor.gjs b/admin/assets/javascripts/discourse/components/workflow-step-option-editor.gjs
similarity index 97%
rename from assets/javascripts/discourse/admin/components/workflow-step-option-editor.gjs
rename to admin/assets/javascripts/discourse/components/workflow-step-option-editor.gjs
index fe1e60c..4379fca 100644
--- a/assets/javascripts/discourse/admin/components/workflow-step-option-editor.gjs
+++ b/admin/assets/javascripts/discourse/components/workflow-step-option-editor.gjs
@@ -8,17 +8,14 @@ import { later } from "@ember/runloop";
 import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
 import { popupAjaxError } from "discourse/lib/ajax-error";
+import DropdownSelectBox from "discourse/select-kit/components/dropdown-select-box";
 import I18n, { i18n } from "discourse-i18n";
-import DropdownSelectBox from "select-kit/components/dropdown-select-box";
 import WorkflowBackButton from "./workflow-back-button";
 
 export default class WorkflowStepOptionEditor extends Component {
-  @service adminPluginNavManager;
   @service router;
-  @service store;
   @service dialog;
   @service toasts;
-  @service siteSettings;
 
   @tracked isSaving = false;
   @tracked editingModel = null;
diff --git a/assets/javascripts/discourse/admin/components/workflow-step-option-list-editor.gjs b/admin/assets/javascripts/discourse/components/workflow-step-option-list-editor.gjs
similarity index 98%
rename from assets/javascripts/discourse/admin/components/workflow-step-option-list-editor.gjs
rename to admin/assets/javascripts/discourse/components/workflow-step-option-list-editor.gjs
index f1fe635..a45d279 100644
--- a/assets/javascripts/discourse/admin/components/workflow-step-option-list-editor.gjs
+++ b/admin/assets/javascripts/discourse/components/workflow-step-option-list-editor.gjs
@@ -10,17 +10,21 @@ import DButton from "discourse/components/d-button";
 import DPageSubheader from "discourse/components/d-page-subheader";
 import concatClass from "discourse/helpers/concat-class";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import { bind } from "discourse-common/utils/decorators";
+import { bind } from "discourse/lib/decorators";
 import { i18n } from "discourse-i18n";
 import WorkflowLinkButton from "./workflow-link-button";
 import WorkflowStepOptionEditor from "./workflow-step-option-editor";
 
 export default class WorkflowStepOptionsListEditor extends Component {
   @service store;
-  @tracked currentWorkflowStepOption = this.args.currentWorkflowStepOption;
+
   @tracked workflowStepOptions = [];
   @tracked workflowStepOptionsPresent = false;
 
+  get currentWorkflowStepOption() {
+    return this.args.currentWorkflowStepOption;
+  }
+
   get newStepOption() {
     return this.store.createRecord("workflow-step-option", {
       workflow_step_id: this.args.workflowStep.id,
diff --git a/admin/assets/javascripts/discourse/components/workflow-visual-editor.gjs b/admin/assets/javascripts/discourse/components/workflow-visual-editor.gjs
new file mode 100644
index 0000000..a6780e1
--- /dev/null
+++ b/admin/assets/javascripts/discourse/components/workflow-visual-editor.gjs
@@ -0,0 +1,2549 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { Input } from "@ember/component";
+import { fn } from "@ember/helper";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import didUpdate from "@ember/render-modifiers/modifiers/did-update";
+import { service } from "@ember/service";
+import { trustHTML } from "@ember/template";
+import DButton from "discourse/components/d-button";
+import { ajax } from "discourse/lib/ajax";
+import { popupAjaxError } from "discourse/lib/ajax-error";
+import { bind } from "discourse/lib/decorators";
+import CategoryChooser from "discourse/select-kit/components/category-chooser";
+import { i18n } from "discourse-i18n";
+
+export default class WorkflowVisualEditor extends Component {
+  @service dialog;
+  @service router;
+
+  @tracked workflowSteps = [];
+  @tracked workflowOptions = [];
+  @tracked workflowCategories = [];
+  @tracked edgeLayouts = [];
+  @tracked previewPath = null;
+  @tracked draggedStepId = null;
+  @tracked draggedOptionId = null;
+  @tracked linkSourceStepId = null;
+  @tracked connectorDragMode = null;
+  @tracked connectorSourceStepId = null;
+  @tracked connectorSourceSide = null;
+  @tracked connectorTargetStepId = null;
+  @tracked connectorTargetSide = null;
+  @tracked newStepName = "";
+  @tracked newStepCategoryId = null;
+  @tracked isLoading = false;
+  boardElement = null;
+
+  get sortedSteps() {
+    return [...this.workflowSteps].sort((a, b) => {
+      return (a.position || 0) - (b.position || 0);
+    });
+  }
+
+  get lanes() {
+    const lanesById = new Map(
+      this.workflowCategories.map((category) => [
+        category.id,
+        {
+          ...category,
+          steps: [],
+        },
+      ])
+    );
+
+    for (const step of this.sortedSteps) {
+      const category = step.category;
+      const categoryId = step.category_id || category?.id;
+
+      if (!categoryId) {
+        continue;
+      }
+
+      if (lanesById.has(categoryId)) {
+        const lane = lanesById.get(categoryId);
+        lane.name = category?.name || lane.name;
+        lane.color = category?.color || lane.color;
+      } else {
+        lanesById.set(categoryId, {
+          id: categoryId,
+          name:
+            category?.name ||
+            i18n("admin.discourse_workflow.workflows.visual.unknown_category"),
+          color: category?.color,
+          steps: [],
+        });
+      }
+
+      lanesById.get(categoryId).steps.push(step);
+    }
+
+    return [...lanesById.values()];
+  }
+
+  get hasSteps() {
+    return this.workflowSteps.length > 0;
+  }
+
+  get connectorSides() {
+    return ["top", "right", "bottom", "left"];
+  }
+
+  get defaultWorkflowOptionId() {
+    return this.workflowOptions[0]?.id;
+  }
+
+  get workflowEdges() {
+    return this.sortedSteps.flatMap((step) => {
+      return this.stepOptions(step)
+        .filter((stepOption) => {
+          return this.workflowSteps.some(
+            (targetStep) => targetStep.id === stepOption.target_step_id
+          );
+        })
+        .map((stepOption) => {
+          return {
+            source_step_id: step.id,
+            target_step_id: stepOption.target_step_id,
+            step_option: stepOption,
+          };
+        });
+    });
+  }
+
+  get positionSlots() {
+    return Array.from({ length: this.nextStepPosition }, (_, index) => {
+      return index + 1;
+    });
+  }
+
+  get nextStepPosition() {
+    return (
+      Math.max(0, ...this.workflowSteps.map((step) => step.position || 0)) + 1
+    );
+  }
+
+  @bind
+  stepOptions(step) {
+    return [...(step.workflow_step_options || [])].sort((a, b) => {
+      return (a.position || 0) - (b.position || 0);
+    });
+  }
+
+  @bind
+  workflowOptionLabel(workflowOptionId) {
+    const workflowOption = this.workflowOptions.find(
+      (option) => option.id === workflowOptionId
+    );
+
+    if (!workflowOption) {
+      return i18n(
+        "admin.discourse_workflow.workflows.steps.options.select_an_option"
+      );
+    }
+
+    return i18n(
+      `admin.discourse_workflow.workflows.steps.options.actions.${workflowOption.slug}`,
+      { defaultValue: workflowOption.name }
+    );
+  }
+
+  @bind
+  isWorkflowOptionSelected(stepOption, workflowOption) {
+    return stepOption.workflow_option_id === workflowOption.id;
+  }
+
+  @bind
+  stepName(stepId) {
+    return this.workflowSteps.find((step) => step.id === stepId)?.name;
+  }
+
+  @bind
+  stepsForLanePosition(lane, position) {
+    return lane.steps.filter((step) => step.position === position);
+  }
+
+  @bind
+  laneStyle(lane) {
+    const color = this.safeHexColor(lane.color);
+
+    // Keep this helper hex-only because the result is interpolated into trustHTML.
+    return color ? trustHTML(`border-color: ${color};`) : null;
+  }
+
+  @bind
+  connectorHandleClass(step, side) {
+    const classes = [
+      "workflow-visual-editor__connector-handle",
+      `workflow-visual-editor__connector-handle--${side}`,
+    ];
+
+    if (this.edgeForHandle(step, side)) {
+      classes.push("workflow-visual-editor__connector-handle--connected");
+    }
+
+    if (this.connectorHandleSelected(step, side)) {
+      classes.push("workflow-visual-editor__connector-handle--selected");
+    }
+
+    return classes.join(" ");
+  }
+
+  @bind
+  connectorHandleLabel(step, side) {
+    return i18n(
+      `admin.discourse_workflow.workflows.visual.connector_handles.${side}`,
+      {
+        step: step.name,
+      }
+    );
+  }
+
+  edgeForHandle(step, side) {
+    return this.edgeLayouts.find((edge) => {
+      return (
+        (edge.source_step_id === step.id && edge.source_side === side) ||
+        (edge.target_step_id === step.id && edge.target_side === side)
+      );
+    });
+  }
+
+  edgeForTargetHandle(step, side) {
+    return this.edgeLayouts.find((edge) => {
+      return edge.target_step_id === step.id && edge.target_side === side;
+    });
+  }
+
+  edgeForSourceHandle(step, side) {
+    return this.edgeLayouts.find((edge) => {
+      return edge.source_step_id === step.id && edge.source_side === side;
+    });
+  }
+
+  @bind
+  connectorHandleSelected(step, side) {
+    return (
+      this.connectorDragMode &&
+      ((this.connectorDragMode === "retarget-source" &&
+        this.connectorSourceStepId === step.id &&
+        this.connectorSourceSide === side) ||
+        (this.connectorDragMode !== "retarget-source" &&
+          this.connectorTargetStepId === step.id &&
+          this.connectorTargetSide === side) ||
+        (this.connectorDragMode === "create" &&
+          this.connectorSourceStepId === step.id &&
+          this.connectorSourceSide === side))
+    );
+  }
+
+  mergeWorkflowCategories(workflowSteps, allCategories = []) {
+    const categoriesById = new Map();
+    const allCategoriesById = new Map(
+      allCategories.map((category) => [category.id, category])
+    );
+    const workflowParentCategoryIds = new Set();
+
+    for (const step of workflowSteps) {
+      const category = step.category || allCategoriesById.get(step.category_id);
+      const categoryId = step.category_id || category?.id;
+
+      if (!categoryId) {
+        continue;
+      }
+
+      if (category?.parent_category_id) {
+        workflowParentCategoryIds.add(category.parent_category_id);
+      } else {
+        workflowParentCategoryIds.add(categoryId);
+      }
+
+      categoriesById.set(categoryId, {
+        id: categoryId,
+        name:
+          category?.name ||
+          allCategoriesById.get(categoryId)?.name ||
+          i18n("admin.discourse_workflow.workflows.visual.unknown_category"),
+        color: category?.color || allCategoriesById.get(categoryId)?.color,
+        parent_category_id: category?.parent_category_id,
+      });
+    }
+
+    for (const category of allCategories) {
+      if (workflowParentCategoryIds.has(category.parent_category_id)) {
+        categoriesById.set(category.id, {
+          id: category.id,
+          name: category.name,
+          color: category.color,
+          parent_category_id: category.parent_category_id,
+        });
+      }
+    }
+
+    this.workflowCategories = [...categoriesById.values()];
+  }
+
+  updateStep(step, attributes) {
+    return ajax(
+      `/admin/plugins/discourse-workflow/workflow_steps/${step.id}.json`,
+      {
+        type: "PUT",
+        data: {
+          workflow_step: {
+            workflow_id: step.workflow_id,
+            position: step.position,
+            name: step.name,
+            description: step.description,
+            category_id: step.category_id,
+            overdue_days: step.overdue_days,
+            ai_enabled: step.ai_enabled,
+            ai_prompt: step.ai_prompt,
+            ...attributes,
+          },
+        },
+      }
+    );
+  }
+
+  reorderStepPosition(step, attributes) {
+    return ajax(
+      `/admin/plugins/discourse-workflow/workflow_steps/${step.id}/reorder.json`,
+      {
+        type: "PUT",
+        data: {
+          workflow_step: attributes,
+        },
+      }
+    );
+  }
+
+  @action
+  confirmDeleteStep(step) {
+    if (this.args.disabled) {
+      return;
+    }
+
+    return this.dialog.confirm({
+      message: i18n(
+        "admin.discourse_workflow.workflows.visual.confirm_delete_step"
+      ),
+      confirmButtonClass: "btn-danger",
+      confirmButtonLabel:
+        "admin.discourse_workflow.workflows.visual.delete_step",
+      didConfirm: async () => {
+        try {
+          await ajax(
+            `/admin/plugins/discourse-workflow/workflow_steps/${step.id}.json`,
+            { type: "DELETE" }
+          );
+          await this.reloadGraphInPlace();
+        } catch (err) {
+          popupAjaxError(err);
+        }
+      },
+    });
+  }
+
+  updateStepOption(stepOption, attributes) {
+    return ajax(
+      `/admin/plugins/discourse-workflow/workflow_step_options/${stepOption.id}.json`,
+      {
+        type: "PUT",
+        data: {
+          workflow_step_option: {
+            position: stepOption.position,
+            workflow_step_id: stepOption.workflow_step_id,
+            workflow_option_id: stepOption.workflow_option_id,
+            target_step_id: stepOption.target_step_id,
+            ...attributes,
+          },
+        },
+      }
+    );
+  }
+
+  @action
+  confirmDeleteStepOption(stepOption) {
+    if (this.args.disabled) {
+      return;
+    }
+
+    return this.dialog.confirm({
+      message: i18n(
+        "admin.discourse_workflow.workflows.visual.confirm_delete_connector"
+      ),
+      confirmButtonClass: "btn-danger",
+      confirmButtonLabel:
+        "admin.discourse_workflow.workflows.visual.delete_connector",
+      didConfirm: async () => {
+        try {
+          await ajax(
+            `/admin/plugins/discourse-workflow/workflow_step_options/${stepOption.id}.json`,
+            { type: "DELETE" }
+          );
+          await this.reloadGraphInPlace();
+        } catch (err) {
+          popupAjaxError(err);
+        }
+      },
+    });
+  }
+
+  @action
+  async loadGraph(options = {}) {
+    if (!this.args.workflow?.id) {
+      return;
+    }
+
+    this.isLoading = true;
+
+    try {
+      const shouldLoadOptions =
+        options.reloadOptions === true || this.workflowOptions.length === 0;
+      const workflowStepsRequest = ajax(
+        `/admin/plugins/discourse-workflow/workflows/${this.args.workflow.id}/workflow_steps.json`
+      );
+      const workflowOptionsRequest = shouldLoadOptions
+        ? ajax("/admin/plugins/discourse-workflow/workflow_options.json")
+        : Promise.resolve(null);
+      const [workflowStepsResult, workflowOptionsResult] = await Promise.all([
+        workflowStepsRequest,
+        workflowOptionsRequest,
+      ]);
+
+      this.workflowSteps = workflowStepsResult.workflow_steps || [];
+      if (workflowOptionsResult) {
+        this.workflowOptions = workflowOptionsResult.workflow_options || [];
+      }
+      this.mergeWorkflowCategories(
+        this.workflowSteps,
+        workflowStepsResult.workflow_categories || []
+      );
+      this.scheduleEdgeLayout();
+    } catch (err) {
+      popupAjaxError(err);
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  captureScrollPosition() {
+    if (typeof window === "undefined") {
+      return null;
+    }
+
+    return {
+      x: window.scrollX,
+      y: window.scrollY,
+    };
+  }
+
+  restoreScrollPosition(scrollPosition) {
+    if (!scrollPosition || typeof window === "undefined") {
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      window.scrollTo(scrollPosition.x, scrollPosition.y);
+      requestAnimationFrame(() => {
+        window.scrollTo(scrollPosition.x, scrollPosition.y);
+      });
+    });
+  }
+
+  async reloadGraphInPlace() {
+    const scrollPosition = this.captureScrollPosition();
+
+    await this.loadGraph();
+    this.restoreScrollPosition(scrollPosition);
+  }
+
+  @action
+  captureBoard(element) {
+    this.boardElement = element;
+    this.scheduleEdgeLayout();
+  }
+
+  @action
+  scheduleEdgeLayout() {
+    requestAnimationFrame(() => this.updateEdgeLayouts());
+  }
+
+  laneStackBounds(boardRect) {
+    const laneElements = this.boardElement.querySelectorAll(
+      ".workflow-visual-editor__lane"
+    );
+
+    if (!laneElements.length) {
+      return null;
+    }
+
+    const bounds = Array.from(laneElements).map((lane) => {
+      const rect = lane.getBoundingClientRect();
+      const headerRect = lane
+        .querySelector(".workflow-visual-editor__lane-header")
+        ?.getBoundingClientRect();
+      const contentRect = lane
+        .querySelector(".workflow-visual-editor__lane-steps")
+        ?.getBoundingClientRect();
+
+      return {
+        left: rect.left - boardRect.left,
+        right: rect.right - boardRect.left,
+        top: rect.top - boardRect.top,
+        bottom: rect.bottom - boardRect.top,
+        contentLeft: (contentRect || rect).left - boardRect.left,
+        contentRight: (contentRect || rect).right - boardRect.left,
+        labelTop: (headerRect || rect).top - boardRect.top,
+        labelBottom: (headerRect || rect).bottom - boardRect.top,
+      };
+    });
+
+    return {
+      left: Math.min(...bounds.map((bound) => bound.left)),
+      right: Math.max(...bounds.map((bound) => bound.right)),
+      top: Math.min(...bounds.map((bound) => bound.top)),
+      bottom: Math.max(...bounds.map((bound) => bound.bottom)),
+      lanes: bounds,
+    };
+  }
+
+  updateEdgeLayouts() {
+    if (!this.boardElement) {
+      return;
+    }
+
+    const boardRect = this.boardElement.getBoundingClientRect();
+    const stepRectById = new Map();
+    const laneStackBounds = this.laneStackBounds(boardRect);
+
+    for (const step of this.workflowSteps) {
+      const element = this.boardElement.querySelector(
+        `[data-workflow-step-id="${step.id}"]`
+      );
+
+      if (!element) {
+        continue;
+      }
+
+      const rect = element.getBoundingClientRect();
+      stepRectById.set(step.id, {
+        left: rect.left - boardRect.left,
+        right: rect.right - boardRect.left,
+        top: rect.top - boardRect.top,
+        bottom: rect.bottom - boardRect.top,
+        width: rect.width,
+        height: rect.height,
+        centerX: rect.left - boardRect.left + rect.width / 2,
+        centerY: rect.top - boardRect.top + rect.height / 2,
+      });
+    }
+
+    const usedEndpoints = new Set();
+    const routedSegments = [];
+    const routedLabels = [];
+    const routedArrowheads = [];
+
+    this.edgeLayouts = this.workflowEdges
+      .map((edge, index) => {
+        const sourceRect = stepRectById.get(edge.source_step_id);
+        const targetRect = stepRectById.get(edge.target_step_id);
+        const sourceStep = this.workflowSteps.find(
+          (step) => step.id === edge.source_step_id
+        );
+        const targetStep = this.workflowSteps.find(
+          (step) => step.id === edge.target_step_id
+        );
+
+        if (!sourceRect || !targetRect || !sourceStep || !targetStep) {
+          return null;
+        }
+
+        const route = this.edgeRoute({
+          allRects: stepRectById,
+          index,
+          sourceRect,
+          targetRect,
+          sourceStep,
+          targetStep,
+          usedEndpoints,
+          routedSegments,
+          routedLabels,
+          routedArrowheads,
+          laneStackBounds,
+        });
+
+        usedEndpoints.add(
+          this.endpointKey(edge.source_step_id, route.source_side)
+        );
+        usedEndpoints.add(
+          this.endpointKey(edge.target_step_id, route.target_side)
+        );
+        routedSegments.push(...route.segments);
+        routedLabels.push({ x: route.label_x, y: route.label_y });
+        routedArrowheads.push({ x: route.arrowhead_x, y: route.arrowhead_y });
+
+        return {
+          ...edge,
+          path: route.path,
+          label_x: route.label_x,
+          label_y: route.label_y,
+          source_side: route.source_side,
+          target_side: route.target_side,
+        };
+      })
+      .filter(Boolean);
+  }
+
+  edgeRoute({
+    allRects,
+    index,
+    sourceRect,
+    targetRect,
+    sourceStep,
+    targetStep,
+    usedEndpoints,
+    routedSegments,
+    routedLabels,
+    routedArrowheads,
+    laneStackBounds,
+  }) {
+    const obstacleRects = this.obstacleRects(
+      allRects,
+      sourceStep.id,
+      targetStep.id
+    );
+    const labelObstacleRects = [...allRects.values()];
+    const routes = [];
+
+    for (const [sourceSide, targetSide] of this.edgeSidePairs(
+      sourceStep,
+      targetStep
+    )) {
+      if (
+        usedEndpoints.has(this.endpointKey(sourceStep.id, sourceSide)) ||
+        usedEndpoints.has(this.endpointKey(targetStep.id, targetSide))
+      ) {
+        continue;
+      }
+
+      const route = this.routeBetweenHandles({
+        index,
+        sourceRect,
+        sourceSide,
+        targetRect,
+        targetSide,
+        obstacleRects,
+        endpointObstacleRects: [sourceRect, targetRect],
+        labelObstacleRects,
+        routedSegments,
+        routedLabels,
+        routedArrowheads,
+        laneStackBounds,
+        routeLengthMultiplier: this.routeLengthMultiplier(
+          sourceStep,
+          targetStep
+        ),
+        allowLaneHeaderRouting:
+          (targetStep.position || 0) < (sourceStep.position || 0),
+        sidePenalty: this.edgeSidePairPenalty(
+          sourceStep,
+          targetStep,
+          sourceSide
+        ),
+      });
+
+      routes.push(route);
+    }
+
+    const viableRoutes = routes
+      .filter((route) => !route.collided && route.score !== Infinity)
+      .sort((a, b) => a.score - b.score);
+
+    if (viableRoutes.length) {
+      return viableRoutes[0];
+    }
+
+    const fallbackRoutes = routes
+      .filter((route) => route.score !== Infinity)
+      .sort((a, b) => a.score - b.score);
+
+    return (
+      fallbackRoutes[0] ||
+      routes[0] ||
+      this.defaultEdgeRoute({
+        index,
+        sourceRect,
+        targetRect,
+        obstacleRects,
+        labelObstacleRects,
+        routedSegments,
+        routedLabels,
+        routedArrowheads,
+        laneStackBounds,
+      })
+    );
+  }
+
+  defaultEdgeRoute({
+    index,
+    sourceRect,
+    targetRect,
+    obstacleRects,
+    labelObstacleRects,
+    routedSegments,
+    routedLabels,
+    routedArrowheads,
+    laneStackBounds,
+  }) {
+    return this.routeBetweenHandles({
+      index,
+      sourceRect,
+      sourceSide: "right",
+      targetRect,
+      targetSide: "left",
+      obstacleRects,
+      endpointObstacleRects: [sourceRect, targetRect],
+      labelObstacleRects,
+      routedSegments,
+      routedLabels,
+      routedArrowheads,
+      laneStackBounds,
+      sidePenalty: 0,
+    });
+  }
+
+  edgeSidePairs(sourceStep, targetStep) {
+    const sourcePosition = sourceStep.position || 0;
+    const targetPosition = targetStep.position || 0;
+
+    if (targetPosition > sourcePosition) {
+      return this.allSidePairs(
+        ["right", "bottom", "top", "left"],
+        ["left", "top", "bottom", "right"]
+      );
+    }
+
+    if (targetPosition < sourcePosition) {
+      return this.allSidePairs(
+        ["top", "left", "bottom", "right"],
+        ["top", "right", "bottom", "left"]
+      );
+    }
+
+    return this.allSidePairs(
+      ["bottom", "top", "right", "left"],
+      ["top", "bottom", "left", "right"]
+    );
+  }
+
+  allSidePairs(sourceSides, targetSides) {
+    return sourceSides.flatMap((sourceSide) => {
+      return targetSides.map((targetSide) => [sourceSide, targetSide]);
+    });
+  }
+
+  edgeSidePairPenalty(sourceStep, targetStep, sourceSide) {
+    if ((targetStep.position || 0) <= (sourceStep.position || 0)) {
+      return 0;
+    }
+
+    if (sourceSide === "right") {
+      return 0;
+    }
+
+    if (sourceSide === "bottom" || sourceSide === "top") {
+      return 350;
+    }
+
+    return 1200;
+  }
+
+  routeLengthMultiplier(sourceStep, targetStep) {
+    if ((targetStep.position || 0) < (sourceStep.position || 0)) {
+      return 0.15;
+    }
+
+    return 1;
+  }
+
+  routeBetweenHandles({
+    index,
+    sourceRect,
+    sourceSide,
+    targetRect,
+    targetSide,
+    obstacleRects,
+    endpointObstacleRects = [],
+    labelObstacleRects = obstacleRects,
+    routedSegments = [],
+    routedLabels = [],
+    routedArrowheads = [],
+    laneStackBounds = null,
+    routeLengthMultiplier = 1,
+    allowLaneHeaderRouting = false,
+    sidePenalty = 0,
+  }) {
+    const source = this.connectorPoint(sourceRect, sourceSide);
+    const target = this.connectorPoint(targetRect, targetSide);
+    const route = this.routePoints({
+      index,
+      source,
+      sourceSide,
+      target,
+      targetSide,
+      obstacleRects,
+      endpointObstacleRects,
+      labelObstacleRects,
+      routedSegments,
+      routedLabels,
+      routedArrowheads,
+      laneStackBounds,
+      routeLengthMultiplier,
+      allowLaneHeaderRouting,
+      sidePenalty,
+    });
+
+    return {
+      ...route,
+      source_side: sourceSide,
+      target_side: targetSide,
+    };
+  }
+
+  routePoints({
+    index,
+    source,
+    sourceSide,
+    target,
+    targetSide,
+    obstacleRects,
+    endpointObstacleRects = [],
+    labelObstacleRects = obstacleRects,
+    routedSegments = [],
+    routedLabels = [],
+    routedArrowheads = [],
+    laneStackBounds = null,
+    routeLengthMultiplier = 1,
+    allowLaneHeaderRouting = false,
+    sidePenalty = 0,
+  }) {
+    const escapeDistance = 26 + this.routeOffset(index, 8);
+    const sourceEscape = this.offsetPoint(source, sourceSide, escapeDistance);
+    const targetEscape = targetSide
+      ? this.offsetPoint(target, targetSide, escapeDistance)
+      : target;
+    const baseMidX = (sourceEscape.x + targetEscape.x) / 2;
+    const baseMidY = (sourceEscape.y + targetEscape.y) / 2;
+    const outsideX =
+      Math.max(source.x, target.x, sourceEscape.x, targetEscape.x) +
+      64 +
+      index * 18;
+    const outsideY =
+      Math.min(source.y, target.y, sourceEscape.y, targetEscape.y) -
+      40 -
+      index * 18;
+    const outsideBottomY =
+      Math.max(source.y, target.y, sourceEscape.y, targetEscape.y) +
+      40 +
+      index * 18;
+    const candidates = [
+      ...this.routingCandidates(baseMidX, 48).map((midX) =>
+        this.compactPoints([
+          source,
+          sourceEscape,
+          { x: midX, y: sourceEscape.y },
+          { x: midX, y: targetEscape.y },
+          targetEscape,
+          target,
+        ])
+      ),
+      ...this.routingCandidates(baseMidY, 36).map((midY) =>
+        this.compactPoints([
+          source,
+          sourceEscape,
+          { x: sourceEscape.x, y: midY },
+          { x: targetEscape.x, y: midY },
+          targetEscape,
+          target,
+        ])
+      ),
+      ...(allowLaneHeaderRouting
+        ? this.laneHeaderRoutingCandidates(
+            laneStackBounds,
+            sourceEscape,
+            targetEscape
+          ).map((midY) =>
+            this.headerRoutePoints({
+              source,
+              sourceSide,
+              sourceEscape,
+              target,
+              targetSide,
+              targetEscape,
+              midY,
+              index,
+            })
+          )
+        : []),
+      this.compactPoints([
+        source,
+        sourceEscape,
+        { x: outsideX, y: sourceEscape.y },
+        { x: outsideX, y: targetEscape.y },
+        targetEscape,
+        target,
+      ]),
+      this.compactPoints([
+        source,
+        sourceEscape,
+        { x: sourceEscape.x, y: outsideY },
+        { x: targetEscape.x, y: outsideY },
+        targetEscape,
+        target,
+      ]),
+      this.compactPoints([
+        source,
+        sourceEscape,
+        { x: sourceEscape.x, y: outsideBottomY },
+        { x: targetEscape.x, y: outsideBottomY },
+        targetEscape,
+        target,
+      ]),
+    ];
+    const scoredCandidates = candidates
+      .flatMap((points) => {
+        const segments = this.pointsToSegments(points);
+
+        return this.labelCandidatesForSegments(segments, laneStackBounds).map(
+          (labelCandidate) => ({
+            points,
+            segments,
+            labelPoint: labelCandidate.point,
+            score:
+              this.routeCandidateScore({
+                segments,
+                labelPoint: labelCandidate.point,
+                obstacleRects,
+                endpointObstacleRects,
+                labelObstacleRects,
+                routedSegments,
+                routedLabels,
+                arrowheadPoints: [...routedArrowheads, target],
+                laneStackBounds,
+                routeLengthMultiplier,
+                sidePenalty,
+              }) + labelCandidate.penalty,
+          })
+        );
+      })
+      .filter((candidate) => candidate.score !== Infinity)
+      .sort((a, b) => a.score - b.score);
+    const selectedCandidate = scoredCandidates[0] || {
+      points: candidates[0],
+      segments: this.pointsToSegments(candidates[0]),
+      labelPoint: this.labelCandidatesForSegments(
+        this.pointsToSegments(candidates[0]),
+        laneStackBounds
+      )[0].point,
+      score: Infinity,
+    };
+
+    return {
+      path: this.pointsToPath(selectedCandidate.points),
+      label_x: selectedCandidate.labelPoint.x,
+      label_y: selectedCandidate.labelPoint.y,
+      arrowhead_x: target.x,
+      arrowhead_y: target.y,
+      collided: this.pathCollides(selectedCandidate.segments, obstacleRects),
+      segments: selectedCandidate.segments,
+      score: selectedCandidate.score,
+    };
+  }
+
+  connectorPoint(rect, side) {
+    if (side === "top") {
+      return { x: rect.centerX, y: rect.top };
+    }
+
+    if (side === "right") {
+      return { x: rect.right, y: rect.centerY };
+    }
+
+    if (side === "bottom") {
+      return { x: rect.centerX, y: rect.bottom };
+    }
+
+    return { x: rect.left, y: rect.centerY };
+  }
+
+  offsetPoint(point, side, distance) {
+    if (!side) {
+      return point;
+    }
+
+    if (side === "top") {
+      return { x: point.x, y: point.y - distance };
+    }
+
+    if (side === "right") {
+      return { x: point.x + distance, y: point.y };
+    }
+
+    if (side === "bottom") {
+      return { x: point.x, y: point.y + distance };
+    }
+
+    return { x: point.x - distance, y: point.y };
+  }
+
+  pointsToSegments(points) {
+    return points.slice(1).map((point, index) => {
+      const previous = points[index];
+
+      return {
+        x1: previous.x,
+        y1: previous.y,
+        x2: point.x,
+        y2: point.y,
+      };
+    });
+  }
+
+  routeCandidateScore({
+    segments,
+    labelPoint,
+    obstacleRects,
+    endpointObstacleRects = [],
+    labelObstacleRects,
+    routedSegments,
+    routedLabels,
+    arrowheadPoints = [],
+    laneStackBounds,
+    routeLengthMultiplier = 1,
+    sidePenalty,
+  }) {
+    if (this.routeDoublesBack(segments)) {
+      return Infinity;
+    }
+
+    if (this.pathCollides(segments, obstacleRects)) {
+      return Infinity;
+    }
+
+    if (
+      this.pathCollides(
+        this.nonEndpointSegments(segments),
+        endpointObstacleRects,
+        0
+      )
+    ) {
+      return Infinity;
+    }
+
+    const overlapCount = this.segmentOverlapCount(segments, routedSegments);
+
+    if (overlapCount > 0) {
+      return Infinity;
+    }
+
+    return (
+      this.routeLength(segments) * routeLengthMultiplier +
+      this.shortSegmentPenalty(segments) +
+      this.routeTurnCount(segments) * 90 +
+      this.segmentCrossingCount(segments, routedSegments) * 2000 +
+      this.horizontalSegmentLabelPenalty(segments, routedLabels) +
+      this.laneHeaderTravelPenalty(segments, laneStackBounds) +
+      this.labelPenalty({
+        labelPoint,
+        routedLabels,
+        labelObstacleRects,
+        arrowheadPoints,
+        routedSegments,
+        laneStackBounds,
+      }) +
+      this.laneBorderTravelPenalty(segments, laneStackBounds) +
+      this.laneGapTravelPenalty(segments, laneStackBounds) +
+      this.laneEscapePenalty(segments, laneStackBounds) +
+      sidePenalty
+    );
+  }
+
+  labelPenalty({
+    labelPoint,
+    routedLabels,
+    labelObstacleRects,
+    arrowheadPoints,
+    routedSegments,
+    laneStackBounds,
+  }) {
+    return (
+      this.labelCollisionPenalty(labelPoint, routedLabels) +
+      this.labelObstaclePenalty(labelPoint, labelObstacleRects) +
+      this.labelArrowheadPenalty(labelPoint, arrowheadPoints) +
+      this.labelSegmentPenalty(labelPoint, routedSegments) +
+      this.labelLaneBoundaryPenalty(labelPoint, laneStackBounds)
+    );
+  }
+
+  laneBorderTravelPenalty(segments, laneStackBounds) {
+    if (!laneStackBounds?.lanes?.length) {
+      return 0;
+    }
+
+    return segments.reduce((penalty, segment) => {
+      if (segment.y1 !== segment.y2) {
+        return penalty;
+      }
+
+      const segmentLeft = Math.min(segment.x1, segment.x2);
+      const segmentRight = Math.max(segment.x1, segment.x2);
+
+      return (
+        penalty +
+        laneStackBounds.lanes.reduce((lanePenalty, lane) => {
+          const travelsAlongLaneEdge =
+            Math.abs(segment.y1 - lane.top) <= 2 ||
+            Math.abs(segment.y1 - lane.bottom) <= 2;
+
+          if (!travelsAlongLaneEdge) {
+            return lanePenalty;
+          }
+
+          const laneLeft = lane.contentLeft ?? lane.left;
+          const laneRight = lane.contentRight ?? lane.right;
+          const overlap =
+            Math.min(segmentRight, laneRight) - Math.max(segmentLeft, laneLeft);
+
+          return overlap > 0 ? lanePenalty + overlap * 80 : lanePenalty;
+        }, 0)
+      );
+    }, 0);
+  }
+
+  laneGapTravelPenalty(segments, laneStackBounds) {
+    if (!laneStackBounds?.lanes?.length) {
+      return 0;
+    }
+
+    const lanes = [...laneStackBounds.lanes].sort((a, b) => a.top - b.top);
+
+    return segments.reduce((penalty, segment) => {
+      if (segment.y1 !== segment.y2) {
+        return penalty;
+      }
+
+      const segmentLeft = Math.min(segment.x1, segment.x2);
+      const segmentRight = Math.max(segment.x1, segment.x2);
+
+      return (
+        penalty +
+        lanes.slice(1).reduce((gapPenalty, lane, index) => {
+          const previousLane = lanes[index];
+          const gapTop = previousLane.bottom;
+          const gapBottom = lane.top;
+
+          if (segment.y1 <= gapTop || segment.y1 >= gapBottom) {
+            return gapPenalty;
+          }
+
+          const previousLaneLeft =
+            previousLane.contentLeft ?? previousLane.left;
+          const previousLaneRight =
+            previousLane.contentRight ?? previousLane.right;
+          const laneLeft = lane.contentLeft ?? lane.left;
+          const laneRight = lane.contentRight ?? lane.right;
+          const overlap =
+            Math.min(segmentRight, previousLaneRight, laneRight) -
+            Math.max(segmentLeft, previousLaneLeft, laneLeft);
+
+          return overlap > 0 ? gapPenalty + overlap * 140 : gapPenalty;
+        }, 0)
+      );
+    }, 0);
+  }
+
+  laneHeaderTravelPenalty(segments, laneStackBounds) {
+    if (!laneStackBounds?.lanes?.length) {
+      return 0;
+    }
+
+    return segments.reduce((penalty, segment) => {
+      if (segment.y1 !== segment.y2) {
+        return penalty;
+      }
+
+      const segmentLeft = Math.min(segment.x1, segment.x2);
+      const segmentRight = Math.max(segment.x1, segment.x2);
+
+      return (
+        penalty +
+        laneStackBounds.lanes.reduce((lanePenalty, lane) => {
+          if (
+            !Number.isFinite(lane.labelTop) ||
+            !Number.isFinite(lane.labelBottom) ||
+            segment.y1 < lane.labelTop ||
+            segment.y1 > lane.labelBottom
+          ) {
+            return lanePenalty;
+          }
+
+          const laneLeft = lane.contentLeft ?? lane.left;
+          const laneRight = lane.contentRight ?? lane.right;
+          const overlap =
+            Math.min(segmentRight, laneRight) - Math.max(segmentLeft, laneLeft);
+
+          return overlap > 0 ? lanePenalty + overlap * 45 : lanePenalty;
+        }, 0)
+      );
+    }, 0);
+  }
+
+  laneEscapePenalty(segments, laneStackBounds) {
+    if (!laneStackBounds) {
+      return 0;
+    }
+
+    const connectorGutter = 12;
+    const upperLimit = laneStackBounds.top - connectorGutter;
+    const lowerLimit = laneStackBounds.bottom + connectorGutter;
+    const hasHorizontalLimits =
+      Number.isFinite(laneStackBounds.left) &&
+      Number.isFinite(laneStackBounds.right);
+    const leftLimit = hasHorizontalLimits
+      ? laneStackBounds.left - connectorGutter
+      : null;
+    const rightLimit = hasHorizontalLimits
+      ? laneStackBounds.right + connectorGutter
+      : null;
+
+    return segments.reduce((penalty, segment) => {
+      const escapedAbove =
+        Math.max(0, upperLimit - segment.y1) +
+        Math.max(0, upperLimit - segment.y2);
+      const escapedBelow =
+        Math.max(0, segment.y1 - lowerLimit) +
+        Math.max(0, segment.y2 - lowerLimit);
+      const escapedLeft = hasHorizontalLimits
+        ? Math.max(0, leftLimit - segment.x1) +
+          Math.max(0, leftLimit - segment.x2)
+        : 0;
+      const escapedRight = hasHorizontalLimits
+        ? Math.max(0, segment.x1 - rightLimit) +
+          Math.max(0, segment.x2 - rightLimit)
+        : 0;
+
+      return (
+        penalty +
+        (escapedAbove + escapedBelow + escapedLeft + escapedRight) * 2880
+      );
+    }, 0);
+  }
+
+  optionLabelRect(labelPoint) {
+    const halfWidth = 80;
+
+    return {
+      left: labelPoint.x - halfWidth,
+      right: labelPoint.x + halfWidth,
+      top: labelPoint.y - 20,
+      bottom: labelPoint.y + 20,
+    };
+  }
+
+  labelCollisionPenalty(labelPoint, routedLabels) {
+    return routedLabels.reduce((penalty, routedLabel) => {
+      const horizontalDistance = Math.abs(labelPoint.x - routedLabel.x);
+      const verticalDistance = Math.abs(labelPoint.y - routedLabel.y);
+      const likelyHorizontalOverlap = horizontalDistance < 160;
+
+      if (likelyHorizontalOverlap && verticalDistance < 40) {
+        return Infinity;
+      }
+
+      return penalty;
+    }, 0);
+  }
+
+  labelObstaclePenalty(labelPoint, obstacleRects) {
+    const labelRect = this.optionLabelRect(labelPoint);
+
+    return obstacleRects.reduce((penalty, rect) => {
+      const overlaps =
+        Math.max(labelRect.left, rect.left) <
+          Math.min(labelRect.right, rect.right) &&
+        Math.max(labelRect.top, rect.top) <
+          Math.min(labelRect.bottom, rect.bottom);
+
+      return overlaps ? Infinity : penalty;
+    }, 0);
+  }
+
+  labelArrowheadPenalty(labelPoint, arrowheadPoints) {
+    const labelRect = this.optionLabelRect(labelPoint);
+
+    return arrowheadPoints.reduce((penalty, arrowheadPoint) => {
+      const covered =
+        arrowheadPoint.x >= labelRect.left &&
+        arrowheadPoint.x <= labelRect.right &&
+        arrowheadPoint.y >= labelRect.top &&
+        arrowheadPoint.y <= labelRect.bottom;
+
+      return covered ? Infinity : penalty;
+    }, 0);
+  }
+
+  labelSegmentPenalty(labelPoint, routedSegments) {
+    const labelRect = this.optionLabelRect(labelPoint);
+
+    return routedSegments.reduce((penalty, segment) => {
+      const segmentIntersectsLabel =
+        this.horizontalSegmentIntersectsRect(segment, labelRect) ||
+        this.verticalSegmentIntersectsRect(segment, labelRect);
+
+      return segmentIntersectsLabel && segment.y1 === segment.y2
+        ? Infinity
+        : penalty;
+    }, 0);
+  }
+
+  labelLaneBoundaryPenalty(labelPoint, laneStackBounds) {
+    if (!laneStackBounds?.lanes?.length) {
+      return 0;
+    }
+
+    const labelRect = this.optionLabelRect(labelPoint);
+
+    return laneStackBounds.lanes.reduce((penalty, lane) => {
+      const overlapsTop =
+        labelRect.top <= lane.top &&
+        labelRect.bottom >= lane.top &&
+        labelRect.right >= lane.left &&
+        labelRect.left <= lane.right;
+      const overlapsBottom =
+        labelRect.top <= lane.bottom &&
+        labelRect.bottom >= lane.bottom &&
+        labelRect.right >= lane.left &&
+        labelRect.left <= lane.right;
+      const overlapsLaneLabel =
+        labelRect.top <= lane.labelBottom &&
+        labelRect.bottom >= lane.labelTop &&
+        labelRect.right >= lane.left &&
+        labelRect.left <= lane.right;
+
+      return overlapsTop || overlapsBottom || overlapsLaneLabel
+        ? Infinity
+        : penalty;
+    }, 0);
+  }
+
+  horizontalSegmentLabelPenalty(segments, routedLabels) {
+    return segments.reduce((penalty, segment) => {
+      if (segment.y1 !== segment.y2) {
+        return penalty;
+      }
+
+      return (
+        penalty +
+        routedLabels.reduce((labelPenalty, routedLabel) => {
+          const labelRect = this.optionLabelRect(routedLabel);
+
+          return this.horizontalSegmentIntersectsRect(segment, labelRect)
+            ? Infinity
+            : labelPenalty;
+        }, 0)
+      );
+    }, 0);
+  }
+
+  horizontalSegmentIntersectsRect(segment, rect) {
+    if (segment.y1 !== segment.y2) {
+      return false;
+    }
+
+    const segmentLeft = Math.min(segment.x1, segment.x2);
+    const segmentRight = Math.max(segment.x1, segment.x2);
+
+    return (
+      segment.y1 >= rect.top &&
+      segment.y1 <= rect.bottom &&
+      Math.min(segmentRight, rect.right) > Math.max(segmentLeft, rect.left)
+    );
+  }
+
+  verticalSegmentIntersectsRect(segment, rect) {
+    if (segment.x1 !== segment.x2) {
+      return false;
+    }
+
+    const segmentTop = Math.min(segment.y1, segment.y2);
+    const segmentBottom = Math.max(segment.y1, segment.y2);
+
+    return (
+      segment.x1 >= rect.left &&
+      segment.x1 <= rect.right &&
+      Math.min(segmentBottom, rect.bottom) > Math.max(segmentTop, rect.top)
+    );
+  }
+
+  routeDoublesBack(segments) {
+    return segments.slice(1).some((segment, index) => {
+      const previous = segments[index];
+      const bothHorizontal =
+        previous.y1 === previous.y2 && segment.y1 === segment.y2;
+      const bothVertical =
+        previous.x1 === previous.x2 && segment.x1 === segment.x2;
+
+      if (bothHorizontal && previous.y1 === segment.y1) {
+        return (
+          Math.sign(previous.x2 - previous.x1) !==
+          Math.sign(segment.x2 - segment.x1)
+        );
+      }
+
+      if (bothVertical && previous.x1 === segment.x1) {
+        return (
+          Math.sign(previous.y2 - previous.y1) !==
+          Math.sign(segment.y2 - segment.y1)
+        );
+      }
+
+      return false;
+    });
+  }
+
+  routeLength(segments) {
+    return segments.reduce((total, segment) => {
+      return (
+        total +
+        Math.abs(segment.x2 - segment.x1) +
+        Math.abs(segment.y2 - segment.y1)
+      );
+    }, 0);
+  }
+
+  shortSegmentPenalty(segments) {
+    const minimumSegmentLength = 24;
+
+    return segments.reduce((penalty, segment) => {
+      const segmentLength =
+        Math.abs(segment.x2 - segment.x1) + Math.abs(segment.y2 - segment.y1);
+
+      if (segmentLength >= minimumSegmentLength) {
+        return penalty;
+      }
+
+      return penalty + (minimumSegmentLength - segmentLength) * 12;
+    }, 0);
+  }
+
+  routeTurnCount(segments) {
+    return segments.slice(1).filter((segment, index) => {
+      const previous = segments[index];
+      const previousHorizontal = previous.y1 === previous.y2;
+      const currentHorizontal = segment.y1 === segment.y2;
+
+      return previousHorizontal !== currentHorizontal;
+    }).length;
+  }
+
+  segmentOverlapCount(segments, routedSegments) {
+    return segments.reduce((count, segment) => {
+      return (
+        count +
+        routedSegments.filter((routedSegment) => {
+          return this.segmentsOverlap(segment, routedSegment);
+        }).length
+      );
+    }, 0);
+  }
+
+  segmentCrossingCount(segments, routedSegments) {
+    return segments.reduce((count, segment) => {
+      return (
+        count +
+        routedSegments.filter((routedSegment) => {
+          return this.segmentsCross(segment, routedSegment);
+        }).length
+      );
+    }, 0);
+  }
+
+  segmentsOverlap(segment, otherSegment) {
+    if (segment.y1 === segment.y2 && otherSegment.y1 === otherSegment.y2) {
+      return (
+        segment.y1 === otherSegment.y1 &&
+        this.rangesOverlap(
+          segment.x1,
+          segment.x2,
+          otherSegment.x1,
+          otherSegment.x2
+        )
+      );
+    }
+
+    if (segment.x1 === segment.x2 && otherSegment.x1 === otherSegment.x2) {
+      return (
+        segment.x1 === otherSegment.x1 &&
+        this.rangesOverlap(
+          segment.y1,
+          segment.y2,
+          otherSegment.y1,
+          otherSegment.y2
+        )
+      );
+    }
+
+    return false;
+  }
+
+  segmentsCross(segment, otherSegment) {
+    if (this.segmentsOverlap(segment, otherSegment)) {
+      return false;
+    }
+
+    const segmentHorizontal = segment.y1 === segment.y2;
+    const otherHorizontal = otherSegment.y1 === otherSegment.y2;
+
+    if (segmentHorizontal === otherHorizontal) {
+      return false;
+    }
+
+    const horizontal = segmentHorizontal ? segment : otherSegment;
+    const vertical = segmentHorizontal ? otherSegment : segment;
+
+    return (
+      this.valueBetween(vertical.x1, horizontal.x1, horizontal.x2) &&
+      this.valueBetween(horizontal.y1, vertical.y1, vertical.y2)
+    );
+  }
+
+  rangesOverlap(start, end, otherStart, otherEnd) {
+    const min = Math.min(start, end);
+    const max = Math.max(start, end);
+    const otherMin = Math.min(otherStart, otherEnd);
+    const otherMax = Math.max(otherStart, otherEnd);
+
+    return Math.max(min, otherMin) < Math.min(max, otherMax);
+  }
+
+  valueBetween(value, start, end) {
+    return value > Math.min(start, end) && value < Math.max(start, end);
+  }
+
+  laneHeaderRoutingCandidates(laneStackBounds, sourceEscape, targetEscape) {
+    if (!laneStackBounds?.lanes?.length) {
+      return [];
+    }
+
+    const routeTop = Math.min(sourceEscape.y, targetEscape.y);
+    const routeBottom = Math.max(sourceEscape.y, targetEscape.y);
+
+    return laneStackBounds.lanes
+      .map((lane) => {
+        if (
+          !Number.isFinite(lane.labelTop) ||
+          !Number.isFinite(lane.labelBottom)
+        ) {
+          return null;
+        }
+
+        const labelCenter = (lane.labelTop + lane.labelBottom) / 2;
+        return labelCenter >= routeTop && labelCenter <= routeBottom
+          ? labelCenter
+          : null;
+      })
+      .filter((candidate) => candidate !== null);
+  }
+
+  headerRoutePoints({
+    source,
+    sourceSide,
+    sourceEscape,
+    target,
+    targetSide,
+    targetEscape,
+    midY,
+    index,
+  }) {
+    const approachOffset = 34 + index * 8;
+    const direction = targetEscape.x >= sourceEscape.x ? 1 : -1;
+    const points = [source, sourceEscape];
+    let headerStartX = sourceEscape.x;
+
+    if (sourceSide === "top" || sourceSide === "bottom") {
+      headerStartX = sourceEscape.x + direction * approachOffset;
+      points.push({ x: headerStartX, y: sourceEscape.y });
+    }
+
+    points.push({ x: headerStartX, y: midY });
+
+    if (targetSide === "top" || targetSide === "bottom") {
+      const targetApproachX = targetEscape.x - direction * approachOffset;
+
+      points.push(
+        { x: targetApproachX, y: midY },
+        { x: targetApproachX, y: targetEscape.y },
+        targetEscape,
+        target
+      );
+    } else {
+      points.push({ x: targetEscape.x, y: midY }, targetEscape, target);
+    }
+
+    return this.compactPoints(points);
+  }
+
+  labelCandidatesForSegments(segments, laneStackBounds = null) {
+    const verticalSegments = segments.filter(
+      (segment) => segment.x1 === segment.x2
+    );
+    const candidateSegments = verticalSegments.length
+      ? verticalSegments
+      : segments;
+    const longestSegment = candidateSegments.reduce((longest, segment) => {
+      return this.segmentLength(segment) > this.segmentLength(longest)
+        ? segment
+        : longest;
+    }, candidateSegments[0]);
+
+    const ratioCandidates = [
+      1 / 2,
+      1 / 3,
+      2 / 3,
+      1 / 4,
+      3 / 4,
+      1 / 5,
+      4 / 5,
+      1 / 10,
+      9 / 10,
+      1 / 20,
+    ].map((ratio) => {
+      return {
+        point: {
+          x:
+            longestSegment.x1 + (longestSegment.x2 - longestSegment.x1) * ratio,
+          y:
+            longestSegment.y1 + (longestSegment.y2 - longestSegment.y1) * ratio,
+        },
+        penalty: 0,
+      };
+    });
+
+    return [
+      ...this.laneWhitespaceLabelCandidatesForSegment(
+        longestSegment,
+        laneStackBounds
+      ),
+      ...ratioCandidates,
+    ];
+  }
+
+  laneWhitespaceLabelCandidatesForSegment(segment, laneStackBounds) {
+    if (!laneStackBounds?.lanes?.length || segment.x1 !== segment.x2) {
+      return [];
+    }
+
+    const segmentTop = Math.min(segment.y1, segment.y2);
+    const segmentBottom = Math.max(segment.y1, segment.y2);
+
+    return laneStackBounds.lanes
+      .map((lane) => {
+        const contentTop = lane.labelBottom ?? lane.top;
+        const contentBottom = lane.bottom;
+        const contentCenter = (contentTop + contentBottom) / 2;
+
+        if (
+          segment.x1 < (lane.contentLeft ?? lane.left) ||
+          segment.x1 > (lane.contentRight ?? lane.right) ||
+          contentCenter < segmentTop ||
+          contentCenter > segmentBottom
+        ) {
+          return null;
+        }
+
+        return {
+          point: {
+            x: segment.x1,
+            y: contentCenter,
+          },
+          penalty: -30,
+        };
+      })
+      .filter(Boolean);
+  }
+
+  segmentLength(segment) {
+    return (
+      Math.abs(segment.x2 - segment.x1) + Math.abs(segment.y2 - segment.y1)
+    );
+  }
+
+  pointsToPath(points) {
+    const [firstPoint, ...remainingPoints] = this.compactPoints(points);
+    const commands = [`M${firstPoint.x},${firstPoint.y}`];
+    let previous = firstPoint;
+
+    for (const point of remainingPoints) {
+      if (point.x === previous.x) {
+        commands.push(`V${point.y}`);
+      } else if (point.y === previous.y) {
+        commands.push(`H${point.x}`);
+      } else {
+        commands.push(`L${point.x},${point.y}`);
+      }
+
+      previous = point;
+    }
+
+    return commands.join(" ");
+  }
+
+  compactPoints(points) {
+    return points.filter((point, index) => {
+      const previous = points[index - 1];
+      return !previous || previous.x !== point.x || previous.y !== point.y;
+    });
+  }
+
+  endpointKey(stepId, side) {
+    return `${stepId}:${side}`;
+  }
+
+  connectorEndpointInUse({ stepId, side, ignoredStepOptionId }) {
+    return this.edgeLayouts.some((edge) => {
+      return (
+        edge.step_option.id !== ignoredStepOptionId &&
+        ((edge.source_step_id === stepId && edge.source_side === side) ||
+          (edge.target_step_id === stepId && edge.target_side === side))
+      );
+    });
+  }
+
+  obstacleRects(allRects, sourceStepId, targetStepId) {
+    return [...allRects.entries()]
+      .filter(([stepId]) => {
+        return stepId !== sourceStepId && stepId !== targetStepId;
+      })
+      .map(([, rect]) => rect);
+  }
+
+  routingCandidates(baseValue, stepSize) {
+    return Array.from({ length: 40 }, (_, index) => {
+      if (index === 0) {
+        return baseValue;
+      }
+
+      const direction = index % 2 === 0 ? -1 : 1;
+      const multiplier = Math.ceil(index / 2);
+      return baseValue + direction * multiplier * stepSize;
+    });
+  }
+
+  pathCollides(segments, rects, padding = this.routeObstaclePadding) {
+    return segments.some((segment) => {
+      return rects.some((rect) => {
+        return this.segmentIntersectsRect(segment, rect, padding);
+      });
+    });
+  }
+
+  nonEndpointSegments(segments) {
+    return segments.slice(1, -1);
+  }
+
+  get routeObstaclePadding() {
+    return 36;
+  }
+
+  segmentIntersectsRect(segment, rect, padding) {
+    const left = rect.left - padding;
+    const right = rect.right + padding;
+    const top = rect.top - padding;
+    const bottom = rect.bottom + padding;
+    const minX = Math.min(segment.x1, segment.x2);
+    const maxX = Math.max(segment.x1, segment.x2);
+    const minY = Math.min(segment.y1, segment.y2);
+    const maxY = Math.max(segment.y1, segment.y2);
+
+    if (segment.y1 === segment.y2) {
+      return (
+        segment.y1 >= top &&
+        segment.y1 <= bottom &&
+        maxX >= left &&
+        minX <= right
+      );
+    }
+
+    if (segment.x1 === segment.x2) {
+      return (
+        segment.x1 >= left &&
+        segment.x1 <= right &&
+        maxY >= top &&
+        minY <= bottom
+      );
+    }
+
+    return false;
+  }
+
+  routeOffset(index, size) {
+    return (index % 3) * size;
+  }
+
+  setDragPayload(event, payload) {
+    if (!event.dataTransfer) {
+      return;
+    }
+
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", payload);
+  }
+
+  @bind
+  edgeOptionStyle(edge) {
+    const x = Number(edge.label_x);
+    const y = Number(edge.label_y);
+
+    if (!Number.isFinite(x) || !Number.isFinite(y)) {
+      return null;
+    }
+
+    return trustHTML(`left: ${x}px; top: ${y}px;`);
+  }
+
+  safeHexColor(rawColor) {
+    if (!rawColor) {
+      return null;
+    }
+
+    const normalized = String(rawColor).trim().replace(/^#/, "");
+    if (!normalized.match(/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/)) {
+      return null;
+    }
+
+    return `#${normalized}`;
+  }
+
+  @action
+  dragStepStart(step, event) {
+    this.setDragPayload(event, `workflow-step:${step.id}`);
+    this.draggedStepId = step.id;
+  }
+
+  @action
+  dragStepEnd() {
+    this.draggedStepId = null;
+    this.scheduleEdgeLayout();
+  }
+
+  @action
+  allowDrop(event) {
+    event.preventDefault();
+  }
+
+  boardPointForEvent(event) {
+    const boardRect = this.boardElement.getBoundingClientRect();
+
+    return {
+      x: event.clientX - boardRect.left,
+      y: event.clientY - boardRect.top,
+    };
+  }
+
+  stepRect(stepId) {
+    const boardRect = this.boardElement.getBoundingClientRect();
+    const element = this.boardElement.querySelector(
+      `[data-workflow-step-id="${stepId}"]`
+    );
+
+    if (!element) {
+      return null;
+    }
+
+    const rect = element.getBoundingClientRect();
+
+    return {
+      left: rect.left - boardRect.left,
+      right: rect.right - boardRect.left,
+      top: rect.top - boardRect.top,
+      bottom: rect.bottom - boardRect.top,
+      width: rect.width,
+      height: rect.height,
+      centerX: rect.left - boardRect.left + rect.width / 2,
+      centerY: rect.top - boardRect.top + rect.height / 2,
+    };
+  }
+
+  updateConnectorPreview(point, targetSide = null) {
+    if (!this.boardElement || !this.connectorDragMode) {
+      this.previewPath = null;
+      return;
+    }
+
+    const fixedStepId =
+      this.connectorDragMode === "retarget-source"
+        ? this.connectorTargetStepId
+        : this.connectorSourceStepId;
+    const fixedSide =
+      this.connectorDragMode === "retarget-source"
+        ? this.connectorTargetSide
+        : this.connectorSourceSide;
+    const fixedRect = this.stepRect(fixedStepId);
+
+    if (!fixedRect) {
+      this.previewPath = null;
+      return;
+    }
+
+    const allRects = new Map();
+    const laneStackBounds = this.laneStackBounds(
+      this.boardElement.getBoundingClientRect()
+    );
+    for (const step of this.workflowSteps) {
+      const rect = this.stepRect(step.id);
+
+      if (rect) {
+        allRects.set(step.id, rect);
+      }
+    }
+
+    const obstacleRects = [...allRects.entries()]
+      .filter(([stepId]) => stepId !== fixedStepId)
+      .map(([, rect]) => rect);
+    const labelObstacleRects = [...allRects.values()];
+    const fixedPoint = this.connectorPoint(fixedRect, fixedSide);
+    const route =
+      this.connectorDragMode === "retarget-source"
+        ? this.routePoints({
+            index: this.edgeLayouts.length + 1,
+            source: point,
+            sourceSide: targetSide,
+            target: fixedPoint,
+            targetSide: fixedSide,
+            obstacleRects,
+            labelObstacleRects,
+            laneStackBounds,
+          })
+        : this.routePoints({
+            index: this.edgeLayouts.length + 1,
+            source: fixedPoint,
+            sourceSide: fixedSide,
+            target: point,
+            targetSide,
+            obstacleRects,
+            labelObstacleRects,
+            laneStackBounds,
+          });
+
+    this.previewPath = route.path;
+  }
+
+  clearConnectorDrag() {
+    this.previewPath = null;
+    this.draggedOptionId = null;
+    this.linkSourceStepId = null;
+    this.connectorDragMode = null;
+    this.connectorSourceStepId = null;
+    this.connectorSourceSide = null;
+    this.connectorTargetStepId = null;
+    this.connectorTargetSide = null;
+  }
+
+  @action
+  dragConnectorOverBoard(event) {
+    if (!this.connectorDragMode) {
+      return;
+    }
+
+    event.preventDefault();
+    this.updateConnectorPreview(this.boardPointForEvent(event));
+  }
+
+  @action
+  dragConnectorHandleStart(step, side, event) {
+    event.stopPropagation();
+    this.setDragPayload(event, `workflow-connector:${step.id}:${side}`);
+    this.startConnectorHandleInteraction(step, side);
+    this.updateConnectorPreview(this.boardPointForEvent(event));
+  }
+
+  startConnectorHandleInteraction(step, side) {
+    const targetEdge = this.edgeForTargetHandle(step, side);
+    const sourceEdge = this.edgeForSourceHandle(step, side);
+
+    if (targetEdge) {
+      this.connectorDragMode = "retarget-target";
+      this.draggedOptionId = targetEdge.step_option.id;
+      this.connectorSourceStepId = targetEdge.source_step_id;
+      this.connectorSourceSide = targetEdge.source_side;
+      this.connectorTargetStepId = step.id;
+      this.connectorTargetSide = side;
+    } else if (sourceEdge) {
+      this.connectorDragMode = "retarget-source";
+      this.draggedOptionId = sourceEdge.step_option.id;
+      this.connectorSourceStepId = step.id;
+      this.connectorSourceSide = side;
+      this.connectorTargetStepId = sourceEdge.target_step_id;
+      this.connectorTargetSide = sourceEdge.target_side;
+    } else {
+      this.connectorDragMode = "create";
+      this.linkSourceStepId = step.id;
+      this.connectorSourceStepId = step.id;
+      this.connectorSourceSide = side;
+    }
+  }
+
+  @action
+  async activateConnectorHandle(step, side, event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (this.args.disabled) {
+      return;
+    }
+
+    if (!this.connectorDragMode) {
+      this.startConnectorHandleInteraction(step, side);
+      return;
+    }
+
+    await this.dropConnectorHandle(step, side, event);
+  }
+
+  @action
+  dragConnectorHandleOver(step, side, event) {
+    if (!this.connectorDragMode) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    const rect = this.stepRect(step.id);
+
+    if (!rect) {
+      return;
+    }
+
+    this.updateConnectorPreview(this.connectorPoint(rect, side), side);
+  }
+
+  @action
+  async dropConnectorHandle(targetStep, targetSide, event) {
+    if (!this.connectorDragMode) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    const sourceStepId =
+      this.connectorDragMode === "retarget-source"
+        ? targetStep.id
+        : this.connectorSourceStepId;
+    const sourceSide =
+      this.connectorDragMode === "retarget-source"
+        ? targetSide
+        : this.connectorSourceSide;
+    const finalTargetStepId =
+      this.connectorDragMode === "retarget-source"
+        ? this.connectorTargetStepId
+        : targetStep.id;
+    const finalTargetSide =
+      this.connectorDragMode === "retarget-source"
+        ? this.connectorTargetSide
+        : targetSide;
+
+    if (
+      sourceStepId === finalTargetStepId ||
+      this.connectorEndpointInUse({
+        stepId: sourceStepId,
+        side: sourceSide,
+        ignoredStepOptionId: this.draggedOptionId,
+      }) ||
+      this.connectorEndpointInUse({
+        stepId: finalTargetStepId,
+        side: finalTargetSide,
+        ignoredStepOptionId: this.draggedOptionId,
+      })
+    ) {
+      this.clearConnectorDrag();
+      return;
+    }
+
+    try {
+      if (this.connectorDragMode === "create") {
+        await this.createLink(finalTargetStepId);
+      } else if (this.connectorDragMode === "retarget-source") {
+        await this.retargetOptionSource(sourceStepId);
+      } else {
+        await this.retargetOption(finalTargetStepId);
+      }
+    } catch (err) {
+      popupAjaxError(err);
+    } finally {
+      this.clearConnectorDrag();
+    }
+  }
+
+  @action
+  dragConnectorHandleEnd() {
+    this.clearConnectorDrag();
+    this.scheduleEdgeLayout();
+  }
+
+  @action
+  async dropStepOnLane(lane, event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const step = this.workflowSteps.find(
+      (workflowStep) => workflowStep.id === this.draggedStepId
+    );
+
+    if (!step || step.category_id === lane.id) {
+      this.draggedStepId = null;
+      return;
+    }
+
+    try {
+      await this.updateStep(step, { category_id: lane.id });
+      await this.reloadGraphInPlace();
+    } catch (err) {
+      popupAjaxError(err);
+    } finally {
+      this.draggedStepId = null;
+    }
+  }
+
+  @action
+  async dropStepOnLanePosition(lane, position, event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const sourceStep = this.workflowSteps.find(
+      (workflowStep) => workflowStep.id === this.draggedStepId
+    );
+
+    if (
+      !sourceStep ||
+      (sourceStep.category_id === lane.id && sourceStep.position === position)
+    ) {
+      this.draggedStepId = null;
+      return;
+    }
+
+    try {
+      await this.reorderStepPosition(sourceStep, {
+        category_id: lane.id,
+        position,
+      });
+      await this.reloadGraphInPlace();
+    } catch (err) {
+      popupAjaxError(err);
+    } finally {
+      this.draggedStepId = null;
+    }
+  }
+
+  async reorderStep(targetStep) {
+    const sourceStep = this.workflowSteps.find(
+      (step) => step.id === this.draggedStepId
+    );
+
+    if (!sourceStep || sourceStep.id === targetStep.id) {
+      return;
+    }
+
+    await this.reorderStepPosition(sourceStep, {
+      category_id: targetStep.category_id,
+      position: targetStep.position,
+    });
+    await this.reloadGraphInPlace();
+  }
+
+  @action
+  async dropOnStep(targetStep, event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    try {
+      if (this.draggedStepId) {
+        await this.reorderStep(targetStep);
+      }
+    } catch (err) {
+      popupAjaxError(err);
+    } finally {
+      this.draggedStepId = null;
+    }
+  }
+
+  @action
+  dragLinkStart(step, event) {
+    event.stopPropagation();
+    this.linkSourceStepId = step.id;
+  }
+
+  @action
+  clearLinkSource() {
+    this.linkSourceStepId = null;
+  }
+
+  async createLink(targetStepId) {
+    const sourceStep = this.workflowSteps.find(
+      (step) => step.id === this.linkSourceStepId
+    );
+    const workflowOptionId = this.defaultWorkflowOptionId;
+
+    if (!sourceStep || !workflowOptionId || sourceStep.id === targetStepId) {
+      return;
+    }
+
+    await ajax("/admin/plugins/discourse-workflow/workflow_step_options.json", {
+      type: "POST",
+      data: {
+        workflow_step_option: {
+          workflow_step_id: sourceStep.id,
+          workflow_option_id: workflowOptionId,
+          target_step_id: targetStepId,
+          position: this.stepOptions(sourceStep).length + 1,
+        },
+      },
+    });
+    await this.reloadGraphInPlace();
+  }
+
+  @action
+  dragOptionStart(stepOption, event) {
+    event.stopPropagation();
+    this.setDragPayload(event, `workflow-step-option:${stepOption.id}`);
+    this.draggedOptionId = stepOption.id;
+  }
+
+  @action
+  dragOptionEnd() {
+    this.draggedOptionId = null;
+  }
+
+  async retargetOption(targetStepId) {
+    const stepOption = this.workflowSteps
+      .flatMap((step) => step.workflow_step_options || [])
+      .find((option) => option.id === this.draggedOptionId);
+
+    if (!stepOption || stepOption.target_step_id === targetStepId) {
+      return;
+    }
+
+    await this.updateStepOption(stepOption, { target_step_id: targetStepId });
+    await this.reloadGraphInPlace();
+  }
+
+  async retargetOptionSource(sourceStepId) {
+    const stepOption = this.workflowSteps
+      .flatMap((step) => step.workflow_step_options || [])
+      .find((option) => option.id === this.draggedOptionId);
+
+    if (!stepOption || stepOption.workflow_step_id === sourceStepId) {
+      return;
+    }
+
+    const sourceStep = this.workflowSteps.find(
+      (step) => step.id === sourceStepId
+    );
+
+    await this.updateStepOption(stepOption, {
+      workflow_step_id: sourceStepId,
+      position: sourceStep ? this.stepOptions(sourceStep).length + 1 : 1,
+    });
+    await this.reloadGraphInPlace();
+  }
+
+  @action
+  async updateStepOptionName(stepOption, event) {
+    try {
+      await this.updateStepOption(stepOption, {
+        workflow_option_id: parseInt(event.target.value, 10),
+      });
+      await this.reloadGraphInPlace();
+    } catch (err) {
+      popupAjaxError(err);
+    }
+  }
+
+  @action
+  updateNewStepCategory(categoryId) {
+    this.newStepCategoryId = categoryId;
+  }
+
+  @action
+  addStepToLane(lane) {
+    this.router.transitionTo(
+      "adminPlugins.show.discourse-workflow-workflows.steps.new",
+      this.args.workflow,
+      {
+        queryParams: {
+          category_id: lane.id,
+        },
+      }
+    );
+  }
+
+  @action
+  async addStep() {
+    if (!this.newStepCategoryId) {
+      return;
+    }
+
+    try {
+      await ajax("/admin/plugins/discourse-workflow/workflow_steps.json", {
+        type: "POST",
+        data: {
+          workflow_step: {
+            workflow_id: this.args.workflow.id,
+            name:
+              this.newStepName ||
+              i18n(
+                "admin.discourse_workflow.workflows.visual.default_step_name"
+              ),
+            category_id: this.newStepCategoryId,
+            position: this.nextStepPosition,
+          },
+        },
+      });
+      this.newStepName = "";
+      await this.reloadGraphInPlace();
+    } catch (err) {
+      popupAjaxError(err);
+    }
+  }
+
+  <template>
+    <section class="workflow-visual-editor" {{didInsert this.loadGraph}}>
+      <div class="workflow-visual-editor__add-step">
+        <Input
+          class="workflow-visual-editor__new-step-name"
+          @value={{this.newStepName}}
+          placeholder={{i18n
+            "admin.discourse_workflow.workflows.visual.new_step_name"
+          }}
+        />
+        <CategoryChooser
+          @value={{this.newStepCategoryId}}
+          @onChangeCategory={{this.updateNewStepCategory}}
+        />
+        <DButton
+          class="btn-primary workflow-visual-editor__add-step-button"
+          @action={{this.addStep}}
+          @label="admin.discourse_workflow.workflows.visual.add_step"
+          @title="admin.discourse_workflow.workflows.visual.add_step_title"
+          @disabled={{@disabled}}
+        />
+      </div>
+
+      {{#if this.isLoading}}
+        <p>{{i18n "admin.discourse_workflow.workflows.visual.loading"}}</p>
+      {{else if this.hasSteps}}
+        <div
+          class="workflow-visual-editor__board"
+          {{didInsert this.captureBoard}}
+          {{didUpdate
+            this.scheduleEdgeLayout
+            this.workflowSteps
+            this.workflowCategories
+          }}
+          {{on "dragover" this.dragConnectorOverBoard}}
+        >
+          <svg class="workflow-visual-editor__edge-layer" aria-hidden="true">
+            <defs>
+              <marker
+                id="workflow-visual-editor-arrowhead"
+                markerHeight="8"
+                markerWidth="10"
+                orient="auto"
+                refX="9"
+                refY="4"
+                viewBox="0 0 10 8"
+              >
+                <path d="M0,0 L10,4 L0,8 Z"></path>
+              </marker>
+            </defs>
+            {{#each this.edgeLayouts as |edge|}}
+              <path
+                class="workflow-visual-editor__edge-path"
+                data-workflow-step-option-id={{edge.step_option.id}}
+                data-workflow-source-step-id={{edge.source_step_id}}
+                data-workflow-target-step-id={{edge.target_step_id}}
+                data-workflow-source-side={{edge.source_side}}
+                data-workflow-target-side={{edge.target_side}}
+                d={{edge.path}}
+              ></path>
+            {{/each}}
+            {{#if this.previewPath}}
+              <path
+                class="workflow-visual-editor__edge-path workflow-visual-editor__edge-path--preview"
+                d={{this.previewPath}}
+              ></path>
+            {{/if}}
+          </svg>
+
+          <div class="workflow-visual-editor__edge-controls">
+            {{#each this.edgeLayouts as |edge|}}
+              <div
+                class="workflow-visual-editor__option"
+                data-workflow-step-option-id={{edge.step_option.id}}
+                style={{this.edgeOptionStyle edge}}
+              >
+                <DButton
+                  class="btn-danger btn-small workflow-visual-editor__delete-option"
+                  @icon="xmark"
+                  @title="admin.discourse_workflow.workflows.visual.delete_connector"
+                  @action={{fn this.confirmDeleteStepOption edge.step_option}}
+                  @disabled={{@disabled}}
+                />
+                <select
+                  data-workflow-step-option-id={{edge.step_option.id}}
+                  title={{i18n
+                    "admin.discourse_workflow.workflows.visual.change_connector_option"
+                  }}
+                  value={{edge.step_option.workflow_option_id}}
+                  {{on
+                    "change"
+                    (fn this.updateStepOptionName edge.step_option)
+                  }}
+                >
+                  {{#each this.workflowOptions as |workflowOption|}}
+                    <option
+                      value={{workflowOption.id}}
+                      selected={{this.isWorkflowOptionSelected
+                        edge.step_option
+                        workflowOption
+                      }}
+                    >
+                      {{this.workflowOptionLabel workflowOption.id}}
+                    </option>
+                  {{/each}}
+                </select>
+              </div>
+            {{/each}}
+          </div>
+
+          <div class="workflow-visual-editor__lanes">
+            {{#each this.lanes as |lane|}}
+              <section
+                class="workflow-visual-editor__lane"
+                data-workflow-category-id={{lane.id}}
+                style={{this.laneStyle lane}}
+                {{on "dragover" this.allowDrop}}
+                {{on "drop" (fn this.dropStepOnLane lane)}}
+              >
+                <header class="workflow-visual-editor__lane-header">
+                  <span class="workflow-visual-editor__lane-title">
+                    {{lane.name}}
+                  </span>
+                  <DButton
+                    class="btn-small btn-default workflow-visual-editor__add-step-to-lane"
+                    @icon="plus"
+                    @title="admin.discourse_workflow.workflows.visual.add_step_to_lane"
+                    @action={{fn this.addStepToLane lane}}
+                    @disabled={{@disabled}}
+                  />
+                </header>
+
+                <div class="workflow-visual-editor__lane-steps">
+                  {{#each this.positionSlots as |position|}}
+                    <div
+                      class="workflow-visual-editor__position-slot"
+                      data-workflow-category-id={{lane.id}}
+                      data-workflow-position={{position}}
+                      {{on "dragover" this.allowDrop}}
+                      {{on
+                        "drop"
+                        (fn this.dropStepOnLanePosition lane position)
+                      }}
+                    >
+                      {{#each
+                        (this.stepsForLanePosition lane position)
+                        as |step|
+                      }}
+                        <article
+                          class="workflow-visual-editor__step"
+                          data-workflow-step-id={{step.id}}
+                          draggable={{if @disabled false true}}
+                          {{on "dragstart" (fn this.dragStepStart step)}}
+                          {{on "dragend" this.dragStepEnd}}
+                          {{on "dragover" this.allowDrop}}
+                          {{on "drop" (fn this.dropOnStep step)}}
+                        >
+                          <DButton
+                            class="btn-danger btn-small workflow-visual-editor__delete-step"
+                            @icon="xmark"
+                            @title="admin.discourse_workflow.workflows.visual.delete_step"
+                            @action={{fn this.confirmDeleteStep step}}
+                            @disabled={{@disabled}}
+                          />
+
+                          {{#each this.connectorSides as |side|}}
+                            <button
+                              type="button"
+                              class={{this.connectorHandleClass step side}}
+                              aria-label={{this.connectorHandleLabel step side}}
+                              aria-pressed={{if
+                                (this.connectorHandleSelected step side)
+                                "true"
+                                "false"
+                              }}
+                              title={{this.connectorHandleLabel step side}}
+                              data-workflow-connector-side={{side}}
+                              draggable={{if @disabled false true}}
+                              {{on
+                                "click"
+                                (fn this.activateConnectorHandle step side)
+                              }}
+                              {{on
+                                "dragstart"
+                                (fn this.dragConnectorHandleStart step side)
+                              }}
+                              {{on
+                                "dragover"
+                                (fn this.dragConnectorHandleOver step side)
+                              }}
+                              {{on
+                                "drop"
+                                (fn this.dropConnectorHandle step side)
+                              }}
+                              {{on "dragend" this.dragConnectorHandleEnd}}
+                            ></button>
+                          {{/each}}
+
+                          <div class="workflow-visual-editor__step-title">
+                            <span class="workflow-visual-editor__step-number">
+                              {{step.position}}.
+                            </span>
+                            <strong class="workflow-visual-editor__step-label">
+                              {{step.name}}
+                            </strong>
+                          </div>
+                        </article>
+                      {{/each}}
+                    </div>
+                  {{/each}}
+                </div>
+              </section>
+            {{/each}}
+          </div>
+        </div>
+      {{else}}
+        <div
+          class="workflow-visual-editor__board"
+          {{didInsert this.captureBoard}}
+        >
+          <p class="workflow-visual-editor__empty">
+            {{i18n "admin.discourse_workflow.workflows.steps.none"}}
+          </p>
+        </div>
+      {{/if}}
+    </section>
+  </template>
+}
diff --git a/assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows.js b/admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows.js
similarity index 100%
rename from assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows.js
rename to admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows.js
diff --git a/assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-edit.js b/admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/edit.js
similarity index 100%
rename from assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-edit.js
rename to admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/edit.js
diff --git a/assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-new.js b/admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/new.js
similarity index 100%
rename from assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-new.js
rename to admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/new.js
diff --git a/assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-steps.js b/admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/steps.js
similarity index 100%
rename from assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-steps.js
rename to admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/steps.js
diff --git a/assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-steps-edit.js b/admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/steps/edit.js
similarity index 94%
rename from assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-steps-edit.js
rename to admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/steps/edit.js
index 4dfebbf..61caa77 100644
--- a/assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-steps-edit.js
+++ b/admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/steps/edit.js
@@ -3,7 +3,7 @@ import DiscourseRoute from "discourse/routes/discourse";
 export default class AdminPluginsShowDiscourseWorkflowWorkflowStepsEdit extends DiscourseRoute {
   async model(params) {
     const allWorkflowSteps = await this.modelFor(
-      "adminPlugins.show.discourse-workflow-workflows-steps"
+      "adminPlugins.show.discourse-workflow-workflows.steps"
     );
     const id = parseInt(params.step_id, 10);
     const workflowStep = allWorkflowSteps.findBy("id", id);
diff --git a/assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-steps-new.js b/admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/steps/new.js
similarity index 76%
rename from assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-steps-new.js
rename to admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/steps/new.js
index 67c732e..b210d65 100644
--- a/assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-steps-new.js
+++ b/admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/steps/new.js
@@ -1,10 +1,16 @@
 import DiscourseRoute from "discourse/routes/discourse";
 
 export default class AdminPluginsShowDiscourseWorkflowWorkflowStepsNew extends DiscourseRoute {
-  async model() {
+  queryParams = {
+    category_id: {
+      refreshModel: true,
+    },
+  };
+
+  async model(params) {
     // Get the parent workflow
     const workflow = this.modelFor(
-      "adminPlugins.show.discourse-workflow-workflows-steps"
+      "adminPlugins.show.discourse-workflow-workflows.steps"
     );
 
     const sortedSteps = [...workflow.workflow_steps].sort(
@@ -15,6 +21,7 @@ export default class AdminPluginsShowDiscourseWorkflowWorkflowStepsNew extends D
     // Asign a default position to be the last existing step + 1
     const record = this.store.createRecord("workflow-step", {
       workflow_id: workflow.id,
+      category_id: params.category_id ? parseInt(params.category_id, 10) : null,
       position:
         sortedSteps.length > 0
           ? sortedSteps[workflow.workflow_steps.length - 1].position + 1
diff --git a/assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-steps-options.js b/admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/steps/options.js
similarity index 92%
rename from assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-steps-options.js
rename to admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/steps/options.js
index 89e21c6..1bf2b70 100644
--- a/assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-steps-options.js
+++ b/admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/steps/options.js
@@ -4,7 +4,7 @@ import { i18n } from "discourse-i18n";
 export default class AdminPluginsShowDiscourseWorkflowWorkflowStepOptions extends DiscourseRoute {
   async model(params) {
     const workflowSteps = this.modelFor(
-      "adminPlugins.show.discourse-workflow-workflows-steps"
+      "adminPlugins.show.discourse-workflow-workflows.steps"
     );
     const id = parseInt(params.step_id, 10);
     const workflowStep = workflowSteps.findBy("id", id);
diff --git a/assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-steps-options-edit.js b/admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/steps/options/edit.js
similarity index 94%
rename from assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-steps-options-edit.js
rename to admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/steps/options/edit.js
index 54e3cef..6e42e33 100644
--- a/assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-steps-options-edit.js
+++ b/admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/steps/options/edit.js
@@ -3,7 +3,7 @@ import DiscourseRoute from "discourse/routes/discourse";
 export default class AdminPluginsShowDiscourseWorkflowWorkflowStepOptionsEdit extends DiscourseRoute {
   async model(params) {
     const allWorkflowStepOptions = await this.modelFor(
-      "adminPlugins.show.discourse-workflow-workflows-steps-options"
+      "adminPlugins.show.discourse-workflow-workflows.steps.options"
     );
     const id = parseInt(params.option_id, 10);
     const workflowStepOption = allWorkflowStepOptions.findBy("id", id);
diff --git a/assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-steps-options-new.js b/admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/steps/options/new.js
similarity index 94%
rename from assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-steps-options-new.js
rename to admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/steps/options/new.js
index 88065f4..5be815c 100644
--- a/assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-steps-options-new.js
+++ b/admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/steps/options/new.js
@@ -4,7 +4,7 @@ export default class AdminPluginsShowDiscourseWorkflowWorkflowStepOptionsNew ext
   async model() {
     // Get the parent workflow step
     const workflowStep = this.modelFor(
-      "adminPlugins.show.discourse-workflow-workflows-steps-options"
+      "adminPlugins.show.discourse-workflow-workflows.steps.options"
     );
     // Create a new workflow step record
     const record = this.store.createRecord("workflow-step-option", {
diff --git a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/edit.gjs b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/edit.gjs
new file mode 100644
index 0000000..d76d267
--- /dev/null
+++ b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/edit.gjs
@@ -0,0 +1,8 @@
+import WorkflowListEditor from "../../../../components/workflow-list-editor";
+
+export default <template>
+  <WorkflowListEditor
+    @workflows={{@controller.allWorkflows}}
+    @currentWorkflow={{@controller.model}}
+  />
+</template>
diff --git a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/edit.hbs b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/edit.hbs
deleted file mode 100644
index 7bce777..0000000
--- a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/edit.hbs
+++ /dev/null
@@ -1,4 +0,0 @@
-<WorkflowListEditor
-  @workflows={{this.allWorkflows}}
-  @currentWorkflow={{this.model}}
-/>
\ No newline at end of file
diff --git a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/index.gjs b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/index.gjs
new file mode 100644
index 0000000..187c5e6
--- /dev/null
+++ b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/index.gjs
@@ -0,0 +1,33 @@
+import DPageSubheader from "discourse/components/d-page-subheader";
+import { i18n } from "discourse-i18n";
+import WorkflowListEditor from "../../../../components/workflow-list-editor";
+
+export default <template>
+  <div class="discourse-workflow-workflows admin-detail">
+    <DPageSubheader
+      @titleLabel={{i18n "admin.discourse_workflow.workflows.title"}}
+      @descriptionLabel={{i18n
+        "admin.discourse_workflow.workflows.instructions"
+      }}
+    >
+      <:actions as |actions|>
+        <actions.Primary
+          @label="admin.discourse_workflow.workflows.new"
+          @title="admin.discourse_workflow.workflows.new"
+          @route="adminPlugins.show.discourse-workflow-workflows.new"
+          @routeModels="discourse-workflow"
+          @icon="plus"
+          class="admin-workflows-new"
+        />
+      </:actions>
+    </DPageSubheader>
+
+    <div class="workflows-list">
+      {{#if @controller.model.content.length}}
+        <WorkflowListEditor @workflows={{@controller.model.content}} />
+      {{else}}
+        {{i18n "admin.discourse_workflow.workflows.none"}}
+      {{/if}}
+    </div>
+  </div>
+</template>
diff --git a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/index.hbs b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/index.hbs
deleted file mode 100644
index 29990bc..0000000
--- a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/index.hbs
+++ /dev/null
@@ -1,30 +0,0 @@
-{{!-- <DBreadcrumbsItem
-  @path="/admin/plugins/discourse-workflow/workflows"
-  @label={{i18n "admin.discourse_workflow.workflows.title"}}
-/> --}}
-
-<div class="discourse-workflow-workflows admin-detail">
-  <DPageSubheader
-    @titleLabel={{i18n "admin.discourse_workflow.workflows.title"}}
-    @descriptionLabel={{i18n "admin.discourse_workflow.workflows.instructions"}}
-  >
-    <:actions as |actions|>
-      <actions.Primary
-        @label="admin.discourse_workflow.workflows.new"
-        @title="admin.discourse_workflow.workflows.new"
-        @route="adminPlugins.show.discourse-workflow-workflows.new"
-        @routeModels="discourse-workflow"
-        @icon="plus"
-        class="admin-workflows-new"
-      />
-    </:actions>
-  </DPageSubheader>
-
-  <div class="workflows-list">
-    {{#if this.model.content.length}}
-      <WorkflowListEditor @workflows={{this.model.content}} />
-    {{else}}
-      {{i18n "admin.discourse_workflow.workflows.none"}}
-    {{/if}}
-  </div>
-</div>
\ No newline at end of file
diff --git a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/new.gjs b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/new.gjs
new file mode 100644
index 0000000..d76d267
--- /dev/null
+++ b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/new.gjs
@@ -0,0 +1,8 @@
+import WorkflowListEditor from "../../../../components/workflow-list-editor";
+
+export default <template>
+  <WorkflowListEditor
+    @workflows={{@controller.allWorkflows}}
+    @currentWorkflow={{@controller.model}}
+  />
+</template>
diff --git a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/new.hbs b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/new.hbs
deleted file mode 100644
index 7bce777..0000000
--- a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/new.hbs
+++ /dev/null
@@ -1,4 +0,0 @@
-<WorkflowListEditor
-  @workflows={{this.allWorkflows}}
-  @currentWorkflow={{this.model}}
-/>
\ No newline at end of file
diff --git a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/edit.gjs b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/edit.gjs
new file mode 100644
index 0000000..b80d755
--- /dev/null
+++ b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/edit.gjs
@@ -0,0 +1,9 @@
+import WorkflowStepListEditor from "../../../../../components/workflow-step-list-editor";
+
+export default <template>
+  <WorkflowStepListEditor
+    @currentWorkflowStep={{@controller.model}}
+    @workflow={{@controller.model.workflow}}
+    @workflowSteps={{@controller.workflowSteps}}
+  />
+</template>
diff --git a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/edit.hbs b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/edit.hbs
deleted file mode 100644
index 859c415..0000000
--- a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/edit.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-<WorkflowStepListEditor
-  @currentWorkflowStep={{this.model}}
-  @workflow={{this.model.workflow}}
-  @workflowSteps={{this.workflowSteps}}
-/>
\ No newline at end of file
diff --git a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/new.gjs b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/new.gjs
new file mode 100644
index 0000000..b9a69d0
--- /dev/null
+++ b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/new.gjs
@@ -0,0 +1,8 @@
+import WorkflowStepListEditor from "../../../../../components/workflow-step-list-editor";
+
+export default <template>
+  <WorkflowStepListEditor
+    @currentWorkflowStep={{@controller.model}}
+    @workflow={{@controller.model.workflow}}
+  />
+</template>
diff --git a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/new.hbs b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/new.hbs
deleted file mode 100644
index 28ccbf0..0000000
--- a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/new.hbs
+++ /dev/null
@@ -1,4 +0,0 @@
-<WorkflowStepListEditor
-  @currentWorkflowStep={{this.model}}
-  @workflow={{this.model.workflow}}
-/>
\ No newline at end of file
diff --git a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/options/edit.gjs b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/options/edit.gjs
new file mode 100644
index 0000000..0112ccf
--- /dev/null
+++ b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/options/edit.gjs
@@ -0,0 +1,10 @@
+import WorkflowStepOptionListEditor from "../../../../../../components/workflow-step-option-list-editor";
+
+export default <template>
+  <WorkflowStepOptionListEditor
+    @currentWorkflowStepOption={{@controller.model}}
+    @workflowStep={{@controller.workflowStep}}
+    @workflowSteps={{@controller.workflowSteps}}
+    @workflowOptions={{@controller.workflowOptions}}
+  />
+</template>
diff --git a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/options/edit.hbs b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/options/edit.hbs
deleted file mode 100644
index 8175cae..0000000
--- a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/options/edit.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-<WorkflowStepOptionListEditor
-  @currentWorkflowStepOption={{this.model}}
-  @workflowStep={{this.workflowStep}}
-  @workflowSteps={{this.workflowSteps}}
-  @workflowOptions={{this.workflowOptions}}
-/>
\ No newline at end of file
diff --git a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/options/new.gjs b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/options/new.gjs
new file mode 100644
index 0000000..a1279fb
--- /dev/null
+++ b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/options/new.gjs
@@ -0,0 +1,10 @@
+import WorkflowStepOptionListEditor from "../../../../../../components/workflow-step-option-list-editor";
+
+export default <template>
+  <WorkflowStepOptionListEditor
+    @currentWorkflowStepOption={{@controller.model}}
+    @workflowStep={{@controller.model.workflowStep}}
+    @workflowSteps={{@controller.workflowSteps}}
+    @workflowOptions={{@controller.workflowOptions}}
+  />
+</template>
diff --git a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/options/new.hbs b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/options/new.hbs
deleted file mode 100644
index ca28948..0000000
--- a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/options/new.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-<WorkflowStepOptionListEditor
-  @currentWorkflowStepOption={{this.model}}
-  @workflowStep={{this.model.workflowStep}}
-  @workflowSteps={{this.workflowSteps}}
-  @workflowOptions={{this.workflowOptions}}
-/>
\ No newline at end of file
diff --git a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/steps.gjs b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/steps.gjs
new file mode 100644
index 0000000..bede3d4
--- /dev/null
+++ b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/steps.gjs
@@ -0,0 +1,5 @@
+export default <template>
+  <div class="parent-template">
+    {{outlet}}
+  </div>
+</template>
diff --git a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/steps.hbs b/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/steps.hbs
deleted file mode 100644
index 2c1234a..0000000
--- a/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-workflow-workflows/steps/steps.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="parent-template">
-  {{outlet}}
-</div>
\ No newline at end of file
diff --git a/app/controllers/discourse_workflow/admin/workflow_steps_controller.rb b/app/controllers/discourse_workflow/admin/workflow_steps_controller.rb
index 96fd11e..99ee3b4 100644
--- a/app/controllers/discourse_workflow/admin/workflow_steps_controller.rb
+++ b/app/controllers/discourse_workflow/admin/workflow_steps_controller.rb
@@ -6,7 +6,7 @@ class WorkflowStepsController < ::Admin::AdminController
       requires_plugin ::DiscourseWorkflow::PLUGIN_NAME
 
       before_action :set_workflow, only: %i[index new create]
-      before_action :set_workflow_step, only: %i[show edit update destroy]
+      before_action :set_workflow_step, only: %i[show edit update destroy reorder]
 
       def index
         @workflow_steps =
@@ -19,6 +19,7 @@ def index
           records: @workflow_steps,
           associations: [:category, { workflow_step_options: :workflow_option }],
         ).call
+        workflow_categories = categories_for_visual(@workflow_steps)
         render_json_dump(
           {
             workflow_steps:
@@ -26,6 +27,11 @@ def index
                 @workflow_steps,
                 each_serializer: DiscourseWorkflow::WorkflowStepSerializer,
               ),
+            workflow_categories:
+              ActiveModel::ArraySerializer.new(
+                workflow_categories,
+                each_serializer: DiscourseWorkflow::WorkflowCategorySerializer,
+              ),
           },
         )
       end
@@ -81,12 +87,40 @@ def update
         end
       end
 
+      def reorder
+        WorkflowStep.transaction do
+          reorder_params = workflow_step_reorder_params
+          target_position = reorder_params[:position].to_i
+          target_steps =
+            WorkflowStep
+              .where(workflow_id: @workflow_step.workflow_id, position: target_position)
+              .where.not(id: @workflow_step.id)
+
+          target_steps.update_all(position: @workflow_step.position, updated_at: Time.zone.now)
+          @workflow_step.update!(reorder_params)
+        end
+
+        render json: {
+                 workflow_step: WorkflowStepSerializer.new(@workflow_step, root: false),
+               },
+               status: :ok
+      rescue ActiveRecord::RecordInvalid => err
+        render_json_error err.record
+      end
+
       def destroy
-        if @workflow_step.destroy
-          head :no_content
-        else
-          render_json_error @workflow_step
+        WorkflowStep.transaction do
+          WorkflowStepOption
+            .where(workflow_step_id: @workflow_step.id)
+            .or(WorkflowStepOption.where(target_step_id: @workflow_step.id))
+            .destroy_all
+
+          @workflow_step.destroy!
         end
+
+        head :no_content
+      rescue ActiveRecord::RecordNotDestroyed => err
+        render_json_error err.record || @workflow_step
       end
 
       private
@@ -117,6 +151,22 @@ def workflow_step_params
         )
       end
 
+      def workflow_step_reorder_params
+        params.require(:workflow_step).permit(:position, :category_id)
+      end
+
+      def categories_for_visual(workflow_steps)
+        categories = workflow_steps.filter_map(&:category)
+        category_ids = categories.map(&:id)
+        parent_category_ids = categories.filter_map(&:parent_category_id).uniq
+
+        if parent_category_ids.present?
+          category_ids.concat(Category.where(parent_category_id: parent_category_ids).pluck(:id))
+        end
+
+        Category.where(id: category_ids.uniq).order(:position)
+      end
+
       def ensure_admin
         # Your admin constraint logic here
       end
diff --git a/assets/javascripts/discourse/components/user-menu/workflow-notifications-list-empty-state.gjs b/assets/javascripts/discourse/components/user-menu/workflow-notifications-list-empty-state.gjs
new file mode 100644
index 0000000..2fffe64
--- /dev/null
+++ b/assets/javascripts/discourse/components/user-menu/workflow-notifications-list-empty-state.gjs
@@ -0,0 +1,25 @@
+import Component from "@glimmer/component";
+import { trustHTML } from "@ember/template";
+import getURL from "discourse/lib/get-url";
+import { i18n } from "discourse-i18n";
+
+export default class WorkflowNotificationsListEmptyState extends Component {
+  get body() {
+    return trustHTML(
+      i18n("user_menu.no_workflow_notifications_body", {
+        preferencesUrl: getURL("/my/preferences/notifications"),
+      })
+    );
+  }
+
+  <template>
+    <div class="empty-state">
+      <span class="empty-state-title">
+        {{i18n "user_menu.no_workflow_notifications_title"}}
+      </span>
+      <div class="empty-state-body">
+        <p>{{this.body}}</p>
+      </div>
+    </div>
+  </template>
+}
diff --git a/assets/javascripts/discourse/components/user-menu/workflow-notifications-list-empty-state.hbs b/assets/javascripts/discourse/components/user-menu/workflow-notifications-list-empty-state.hbs
deleted file mode 100644
index d3e70e0..0000000
--- a/assets/javascripts/discourse/components/user-menu/workflow-notifications-list-empty-state.hbs
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="empty-state">
-  <span class="empty-state-title">
-    {{i18n "user_menu.no_workflow_notifications_title"}}
-  </span>
-  <div class="empty-state-body">
-    <p>
-      {{html-safe
-        (i18n
-          "user_menu.no_workflow_notifications_body"
-          preferencesUrl=(get-url "/my/preferences/notifications")
-        )
-      }}
-    </p>
-  </div>
-</div>
\ No newline at end of file
diff --git a/assets/javascripts/discourse/components/user-menu/workflow-notifications-list-empty-state.js b/assets/javascripts/discourse/components/user-menu/workflow-notifications-list-empty-state.js
deleted file mode 100644
index 742bb3c..0000000
--- a/assets/javascripts/discourse/components/user-menu/workflow-notifications-list-empty-state.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import templateOnly from "@ember/component/template-only";
-
-export default templateOnly();
diff --git a/assets/javascripts/discourse/connectors/discovery-list-container-top/z-workflow-burndown-chart.gjs b/assets/javascripts/discourse/connectors/discovery-list-container-top/z-workflow-burndown-chart.gjs
index 627df4f..ad02242 100644
--- a/assets/javascripts/discourse/connectors/discovery-list-container-top/z-workflow-burndown-chart.gjs
+++ b/assets/javascripts/discourse/connectors/discovery-list-container-top/z-workflow-burndown-chart.gjs
@@ -4,6 +4,7 @@ import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import didUpdate from "@ember/render-modifiers/modifiers/did-update";
 import { service } from "@ember/service";
+import { trustHTML } from "@ember/template";
 import { ajax } from "discourse/lib/ajax";
 import { extractError } from "discourse/lib/ajax-error";
 import loadChartJS from "discourse/lib/load-chart-js";
@@ -121,7 +122,7 @@ export default class WorkflowBurndownChartConnector extends Component {
       const color = this.asHexColor(series.color);
       return {
         ...series,
-        color_style: color ? `background-color: ${color};` : null,
+        color_style: color ? trustHTML(`background-color: ${color};`) : null,
       };
     });
   }
diff --git a/assets/stylesheets/common/workflow_common.scss b/assets/stylesheets/common/workflow_common.scss
index fecac7a..78f0b8b 100644
--- a/assets/stylesheets/common/workflow_common.scss
+++ b/assets/stylesheets/common/workflow_common.scss
@@ -129,6 +129,256 @@ body.workflow-topic {
     color: var(--danger);
     font-weight: 600;
   }
+
+  .workflow-editor__steps-tabs {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .workflow-visual-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .workflow-visual-editor__add-step {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+
+  .workflow-visual-editor__new-step-name {
+    margin-bottom: 0;
+  }
+
+  .workflow-visual-editor__lanes {
+    display: grid;
+    gap: 1rem;
+  }
+
+  .workflow-visual-editor__board {
+    position: relative;
+  }
+
+  .workflow-visual-editor__edge-layer,
+  .workflow-visual-editor__edge-controls {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .workflow-visual-editor__edge-layer {
+    z-index: 4;
+    overflow: visible;
+
+    marker path {
+      fill: var(--primary-medium);
+    }
+  }
+
+  .workflow-visual-editor__edge-path {
+    fill: none;
+    stroke: var(--primary-medium);
+    stroke-width: 2;
+    marker-end: url("#workflow-visual-editor-arrowhead");
+  }
+
+  .workflow-visual-editor__edge-path--preview {
+    stroke: var(--tertiary);
+    stroke-dasharray: 5 4;
+  }
+
+  .workflow-visual-editor__edge-controls {
+    z-index: 5;
+  }
+
+  .workflow-visual-editor__lane {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    border: 2px solid var(--primary-low);
+    border-radius: var(--d-border-radius);
+    background: var(--secondary);
+    min-height: 180px;
+    overflow: hidden;
+  }
+
+  .workflow-visual-editor__lane-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    background: var(--primary-very-low);
+    border-bottom: 1px solid var(--primary-low);
+    font-weight: 700;
+    padding: 0.6rem 0.75rem;
+  }
+
+  .workflow-visual-editor__lane-title {
+    min-width: 0;
+  }
+
+  .workflow-visual-editor__add-step-to-lane {
+    margin-left: auto;
+  }
+
+  .workflow-visual-editor__lane-steps {
+    display: grid;
+    flex: 1;
+    grid-auto-columns: minmax(220px, 1fr);
+    grid-auto-flow: column;
+    gap: 0.75rem;
+    padding: 0 0.75rem;
+  }
+
+  .workflow-visual-editor__position-slot {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    border-left: 1px dashed var(--primary-low);
+    gap: 0.75rem;
+    min-height: 7rem;
+    padding-left: 0.75rem;
+
+    &:first-child {
+      border-left: 0;
+      padding-left: 0;
+    }
+  }
+
+  .workflow-visual-editor__step {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--secondary);
+    border: 1px solid var(--primary-low);
+    border-radius: var(--d-border-radius);
+    box-shadow: 0 1px 3px color-mix(in srgb, var(--primary) 12%, transparent);
+    cursor: grab;
+    min-width: 132px;
+    padding: 0.75rem;
+    width: 60%;
+  }
+
+  .workflow-visual-editor__delete-step {
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-height: 0;
+    min-width: 0;
+    padding: 0.2rem 0.35rem;
+    transform: translate(35%, -35%);
+    z-index: 7;
+  }
+
+  .workflow-visual-editor__step-title {
+    position: relative;
+    display: block;
+    margin: 0;
+    width: 100%;
+  }
+
+  .workflow-visual-editor__step-number {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .workflow-visual-editor__step-label {
+    display: block;
+    padding: 0 1.25rem;
+    text-align: center;
+  }
+
+  .workflow-visual-editor__connector-handle {
+    position: absolute;
+    z-index: 6;
+    width: 0.75rem;
+    height: 0.75rem;
+    border: 1px dotted var(--primary-high);
+    border-radius: 50%;
+    background: var(--secondary);
+    cursor: crosshair;
+    padding: 0;
+  }
+
+  .workflow-visual-editor__connector-handle--connected {
+    border-style: solid;
+    background: var(--tertiary-low);
+  }
+
+  .workflow-visual-editor__connector-handle--selected {
+    outline: 2px solid var(--tertiary);
+    outline-offset: 2px;
+  }
+
+  .workflow-visual-editor__connector-handle--top {
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .workflow-visual-editor__connector-handle--right {
+    top: 50%;
+    right: 0;
+    transform: translate(50%, -50%);
+  }
+
+  .workflow-visual-editor__connector-handle--bottom {
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 50%);
+  }
+
+  .workflow-visual-editor__connector-handle--left {
+    top: 50%;
+    left: 0;
+    transform: translate(-50%, -50%);
+  }
+
+  .workflow-visual-editor__options {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    list-style: none;
+    margin: 0;
+  }
+
+  .workflow-visual-editor__option {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--primary-low);
+    border-radius: var(--d-border-radius);
+    background: var(--secondary);
+    box-shadow: 0 1px 3px color-mix(in srgb, var(--primary) 12%, transparent);
+    cursor: default;
+    padding: 0.25rem;
+    pointer-events: auto;
+    transform: translate(-50%, -50%);
+  }
+
+  .workflow-visual-editor__delete-option {
+    align-self: stretch;
+    border-radius: calc(var(--d-border-radius) - 1px) 0 0
+      calc(var(--d-border-radius) - 1px);
+    margin: -0.25rem 0.25rem -0.25rem -0.25rem;
+    min-height: 0;
+    min-width: 0;
+    padding: 0.25rem 0.4rem;
+  }
+
+  .workflow-visual-editor__option select {
+    margin-bottom: 0;
+    width: 8rem;
+  }
 }
 
 .workflow-quick-filters {
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 9f94729..ed2e585 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -24,7 +24,7 @@ en:
       none:
         workflow: Currently, there are no viewable Workflow topics.
     workflow-name: "Workflow"
-    workflow-step-name:  "Step Name"  
+    workflow-step-name: "Step Name"
     workflow-step-position: "Step"
     workflow-overdue: "Overdue"
     filters:
@@ -164,6 +164,9 @@ en:
             category: "Category"
             ai_enabled: "AI Enabled"
             ai_prompt: "AI Prompt"
+            tabs:
+              list: "List"
+              visual: "Visual"
             overdue_days: "Step Overdue Days Override"
             overdue_days_help: "Blank uses workflow/global defaults. 0 disables overdue behavior for this step."
             title: "Steps"
@@ -186,7 +189,7 @@ en:
               target_position: "Target Position"
               actions:
                 submit: "Submit"
-                start : "Start"
+                start: "Start"
                 accept: "Accept"
                 reject: "Reject"
                 great: "Great"
@@ -201,6 +204,24 @@ en:
                 finish: "Finish"
                 close: "Close"
                 reopen: "Reopen"
+          visual:
+            add_step: "Add step"
+            add_step_title: "Create a workflow step using the selected name and category"
+            add_step_to_lane: "Add step to this swimlane"
+            change_connector_option: "Change the action used by this connector"
+            confirm_delete_connector: "Are you sure you want to permanently delete this connector?"
+            confirm_delete_step: "Are you sure you want to permanently delete this step and all related connectors?"
+            connector_handles:
+              top: "Top connector handle for %{step}"
+              right: "Right connector handle for %{step}"
+              bottom: "Bottom connector handle for %{step}"
+              left: "Left connector handle for %{step}"
+            default_step_name: "New step"
+            delete_connector: "Delete connector"
+            delete_step: "Delete step"
+            loading: "Loading workflow visual..."
+            new_step_name: "New step name"
+            unknown_category: "Unknown category"
           back: "Back"
           save: "Save"
           saved: "Workflow saved!"
diff --git a/config/routes.rb b/config/routes.rb
index 2db2831..da15f1a 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -3,20 +3,21 @@
   mount ::DiscourseWorkflow::Engine, at: "discourse-workflow"
 
   scope "/admin/plugins/discourse-workflow" do
-    resources :workflows,
-       controller: "discourse_workflow/admin/workflows" do
+    resources :workflows, controller: "discourse_workflow/admin/workflows" do
       resources :workflow_steps,
-          only: %i[index edit show],
-          controller: "discourse_workflow/admin/workflow_steps" do
-            resources :workflow_step_options,
-              only: %i[index edit show],
-              controller: "discourse_workflow/admin/workflow_step_options"
-          end
+                only: %i[index edit show],
+                controller: "discourse_workflow/admin/workflow_steps" do
+        resources :workflow_step_options,
+                  only: %i[index edit show],
+                  controller: "discourse_workflow/admin/workflow_step_options"
+      end
     end
     resources :workflow_steps,
               only: %i[create update destroy],
               path: "workflow_steps",
-              controller: "discourse_workflow/admin/workflow_steps"
+              controller: "discourse_workflow/admin/workflow_steps" do
+      member { put :reorder }
+    end
     resources :workflow_step_options,
               only: %i[create update destroy],
               path: "workflow_step_options",
diff --git a/plugin.rb b/plugin.rb
index f87cf0f..8178ca4 100644
--- a/plugin.rb
+++ b/plugin.rb
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 # name: discourse-workflow
 # about: A topic-based workflow engine for Discourse
-# version: 0.4.1
+# version: 0.5.0
 # authors: Robert Barrow
 # contact_emails: robert@pavilion.tech
 # url: https://github.com/merefield/discourse-workflow
diff --git a/spec/lib/admin_route_source_spec.rb b/spec/lib/admin_route_source_spec.rb
index a7679bd..f819bc4 100644
--- a/spec/lib/admin_route_source_spec.rb
+++ b/spec/lib/admin_route_source_spec.rb
@@ -6,23 +6,19 @@
   it "loads step options from the canonical parent route key" do
     route_path =
       File.expand_path(
-        "../../assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-steps-options.js",
+        "../../admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/steps/options.js",
         __dir__,
       )
     source = File.read(route_path)
 
-    expect(source).to include(
-      '"adminPlugins.show.discourse-workflow-workflows-steps"',
-    )
-    expect(source).not_to include(
-      '"admin.plugins.show.discourse-workflow.workflows.steps"',
-    )
+    expect(source).to include('"adminPlugins.show.discourse-workflow-workflows.steps"')
+    expect(source).not_to include('"admin.plugins.show.discourse-workflow.workflows.steps"')
   end
 
   it "derives workflow id in setupController without nested router path traversal" do
     route_path =
       File.expand_path(
-        "../../assets/javascripts/discourse/admin/routes/admin-plugins-show-discourse-workflow-workflows-steps-options-edit.js",
+        "../../admin/assets/javascripts/discourse/routes/admin-plugins/show/discourse-workflow-workflows/steps/options/edit.js",
         __dir__,
       )
     source = File.read(route_path)
diff --git a/spec/requests/admin/workflow_step_options_controller_spec.rb b/spec/requests/admin/workflow_step_options_controller_spec.rb
index 1f519a5..7c1f2d1 100644
--- a/spec/requests/admin/workflow_step_options_controller_spec.rb
+++ b/spec/requests/admin/workflow_step_options_controller_spec.rb
@@ -43,6 +43,21 @@
     expect(DiscourseWorkflow::WorkflowStepOption.order(:id).last.position).to eq(2)
   end
 
+  it "updates the workflow option used by a step option" do
+    put "/admin/plugins/discourse-workflow/workflow_step_options/#{step_option.id}.json",
+        params: {
+          workflow_step_option: {
+            workflow_step_id: step_1.id,
+            workflow_option_id: new_option.id,
+            target_step_id: step_2.id,
+            position: step_option.position,
+          },
+        }
+
+    expect(response.status).to eq(200)
+    expect(step_option.reload.workflow_option_id).to eq(new_option.id)
+  end
+
   it "does not add per-option queries when listing step options" do
     get "/admin/plugins/discourse-workflow/workflows/#{workflow.id}/workflow_steps/#{step_1.id}/workflow_step_options.json"
     base_query_count =
diff --git a/spec/requests/admin/workflow_steps_controller_spec.rb b/spec/requests/admin/workflow_steps_controller_spec.rb
index 53c9b6b..228009f 100644
--- a/spec/requests/admin/workflow_steps_controller_spec.rb
+++ b/spec/requests/admin/workflow_steps_controller_spec.rb
@@ -61,4 +61,135 @@
 
     expect(expanded_query_count).to be <= base_query_count + 2
   end
+
+  it "does not include every root category as a visual lane for top-level workflow steps" do
+    unrelated_root_category = Fabricate(:category)
+    child_of_workflow_category = Fabricate(:category, parent_category_id: category_1.id)
+
+    get "/admin/plugins/discourse-workflow/workflows/#{workflow.id}/workflow_steps.json"
+
+    category_ids = response.parsed_body["workflow_categories"].map { |category| category["id"] }
+
+    expect(category_ids).to contain_exactly(category_1.id, category_2.id)
+    expect(category_ids).not_to include(unrelated_root_category.id)
+    expect(category_ids).not_to include(child_of_workflow_category.id)
+  end
+
+  it "includes sibling subcategory lanes for workflow steps under a shared parent category" do
+    parent_category = Fabricate(:category)
+    subcategory_1 = Fabricate(:category, parent_category_id: parent_category.id)
+    subcategory_2 = Fabricate(:category, parent_category_id: parent_category.id)
+    unused_sibling = Fabricate(:category, parent_category_id: parent_category.id)
+
+    step_1.update!(category_id: subcategory_1.id)
+    step_2.update!(category_id: subcategory_2.id)
+
+    get "/admin/plugins/discourse-workflow/workflows/#{workflow.id}/workflow_steps.json"
+
+    category_ids = response.parsed_body["workflow_categories"].map { |category| category["id"] }
+
+    expect(category_ids).to include(subcategory_1.id, subcategory_2.id, unused_sibling.id)
+    expect(category_ids).not_to include(parent_category.id)
+  end
+
+  it "deletes incoming and outgoing step options when destroying a workflow step" do
+    category_3 = Fabricate(:category)
+    step_3 =
+      Fabricate(:workflow_step, workflow_id: workflow.id, category_id: category_3.id, position: 3)
+    incoming_step_option =
+      Fabricate(
+        :workflow_step_option,
+        workflow_step_id: step_2.id,
+        workflow_option_id: option.id,
+        target_step_id: step_1.id,
+        position: 1,
+      )
+    unrelated_step_option =
+      Fabricate(
+        :workflow_step_option,
+        workflow_step_id: step_2.id,
+        workflow_option_id: option.id,
+        target_step_id: step_3.id,
+        position: 2,
+      )
+    outgoing_step_option_id = step_option_1.id
+    incoming_step_option_id = incoming_step_option.id
+    unrelated_step_option_id = unrelated_step_option.id
+
+    delete "/admin/plugins/discourse-workflow/workflow_steps/#{step_1.id}.json"
+
+    expect(response.status).to eq(204)
+    expect(DiscourseWorkflow::WorkflowStep.exists?(step_1.id)).to eq(false)
+    expect(DiscourseWorkflow::WorkflowStepOption.exists?(outgoing_step_option_id)).to eq(false)
+    expect(DiscourseWorkflow::WorkflowStepOption.exists?(incoming_step_option_id)).to eq(false)
+    expect(DiscourseWorkflow::WorkflowStepOption.exists?(unrelated_step_option_id)).to eq(true)
+  end
+
+  it "rolls back step option deletion when workflow step destroy raises" do
+    incoming_step_option =
+      Fabricate(
+        :workflow_step_option,
+        workflow_step_id: step_2.id,
+        workflow_option_id: option.id,
+        target_step_id: step_1.id,
+        position: 2,
+      )
+
+    allow_any_instance_of(DiscourseWorkflow::WorkflowStep).to receive(
+      :destroy!,
+    ).and_wrap_original do |method, *args|
+      method.receiver.errors.add(:base, "forced failure")
+      raise ActiveRecord::RecordNotDestroyed.new("forced failure", method.receiver)
+    end
+
+    delete "/admin/plugins/discourse-workflow/workflow_steps/#{step_1.id}.json"
+
+    expect(response.status).to eq(422)
+    expect(DiscourseWorkflow::WorkflowStep.exists?(step_1.id)).to eq(true)
+    expect(DiscourseWorkflow::WorkflowStepOption.exists?(step_option_1.id)).to eq(true)
+    expect(DiscourseWorkflow::WorkflowStepOption.exists?(incoming_step_option.id)).to eq(true)
+  end
+
+  it "reorders a workflow step and displaced step atomically" do
+    put "/admin/plugins/discourse-workflow/workflow_steps/#{step_1.id}/reorder.json",
+        params: {
+          workflow_step: {
+            category_id: category_2.id,
+            position: 2,
+          },
+        }
+
+    expect(response.status).to eq(200)
+    expect(step_1.reload.category_id).to eq(category_2.id)
+    expect(step_1.position).to eq(2)
+    expect(step_2.reload.category_id).to eq(category_2.id)
+    expect(step_2.position).to eq(1)
+  end
+
+  it "rolls back displaced step position when reorder fails" do
+    allow_any_instance_of(DiscourseWorkflow::WorkflowStep).to receive(
+      :update!,
+    ).and_wrap_original do |method, *args|
+      if method.receiver.id == step_1.id
+        method.receiver.errors.add(:base, "forced failure")
+        raise ActiveRecord::RecordInvalid.new(method.receiver)
+      end
+
+      method.call(*args)
+    end
+
+    put "/admin/plugins/discourse-workflow/workflow_steps/#{step_1.id}/reorder.json",
+        params: {
+          workflow_step: {
+            category_id: category_2.id,
+            position: 2,
+          },
+        }
+
+    expect(response.status).to eq(422)
+    expect(step_1.reload.category_id).to eq(category_1.id)
+    expect(step_1.position).to eq(1)
+    expect(step_2.reload.category_id).to eq(category_2.id)
+    expect(step_2.position).to eq(2)
+  end
 end
diff --git a/spec/system/page_objects/pages/workflow_admin_visual.rb b/spec/system/page_objects/pages/workflow_admin_visual.rb
new file mode 100644
index 0000000..d63309a
--- /dev/null
+++ b/spec/system/page_objects/pages/workflow_admin_visual.rb
@@ -0,0 +1,794 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Pages
+    class WorkflowAdminVisual < PageObjects::Pages::Base
+      def visit_workflow(workflow)
+        page.visit "/admin/plugins/discourse-workflow/workflows/#{workflow.id}/edit"
+        self
+      end
+
+      def switch_to_visual
+        click_button "Visual"
+        self
+      end
+
+      def has_steps_tab?(label)
+        has_css?(".workflow-editor__steps-tab", text: label)
+      end
+
+      def has_visual?
+        has_css?(".workflow-visual-editor")
+      end
+
+      def has_step?(step, text: nil)
+        options = text ? { text: text } : {}
+        has_css?(step_selector(step), **options)
+      end
+
+      def has_no_step?(step)
+        has_no_css?(step_selector(step))
+      end
+
+      def has_lane?(category, text: nil)
+        options = text ? { text: text } : {}
+        has_css?(lane_selector(category), **options)
+      end
+
+      def has_no_lane?(category)
+        has_no_css?(lane_selector(category))
+      end
+
+      def add_step_from_lane(category)
+        within(lane_selector(category)) { find(".workflow-visual-editor__add-step-to-lane").click }
+
+        self
+      end
+
+      def has_new_step_editor?
+        has_css?(".workflow-step-editor")
+      end
+
+      def has_new_step_category?(category)
+        has_current_path?(/category_id=#{category.id}/) &&
+          has_css?(".workflow-step-editor", text: category.name)
+      end
+
+      def has_step_in_lane?(step, category)
+        has_css?("#{lane_selector(category)} #{step_selector(step)}")
+      end
+
+      def has_step_in_lane_position?(step, category, position)
+        has_css?("#{position_selector(category, position)} #{step_selector(step)}")
+      end
+
+      def has_step_width_ratio?(step, ratio)
+        has_css?(step_selector(step)) && page.evaluate_script(<<~JS, step.id, ratio)
+          (() => {
+            const stepId = arguments[0];
+            const expectedRatio = arguments[1];
+            const step = document.querySelector(`.workflow-visual-editor__step[data-workflow-step-id="${stepId}"]`);
+            const slot = step.closest(".workflow-visual-editor__position-slot");
+            const stepRect = step.getBoundingClientRect();
+            const slotRect = slot.getBoundingClientRect();
+            const actualRatio = stepRect.width / slotRect.width;
+
+            return Math.abs(actualRatio - expectedRatio) < 0.05;
+          })();
+        JS
+      end
+
+      def has_centered_step_label?(step)
+        has_css?(step_selector(step)) && page.evaluate_script(<<~JS, step.id)
+          (() => {
+            const stepId = arguments[0];
+            const step = document.querySelector(`.workflow-visual-editor__step[data-workflow-step-id="${stepId}"]`);
+            const number = step.querySelector(".workflow-visual-editor__step-number");
+            const label = step.querySelector(".workflow-visual-editor__step-label");
+            const stepRect = step.getBoundingClientRect();
+            const labelRect = label.getBoundingClientRect();
+            const stepCenter = stepRect.left + stepRect.width / 2;
+            const labelCenter = labelRect.left + labelRect.width / 2;
+
+            return number && label && Math.abs(stepCenter - labelCenter) <= 2;
+          })();
+        JS
+      end
+
+      def has_step_centered_in_lane_content?(step)
+        has_css?(step_selector(step)) && page.evaluate_script(<<~JS, step.id)
+          (() => {
+            const stepId = arguments[0];
+            const step = document.querySelector(`.workflow-visual-editor__step[data-workflow-step-id="${stepId}"]`);
+            const laneContent = step.closest(".workflow-visual-editor__lane-steps");
+            const stepRect = step.getBoundingClientRect();
+            const laneContentRect = laneContent.getBoundingClientRect();
+            const stepCenter = stepRect.top + stepRect.height / 2;
+            const laneContentCenter = laneContentRect.top + laneContentRect.height / 2;
+            const laneContentStyle = window.getComputedStyle(laneContent);
+
+            return Math.abs(stepCenter - laneContentCenter) <= 2 &&
+              laneContentStyle.paddingTop === "0px";
+          })();
+        JS
+      end
+
+      def has_option?(step_option, text: nil)
+        options = text ? { text: text } : {}
+        has_css?(option_selector(step_option), **options)
+      end
+
+      def has_any_option?(text:)
+        has_css?(".workflow-visual-editor__option", text: text)
+      end
+
+      def has_selected_option_label?(step_option, text)
+        has_css?(option_selector(step_option)) && page.evaluate_script(<<~JS, step_option.id, text)
+            (() => {
+              const stepOptionId = arguments[0];
+              const expectedText = arguments[1];
+              const select = document.querySelector(
+                `.workflow-visual-editor__option[data-workflow-step-option-id="${stepOptionId}"] select`
+              );
+
+              return select?.selectedOptions?.[0]?.textContent.trim() === expectedText;
+            })();
+          JS
+      end
+
+      def has_any_option_control?
+        has_css?(".workflow-visual-editor__option")
+      end
+
+      def has_no_new_arrow_option_control?
+        has_no_css?(".workflow-visual-editor__link-option") && has_no_content?("New arrow option")
+      end
+
+      def has_connector_handles?(step)
+        %w[top right bottom left].all? do |side|
+          has_css?(
+            "#{connector_handle_selector(step, side)}[aria-label='#{side.capitalize} connector handle for #{step.name}']",
+          )
+        end
+      end
+
+      def has_native_drag_payloads_for?(step)
+        has_css?(step_selector(step)) &&
+          drag_start_payload(step_selector(step)) == "workflow-step:#{step.id}" &&
+          drag_start_payload(connector_handle_selector(step, "right")) ==
+            "workflow-connector:#{step.id}:right"
+      end
+
+      def has_selected_connector_handle?(step, side)
+        has_css?(
+          "#{connector_handle_selector(step, side)}.workflow-visual-editor__connector-handle--selected[aria-pressed='true']",
+        )
+      end
+
+      def has_arrow_link_for_option?(step_option)
+        has_css?("#{option_selector(step_option)}") &&
+          has_css?(".workflow-visual-editor__edge-path")
+      end
+
+      def has_only_orthogonal_arrow_paths?
+        has_css?(".workflow-visual-editor__edge-path") &&
+          all(".workflow-visual-editor__edge-path").all? do |path|
+            path["d"].exclude?("C") && path["d"].exclude?("Q")
+          end
+      end
+
+      def has_forward_arrow_path?
+        has_css?(".workflow-visual-editor__edge-path") &&
+          all(".workflow-visual-editor__edge-path").any? do |path|
+            path["d"].include?(" H") && path["d"].include?(" V")
+          end
+      end
+
+      def has_no_arrow_crossing_step_boxes?
+        has_css?(".workflow-visual-editor__edge-path") && page.evaluate_script(<<~JS)
+            (() => {
+            const parsePathSegments = (path) => {
+              const tokens = path.getAttribute("d").match(/[MLHV]|-?\\d+(?:\\.\\d+)?/g) || [];
+              const segments = [];
+              let index = 0;
+              let command = null;
+              let current = { x: 0, y: 0 };
+
+              while (index < tokens.length) {
+                const token = tokens[index++];
+                if (["M", "L", "H", "V"].includes(token)) {
+                  command = token;
+                } else {
+                  index--;
+                }
+
+                if (command === "M") {
+                  current = { x: Number(tokens[index++]), y: Number(tokens[index++]) };
+                } else if (command === "L") {
+                  const next = { x: Number(tokens[index++]), y: Number(tokens[index++]) };
+                  segments.push({ x1: current.x, y1: current.y, x2: next.x, y2: next.y });
+                  current = next;
+                } else if (command === "H") {
+                  const next = { x: Number(tokens[index++]), y: current.y };
+                  segments.push({ x1: current.x, y1: current.y, x2: next.x, y2: next.y });
+                  current = next;
+                } else if (command === "V") {
+                  const next = { x: current.x, y: Number(tokens[index++]) };
+                  segments.push({ x1: current.x, y1: current.y, x2: next.x, y2: next.y });
+                  current = next;
+                }
+              }
+
+              return segments;
+            };
+            const intersects = (segment, rect) => {
+              const padding = 6;
+              const left = rect.left + padding;
+              const right = rect.right - padding;
+              const top = rect.top + padding;
+              const bottom = rect.bottom - padding;
+              const minX = Math.min(segment.x1, segment.x2);
+              const maxX = Math.max(segment.x1, segment.x2);
+              const minY = Math.min(segment.y1, segment.y2);
+              const maxY = Math.max(segment.y1, segment.y2);
+
+              if (segment.y1 === segment.y2) {
+                return segment.y1 >= top && segment.y1 <= bottom && maxX >= left && minX <= right;
+              }
+
+              if (segment.x1 === segment.x2) {
+                return segment.x1 >= left && segment.x1 <= right && maxY >= top && minY <= bottom;
+              }
+
+              return false;
+            };
+            const boardRect = document.querySelector(".workflow-visual-editor__board").getBoundingClientRect();
+            const stepRects = Array.from(document.querySelectorAll(".workflow-visual-editor__step")).map((step) => {
+              const rect = step.getBoundingClientRect();
+              return {
+                id: step.dataset.workflowStepId,
+                left: rect.left - boardRect.left,
+                right: rect.right - boardRect.left,
+                top: rect.top - boardRect.top,
+                bottom: rect.bottom - boardRect.top,
+              };
+            });
+
+            return Array.from(document.querySelectorAll(".workflow-visual-editor__edge-path")).every((path) => {
+              const endpointStepIds = [path.dataset.workflowSourceStepId, path.dataset.workflowTargetStepId];
+
+              return parsePathSegments(path).every((segment) => {
+                return stepRects.every((rect) => endpointStepIds.includes(rect.id) || !intersects(segment, rect));
+              });
+            });
+            })();
+          JS
+      end
+
+      def has_no_overlapping_arrow_segments?
+        has_css?(".workflow-visual-editor__edge-path") && page.evaluate_script(<<~JS)
+          (() => {
+            #{path_geometry_helpers}
+
+            const overlaps = (segment, otherSegment) => {
+              const rangesOverlap = (start, end, otherStart, otherEnd) => {
+                const min = Math.min(start, end);
+                const max = Math.max(start, end);
+                const otherMin = Math.min(otherStart, otherEnd);
+                const otherMax = Math.max(otherStart, otherEnd);
+                return Math.max(min, otherMin) < Math.min(max, otherMax);
+              };
+
+              if (segment.y1 === segment.y2 && otherSegment.y1 === otherSegment.y2) {
+                return segment.y1 === otherSegment.y1 && rangesOverlap(segment.x1, segment.x2, otherSegment.x1, otherSegment.x2);
+              }
+
+              if (segment.x1 === segment.x2 && otherSegment.x1 === otherSegment.x2) {
+                return segment.x1 === otherSegment.x1 && rangesOverlap(segment.y1, segment.y2, otherSegment.y1, otherSegment.y2);
+              }
+
+              return false;
+            };
+            const segments = Array.from(document.querySelectorAll(".workflow-visual-editor__edge-path")).flatMap((path, pathIndex) => {
+              return parsePathSegments(path).map((segment) => ({ ...segment, pathIndex }));
+            });
+
+            return segments.every((segment, index) => {
+              return segments.slice(index + 1).every((otherSegment) => {
+                return segment.pathIndex === otherSegment.pathIndex || !overlaps(segment, otherSegment);
+              });
+            });
+          })();
+        JS
+      end
+
+      def has_no_double_back_arrow_paths?
+        has_css?(".workflow-visual-editor__edge-path") && page.evaluate_script(<<~JS)
+          (() => {
+            #{path_geometry_helpers}
+
+            const doublesBack = (segments) => {
+              return segments.slice(1).some((segment, index) => {
+                const previous = segments[index];
+                const bothHorizontal = previous.y1 === previous.y2 && segment.y1 === segment.y2;
+                const bothVertical = previous.x1 === previous.x2 && segment.x1 === segment.x2;
+
+                if (bothHorizontal && previous.y1 === segment.y1) {
+                  return Math.sign(previous.x2 - previous.x1) !== Math.sign(segment.x2 - segment.x1);
+                }
+
+                if (bothVertical && previous.x1 === segment.x1) {
+                  return Math.sign(previous.y2 - previous.y1) !== Math.sign(segment.y2 - segment.y1);
+                }
+
+                return false;
+              });
+            };
+
+            return Array.from(document.querySelectorAll(".workflow-visual-editor__edge-path")).every((path) => {
+              return !doublesBack(parsePathSegments(path));
+            });
+          })();
+        JS
+      end
+
+      def has_arrow_paths_within_lane_stack?
+        has_css?(".workflow-visual-editor__edge-path") && page.evaluate_script(<<~JS)
+          (() => {
+            #{path_geometry_helpers}
+
+            const boardRect = document.querySelector(".workflow-visual-editor__board").getBoundingClientRect();
+            const laneBounds = Array.from(document.querySelectorAll(".workflow-visual-editor__lane")).map((lane) => {
+              const rect = lane.getBoundingClientRect();
+              return {
+                top: rect.top - boardRect.top,
+                bottom: rect.bottom - boardRect.top,
+              };
+            });
+            const top = Math.min(...laneBounds.map((bound) => bound.top));
+            const bottom = Math.max(...laneBounds.map((bound) => bound.bottom));
+
+            return Array.from(document.querySelectorAll(".workflow-visual-editor__edge-path")).every((path) => {
+              return parsePathSegments(path).every((segment) => {
+                return segment.y1 >= top && segment.y1 <= bottom && segment.y2 >= top && segment.y2 <= bottom;
+              });
+            });
+          })();
+        JS
+      end
+
+      def has_no_arrow_travelling_along_lane_borders?
+        has_css?(".workflow-visual-editor__edge-path") && page.evaluate_script(<<~JS)
+          (() => {
+            #{path_geometry_helpers}
+
+            const boardRect = document.querySelector(".workflow-visual-editor__board").getBoundingClientRect();
+            const laneBounds = Array.from(document.querySelectorAll(".workflow-visual-editor__lane")).map((lane) => {
+              const rect = lane.getBoundingClientRect();
+              return {
+                left: rect.left - boardRect.left,
+                right: rect.right - boardRect.left,
+                top: rect.top - boardRect.top,
+                bottom: rect.bottom - boardRect.top,
+              };
+            });
+            const overlaps = (segment, lane) => {
+              const travelsAlongLaneEdge = Math.abs(segment.y1 - lane.top) <= 2 ||
+                Math.abs(segment.y1 - lane.bottom) <= 2;
+
+              if (segment.y1 !== segment.y2 || !travelsAlongLaneEdge) {
+                return false;
+              }
+
+              const segmentLeft = Math.min(segment.x1, segment.x2);
+              const segmentRight = Math.max(segment.x1, segment.x2);
+              return Math.min(segmentRight, lane.right) > Math.max(segmentLeft, lane.left);
+            };
+
+            return Array.from(document.querySelectorAll(".workflow-visual-editor__edge-path")).every((path) => {
+              return parsePathSegments(path).every((segment) => {
+                return laneBounds.every((lane) => !overlaps(segment, lane));
+              });
+            });
+          })();
+        JS
+      end
+
+      def has_option_on_longest_vertical_segment?(step_option)
+        has_css?(option_selector(step_option)) && page.evaluate_script(<<~JS, step_option.id)
+          (() => {
+            #{path_geometry_helpers}
+
+            const stepOptionId = arguments[0];
+            const path = document.querySelector(`.workflow-visual-editor__edge-path[data-workflow-step-option-id="${stepOptionId}"]`);
+            const option = document.querySelector(`.workflow-visual-editor__option[data-workflow-step-option-id="${stepOptionId}"]`);
+            const boardRect = document.querySelector(".workflow-visual-editor__board").getBoundingClientRect();
+            const optionRect = option.getBoundingClientRect();
+            const optionCenter = {
+              x: optionRect.left - boardRect.left + optionRect.width / 2,
+              y: optionRect.top - boardRect.top + optionRect.height / 2,
+            };
+            const verticalSegments = parsePathSegments(path).filter((segment) => segment.x1 === segment.x2);
+            const laneCenters = Array.from(document.querySelectorAll(".workflow-visual-editor__lane")).map((lane) => {
+              const laneRect = lane.getBoundingClientRect();
+              const headerRect = lane.querySelector(".workflow-visual-editor__lane-header")?.getBoundingClientRect();
+
+              return {
+                xLeft: laneRect.left - boardRect.left,
+                xRight: laneRect.right - boardRect.left,
+                y: ((headerRect || laneRect).bottom + laneRect.bottom) / 2 - boardRect.top,
+              };
+            });
+
+            if (!verticalSegments.length) {
+              return true;
+            }
+
+            const candidateRatios = [0.5, 1 / 3, 2 / 3, 0.25, 0.75, 0.2, 0.8, 0.1, 0.9, 0.05];
+
+            return verticalSegments.some((segment) => {
+              const startY = Math.min(segment.y1, segment.y2);
+              const endY = Math.max(segment.y1, segment.y2);
+              const length = endY - startY;
+              const onSegmentX = Math.abs(optionCenter.x - segment.x1) <= 3;
+              const onRatioCandidate = candidateRatios.some((ratio) => {
+                return Math.abs(optionCenter.y - (startY + length * ratio)) <= 3;
+              });
+              const onLaneCenterCandidate = laneCenters.some((laneCenter) => {
+                return segment.x1 >= laneCenter.xLeft &&
+                  segment.x1 <= laneCenter.xRight &&
+                  laneCenter.y >= startY &&
+                  laneCenter.y <= endY &&
+                  Math.abs(optionCenter.y - laneCenter.y) <= 3;
+              });
+
+              return onSegmentX && (onRatioCandidate || onLaneCenterCandidate);
+            });
+          })();
+        JS
+      end
+
+      def has_no_overlapping_option_dropdowns?
+        has_css?(".workflow-visual-editor__option") && page.evaluate_script(<<~JS)
+          (() => {
+            const rects = Array.from(document.querySelectorAll(".workflow-visual-editor__option")).map((option) => {
+              const rect = option.getBoundingClientRect();
+              return {
+                left: rect.left,
+                right: rect.right,
+                top: rect.top,
+                bottom: rect.bottom,
+              };
+            });
+            const overlaps = (rect, otherRect) => {
+              return Math.max(rect.left, otherRect.left) < Math.min(rect.right, otherRect.right) &&
+                Math.max(rect.top, otherRect.top) < Math.min(rect.bottom, otherRect.bottom);
+            };
+
+            return rects.every((rect, index) => {
+              return rects.slice(index + 1).every((otherRect) => !overlaps(rect, otherRect));
+            });
+          })();
+        JS
+      end
+
+      def has_no_option_dropdown_over_step_boxes_for?(step_option)
+        has_css?(option_selector(step_option)) && page.evaluate_script(<<~JS, step_option.id)
+          (() => {
+            const stepOptionId = arguments[0];
+            const overlaps = (rect, otherRect) => {
+              return Math.max(rect.left, otherRect.left) < Math.min(rect.right, otherRect.right) &&
+                Math.max(rect.top, otherRect.top) < Math.min(rect.bottom, otherRect.bottom);
+            };
+            const option = document.querySelector(`.workflow-visual-editor__option[data-workflow-step-option-id="${stepOptionId}"]`);
+            const optionRect = option.getBoundingClientRect();
+            const stepRects = Array.from(document.querySelectorAll(".workflow-visual-editor__step")).map((step) => {
+              return step.getBoundingClientRect();
+            });
+
+            return stepRects.every((stepRect) => !overlaps(optionRect, stepRect));
+          })();
+        JS
+      end
+
+      def has_forward_arrow_from_right_edge?(step_option)
+        has_css?(
+          ".workflow-visual-editor__edge-path[data-workflow-step-option-id='#{step_option.id}'][data-workflow-source-side='right']",
+        )
+      end
+
+      def drag_connector(source_step, target_step)
+        drag(unconnected_handle_selector(source_step), unconnected_handle_selector(target_step))
+        self
+      end
+
+      def click_connector_handle(step, side)
+        find(connector_handle_selector(step, side)).click
+        self
+      end
+
+      def drag_existing_connector_target(current_target_step, new_target_step)
+        drag(
+          connected_handle_selector(current_target_step),
+          unconnected_handle_selector(new_target_step),
+        )
+        self
+      end
+
+      def drag_step_to_lane_position(step, category, position)
+        drag(step_selector(step), position_selector(category, position))
+        self
+      end
+
+      def fill_new_step_name(name)
+        find(".workflow-visual-editor__new-step-name").fill_in(with: name)
+        self
+      end
+
+      def choose_new_step_category(category)
+        PageObjects::Components::SelectKit.new(
+          ".workflow-visual-editor__add-step .category-chooser",
+        ).select_row_by_value(category.id)
+        self
+      end
+
+      def add_step
+        click_button "Add step"
+        self
+      end
+
+      def select_option(step_option, workflow_option)
+        find(
+          "#{option_selector(step_option)} select[data-workflow-step-option-id='#{step_option.id}']",
+        ).find("option[value='#{workflow_option.id}']").select_option
+        self
+      end
+
+      def track_requests
+        page.execute_script(<<~JS)
+          window.__workflowRequestUrls = [];
+
+          if (!window.__workflowRequestTrackingInstalled) {
+            const originalFetch = window.fetch;
+            if (originalFetch) {
+              window.fetch = function(input, ...args) {
+                const url = input?.url || input;
+                window.__workflowRequestUrls.push(String(url));
+                return originalFetch.call(this, input, ...args);
+              };
+            }
+
+            const originalOpen = window.XMLHttpRequest.prototype.open;
+            window.XMLHttpRequest.prototype.open = function(method, url, ...args) {
+              window.__workflowRequestUrls.push(String(url));
+              return originalOpen.call(this, method, url, ...args);
+            };
+
+            window.__workflowRequestTrackingInstalled = true;
+          }
+        JS
+
+        self
+      end
+
+      def has_tracked_request?(url_fragment)
+        page.evaluate_script(<<~JS, url_fragment)
+          (window.__workflowRequestUrls || []).some((url) => url.includes(arguments[0]))
+        JS
+      end
+
+      def tracked_request_count(url_fragment)
+        page.evaluate_script(<<~JS, url_fragment)
+          (window.__workflowRequestUrls || []).filter((url) => url.includes(arguments[0])).length
+        JS
+      end
+
+      def make_page_scrollable
+        page.execute_script("document.documentElement.style.minHeight = '2400px'")
+        self
+      end
+
+      def scroll_window_to(offset)
+        page.execute_script("window.scrollTo(0, arguments[0])", offset)
+        self
+      end
+
+      def window_scroll_y
+        page.evaluate_script("window.scrollY")
+      end
+
+      def has_window_scroll_y?(offset)
+        page.document.synchronize do
+          if page.evaluate_script("Math.abs(window.scrollY - arguments[0]) <= 2", offset)
+            return true
+          end
+
+          raise Capybara::ExpectationNotMet
+        end
+      rescue Capybara::ExpectationNotMet
+        false
+      end
+
+      def delete_option(step_option)
+        find("#{option_selector(step_option)} .workflow-visual-editor__delete-option").click
+        self
+      end
+
+      def delete_step(step)
+        find("#{step_selector(step)} .workflow-visual-editor__delete-step").click
+        self
+      end
+
+      def has_delete_connector_confirmation?
+        has_css?(
+          ".dialog-body",
+          text: "Are you sure you want to permanently delete this connector?",
+        )
+      end
+
+      def confirm_delete_connector
+        find(".dialog-footer .btn-danger").click
+        self
+      end
+
+      def has_delete_step_confirmation?
+        has_css?(
+          ".dialog-body",
+          text: "Are you sure you want to permanently delete this step and all related connectors?",
+        )
+      end
+
+      def confirm_delete_step
+        find(".dialog-footer .btn-danger").click
+        self
+      end
+
+      private
+
+      def step_selector(step)
+        ".workflow-visual-editor__step[data-workflow-step-id='#{step.id}']"
+      end
+
+      def lane_selector(category)
+        ".workflow-visual-editor__lane[data-workflow-category-id='#{category.id}']"
+      end
+
+      def position_selector(category, position)
+        ".workflow-visual-editor__position-slot[data-workflow-category-id='#{category.id}'][data-workflow-position='#{position}']"
+      end
+
+      def option_selector(step_option)
+        ".workflow-visual-editor__option[data-workflow-step-option-id='#{step_option.id}']"
+      end
+
+      def connector_handle_selector(step, side)
+        "#{step_selector(step)} .workflow-visual-editor__connector-handle--#{side}"
+      end
+
+      def connected_handle_selector(step)
+        "#{step_selector(step)} .workflow-visual-editor__connector-handle--connected"
+      end
+
+      def unconnected_handle_selector(step)
+        "#{step_selector(step)} .workflow-visual-editor__connector-handle:not(.workflow-visual-editor__connector-handle--connected)"
+      end
+
+      def path_geometry_helpers
+        <<~JS
+          const parsePathSegments = (path) => {
+            const tokens = path.getAttribute("d").match(/[MLHV]|-?\\d+(?:\\.\\d+)?/g) || [];
+            const segments = [];
+            let index = 0;
+            let command = null;
+            let current = { x: 0, y: 0 };
+
+            while (index < tokens.length) {
+              const token = tokens[index++];
+              if (["M", "L", "H", "V"].includes(token)) {
+                command = token;
+              } else {
+                index--;
+              }
+
+              if (command === "M") {
+                current = { x: Number(tokens[index++]), y: Number(tokens[index++]) };
+              } else if (command === "L") {
+                const next = { x: Number(tokens[index++]), y: Number(tokens[index++]) };
+                segments.push({ x1: current.x, y1: current.y, x2: next.x, y2: next.y });
+                current = next;
+              } else if (command === "H") {
+                const next = { x: Number(tokens[index++]), y: current.y };
+                segments.push({ x1: current.x, y1: current.y, x2: next.x, y2: next.y });
+                current = next;
+              } else if (command === "V") {
+                const next = { x: current.x, y: Number(tokens[index++]) };
+                segments.push({ x1: current.x, y1: current.y, x2: next.x, y2: next.y });
+                current = next;
+              }
+            }
+
+            return segments;
+          };
+        JS
+      end
+
+      def drag(source_selector, target_selector)
+        page.execute_script(<<~JS, source_selector, target_selector)
+          const source = document.querySelector(arguments[0]);
+          const target = document.querySelector(arguments[1]);
+          const dataTransfer = new DataTransfer();
+          const sourceRect = source.getBoundingClientRect();
+          const targetRect = target.getBoundingClientRect();
+
+          source.dispatchEvent(
+            new DragEvent("dragstart", {
+              bubbles: true,
+              cancelable: true,
+              dataTransfer,
+              clientX: sourceRect.left + sourceRect.width / 2,
+              clientY: sourceRect.top + sourceRect.height / 2,
+            })
+          );
+
+          target.dispatchEvent(
+            new DragEvent("dragover", {
+              bubbles: true,
+              cancelable: true,
+              dataTransfer,
+              clientX: targetRect.left + targetRect.width / 2,
+              clientY: targetRect.top + targetRect.height / 2,
+            })
+          );
+
+          target.dispatchEvent(
+            new DragEvent("drop", {
+              bubbles: true,
+              cancelable: true,
+              dataTransfer,
+              clientX: targetRect.left + targetRect.width / 2,
+              clientY: targetRect.top + targetRect.height / 2,
+            })
+          );
+
+          source.dispatchEvent(
+            new DragEvent("dragend", {
+              bubbles: true,
+              cancelable: true,
+              dataTransfer,
+            })
+          );
+        JS
+      end
+
+      def drag_start_payload(selector)
+        page.evaluate_script(<<~JS, selector)
+          (() => {
+            const source = document.querySelector(arguments[0]);
+            const dataTransfer = new DataTransfer();
+            const sourceRect = source.getBoundingClientRect();
+
+            source.dispatchEvent(
+              new DragEvent("dragstart", {
+                bubbles: true,
+                cancelable: true,
+                dataTransfer,
+                clientX: sourceRect.left + sourceRect.width / 2,
+                clientY: sourceRect.top + sourceRect.height / 2,
+              })
+            );
+
+            source.dispatchEvent(
+              new DragEvent("dragend", {
+                bubbles: true,
+                cancelable: true,
+                dataTransfer,
+              })
+            );
+
+            return dataTransfer.getData("text/plain");
+          })();
+        JS
+      end
+    end
+  end
+end
diff --git a/spec/system/workflow_admin_visual_spec.rb b/spec/system/workflow_admin_visual_spec.rb
new file mode 100644
index 0000000..17c234a
--- /dev/null
+++ b/spec/system/workflow_admin_visual_spec.rb
@@ -0,0 +1,323 @@
+# frozen_string_literal: true
+
+require_relative "../plugin_helper"
+
+RSpec.describe "Workflow admin visual" do
+  let(:visual_page) { PageObjects::Pages::WorkflowAdminVisual.new }
+
+  fab!(:admin)
+  fab!(:workflow) { Fabricate(:workflow, name: "Visual workflow") }
+  fab!(:workflow_parent_category, :category)
+  fab!(:review_category) { Fabricate(:category, parent_category_id: workflow_parent_category.id) }
+  fab!(:done_category) { Fabricate(:category, parent_category_id: workflow_parent_category.id) }
+  fab!(:unused_category) { Fabricate(:category, parent_category_id: workflow_parent_category.id) }
+  fab!(:queue_step) do
+    Fabricate(
+      :workflow_step,
+      workflow_id: workflow.id,
+      category_id: review_category.id,
+      position: 1,
+      name: "Queue",
+    )
+  end
+  fab!(:review_step) do
+    Fabricate(
+      :workflow_step,
+      workflow_id: workflow.id,
+      category_id: done_category.id,
+      position: 2,
+      name: "Review",
+    )
+  end
+  fab!(:done_step) do
+    Fabricate(
+      :workflow_step,
+      workflow_id: workflow.id,
+      category_id: done_category.id,
+      position: 3,
+      name: "Done",
+    )
+  end
+  fab!(:next_option) { Fabricate(:workflow_option, slug: "next", name: "Next") }
+  fab!(:back_option) { Fabricate(:workflow_option, slug: "back", name: "Back") }
+  fab!(:queue_to_done_option) do
+    Fabricate(
+      :workflow_step_option,
+      workflow_step_id: queue_step.id,
+      workflow_option_id: next_option.id,
+      target_step_id: done_step.id,
+      position: 1,
+    )
+  end
+
+  before { sign_in(admin) }
+
+  it "shows a list and visual tab for workflow step editing" do
+    visual_page.visit_workflow(workflow)
+
+    expect(visual_page).to have_steps_tab("List")
+    expect(visual_page).to have_steps_tab("Visual")
+
+    visual_page.switch_to_visual
+
+    expect(visual_page).to have_visual
+    expect(visual_page).to have_no_new_arrow_option_control
+    expect(visual_page).to have_step(queue_step, text: "Queue")
+    expect(visual_page).to have_step_width_ratio(queue_step, 0.6)
+    expect(visual_page).to have_centered_step_label(queue_step)
+    expect(visual_page).to have_step_centered_in_lane_content(queue_step)
+    expect(visual_page).to have_connector_handles(queue_step)
+    expect(visual_page).to have_native_drag_payloads_for(queue_step)
+    expect(visual_page).to have_lane(done_category, text: done_category.name)
+    expect(visual_page).to have_lane(unused_category, text: unused_category.name)
+  end
+
+  context "with return connectors" do
+    before do
+      Fabricate(
+        :workflow_step_option,
+        workflow_step_id: review_step.id,
+        workflow_option_id: back_option.id,
+        target_step_id: queue_step.id,
+        position: 1,
+      )
+      Fabricate(
+        :workflow_step_option,
+        workflow_step_id: done_step.id,
+        workflow_option_id: back_option.id,
+        target_step_id: review_step.id,
+        position: 1,
+      )
+
+      visual_page.visit_workflow(workflow).switch_to_visual
+    end
+
+    it "routes visible arrows around intermediate step boxes" do
+      expect(visual_page).to have_arrow_link_for_option(queue_to_done_option)
+      expect(visual_page).to have_no_arrow_crossing_step_boxes
+      expect(visual_page).to have_no_double_back_arrow_paths
+      expect(visual_page).to have_arrow_paths_within_lane_stack
+      expect(visual_page).to have_no_arrow_travelling_along_lane_borders
+      expect(visual_page).to have_no_overlapping_arrow_segments
+      expect(visual_page).to have_forward_arrow_from_right_edge(queue_to_done_option)
+    end
+
+    it "keeps connector option controls readable" do
+      expect(visual_page).to have_no_overlapping_option_dropdowns
+      expect(visual_page).to have_no_option_dropdown_over_step_boxes_for(queue_to_done_option)
+    end
+
+    it "places option controls on readable vertical route segments" do
+      expect(visual_page).to have_option_on_longest_vertical_segment(queue_to_done_option)
+    end
+  end
+
+  it "creates and retargets arrows by dragging between step cards" do
+    visual_page.visit_workflow(workflow).switch_to_visual
+
+    visual_page.drag_connector(queue_step, review_step)
+
+    expect(visual_page).to have_any_option_control
+    step_option =
+      DiscourseWorkflow::WorkflowStepOption.find_by!(
+        workflow_step_id: queue_step.id,
+        target_step_id: review_step.id,
+      )
+    expect(step_option.target_step_id).to eq(review_step.id)
+    expect(visual_page).to have_arrow_link_for_option(step_option)
+    expect(visual_page).to have_only_orthogonal_arrow_paths
+    expect(visual_page).to have_forward_arrow_path
+
+    visual_page.drag_existing_connector_target(review_step, done_step)
+
+    expect(visual_page).to have_option(step_option)
+    expect(step_option.reload.target_step_id).to eq(done_step.id)
+  end
+
+  it "creates arrows from connector handles without dragging" do
+    visual_page.visit_workflow(workflow).switch_to_visual
+
+    visual_page.click_connector_handle(review_step, "right")
+
+    expect(visual_page).to have_selected_connector_handle(review_step, "right")
+
+    visual_page.click_connector_handle(queue_step, "left")
+
+    step_option =
+      DiscourseWorkflow::WorkflowStepOption.find_by!(
+        workflow_step_id: review_step.id,
+        target_step_id: queue_step.id,
+      )
+    expect(visual_page).to have_arrow_link_for_option(step_option)
+  end
+
+  it "updates arrow option labels from the connector dropdown" do
+    visual_page.visit_workflow(workflow).switch_to_visual
+
+    expect(visual_page).to have_option(queue_to_done_option)
+
+    visual_page.track_requests
+    visual_page.select_option(queue_to_done_option, back_option)
+
+    expect(queue_to_done_option.reload.workflow_option_id).to eq(back_option.id)
+    expect(visual_page).to have_tracked_request("/workflow_steps.json")
+    expect(visual_page.tracked_request_count("/workflow_options.json")).to eq(0)
+  end
+
+  it "falls back to workflow option names for untranslated action slugs" do
+    custom_option = Fabricate(:workflow_option, slug: "custom-action", name: "Custom action")
+
+    visual_page.visit_workflow(workflow).switch_to_visual
+
+    expect(visual_page).to have_selected_option_label(queue_to_done_option, "Next")
+
+    visual_page.select_option(queue_to_done_option, custom_option)
+
+    expect(queue_to_done_option.reload.workflow_option_id).to eq(custom_option.id)
+    expect(visual_page).to have_selected_option_label(queue_to_done_option, "Custom action")
+  end
+
+  it "preserves scroll position after visual workflow changes" do
+    visual_page.visit_workflow(workflow).switch_to_visual
+    visual_page.make_page_scrollable.scroll_window_to(500)
+
+    scroll_y = visual_page.window_scroll_y
+
+    visual_page.select_option(queue_to_done_option, back_option)
+
+    expect(queue_to_done_option.reload.workflow_option_id).to eq(back_option.id)
+    expect(visual_page).to have_window_scroll_y(scroll_y)
+  end
+
+  it "deletes arrows from the connector option control after confirmation" do
+    visual_page.visit_workflow(workflow).switch_to_visual
+
+    visual_page.delete_option(queue_to_done_option)
+
+    expect(visual_page).to have_delete_connector_confirmation
+
+    visual_page.confirm_delete_connector
+
+    expect(DiscourseWorkflow::WorkflowStepOption.exists?(queue_to_done_option.id)).to eq(false)
+    expect(visual_page).to have_no_css(
+      ".workflow-visual-editor__edge-path[data-workflow-step-option-id='#{queue_to_done_option.id}']",
+    )
+    expect(visual_page).to have_no_css(
+      ".workflow-visual-editor__option[data-workflow-step-option-id='#{queue_to_done_option.id}']",
+    )
+  end
+
+  it "deletes steps and their incoming and outgoing connectors after confirmation" do
+    incoming_option =
+      Fabricate(
+        :workflow_step_option,
+        workflow_step_id: queue_step.id,
+        workflow_option_id: next_option.id,
+        target_step_id: review_step.id,
+        position: 2,
+      )
+    outgoing_option =
+      Fabricate(
+        :workflow_step_option,
+        workflow_step_id: review_step.id,
+        workflow_option_id: next_option.id,
+        target_step_id: done_step.id,
+        position: 1,
+      )
+
+    visual_page.visit_workflow(workflow).switch_to_visual
+
+    visual_page.delete_step(review_step)
+
+    expect(visual_page).to have_delete_step_confirmation
+
+    visual_page.confirm_delete_step
+
+    expect(DiscourseWorkflow::WorkflowStep.exists?(review_step.id)).to eq(false)
+    expect(DiscourseWorkflow::WorkflowStepOption.exists?(incoming_option.id)).to eq(false)
+    expect(DiscourseWorkflow::WorkflowStepOption.exists?(outgoing_option.id)).to eq(false)
+    expect(DiscourseWorkflow::WorkflowStepOption.exists?(queue_to_done_option.id)).to eq(true)
+    expect(visual_page).to have_no_step(review_step)
+    expect(visual_page).to have_no_css(
+      ".workflow-visual-editor__edge-path[data-workflow-step-option-id='#{incoming_option.id}']",
+    )
+    expect(visual_page).to have_no_css(
+      ".workflow-visual-editor__edge-path[data-workflow-step-option-id='#{outgoing_option.id}']",
+    )
+  end
+
+  it "moves steps between swimlanes by dragging cards" do
+    visual_page.visit_workflow(workflow).switch_to_visual
+
+    visual_page.drag_step_to_lane_position(queue_step, done_category, 1)
+
+    expect(visual_page).to have_step_in_lane(queue_step, done_category)
+    expect(visual_page).to have_lane(review_category, text: review_category.name)
+    expect(queue_step.reload.category_id).to eq(done_category.id)
+  end
+
+  it "removes stale lanes while preserving server-scoped empty sibling lanes" do
+    orphan_parent_category = Fabricate(:category)
+    orphan_category = Fabricate(:category, parent_category_id: orphan_parent_category.id)
+    orphan_step =
+      Fabricate(
+        :workflow_step,
+        workflow_id: workflow.id,
+        category_id: orphan_category.id,
+        position: 4,
+        name: "Temporary lane",
+      )
+
+    visual_page.visit_workflow(workflow).switch_to_visual
+
+    expect(visual_page).to have_lane(orphan_category, text: orphan_category.name)
+
+    orphan_step.destroy!
+
+    visual_page.fill_new_step_name("QA").choose_new_step_category(review_category).add_step
+
+    expect(visual_page).to have_no_lane(orphan_category)
+    expect(visual_page).to have_lane(unused_category, text: unused_category.name)
+  end
+
+  it "moves steps into explicit x-axis positions" do
+    visual_page.visit_workflow(workflow).switch_to_visual
+
+    visual_page.drag_step_to_lane_position(done_step, review_category, 1)
+
+    expect(visual_page).to have_step_in_lane_position(done_step, review_category, 1)
+    expect(done_step.reload.category_id).to eq(review_category.id)
+    expect(done_step.position).to eq(1)
+    expect(queue_step.reload.position).to eq(3)
+  end
+
+  it "adds a step from the visual builder" do
+    visual_page.visit_workflow(workflow).switch_to_visual
+
+    visual_page.fill_new_step_name("QA").choose_new_step_category(review_category).add_step
+
+    step = DiscourseWorkflow::WorkflowStep.find_by!(workflow_id: workflow.id, name: "QA")
+    expect(step.category_id).to eq(review_category.id)
+    expect(step.position).to eq(4)
+    expect(visual_page).to have_step(step, text: "QA")
+  end
+
+  it "uses a position-neutral default name when adding a visual step without a name" do
+    visual_page.visit_workflow(workflow).switch_to_visual
+
+    visual_page.choose_new_step_category(review_category).add_step
+
+    step = DiscourseWorkflow::WorkflowStep.find_by!(workflow_id: workflow.id, name: "New step")
+    expect(step.position).to eq(4)
+    expect(visual_page).to have_step(step, text: "New step")
+  end
+
+  it "opens the new step form from a swimlane with the category preselected" do
+    visual_page.visit_workflow(workflow).switch_to_visual
+
+    visual_page.add_step_from_lane(done_category)
+
+    expect(visual_page).to have_new_step_editor
+    expect(visual_page).to have_new_step_category(done_category)
+  end
+end
diff --git a/test/javascripts/unit/routes/admin-plugins-show-discourse-workflow-workflows-steps-options-edit-route-test.js b/test/javascripts/unit/routes/admin-plugins-show-discourse-workflow-workflows-steps-options-edit-route-test.js
index 4b54dff..e89d736 100644
--- a/test/javascripts/unit/routes/admin-plugins-show-discourse-workflow-workflows-steps-options-edit-route-test.js
+++ b/test/javascripts/unit/routes/admin-plugins-show-discourse-workflow-workflows-steps-options-edit-route-test.js
@@ -2,13 +2,13 @@ import { setupTest } from "ember-qunit";
 import { module, test } from "qunit";
 
 module(
-  "Unit | Route | admin-plugins-show-discourse-workflow-workflows-steps-options-edit",
+  "Unit | Route | admin-plugins/show/discourse-workflow-workflows/steps/options/edit",
   function (hooks) {
     setupTest(hooks);
 
     test("it loads edit dependencies without requiring nested router state", async function (assert) {
       const route = this.owner.lookup(
-        "route:admin-plugins-show-discourse-workflow-workflows-steps-options-edit"
+        "route:admin-plugins/show/discourse-workflow-workflows/steps/options/edit"
       );
 
       let workflowStepParams;
diff --git a/test/javascripts/unit/routes/admin-plugins-show-discourse-workflow-workflows-steps-options-route-test.js b/test/javascripts/unit/routes/admin-plugins-show-discourse-workflow-workflows-steps-options-route-test.js
index 88cdab5..0cf3ff9 100644
--- a/test/javascripts/unit/routes/admin-plugins-show-discourse-workflow-workflows-steps-options-route-test.js
+++ b/test/javascripts/unit/routes/admin-plugins-show-discourse-workflow-workflows-steps-options-route-test.js
@@ -2,13 +2,13 @@ import { setupTest } from "ember-qunit";
 import { module, test } from "qunit";
 
 module(
-  "Unit | Route | admin-plugins-show-discourse-workflow-workflows-steps-options",
+  "Unit | Route | admin-plugins/show/discourse-workflow-workflows/steps/options",
   function (hooks) {
     setupTest(hooks);
 
     test("it resolves workflow steps from the expected parent route model", async function (assert) {
       const route = this.owner.lookup(
-        "route:admin-plugins-show-discourse-workflow-workflows-steps-options"
+        "route:admin-plugins/show/discourse-workflow-workflows/steps/options"
       );
 
       const workflowSteps = [
@@ -21,7 +21,7 @@ module(
       route.modelFor = (routeName) => {
         assert.strictEqual(
           routeName,
-          "adminPlugins.show.discourse-workflow-workflows-steps",
+          "adminPlugins.show.discourse-workflow-workflows.steps",
           "uses the canonical parent route key"
         );
         return workflowSteps;