From 359976c3a32532db3d3a0aac76e411c9d2ae43a1 Mon Sep 17 00:00:00 2001
From: Matt Pua <matt.p@posthog.com>
Date: Thu, 23 Jul 2026 10:49:01 -0400
Subject: [PATCH 1/2] fix: prevent skipping incomplete loop steps

Generated-By: PostHog Code
Task-Id: 05d83215-fe0a-4441-8c70-c3063488a351
---
 .../loops/components/LoopForm.test.ts         | 24 +++++++++++++++++++
 .../features/loops/components/LoopForm.tsx    | 11 +++++----
 .../loops/components/loopStepNavigation.ts    |  7 ++++++
 3 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 packages/ui/src/features/loops/components/LoopForm.test.ts
 create mode 100644 packages/ui/src/features/loops/components/loopStepNavigation.ts

diff --git a/packages/ui/src/features/loops/components/LoopForm.test.ts b/packages/ui/src/features/loops/components/LoopForm.test.ts
new file mode 100644
index 0000000000..9710271ece
--- /dev/null
+++ b/packages/ui/src/features/loops/components/LoopForm.test.ts
@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { canNavigateToLoopStep } from "./loopStepNavigation";
+
+describe("canNavigateToLoopStep", () => {
+  it("blocks forward navigation when the current step is incomplete", () => {
+    expect(canNavigateToLoopStep(0, 1, [false, true, true, false])).toBe(false);
+    expect(canNavigateToLoopStep(0, 3, [false, true, true, false])).toBe(false);
+  });
+
+  it("allows forward navigation through completed steps", () => {
+    expect(canNavigateToLoopStep(0, 1, [true, false, true, false])).toBe(true);
+    expect(canNavigateToLoopStep(0, 2, [true, true, true, false])).toBe(true);
+  });
+
+  it("blocks skipping an incomplete intervening step", () => {
+    expect(canNavigateToLoopStep(0, 3, [true, false, true, false])).toBe(false);
+  });
+
+  it("always allows backward navigation", () => {
+    expect(canNavigateToLoopStep(3, 0, [false, false, false, false])).toBe(
+      true,
+    );
+  });
+});
diff --git a/packages/ui/src/features/loops/components/LoopForm.tsx b/packages/ui/src/features/loops/components/LoopForm.tsx
index 7361bd3596..0915e2f8bb 100644
--- a/packages/ui/src/features/loops/components/LoopForm.tsx
+++ b/packages/ui/src/features/loops/components/LoopForm.tsx
@@ -40,6 +40,7 @@ import { LoopModelFields } from "./LoopModelFields";
 import { LoopNotificationsFields } from "./LoopNotificationsFields";
 import { LoopRepositoryPicker } from "./LoopRepositoryPicker";
 import { LoopTriggerEditor } from "./LoopTriggerEditor";
