From a1c894f72ff9cc77f077e561f6a0c0a1521ef6ea Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Sun, 29 Mar 2026 22:10:00 -0400
Subject: [PATCH] Extract TaskStatusBadge element with dark/light text color
 handling

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../TaskStatusBadge.stories.tsx               | 16 ++++++++++++
 .../TaskStatusBadge/TaskStatusBadge.tsx       | 25 +++++++++++++++++++
 .../components/groups/TaskCard/TaskCard.tsx   | 12 ++-------
 3 files changed, 43 insertions(+), 10 deletions(-)
 create mode 100644 clients/web/src/components/elements/TaskStatusBadge/TaskStatusBadge.stories.tsx
 create mode 100644 clients/web/src/components/elements/TaskStatusBadge/TaskStatusBadge.tsx

diff --git a/clients/web/src/components/elements/TaskStatusBadge/TaskStatusBadge.stories.tsx b/clients/web/src/components/elements/TaskStatusBadge/TaskStatusBadge.stories.tsx
new file mode 100644
index 00000000..2cdd88ef
--- /dev/null
+++ b/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" } };
diff --git a/clients/web/src/components/elements/TaskStatusBadge/TaskStatusBadge.tsx b/clients/web/src/components/elements/TaskStatusBadge/TaskStatusBadge.tsx
new file mode 100644
index 00000000..49c4d786
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/clients/web/src/components/groups/TaskCard/TaskCard.tsx b/clients/web/src/components/groups/TaskCard/TaskCard.tsx
index f9b0e909..91e099db 100644
--- a/clients/web/src/components/groups/TaskCard/TaskCard.tsx
+++ b/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>