From e691c978f1b52fefeb191b5c141a29dfce9432e4 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Tue, 24 Feb 2026 21:46:55 -0500
Subject: [PATCH] feat: StepChecklist accepts RuntimeStep[], renders amber
 Custom badge

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/procedural/StepChecklist.tsx   | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/procedural/StepChecklist.tsx b/frontend/src/components/procedural/StepChecklist.tsx
index 5823eff9..3bdd4942 100644
--- a/frontend/src/components/procedural/StepChecklist.tsx
+++ b/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>