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/elements/TaskStatusBadge/TaskStatusBadge.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { TaskStatusBadge } from "./TaskStatusBadge";
+
+const meta: Meta<typeof TaskStatusBadge> = {
+  title: "Elements/TaskStatusBadge",
+  component: TaskStatusBadge,
+};
+
+export default meta;
+type Story = StoryObj<typeof TaskStatusBadge>;
+
+export const Waiting: Story = { args: { status: "waiting" } };
+export const Running: Story = { args: { status: "running" } };
+export const Completed: Story = { args: { status: "completed" } };
+export const Failed: Story = { args: { status: "failed" } };
+export const Cancelled: Story = { args: { status: "cancelled" } };

clients/web/src/components/elements/TaskStatusBadge/TaskStatusBadge.tsx

@@ -0,0 +1,25 @@
+import { Badge, useComputedColorScheme } from "@mantine/core";
+import type { TaskStatus } from "../../groups/TaskCard/TaskCard";
+
+export interface TaskStatusBadgeProps {
+  status: TaskStatus;
+}
+
+const statusColor: Record<TaskStatus, string> = {
+  waiting: "gray",
+  running: "blue",
+  completed: "green",
+  failed: "red",
+  cancelled: "yellow",
+};
+
+export function TaskStatusBadge({ status }: TaskStatusBadgeProps) {
+  const colorScheme = useComputedColorScheme();
+  const textColor = colorScheme === "dark" ? "black" : "white";
+
+  return (
+    <Badge color={statusColor[status]} variant="filled" c={textColor}>
+      {status}
+    </Badge>
+  );
+}

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>