[P0] Audit: Pipeline Builder steps cannot be drag-and-dropped or visually reordered

[baixiangcpp]

Imported from the byteflow.tools deep audit on 2026-06-22.

Problem: Pipeline Builder presents a linear list of steps, but users cannot reorder steps with drag-and-drop or inspect the chain visually. Reordering a workflow is a core requirement for recipes such as decode → format → scrub → encode, yet the interaction does not match user expectations for workflow builders.

Affected URL:

• https://byteflow.tools/en/pipeline-builder

Reproduction steps:

1. Open /en/pipeline-builder.
2. Choose a built-in recipe such as API payload cleanup.
3. Add at least one extra step.
4. Try to move a step before or after another step using pointer or keyboard.
5. Look for visual connection lines or a pipeline map.

Expected behavior: users should be able to reorder steps by drag-and-drop, keyboard controls, or explicit move up/down buttons. The pipeline should visually communicate the order and input/output flow.

Actual behavior: steps are listed but not visually reorderable. The current interface relies on implicit order and does not provide a visual flow model.

Impact: users must rebuild recipes to change order, which creates friction. Complex recipes are harder to audit, debug, and share. The feature feels less mature than comparable workflow builders.

Proposed fix:

• Add drag handles to each step row.
• Add keyboard-accessible move up/down controls.
• Add a compact visual flow strip showing step sequence.
• Preserve recipe validation after reordering.
• Update run log to reference stable step IDs plus visible order.
• Add regression tests for reorder behavior and exported JSON order.

Acceptance criteria:

• Users can reorder steps with mouse and keyboard.
• Exported/imported recipe JSON preserves reordered steps.
• Run log reflects the new order.
• Reordering does not include or persist runtime input.
• Mobile users can reorder through buttons if drag is unreliable.

[baixiangcpp]

Closed as completed by the canonical BF audit backlog work. This older non-BF audit issue duplicates work now merged through PRs #209-#219, with the BF issues closed and guard/test coverage in place. The remaining non-duplicate follow-up is #7, which stays open because the upstream Next/PostCSS advisory is not fixed yet.