From e934b3116445dfa8696c150e9502d2561e95efe2 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 28 Mar 2026 15:07:23 +0100
Subject: [PATCH] feat(ui): show tap-collected attributes as badges in exchange
 header

---
 ui/src/pages/Exchanges/ExchangeHeader.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/ui/src/pages/Exchanges/ExchangeHeader.tsx b/ui/src/pages/Exchanges/ExchangeHeader.tsx
index 62d15d56..69d4487b 100644
--- a/ui/src/pages/Exchanges/ExchangeHeader.tsx
+++ b/ui/src/pages/Exchanges/ExchangeHeader.tsx
@@ -39,6 +39,7 @@ export function ExchangeHeader({ detail }: ExchangeHeaderProps) {
   const { data: chainResult } = useCorrelationChain(detail.correlationId ?? null);
   const chain = chainResult?.data;
   const showChain = chain && chain.length > 1;
+  const attrs = Object.entries(detail.attributes ?? {});
 
   return (
     <div className={styles.header}>
@@ -46,6 +47,15 @@ export function ExchangeHeader({ detail }: ExchangeHeaderProps) {
       <div className={styles.info}>
         <StatusDot variant={statusVariant(detail.status)} />
         <Badge label={statusLabel(detail.status)} color={statusVariant(detail.status)} />
+        {attrs.length > 0 && (
+          <>
+            <span className={styles.separator} />
+            {attrs.map(([k, v]) => (
+              <Badge key={k} label={`${k}: ${v}`} color="auto" />
+            ))}
+          </>
+        )}
+        <span className={styles.separator} />
         <MonoText size="xs">{detail.exchangeId || detail.executionId}</MonoText>
         <span className={styles.separator} />
         <span className={styles.route}>{detail.routeId}</span>