From 515aada183d19efadbf6d36b5d919502ce2b5b4e Mon Sep 17 00:00:00 2001
From: youngmrz <elliott.zach@gmail.com>
Date: Fri, 16 Jan 2026 17:46:33 -0500
Subject: [PATCH] fix(ui): show progress percentage during planning phase on
 task cards (#1162)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(ui): show progress percentage during planning phase on task cards

TaskCard wasn't passing executionProgress.phaseProgress to PhaseProgressIndicator,
causing "—" to display during planning even though backend sends progress data.

Changes:
- Add phaseProgress prop to PhaseProgressIndicator interface
- Use phaseProgress as fallback when phaseLogs unavailable
- Pass task.executionProgress?.phaseProgress from TaskCard

Now task cards show actual progress percentage during planning/QA phases
instead of "Idle" with "—".

Fixes #1116

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Signed-off-by: youngmrz <elliott.zach@gmail.com>

* fix: simplify phaseProgress conditional per Gemini feedback

Use nullish coalescing (phaseProgress ?? 0) > 0 for cleaner check.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Signed-off-by: youngmrz <elliott.zach@gmail.com>

* fix(ui): cap phaseProgress percentage at 100% to prevent misleading values

The condition (phaseProgress ?? 0) > 0 only checks for positive values but
doesn't cap at 100. If phaseProgress exceeds 100, the UI would display
misleading values like '150%'. This fix adds Math.min(phaseProgress!, 100)
to ensure the displayed percentage never exceeds 100%.

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

---------

Signed-off-by: youngmrz <elliott.zach@gmail.com>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: Andy <119136210+AndyMik90@users.noreply.github.com>
---
 .../src/renderer/components/PhaseProgressIndicator.tsx       | 5 +++++
 apps/frontend/src/renderer/components/TaskCard.tsx           | 1 +
 2 files changed, 6 insertions(+)

diff --git a/apps/frontend/src/renderer/components/PhaseProgressIndicator.tsx b/apps/frontend/src/renderer/components/PhaseProgressIndicator.tsx
index 9a98ca7f..f911034b 100644
--- a/apps/frontend/src/renderer/components/PhaseProgressIndicator.tsx
+++ b/apps/frontend/src/renderer/components/PhaseProgressIndicator.tsx
@@ -8,6 +8,8 @@ interface PhaseProgressIndicatorProps {
   phase?: ExecutionPhase;
   subtasks: Subtask[];
   phaseLogs?: TaskLogs | null;
+  /** Fallback progress percentage (0-100) when phaseLogs unavailable */
+  phaseProgress?: number;
   isStuck?: boolean;
   isRunning?: boolean;
   className?: string;
@@ -47,6 +49,7 @@ export const PhaseProgressIndicator = memo(function PhaseProgressIndicator({
   phase: rawPhase,
   subtasks,
   phaseLogs,
+  phaseProgress,
   isStuck = false,
   isRunning = false,
   className,
@@ -140,6 +143,8 @@ export const PhaseProgressIndicator = memo(function PhaseProgressIndicator({
             <span className="text-muted-foreground">
               {activeEntries} {activeEntries === 1 ? t('execution.labels.entry') : t('execution.labels.entries')}
             </span>
+          ) : isRunning && isIndeterminatePhase && (phaseProgress ?? 0) > 0 ? (
+            `${Math.round(Math.min(phaseProgress!, 100))}%`
           ) : (
             '—'
           )}
diff --git a/apps/frontend/src/renderer/components/TaskCard.tsx b/apps/frontend/src/renderer/components/TaskCard.tsx
index 9c6fa185..3df8acee 100644
--- a/apps/frontend/src/renderer/components/TaskCard.tsx
+++ b/apps/frontend/src/renderer/components/TaskCard.tsx
@@ -488,6 +488,7 @@ export const TaskCard = memo(function TaskCard({ task, onClick, onStatusChange }
             <PhaseProgressIndicator
               phase={executionPhase}
               subtasks={task.subtasks}
+              phaseProgress={task.executionProgress?.phaseProgress}
               isStuck={isStuck}
               isRunning={isRunning}
             />