From 9106038a177797e9d1cdad5b3ce06f9b7efffc7c Mon Sep 17 00:00:00 2001
From: AndyMik90 <andre@mikalsenutvikling.no>
Date: Thu, 18 Dec 2025 19:31:34 +0100
Subject: [PATCH] fix: resolve React key warning in PhaseProgressIndicator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add explicit key to overflow count span that shows "+N" when more
  than 10 subtasks exist (sibling to mapped elements needed a key)
- Add fallback key using index for subtask indicators in case
  subtask.id is undefined

Fixes console warning: "Each child in a list should have a unique
'key' prop"

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/renderer/components/PhaseProgressIndicator.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/auto-claude-ui/src/renderer/components/PhaseProgressIndicator.tsx b/auto-claude-ui/src/renderer/components/PhaseProgressIndicator.tsx
index 5fcf58e1..605236c4 100644
--- a/auto-claude-ui/src/renderer/components/PhaseProgressIndicator.tsx
+++ b/auto-claude-ui/src/renderer/components/PhaseProgressIndicator.tsx
@@ -155,7 +155,7 @@ export function PhaseProgressIndicator({
         <div className="flex flex-wrap gap-1.5 mt-2">
           {subtasks.slice(0, 10).map((subtask, index) => (
             <motion.div
-              key={subtask.id}
+              key={subtask.id || `subtask-${index}`}
               className={cn(
                 'h-2 w-2 rounded-full',
                 subtask.status === 'completed' && 'bg-success',
@@ -185,7 +185,7 @@ export function PhaseProgressIndicator({
             />
           ))}
           {totalSubtasks > 10 && (
-            <span className="text-[10px] text-muted-foreground font-medium ml-0.5">
+            <span key="overflow-count" className="text-[10px] text-muted-foreground font-medium ml-0.5">
               +{totalSubtasks - 10}
             </span>
           )}