fix: resolve pipeline step race condition and infinite re-render loop

Two issues caused intermittent step addition failures in the automation
pipeline:

1. RemoveBgControls had onChange in its useEffect deps. Since onChange is
   a new function reference on every parent render, this created an
   infinite re-render loop (effect -> setState -> render -> effect).
   Fixed by using the onChangeRef pattern matching other settings
   components.

2. All step mutation callbacks read from stepsRef.current and passed
   values to setSteps. Concurrent callbacks (e.g. addStep + a settings
   effect) would overwrite each other. Fixed by switching to functional
   state updates (setSteps(prev => ...)) and removing stepsRef.

Also rewrites automate e2e tests to use manual step addition instead of
referencing templates that no longer exist in the UI.

apps/web/src/components/tools/pipeline-builder.tsx

@@ -13,7 +13,7 @@ import {
   Upload,
   X,
 } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { type SetStateAction, useCallback, useEffect, useMemo, useState } from "react";
 import { SearchBar } from "@/components/common/search-bar";
 import { apiGet } from "@/lib/api";
 import { cn } from "@/lib/utils";
@@ -32,7 +32,7 @@ export interface PipelineStep {
 
 interface PipelineBuilderProps {
   steps: PipelineStep[];
-  onStepsChange: (steps: PipelineStep[]) => void;
+  onStepsChange: (action: SetStateAction<PipelineStep[]>) => void;
   onSave: (name: string, description: string) => void;
   onExecute: (file: File) => void;
   saving?: boolean;
@@ -67,12 +67,6 @@ export function PipelineBuilder({
   const [pipelineToolIds, setPipelineToolIds] = useState<string[] | null>(null);
   const [toolSearch, setToolSearch] = useState("");
 
-  // Keep a ref to steps so callbacks always read the latest value
-  // without needing steps in their dependency arrays (prevents stale closures).
-  // Assigned during render (not useEffect) so it's current before child effects fire.
-  const stepsRef = useRef(steps);
-  stepsRef.current = steps;
-
   useEffect(() => {
     apiGet<{ settings: Record<string, string> }>("/v1/settings")
       .then((data) => {
@@ -111,7 +105,7 @@ export function PipelineBuilder({
         toolId,
         settings: {},
       };
-      onStepsChange([...stepsRef.current, step]);
+      onStepsChange((prev) => [...prev, step]);
       setShowToolPicker(false);
       setToolSearch("");
       setExpandedStep(step.id);
@@ -121,7 +115,7 @@ export function PipelineBuilder({
 
   const removeStep = useCallback(
     (id: string) => {
-      onStepsChange(stepsRef.current.filter((s) => s.id !== id));
+      onStepsChange((prev) => prev.filter((s) => s.id !== id));
       setExpandedStep((prev) => (prev === id ? null : prev));
     },
     [onStepsChange],
@@ -129,23 +123,22 @@ export function PipelineBuilder({
 
   const moveStep = useCallback(
     (id: string, direction: "up" | "down") => {
-      const current = stepsRef.current;
+      onStepsChange((prev) => {
-      const idx = current.findIndex((s) => s.id === id);
+        const idx = prev.findIndex((s) => s.id === id);
-      if (idx < 0) return;
+        if (idx < 0) return prev;
-      const newIdx = direction === "up" ? idx - 1 : idx + 1;
+        const newIdx = direction === "up" ? idx - 1 : idx + 1;
-      if (newIdx < 0 || newIdx >= current.length) return;
+        if (newIdx < 0 || newIdx >= prev.length) return prev;
-      const newSteps = [...current];
+        const newSteps = [...prev];
-      [newSteps[idx], newSteps[newIdx]] = [newSteps[newIdx], newSteps[idx]];
+        [newSteps[idx], newSteps[newIdx]] = [newSteps[newIdx], newSteps[idx]];
-      onStepsChange(newSteps);
+        return newSteps;
+      });
     },
     [onStepsChange],
   );
 
   const updateStepSettings = useCallback(
     (id: string, newSettings: Record<string, unknown>) => {
-      onStepsChange(
+      onStepsChange((prev) => prev.map((s) => (s.id === id ? { ...s, settings: newSettings } : s)));
-        stepsRef.current.map((s) => (s.id === id ? { ...s, settings: newSettings } : s)),
-      );
     },
     [onStepsChange],
   );

apps/web/src/components/tools/remove-bg-settings.tsx

@@ -1,5 +1,5 @@
 import { Download, ImageIcon, Package, User } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ProgressCard } from "@/components/common/progress-card";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
 import { useFileStore } from "@/stores/file-store";
@@ -56,12 +56,17 @@ export function RemoveBgControls({ settings, onChange }: RemoveBgControlsProps)
 
   const model = isPassport ? "birefnet-portrait" : MODEL_MAP[subject][quality];
 
+  const onChangeRef = useRef(onChange);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  });
+
   // Sync settings on every control change
   useEffect(() => {
     const next: Record<string, unknown> = { model };
     if (bgColor) next.backgroundColor = bgColor;
-    onChange(next);
+    onChangeRef.current(next);
-  }, [model, bgColor, onChange]);
+  }, [model, bgColor]);
 
   return (
     <div className="space-y-4">

tests/e2e/automate.spec.ts

@@ -30,19 +30,34 @@ test.describe("Automate Page", () => {
       }
     }
 
-    // Final attempt — let it throw if it fails
+    // Final attempt - let it throw if it fails
     await page.goto("/automate", { waitUntil: "networkidle" });
     await expect(heading).toBeVisible({ timeout: 10_000 });
   }
 
-  /** Wait for pipeline steps to render after a template click. */
+  /** Wait for pipeline steps to render. */
   async function waitForSteps(page: import("@playwright/test").Page, count: number) {
-    // Step numbers (1, 2, 3...) appear inside the step cards
     await expect(page.getByTitle("Remove")).toHaveCount(count, {
       timeout: 5_000,
     });
   }
 
+  /** Open the tool picker, search for a tool by name, and click it. */
+  async function addToolStep(
+    page: import("@playwright/test").Page,
+    name: string,
+    expectedCount: number,
+  ) {
+    await page.getByRole("button", { name: /add step/i }).click();
+    await expect(page.getByText("Add a step")).toBeVisible();
+    await page.getByPlaceholder("Search tools...").fill(name);
+    await page
+      .getByRole("button", { name: new RegExp(name, "i") })
+      .first()
+      .click();
+    await waitForSteps(page, expectedCount);
+  }
+
   const testImagePath = getTestImagePath();
 
   /** Upload the test image via file chooser. */
@@ -54,28 +69,13 @@ test.describe("Automate Page", () => {
     await page.waitForTimeout(500);
   }
 
-  // ─── Page Rendering ───────────────────────────────────────────────────
+  // --- Page Rendering ---
 
   test("automate page renders pipeline builder", async ({ loggedInPage: page }) => {
     await gotoAutomate(page);
     await expect(page.getByText(/chain multiple tools/i).first()).toBeVisible();
   });
 
-  test("shows all five pipeline templates", async ({ loggedInPage: page }) => {
-    await gotoAutomate(page);
-    await expect(page.getByText("Social Media Ready")).toBeVisible();
-    await expect(page.getByText("Privacy Clean")).toBeVisible();
-    await expect(page.getByText("Web Optimization")).toBeVisible();
-    await expect(page.getByText("Profile Picture")).toBeVisible();
-    await expect(page.getByText("Watermark Batch")).toBeVisible();
-  });
-
-  test("shows template descriptions", async ({ loggedInPage: page }) => {
-    await gotoAutomate(page);
-    await expect(page.getByText(/resize 1080x1080/i).first()).toBeVisible();
-    await expect(page.getByText(/strip all metadata/i).first()).toBeVisible();
-  });
-
   test("shows empty state message when no steps", async ({ loggedInPage: page }) => {
     await gotoAutomate(page);
     await expect(page.getByText(/add steps to build your automation pipeline/i)).toBeVisible();
@@ -108,50 +108,7 @@ test.describe("Automate Page", () => {
     await expect(saveBtn).toBeDisabled();
   });
 
-  // ─── Template Loading ─────────────────────────────────────────────────
+  // --- Add Step ---
-
-  test("clicking Social Media Ready template loads 4 steps", async ({ loggedInPage: page }) => {
-    await gotoAutomate(page);
-    await page.getByText("Social Media Ready").click();
-    await waitForSteps(page, 4);
-    // Verify empty state is gone
-    await expect(page.getByText(/add steps to build your automation pipeline/i)).not.toBeVisible();
-  });
-
-  test("clicking Privacy Clean template loads 2 steps", async ({ loggedInPage: page }) => {
-    await gotoAutomate(page);
-    await page.getByText("Privacy Clean").click();
-    await waitForSteps(page, 2);
-  });
-
-  test("clicking Web Optimization template loads 3 steps", async ({ loggedInPage: page }) => {
-    await gotoAutomate(page);
-    await page.getByText("Web Optimization").click();
-    await waitForSteps(page, 3);
-  });
-
-  test("clicking Profile Picture template loads 2 steps", async ({ loggedInPage: page }) => {
-    await gotoAutomate(page);
-    await page.getByText("Profile Picture").click();
-    await waitForSteps(page, 2);
-  });
-
-  test("clicking Watermark Batch template loads 3 steps", async ({ loggedInPage: page }) => {
-    await gotoAutomate(page);
-    await page.getByText("Watermark Batch").click();
-    await waitForSteps(page, 3);
-  });
-
-  test("loading a template replaces previous steps", async ({ loggedInPage: page }) => {
-    await gotoAutomate(page);
-    await page.getByText("Social Media Ready").click();
-    await waitForSteps(page, 4);
-
-    await page.getByText("Privacy Clean").click();
-    await waitForSteps(page, 2);
-  });
-
-  // ─── Add Step ─────────────────────────────────────────────────────────
 
   test("clicking Add Step opens tool picker", async ({ loggedInPage: page }) => {
     await gotoAutomate(page);
@@ -162,39 +119,39 @@ test.describe("Automate Page", () => {
   test("tool picker shows available tools", async ({ loggedInPage: page }) => {
     await gotoAutomate(page);
     await page.getByRole("button", { name: /add step/i }).click();
-    const pickerArea = page.locator(".max-h-64.overflow-y-auto");
+    const pickerArea = page.locator(".max-h-80.overflow-y-auto");
     await expect(pickerArea.getByText("Resize").first()).toBeVisible();
     await expect(pickerArea.getByText("Convert").first()).toBeVisible();
   });
 
   test("selecting a tool from picker adds a step", async ({ loggedInPage: page }) => {
     await gotoAutomate(page);
-    await page.getByRole("button", { name: /add step/i }).click();
+    await addToolStep(page, "Resize", 1);
-    const pickerArea = page.locator(".max-h-64.overflow-y-auto");
+    // Verify empty state is gone
-    await pickerArea.getByText("Resize", { exact: false }).first().click();
+    await expect(page.getByText(/add steps to build your automation pipeline/i)).not.toBeVisible();
-    await waitForSteps(page, 1);
   });
 
   test("can add multiple steps", async ({ loggedInPage: page }) => {
     await gotoAutomate(page);
-
+    await addToolStep(page, "Resize", 1);
-    await page.getByRole("button", { name: /add step/i }).click();
+    await addToolStep(page, "Convert", 2);
-    let picker = page.locator(".max-h-64.overflow-y-auto");
-    await picker.getByText("Resize", { exact: false }).first().click();
-    await waitForSteps(page, 1);
-
-    await page.getByRole("button", { name: /add step/i }).click();
-    picker = page.locator(".max-h-64.overflow-y-auto");
-    await picker.getByText("Convert", { exact: false }).first().click();
-    await waitForSteps(page, 2);
   });
 
-  // ─── Step Controls ────────────────────────────────────────────────────
+  test("can add resize, remove-background, then compress without drops", async ({
+    loggedInPage: page,
+  }) => {
+    await gotoAutomate(page);
+    await addToolStep(page, "Resize", 1);
+    await addToolStep(page, "Remove Background", 2);
+    await addToolStep(page, "Compress", 3);
+  });
+
+  // --- Step Controls ---
 
   test("can remove a step", async ({ loggedInPage: page }) => {
     await gotoAutomate(page);
-    await page.getByText("Privacy Clean").click();
+    await addToolStep(page, "Resize", 1);
-    await waitForSteps(page, 2);
+    await addToolStep(page, "Compress", 2);
 
     await page.getByTitle("Remove").first().click();
     await waitForSteps(page, 1);
@@ -202,30 +159,32 @@ test.describe("Automate Page", () => {
 
   test("can expand step settings", async ({ loggedInPage: page }) => {
     await gotoAutomate(page);
-    await page.getByText("Privacy Clean").click();
+    await addToolStep(page, "Resize", 1);
-    await waitForSteps(page, 2);
+    // Adding a second step collapses the first (only one expanded at a time)
+    await addToolStep(page, "Compress", 2);
 
+    // Expand the first step's settings
     await page.getByTitle("Settings").first().click();
-    await expect(page.getByText(/default settings will be used/i)).toBeVisible();
+    await expect(page.getByText("Custom Size").first()).toBeVisible();
   });
 
   test("move up button disabled on first step", async ({ loggedInPage: page }) => {
     await gotoAutomate(page);
-    await page.getByText("Social Media Ready").click();
+    await addToolStep(page, "Resize", 1);
-    await waitForSteps(page, 4);
+    await addToolStep(page, "Compress", 2);
 
     await expect(page.getByTitle("Move up").first()).toBeDisabled();
   });
 
   test("move down button disabled on last step", async ({ loggedInPage: page }) => {
     await gotoAutomate(page);
-    await page.getByText("Social Media Ready").click();
+    await addToolStep(page, "Resize", 1);
-    await waitForSteps(page, 4);
+    await addToolStep(page, "Compress", 2);
 
     await expect(page.getByTitle("Move down").last()).toBeDisabled();
   });
 
-  // ─── File Upload ──────────────────────────────────────────────────────
+  // --- File Upload ---
 
   test("can upload a file via file chooser", async ({ loggedInPage: page }) => {
     await gotoAutomate(page);
@@ -243,27 +202,25 @@ test.describe("Automate Page", () => {
     await uploadTestFile(page);
     await expect(page.getByText("test-image.png")).toBeVisible();
 
-    // Remove file — the X button inside the dashed upload area
+    // Remove file - the X button inside the dashed upload area
     const uploadArea = page.locator("[class*='border-dashed']").first();
     await uploadArea.locator("button").click();
 
     await expect(page.getByRole("button", { name: /upload image to process/i })).toBeVisible();
   });
 
-  // ─── Save Pipeline ────────────────────────────────────────────────────
+  // --- Save Pipeline ---
 
   test("Save Pipeline button enables after adding steps", async ({ loggedInPage: page }) => {
     await gotoAutomate(page);
-    await page.getByText("Privacy Clean").click();
+    await addToolStep(page, "Resize", 1);
-    await waitForSteps(page, 2);
 
     await expect(page.getByRole("button", { name: "Save Pipeline" })).toBeEnabled();
   });
 
   test("clicking Save Pipeline shows name input form", async ({ loggedInPage: page }) => {
     await gotoAutomate(page);
-    await page.getByText("Privacy Clean").click();
+    await addToolStep(page, "Resize", 1);
-    await waitForSteps(page, 2);
 
     await page.getByRole("button", { name: "Save Pipeline" }).click();
     await expect(page.getByPlaceholder("Pipeline name")).toBeVisible();
@@ -271,8 +228,7 @@ test.describe("Automate Page", () => {
 
   test("Save button disabled when name is empty", async ({ loggedInPage: page }) => {
     await gotoAutomate(page);
-    await page.getByText("Privacy Clean").click();
+    await addToolStep(page, "Resize", 1);
-    await waitForSteps(page, 2);
 
     await page.getByRole("button", { name: "Save Pipeline" }).click();
     const saveSubmitBtn = page.getByRole("button", {
@@ -284,8 +240,8 @@ test.describe("Automate Page", () => {
 
   test("can save a pipeline with name and see it in sidebar", async ({ loggedInPage: page }) => {
     await gotoAutomate(page);
-    await page.getByText("Privacy Clean").click();
+    await addToolStep(page, "Resize", 1);
-    await waitForSteps(page, 2);
+    await addToolStep(page, "Compress", 2);
 
     const uniqueName = `E2E Pipeline ${Date.now()}`;
     await page.getByRole("button", { name: "Save Pipeline" }).click();
@@ -300,25 +256,23 @@ test.describe("Automate Page", () => {
 
   test("can close save form without saving", async ({ loggedInPage: page }) => {
     await gotoAutomate(page);
-    await page.getByText("Privacy Clean").click();
+    await addToolStep(page, "Resize", 1);
-    await waitForSteps(page, 2);
 
     await page.getByRole("button", { name: "Save Pipeline" }).click();
     await expect(page.getByPlaceholder("Pipeline name")).toBeVisible();
 
-    // Close the form — the last button in the save form row
+    // Close the form - the last button in the save form row
     const formRow = page.locator(".flex.items-center.gap-2.flex-1");
     await formRow.locator("button").last().click();
 
     await expect(page.getByRole("button", { name: "Save Pipeline" })).toBeVisible();
   });
 
-  // ─── Pipeline Execution ───────────────────────────────────────────────
+  // --- Pipeline Execution ---
 
   test("Process button enables when steps and file are set", async ({ loggedInPage: page }) => {
     await gotoAutomate(page);
-    await page.getByText("Privacy Clean").click();
+    await addToolStep(page, "Compress", 1);
-    await waitForSteps(page, 2);
     await uploadTestFile(page);
 
     await expect(page.getByRole("button", { name: "Process", exact: true })).toBeEnabled();
@@ -326,8 +280,8 @@ test.describe("Automate Page", () => {
 
   test("executing pipeline shows success result", async ({ loggedInPage: page }) => {
     await gotoAutomate(page);
-    await page.getByText("Privacy Clean").click();
+    await addToolStep(page, "Strip Metadata", 1);
-    await waitForSteps(page, 2);
+    await addToolStep(page, "Compress", 2);
     await uploadTestFile(page);
 
     await page.getByRole("button", { name: "Process", exact: true }).click();
@@ -343,27 +297,16 @@ test.describe("Automate Page", () => {
     await expect(page.getByRole("link", { name: /download result/i })).toBeVisible();
   });
 
-  test("executing Social Media Ready template works", async ({ loggedInPage: page }) => {
+  // --- Saved Pipeline Interactions ---
-    await gotoAutomate(page);
-    await page.getByText("Social Media Ready").click();
-    await waitForSteps(page, 4);
-    await uploadTestFile(page);
-
-    await page.getByRole("button", { name: "Process", exact: true }).click();
-
-    await expect(page.getByText(/pipeline completed/i)).toBeVisible({ timeout: 30_000 });
-  });
-
-  // ─── Saved Pipeline Interactions ──────────────────────────────────────
 
   test("can load a saved pipeline into builder", async ({ loggedInPage: page }) => {
     await gotoAutomate(page);
 
     const uniqueName = `Load Pipeline ${Date.now()}`;
 
-    // Save a pipeline
+    // Build and save a 2-step pipeline
-    await page.getByText("Web Optimization").click();
+    await addToolStep(page, "Resize", 1);
-    await waitForSteps(page, 3);
+    await addToolStep(page, "Compress", 2);
 
     await page.getByRole("button", { name: "Save Pipeline" }).click();
     await page.getByPlaceholder("Pipeline name").fill(uniqueName);
@@ -372,13 +315,13 @@ test.describe("Automate Page", () => {
       timeout: 5_000,
     });
 
-    // Switch to different template
+    // Remove a step so we can tell loading worked
-    await page.getByText("Privacy Clean").click();
+    await page.getByTitle("Remove").first().click();
-    await waitForSteps(page, 2);
+    await waitForSteps(page, 1);
 
     // Click on the saved pipeline to load it
     await page.getByRole("button", { name: uniqueName }).first().click();
-    await waitForSteps(page, 3);
+    await waitForSteps(page, 2);
   });
 
   test("can delete a saved pipeline", async ({ loggedInPage: page }) => {
@@ -386,9 +329,8 @@ test.describe("Automate Page", () => {
 
     const uniqueName = `Delete Pipeline ${Date.now()}`;
 
-    // Save a pipeline
+    // Build and save a pipeline
-    await page.getByText("Privacy Clean").click();
+    await addToolStep(page, "Resize", 1);
-    await waitForSteps(page, 2);
 
     await page.getByRole("button", { name: "Save Pipeline" }).click();
     await page.getByPlaceholder("Pipeline name").fill(uniqueName);
@@ -409,17 +351,11 @@ test.describe("Automate Page", () => {
     await expect(pipelineEntry).not.toBeVisible({ timeout: 5_000 });
   });
 
-  // ─── Sidebar ──────────────────────────────────────────────────────────
+  // --- Sidebar ---
-
-  test("sidebar Templates section is visible", async ({ loggedInPage: page }) => {
-    await gotoAutomate(page);
-    await expect(page.getByRole("heading", { name: "Templates" })).toBeVisible();
-  });
 
   test("sidebar shows Saved Automations when pipelines exist", async ({ loggedInPage: page }) => {
     await gotoAutomate(page);
-    await page.getByText("Privacy Clean").click();
+    await addToolStep(page, "Resize", 1);
-    await waitForSteps(page, 2);
 
     const uniqueName = `Sidebar Pipeline ${Date.now()}`;
     await page.getByRole("button", { name: "Save Pipeline" }).click();