From 9062a23a5d081dbd0ffaabf25d071b8a23ca3843 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Fri, 20 Mar 2026 05:19:57 +0000
Subject: [PATCH] add beta tag to cluster visualization

---
 .../transaction/transaction-raw.component.html         |  2 +-
 .../transaction/transaction-raw.component.scss         | 10 ++++++++++
 .../components/transaction/transaction.component.html  |  2 +-
 .../components/transaction/transaction.component.scss  | 10 ++++++++++
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/transaction/transaction-raw.component.html b/frontend/src/app/components/transaction/transaction-raw.component.html
index dd474164a..ff9a2abf3 100644
--- a/frontend/src/app/components/transaction/transaction-raw.component.html
+++ b/frontend/src/app/components/transaction/transaction-raw.component.html
@@ -97,7 +97,7 @@
       <br>
       <div class="subtitle-block">
         <div class="title">
-          <h2 *ngIf="cpfpInfo?.cluster && cpfpMode === 'advanced'" i18n="transaction.cluster-mempool-chunking|Cluster Mempool Chunking">Cluster Mempool Chunking</h2>
+          <h2 *ngIf="cpfpInfo?.cluster && cpfpMode === 'advanced'"><span i18n="transaction.cluster-mempool-chunking|Cluster Mempool Chunking">Cluster Mempool Chunking</span><span class="badge badge-pill badge-warning cpfp-beta" i18n="beta">beta</span></h2>
           <h2 *ngIf="!(cpfpInfo?.cluster && cpfpMode === 'advanced')" i18n="transaction.related-transactions|CPFP List">Related Transactions</h2>
         </div>
         <div class="title-buttons" *ngIf="cpfpInfo?.cluster">
diff --git a/frontend/src/app/components/transaction/transaction-raw.component.scss b/frontend/src/app/components/transaction/transaction-raw.component.scss
index 936e86ada..cf5d08818 100644
--- a/frontend/src/app/components/transaction/transaction-raw.component.scss
+++ b/frontend/src/app/components/transaction/transaction-raw.component.scss
@@ -150,6 +150,16 @@
 	}
 }
 
+.cpfp-beta {
+  font-size: 10px;
+  padding: 3px 5px;
+}
+
+h2 .cpfp-beta {
+  margin-left: 5px;
+  vertical-align: super;
+}
+
 .subtitle-block {
   display: flex;
   flex-direction: row;
diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index a3ce2d3e7..bb6b33e3e 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -84,7 +84,7 @@
       <br>
       <div class="subtitle-block">
         <div class="title">
-          <h2 *ngIf="cpfpInfo?.cluster && cpfpMode === 'advanced'" i18n="transaction.cluster-mempool-chunking|Cluster Mempool Chunking">Cluster Mempool Chunking</h2>
+          <h2 *ngIf="cpfpInfo?.cluster && cpfpMode === 'advanced'"><span i18n="transaction.cluster-mempool-chunking|Cluster Mempool Chunking">Cluster Mempool Chunking</span><span class="badge badge-pill badge-warning cpfp-beta" i18n="beta">beta</span></h2>
           <h2 *ngIf="!(cpfpInfo?.cluster && cpfpMode === 'advanced')" i18n="transaction.related-transactions|CPFP List">Related Transactions</h2>
         </div>
         <div class="title-buttons" *ngIf="cpfpInfo?.cluster">
diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss
index 942a68076..180eea926 100644
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@@ -206,6 +206,16 @@
   bottom: -13px;
 }
 
+.cpfp-beta {
+  font-size: 10px;
+  padding: 3px 5px;
+}
+
+h2 .cpfp-beta {
+  margin-left: 5px;
+  vertical-align: super;
+}
+
 .subtitle-block {
   display: flex;
   flex-direction: row;