From 6b4304ab92a953b512cab19eca6d72b3b6e6c14c Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Sat, 14 Feb 2026 04:43:13 -0500
Subject: [PATCH] fix: resolve eslint immutability error in StepChecklist

Pre-compute section header visibility before render instead of mutating
a variable during .map() callback, which violates react-hooks/immutability.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/procedural/StepChecklist.tsx     | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/procedural/StepChecklist.tsx b/frontend/src/components/procedural/StepChecklist.tsx
index 030c31dc..8bb9a1b8 100644
--- a/frontend/src/components/procedural/StepChecklist.tsx
+++ b/frontend/src/components/procedural/StepChecklist.tsx
@@ -11,15 +11,22 @@ interface StepChecklistProps {
 
 export function StepChecklist({ steps, currentStepIndex, completedStepIds, onStepClick }: StepChecklistProps) {
   const procedureSteps = steps.filter((s) => s.type === 'procedure_step')
-  let lastSection: string | undefined
+
+  // Pre-compute which steps should show a section header
+  const sectionVisibility = new Set<number>()
+  let prevSection: string | undefined
+  for (let i = 0; i < procedureSteps.length; i++) {
+    const header = procedureSteps[i].section_header
+    if (header && header !== prevSection) sectionVisibility.add(i)
+    if (header) prevSection = header
+  }
 
   return (
     <nav className="space-y-0.5">
       {procedureSteps.map((step, index) => {
         const isCompleted = completedStepIds.has(step.id)
         const isCurrent = index === currentStepIndex
-        const showSection = step.section_header && step.section_header !== lastSection
-        if (step.section_header) lastSection = step.section_header
+        const showSection = sectionVisibility.has(index)
 
         return (
           <div key={step.id}>