Add thread metadata display and unique color handling

- Fix PyStitch threadlist interpretation: threads = color blocks, not unique colors
- Add uniqueColors array to PesPatternData with proper deduplication at data layer
- Display thread metadata (brand, catalog number, chart, description) across all components
- Show unique colors vs thread blocks (e.g., "5 / 12" colors/blocks)
- Improve null value handling for missing thread metadata
- Reorder metadata display: brand + catalog # • chart + description
- Add metadata to pattern preview legend, tooltips, and color swatches

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/components/FileUpload.tsx

@@ -126,7 +126,7 @@ export function FileUpload({
 
       {!isLoading && pesData && (
         <div className="mb-3">
-          <div className="grid grid-cols-2 gap-2 text-xs mb-2">
+          <div className="grid grid-cols-3 gap-2 text-xs mb-2">
             <div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">
               <span className="text-gray-600 dark:text-gray-400 block">Size</span>
               <span className="font-semibold text-gray-900 dark:text-gray-100">
@@ -140,22 +140,48 @@ export function FileUpload({
                 {pesData.stitchCount.toLocaleString()}
               </span>
             </div>
+            <div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">
+              <span className="text-gray-600 dark:text-gray-400 block">Colors / Blocks</span>
+              <span className="font-semibold text-gray-900 dark:text-gray-100">
+                {pesData.uniqueColors.length} / {pesData.threads.length}
+              </span>
+            </div>
           </div>
 
           <div className="flex items-center gap-2 mb-2">
             <span className="text-xs text-gray-600 dark:text-gray-400">Colors:</span>
             <div className="flex gap-1">
-              {pesData.threads.slice(0, 8).map((thread, idx) => (
+              {pesData.uniqueColors.slice(0, 8).map((color, idx) => {
+                // Primary metadata: brand and catalog number
+                const primaryMetadata = [
+                  color.brand,
+                  color.catalogNumber ? `#${color.catalogNumber}` : null
+                ].filter(Boolean).join(" ");
+
+                // Secondary metadata: chart and description
+                const secondaryMetadata = [
+                  color.chart,
+                  color.description
+                ].filter(Boolean).join(" ");
+
+                const metadata = [primaryMetadata, secondaryMetadata].filter(Boolean).join(" • ");
+
+                const tooltipText = metadata
+                  ? `Color ${idx + 1}: ${color.hex} - ${metadata}`
+                  : `Color ${idx + 1}: ${color.hex}`;
+
+                return (
                   <div
                     key={idx}
                     className="w-3 h-3 rounded-full border border-gray-300 dark:border-gray-600"
-                  style={{ backgroundColor: thread.hex }}
+                    style={{ backgroundColor: color.hex }}
-                  title={`Thread ${idx + 1}: ${thread.hex}`}
+                    title={tooltipText}
                   />
-              ))}
+                );
-              {pesData.colorCount > 8 && (
+              })}
+              {pesData.uniqueColors.length > 8 && (
                 <div className="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 border border-gray-400 dark:border-gray-500 flex items-center justify-center text-[7px] font-bold text-gray-600 dark:text-gray-300">
-                  +{pesData.colorCount - 8}
+                  +{pesData.uniqueColors.length - 8}
                 </div>
               )}
             </div>

src/components/PatternCanvas.tsx

@@ -296,17 +296,42 @@ export function PatternCanvas({ pesData, sewingProgress, machineInfo, initialPat
         {pesData && (
           <>
             {/* Thread Legend Overlay */}
-            <div className="absolute top-2.5 left-2.5 bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm p-2.5 rounded-lg shadow-lg z-10 max-w-[150px]">
+            <div className="absolute top-2.5 left-2.5 bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm p-2.5 rounded-lg shadow-lg z-10 max-w-[200px]">
-              <h4 className="m-0 mb-2 text-xs font-semibold text-gray-900 dark:text-gray-100 border-b border-gray-300 dark:border-gray-600 pb-1.5">Threads</h4>
+              <h4 className="m-0 mb-2 text-xs font-semibold text-gray-900 dark:text-gray-100 border-b border-gray-300 dark:border-gray-600 pb-1.5">Colors</h4>
-              {pesData.threads.map((thread, index) => (
+              {pesData.uniqueColors.map((color, idx) => {
-                <div key={index} className="flex items-center gap-2 mb-1.5 last:mb-0">
+                // Primary metadata: brand and catalog number
+                const primaryMetadata = [
+                  color.brand,
+                  color.catalogNumber ? `#${color.catalogNumber}` : null
+                ].filter(Boolean).join(" ");
+
+                // Secondary metadata: chart and description
+                const secondaryMetadata = [
+                  color.chart,
+                  color.description
+                ].filter(Boolean).join(" ");
+
+                return (
+                  <div key={idx} className="flex items-start gap-2 mb-1.5 last:mb-0">
                     <div
-                    className="w-4 h-4 rounded border border-black dark:border-gray-300 flex-shrink-0"
+                      className="w-4 h-4 rounded border border-black dark:border-gray-300 flex-shrink-0 mt-0.5"
-                    style={{ backgroundColor: thread.hex }}
+                      style={{ backgroundColor: color.hex }}
                     />
-                  <span className="text-[11px] text-gray-900 dark:text-gray-100">Thread {index + 1}</span>
+                    <div className="flex-1 min-w-0">
+                      <div className="text-[11px] font-semibold text-gray-900 dark:text-gray-100">
+                        Color {idx + 1}
                       </div>
-              ))}
+                      {(primaryMetadata || secondaryMetadata) && (
+                        <div className="text-[9px] text-gray-600 dark:text-gray-400 leading-tight mt-0.5 break-words">
+                          {primaryMetadata}
+                          {primaryMetadata && secondaryMetadata && <span className="mx-1">•</span>}
+                          {secondaryMetadata}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
             </div>
 
             {/* Pattern Offset Indicator */}

src/components/PatternSummaryCard.tsx

@@ -28,7 +28,7 @@ export function PatternSummaryCard({
         </div>
       </div>
 
-      <div className="grid grid-cols-2 gap-2 text-xs mb-3">
+      <div className="grid grid-cols-3 gap-2 text-xs mb-3">
         <div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">
           <span className="text-gray-600 dark:text-gray-400 block">Size</span>
           <span className="font-semibold text-gray-900 dark:text-gray-100">
@@ -42,22 +42,50 @@ export function PatternSummaryCard({
             {pesData.stitchCount.toLocaleString()}
           </span>
         </div>
+        <div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">
+          <span className="text-gray-600 dark:text-gray-400 block">Colors</span>
+          <span className="font-semibold text-gray-900 dark:text-gray-100">
+            {pesData.uniqueColors.length}
+          </span>
+        </div>
       </div>
 
       <div className="flex items-center gap-2 mb-2">
         <span className="text-xs text-gray-600 dark:text-gray-400">Colors:</span>
         <div className="flex gap-1">
-          {pesData.threads.slice(0, 8).map((thread, idx) => (
+          {pesData.uniqueColors.slice(0, 8).map((color, idx) => {
+            // Primary metadata: brand and catalog number
+            const primaryMetadata = [
+              color.brand,
+              color.catalogNumber ? `#${color.catalogNumber}` : null
+            ].filter(Boolean).join(" ");
+
+            // Secondary metadata: chart and description
+            const secondaryMetadata = [
+              color.chart,
+              color.description
+            ].filter(Boolean).join(" ");
+
+            const metadata = [primaryMetadata, secondaryMetadata].filter(Boolean).join(" • ");
+
+            // Show which thread blocks use this color
+            const threadNumbers = color.threadIndices.map(i => i + 1).join(", ");
+            const tooltipText = metadata
+              ? `Color ${idx + 1}: ${color.hex}\n${metadata}\nUsed in thread blocks: ${threadNumbers}`
+              : `Color ${idx + 1}: ${color.hex}\nUsed in thread blocks: ${threadNumbers}`;
+
+            return (
               <div
                 key={idx}
                 className="w-3 h-3 rounded-full border border-gray-300 dark:border-gray-600"
-              style={{ backgroundColor: thread.hex }}
+                style={{ backgroundColor: color.hex }}
-              title={`Thread ${idx + 1}: ${thread.hex}`}
+                title={tooltipText}
               />
-          ))}
+            );
-          {pesData.colorCount > 8 && (
+          })}
+          {pesData.uniqueColors.length > 8 && (
             <div className="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 border border-gray-400 dark:border-gray-500 flex items-center justify-center text-[7px] font-bold text-gray-600 dark:text-gray-300">
-              +{pesData.colorCount - 8}
+              +{pesData.uniqueColors.length - 8}
             </div>
           )}
         </div>

src/components/ProgressMonitor.tsx

@@ -8,17 +8,17 @@ import {
   PauseCircleIcon,
   ExclamationCircleIcon,
   ChartBarIcon,
-  ArrowPathIcon
+  ArrowPathIcon,
-} from '@heroicons/react/24/solid';
+} from "@heroicons/react/24/solid";
-import type { PatternInfo, SewingProgress } from '../types/machine';
+import type { PatternInfo, SewingProgress } from "../types/machine";
-import { MachineStatus } from '../types/machine';
+import { MachineStatus } from "../types/machine";
-import type { PesPatternData } from '../utils/pystitchConverter';
+import type { PesPatternData } from "../utils/pystitchConverter";
 import {
   canStartSewing,
   canStartMaskTrace,
   canResumeSewing,
-  getStateVisualInfo
+  getStateVisualInfo,
-} from '../utils/machineStateHelpers';
+} from "../utils/machineStateHelpers";
 
 interface ProgressMonitorProps {
   machineStatus: MachineStatus;
@@ -43,7 +43,8 @@ export function ProgressMonitor({
   isDeleting = false,
 }: ProgressMonitorProps) {
   // State indicators
-  const isMaskTraceComplete = machineStatus === MachineStatus.MASK_TRACE_COMPLETE;
+  const isMaskTraceComplete =
+    machineStatus === MachineStatus.MASK_TRACE_COMPLETE;
 
   const stateVisual = getStateVisualInfo(machineStatus);
 
@@ -52,13 +53,18 @@ export function ProgressMonitor({
     : 0;
 
   // Calculate color block information from pesData
-  const colorBlocks = pesData ? (() => {
+  const colorBlocks = pesData
+    ? (() => {
         const blocks: Array<{
           colorIndex: number;
           threadHex: string;
           startStitch: number;
           endStitch: number;
           stitchCount: number;
+          threadCatalogNumber: string | null;
+          threadBrand: string | null;
+          threadDescription: string | null;
+          threadChart: string | null;
         }> = [];
 
         let currentColorIndex = pesData.stitches[0]?.[3] ?? 0;
@@ -68,11 +74,19 @@ export function ProgressMonitor({
           const stitchColorIndex = pesData.stitches[i][3];
 
           // When color changes, save the previous block
-      if (stitchColorIndex !== currentColorIndex || i === pesData.stitches.length - 1) {
+          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: pesData.threads[currentColorIndex]?.hex || '#000000',
+              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,
@@ -84,25 +98,27 @@ export function ProgressMonitor({
         }
 
         return blocks;
-  })() : [];
+      })()
+    : [];
 
   // Determine current color block based on current stitch
   const currentStitch = sewingProgress?.currentStitch || 0;
   const currentBlockIndex = colorBlocks.findIndex(
-    block => currentStitch >= block.startStitch && currentStitch < block.endStitch
+    (block) =>
+      currentStitch >= block.startStitch && currentStitch < block.endStitch,
   );
 
   const stateIndicatorColors = {
-    idle: 'bg-blue-50 dark:bg-blue-900/20 border-blue-600',
+    idle: "bg-blue-50 dark:bg-blue-900/20 border-blue-600",
-    info: 'bg-blue-50 dark:bg-blue-900/20 border-blue-600',
+    info: "bg-blue-50 dark:bg-blue-900/20 border-blue-600",
-    active: 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-500',
+    active: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-500",
-    waiting: 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-500',
+    waiting: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-500",
-    warning: 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-500',
+    warning: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-500",
-    complete: 'bg-green-50 dark:bg-green-900/20 border-green-600',
+    complete: "bg-green-50 dark:bg-green-900/20 border-green-600",
-    success: 'bg-green-50 dark:bg-green-900/20 border-green-600',
+    success: "bg-green-50 dark:bg-green-900/20 border-green-600",
-    interrupted: 'bg-red-50 dark:bg-red-900/20 border-red-600',
+    interrupted: "bg-red-50 dark:bg-red-900/20 border-red-600",
-    error: 'bg-red-50 dark:bg-red-900/20 border-red-600',
+    error: "bg-red-50 dark:bg-red-900/20 border-red-600",
-    danger: 'bg-red-50 dark:bg-red-900/20 border-red-600',
+    danger: "bg-red-50 dark:bg-red-900/20 border-red-600",
   };
 
   return (
@@ -110,7 +126,9 @@ export function ProgressMonitor({
       <div className="flex items-start gap-3 mb-3">
         <ChartBarIcon className="w-6 h-6 text-purple-600 dark:text-purple-400 flex-shrink-0 mt-0.5" />
         <div className="flex-1 min-w-0">
-          <h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-1">Sewing Progress</h3>
+          <h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-1">
+            Sewing Progress
+          </h3>
           {sewingProgress && (
             <p className="text-xs text-gray-600 dark:text-gray-400">
               {progressPercent.toFixed(1)}% complete
@@ -123,18 +141,29 @@ export function ProgressMonitor({
       {patternInfo && (
         <div className="grid grid-cols-3 gap-2 text-xs mb-3">
           <div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">
-            <span className="text-gray-600 dark:text-gray-400 block">Total Stitches</span>
+            <span className="text-gray-600 dark:text-gray-400 block">
-            <span className="font-semibold text-gray-900 dark:text-gray-100">{patternInfo.totalStitches.toLocaleString()}</span>
+              Total Stitches
-          </div>
+            </span>
-          <div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">
-            <span className="text-gray-600 dark:text-gray-400 block">Est. Time</span>
             <span className="font-semibold text-gray-900 dark:text-gray-100">
-              {Math.floor(patternInfo.totalTime / 60)}:{String(patternInfo.totalTime % 60).padStart(2, '0')}
+              {patternInfo.totalStitches.toLocaleString()}
             </span>
           </div>
           <div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">
-            <span className="text-gray-600 dark:text-gray-400 block">Speed</span>
+            <span className="text-gray-600 dark:text-gray-400 block">
-            <span className="font-semibold text-gray-900 dark:text-gray-100">{patternInfo.speed} spm</span>
+              Est. Time
+            </span>
+            <span className="font-semibold text-gray-900 dark:text-gray-100">
+              {Math.floor(patternInfo.totalTime / 60)}:
+              {String(patternInfo.totalTime % 60).padStart(2, "0")}
+            </span>
+          </div>
+          <div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">
+            <span className="text-gray-600 dark:text-gray-400 block">
+              Speed
+            </span>
+            <span className="font-semibold text-gray-900 dark:text-gray-100">
+              {patternInfo.speed} spm
+            </span>
           </div>
         </div>
       )}
@@ -143,20 +172,29 @@ export function ProgressMonitor({
       {sewingProgress && (
         <div className="mb-3">
           <div className="h-3 bg-gray-300 dark:bg-gray-600 rounded-md overflow-hidden shadow-inner relative mb-2">
-            <div className="h-full bg-gradient-to-r from-purple-600 to-purple-700 dark:from-purple-600 dark:to-purple-800 transition-all duration-300 ease-out relative overflow-hidden after:absolute after:inset-0 after:bg-gradient-to-r after:from-transparent after:via-white/30 after:to-transparent after:animate-[shimmer_2s_infinite]" style={{ width: `${progressPercent}%` }} />
+            <div
+              className="h-full bg-gradient-to-r from-purple-600 to-purple-700 dark:from-purple-600 dark:to-purple-800 transition-all duration-300 ease-out relative overflow-hidden after:absolute after:inset-0 after:bg-gradient-to-r after:from-transparent after:via-white/30 after:to-transparent after:animate-[shimmer_2s_infinite]"
+              style={{ width: `${progressPercent}%` }}
+            />
           </div>
 
           <div className="grid grid-cols-2 gap-2 text-xs mb-3">
             <div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">
-              <span className="text-gray-600 dark:text-gray-400 block">Current Stitch</span>
+              <span className="text-gray-600 dark:text-gray-400 block">
+                Current Stitch
+              </span>
               <span className="font-semibold text-gray-900 dark:text-gray-100">
-                {sewingProgress.currentStitch.toLocaleString()} / {patternInfo?.totalStitches.toLocaleString() || 0}
+                {sewingProgress.currentStitch.toLocaleString()} /{" "}
+                {patternInfo?.totalStitches.toLocaleString() || 0}
               </span>
             </div>
             <div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">
-              <span className="text-gray-600 dark:text-gray-400 block">Time Elapsed</span>
+              <span className="text-gray-600 dark:text-gray-400 block">
+                Time Elapsed
+              </span>
               <span className="font-semibold text-gray-900 dark:text-gray-100">
-                {Math.floor(sewingProgress.currentTime / 60)}:{String(sewingProgress.currentTime % 60).padStart(2, '0')}
+                {Math.floor(sewingProgress.currentTime / 60)}:
+                {String(sewingProgress.currentTime % 60).padStart(2, "0")}
               </span>
             </div>
           </div>
@@ -164,24 +202,43 @@ export function ProgressMonitor({
       )}
 
       {/* State Visual Indicator */}
-      {patternInfo && (() => {
+      {patternInfo &&
+        (() => {
           const iconMap = {
-          ready: <ClockIcon className="w-5 h-5 text-blue-600 dark:text-blue-400" />,
+            ready: (
-          active: <PlayIcon className="w-5 h-5 text-yellow-600 dark:text-yellow-400" />,
+              <ClockIcon className="w-5 h-5 text-blue-600 dark:text-blue-400" />
-          waiting: <PauseCircleIcon className="w-5 h-5 text-yellow-600 dark:text-yellow-400" />,
+            ),
-          complete: <CheckBadgeIcon className="w-5 h-5 text-green-600 dark:text-green-400" />,
+            active: (
-          interrupted: <PauseCircleIcon className="w-5 h-5 text-red-600 dark:text-red-400" />,
+              <PlayIcon className="w-5 h-5 text-yellow-600 dark:text-yellow-400" />
-          error: <ExclamationCircleIcon className="w-5 h-5 text-red-600 dark:text-red-400" />
+            ),
+            waiting: (
+              <PauseCircleIcon className="w-5 h-5 text-yellow-600 dark:text-yellow-400" />
+            ),
+            complete: (
+              <CheckBadgeIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
+            ),
+            interrupted: (
+              <PauseCircleIcon className="w-5 h-5 text-red-600 dark:text-red-400" />
+            ),
+            error: (
+              <ExclamationCircleIcon className="w-5 h-5 text-red-600 dark:text-red-400" />
+            ),
           };
 
           return (
-          <div className={`flex items-center gap-3 p-2.5 rounded-lg mb-3 border-l-4 ${stateIndicatorColors[stateVisual.color as keyof typeof stateIndicatorColors] || stateIndicatorColors.info}`}>
+            <div
+              className={`flex items-center gap-3 p-2.5 rounded-lg mb-3 border-l-4 ${stateIndicatorColors[stateVisual.color as keyof typeof stateIndicatorColors] || stateIndicatorColors.info}`}
+            >
               <div className="flex-shrink-0">
                 {iconMap[stateVisual.iconName]}
               </div>
               <div className="flex-1">
-              <div className="font-semibold text-xs dark:text-gray-100">{stateVisual.label}</div>
+                <div className="font-semibold text-xs dark:text-gray-100">
-              <div className="text-[10px] text-gray-600 dark:text-gray-400">{stateVisual.description}</div>
+                  {stateVisual.label}
+                </div>
+                <div className="text-[10px] text-gray-600 dark:text-gray-400">
+                  {stateVisual.description}
+                </div>
               </div>
             </div>
           );
@@ -190,7 +247,9 @@ export function ProgressMonitor({
       {/* Color Blocks */}
       {colorBlocks.length > 0 && (
         <div className="mb-3">
-          <h4 className="text-xs font-semibold mb-2 text-gray-700 dark:text-gray-300">Color Blocks</h4>
+          <h4 className="text-xs font-semibold mb-2 text-gray-700 dark:text-gray-300">
+            Color Blocks
+          </h4>
           <div className="flex flex-col gap-2">
             {colorBlocks.map((block, index) => {
               const isCompleted = currentStitch >= block.endStitch;
@@ -199,7 +258,9 @@ export function ProgressMonitor({
               // Calculate progress within current block
               let blockProgress = 0;
               if (isCurrent) {
-                blockProgress = ((currentStitch - block.startStitch) / block.stitchCount) * 100;
+                blockProgress =
+                  ((currentStitch - block.startStitch) / block.stitchCount) *
+                  100;
               } else if (isCompleted) {
                 blockProgress = 100;
               }
@@ -209,13 +270,13 @@ export function ProgressMonitor({
                   key={index}
                   className={`p-2.5 rounded-lg border-2 transition-all duration-300 ${
                     isCompleted
-                      ? 'border-green-600 bg-green-50 dark:bg-green-900/20'
+                      ? "border-green-600 bg-green-50 dark:bg-green-900/20"
                       : isCurrent
-                      ? 'border-purple-600 bg-purple-50 dark:bg-purple-900/20 shadow-lg shadow-purple-600/20 animate-pulseGlow'
+                        ? "border-purple-600 bg-purple-50 dark:bg-purple-900/20 shadow-lg shadow-purple-600/20 animate-pulseGlow"
-                      : 'border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800/50 opacity-70'
+                        : "border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800/50 opacity-70"
                   }`}
                   role="listitem"
-                  aria-label={`Thread ${block.colorIndex + 1}, ${block.stitchCount} stitches, ${isCompleted ? 'completed' : isCurrent ? 'in progress' : 'pending'}`}
+                  aria-label={`Thread ${block.colorIndex + 1}, ${block.stitchCount} stitches, ${isCompleted ? "completed" : isCurrent ? "in progress" : "pending"}`}
                 >
                   <div className="flex items-center gap-2.5">
                     {/* Color swatch */}
@@ -223,7 +284,7 @@ export function ProgressMonitor({
                       className="w-7 h-7 rounded-lg border-2 border-gray-300 dark:border-gray-600 shadow-md flex-shrink-0"
                       style={{
                         backgroundColor: block.threadHex,
-                        ...(isCurrent && { borderColor: '#9333ea' })
+                        ...(isCurrent && { borderColor: "#9333ea" }),
                       }}
                       title={`Thread color: ${block.threadHex}`}
                       aria-label={`Thread color ${block.threadHex}`}
@@ -233,6 +294,28 @@ export function ProgressMonitor({
                     <div className="flex-1 min-w-0">
                       <div className="font-semibold text-xs text-gray-900 dark:text-gray-100">
                         Thread {block.colorIndex + 1}
+                        {(block.threadBrand || block.threadChart || block.threadDescription || block.threadCatalogNumber) && (
+                          <span className="font-normal text-gray-600 dark:text-gray-400">
+                            {" "}
+                            (
+                            {(() => {
+                              // Primary metadata: brand and catalog number
+                              const primaryMetadata = [
+                                block.threadBrand,
+                                block.threadCatalogNumber ? `#${block.threadCatalogNumber}` : null
+                              ].filter(Boolean).join(" ");
+
+                              // Secondary metadata: chart and description
+                              const secondaryMetadata = [
+                                block.threadChart,
+                                block.threadDescription
+                              ].filter(Boolean).join(" ");
+
+                              return [primaryMetadata, secondaryMetadata].filter(Boolean).join(" • ");
+                            })()}
+                            )
+                          </span>
+                        )}
                       </div>
                       <div className="text-[10px] text-gray-600 dark:text-gray-400 mt-0.5">
                         {block.stitchCount.toLocaleString()} stitches
@@ -241,11 +324,20 @@ export function ProgressMonitor({
 
                     {/* Status icon */}
                     {isCompleted ? (
-                      <CheckCircleIcon className="w-5 h-5 text-green-600 flex-shrink-0" aria-label="Completed" />
+                      <CheckCircleIcon
+                        className="w-5 h-5 text-green-600 flex-shrink-0"
+                        aria-label="Completed"
+                      />
                     ) : isCurrent ? (
-                      <ArrowRightIcon className="w-5 h-5 text-purple-600 flex-shrink-0 animate-pulse" aria-label="In progress" />
+                      <ArrowRightIcon
+                        className="w-5 h-5 text-purple-600 flex-shrink-0 animate-pulse"
+                        aria-label="In progress"
+                      />
                     ) : (
-                      <CircleStackIcon className="w-5 h-5 text-gray-400 flex-shrink-0" aria-label="Pending" />
+                      <CircleStackIcon
+                        className="w-5 h-5 text-gray-400 flex-shrink-0"
+                        aria-label="Pending"
+                      />
                     )}
                   </div>
 
@@ -304,10 +396,14 @@ export function ProgressMonitor({
             onClick={onStartMaskTrace}
             disabled={isDeleting}
             className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 bg-gray-600 dark:bg-gray-700 text-white rounded font-semibold text-xs hover:bg-gray-700 dark:hover:bg-gray-600 active:bg-gray-800 dark:active:bg-gray-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
-            aria-label={isMaskTraceComplete ? 'Start mask trace again' : 'Start mask trace'}
+            aria-label={
+              isMaskTraceComplete
+                ? "Start mask trace again"
+                : "Start mask trace"
+            }
           >
             <ArrowPathIcon className="w-3.5 h-3.5" />
-            {isMaskTraceComplete ? 'Trace Again' : 'Start Mask Trace'}
+            {isMaskTraceComplete ? "Trace Again" : "Start Mask Trace"}
           </button>
         )}
       </div>

src/utils/pystitchConverter.ts

@@ -1,4 +1,4 @@
-import { pyodideLoader } from './pyodideLoader';
+import { pyodideLoader } from "./pyodideLoader";
 import {
   STITCH,
   MOVE,
@@ -8,7 +8,7 @@ import {
   PEN_CUT_DATA,
   PEN_COLOR_END,
   PEN_DATA_END,
-} from './embroideryConstants';
+} from "./embroideryConstants";
 
 // JavaScript constants module to expose to Python
 const jsEmbConstants = {
@@ -23,6 +23,19 @@ export interface PesPatternData {
   threads: Array<{
     color: number;
     hex: string;
+    brand: string | null;
+    catalogNumber: string | null;
+    description: string | null;
+    chart: string | null;
+  }>;
+  uniqueColors: Array<{
+    color: number;
+    hex: string;
+    brand: string | null;
+    catalogNumber: string | null;
+    description: string | null;
+    chart: string | null;
+    threadIndices: number[]; // Which thread entries use this color
   }>;
   penData: Uint8Array;
   colorCount: number;
@@ -43,14 +56,14 @@ export async function convertPesToPen(file: File): Promise<PesPatternData> {
   const pyodide = await pyodideLoader.initialize();
 
   // Register our JavaScript constants module for Python to import
-  pyodide.registerJsModule('js_emb_constants', jsEmbConstants);
+  pyodide.registerJsModule("js_emb_constants", jsEmbConstants);
 
   // Read the PES file
   const buffer = await file.arrayBuffer();
   const uint8Array = new Uint8Array(buffer);
 
   // Write file to Pyodide virtual filesystem
-  const filename = '/tmp/pattern.pes';
+  const filename = "/tmp/pattern.pes";
   pyodide.FS.writeFile(filename, uint8Array);
 
   // Read the pattern using PyStitch
@@ -123,7 +136,11 @@ for i, stitch in enumerate(pattern.stitches):
     'threads': [
         {
             'color': thread.color if hasattr(thread, 'color') else 0,
-            'hex': thread.hex_color() if hasattr(thread, 'hex_color') else '#000000'
+            'hex': thread.hex_color() if hasattr(thread, 'hex_color') else '#000000',
+            'catalog_number': thread.catalog_number if hasattr(thread, 'catalog_number') else -1,
+            'brand': thread.brand if hasattr(thread, 'brand') else "",
+            'description': thread.description if hasattr(thread, 'description') else "",
+            'chart': thread.chart if hasattr(thread, 'chart') else ""
         }
         for thread in pattern.threadlist
     ],
@@ -136,7 +153,6 @@ for i, stitch in enumerate(pattern.stitches):
   // Convert Python result to JavaScript
   const data = result.toJs({ dict_converter: Object.fromEntries });
 
-
   // Clean up virtual file
   try {
     pyodide.FS.unlink(filename);
@@ -145,19 +161,45 @@ for i, stitch in enumerate(pattern.stitches):
   }
 
   // Extract stitches and validate
-  const stitches: number[][] = Array.from(data.stitches as ArrayLike<ArrayLike<number>>).map((stitch) =>
+  const stitches: number[][] = Array.from(
-    Array.from(stitch)
+    data.stitches as ArrayLike<ArrayLike<number>>,
-  );
+  ).map((stitch) => Array.from(stitch));
 
   if (!stitches || stitches.length === 0) {
-    throw new Error('Invalid PES file or no stitches found');
+    throw new Error("Invalid PES file or no stitches found");
   }
 
-  // Extract thread data
+  // Extract thread data - preserve null values for unavailable metadata
-  const threads = (data.threads as Array<{ color?: number; hex?: string }>).map((thread) => ({
+  const threads = (
-    color: thread.color || 0,
+    data.threads as Array<{
-    hex: thread.hex || '#000000',
+      color?: number;
-  }));
+      hex?: string;
+      catalog_number?: number | string;
+      brand?: string;
+      description?: string;
+      chart?: string;
+    }>
+  ).map((thread) => {
+    // Normalize catalog_number - can be string or number from PyStitch
+    const catalogNum = thread.catalog_number;
+    const normalizedCatalog =
+      catalogNum !== undefined &&
+      catalogNum !== null &&
+      catalogNum !== -1 &&
+      catalogNum !== "-1" &&
+      catalogNum !== ""
+        ? String(catalogNum)
+        : null;
+
+    return {
+      color: thread.color ?? 0,
+      hex: thread.hex || "#000000",
+      catalogNumber: normalizedCatalog,
+      brand: thread.brand && thread.brand !== "" ? thread.brand : null,
+      description: thread.description && thread.description !== "" ? thread.description : null,
+      chart: thread.chart && thread.chart !== "" ? thread.chart : null,
+    };
+  });
 
   // Track bounds
   let minX = Infinity;
@@ -187,8 +229,8 @@ for i, stitch in enumerate(pattern.stitches):
     // Encode absolute coordinates with flags in low 3 bits
     // Shift coordinates left by 3 bits to make room for flags
     // As per official app line 780: buffer[index64] = (byte) ((int) numArray4[index64 / 4, 0] << 3 & (int) byte.MaxValue);
-    let xEncoded = (absX << 3) & 0xFFFF;
+    let xEncoded = (absX << 3) & 0xffff;
-    let yEncoded = (absY << 3) & 0xFFFF;
+    let yEncoded = (absY << 3) & 0xffff;
 
     // Add command flags to Y-coordinate based on stitch type
     if (cmd & MOVE) {
@@ -209,20 +251,24 @@ for i, stitch in enumerate(pattern.stitches):
     const nextStitch = stitches[i + 1];
     const nextStitchColor = nextStitch?.[3];
 
-    if (!isLastStitch && nextStitchColor !== undefined && nextStitchColor !== stitchColor) {
+    if (
+      !isLastStitch &&
+      nextStitchColor !== undefined &&
+      nextStitchColor !== stitchColor
+    ) {
       // This is the last stitch before a color change (but not the last stitch overall)
-      xEncoded = (xEncoded & 0xFFF8) | PEN_COLOR_END;
+      xEncoded = (xEncoded & 0xfff8) | PEN_COLOR_END;
     } else if (isLastStitch) {
       // This is the very last stitch of the pattern
-      xEncoded = (xEncoded & 0xFFF8) | PEN_DATA_END;
+      xEncoded = (xEncoded & 0xfff8) | PEN_DATA_END;
     }
 
     // Add stitch as 4 bytes: [X_low, X_high, Y_low, Y_high]
     penStitches.push(
-      xEncoded & 0xFF,
+      xEncoded & 0xff,
-      (xEncoded >> 8) & 0xFF,
+      (xEncoded >> 8) & 0xff,
-      yEncoded & 0xFF,
+      yEncoded & 0xff,
-      (yEncoded >> 8) & 0xFF
+      (yEncoded >> 8) & 0xff,
     );
 
     // Check for end command
@@ -233,9 +279,29 @@ for i, stitch in enumerate(pattern.stitches):
 
   const penData = new Uint8Array(penStitches);
 
+  // Calculate unique colors from threads (threads represent color blocks, not unique colors)
+  const uniqueColors = threads.reduce((acc, thread, idx) => {
+    const existing = acc.find(c => c.hex === thread.hex);
+    if (existing) {
+      existing.threadIndices.push(idx);
+    } else {
+      acc.push({
+        color: thread.color,
+        hex: thread.hex,
+        brand: thread.brand,
+        catalogNumber: thread.catalogNumber,
+        description: thread.description,
+        chart: thread.chart,
+        threadIndices: [idx],
+      });
+    }
+    return acc;
+  }, [] as PesPatternData['uniqueColors']);
+
   return {
     stitches,
     threads,
+    uniqueColors,
     penData,
     colorCount: data.thread_count,
     stitchCount: data.stitch_count,
@@ -251,16 +317,25 @@ for i, stitch in enumerate(pattern.stitches):
 /**
  * Get thread color from pattern data
  */
-export function getThreadColor(data: PesPatternData, colorIndex: number): string {
+export function getThreadColor(
+  data: PesPatternData,
+  colorIndex: number,
+): string {
   if (!data.threads || colorIndex < 0 || colorIndex >= data.threads.length) {
     // Default colors if not specified or index out of bounds
     const defaultColors = [
-      '#FF0000', '#00FF00', '#0000FF', '#FFFF00',
+      "#FF0000",
-      '#FF00FF', '#00FFFF', '#FFA500', '#800080',
+      "#00FF00",
+      "#0000FF",
+      "#FFFF00",
+      "#FF00FF",
+      "#00FFFF",
+      "#FFA500",
+      "#800080",
     ];
     const safeIndex = Math.max(0, colorIndex) % defaultColors.length;
     return defaultColors[safeIndex];
   }
 
-  return data.threads[colorIndex]?.hex || '#000000';
+  return data.threads[colorIndex]?.hex || "#000000";
 }