feat(17-01): create StatusBadge component

- Colored badges for initiative statuses (active, completed, archived)
- Colored badges for phase statuses (pending, in_progress, completed, blocked)
- Unknown statuses default to gray
- Display text uppercase with underscores replaced by spaces

packages/web/src/components/StatusBadge.tsx

@@ -0,0 +1,35 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const statusStyles: Record<string, string> = {
+  // Initiative statuses
+  active: "bg-blue-100 text-blue-800 hover:bg-blue-100/80 border-blue-200",
+  completed: "bg-green-100 text-green-800 hover:bg-green-100/80 border-green-200",
+  archived: "bg-gray-100 text-gray-800 hover:bg-gray-100/80 border-gray-200",
+
+  // Phase statuses
+  pending: "bg-gray-100 text-gray-800 hover:bg-gray-100/80 border-gray-200",
+  in_progress: "bg-blue-100 text-blue-800 hover:bg-blue-100/80 border-blue-200",
+  blocked: "bg-red-100 text-red-800 hover:bg-red-100/80 border-red-200",
+};
+
+const defaultStyle = "bg-gray-100 text-gray-800 hover:bg-gray-100/80 border-gray-200";
+
+function formatStatusText(status: string): string {
+  return status.replace(/_/g, " ").toUpperCase();
+}
+
+interface StatusBadgeProps {
+  status: string;
+  className?: string;
+}
+
+export function StatusBadge({ status, className }: StatusBadgeProps) {
+  const style = statusStyles[status] ?? defaultStyle;
+
+  return (
+    <Badge className={cn(style, className)}>
+      {formatStatusText(status)}
+    </Badge>
+  );
+}