feat: add step drag and drop reordering

[saurabhhhcodes]

What changed

• Added drag-and-drop reordering for campaign sequence steps.
• Preserved selected step state and insertion points when the list is reordered.
• Auto-saves the updated step order after a successful drop when the campaign already exists.

Why

• Campaign builders need a fast way to rearrange steps without deleting and recreating them.

Validation

• git diff --check
• node --check on the inline campaign builder script

Summary by CodeRabbit

Release Notes

• New Features
  • Drag-and-drop reordering now available for campaign sequence steps, enabling easy workflow reorganization
  • Visual indicators highlight the step being dragged and valid drop zones
  • Step reordering automatically saves changes to your campaign

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds drag-and-drop reordering to campaign sequence steps in frontend/campaign-builder.html. Changes include CSS for drag/drop visual states, a draggedStepIndex tracking variable, a reorderSteps function that adjusts related UI indices, draggable="true" on rendered step nodes, and drag event handler wiring with optional persistence via saveCampaign().

Changes

Drag-and-drop step reordering

Layer / File(s)	Summary
Drag-and-drop CSS and state variable frontend/campaign-builder.html	Adds .flow-node.dragging (opacity + dashed border) and .flow-node.drop-target (highlight + shadow) CSS rules, and declares draggedStepIndex to track the active drag.
reorderSteps core logic frontend/campaign-builder.html	Implements reorderSteps(fromIndex, toIndex) which splices the steps array and remaps selectedNodeIndex and addInsertIndex to keep UI selection consistent after the move.
Draggable markup and event handler wiring frontend/campaign-builder.html	Adds draggable="true" to both regular and condition step node containers. Replaces click-only delegation with dragstart/dragover/dragleave/drop handlers; on drop, calls reorderSteps, clears state, re-renders the canvas and editor, and conditionally calls saveCampaign() with errors swallowed. Click handler is guarded to ignore events during an active drag.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

• LO-064 [Intermediate]: Sequence Step Drag-and-Drop Reordering #401 — This PR directly implements the drag-and-drop step reordering feature described in that issue, including draggable="true", drag event handlers, in-memory array reordering, canvas re-rendering, and API persistence.

Suggested labels

type:feature, frontend, level:advanced

🐇 A hop, a skip, a drag-and-drop!
The steps now shuffle, never stop.
From index one to index three,
Reordered steps, oh can't you see!
The canvas redraws, the state stays neat —
This bunny thinks that's pretty sweet! 🥕

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'feat: add step drag and drop reordering' directly and clearly summarizes the main feature being added to the campaign builder.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

frontend/campaign-builder.html (1)

1988-1994: 🧹 Nitpick | 🔵 Trivial | ⚡ Quick win

Consider providing user feedback when auto-save fails.

The save failure is logged to console but the user has no indication that persistence failed. If the user navigates away believing the reorder was saved, they may be surprised when it reverts on next load.

A minimal approach could be a toast notification or reverting the local state on failure.

💡 Example: revert on failure or notify user

                 if (campaignId) {
+                    const previousSteps = [...steps];
                     try {
                         await saveCampaign();
                     } catch (error) {
                         console.warn('Unable to persist reordered steps automatically.', error);
+                        // Option A: Revert on failure
+                        // steps.length = 0;
+                        // steps.push(...previousSteps);
+                        // renderCanvas();
+                        // renderEditor();
+                        
+                        // Option B: Notify user (if toast utility exists)
+                        // showToast?.('Step order could not be saved', 'warning');
                     }
                 }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/campaign-builder.html` around lines 1988 - 1994, When the
saveCampaign() function fails inside the try-catch block (when campaignId
exists), the error is only logged to console without any user-facing feedback.
Modify the catch block to provide visible feedback to the user about the failed
auto-save by either displaying a toast notification informing them the reorder
failed to persist, or by reverting the local state changes back to their
previous state so the UI reflects what was actually saved to the server. This
ensures the user knows the auto-save failed and won't be surprised if the
changes revert on next page load.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@frontend/campaign-builder.html`:
- Around line 1988-1994: When the saveCampaign() function fails inside the
try-catch block (when campaignId exists), the error is only logged to console
without any user-facing feedback. Modify the catch block to provide visible
feedback to the user about the failed auto-save by either displaying a toast
notification informing them the reorder failed to persist, or by reverting the
local state changes back to their previous state so the UI reflects what was
actually saved to the server. This ensures the user knows the auto-save failed
and won't be surprised if the changes revert on next page load.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 3fc883be-233a-43c4-82f2-33e97a3d754e

📥 Commits

Reviewing files that changed from the base of the PR and between ab66c79 and cf49e46.

📒 Files selected for processing (1)

• frontend/campaign-builder.html