fix(frontend): Revert excessive changes, keep only Text/Button unmask prop

Reverts all changes that converted h1-h6/div/span elements to Text components.
Only the core unmask prop implementation in Text.tsx, Button.tsx, and helpers.ts
is preserved. This allows static content to be unmasked in Sentry replays without
refactoring HTML elements throughout the codebase.

Co-authored-by: Nicholas Tindle <ntindle@users.noreply.github.com>

autogpt_platform/frontend/src/components/atoms/Button/Button.tsx

@@ -20,12 +20,16 @@ export function Button(props: ButtonProps) {
     rightIcon,
     children,
     as = "button",
+    unmask = true,
     ...restProps
   } = props;
 
   const disabled = "disabled" in props ? props.disabled : false;
   const isDisabled = disabled;
 
+  const applyUnmask = (...classes: Array<string | false | null | undefined>) =>
+    cn(...classes, unmask && "sentry-unmask");
+
   // Extract aria-label for tooltip on icon variant
   const ariaLabel =
     "aria-label" in restProps ? restProps["aria-label"] : undefined;
@@ -84,11 +88,11 @@ export function Button(props: ButtonProps) {
   if (loading) {
     const loadingClassName =
       variant === "ghost"
-        ? cn(
+        ? applyUnmask(
             extendedButtonVariants({ variant, size, className }),
             "pointer-events-none",
           )
-        : cn(
+        : applyUnmask(
             extendedButtonVariants({ variant: "primary", size, className }),
             "pointer-events-none border-zinc-500 bg-zinc-500 text-white",
           );
@@ -120,7 +124,7 @@ export function Button(props: ButtonProps) {
     const nextLinkButton = (
       <NextLink
         {...(restProps as LinkProps)}
-        className={cn(
+        className={applyUnmask(
           extendedButtonVariants({ variant, size, className }),
           loading && "pointer-events-none",
           isDisabled && "pointer-events-none opacity-50",
@@ -136,7 +140,7 @@ export function Button(props: ButtonProps) {
 
   const regularButton = (
     <button
-      className={cn(
+      className={applyUnmask(
         extendedButtonVariants({ variant, size, className }),
         loading && "pointer-events-none",
       )}

autogpt_platform/frontend/src/components/atoms/Button/helpers.ts

@@ -50,6 +50,11 @@ type BaseButtonProps = {
   rightIcon?: React.ReactNode;
   asChild?: boolean;
   withTooltip?: boolean;
+  /**
+   * Adds the sentry-unmask class for static button labels.
+   * Disable for user-provided or dynamic strings.
+   */
+  unmask?: boolean;
 } & VariantProps<typeof extendedButtonVariants>;
 
 type ButtonAsButton = BaseButtonProps &

autogpt_platform/frontend/src/components/atoms/Text/Text.tsx

@@ -6,6 +6,11 @@ type CustomProps = {
   as?: As;
   size?: Variant;
   className?: string;
+  /**
+   * Adds the sentry-unmask class for static text visibility in replays.
+   * Disable when rendering user-provided or dynamic content.
+   */
+  unmask?: boolean;
 };
 
 export type TextProps = React.PropsWithChildren<
@@ -18,11 +23,14 @@ export function Text({
   as: outerAs,
   size,
   className = "",
+  unmask = true,
   ...rest
 }: TextProps) {
   const variantClasses = variants[size || variant] || variants.body;
   const Element = outerAs || variantElementMap[variant];
-  const combinedClassName = `${variantClasses} ${className}`.trim();
+  const combinedClassName = `${variantClasses} ${
+    unmask ? "sentry-unmask" : ""
+  } ${className}`.trim();
 
   return React.createElement(
     Element,