From 7ee57ca975ad42534eff62f63f00212b313e91d7 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 28 Mar 2026 15:14:48 +0100
Subject: [PATCH] feat(ui): make app/route/agent clickable in exchange header
 for navigation

---
 .../pages/Exchanges/ExchangeHeader.module.css | 23 +++++++++++++++++++
 ui/src/pages/Exchanges/ExchangeHeader.tsx     | 18 ++++++++++-----
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/ui/src/pages/Exchanges/ExchangeHeader.module.css b/ui/src/pages/Exchanges/ExchangeHeader.module.css
index 1a3ed25d..346f235e 100644
--- a/ui/src/pages/Exchanges/ExchangeHeader.module.css
+++ b/ui/src/pages/Exchanges/ExchangeHeader.module.css
@@ -41,6 +41,29 @@
   flex-shrink: 0;
 }
 
+.linkBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: none;
+  border: none;
+  padding: 2px 4px;
+  margin: -2px 0;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.75rem;
+  transition: background 0.1s, color 0.1s;
+}
+
+.linkBtn:hover {
+  background: var(--bg-hover);
+}
+
+.linkBtn:hover .icon {
+  color: var(--amber);
+}
+
 .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 c6ce6f9b..0772be24 100644
--- a/ui/src/pages/Exchanges/ExchangeHeader.tsx
+++ b/ui/src/pages/Exchanges/ExchangeHeader.tsx
@@ -57,15 +57,21 @@ 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>
+        <button className={styles.linkBtn} onClick={() => navigate(`/exchanges/${detail.applicationName}`)} title="Show all exchanges for this application">
+          <span className={styles.app}>{detail.applicationName}</span>
+        </button>
+        <button className={styles.linkBtn} onClick={() => navigate(`/exchanges/${detail.applicationName}/${detail.routeId}`)} title="Show all exchanges for this route">
+          <span className={styles.route}>{detail.routeId}</span>
+          <GitBranch size={12} className={styles.icon} />
+        </button>
         {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>
+            <button className={styles.linkBtn} onClick={() => navigate(`/runtime/${detail.applicationName}/${detail.agentId}`)} title="Go to agent details">
+              <span className={styles.app}>{detail.applicationName}</span>
+              <MonoText size="xs">{detail.agentId}</MonoText>
+              <Server size={12} className={styles.icon} />
+            </button>
           </>
         )}
         <span className={styles.duration}>{formatDuration(detail.durationMs)}</span>