From 0e504c3069abf24806e925301b522cd5566eaf04 Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date: Wed, 17 Dec 2025 00:09:14 +0100
Subject: [PATCH] fix: Use decoded penStitches for progress monitor color
 blocks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/ProgressMonitor.tsx | 46 +++++++++++-------------------
 1 file changed, 16 insertions(+), 30 deletions(-)

diff --git a/src/components/ProgressMonitor.tsx b/src/components/ProgressMonitor.tsx
index bc1a874..0f1d3ea 100644
--- a/src/components/ProgressMonitor.tsx
+++ b/src/components/ProgressMonitor.tsx
@@ -60,9 +60,9 @@ export function ProgressMonitor() {
     ? ((sewingProgress?.currentStitch || 0) / patternInfo.totalStitches) * 100
     : 0;
 
-  // Calculate color block information from pesData
+  // Calculate color block information from decoded penStitches
   const colorBlocks = useMemo(() => {
-    if (!pesData) return [];
+    if (!pesData || !pesData.penStitches) return [];
 
     const blocks: Array<{
       colorIndex: number;
@@ -76,34 +76,20 @@ export function ProgressMonitor() {
       threadChart: string | null;
     }> = [];
 
-    let currentColorIndex = pesData.stitches[0]?.[3] ?? 0;
-    let blockStartStitch = 0;
-
-    for (let i = 0; i < pesData.stitches.length; i++) {
-      const stitchColorIndex = pesData.stitches[i][3];
-
-      // When color changes, save the previous block
-      if (
-        stitchColorIndex !== currentColorIndex ||
-        i === pesData.stitches.length - 1
-      ) {
-        const endStitch = i === pesData.stitches.length - 1 ? i + 1 : i;
-        const thread = pesData.threads[currentColorIndex];
-        blocks.push({
-          colorIndex: currentColorIndex,
-          threadHex: thread?.hex || "#000000",
-          threadCatalogNumber: thread?.catalogNumber ?? null,
-          threadBrand: thread?.brand ?? null,
-          threadDescription: thread?.description ?? null,
-          threadChart: thread?.chart ?? null,
-          startStitch: blockStartStitch,
-          endStitch: endStitch,
-          stitchCount: endStitch - blockStartStitch,
-        });
-
-        currentColorIndex = stitchColorIndex;
-        blockStartStitch = i;
-      }
+    // Use the pre-computed color blocks from decoded PEN data
+    for (const penBlock of pesData.penStitches.colorBlocks) {
+      const thread = pesData.threads[penBlock.colorIndex];
+      blocks.push({
+        colorIndex: penBlock.colorIndex,
+        threadHex: thread?.hex || "#000000",
+        threadCatalogNumber: thread?.catalogNumber ?? null,
+        threadBrand: thread?.brand ?? null,
+        threadDescription: thread?.description ?? null,
+        threadChart: thread?.chart ?? null,
+        startStitch: penBlock.startStitchIndex,
+        endStitch: penBlock.endStitchIndex,
+        stitchCount: penBlock.endStitchIndex - penBlock.startStitchIndex,
+      });
     }
 
     return blocks;