feat(content): pattern comparisons

frontend/src/components/ui/callout.tsx

@@ -4,10 +4,11 @@ import {
   Lightbulb,
   ClipboardList,
   Brain,
+  GitCompare,
   type LucideIcon,
 } from "lucide-react";
 
-type CalloutVariant = "warning" | "success" | "info" | "insight";
+type CalloutVariant = "warning" | "success" | "info" | "insight" | "pattern";
 
 interface CalloutProps {
   children: React.ReactNode;
@@ -45,6 +46,12 @@ const variantConfig: Record<
     bgClass: "bg-[var(--callout-insight-bg)]",
     iconClass: "text-[var(--callout-insight-fg)]",
   },
+  pattern: {
+    icon: GitCompare,
+    borderClass: "border-purple-500/50",
+    bgClass: "bg-purple-500/10",
+    iconClass: "text-purple-500",
+  },
 };
 
 export function Callout({