feat(FN-2552): distinguish workflow failed dots in task progress

- Add a workflow-failed dot modifier class for failed workflow checks in TaskCard
- Apply ws-warning styling to workflow-origin failed steps while keeping regular failed steps unchanged
- Update TaskCard rendering logic to append the workflow-failed class only for workflow failed items
- Expand TaskCard tests to verify class assignment for regular failed, workflow failed, done, and pending dots

packages/dashboard/app/components/TaskCard.css

@@ -568,6 +568,10 @@
   background: var(--color-error-dark);
 }
 
+.card-step-dot--workflow-failed {
+  background: var(--ws-warning);
+}
+
 .card-step-name {
   flex: 1;
   min-width: 0;

packages/dashboard/app/components/TaskCard.tsx

@@ -1222,25 +1222,29 @@ function TaskCardComponent({
             </button>
             {showSteps && (
               <div className="card-steps-list">
-                {unifiedProgress.items.map((step) => (
-                  <div key={step.id} className="card-step-item">
-                    <span
-                      className={`card-step-dot card-step-dot--${step.status}`}
-                      aria-hidden="true"
-                    />
-                    <span className={`card-step-name${step.status === "done" ? " completed" : ""}`}>
-                      {step.name}
-                    </span>
-                    {step.source === "workflow" && (
+                {unifiedProgress.items.map((step) => {
+                  const isWorkflowFailed = step.source === "workflow" && step.status === "failed";
+
+                  return (
+                    <div key={step.id} className="card-step-item">
                       <span
-                        className={`card-step-workflow-badge card-step-workflow-badge--${step.phase}`}
-                        title="Workflow check"
-                      >
-                        workflow
+                        className={`card-step-dot card-step-dot--${step.status}${isWorkflowFailed ? " card-step-dot--workflow-failed" : ""}`}
+                        aria-hidden="true"
+                      />
+                      <span className={`card-step-name${step.status === "done" ? " completed" : ""}`}>
+                        {step.name}
                       </span>
-                    )}
-                  </div>
-                ))}
+                      {step.source === "workflow" && (
+                        <span
+                          className={`card-step-workflow-badge card-step-workflow-badge--${step.phase}`}
+                          title="Workflow check"
+                        >
+                          workflow
+                        </span>
+                      )}
+                    </div>
+                  );
+                })}
               </div>
             )}
           </>

packages/dashboard/app/components/__tests__/TaskCard.test.tsx

@@ -167,7 +167,7 @@ describe("TaskCard", () => {
         task={makeTask({
           steps: [
             { name: "Step 0", status: "done" },
-            { name: "Step 1", status: "pending" },
+            { name: "Step 1", status: "failed" },
           ],
           enabledWorkflowSteps: ["WS-001", "WS-002", "WS-003"],
           workflowStepResults: [
@@ -200,9 +200,17 @@ describe("TaskCard", () => {
     ]);
 
     const dots = container.querySelectorAll(".card-step-dot");
+    expect(dots[1]?.className).toContain("card-step-dot--failed");
+    expect(dots[1]?.className).not.toContain("card-step-dot--workflow-failed");
+
     expect(dots[2]?.className).toContain("card-step-dot--done");
+    expect(dots[2]?.className).not.toContain("card-step-dot--workflow-failed");
+
     expect(dots[3]?.className).toContain("card-step-dot--failed");
+    expect(dots[3]?.className).toContain("card-step-dot--workflow-failed");
+
     expect(dots[4]?.className).toContain("card-step-dot--pending");
+    expect(dots[4]?.className).not.toContain("card-step-dot--workflow-failed");
 
     const workflowBadgeElements = container.querySelectorAll(".card-step-workflow-badge");
     const workflowBadges = Array.from(workflowBadgeElements).map((el) => el.textContent);