From aa3651ebfe30bc693b47a631ce29e640be9cbf7a Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Thu, 19 Feb 2026 03:16:24 -0500
Subject: [PATCH] feat: add step count with time estimate header and
 auto-scroll to new steps

Remove outer card wrapper from StepList (now rendered in scrolling container).
Header shows total estimated minutes when steps have time estimates. Auto-scrolls
to newly added steps using ref + scrollIntoView.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/procedural-editor/StepList.tsx | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/procedural-editor/StepList.tsx b/frontend/src/components/procedural-editor/StepList.tsx
index 066843b0..f413fb48 100644
--- a/frontend/src/components/procedural-editor/StepList.tsx
+++ b/frontend/src/components/procedural-editor/StepList.tsx
@@ -1,3 +1,4 @@
+import { useRef, useEffect } from 'react'
 import { Plus, GripVertical, Trash2, ChevronDown, CheckCircle2, AlertTriangle, Info, Zap, Shield, SeparatorHorizontal } from 'lucide-react'
 import type { StepContentType } from '@/types'
 import { StepEditor } from './StepEditor'
@@ -24,16 +25,35 @@ export function StepList() {
   } = useProceduralEditorStore()
 
   const procedureSteps = steps.filter((s) => s.type === 'procedure_step')
+  const totalMinutes = steps
+    .filter(s => s.type === 'procedure_step' && s.estimated_minutes)
+    .reduce((sum, s) => sum + (s.estimated_minutes || 0), 0)
+
+  // Auto-scroll to new steps
+  const scrollTargetRef = useRef<HTMLDivElement>(null)
+  const prevStepCount = useRef(steps.length)
+
+  useEffect(() => {
+    if (steps.length > prevStepCount.current) {
+      // Scroll the newly expanded step into view
+      setTimeout(() => {
+        scrollTargetRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+      }, 50)
+    }
+    prevStepCount.current = steps.length
+  }, [steps.length])
+
   let stepCounter = 0
 
   return (
-    <div className="bg-card border border-border rounded-2xl p-4 sm:p-6">
+    <div>
       <div className="mb-4 flex items-center justify-between">
         <div className="flex items-center gap-2">
           <Shield className="h-5 w-5 text-muted-foreground" />
           <h2 className="text-lg font-semibold text-foreground">Steps</h2>
           <span className="text-sm text-muted-foreground">
-            ({procedureSteps.length} step{procedureSteps.length !== 1 ? 's' : ''})
+            ({procedureSteps.length} step{procedureSteps.length !== 1 ? 's' : ''}
+            {totalMinutes > 0 ? ` \u00b7 ~${totalMinutes} min` : ''})
           </span>
         </div>
         <div className="flex items-center gap-2">
@@ -81,7 +101,7 @@ export function StepList() {
 
             if (isExpanded) {
               return (
-                <div key={step.id}>
+                <div key={step.id} ref={expandedStepId === step.id ? scrollTargetRef : undefined}>
                   <StepEditor
                     step={step}
                     stepNumber={0}
@@ -125,7 +145,7 @@ export function StepList() {
 
           if (isExpanded) {
             return (
-              <div key={step.id}>
+              <div key={step.id} ref={expandedStepId === step.id ? scrollTargetRef : undefined}>
                 <StepEditor
                   step={step}
                   stepNumber={stepNumber}
@@ -195,6 +215,8 @@ export function StepList() {
         <Plus className="h-3.5 w-3.5" />
         Add Step
       </button>
+
+      <div ref={scrollTargetRef} />
     </div>
   )
 }