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 { CheckCircle2, Circle, ArrowRight } from 'lucide-react'
import type { ProceduralStep } from '@/types' import type { RuntimeStep } from '@/types'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
interface StepChecklistProps { interface StepChecklistProps {
steps: ProceduralStep[] steps: RuntimeStep[]
currentStepIndex: number currentStepIndex: number
completedStepIds: Set<string> completedStepIds: Set<string>
onStepClick: (index: number) => void onStepClick: (index: number) => void
@@ -16,7 +16,8 @@ export function StepChecklist({ steps, currentStepIndex, completedStepIds, onSte
const sectionVisibility = new Set<number>() const sectionVisibility = new Set<number>()
let prevSection: string | undefined let prevSection: string | undefined
for (let i = 0; i < procedureSteps.length; i++) { 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 && header !== prevSection) sectionVisibility.add(i)
if (header) prevSection = header if (header) prevSection = header
} }
@@ -32,7 +33,7 @@ export function StepChecklist({ steps, currentStepIndex, completedStepIds, onSte
<div key={step.id}> <div key={step.id}>
{showSection && ( {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"> <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> </div>
)} )}
<button <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"> <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-accent text-[10px] font-medium">
{index + 1} {index + 1}
</span> </span>
<span className="min-w-0 flex-1 truncate">{step.title || 'Untitled step'}</span> <span className="min-w-0 flex-1 flex items-center gap-1.5 overflow-hidden">
{step.estimated_minutes && ( <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> <span className="shrink-0 text-[10px] text-muted-foreground">~{step.estimated_minutes}m</span>
)} )}
</button> </button>