From c8fcee9d0997ab87e0a688da45ad7ba1642e45da Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 28 Mar 2026 15:12:37 +0100
Subject: [PATCH] feat(ui): add route and agent icons in exchange header

---
 ui/src/pages/Exchanges/ExchangeHeader.module.css | 5 +++++
 ui/src/pages/Exchanges/ExchangeHeader.tsx        | 3 +++
 2 files changed, 8 insertions(+)

diff --git a/ui/src/pages/Exchanges/ExchangeHeader.module.css b/ui/src/pages/Exchanges/ExchangeHeader.module.css
index cd2a94ef..1a3ed25d 100644
--- a/ui/src/pages/Exchanges/ExchangeHeader.module.css
+++ b/ui/src/pages/Exchanges/ExchangeHeader.module.css
@@ -36,6 +36,11 @@
   color: var(--text-muted);
 }
 
+.icon {
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
 .agentLabel {
   font-size: 0.625rem;
   font-weight: 600;
diff --git a/ui/src/pages/Exchanges/ExchangeHeader.tsx b/ui/src/pages/Exchanges/ExchangeHeader.tsx
index ca30b400..c6ce6f9b 100644
--- a/ui/src/pages/Exchanges/ExchangeHeader.tsx
+++ b/ui/src/pages/Exchanges/ExchangeHeader.tsx
@@ -1,4 +1,5 @@
 import { useNavigate } from 'react-router';
+import { GitBranch, Server } from 'lucide-react';
 import { StatusDot, MonoText, Badge } from '@cameleer/design-system';
 import { useCorrelationChain } from '../../api/queries/correlation';
 import type { ExecutionDetail } from '../../components/ExecutionDiagram/types';
@@ -57,10 +58,12 @@ export function ExchangeHeader({ detail }: ExchangeHeaderProps) {
         )}
         <span className={styles.separator} />
         <span className={styles.app}>{detail.applicationName}</span>
+        <GitBranch size={12} className={styles.icon} />
         <span className={styles.route}>{detail.routeId}</span>
         {detail.agentId && (
           <>
             <span className={styles.separator} />
+            <Server size={12} className={styles.icon} />
             <span className={styles.app}>{detail.applicationName}</span>
             <MonoText size="xs">{detail.agentId}</MonoText>
           </>