chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: StepChecklist accepts RuntimeStep[], renders amber Custom badge

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-24 21:46:55 -05:00
parent bb8d2fbcb2
commit e691c978f1
1 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/procedural/StepChecklist.tsx
View File

@@ -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>