+import { canNavigateToLoopStep } from "./loopStepNavigation";
 
 const VISIBILITY_OPTIONS: {
   value: LoopSchemas.LoopVisibilityEnum;
@@ -446,8 +447,7 @@ function Stepper({
       {STEPS.map((label, index) => {
         const isCurrent = index === current;
         const isDone = index < current && complete[index];
-        // Steps navigate freely in both directions; skipping ahead is safe
-        // because Next stays gated per step and Create on the whole form.
+        const canSelect = canNavigateToLoopStep(current, index, complete);
         return (
           <Flex
             key={label}
@@ -456,8 +456,11 @@ function Stepper({
           >
             <button
               type="button"
-              onClick={() => onSelect(index)}
-              className="flex min-w-0 cursor-pointer items-center gap-2"
+              disabled={!canSelect}
+              onClick={() => {
+                if (canSelect) onSelect(index);
+              }}
+              className="flex min-w-0 cursor-pointer items-center gap-2 disabled:cursor-not-allowed disabled:opacity-50"
             >
               <Flex
                 align="center"
diff --git a/packages/ui/src/features/loops/components/loopStepNavigation.ts b/packages/ui/src/features/loops/components/loopStepNavigation.ts
new file mode 100644
index 0000000000..73df54c0d9
--- /dev/null
+++ b/packages/ui/src/features/loops/components/loopStepNavigation.ts
@@ -0,0 +1,7 @@
+export function canNavigateToLoopStep(
+  current: number,
+  target: number,
+  complete: boolean[],
+): boolean {
+  return target <= current || complete.slice(current, target).every(Boolean);
+}

From 25f49bd2663ef7b548b3ddc188cd3ac11b66fd19 Mon Sep 17 00:00:00 2001
From: Matt Pua <matthewpua@gmail.com>
Date: Thu, 23 Jul 2026 10:59:22 -0400
Subject: [PATCH 2/2] refactor: inline loop step navigation guard

Generated-By: PostHog Code
Task-Id: a9a17cbf-42db-48e0-aadb-f7d77d145d39
---
 .../loops/components/LoopForm.test.ts         | 24 -------------------
 .../features/loops/components/LoopForm.tsx    |  4 ++--
 .../loops/components/loopStepNavigation.ts    |  7 ------
 3 files changed, 2 insertions(+), 33 deletions(-)
 delete mode 100644 packages/ui/src/features/loops/components/LoopForm.test.ts
 delete mode 100644 packages/ui/src/features/loops/components/loopStepNavigation.ts

diff --git a/packages/ui/src/features/loops/components/LoopForm.test.ts b/packages/ui/src/features/loops/components/LoopForm.test.ts
deleted file mode 100644
index 9710271ece..0000000000
--- a/packages/ui/src/features/loops/components/LoopForm.test.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { canNavigateToLoopStep } from "./loopStepNavigation";
-
-describe("canNavigateToLoopStep", () => {
-  it("blocks forward navigation when the current step is incomplete", () => {
-    expect(canNavigateToLoopStep(0, 1, [false, true, true, false])).toBe(false);
-    expect(canNavigateToLoopStep(0, 3, [false, true, true, false])).toBe(false);
-  });
-
-  it("allows forward navigation through completed steps", () => {
-    expect(canNavigateToLoopStep(0, 1, [true, false, true, false])).toBe(true);
-    expect(canNavigateToLoopStep(0, 2, [true, true, true, false])).toBe(true);
-  });
-
-  it("blocks skipping an incomplete intervening step", () => {
-    expect(canNavigateToLoopStep(0, 3, [true, false, true, false])).toBe(false);
-  });
-
-  it("always allows backward navigation", () => {
-    expect(canNavigateToLoopStep(3, 0, [false, false, false, false])).toBe(
-      true,
-    );
-  });
-});
diff --git a/packages/ui/src/features/loops/components/LoopForm.tsx b/packages/ui/src/features/loops/components/LoopForm.tsx
index 0915e2f8bb..93b1b3f485 100644
--- a/packages/ui/src/features/loops/components/LoopForm.tsx
+++ b/packages/ui/src/features/loops/components/LoopForm.tsx
@@ -40,7 +40,6 @@ import { LoopModelFields } from "./LoopModelFields";
 import { LoopNotificationsFields } from "./LoopNotificationsFields";
 import { LoopRepositoryPicker } from "./LoopRepositoryPicker";
 import { LoopTriggerEditor } from "./LoopTriggerEditor";
-import { canNavigateToLoopStep } from "./loopStepNavigation";
 
 const VISIBILITY_OPTIONS: {
   value: LoopSchemas.LoopVisibilityEnum;
@@ -447,7 +446,8 @@ function Stepper({
       {STEPS.map((label, index) => {
         const isCurrent = index === current;
         const isDone = index < current && complete[index];
-        const canSelect = canNavigateToLoopStep(current, index, complete);
+        const canSelect =
+          index <= current || complete.slice(current, index).every(Boolean);
         return (
           <Flex
             key={label}
diff --git a/packages/ui/src/features/loops/components/loopStepNavigation.ts b/packages/ui/src/features/loops/components/loopStepNavigation.ts
deleted file mode 100644
index 73df54c0d9..0000000000
--- a/packages/ui/src/features/loops/components/loopStepNavigation.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export function canNavigateToLoopStep(
-  current: number,
-  target: number,
-  complete: boolean[],
-): boolean {
-  return target <= current || complete.slice(current, target).every(Boolean);
-}