feat(ui): show tap-collected attributes as badges in exchange header

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>