frontend/src/components/procedural/StepChecklist.tsx

@@ -1,9 +1,9 @@
 import { CheckCircle2, Circle, ArrowRight } from 'lucide-react'
-import type { ProceduralStep } from '@/types'
+import type { RuntimeStep } from '@/types'
 import { cn } from '@/lib/utils'
 
 interface StepChecklistProps {
-  steps: ProceduralStep[]
+  steps: RuntimeStep[]
   currentStepIndex: number
   completedStepIds: Set<string>
   onStepClick: (index: number) => void
@@ -16,7 +16,8 @@ export function StepChecklist({ steps, currentStepIndex, completedStepIds, onSte
   const sectionVisibility = new Set<number>()
   let prevSection: string | undefined
   for (let i = 0; i < procedureSteps.length; i++) {
-    const header = procedureSteps[i].section_header
+    const s = procedureSteps[i]
+    const header = 'section_header' in s ? s.section_header : undefined
     if (header && header !== prevSection) sectionVisibility.add(i)
     if (header) prevSection = header
   }
@@ -32,7 +33,7 @@ export function StepChecklist({ steps, currentStepIndex, completedStepIds, onSte
           <div key={step.id}>
             {showSection && (
               <div className="mb-1 mt-3 border-b border-border pb-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground first:mt-0">
-                {step.section_header}
+                {'section_header' in step ? step.section_header : undefined}
               </div>
             )}
             <button
@@ -54,8 +55,15 @@ export function StepChecklist({ steps, currentStepIndex, completedStepIds, onSte
               <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-accent text-[10px] font-medium">
                 {index + 1}
               </span>
-              <span className="min-w-0 flex-1 truncate">{step.title || 'Untitled step'}</span>
-              {step.estimated_minutes && (
+              <span className="min-w-0 flex-1 flex items-center gap-1.5 overflow-hidden">
+                <span className="truncate">{step.title || 'Untitled step'}</span>
+                {'isCustom' in step && step.isCustom && (
+                  <span className="shrink-0 rounded-full bg-amber-400/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-amber-400">
+                    Custom
+                  </span>
+                )}
+              </span>
+              {'estimated_minutes' in step && step.estimated_minutes && (
                 <span className="shrink-0 text-[10px] text-muted-foreground">~{step.estimated_minutes}m</span>
               )}
             </button>