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>
+  );
+}