feat: update usage recommendations across multiple workflow commands to require user confirmation and improve clarity

ccw/frontend/src/components/ui/Badge.tsx

@@ -33,10 +33,13 @@ export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {}
 
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
-}
+const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
+  ({ className, variant, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />
+    );
+  }
+);
+Badge.displayName = "Badge";
 
 export { Badge, badgeVariants };

ccw/frontend/src/components/ui/index.ts

@@ -95,3 +95,18 @@ export {
   CollapsibleTrigger,
   CollapsibleContent,
 } from "./Collapsible";
+
+// AlertDialog (Radix)
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from "./AlertDialog";