From 2f2e5034479e3807080aaf1069324bc915d5c8ae Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 28 Mar 2026 15:16:54 +0100
Subject: [PATCH] =?UTF-8?q?feat(ui):=20split=20agent=20links=20(app?=
 =?UTF-8?q?=E2=86=92overview,=20id=E2=86=92detail),=20color=20server=20ico?=
 =?UTF-8?q?n=20by=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/pages/Exchanges/ExchangeHeader.module.css | 15 +++++++++++++++
 ui/src/pages/Exchanges/ExchangeHeader.tsx        | 16 ++++++++++++++--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/ui/src/pages/Exchanges/ExchangeHeader.module.css b/ui/src/pages/Exchanges/ExchangeHeader.module.css
index 346f235e..756d436e 100644
--- a/ui/src/pages/Exchanges/ExchangeHeader.module.css
+++ b/ui/src/pages/Exchanges/ExchangeHeader.module.css
@@ -41,6 +41,21 @@
   flex-shrink: 0;
 }
 
+.iconLive {
+  color: var(--success);
+  flex-shrink: 0;
+}
+
+.iconStale {
+  color: var(--warning);
+  flex-shrink: 0;
+}
+
+.iconDead {
+  color: var(--error);
+  flex-shrink: 0;
+}
+
 .linkBtn {
   display: inline-flex;
   align-items: center;
diff --git a/ui/src/pages/Exchanges/ExchangeHeader.tsx b/ui/src/pages/Exchanges/ExchangeHeader.tsx
index 0772be24..7da195f0 100644
--- a/ui/src/pages/Exchanges/ExchangeHeader.tsx
+++ b/ui/src/pages/Exchanges/ExchangeHeader.tsx
@@ -1,7 +1,9 @@
+import { useMemo } from 'react';
 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 { useAgents } from '../../api/queries/agents';
 import type { ExecutionDetail } from '../../components/ExecutionDiagram/types';
 import styles from './ExchangeHeader.module.css';
 
@@ -42,6 +44,14 @@ export function ExchangeHeader({ detail }: ExchangeHeaderProps) {
   const showChain = chain && chain.length > 1;
   const attrs = Object.entries(detail.attributes ?? {});
 
+  // Look up agent state for icon coloring
+  const { data: agents } = useAgents(undefined, detail.applicationName);
+  const agentState = useMemo(() => {
+    if (!agents || !detail.agentId) return undefined;
+    const agent = (agents as any[]).find((a: any) => a.id === detail.agentId);
+    return agent?.state?.toLowerCase() as 'live' | 'stale' | 'dead' | undefined;
+  }, [agents, detail.agentId]);
+
   return (
     <div className={styles.header}>
       {/* Exchange info — always shown */}
@@ -67,10 +77,12 @@ export function ExchangeHeader({ detail }: ExchangeHeaderProps) {
         {detail.agentId && (
           <>
             <span className={styles.separator} />
-            <button className={styles.linkBtn} onClick={() => navigate(`/runtime/${detail.applicationName}/${detail.agentId}`)} title="Go to agent details">
+            <button className={styles.linkBtn} onClick={() => navigate(`/runtime/${detail.applicationName}`)} title="All agents for this application">
               <span className={styles.app}>{detail.applicationName}</span>
+            </button>
+            <button className={styles.linkBtn} onClick={() => navigate(`/runtime/${detail.applicationName}/${detail.agentId}`)} title="Agent details">
               <MonoText size="xs">{detail.agentId}</MonoText>
-              <Server size={12} className={styles.icon} />
+              <Server size={12} className={agentState === 'live' ? styles.iconLive : agentState === 'stale' ? styles.iconStale : agentState === 'dead' ? styles.iconDead : styles.icon} />
             </button>
           </>
         )}