Extract TaskStatusBadge element with dark/light text color handling

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

clients/web/src/components/groups/TaskCard/TaskCard.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import {
-  Badge,
   Button,
   Card,
   Collapse,
@@ -11,6 +10,7 @@ import {
 } from "@mantine/core";
 import { ContentViewer } from "../../elements/ContentViewer/ContentViewer";
 import { ProgressDisplay } from "../../elements/ProgressDisplay/ProgressDisplay";
+import { TaskStatusBadge } from "../../elements/TaskStatusBadge/TaskStatusBadge";
 
 export type TaskStatus =
   | "waiting"
@@ -36,14 +36,6 @@ export interface TaskCardProps {
   onCancel: () => void;
 }
 
-const STATUS_COLORS: Record<TaskStatus, string> = {
-  waiting: "gray",
-  running: "blue",
-  completed: "green",
-  failed: "red",
-  cancelled: "yellow",
-};
-
 const TaskContainer = Card.withProps({
   withBorder: true,
   padding: "md",
@@ -172,7 +164,7 @@ export function TaskCard(props: TaskCardProps) {
             {isActive && (
               <CancelButton onClick={onCancel}>Cancel Task</CancelButton>
             )}
-            <Badge color={STATUS_COLORS[status]}>{status}</Badge>
+            <TaskStatusBadge status={status} />
           </HeaderRightGroup>
         </HeaderRow>