From f9315d2f60b47168910738c8a59f4dffb0a4c294 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Thu, 12 Mar 2026 23:05:09 -0400
Subject: [PATCH] feat: add data-step-id anchor to StepList for validation
 scroll-to

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/procedural-editor/StepList.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/procedural-editor/StepList.tsx b/frontend/src/components/procedural-editor/StepList.tsx
index 78fe875c..981d7dd6 100644
--- a/frontend/src/components/procedural-editor/StepList.tsx
+++ b/frontend/src/components/procedural-editor/StepList.tsx
@@ -161,7 +161,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                   return (
                     <SortableStepWrapper key={step.id} id={step.id} disabled>
                       {() => (
-                        <div ref={scrollTargetRef}>
+                        <div ref={scrollTargetRef} data-step-id={step.id}>
                           <StepEditor
                             step={step}
                             stepNumber={0}
@@ -178,7 +178,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                 return (
                   <SortableStepWrapper key={step.id} id={step.id}>
                     {({ dragHandleProps }) => (
-                      <div className="group flex items-center gap-2 border-b border-border pb-1 pt-3">
+                      <div className="group flex items-center gap-2 border-b border-border pb-1 pt-3" data-step-id={step.id}>
                         <button
                           type="button"
                           className="shrink-0 cursor-grab touch-none text-muted-foreground active:cursor-grabbing"
@@ -218,7 +218,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                 return (
                   <SortableStepWrapper key={step.id} id={step.id} disabled>
                     {() => (
-                      <div ref={scrollTargetRef}>
+                      <div ref={scrollTargetRef} data-step-id={step.id}>
                         <StepEditor
                           step={step}
                           stepNumber={stepNumber}
@@ -241,6 +241,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                         'hover:border-primary/30 hover:bg-accent/50',
                         isGhost && 'border-l-2 border-dashed border-l-primary/40! opacity-60'
                       )}
+                      data-step-id={step.id}
                       onContextMenu={(e) => onStepContextMenu?.(e, step.id)}
                     >
                       <div className="flex items-center gap-2">