feat: Add unmask prop to Text and Button components

This change introduces an `unmask` prop to the Text and Button components. This prop controls whether the `sentry-unmask` class is applied, allowing for better control over Sentry's error tracking for dynamic content.

Co-authored-by: nicholas.tindle <nicholas.tindle@agpt.co>

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/StandardNodeBlock.tsx

@@ -43,10 +43,15 @@ export const StandardNodeBlock = ({
             <Text
               variant="large-semibold"
               className="tracking-tight text-slate-800"
+              unmask={false}
             >
               {beautifyString(data.title)}
             </Text>
-            <Text variant="small" className="!font-medium !text-slate-500">
+            <Text
+              variant="small"
+              className="!font-medium !text-slate-500"
+              unmask={false}
+            >
               #{nodeId.split("-")[0]}
             </Text>
           </div>

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/StickyNoteBlock.tsx

@@ -41,7 +41,11 @@ export const StickyNoteBlock = ({ data, id }: StickyNoteBlockType) => {
       )}
       style={{ transform: `rotate(${angle}deg)` }}
     >
-      <Text variant="h3" className="tracking-tight text-slate-800">
+      <Text
+        variant="h3"
+        className="tracking-tight text-slate-800"
+        unmask={false}
+      >
         Notes #{id.split("-")[0]}
       </Text>
       <FormCreator

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeCost.tsx

@@ -29,10 +29,10 @@ export const NodeCost = ({
   return (
     <div className="mr-3 flex items-center gap-1 text-base font-light">
       <CoinIcon className="h-3 w-3" />
-      <Text variant="small" className="!font-medium">
+      <Text variant="small" className="!font-medium" unmask={false}>
         {formatCredits(blockCost.cost_amount)}
       </Text>
-      <Text variant="small">
+      <Text variant="small" unmask={false}>
         {" \/"}
         {blockCost.cost_type}
       </Text>

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeDataRenderer.tsx

@@ -63,7 +63,7 @@ export const NodeDataRenderer = ({ nodeId }: { nodeId: string }) => {
                   >
                     Pin:
                   </Text>
-                  <Text variant="body" className="text-slate-700">
+                  <Text variant="body" className="text-slate-700" unmask={false}>
                     {beautifyString(key)}
                   </Text>
                 </div>
@@ -78,6 +78,7 @@ export const NodeDataRenderer = ({ nodeId }: { nodeId: string }) => {
                     <Text
                       variant="small"
                       className="rounded-xlarge bg-zinc-50 p-3 text-slate-700"
+                      unmask={false}
                     >
                       {JSON.stringify(value, null, 2)}
                     </Text>

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/OutputHandler.tsx

@@ -71,10 +71,19 @@ export const OutputHandler = ({
                     </Tooltip>
                   </TooltipProvider>
                 )}
-                <Text variant="body" className="text-slate-700">
+                <Text
+                  variant="body"
+                  className="text-slate-700"
+                  unmask={false}
+                >
                   {property?.title || key}{" "}
                 </Text>
-                <Text variant="small" as="span" className={colorClass}>
+                <Text
+                  variant="small"
+                  as="span"
+                  className={colorClass}
+                  unmask={false}
+                >
                   ({displayType})
                 </Text>
 

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode.tsx

@@ -800,7 +800,7 @@ export const CustomNode = React.memo(
                 ) : (
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <h3 className="font-roboto sentry-unmask cursor-default text-lg">
+                      <h3 className="font-roboto cursor-default text-lg">
                         <TextRenderer
                           value={displayTitle}
                           truncateLengthLimit={80}

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/AgentRunsView/components/EmptyAgentRuns/EmptyAgentRuns.tsx

@@ -30,11 +30,14 @@ export function EmptyAgentRuns({
               <Text
                 variant="h3"
                 className="truncate text-ellipsis !font-normal"
+                unmask={false}
               >
                 {agentName}
               </Text>
               {!isUnknownCreator ? (
-                <Text variant="body-medium">by {creatorName}</Text>
+                <Text variant="body-medium" unmask={false}>
+                  by {creatorName}
+                </Text>
               ) : null}
             </div>
             {description ? (
@@ -49,10 +52,10 @@ export function EmptyAgentRuns({
           </div>
 
           <div className="flex flex-col gap-4">
-            <Text variant="h4" className="sentry-unmask">
+            <Text variant="h4">
               You don&apos;t have any runs
             </Text>
-            <Text variant="large" className="sentry-unmask">
+            <Text variant="large">
               Get started with creating a run, and you&apos;ll see information
               here
             </Text>
@@ -60,8 +63,7 @@ export function EmptyAgentRuns({
           <RunAgentModal
             triggerSlot={
               <Button variant="primary" size="large" className="w-full">
-                <PlusIcon size={20} />{" "}
-                <span className="sentry-unmask">New Run</span>
+                <PlusIcon size={20} /> New Run
               </Button>
             }
             agent={agent}

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/AgentRunsView/components/RunAgentModal/components/AgentDetails/AgentDetails.tsx

@@ -15,7 +15,7 @@ export function AgentDetails({ agent }: Props) {
           Version
         </Text>
         <div className="flex items-center gap-2">
-          <Text variant="body" className="!text-zinc-700">
+          <Text variant="body" className="!text-zinc-700" unmask={false}>
             v{agent.graph_version}
           </Text>
           {agent.is_latest_version && (
@@ -29,7 +29,7 @@ export function AgentDetails({ agent }: Props) {
         <Text variant="body-medium" className="mb-1 !text-black">
           Last Updated
         </Text>
-        <Text variant="body" className="!text-zinc-700">
+        <Text variant="body" className="!text-zinc-700" unmask={false}>
           {formatDate(agent.updated_at)}
         </Text>
       </div>

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/AgentRunsView/components/RunAgentModal/components/AgentSectionHeader/AgentSectionHeader.tsx

@@ -7,7 +7,7 @@ interface Props {
 export function AgentSectionHeader({ title }: Props) {
   return (
     <div className="border-t border-zinc-400 px-0 pb-2 pt-1">
-      <Text variant="label" className="!text-zinc-700">
+      <Text variant="label" className="!text-zinc-700" unmask={false}>
         {title}
       </Text>
     </div>

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/AgentRunsView/components/RunAgentModal/components/ModalHeader/ModalHeader.tsx

@@ -18,9 +18,13 @@ export function ModalHeader({ agent }: ModalHeaderProps) {
         <Badge variant="info">New Run</Badge>
       </div>
       <div>
-        <Text variant="h3">{agent.name}</Text>
+        <Text variant="h3" unmask={false}>
+          {agent.name}
+        </Text>
         {!isUnknownCreator ? (
-          <Text variant="body-medium">by {agent.creator_name}</Text>
+          <Text variant="body-medium" unmask={false}>
+            by {agent.creator_name}
+          </Text>
         ) : null}
         <ShowMoreText
           previewLimit={80}

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/AgentRunsView/components/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx

@@ -127,7 +127,7 @@ export function ModalRunSection() {
 
               return (
                 <div key={key} className="flex flex-col gap-4">
-                  <Text variant="body-medium" as="h3">
+                  <Text variant="body-medium" as="h3" unmask={false}>
                     {toDisplayName(credential.provider)} credentials
                   </Text>
                   <div className="flex flex-col gap-3">
@@ -143,6 +143,7 @@ export function ModalRunSection() {
                         variant="body"
                         as="span"
                         className="!text-neutral-600"
+                        unmask={false}
                       >
                         {getCredentialTypeDisplayName(credential.type)}
                       </Text>
@@ -152,6 +153,7 @@ export function ModalRunSection() {
                         variant="body"
                         as="span"
                         className="!text-neutral-900"
+                        unmask={false}
                       >
                         {credential.title || "Untitled"}
                       </Text>

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/AgentRunsView/components/RunDetailHeader/RunDetailHeader.tsx

@@ -58,6 +58,7 @@ export function RunDetailHeader({
               <Text
                 variant="h3"
                 className="truncate text-ellipsis !font-normal"
+                unmask={false}
               >
                 {agent.name}
               </Text>
@@ -116,17 +117,21 @@ export function RunDetailHeader({
           </div>
           {run ? (
             <div className="mt-1 flex flex-wrap items-center gap-2 gap-y-1 text-zinc-600">
-              <Text variant="small" className="!text-zinc-600">
+              <Text variant="small" className="!text-zinc-600" unmask={false}>
                 Started {moment(run.started_at).fromNow()}
               </Text>
               <span className="mx-1 inline-block text-zinc-200">|</span>
-              <Text variant="small" className="!text-zinc-600">
+              <Text variant="small" className="!text-zinc-600" unmask={false}>
                 Version: {run.graph_version}
               </Text>
               {run.stats?.node_exec_count !== undefined && (
                 <>
                   <span className="mx-1 inline-block text-zinc-200">|</span>
-                  <Text variant="small" className="!text-zinc-600">
+                  <Text
+                    variant="small"
+                    className="!text-zinc-600"
+                    unmask={false}
+                  >
                     Steps: {run.stats.node_exec_count}
                   </Text>
                 </>
@@ -134,7 +139,11 @@ export function RunDetailHeader({
               {run.stats?.duration !== undefined && (
                 <>
                   <span className="mx-1 inline-block text-zinc-200">|</span>
-                  <Text variant="small" className="!text-zinc-600">
+                  <Text
+                    variant="small"
+                    className="!text-zinc-600"
+                    unmask={false}
+                  >
                     Duration:{" "}
                     {moment.duration(run.stats.duration, "seconds").humanize()}
                   </Text>
@@ -143,7 +152,11 @@ export function RunDetailHeader({
               {run.stats?.cost !== undefined && (
                 <>
                   <span className="mx-1 inline-block text-zinc-200">|</span>
-                  <Text variant="small" className="!text-zinc-600">
+                  <Text
+                    variant="small"
+                    className="!text-zinc-600"
+                    unmask={false}
+                  >
                     Cost: ${(run.stats.cost / 100).toFixed(2)}
                   </Text>
                 </>
@@ -151,14 +164,22 @@ export function RunDetailHeader({
               {run.stats?.activity_status && (
                 <>
                   <span className="mx-1 inline-block text-zinc-200">|</span>
-                  <Text variant="small" className="!text-zinc-600">
+                  <Text
+                    variant="small"
+                    className="!text-zinc-600"
+                    unmask={false}
+                  >
                     {String(run.stats.activity_status)}
                   </Text>
                 </>
               )}
             </div>
           ) : scheduleRecurrence ? (
-            <Text variant="small" className="mt-1 !text-zinc-600">
+            <Text
+              variant="small"
+              className="mt-1 !text-zinc-600"
+              unmask={false}
+            >
               {scheduleRecurrence}
             </Text>
           ) : null}

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/AgentRunsView/components/RunsSidebar/components/RunSidebarCard.tsx

@@ -33,10 +33,11 @@ export function RunSidebarCard({
           <Text
             variant="body-medium"
             className="block w-full truncate text-ellipsis"
+            unmask={false}
           >
             {title}
           </Text>
-          <Text variant="small" className="!text-zinc-500">
+          <Text variant="small" className="!text-zinc-500" unmask={false}>
             {description}
           </Text>
         </div>

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/AgentRunsView/components/SelectedRunView/components/RunStatusBadge.tsx

@@ -71,6 +71,7 @@ export function RunStatusBadge({ status }: Props) {
       <Text
         variant="small-medium"
         className={cn(statusIconMap[status].textColor, "capitalize")}
+        unmask={false}
       >
         {status.toLowerCase()}
       </Text>

autogpt_platform/frontend/src/app/(platform)/login/page.tsx

@@ -104,9 +104,7 @@ export default function LoginPage() {
               type="submit"
               className="mt-6 w-full"
             >
-              <span className="sentry-unmask">
-                {isLoading ? "Logging in..." : "Login"}
-              </span>
+              {isLoading ? "Logging in..." : "Login"}
             </Button>
           </form>
           {isCloudEnv ? (

autogpt_platform/frontend/src/app/(platform)/marketplace/components/AgentInfo/AgentInfo.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Text } from "@/components/atoms/Text/Text";
 import { StarRatingIcons } from "@/components/__legacy__/ui/icons";
 import { Separator } from "@/components/__legacy__/ui/separator";
 import Link from "next/link";
@@ -57,9 +58,12 @@ export const AgentInfo = ({
 
       {/* Creator */}
       <div className="mb-3 flex w-full items-center gap-1.5 lg:mb-4">
-        <div className="sentry-unmask text-base font-normal text-neutral-800 dark:text-neutral-200 sm:text-lg lg:text-xl">
+        <Text
+          variant="body"
+          className="text-base font-normal text-neutral-800 dark:text-neutral-200 sm:text-lg lg:text-xl"
+        >
           by
-        </div>
+        </Text>
         <Link
           data-testid={"agent-creator"}
           href={`/marketplace/creator/${encodeURIComponent(creator)}`}
@@ -90,9 +94,13 @@ export const AgentInfo = ({
               })
             }
           >
-            <span className="sentry-unmask justify-start font-sans text-sm font-medium leading-snug text-primary-foreground">
+            <Text
+              variant="body"
+              as="span"
+              className="justify-start font-sans text-sm font-medium leading-snug text-primary-foreground"
+            >
               {isAgentAddedToLibrary ? "See runs" : "Add to library"}
-            </span>
+            </Text>
           </button>
         )}
         <button
@@ -104,9 +112,13 @@ export const AgentInfo = ({
           onClick={() => handleDownload(agentId, name)}
           disabled={isDownloadingAgent}
         >
-          <div className="sentry-unmask justify-start text-center font-sans text-sm font-medium leading-snug text-zinc-800">
+          <Text
+            variant="body"
+            as="span"
+            className="justify-start text-center font-sans text-sm font-medium leading-snug text-zinc-800"
+          >
             Download agent
-          </div>
+          </Text>
         </button>
       </div>
 
@@ -118,9 +130,12 @@ export const AgentInfo = ({
           </span>
           <div className="flex gap-0.5">{StarRatingIcons(rating)}</div>
         </div>
-        <div className="sentry-unmask whitespace-nowrap text-base font-semibold text-neutral-800 dark:text-neutral-200 sm:text-lg">
+        <Text
+          variant="body-medium"
+          className="whitespace-nowrap text-base font-semibold text-neutral-800 dark:text-neutral-200 sm:text-lg"
+        >
           {runs.toLocaleString()} runs
-        </div>
+        </Text>
       </div>
 
       {/* Separator */}
@@ -128,9 +143,12 @@ export const AgentInfo = ({
 
       {/* Description Section */}
       <div className="mb-4 w-full lg:mb-[36px]">
-        <div className="sentry-unmask decoration-skip-ink-none mb-1.5 text-base font-medium leading-6 text-neutral-800 dark:text-neutral-200 sm:mb-2">
+        <Text
+          variant="body-medium"
+          className="decoration-skip-ink-none mb-1.5 text-base font-medium leading-6 text-neutral-800 dark:text-neutral-200 sm:mb-2"
+        >
           Description
-        </div>
+        </Text>
         <div
           data-testid={"agent-description"}
           className="whitespace-pre-line text-base font-normal leading-6 text-neutral-600 dark:text-neutral-400"
@@ -141,9 +159,12 @@ export const AgentInfo = ({
 
       {/* Categories */}
       <div className="mb-4 flex w-full flex-col gap-1.5 sm:gap-2 lg:mb-[36px]">
-        <div className="sentry-unmask decoration-skip-ink-none mb-1.5 text-base font-medium leading-6 text-neutral-800 dark:text-neutral-200 sm:mb-2">
+        <Text
+          variant="body-medium"
+          className="decoration-skip-ink-none mb-1.5 text-base font-medium leading-6 text-neutral-800 dark:text-neutral-200 sm:mb-2"
+        >
           Categories
-        </div>
+        </Text>
         <div className="flex flex-wrap gap-1.5 sm:gap-2">
           {categories.map((category, index) => (
             <div
@@ -158,15 +179,24 @@ export const AgentInfo = ({
 
       {/* Version History */}
       <div className="flex w-full flex-col gap-0.5 sm:gap-1">
-        <div className="sentry-unmask decoration-skip-ink-none mb-1.5 text-base font-medium leading-6 text-neutral-800 dark:text-neutral-200 sm:mb-2">
+        <Text
+          variant="body-medium"
+          className="decoration-skip-ink-none mb-1.5 text-base font-medium leading-6 text-neutral-800 dark:text-neutral-200 sm:mb-2"
+        >
           Version history
-        </div>
-        <div className="sentry-unmask decoration-skip-ink-none text-base font-normal leading-6 text-neutral-600 underline-offset-[from-font] dark:text-neutral-400">
+        </Text>
+        <Text
+          variant="body"
+          className="decoration-skip-ink-none text-base font-normal leading-6 text-neutral-600 underline-offset-[from-font] dark:text-neutral-400"
+        >
           Last updated {lastUpdated}
-        </div>
-        <div className="sentry-unmask text-xs text-neutral-600 dark:text-neutral-400 sm:text-sm">
+        </Text>
+        <Text
+          variant="small"
+          className="text-xs text-neutral-600 dark:text-neutral-400 sm:text-sm"
+        >
           Version {version}
-        </div>
+        </Text>
       </div>
     </div>
   );

autogpt_platform/frontend/src/app/(platform)/marketplace/components/AgentsSection/AgentsSection.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Text } from "@/components/atoms/Text/Text";
 import {
   Carousel,
   CarouselContent,
@@ -41,16 +42,21 @@ export const AgentsSection = ({
   return (
     <div className="flex flex-col items-center justify-center">
       <div className="w-full max-w-[1360px]">
-        <h2
+        <Text
+          variant="h4"
+          as="h2"
           style={{ marginBottom: margin }}
-          className="sentry-unmask font-poppins text-lg font-semibold text-[#282828] dark:text-neutral-200"
+          className="font-poppins text-lg font-semibold text-[#282828] dark:text-neutral-200"
         >
           {sectionTitle}
-        </h2>
+        </Text>
         {!displayedAgents || displayedAgents.length === 0 ? (
-          <div className="sentry-unmask text-center text-gray-500 dark:text-gray-400">
+          <Text
+            variant="body"
+            className="text-center text-gray-500 dark:text-gray-400"
+          >
             No agents found
-          </div>
+          </Text>
         ) : (
           <>
             {/* Mobile Carousel View */}

autogpt_platform/frontend/src/app/(platform)/marketplace/components/BecomeACreator/BecomeACreator.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Text } from "@/components/atoms/Text/Text";
 import { PublishAgentModal } from "@/components/contextual/PublishAgentModal/PublishAgentModal";
 import * as React from "react";
 
@@ -17,31 +18,47 @@ export function BecomeACreator({
   return (
     <div className="relative mx-auto h-auto min-h-[300px] w-full max-w-[1360px] md:min-h-[400px] lg:h-[459px]">
       {/* Title */}
-      <h2 className="sentry-unmask mb-[77px] font-poppins text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200">
+      <Text
+        variant="h4"
+        as="h2"
+        className="mb-[77px] font-poppins text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200"
+      >
         {title}
-      </h2>
+      </Text>
 
       {/* Content Container */}
       <div className="mx-auto w-full max-w-[900px] px-4 text-center md:px-6 lg:px-0">
-        <h2 className="sentry-unmask mb-6 text-center font-poppins text-[48px] font-semibold leading-[54px] tracking-[-0.012em] text-neutral-950 dark:text-neutral-50 md:mb-8 lg:mb-12">
+        <Text
+          variant="h3"
+          as="h2"
+          className="mb-6 text-center font-poppins text-[48px] font-semibold leading-[54px] tracking-[-0.012em] text-neutral-950 dark:text-neutral-50 md:mb-8 lg:mb-12"
+        >
           Build AI agents and share
           <br />
           <span className="text-violet-600 dark:text-violet-400">
             your
           </span>{" "}
           vision
-        </h2>
+        </Text>
 
-        <p className="sentry-unmask mx-auto mb-8 max-w-[90%] text-lg font-normal leading-relaxed text-neutral-700 dark:text-neutral-300 md:mb-10 md:text-xl md:leading-loose lg:mb-14 lg:text-2xl">
+        <Text
+          variant="body"
+          as="p"
+          className="mx-auto mb-8 max-w-[90%] text-lg font-normal leading-relaxed text-neutral-700 dark:text-neutral-300 md:mb-10 md:text-xl md:leading-loose lg:mb-14 lg:text-2xl"
+        >
           {description}
-        </p>
+        </Text>
 
         <PublishAgentModal
           trigger={
             <button className="inline-flex h-[48px] cursor-pointer items-center justify-center rounded-[38px] bg-neutral-800 px-8 py-3 transition-colors hover:bg-neutral-700 dark:bg-neutral-700 dark:hover:bg-neutral-600 md:h-[56px] md:px-10 md:py-4 lg:h-[68px] lg:px-12 lg:py-5">
-              <span className="sentry-unmask whitespace-nowrap font-poppins text-base font-medium leading-normal text-neutral-50 md:text-lg md:leading-relaxed lg:text-xl lg:leading-7">
+              <Text
+                variant="body"
+                as="span"
+                className="whitespace-nowrap font-poppins text-base font-medium leading-normal text-neutral-50 md:text-lg md:leading-relaxed lg:text-xl lg:leading-7"
+              >
                 {buttonText}
-              </span>
+              </Text>
             </button>
           }
         />

autogpt_platform/frontend/src/app/(platform)/marketplace/components/CreatorCard/CreatorCard.tsx

@@ -1,3 +1,4 @@
+import { Text } from "@/components/atoms/Text/Text";
 import Image from "next/image";
 import { backgroundColor } from "./helper";
 
@@ -47,9 +48,12 @@ export const CreatorCard = ({
         <p className="text-sm font-normal leading-normal text-neutral-600 dark:text-neutral-400">
           {bio}
         </p>
-        <div className="sentry-unmask text-lg font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
+        <Text
+          variant="body-medium"
+          className="text-lg font-semibold leading-7 text-neutral-800 dark:text-neutral-200"
+        >
           {agentsUploaded} agents
-        </div>
+        </Text>
       </div>
     </div>
   );

autogpt_platform/frontend/src/app/(platform)/marketplace/components/CreatorInfoCard/CreatorInfoCard.tsx

@@ -1,3 +1,4 @@
+import { Text } from "@/components/atoms/Text/Text";
 import Avatar, {
   AvatarFallback,
   AvatarImage,
@@ -59,9 +60,12 @@ export const CreatorInfoCard = ({
         <div className="flex w-full flex-col items-start justify-start gap-3">
           <div className="h-px w-full bg-neutral-700 dark:bg-neutral-300" />
           <div className="flex flex-col items-start justify-start gap-2.5">
-            <div className="sentry-unmask w-full text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
+            <Text
+              variant="body-medium"
+              className="w-full text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200"
+            >
               Top categories
-            </div>
+            </Text>
             <div
               className="flex flex-wrap items-center gap-2.5"
               role="list"
@@ -86,9 +90,12 @@ export const CreatorInfoCard = ({
           <div className="h-px w-full bg-neutral-700 dark:bg-neutral-300" />
           <div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row sm:gap-0">
             <div className="flex w-full flex-col items-start justify-start gap-2.5 sm:w-[164px]">
-              <div className="sentry-unmask w-full text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
+              <Text
+                variant="body-medium"
+                className="w-full text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200"
+              >
                 Average rating
-              </div>
+              </Text>
               <div className="inline-flex items-center gap-2">
                 <div className="text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200">
                   {averageRating.toFixed(1)}
@@ -103,12 +110,18 @@ export const CreatorInfoCard = ({
               </div>
             </div>
             <div className="flex w-full flex-col items-start justify-start gap-2.5 sm:w-[164px]">
-              <div className="sentry-unmask w-full text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
+              <Text
+                variant="body-medium"
+                className="w-full text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200"
+              >
                 Number of runs
-              </div>
-              <div className="sentry-unmask text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200">
+              </Text>
+              <Text
+                variant="body-medium"
+                className="text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200"
+              >
                 {new Intl.NumberFormat().format(totalRuns)} runs
-              </div>
+              </Text>
             </div>
           </div>
         </div>

autogpt_platform/frontend/src/app/(platform)/marketplace/components/FeaturedAgentCard/FeaturedAgentCard.tsx

@@ -3,11 +3,11 @@ import { StarRatingIcons } from "@/components/__legacy__/ui/icons";
 import {
   Card,
   CardContent,
-  CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/__legacy__/ui/card";
+import { Text } from "@/components/atoms/Text/Text";
 import { useState } from "react";
 import { StoreAgent } from "@/app/api/__generated__/models/storeAgent";
 
@@ -34,9 +34,9 @@ export const FeaturedAgentCard = ({
         <CardTitle className="line-clamp-2 text-base sm:text-xl">
           {agent.agent_name}
         </CardTitle>
-        <CardDescription className="sentry-unmask text-sm">
+        <Text variant="small" as="p" className="text-sm">
           By {agent.creator}
-        </CardDescription>
+        </Text>
       </CardHeader>
       <CardContent className="flex-1 p-4">
         <div className="relative aspect-[4/3] w-full overflow-hidden rounded-xl">
@@ -54,16 +54,21 @@ export const FeaturedAgentCard = ({
               isHovered ? "opacity-100" : "opacity-0"
             }`}
           >
-            <CardDescription className="line-clamp-[6] text-xs sm:line-clamp-[8] sm:text-sm">
+            <Text
+              variant="small"
+              as="p"
+              className="line-clamp-[6] text-xs sm:line-clamp-[8] sm:text-sm"
+              unmask={false}
+            >
               {agent.description}
-            </CardDescription>
+            </Text>
           </div>
         </div>
       </CardContent>
       <CardFooter className="flex items-center justify-between">
-        <div className="sentry-unmask font-semibold">
+        <Text variant="body-medium" className="font-semibold">
           {agent.runs?.toLocaleString() ?? "0"} runs
-        </div>
+        </Text>
         <div className="flex items-center gap-1.5">
           <p>{agent.rating.toFixed(1) ?? "0.0"}</p>
           {StarRatingIcons(agent.rating)}

autogpt_platform/frontend/src/app/(platform)/marketplace/components/FeaturedCreators/FeaturedCreators.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Text } from "@/components/atoms/Text/Text";
 import { CreatorCard } from "../CreatorCard/CreatorCard";
 import { useFeaturedCreators } from "./useFeaturedCreators";
 import { Creator } from "@/app/api/__generated__/models/creator";
@@ -19,9 +20,13 @@ export const FeaturedCreators = ({
   return (
     <div className="flex w-full flex-col items-center justify-center">
       <div className="w-full max-w-[1360px]">
-        <h2 className="sentry-unmask mb-9 font-poppins text-lg font-semibold text-neutral-800 dark:text-neutral-200">
+        <Text
+          variant="h4"
+          as="h2"
+          className="mb-9 font-poppins text-lg font-semibold text-neutral-800 dark:text-neutral-200"
+        >
           {title}
-        </h2>
+        </Text>
 
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
           {displayedCreators.map((creator, index) => (

autogpt_platform/frontend/src/app/(platform)/marketplace/components/FeaturedSection/FeaturedSection.tsx

@@ -9,6 +9,7 @@ import {
   CarouselIndicator,
 } from "@/components/__legacy__/ui/carousel";
 import Link from "next/link";
+import { Text } from "@/components/atoms/Text/Text";
 import { useFeaturedSection } from "./useFeaturedSection";
 import { StoreAgent } from "@/app/api/__generated__/models/storeAgent";
 import { getBackgroundColor } from "./helper";
@@ -25,9 +26,13 @@ export const FeaturedSection = ({ featuredAgents }: FeaturedSectionProps) => {
 
   return (
     <section className="w-full">
-      <h2 className="sentry-unmask mb-8 font-poppins text-2xl font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
+      <Text
+        variant="h3"
+        as="h2"
+        className="mb-8 font-poppins text-2xl font-semibold leading-7 text-neutral-800 dark:text-neutral-200"
+      >
         Featured agents
-      </h2>
+      </Text>
 
       <Carousel
         opts={{

autogpt_platform/frontend/src/app/(platform)/marketplace/components/HeroSection/HeroSection.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Text } from "@/components/atoms/Text/Text";
 import { FilterChips } from "../FilterChips/FilterChips";
 import { SearchBar } from "../SearchBar/SearchBar";
 import { useHeroSection } from "./useHeroSection";
@@ -10,7 +11,7 @@ export const HeroSection = () => {
     <div className="mb-2 mt-8 flex flex-col items-center justify-center px-4 sm:mb-4 sm:mt-12 sm:px-6 md:mb-6 md:mt-16 lg:my-24 lg:px-8 xl:my-16">
       <div className="w-full max-w-3xl lg:max-w-4xl xl:max-w-5xl">
         <div className="mb-4 text-center md:mb-8">
-          <h1 className="sentry-unmask text-center">
+          <Text variant="h3" as="h1" className="text-center">
             <span className="font-poppins text-[48px] font-semibold leading-[54px] text-neutral-950 dark:text-neutral-50">
               Explore AI agents built for{" "}
             </span>
@@ -24,11 +25,15 @@ export const HeroSection = () => {
             <span className="font-poppins text-[48px] font-semibold leading-[54px] text-blue-500">
               community
             </span>
-          </h1>
+          </Text>
         </div>
-        <h3 className="sentry-unmask mb:text-2xl mb-6 text-center font-sans text-xl font-normal leading-loose text-neutral-700 dark:text-neutral-300 md:mb-12">
+        <Text
+          variant="large"
+          as="h3"
+          className="mb:text-2xl mb-6 text-center font-sans text-xl font-normal leading-loose text-neutral-700 dark:text-neutral-300 md:mb-12"
+        >
           Bringing you AI agents designed by thinkers from around the world
-        </h3>
+        </Text>
         <div className="mb-4 flex justify-center sm:mb-5">
           <SearchBar height="h-[74px]" />
         </div>

autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainSearchResultPage/MainSearchResultPage.tsx

@@ -1,3 +1,4 @@
+import { Text } from "@/components/atoms/Text/Text";
 import { SearchBar } from "@/components/__legacy__/SearchBar";
 import { useMainSearchResultPage } from "./useMainSearchResultPage";
 import { SearchFilterChips } from "@/components/__legacy__/SearchFilterChips";
@@ -58,9 +59,13 @@ export const MainSearchResultPage = ({
       <div className="mx-auto min-h-screen max-w-[1440px] px-10 lg:min-w-[1440px]">
         <div className="mt-8 flex items-center">
           <div className="flex-1">
-            <h2 className="sentry-unmask text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
+            <Text
+              variant="body-medium"
+              as="h2"
+              className="text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200"
+            >
               Results for:
-            </h2>
+            </Text>
             <h1 className="font-poppins text-2xl font-semibold leading-[32px] text-neutral-800 dark:text-neutral-100">
               {searchTerm}
             </h1>
@@ -102,12 +107,20 @@ export const MainSearchResultPage = ({
           </>
         ) : (
           <div className="mt-20 flex flex-col items-center justify-center">
-            <h3 className="sentry-unmask mb-2 text-xl font-medium text-neutral-600 dark:text-neutral-300">
+            <Text
+              variant="large"
+              as="h3"
+              className="mb-2 text-xl font-medium text-neutral-600 dark:text-neutral-300"
+            >
               No results found
-            </h3>
-            <p className="sentry-unmask text-neutral-500 dark:text-neutral-400">
+            </Text>
+            <Text
+              variant="body"
+              as="p"
+              className="text-neutral-500 dark:text-neutral-400"
+            >
               Try adjusting your search terms or filters
-            </p>
+            </Text>
           </div>
         )}
       </div>

autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import { StarRatingIcons } from "@/components/__legacy__/ui/icons";
+import { Text } from "@/components/atoms/Text/Text";
 import Avatar, {
   AvatarFallback,
   AvatarImage,
@@ -80,9 +81,13 @@ export const StoreCard: React.FC<StoreCardProps> = ({
             {agentName}
           </h3>
           {!hideAvatar && creatorName && (
-            <p className="sentry-unmask mt-3 truncate font-sans text-xl font-normal text-neutral-600 dark:text-neutral-400">
+            <Text
+              variant="body"
+              as="p"
+              className="mt-3 truncate font-sans text-xl font-normal text-neutral-600 dark:text-neutral-400"
+            >
               by {creatorName}
-            </p>
+            </Text>
           )}
         </div>
 
@@ -99,9 +104,12 @@ export const StoreCard: React.FC<StoreCardProps> = ({
         {/* Fourth Section: Stats Row - aligned to bottom */}
         <div className="mt-5 w-full">
           <div className="flex items-center justify-between">
-            <div className="sentry-unmask text-lg font-semibold text-neutral-800 dark:text-neutral-200">
+            <Text
+              variant="body-medium"
+              className="text-lg font-semibold text-neutral-800 dark:text-neutral-200"
+            >
               {runs.toLocaleString()} runs
-            </div>
+            </Text>
             <div className="flex items-center gap-2">
               <span className="text-lg font-semibold text-neutral-800 dark:text-neutral-200">
                 {rating.toFixed(1)}

autogpt_platform/frontend/src/app/(platform)/profile/(user)/dashboard/components/AgentTableRow/AgentTableRow.tsx

@@ -115,12 +115,14 @@ export const AgentTableRow = ({
               variant="h3"
               className="line-clamp-1 text-ellipsis text-neutral-800 dark:text-neutral-200"
               size="large-medium"
+              unmask={false}
             >
               {agentName}
             </Text>
             <Text
               variant="body"
               className="line-clamp-1 text-ellipsis text-neutral-600 dark:text-neutral-400"
+              unmask={false}
             >
               {description}
             </Text>

autogpt_platform/frontend/src/app/(platform)/signup/page.tsx

@@ -124,7 +124,7 @@ export default function SignupPage() {
                       <FormLabel className="flex flex-wrap items-center gap-1">
                         <Text
                           variant="body-medium"
-                          className="sentry-unmask inline-block text-slate-950"
+                          className="inline-block text-slate-950"
                         >
                           I agree to the
                         </Text>
@@ -136,7 +136,7 @@ export default function SignupPage() {
                         </Link>
                         <Text
                           variant="body-medium"
-                          className="sentry-unmask inline-block text-slate-950"
+                          className="inline-block text-slate-950"
                         >
                           and
                         </Text>
@@ -152,7 +152,11 @@ export default function SignupPage() {
                   {termsError ? (
                     <div className="flex items-center gap-2">
                       <WarningOctagonIcon className="h-4 w-4 text-red-500" />
-                      <Text variant="small-medium" className="!text-red-500">
+                      <Text
+                        variant="small-medium"
+                        className="!text-red-500"
+                        unmask={false}
+                      >
                         {termsError}
                       </Text>
                     </div>
@@ -181,9 +185,7 @@ export default function SignupPage() {
               type="submit"
               className="mt-6 w-full"
             >
-              <span className="sentry-unmask">
-                {isLoading ? "Signing up..." : "Sign up"}
-              </span>
+              {isLoading ? "Signing up..." : "Sign up"}
             </Button>
           </form>
         </Form>

autogpt_platform/frontend/src/app/error.tsx

@@ -2,8 +2,8 @@
 
 import { useEffect } from "react";
 import { IconCircleAlert } from "@/components/__legacy__/ui/icons";
-import { Button } from "@/components/__legacy__/ui/button";
-import Link from "next/link";
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
 
 export default function Error({
   error,
@@ -22,21 +22,23 @@ export default function Error({
         <div className="mx-auto flex size-12 items-center justify-center rounded-full bg-muted">
           <IconCircleAlert className="size-10" />
         </div>
-        <h1 className="sentry-unmask mt-8 text-2xl font-bold tracking-tight text-foreground">
+        <Text
+          variant="h3"
+          as="h1"
+          className="mt-8 text-2xl font-bold tracking-tight text-foreground"
+        >
           Oops, something went wrong!
-        </h1>
-        <p className="sentry-unmask mt-4 text-muted-foreground">
+        </Text>
+        <Text as="p" className="mt-4 text-muted-foreground">
           We&apos;re sorry, but an unexpected error has occurred. Please try
           again later or contact support if the issue persists.
-        </p>
+        </Text>
         <div className="mt-6 flex flex-row justify-center gap-4">
           <Button onClick={reset} variant="outline">
-            <span className="sentry-unmask">Retry</span>
+            Retry
           </Button>
-          <Button>
-            <Link href="/" className="sentry-unmask">
-              Go to Homepage
-            </Link>
+          <Button as="NextLink" href="/">
+            Go to Homepage
           </Button>
         </div>
       </div>

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

@@ -14,12 +14,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");
+
   const buttonContent = (
     <>
       {loading && (
@@ -34,11 +38,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",
           );
@@ -64,7 +68,7 @@ export function Button(props: ButtonProps) {
     return (
       <Link
         {...(restProps as LinkProps)}
-        className={cn(
+        className={applyUnmask(
           extendedButtonVariants({ variant, size, className }),
           loading && "pointer-events-none",
           isDisabled && "pointer-events-none opacity-50",
@@ -78,7 +82,7 @@ export function Button(props: ButtonProps) {
 
   return (
     <button
-      className={cn(
+      className={applyUnmask(
         extendedButtonVariants({ variant, size, className }),
         loading && "pointer-events-none",
       )}

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

@@ -37,6 +37,11 @@ type BaseButtonProps = {
   leftIcon?: React.ReactNode;
   rightIcon?: React.ReactNode;
   asChild?: 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/DateTimeInput/DateTimeInput.tsx

@@ -226,6 +226,7 @@ export const DateTimeInput = ({
             "absolute left-0 top-full mt-1 !text-red-500 transition-opacity duration-200",
             error ? "opacity-100" : "opacity-0",
           )}
+          unmask={false}
         >
           {error || " "}
         </Text>

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

@@ -210,6 +210,7 @@ export function Input({
           "absolute left-0 top-full mt-1 !text-red-500 transition-opacity duration-200",
           error ? "opacity-100" : "opacity-0",
         )}
+        unmask={false}
       >
         {error || " "}{" "}
         {/* Always render with space to maintain consistent height calculation */}

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

@@ -128,6 +128,7 @@ export function Select({
           "absolute left-0 top-full mt-1 !text-red-500 transition-opacity duration-200",
           error ? "opacity-100" : "opacity-0",
         )}
+        unmask={false}
       >
         {error || " "}{" "}
         {/* Always render with space to maintain consistent height calculation */}

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,

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

@@ -87,6 +87,7 @@ export const TimeInput: React.FC<TimeInputProps> = ({
           "absolute left-0 top-full mt-1 !text-red-500 transition-opacity duration-200",
           error ? "opacity-100" : "opacity-0",
         )}
+        unmask={false}
       >
         {error || " "}{" "}
         {/* Always render with space to maintain consistent height calculation */}

autogpt_platform/frontend/src/components/contextual/PublishAgentModal/components/AgentReviewStep.tsx

@@ -47,12 +47,14 @@ export function AgentReviewStep({
               variant="lead"
               className="line-clamp-1 text-ellipsis text-center font-semibold"
               data-testid="view-agent-name"
+              unmask={false}
             >
               {agentName}
             </Text>
             <Text
               variant="large"
               className="line-clamp-1 text-ellipsis text-center !text-neutral-500"
+              unmask={false}
             >
               {subheader}
             </Text>
@@ -81,6 +83,7 @@ export function AgentReviewStep({
             <Text
               variant="large"
               className="line-clamp-1 text-ellipsis pt-2 text-center !text-neutral-500"
+              unmask={false}
             >
               {description}
             </Text>

autogpt_platform/frontend/src/components/contextual/PublishAgentModal/components/AgentSelectStep/AgentSelectStep.tsx

@@ -162,8 +162,14 @@ export function AgentSelectStep({
                         />
                       </div>
                       <div className="flex flex-col gap-2 p-3">
-                        <Text variant="large-medium">{agent.name}</Text>
-                        <Text variant="small" className="!text-neutral-500">
+                        <Text variant="large-medium" unmask={false}>
+                          {agent.name}
+                        </Text>
+                        <Text
+                          variant="small"
+                          className="!text-neutral-500"
+                          unmask={false}
+                        >
                           Edited {agent.lastEdited}
                         </Text>
                       </div>

autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/AgentActivityDropdown.tsx

@@ -47,7 +47,7 @@ export function AgentActivityDropdown() {
                 data-testid="agent-activity-hover-hint"
                 className="absolute bottom-[-2.5rem] left-1/2 z-50 hidden -translate-x-1/2 transform whitespace-nowrap rounded-small bg-white px-4 py-2 shadow-md group-hover:block"
               >
-                <Text variant="body-medium">
+                <Text variant="body-medium" unmask={false}>
                   {activeCount} running agent
                   {activeCount > 1 ? "s" : ""}
                 </Text>

autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityItem.tsx

@@ -91,6 +91,7 @@ export function ActivityItem({ execution }: Props) {
         <Text
           variant="body-medium"
           className="max-w-[16rem] truncate text-gray-900"
+          unmask={false}
         >
           {execution.agent_name}
         </Text>
@@ -99,7 +100,7 @@ export function ActivityItem({ execution }: Props) {
       {/* Agent Message - Indented */}
       <div className="ml-7 pt-1">
         {/* Time - Indented */}
-        <Text variant="small" className="!text-zinc-500">
+        <Text variant="small" className="!text-zinc-500" unmask={false}>
           {getTimeDisplay()}
         </Text>
       </div>

autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsx

@@ -343,7 +343,7 @@ export function Wallet() {
                 <span className="absolute right-1 top-1 h-2 w-2 rounded-full bg-violet-600"></span>
               )}
               <div className="absolute bottom-[-2.5rem] left-1/2 z-50 hidden -translate-x-1/2 transform whitespace-nowrap rounded-small bg-white px-4 py-2 shadow-md group-hover:block">
-                <Text variant="body-medium">
+                <Text variant="body-medium" unmask={false}>
                   {completedCount} of {totalCount} rewards claimed
                 </Text>
               </div>

autogpt_platform/frontend/src/components/molecules/ErrorCard/components/ActionButtons.tsx

@@ -22,7 +22,7 @@ export function ActionButtons({
       {onRetry && (
         <Button onClick={onRetry} variant="outline" size="small">
           <ArrowClockwise size={16} weight="bold" />
-          <span className="sentry-unmask">Try Again</span>
+          Try Again
         </Button>
       )}
 
@@ -32,7 +32,7 @@ export function ActionButtons({
         size="small"
       >
         <Bug size={16} weight="bold" />
-        <span className="sentry-unmask">Report Error</span>
+        Report Error
       </Button>
 
       <Button
@@ -44,7 +44,7 @@ export function ActionButtons({
         rel="noopener noreferrer"
       >
         <DiscordLogo size={16} weight="fill" />
-        <span className="sentry-unmask">Get Help</span>
+        Get Help
       </Button>
     </div>
   );

autogpt_platform/frontend/src/components/molecules/ErrorCard/components/ErrorHeader.tsx

@@ -9,7 +9,7 @@ export function ErrorHeader() {
         <Warning size={24} weight="fill" className="text-red-400" />
       </div>
       <div>
-        <Text variant="large-semibold" className="sentry-unmask text-zinc-800">
+        <Text variant="large-semibold" className="text-zinc-800">
           Something went wrong
         </Text>
       </div>

autogpt_platform/frontend/src/components/molecules/ErrorCard/components/ErrorMessage.tsx

@@ -9,11 +9,11 @@ interface Props {
 export function ErrorMessage({ errorMessage, context }: Props) {
   return (
     <div className="space-y-2">
-      <Text variant="body" className="sentry-unmask text-zinc-700">
+      <Text variant="body" className="text-zinc-700">
         We had the following error when retrieving {context ?? "your data"}:
       </Text>
       <div className="rounded-lg border border-zinc-100 bg-zinc-50 p-3">
-        <Text variant="body" className="sentry-unmask !text-red-700">
+        <Text variant="body" className="!text-red-700" unmask={false}>
           {errorMessage}
         </Text>
       </div>

autogpt_platform/frontend/src/components/molecules/ShowMore/ShowMore.tsx

@@ -34,7 +34,7 @@ export function ShowMore({
 
   if (!shouldTruncate) {
     return (
-      <Text variant={variant} className={cn(className)}>
+      <Text variant={variant} className={cn(className)} unmask={false}>
         {children}
       </Text>
     );
@@ -49,6 +49,7 @@ export function ShowMore({
           : "flex-start flex flex-wrap items-center",
         className,
       )}
+      unmask={false}
     >
       {displayText}
       {!isExpanded && "..."}

autogpt_platform/frontend/src/components/molecules/ShowMoreText/ShowMoreText.tsx

@@ -34,7 +34,7 @@ export function ShowMoreText({
 
   if (!shouldTruncate) {
     return (
-      <Text variant={variant} className={cn(className)}>
+      <Text variant={variant} className={cn(className)} unmask={false}>
         {children}
       </Text>
     );
@@ -49,6 +49,7 @@ export function ShowMoreText({
           : "flex-start flex flex-wrap items-center",
         className,
       )}
+      unmask={false}
     >
       {displayText}
       {!isExpanded && "..."}

autogpt_platform/frontend/src/components/renderers/input-renderer/fields/AnyOfField/AnyOfField.tsx

@@ -142,10 +142,11 @@ export const AnyOfField = ({
             )}
             <Text
               variant={formContext.size === "small" ? "body" : "body-medium"}
+              unmask={false}
             >
               {name.charAt(0).toUpperCase() + name.slice(1)}
             </Text>
-            <Text variant="small" className={colorClass}>
+            <Text variant="small" className={colorClass} unmask={false}>
               ({displayType} | null)
             </Text>
           </div>
@@ -172,7 +173,10 @@ export const AnyOfField = ({
             side="left"
           />
         )}
-        <Text variant={formContext.size === "small" ? "body" : "body-medium"}>
+        <Text
+          variant={formContext.size === "small" ? "body" : "body-medium"}
+          unmask={false}
+        >
           {name.charAt(0).toUpperCase() + name.slice(1)}
         </Text>
         {!isConnected && (

autogpt_platform/frontend/src/components/renderers/input-renderer/fields/CredentialField/models/OAuthCredentialModal/OAuthCredentialModal.tsx

@@ -51,7 +51,7 @@ export const OAuthCredentialModal = ({
       </Button>
       {error && (
         <div className="mt-2 flex w-fit items-center rounded-full bg-red-50 p-1 px-3 ring-1 ring-red-600">
-          <Text variant="small" className="!text-red-600">
+          <Text variant="small" className="!text-red-600" unmask={false}>
             {error as string}
           </Text>
         </div>

autogpt_platform/frontend/src/components/renderers/input-renderer/templates/FieldTemplate.tsx

@@ -108,6 +108,7 @@ const FieldTemplate: React.FC<FieldTemplateProps> = ({
                 isCredential && !shouldShowHandle && "ml-3",
                 size == "large" && "ml-0",
               )}
+              unmask={false}
             >
               {isCredential && credentialProvider
                 ? toDisplayName(credentialProvider) + " credentials"
@@ -115,7 +116,7 @@ const FieldTemplate: React.FC<FieldTemplateProps> = ({
             </Text>
           )}
           {!fromAnyOf && (
-            <Text variant="small" className={colorClass}>
+            <Text variant="small" className={colorClass} unmask={false}>
               ({displayType})
             </Text>
           )}

autogpt_platform/frontend/src/components/renderers/input-renderer/widgets/ObjectEditorWidget/ObjectEditorWidget.tsx

@@ -118,7 +118,11 @@ export const ObjectEditor = React.forwardRef<HTMLDivElement, ObjectEditorProps>(
                     side="left"
                   />
                 )}
-                <Text variant="small" className="!text-gray-500">
+                <Text
+                  variant="small"
+                  className="!text-gray-500"
+                  unmask={false}
+                >
                   #{key.trim() === "" ? "" : key}
                 </Text>
                 <Text variant="small" className="!text-green-500">